/* Site shell — nav, footer, page sections and the job list.
   Loaded alongside the block stylesheets (scroll-image.css on the home page,
   styles.css on the team page). Classes are prefixed site- / pg- / job- so
   they don't collide with the blocks. */

:root {
  /* Myton Food Group brand guidelines (Sept 2026) */
  --m-navy: #182342;   /* Dark Blue: text, contrast */
  --m-blue: #169CD8;   /* Bright Blue: main brand colour (Dark Blue text on it, 5:1) */
  --m-cyan: #169CD8;   /* Bright Blue as an accent */
  --m-light: #96CEE7;  /* Light Blue (support) */
  --m-tint: #EAF5FB;   /* Light Blue tint for panels */
  --m-slate: #5A6586;  /* secondary text (5.8:1 on white) */
  --m-off: #FFFFFF;    /* page background: white, so the logo always sits on white or Bright Blue */
  --m-panel: #F5F5F5;
  --m-white: #ffffff;
  --m-line: rgba(24, 35, 66, .14);

  --site-pad: clamp(20px, 3.4vw, 48px);
  --site-max: 1360px;
  --m-ease: cubic-bezier(.22, .8, .24, 1);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--m-off); color: var(--m-navy); }

.site-wrap {
  width: 100%;
  max-width: var(--site-max);
  margin: 0 auto;
  padding: 0 var(--site-pad);
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--m-navy);
  color: var(--m-white);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: .9em 1.4em;
  border-radius: 999px;
  border: 1px solid transparent;
  font: 700 16px/1 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn span[aria-hidden] { transition: transform .2s var(--m-ease); }
.btn:hover span[aria-hidden] { transform: translateX(3px); }
.btn--primary { background: var(--m-blue); color: var(--m-navy); }
.btn--primary:hover { background: var(--m-navy); color: var(--m-white); }
.btn--ghost { border-color: rgba(255, 255, 255, .6); color: var(--m-white); }
.btn--ghost:hover { background: var(--m-white); border-color: var(--m-white); color: var(--m-navy); }
.btn--line { border-color: var(--m-line); color: var(--m-navy); }
.btn--line:hover { border-color: var(--m-navy); }
.btn:focus-visible { outline: 2px solid var(--m-cyan); outline-offset: 3px; }

/* ---------- Nav (stanzza.design style) ----------
   MENU button left, logo centred, outlined CTA right. Dark text on light pages;
   .site-nav--over (team page) and the landed home hero switch it to white. */
.site-nav {
  --nav-fg: var(--m-navy);
  --nav-btn-bg: rgba(24, 35, 66, .08);
  --nav-btn-bg-hover: rgba(24, 35, 66, .14);
  position: relative;
  z-index: 120; /* above the open menu */
  color: var(--nav-fg);
}
.site-nav--over { position: absolute; top: 0; left: 0; right: 0; }
.site-nav--over:not(.site-nav--adaptive),
.hero-landed .site-nav--adaptive,
.menu-open .site-nav {
  --nav-fg: var(--m-white);
  --nav-btn-bg: rgba(255, 255, 255, .16);
  --nav-btn-bg-hover: rgba(255, 255, 255, .26);
}
.site-nav__bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 132px;
  padding: 0 24px;
}
.site-nav__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  display: block;
  line-height: 0;
}
.site-nav__logo img { width: 100px; height: 100px; }
.site-nav__logo:focus-visible { outline: 2px solid var(--m-cyan); outline-offset: 4px; border-radius: 50%; }

/* both nav buttons use the site's pill button style (.btn): bold 16px,
   sentence case, fully rounded. Search jobs is .btn--primary; Menu is the
   outline pill, navy on light pages and white over photos. */
.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding: 0 1.4em;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--nav-fg) 45%, transparent);
  background: var(--nav-btn-bg);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  color: var(--nav-fg);
  font: 700 16px/1 var(--font-sans);
  cursor: pointer;
  transition: background-color .3s, color .6s var(--m-ease), border-color .6s var(--m-ease);
}
.menu-btn:hover { background: var(--nav-btn-bg-hover); border-color: var(--nav-fg); }
.menu-btn [data-menu-label] { min-width: 2.9em; text-align: left; }
/* four-dot glyph */
.menu-btn__dots {
  display: grid;
  grid-template-columns: repeat(2, 3px);
  gap: 4px;
}
.menu-btn__dots i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
/* open: dots fade out, a cross draws in */
.menu-btn__dots { position: relative; }
.menu-btn__dots::before, .menu-btn__dots::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 1.5px;
  margin: -.75px 0 0 -7px;
  background: currentColor;
  scale: 0 1;
  transition: scale .35s var(--m-ease);
}
.menu-btn__dots::before { rotate: 45deg; }
.menu-btn__dots::after { rotate: -45deg; }
.menu-btn__dots i { transition: opacity .2s; }
.menu-btn[aria-expanded="true"] .menu-btn__dots i { opacity: 0; }
.menu-btn[aria-expanded="true"] .menu-btn__dots::before,
.menu-btn[aria-expanded="true"] .menu-btn__dots::after { scale: 1 1; transition-delay: .1s; }
.nav-cta { height: 48px; padding: 0 1.4em; }
.menu-btn:focus-visible, .nav-cta:focus-visible { outline: 2px solid var(--m-cyan); outline-offset: 3px; }

/* ---------- Full-screen menu ---------- */
.site-menu {
  position: fixed;
  inset: 0;
  z-index: 110;
  overflow-y: auto;
  background: var(--m-navy);
  color: var(--m-white);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .6s cubic-bezier(.7, 0, .2, 1);
}
.site-menu.is-open { clip-path: inset(0 0 0 0); }
.menu-open { overflow: hidden; }
.menu-open .site-nav { position: fixed; top: 0; left: 0; right: 0; }
.site-menu__inner {
  min-height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: end;
  gap: 48px;
  padding: 140px clamp(24px, 6vw, 96px) clamp(40px, 7vh, 80px);
}
.site-menu__links { margin: 0; padding: 0; list-style: none; }
.site-menu__links li, .site-menu__side {
  opacity: 0;
  translate: 0 40px;
  transition: opacity .3s, translate .5s var(--m-ease);
}
.site-menu.is-open .site-menu__links li,
.site-menu.is-open .site-menu__side {
  opacity: 1;
  translate: 0 0;
  transition: opacity .5s, translate .8s var(--m-ease);
  transition-delay: calc(.25s + var(--n) * .06s);
}
.site-menu__links a {
  display: inline-flex;
  align-items: baseline;
  gap: 20px;
  padding: 4px 0;
  color: var(--m-white);
  text-decoration: none;
  font-size: clamp(40px, 6.4vw, 96px);
  line-height: 1.02;
  letter-spacing: -.035em;
  transition: translate .4s var(--m-ease);
}
.site-menu__num { font-size: 14px; letter-spacing: .14em; color: var(--m-cyan); translate: 0 -1.6em; }
.site-menu__links a:hover { translate: 12px 0; }
.site-menu__links a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--m-cyan); text-decoration-thickness: 3px; text-underline-offset: .14em; }
.site-menu__links a:focus-visible { outline: 2px solid var(--m-cyan); outline-offset: 4px; }
.site-menu__side { padding-bottom: 12px; }
.site-menu__label { margin: 0 0 16px; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.site-menu__side ul { margin: 0 0 32px; padding: 0; list-style: none; display: grid; gap: 10px; }
.site-menu__side a:not(.btn) { color: var(--m-white); font-size: 18px; text-decoration: none; }
.site-menu__side a:not(.btn):hover { text-decoration: underline; }
@media (max-width: 760px) {
  .site-nav__bar { height: 124px; padding: 0 16px; }
  .menu-btn, .nav-cta { height: 42px; padding: 0 1em; font-size: 14px; }
  .menu-btn [data-menu-label] { min-width: 0; }
  .nav-cta span[aria-hidden] { display: none; }
  .site-menu__inner { grid-template-columns: 1fr; align-items: start; padding-top: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-menu, .site-menu__links li, .site-menu__side { transition: none; }
}

/* ---------- Breadcrumb ---------- */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  font-size: 14px;
}
.crumbs li + li::before { content: "/"; margin-right: 8px; opacity: .6; }
.crumbs a { color: inherit; }
.crumbs [aria-current] { font-weight: 700; }

/* ---------- Eyebrow + headings ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  font-size: 16px;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--m-cyan);
}
.pg-h2 {
  margin: 0;
  font-size: clamp(32px, 3.6vw, 56px);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -.025em;
}

/* ---------- Team hero (full-bleed photo) ---------- */
.pg-hero {
  position: relative;
  min-height: 92vh;
  min-height: 92svh;
  display: flex;
  align-items: flex-end;
  color: var(--m-white);
  background: var(--m-navy);
  overflow: hidden;
}
.pg-hero__media {
  position: absolute;
  inset: 0;
  background: center / cover no-repeat;
  transform: scale(1.06);
  animation: pg-settle 1.8s var(--m-ease) both;
}
.pg-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(18, 26, 51, .85) 0%, rgba(18, 26, 51, .2) 55%, rgba(18, 26, 51, .45) 100%),
    linear-gradient(90deg, rgba(18, 26, 51, .55), rgba(18, 26, 51, 0) 70%);
}
@keyframes pg-settle { from { transform: scale(1.14); } }
.pg-hero__content {
  position: relative;
  z-index: 1;
  padding-top: 140px;
  padding-bottom: clamp(48px, 7vw, 96px);
}
.pg-hero .eyebrow::before { background: var(--m-cyan); }
.pg-hero__title {
  margin: 0;
  font-size: clamp(64px, 11vw, 176px);
  line-height: .9;
  font-weight: 700;
  letter-spacing: -.04em;
}
.pg-hero__lede {
  max-width: 34em;
  margin: 28px 0 36px;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.45;
}
.pg-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.pg-hero__cue {
  position: absolute;
  right: var(--site-pad);
  bottom: clamp(48px, 7vw, 96px);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.pg-hero__cue::after {
  content: "";
  width: 1px;
  height: 56px;
  background: linear-gradient(var(--m-white), transparent);
}
@media (prefers-reduced-motion: reduce) { .pg-hero__media { animation: none; transform: none; } }

/* ---------- Team intro ---------- */
.pg-intro { padding: clamp(80px, 10vw, 160px) 0; background: var(--m-white); }
.pg-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(40px, 7vw, 120px);
  align-items: start;
}
.pg-intro__body p {
  margin: 0 0 20px;
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.6;
  color: var(--m-slate);
}
.pg-intro__body p:first-child { color: var(--m-navy); }
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: clamp(56px, 7vw, 96px) 0 0;
  padding: 0;
  list-style: none;
}
.stats li {
  padding-top: 24px;
  border-top: 2px solid var(--m-navy);
}
.stats strong {
  display: block;
  font-size: clamp(44px, 5vw, 80px);
  line-height: .9;
  font-weight: 400;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.stats span {
  display: block;
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--m-slate);
}

/* ---------- CTA band ---------- */
.pg-cta {
  padding: clamp(80px, 10vw, 150px) 0;
  background: var(--m-navy);
  color: var(--m-white);
  position: relative;
  overflow: hidden;
}
/* logo waves, very faint */
.pg-cta::before {
  content: "";
  position: absolute;
  right: -10%;
  bottom: -40%;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-radial-gradient(circle at 50% 120%, transparent 0 34px, rgba(0, 159, 226, .14) 34px 52px);
  pointer-events: none;
}
.pg-cta__inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.pg-cta p { max-width: 32em; margin: 20px 0 0; font-size: 19px; line-height: 1.5; }

/* ---------- Home: team cards ---------- */
.pg-teams { padding: clamp(80px, 10vw, 150px) 0; background: var(--m-off); }
.pg-teams__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 48px;
}
.team-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.team-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  color: var(--m-white);
  text-decoration: none;
  background: var(--m-navy);
}
.team-card__img {
  position: absolute;
  inset: 0;
  background: center / cover no-repeat;
  transition: transform .8s var(--m-ease);
}
.team-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(18, 26, 51, .82), rgba(18, 26, 51, 0) 60%);
}
.team-card__body { position: relative; z-index: 1; padding: 28px; width: 100%; }
.team-card__title { margin: 0; font-size: clamp(28px, 2.6vw, 40px); font-weight: 700; letter-spacing: -.02em; }
.team-card__meta { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: 16px; }
.team-card__arrow {
  width: 44px; height: 44px;
  display: inline-grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .6);
  transition: background-color .2s, color .2s;
}
.team-card:hover .team-card__img { transform: scale(1.05); }
.team-card:hover .team-card__arrow { background: var(--m-white); color: var(--m-navy); }
.team-card:focus-visible { outline: 3px solid var(--m-cyan); outline-offset: 4px; }

/* ---------- Jobs page ---------- */
.jobs-head { padding: 56px 0 64px; background: var(--m-off); }
.jobs-head h1 {
  margin: 0;
  font-size: clamp(48px, 7vw, 112px);
  line-height: .92;
  font-weight: 700;
  letter-spacing: -.04em;
}
.jobs-head__lede { max-width: 36em; margin: 24px 0 0; font-size: 19px; line-height: 1.5; color: var(--m-slate); }

.jobs { padding: 0 0 clamp(80px, 10vw, 140px); background: var(--m-off); }
.jobs__grid {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
.jobs__filters {
  position: sticky;
  top: 24px;
  padding: 28px;
  background: var(--m-white);
}
.jobs__filters fieldset { margin: 0 0 28px; padding: 0; border: 0; }
.jobs__filters legend, .jobs__filters label.f-label {
  display: block;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 700;
}
.search {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--m-line);
  border-radius: 8px;
  font: 400 16px var(--font-sans);
  color: var(--m-navy);
  background: var(--m-off);
}
.search:focus { outline: 2px solid var(--m-cyan); outline-offset: 1px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--m-line);
  font-size: 14px;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.chip span:hover { border-color: var(--m-navy); }
.chip input:checked + span { background: var(--m-navy); border-color: var(--m-navy); color: var(--m-white); }
.chip input:focus-visible + span { outline: 2px solid var(--m-cyan); outline-offset: 2px; }

.jobs__count { margin: 0 0 16px; font-size: 16px; color: var(--m-slate); }
.jobs__count strong { color: var(--m-navy); }
.job-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--m-line); }
.job { border-bottom: 1px solid var(--m-line); }
.job[hidden] { display: none; }
.job a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 32px;
  padding: 28px 8px;
  color: var(--m-navy);
  text-decoration: none;
  transition: background-color .2s, padding .3s var(--m-ease);
}
.job a:hover { background: var(--m-white); padding-left: 24px; padding-right: 24px; }
.job a:focus-visible { outline: 2px solid var(--m-cyan); outline-offset: -2px; }
.job__title { margin: 0; font-size: clamp(20px, 1.7vw, 26px); font-weight: 700; letter-spacing: -.015em; }
.job__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 15px; color: var(--m-slate); }
.job__meta li { display: inline-flex; align-items: center; gap: 6px; }
.job__meta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.job__tag {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--m-white);
  font-size: 13px;
  white-space: nowrap;
}
.job a:hover .job__tag { background: var(--m-off); }
.job__pay { min-width: 9em; text-align: right; font-size: 16px; font-weight: 700; white-space: nowrap; }
.job__pay small { display: block; margin-top: 4px; font-weight: 400; font-size: 13px; color: var(--m-slate); }
.jobs__empty { padding: 48px 0; font-size: 18px; color: var(--m-slate); }

.alerts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 48px;
  padding: 32px;
  background: var(--m-navy);
  color: var(--m-white);
}
.alerts h2 { margin: 0; font-size: 24px; letter-spacing: -.015em; }
.alerts p { margin: 8px 0 0; font-size: 16px; opacity: .85; }

/* ---------- Footer ---------- */
.site-foot { padding: 72px 0 40px; background: #182342; color: var(--m-white); }
.site-foot__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
}
.site-foot__top img { width: 76px; height: 76px; }
.site-foot__cols { display: flex; flex-wrap: wrap; gap: clamp(40px, 6vw, 96px); }
.site-foot h2 { margin: 0 0 16px; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.site-foot ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.site-foot a { color: var(--m-white); text-decoration: none; }
.site-foot a:hover { text-decoration: underline; }
.site-foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 28px; font-size: 14px; opacity: .7; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .pg-intro__grid { grid-template-columns: 1fr; }
  .team-cards { grid-template-columns: 1fr; }
  .team-card { aspect-ratio: 16 / 10; }
  .jobs__grid { grid-template-columns: 1fr; }
  .jobs__filters { position: static; }
  .job a { grid-template-columns: 1fr; gap: 12px; }
  .job__tag { justify-self: start; }
  .job__pay { text-align: left; }
  .pg-hero__cue { display: none; }
}
@media (max-width: 600px) {
  .stats { grid-template-columns: 1fr; }
}

/* ---------- Home hero (landed state, dwell.au style) ----------
   body.hero-landed is set by scroll-image.js once the photo has opened out to
   full bleed; --hero-out (0→1) is the first stretch of scroll, as the words leave. */
.site-nav--home { transition: opacity .3s; }

.hw {
  --o: var(--hero-out, 0);
  position: absolute;
  inset: 0;
  z-index: 3; /* over the video card */
  pointer-events: none;
  color: var(--m-white);
}
.hw__title {
  margin: 0;
  font-weight: 400;
  font-size: clamp(64px, 10.4vw, 200px);
  line-height: .9;
  letter-spacing: -.045em;
}
.hw__w {
  position: absolute;
  display: block;
  overflow: hidden;
  padding: 0 .04em .3em; /* room for descenders (g, y, p) inside the reveal mask */
  white-space: nowrap;
}
.hw__w > span {
  display: block;
  transform: translateY(140%); /* clears the deeper descender mask */
  transition: transform 1.3s var(--m-ease);
}
.hero-landed .hw__w > span { transform: none; }
.hw__w--1 { left: 7vw;  top: 15vh; }
.hw__w--2 { right: 6vw; top: 41vh; }
.hw__w--3 { left: 18vw; bottom: 9vh; }
.hero-landed .hw__w--1 > span { transition-delay: .05s; }
.hero-landed .hw__w--2 > span { transition-delay: .2s; }
.hero-landed .hw__w--3 > span { transition-delay: .35s; }
/* on scroll the words split apart */
.hw__w--1 { transform: translate(calc(var(--o) * -40vw), calc(var(--o) * -10vh)); opacity: calc(1 - var(--o)); }
.hw__w--2 { transform: translateX(calc(var(--o) * 40vw)); opacity: calc(1 - var(--o)); }
.hw__w--3 { transform: translateY(calc(var(--o) * 30vh)); opacity: calc(1 - var(--o)); }

.hw__desc, .hw__cta, .hw__cue {
  position: absolute;
  opacity: 0;
  translate: 0 16px;
  transition: opacity .9s var(--m-ease) .6s, translate .9s var(--m-ease) .6s;
}
.hero-landed .hw__desc, .hero-landed .hw__cta, .hero-landed .hw__cue { opacity: calc(1 - var(--o) * 2.5); translate: 0 0; }
.hw__desc {
  left: 7vw;
  top: 47vh;
  max-width: 19em;
  margin: 0;
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.45;
}
.hw__cta { right: 6vw; bottom: 12vh; pointer-events: auto; }
.hero-landed .hw__cta { transition-delay: .75s; }
.hw__cue {
  left: 7vw;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.hw__cue::after {
  content: "";
  width: 1px;
  height: 64px;
  margin-left: 2px;
  background: linear-gradient(var(--m-white), transparent);
}
/* stories take over once the words have gone */
.hero-out .hw__cta { pointer-events: none; }

@media (max-width: 960px) {
  .hw__title { font-size: 17vw; }
  .hw__w--1 { left: 20px; top: 14vh; }
  .hw__w--2 { right: 20px; top: auto; bottom: 30vh; }
  .hw__w--3 { left: 20px; bottom: 16vh; }
  .hw__desc { left: 20px; right: 20px; top: auto; bottom: 5vh; max-width: none; font-size: 15px; }
  .hw__cta { left: 20px; right: auto; bottom: 6vh; }
  .hw__cue { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hw__w > span, .hw__desc, .hw__cta, .hw__cue { transition: none; }
}

/* ---------- Jobs: live data additions ---------- */
.job__shift { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: var(--m-slate); max-width: 46em; }
.job__pay { font-weight: 400; color: var(--m-slate); font-size: 14px; }
.job__pay small { color: var(--m-slate); }
.jobs__more { margin-top: 32px; }
.jobs__source { margin: 24px 0 0; font-size: 14px; color: var(--m-slate); }
.jobs__source a { color: var(--m-navy); }
select.search { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--m-navy) 50%), linear-gradient(135deg, var(--m-navy) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; cursor: pointer; }
.btn[hidden] { display: none; }

/* video counter + pause only once the hero words have gone */
.isc:not(.hero-out) .isc__controls { opacity: 0; }
.isc:not(.hero-out) .isc__motion { pointer-events: none; }

/* ---------- Team hero (kozowood.com/en/about style) ---------- */
.kz {
  --kz-bg: #FFFFFF;   /* white */
  --kz-ink: #182342;  /* Myton navy (12:1 on the bg) */
  --fs: min(11.4vw, 17.5vh);
  position: relative;
  background: var(--kz-bg);
}
.kz__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.kz__layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  color: var(--kz-ink);
  padding-top: max(128px, 14vh);
}
.kz__layer--light { z-index: 3; color: var(--m-white); pointer-events: none; }
.kz__media {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #121A33;
}
.kz__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  scale: calc(1.18 - var(--open, 0) * .18);
}
/* tint so the white words read over the footage */
.kz__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(18, 26, 51, .32);
  opacity: calc(.4 + var(--open, 0) * .6);
}

.kz__title {
  margin: 0;
  font-weight: 400;
  font-size: var(--fs);
  line-height: .8;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.kz__row {
  display: flex;
  align-items: center;
  height: 1.08em;
}
.kz__row--1 { padding-left: 27vw; }
.kz__row--2 { padding-left: 37vw; }
.kz__row--3 { padding-left: 5vw; }
.kz__row--4 { padding-left: 25vw; }
.kz__w { display: block; overflow: hidden; padding: .06em .02em .02em; }
.kz__w > span {
  display: block;
  translate: 0 105%;
  transition: translate 1.2s var(--m-ease);
}
.kz.is-in .kz__w > span { translate: 0 0; }
.kz.is-in .kz__row--2 .kz__w > span { transition-delay: .1s; }
.kz.is-in .kz__row--3 .kz__w > span { transition-delay: .2s; }
.kz.is-in .kz__row--4 .kz__w > span { transition-delay: .3s; }
/* the video's starting window, set into line three */
.kz__slot {
  flex: none;
  width: 2.6em;
  height: .74em;
  margin-left: .22em;
  margin-top: .02em;
}
.kz__eyebrow, .kz__desc {
  position: absolute;
  margin: 0;
  opacity: 0;
  translate: 0 12px;
  transition: opacity .8s var(--m-ease) .6s, translate .8s var(--m-ease) .6s;
}
.kz.is-in .kz__eyebrow, .kz.is-in .kz__desc { opacity: 1; translate: 0 0; }
.kz__eyebrow {
  left: 5vw;
  top: calc(max(128px, 14vh) + var(--fs) * .1);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.kz__desc {
  right: 4vw;
  top: calc(max(128px, 14vh) + var(--fs) * 3.24 + var(--fs) * .14);
  width: min(25vw, 380px);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.45;
}
.kz__layer--light .kz__desc, .kz__layer--light .kz__eyebrow { text-shadow: 0 1px 12px rgba(0, 0, 0, .25); }

/* nav sits over the pale green until the video has opened */
.site-nav--adaptive .menu-btn, .site-nav--adaptive .nav-cta { transition: background-color .3s, color .4s, border-color .4s; }

/* Produce intro additions */
.pg-intro .crumbs { margin-bottom: 56px; color: var(--m-slate); }
.produce-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: clamp(56px, 7vw, 96px) 0 0;
  padding: 0;
  list-style: none;
}
.produce-split img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.produce-split h3 { margin: 24px 0 8px; font-size: clamp(24px, 2vw, 32px); letter-spacing: -.02em; }
.produce-split p { margin: 0; max-width: 32em; font-size: 17px; line-height: 1.55; color: var(--m-slate); }

@media (max-width: 760px) {
  .kz { --fs: 21vw; }
  .kz__layer { padding-top: 22vh; }
  .kz__row--1 { padding-left: 12vw; }
  .kz__row--2 { padding-left: 24vw; }
  .kz__row--3 { padding-left: 16px; }
  .kz__row--4 { padding-left: 8vw; }
  .kz__slot { width: 1.9em; }
  .kz__eyebrow { display: none; }
  .kz__desc { left: 16px; right: 16px; width: auto; top: calc(22vh + var(--fs) * 4.5); font-size: 15px; }
  .produce-split { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .kz__w > span, .kz__eyebrow, .kz__desc { transition: none; }
}

.team-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--m-navy);
  color: var(--m-white);
  font: 400 14px/1 var(--font-sans);
  cursor: pointer;
}
.team-chip[hidden] { display: none; }
.team-chip:hover { background: var(--m-blue); color: var(--m-navy); }
.team-chip:focus-visible { outline: 2px solid var(--m-cyan); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Produce illustrations (scattered through the team hero) ----------
   Pieces of one original linocut (apples, grapes, onion, carrots, potatoes),
   flat ink in Myton blue, kept light so it stays in the background. They sit in the open spaces,
   behind the words and the video, and fade in once the words have landed. */
.kz__illus { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.kz__illus-defs { position: absolute; }
.kz__piece {
  position: absolute;
  height: auto;
  opacity: 0;
  translate: 0 18px;
  transition: opacity 1.6s var(--m-ease), translate 2s var(--m-ease);
  transition-delay: calc(.7s + var(--n) * .18s);
}
.kz.is-in .kz__piece { opacity: .4; translate: 0 0; }
.kz__piece--apples   { right: 3vw;  top: 13vh; width: 20vw; rotate: 4deg; }
.kz__piece--grapes   { left: 9vw;   top: 27vh; width: 15vw; rotate: -5deg; }
.kz__piece--potatoes { right: 8vw;  top: 55vh; width: 12vw; rotate: -6deg; }
.kz__piece--onion    { left: 56vw;  top: 70vh; width: 8vw;  rotate: 7deg; }
.kz__piece--carrots  { left: -1vw;  top: 73vh; width: 25vw; rotate: -6deg; }

@media (prefers-reduced-motion: reduce) { .kz__piece { transition: none; } }

/* ---------- Life in the team (brand photography grid) ---------- */
.pg-life { padding: clamp(80px, 10vw, 140px) 0; background: var(--m-off); }
.pg-life__head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(40px, 7vw, 120px);
  align-items: end;
  margin-bottom: 48px;
}
.pg-life__lede { margin: 0; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.6; color: var(--m-slate); }
.life-grid {
  display: grid;
  grid-template-columns: 1.25fr .85fr 1fr 1fr;
  grid-template-rows: repeat(6, clamp(64px, 6.6vw, 104px));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.life-grid li { overflow: hidden; background: #dfe6e2; }
.life-grid img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--m-ease); }
.life-grid li:hover img { scale: 1.04; }
.lg-a { grid-area: 1 / 1 / 5 / 2; }
.lg-e { grid-area: 5 / 1 / 7 / 2; }
.lg-b { grid-area: 1 / 2 / 4 / 3; }
.lg-f { grid-area: 4 / 2 / 7 / 3; }
.lg-c { grid-area: 1 / 3 / 5 / 4; }
.lg-g { grid-area: 5 / 3 / 7 / 4; }
.lg-d { grid-area: 1 / 4 / 3 / 5; }
.lg-h { grid-area: 3 / 4 / 7 / 5; }
/* scroll reveal (nav.js) */
[data-reveal] { opacity: 0; translate: 0 32px; transition: opacity .9s var(--m-ease) var(--rd, 0s), translate 1.1s var(--m-ease) var(--rd, 0s); }
[data-reveal].is-revealed { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; translate: none; transition: none; } }
@media (max-width: 960px) {
  .pg-life__head { grid-template-columns: 1fr; gap: 20px; }
  .life-grid { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 44vw; }
  .life-grid li { grid-area: auto; }
  .lg-a, .lg-h { grid-row: span 2; }
}

/* ---------- Intro flows straight into the stories ---------- */
.pg-life { padding-bottom: clamp(56px, 6vw, 88px); }
.pg-life .crumbs { margin-bottom: 40px; color: var(--m-slate); }

/* ---------- Testimonial grid lines: off by default (body.no-grid-lines) ---------- */
.no-grid-lines .tst__lines { display: none; }
.no-grid-lines .tst__cover > span::after { --cover-line: transparent; }

/* demo-only switch */
.demo-switch {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 4px 4px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 2px 12px rgba(24, 35, 66, .14);
  font: 400 13px/1 var(--font-sans);
  color: var(--m-navy);
}
.demo-switch span { margin-right: 6px; }
.demo-switch button {
  padding: 7px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--m-navy);
  font: inherit;
  cursor: pointer;
}
.demo-switch button[aria-pressed="true"] { background: var(--m-navy); color: var(--m-white); }
.demo-switch button:focus-visible { outline: 2px solid var(--m-cyan); outline-offset: 2px; }
.menu-open .demo-switch { display: none; }

/* ---------- Hero on navy (demo option: body.hero-dark) ---------- */
.hero-dark .kz { --kz-bg: #182342; --kz-ink: #ffffff; } /* white on navy, 12:1 */
.hero-dark .kz__piece image { filter: url(#kz-ink-light); }
.hero-dark .kz.is-in .kz__piece { opacity: .35; }
.hero-dark .site-nav--adaptive {
  --nav-fg: var(--m-white);
  --nav-btn-bg: rgba(255, 255, 255, .12);
  --nav-btn-bg-hover: rgba(255, 255, 255, .22);
}
.demo-switch__sep { width: 1px; height: 18px; margin: 0 8px 0 4px; background: rgba(24, 35, 66, .2); }

/* ---------- Produce stories: photo scenes + engraving cells ---------- */
.tst__video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tst__piece { position: absolute; inset: 10%; width: 80%; height: 80%; opacity: .8; }

/* ---------- Testimonial cover: one picture, wiped column by column ----------
   The water photo is drawn once across the whole cover (it used to be repeated
   in each of the five columns, which left hairline seams at some widths).
   script.js clips the cover with a stepped polygon for the column wipe. */
.tst__cover { display: block; overflow: hidden; background: #182342; } /* Myton navy */
.tst__cover > span { display: none; }
.tst__cover::before {
  content: "";
  position: absolute;
  width: 142vmax;
  height: 142vmax;
  left: calc(50% - 71vmax);
  top: calc(50% - 71vmax);
  background: #182342 url("assets/images/cover-water.jpg") center / cover no-repeat;
  filter: grayscale(1) contrast(1.05);
  animation: cover-spin 60s linear infinite;
}
.tst.is-paused .tst__cover::before { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .tst__cover::before { animation: none; } }
/* tint, plus the grid lines (5 columns x 4 rows) when they're switched on */
.tst__cover::after {
  --cl: rgba(255, 255, 255, .28);
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      transparent calc(20% - 1px), var(--cl) calc(20% - 1px) 20%,
      transparent 20% calc(40% - 1px), var(--cl) calc(40% - 1px) 40%,
      transparent 40% calc(60% - 1px), var(--cl) calc(60% - 1px) 60%,
      transparent 60% calc(80% - 1px), var(--cl) calc(80% - 1px) 80%,
      transparent 80%),
    linear-gradient(to bottom,
      transparent calc(25% - 1px), var(--cl) calc(25% - 1px) 25%,
      transparent 25% calc(50% - 1px), var(--cl) calc(50% - 1px) 50%,
      transparent 50% calc(75% - 1px), var(--cl) calc(75% - 1px) 75%,
      transparent 75%),
    #182342;
}
.no-grid-lines .tst__cover::after { background: #182342; }

/* ---------- Footer (dwell.au style) ----------
   Rounded full-height photo card with a big logo, link columns and a live UK
   clock, then a thin legal bar underneath. */
/* --fb (0→1, nav.js) grows the card to full bleed as the footer scrolls in */
.dw-foot { --fb: 0; padding: calc(12px * (1 - var(--fb))) calc(12px * (1 - var(--fb))) 0; background: var(--m-off); }
.dw-foot__card {
  position: relative;
  min-height: min(92vh, 960px);
  border-radius: calc(18px * (1 - var(--fb)));
  overflow: hidden;
  background: #121A33;
  color: var(--m-white);
}
.dw-foot__img {
  position: absolute;
  inset: 0;
  background: center 70% / cover no-repeat;
}
.dw-foot__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(18, 26, 51, .92) 0%, rgba(18, 26, 51, .6) 45%, rgba(18, 26, 51, .25) 100%);
}
.dw-foot__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 48px;
  padding: clamp(48px, 7vw, 104px) clamp(28px, 5vw, 96px);
}
.dw-foot__logo { justify-self: start; line-height: 0; }
.dw-foot__logo img { width: clamp(35px, 4.25vw, 65px); height: auto; } /* 25% of the earlier size */
.dw-foot__logo:focus-visible { outline: 2px solid var(--m-cyan); outline-offset: 6px; border-radius: 50%; }
.dw-foot__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
  padding-top: 8px;
}
.dw-foot__cols ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; }
.dw-foot__cols a, .dw-foot__clock {
  color: var(--m-white);
  font-size: 14px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
}
.dw-foot__cols a { position: relative; }
.dw-foot__cols a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--m-ease);
}
.dw-foot__cols a:hover::after { transform: scaleX(1); }
.dw-foot__cols a:focus-visible { outline: 2px solid var(--m-cyan); outline-offset: 4px; }
.dw-foot__clock { margin: 0; font-variant-numeric: tabular-nums; }
.dw-foot__bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 40px;
  padding: 18px clamp(28px, 5vw, 96px) 22px;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--m-navy);
}
.dw-foot__bar ul { display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 0; padding: 0; list-style: none; }
.dw-foot__bar a { color: inherit; text-decoration: none; }
.dw-foot__bar a:hover { text-decoration: underline; }
.dw-foot__bar li > span { color: var(--m-slate); }
@media (max-width: 860px) {
  .dw-foot__card { min-height: 0; }
  .dw-foot__inner { grid-template-columns: 1fr; padding-bottom: 260px; }
  .dw-foot__cols { grid-template-columns: 1fr 1fr; }
  .dw-foot__clock { grid-column: 1 / -1; }
}

/* ---------- Hero people: photos set into the headline like the video ----------
   Same height and sharp edges as the video slot, sitting in the FROM and TO
   lines; revealed upwards after the words land. */
.kz__pic {
  flex: none;
  display: block;
  height: .74em;
  margin-left: .22em;
  margin-top: .02em;
  overflow: hidden;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.3s var(--m-ease);
  transition-delay: calc(.9s + var(--n) * .25s);
}
.kz__pic--portrait { aspect-ratio: 3 / 4; }
.kz__pic--wide { aspect-ratio: 4 / 3; }
.kz.is-in .kz__pic { clip-path: inset(0 0 0 0); }
.kz__pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  scale: 1.15;
  transition: scale 1.8s var(--m-ease);
  transition-delay: inherit;
}
.kz__pic--wide img { object-position: 50% 40%; }
.kz.is-in .kz__pic img { scale: 1; }
@media (prefers-reduced-motion: reduce) { .kz__pic, .kz__pic img { transition: none; } }

/* ---------- Produce stories: bigger photos with white engraving over them ----------
   (Myton concept file: illustrations in white line work layered over the
   photography, spilling past the frame edge). Photo = 2 columns x full height. */
@media (min-width: 961px) {
  #stories [data-layout="1"] > .tst__media { grid-area: 1 / 3 / 5 / 5; }
  #stories [data-layout="1"] > .tst__intro   { grid-area: 2 / 1 / 3 / 3; }
  #stories [data-layout="1"] > .tst__quote   { grid-area: 2 / 5 / 3 / 6; }
  #stories [data-layout="1"] > .tst__cite    { grid-area: 3 / 5 / 4 / 6; }

  #stories [data-layout="2"] > .tst__media { grid-area: 1 / 1 / 5 / 3; }
  #stories [data-layout="2"] > .tst__intro   { grid-area: 2 / 3 / 3 / 6; }
  #stories [data-layout="2"] > .tst__quote   { grid-area: 3 / 3 / 4 / 4; }
  #stories [data-layout="2"] > .tst__cite    { grid-area: 3 / 4 / 4 / 6; }

  #stories [data-layout="3"] > .tst__media { grid-area: 1 / 4 / 5 / 6; }
  #stories [data-layout="3"] > .tst__intro   { grid-area: 2 / 1 / 3 / 3; }
  #stories [data-layout="3"] > .tst__quote   { grid-area: 3 / 2 / 4 / 3; }
  #stories [data-layout="3"] > .tst__cite    { grid-area: 4 / 2 / 5 / 3; }
}
/* Story media (Myton concept, Frame 13): photo inset in its cell, a solid
   Myton-blue block offset behind it, and one engraving passing behind and over
   the photo: blue on the background, white where it crosses the photo. */
#stories .tst__media { --pt: 0%; --pr: 0%; --pb: 0%; --pl: 0%; }
@media (min-width: 961px) {
  #stories .tst__media { --pt: 14%; --pr: 15%; --pb: 13%; --pl: 12%; }
}
#stories .tst__media > .tst__video { inset: var(--pt) var(--pr) var(--pb) var(--pl); }
#stories .tst__block {
  position: absolute;
  top: calc(var(--pt) + 9%);
  left: calc(var(--pl) + 22%);
  right: calc(var(--pr) - 9%);
  bottom: calc(var(--pb) - 7%);
  background: #169CD8;
}
#stories .tst__draw { position: absolute; inset: 0; pointer-events: none; }
#stories .tst__draw--front { clip-path: inset(var(--pt) var(--pr) var(--pb) var(--pl)); }
#stories .tst__draw .tst__piece { position: absolute; inset: auto; height: auto; opacity: 1; }
#stories .tst__draw--back .tst__piece { opacity: .75; }
#stories [data-layout="1"] .tst__piece { left: -4%; top: 3%; width: 60%; }   /* potatoes over the top-left corner */
#stories [data-layout="2"] .tst__piece { right: -2%; top: 2%; width: 52%; }  /* apples over the top-right corner */
#stories [data-layout="3"] .tst__piece { left: -6%; top: 4%; width: 72%; }   /* carrots over the top-left corner */
@media (max-width: 960px) { #stories .tst__block, #stories .tst__draw { display: none; } }

/* ---------- Intro: split panel (farmminerals.com/promo style) ----------
   Same 5 x 4 grid as the testimonial below (columns 20% of the width, rows a
   quarter of the screen), so every edge lines up: photos in columns 1-2, the
   panel across 3-5. */
.fm {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: 100vh;
  height: 100svh;
  background: var(--m-off);
}
.fm__grid {
  --gut: 5px; /* half the white gutter between photos */
  position: relative;
  grid-column: 1 / 4;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, minmax(0, 1fr));
  background: var(--m-white);
}
/* each photo sits inset by half a gutter inside its grid cell, so cell edges
   still line up with the 5-column grid of the stories below */
.fm__grid figure { position: relative; margin: 0; overflow: hidden; }
/* inner seams get half a gutter from each side; outer edges get a full gutter,
   so the outside border matches the gaps between photos */
.fm__grid figure { --t: var(--gut); --r: var(--gut); --b: var(--gut); --l: var(--gut); }
.fm__grid .fm__a { --t: calc(var(--gut) * 2); --l: calc(var(--gut) * 2); }
.fm__grid .fm__d { --b: calc(var(--gut) * 2); --l: calc(var(--gut) * 2); }
.fm__grid .fm__b { --t: calc(var(--gut) * 2); }
.fm__grid .fm__c { --t: calc(var(--gut) * 2); --r: calc(var(--gut) * 2); }
.fm__grid .fm__g { --r: calc(var(--gut) * 2); --b: calc(var(--gut) * 2); }
.fm__grid img { position: absolute; top: var(--t); left: var(--l); display: block; width: calc(100% - var(--l) - var(--r)); height: calc(100% - var(--t) - var(--b)); object-fit: cover; transition: scale 1.2s var(--m-ease); }
.fm__grid figure:hover img { scale: 1.03; }
.fm__a { grid-area: 1 / 1 / 4 / 2; }
.fm__d { grid-area: 4 / 1 / 5 / 2; }
.fm__b { grid-area: 1 / 2 / 3 / 3; }
.fm__f { grid-area: 3 / 2 / 4 / 3; }
.fm__c { grid-area: 1 / 3 / 3 / 4; }
.fm__g { grid-area: 3 / 3 / 5 / 4; }
.fm__e { grid-area: 4 / 2 / 5 / 3; z-index: 50; overflow: visible !important; } /* navy fills the cell it leaves once it moves (nav.js) */
/* mover: gutter (full one at the bottom edge) closes as it lands on the cover cell */
.fm__grid .fm__e { --k: calc(1 - var(--mt, 0)); --t: calc(var(--gut) * var(--k)); --r: calc(var(--gut) * var(--k)); --l: calc(var(--gut) * var(--k)); --b: calc(var(--gut) * 2 * var(--k)); }
.fm__e img { will-change: transform; }
/* white engravings crossing the seams */
.fm__ill { position: absolute; z-index: 5; pointer-events: none; }
.fm__ill svg { display: block; width: 100%; height: auto; }
.fm__ill--1 { left: 22%; top: 36%; width: 24%; rotate: -8deg; }   /* apples across the apron / crates seam */
.fm__ill--2 { left: 56%; top: 26%; width: 18%; rotate: 6deg; }    /* grapes across the driver / apples seam */
/* brand-colour dots on the seams */
.fm__dot { position: absolute; z-index: 6; width: clamp(36px, 3.4vw, 56px); aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; }
.fm__dot--1 { left: 33.333%; top: 75%; background: var(--m-cyan); }
.fm__dot--2 { left: 66.666%; top: 75%; background: var(--m-navy); }
.fm__dot--3 { left: 100%; top: 22%; background: var(--m-blue); }
.fm__panel { grid-column: 4 / 6; grid-row: 1; }
.fm__panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: clamp(40px, 5vw, 80px) clamp(28px, 4vw, 64px) clamp(28px, 3vw, 44px);
  color: var(--m-navy);
}
.fm__title {
  margin: 0;
  max-width: 12em;
  font-size: clamp(32px, 3.1vw, 54px);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -.035em;
}
.fm__lede { max-width: 30em; margin: 24px 0 0; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.55; color: var(--m-slate); }
.fm__stats { margin: 0; }
.fm__stats > div {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(10px, 1.6vh, 18px) 0 clamp(10px, 1.4vh, 16px);
  border-bottom: 1px solid rgba(24, 35, 66, .28);
}
.fm__stats dt {
  font-size: clamp(40px, min(4vw, 8vh), 72px);
  line-height: .9;
  font-weight: 400;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.fm__stats dd {
  flex: 0 0 13em;
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: left;
}
.fm__note { max-width: 40em; margin: 22px 0 0; font-size: 12px; line-height: 1.5; letter-spacing: .05em; text-transform: uppercase; color: var(--m-slate); }

@media (max-width: 960px) {
  .fm { grid-template-columns: 1fr; height: auto; }
  .fm__grid { grid-column: 1; grid-template-rows: repeat(4, 30vw); }
  .fm__ill, .fm__dot { display: none; }
  .fm__panel { grid-column: 1; grid-row: 1; }
  .fm__grid { grid-row: 2; } /* photos last, so the bottom photo can travel into the stories below */
  .fm__panel { gap: 40px; }
  .fm__stats dd { flex-basis: 11em; font-size: 12px; }
}

/* jobs page heading + intro, centred */
.jobs-head { text-align: center; }
.jobs-head__lede { margin-left: auto; margin-right: auto; }
.jobs-head__lede { text-wrap: balance; } /* even lines, no single-word last line */

/* ---------- Jobs: short team hero (team page hero style) ---------- */
.jh {
  --fs: min(7.2vw, 12vh);
  position: relative;
  padding: 12px var(--site-pad) 36px;
  overflow: hidden;
  background: var(--m-off);
  color: var(--m-navy);
}
.jh__title { position: relative; z-index: 1; margin: 0; font-weight: 400; font-size: var(--fs); line-height: .8; letter-spacing: -.03em; text-transform: uppercase; }
.jh__row { display: flex; align-items: center; height: 1.08em; }
.jh__row--1 { padding-left: 12vw; }
.jh__row--2 { padding-left: 26vw; }
.jh__w { display: block; overflow: hidden; padding: .06em .02em .26em; margin-bottom: -.24em; white-space: nowrap; }
.jh__w > span { display: block; translate: 0 140%; transition: translate 1.2s var(--m-ease); }
.jh.is-in .jh__w > span { translate: 0 0; }
.jh.is-in .jh__row--2 .jh__w > span { transition-delay: .1s; }
.jh__pic { flex: none; display: block; height: .74em; aspect-ratio: 4 / 3; margin-left: .22em; margin-top: .02em; overflow: hidden; clip-path: inset(100% 0 0 0); transition: clip-path 1.3s var(--m-ease) .5s; }
.jh.is-in .jh__pic { clip-path: inset(0 0 0 0); }
.jh__pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jh__desc {
  position: relative; z-index: 1;
  max-width: 30em; margin: 18px 0 0 calc(26vw + .1em);
  font-size: clamp(14px, 1vw, 16px); line-height: 1.5; color: var(--m-navy);
  text-wrap: balance;
  opacity: 0; translate: 0 12px; transition: opacity .8s var(--m-ease) .6s, translate .8s var(--m-ease) .6s;
}
.jh.is-in .jh__desc { opacity: 1; translate: 0 0; }
/* illustrations */
.jh__illus { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.jh__piece, .jh__sea { position: absolute; height: auto; opacity: 0; translate: 0 18px; transition: opacity 1.6s var(--m-ease), translate 2s var(--m-ease); transition-delay: calc(.7s + var(--n, 0) * .15s); }
.jh.is-in .jh__piece { opacity: .4; translate: 0 0; }
.jh__piece--apples { right: 4vw;  top: 0;    width: 15vw; rotate: 4deg; }
.jh__piece--grapes { left: 2vw;   top: 0;    width: 9vw; rotate: -6deg; }
.jh__piece--potatoes { right: 17vw; bottom: 8px; width: 10vw; rotate: -6deg; }
.jh__piece--onion { right: 31vw; top: 0;    width: 5vw; rotate: 7deg; }
.jh__piece--carrots { left: -2vw;  bottom: 4px; width: 19vw; rotate: -6deg; }
/* sea team: the ocean engraving instead of produce */
.jh__sea { right: -8vw; top: -40px; width: 40vw; aspect-ratio: 16 / 10; background: #169CD8; -webkit-mask: url("assets/illustrations/ocean.png") center / contain no-repeat; mask: url("assets/illustrations/ocean.png") center / contain no-repeat; }
.jh[data-illus="sea"] .jh__piece { display: none; }
.jh:not([data-illus="sea"]) .jh__sea { display: none; }
.jh.is-in[data-illus="sea"] .jh__sea { opacity: .22; translate: 0 0; }
@media (max-width: 760px) {
  .jh { --fs: 15vw; padding-top: 8px; }
  .jh__row--1, .jh__row--2 { padding-left: 0; }
  .jh__row--2 { padding-left: 8vw; }
  .jh__desc { margin-left: 0; }
  .jh__illus { display: none; }
}
@media (prefers-reduced-motion: reduce) { .jh__w > span, .jh__pic, .jh__desc, .jh__piece, .jh__sea { transition: none; } }

/* mobile: the cover's first photo sits where the intro's travelling photo lands
   (middle column, same size as its grid cell) */
@media (max-width: 960px) {
  #stories .hero__face--1 {
    display: block;
    position: absolute;
    grid-area: auto;
    left: 33.3333%;
    top: 0;
    width: 33.3334%;
    height: 30vw;
    z-index: 11;
  }
}

/* Produce stories on phones: everything fits one screen (heading, photo, quote, name) */
@media (max-width: 960px) {
  #stories .tst__grid { grid-template-rows: 0 auto auto auto auto; align-content: center; row-gap: 14px; padding-top: 0; padding-bottom: 0; }
  #stories .tst__heading { font-size: 28px; }
  #stories .tst__media { height: 50svh; margin-top: 6px; align-self: start; }
  #stories .tst__quote blockquote { font-size: 16px; line-height: 1.35; }
  #stories .tst__cite .name { font-size: 15px; }
  #stories .tst__cite .role { font-size: 13px; }
}

/* ---------- Produce stories: balanced desktop layout ----------
   Text stacks in one 2-column block (heading, quote, name); the photo group
   takes the other 3 columns. Engravings straddle one edge of the photo, never
   a corner. Sides alternate 1 / 2 / 3. */
@media (min-width: 961px) {
  #stories [data-layout="1"] > .tst__intro, #stories [data-layout="3"] > .tst__intro { grid-area: 2 / 1 / 3 / 3; }
  #stories [data-layout="1"] > .tst__quote, #stories [data-layout="3"] > .tst__quote { grid-area: 3 / 1 / 4 / 3; }
  #stories [data-layout="1"] > .tst__cite,  #stories [data-layout="3"] > .tst__cite  { grid-area: 4 / 1 / 5 / 3; }
  #stories [data-layout="1"] > .tst__media, #stories [data-layout="3"] > .tst__media { grid-area: 1 / 3 / 5 / 6; --pt: 12%; --pb: 14%; --pl: 16%; --pr: 26%; }

  #stories [data-layout="2"] > .tst__media { grid-area: 1 / 1 / 5 / 4; --pt: 12%; --pb: 14%; --pl: 26%; --pr: 16%; }
  #stories [data-layout="2"] > .tst__intro { grid-area: 2 / 4 / 3 / 6; }
  #stories [data-layout="2"] > .tst__quote { grid-area: 3 / 4 / 4 / 6; }
  #stories [data-layout="2"] > .tst__cite  { grid-area: 4 / 4 / 5 / 6; }

  /* text block sits a little in from the screen edge */
  #stories .scene > .tst__intro, #stories .scene > .tst__quote, #stories .scene > .tst__cite { padding-left: clamp(32px, 4vw, 72px); padding-right: clamp(24px, 3vw, 48px); }
  #stories .tst__quote blockquote { font-size: clamp(17px, 1.35vw, 22px); line-height: 1.35; max-width: 24em; }

  /* blue block: offset down-right (1, 3) or down-left (2) */
  #stories [data-layout="2"] .tst__block { left: calc(var(--pl) - 8%); right: calc(var(--pr) + 20%); }

  /* engravings across a single edge, centred on it */
  #stories [data-layout="1"] .tst__piece { left: calc(var(--pl, 16%) - 15%); top: 46%; width: 30%; right: auto; bottom: auto; }   /* potatoes over the left edge */
  #stories [data-layout="2"] .tst__piece { right: calc(16% - 16%); top: 28%; width: 32%; left: auto; bottom: auto; }               /* apples over the right edge */
  #stories [data-layout="3"] .tst__piece { left: 1%; top: 22%; width: 38%; right: auto; bottom: auto; }               /* carrots over the left edge */
}

/* ---------- Titles: bold, sentence case (as the stories cover) ---------- */
.hw__title, .kz__title, .jh__title, .fm__title, .jobs-head h1 {
  font-weight: 700;
  text-transform: none;
  letter-spacing: -.035em;
}

/* nav buttons: icon only on phones (text kept for screen readers) */
.nav-cta__icon { display: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
@media (max-width: 760px) {
  .menu-btn, .nav-cta { width: 46px; height: 46px; padding: 0; justify-content: center; gap: 0; }
  .menu-btn [data-menu-label], .nav-cta__text {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .nav-cta__arrow { display: none; }
  .nav-cta__icon { display: block; }
}

/* footer legal bar on phones: smaller, one item per line in a tidy stack */
@media (max-width: 760px) {
  .dw-foot__bar { flex-direction: column; gap: 14px; padding: 20px 28px 24px; font-size: 11px; letter-spacing: .08em; } /* lines up with the footer links above */
  .dw-foot__bar ul { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
}

/* ---------- Home hero: white engravings in the open spaces ---------- */
.hw__ill {
  position: absolute;
  height: auto;
  opacity: 0;
  translate: 0 18px;
  transition: opacity 1.4s var(--m-ease), translate 1.8s var(--m-ease);
  transition-delay: calc(.5s + var(--n) * .15s);
}
.hero-landed .hw__ill { opacity: calc(.7 * (1 - var(--o))); translate: 0 calc(var(--o) * -40px); }
/* straddles the video card's right edge: card is (100svh - 172px) * 350/530 wide, centred */
.hw__ill--tulips { --card: calc((100svh - 280px) * 350 / 530); left: calc(50% + var(--card) / 2 - 10vw); top: 22vh; width: 17vw; --n: 0; }
@media (max-width: 960px) {
  .hw__ill--tulips { left: auto; right: 6vw; top: 20vh; width: 30vw; }
}
@media (prefers-reduced-motion: reduce) { .hw__ill { transition: none; } }

/* ---------- Produce stories on phones: same styling as desktop ----------
   Full-width photo group (photo + offset blue block + engraving across one
   edge), quote mark kept, everything fitting one screen. */
@media (max-width: 960px) {
  #stories .tst__media {
    justify-self: stretch;
    width: 100%;
    aspect-ratio: auto;
    height: 52svh;
    margin-top: 4px;
    --pt: 0%; --pr: 14%; --pb: 7%; --pl: 0%;
  }
  #stories [data-layout="2"] .tst__media { --pr: 0%; --pl: 14%; }
  #stories .tst__block, #stories .tst__draw { display: block; }
  #stories .tst__block { top: 9%; bottom: 0; left: 22%; right: 6%; }
  #stories [data-layout="2"] .tst__block { left: 6%; right: 22%; }
  #stories .tst__draw .tst__piece { top: 30% !important; bottom: auto !important; }
  #stories [data-layout="1"] .tst__piece { left: auto !important; right: -4% !important; width: 40% !important; }
  #stories [data-layout="2"] .tst__piece { right: auto !important; left: -6% !important; width: 40% !important; }
  #stories [data-layout="3"] .tst__piece { left: auto !important; right: -10% !important; width: 52% !important; }
  #stories .quote-mark { display: block; height: 10px; margin-bottom: 10px; }
  #stories .tst__heading { font-size: 30px; }
}
@media (max-width: 960px) {
  #stories .tst__media { margin-inline: 20px; width: calc(100% - 40px); justify-self: start; }
  #stories [data-layout="1"] .tst__piece { right: 0 !important; width: 34% !important; top: 34% !important; }
  #stories [data-layout="2"] .tst__piece { left: 0 !important; width: 34% !important; top: 30% !important; }
  #stories [data-layout="3"] .tst__piece { right: 0 !important; width: 46% !important; top: 30% !important; }
}
@media (max-width: 960px) {
  /* cross the edge away from the blue block, spilling into the page margin */
  #stories [data-layout="1"] .tst__piece { right: auto !important; left: -6% !important; width: 32% !important; top: 58% !important; }
  #stories [data-layout="2"] .tst__piece { left: auto !important; right: -6% !important; width: 34% !important; top: 10% !important; }
  #stories [data-layout="3"] .tst__piece { right: auto !important; left: -6% !important; width: 46% !important; top: 8% !important; }
}
@media (max-width: 760px) { .demo-switch { display: none; } } /* demo switch: desktop only */

/* ---------- Produce hero on phones: mirrors desktop ----------
   Same staggered words with the driver photo after "From" and the video in
   the "to" line, engravings in the open spaces, copy anchored at the bottom. */
@media (max-width: 760px) {
  .kz { --fs: 23vw; }
  .kz__layer { padding-top: max(124px, 16svh); }
  .kz__row--1 { padding-left: 5vw; }
  .kz__row--2 { padding-left: 26vw; }
  .kz__row--3 { padding-left: 5vw; }
  .kz__row--4 { padding-left: 16vw; }
  .kz__slot { width: 2.1em; }
  .kz__pic { height: .7em; }
  .kz__desc { top: auto; bottom: max(28px, 5svh); left: 5vw; right: 5vw; width: auto; font-size: 15px; line-height: 1.45; }
  .kz__piece--apples   { right: -6vw; left: auto; top: calc(max(124px, 16svh) + 23vw * 1.2); width: 32vw; }
  .kz__piece--grapes   { left: 2vw;  top: auto; bottom: calc(max(28px, 5svh) + 172px); width: 16vw; }
  .kz__piece--carrots  { right: -8vw; left: auto; top: auto; bottom: calc(max(28px, 5svh) + 160px); width: 46vw; }
  .kz__piece--potatoes, .kz__piece--onion { display: none; }
}

/* Produce hero CTA under the copy */
.kz__desc p { margin: 0; }
.kz__cta { margin-top: 22px; pointer-events: auto; }
.kz__layer--light .kz__cta { pointer-events: none; }
@media (max-width: 760px) { .kz__cta { margin-top: 16px; font-size: 15px; } }

/* ---------- Home hero: job search ---------- */
.hw__search {
  position: absolute;
  /* right column, under "life": balances the copy on the left */
  left: auto;
  right: 6vw;
  top: auto;
  bottom: 11vh; /* sits on the same line as "work." */
  width: min(27vw, 400px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 8px 30px rgba(18, 26, 51, .25);
  pointer-events: auto;
  opacity: 0;
  translate: 0 16px;
  transition: opacity .9s var(--m-ease) .8s, translate .9s var(--m-ease) .8s;
}
.hero-landed .hw__search { opacity: calc(1 - var(--o) * 2.5); translate: 0 0; }
.hero-out .hw__search { pointer-events: none; }
.hw__search-icon { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--m-navy); stroke-width: 2.2; stroke-linecap: round; }
.hw__search input {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: none;
  font: 400 16px/1 var(--font-sans);
  color: var(--m-navy);
}
.hw__search input::placeholder { color: var(--m-slate); opacity: 1; }
.hw__search input::-webkit-search-cancel-button { display: none; }
.hw__search .btn { flex: none; padding: .75em 1.2em; font-size: 15px; }
.hw__search:focus-within { box-shadow: 0 0 0 3px var(--m-cyan), 0 8px 30px rgba(18, 26, 51, .25); }
@media (max-width: 960px) {
  .hw__search { left: 20px; right: 20px; width: auto; top: auto; bottom: calc(5vh + 108px); }
}

@media (max-width: 960px) {
  /* bottom-up stack: search, copy, then the big words, so nothing overlaps */
  .hw__search { bottom: max(20px, 3svh); }
  .hw__desc { bottom: calc(max(20px, 3svh) + 72px); }
  .hw__w--3 { bottom: calc(max(20px, 3svh) + 168px); }
  .hw__w--2 { bottom: calc(max(20px, 3svh) + 168px + 17vw); top: auto; }
}

/* story location link: to the jobs list filtered to Produce + that site */
.tst__loc {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 14px; padding: .7em 1.15em;
  border: 1px solid color-mix(in srgb, var(--deep) 35%, transparent);
  border-radius: 999px;
  color: var(--deep);
  font: 700 14px/1 var(--font-sans);
  text-decoration: none;
  align-self: flex-start;
  transition: background-color .2s, color .2s, border-color .2s;
}
.tst__loc span { transition: translate .2s var(--m-ease); }
.tst__loc:hover { background: var(--deep); border-color: var(--deep); color: var(--m-white); }
.tst__loc:hover span { translate: 3px 0; }
.tst__loc:focus-visible { outline: 2px solid var(--m-cyan); outline-offset: 3px; }
@media (max-width: 960px) { .tst__loc { margin-top: 10px; font-size: 13px; padding: .6em 1em; } }

/* ---------- Home hero: title stacked left, copy + search right ---------- */
@media (min-width: 961px) {
  .hw__w--2 { right: auto; left: 11vw; top: 41vh; }
  .hw__w--2 { transform: translateX(calc(var(--o) * -40vw)); }
  .hw__desc {
    left: auto;
    right: 6vw;
    top: auto;
    bottom: calc(11vh + 76px);
    width: min(24vw, 360px);
    max-width: none;
  }
  .hw__search { width: min(24vw, 360px); }
}
@media (max-width: 960px) {
  .hw__w--2 { left: auto; }
}

/* story location: the place name is the link */
.tst__loc-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: 6px;
  font-size: 15px;
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.tst__loc-link span { display: inline-block; text-decoration: none; transition: translate .2s var(--m-ease); }
.tst__loc-link:hover { text-decoration-thickness: 2px; }
.tst__loc-link:hover span { translate: 3px 0; }
.tst__loc-link:focus-visible { outline: 2px solid var(--m-cyan); outline-offset: 2px; border-radius: 2px; }
.tst__loc-link, .tst__loc-link:hover { text-decoration: none; }

/* home stories on phones: give the portrait video the room */
@media (max-width: 960px) {
  .isc__grid { padding: 36px 20px 24px; row-gap: 16px; }
  .isc__heading { font-size: 28px; }
  .isc__stat { flex-direction: row; align-items: baseline; gap: 10px; margin-top: 8px; }
  .isc__stat-num { font-size: 24px; }
  .isc__stat-label { font-size: 13px; white-space: normal; }
  .isc__quote blockquote { font-size: 15px; line-height: 1.35; }
  .isc__cite { margin-top: 8px; }
  .isc__link { margin-top: 10px; padding: .65em 1.1em; font-size: 13px; }
}
@media (max-width: 960px) {
  /* video spans the full text width, so its edges line up with the copy */
  .isc__media { display: block; }
  .cards { width: 100%; height: 100%; max-width: none; aspect-ratio: auto; margin: 0; }
}

/* jobs sidebar: why Myton */
.why { margin-top: 24px; padding: 28px; background: var(--m-navy); color: var(--m-white); }
.why h2 { margin: 0 0 12px; font-size: 22px; letter-spacing: -.015em; }
.why p { margin: 0 0 14px; font-size: 15px; line-height: 1.5; }
.why p:last-child { margin: 0; font-weight: 700; }
.why ul { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14px; line-height: 1.4; }
.why li { position: relative; padding-left: 18px; }
.why li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--m-cyan); }
.jobs__grid > .jobs__filters, .jobs__grid > .why { grid-column: 1; }
.jobs__grid > #results { grid-column: 2; grid-row: 1 / span 2; }
.jobs__filters { position: static; }
@media (max-width: 960px) { .jobs__grid > #results { grid-column: 1; grid-row: auto; } }

/* ---------- Jobs filters (structure of their current careers site) ---------- */
.jobs__grid > .jobs__side { grid-column: 1; }
.jobs__grid > #results { grid-row: auto; }
.jobs__side { display: grid; gap: 20px; align-content: start; }
.jobs__side .why { margin-top: 0; }
.filters__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
.filters__head h2 { margin: 0; font-size: 28px; letter-spacing: -.02em; }
.filters__reset { border: 0; background: none; padding: 0; font: 400 14px var(--font-sans); color: var(--m-navy); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pill-search { position: relative; margin-bottom: 10px; }
.pill-search input {
  width: 100%; padding: 13px 44px 13px 18px;
  border: 1px solid var(--m-line); border-radius: 999px; background: var(--m-off);
  font: 400 15px var(--font-sans); color: var(--m-navy);
}
.pill-search input:focus { outline: 2px solid var(--m-cyan); outline-offset: 1px; }
.pill-search svg { position: absolute; right: 16px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; fill: none; stroke: var(--m-navy); stroke-width: 2.2; stroke-linecap: round; pointer-events: none; }
.acc { border-top: 1px solid var(--m-line); }
.acc:first-of-type { margin-top: 14px; }
.acc:last-of-type { border-bottom: 1px solid var(--m-line); }
.acc summary {
  display: flex; align-items: center; gap: 8px;
  padding: 16px 0; cursor: pointer; list-style: none;
  font-weight: 700; font-size: 15px;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: ""; margin-left: auto; width: 8px; height: 8px;
  border-right: 2px solid var(--m-navy); border-bottom: 2px solid var(--m-navy);
  rotate: 45deg; translate: 0 -2px; transition: rotate .2s;
}
.acc[open] summary::after { rotate: 225deg; translate: 0 2px; }
.acc summary:focus-visible { outline: 2px solid var(--m-cyan); outline-offset: 2px; }
.acc__val { font-weight: 400; font-size: 13px; color: var(--m-slate); }
.acc > .chips, .acc > select { margin: 0 0 18px; }

/* ---------- Floating nav (shown on scroll up) ---------- */
.site-nav.nav-float {
  position: fixed;
  top: 0; left: 0; right: 0;
  --nav-fg: var(--m-navy);
  --nav-btn-bg: rgba(24, 35, 66, .08);
  --nav-btn-bg-hover: rgba(24, 35, 66, .14);
  background: rgba(255, 255, 255, .95);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  box-shadow: 0 2px 20px rgba(18, 26, 51, .12);
  translate: 0 -105%;
  transition: translate .35s var(--m-ease);
}
.site-nav.nav-float.nav-shown { translate: 0 0; }
.site-nav.nav-float .site-nav__bar { height: 88px; }
.site-nav.nav-float .site-nav__logo img { width: 68px; height: 68px; }
.site-nav.nav-float .nav-cta:hover { color: var(--m-white); }
.menu-open .site-nav.nav-float { translate: 0 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; --nav-fg: var(--m-white); --nav-btn-bg: rgba(255, 255, 255, .16); --nav-btn-bg-hover: rgba(255, 255, 255, .26); }
@media (max-width: 760px) {
  .site-nav.nav-float .site-nav__bar { height: 76px; }
  .site-nav.nav-float .site-nav__logo img { width: 56px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) { .site-nav.nav-float { transition: none; } }


/* ================= Brand guidelines layer ================= */
/* Bright Blue moments: logo only ever on white or Bright Blue (no drop shadow) */

/* full-screen menu on Bright Blue, Dark Blue type */
.site-menu { background: var(--m-blue); color: var(--m-navy); }
.site-menu__links a, .site-menu__side a:not(.btn) { color: var(--m-navy); }
.site-menu__num { color: var(--m-navy); opacity: .6; }
.site-menu__links a[aria-current="page"] { text-decoration-color: var(--m-navy); }
.site-menu .btn--primary { background: var(--m-navy); color: var(--m-white); }
.site-menu .btn--primary:hover { background: var(--m-white); color: var(--m-navy); }
.menu-open .site-nav, .menu-open .site-nav.nav-float {
  --nav-fg: var(--m-navy);
  --nav-btn-bg: rgba(255, 255, 255, .25);
  --nav-btn-bg-hover: rgba(255, 255, 255, .4);
}
.menu-open .site-nav .nav-cta { background: var(--m-navy); color: var(--m-white); }

/* footer: original photo treatment (Dark Blue wash, white type), larger logo */
.dw-foot__logo img { width: clamp(105px, 12.75vw, 195px); } /* 3x the previous size */
/* hero option 2: Bright Blue (replaces the Dark Blue hero, which put the logo on Dark Blue) */
.hero-dark .kz { --kz-bg: var(--m-blue); --kz-ink: var(--m-navy); }
.hero-dark .kz.is-in .kz__piece { opacity: .55; }
.hero-dark .site-nav--adaptive { --nav-fg: var(--m-navy); --nav-btn-bg: rgba(255, 255, 255, .25); --nav-btn-bg-hover: rgba(255, 255, 255, .4); }
.hero-dark .kz__cta { background: var(--m-navy); color: var(--m-white); }

/* panels on a Light Blue tint so they still separate from the white page */
.jobs__filters { background: var(--m-tint); }
.pill-search input, .search { background: var(--m-white); }
.produce-split img, .life-grid li { background: var(--m-tint); }
.fm__grid { background: var(--m-white); }

/* story blocks follow each scene's accent */
#stories .tst__block { background: var(--accent); }

/* ---------- Home: values (trial block) ---------- */
.values { padding: clamp(80px, 10vw, 140px) 0; background: var(--m-tint); }
.values__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: end; margin-bottom: 56px; }
.values__head p { margin: 0; max-width: 30em; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; color: var(--m-slate); }
.values__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--m-navy); }
.values__list li { padding: 32px 32px 40px 0; border-bottom: 1px solid var(--m-line); }
.values__list li:nth-child(3n+2), .values__list li:nth-child(3n) { padding-left: 32px; border-left: 1px solid var(--m-line); }
.values__num { display: block; margin-bottom: 18px; font-size: 14px; letter-spacing: .14em; color: var(--m-blue); font-weight: 700; }
.values__list h3 { margin: 0 0 10px; font-size: clamp(22px, 1.9vw, 28px); letter-spacing: -.02em; color: var(--m-navy); }
.values__list p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--m-slate); max-width: 26em; }
@media (max-width: 960px) {
  .values__head { grid-template-columns: 1fr; gap: 16px; }
  .values__list { grid-template-columns: 1fr; }
  .values__list li, .values__list li:nth-child(3n+2), .values__list li:nth-child(3n) { padding: 24px 0 28px; border-left: 0; }
}
.hero-dark .site-nav--adaptive:not(.nav-float) .nav-cta { background: var(--m-navy); color: var(--m-white); }
.hero-dark .site-nav--adaptive:not(.nav-float) .nav-cta:hover { background: var(--m-white); color: var(--m-navy); }
/* on a white page, tags and row hovers use the Light Blue tint */
.job__tag { background: var(--m-tint); }
.job a:hover { background: var(--m-tint); }
.job a:hover .job__tag { background: var(--m-white); }
.team-card__arrow { border-color: rgba(255, 255, 255, .7); }

/* floating nav: no bar, the buttons and logo sit on their own over the page */
.site-nav.nav-float { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.site-nav.nav-float .menu-btn { background: var(--m-white); border-color: var(--m-line); }
.site-nav.nav-float .menu-btn:hover { background: var(--m-white); border-color: var(--m-navy); }

/* ---------- Jobs filters: one search bar; full-screen filters on phones ---------- */
.filters__open, .filters__close, .filters__foot { display: none; }
.filters__panel .filters__head { margin-top: 18px; }
@media (max-width: 960px) {
  .jobs__filters { padding: 16px; display: flex; gap: 10px; align-items: center; }
  .jobs__filters > .pill-search { flex: 1; margin: 0; }
  .filters__open {
    display: inline-flex; align-items: center; gap: 8px; flex: none;
    height: 46px; padding: 0 16px; border-radius: 999px;
    border: 1px solid var(--m-navy); background: var(--m-white); color: var(--m-navy);
    font: 700 15px/1 var(--font-sans); cursor: pointer;
  }
  .filters__open svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
  .filters__n { font-weight: 400; }
  .filters__panel {
    position: fixed; inset: 0; z-index: 200;
    display: flex; flex-direction: column;
    padding: 20px 20px 0; overflow-y: auto;
    background: var(--m-white);
    translate: 0 100%; visibility: hidden;
    transition: translate .4s var(--m-ease), visibility 0s .4s;
  }
  .filters__panel.is-open { translate: 0 0; visibility: visible; transition: translate .4s var(--m-ease); }
  .filters__panel .filters__head { margin-top: 0; align-items: center; gap: 16px; }
  .filters__panel .filters__reset { margin-left: auto; }
  .filters__close {
    display: inline-grid; place-items: center; width: 44px; height: 44px;
    border: 1px solid var(--m-line); border-radius: 50%; background: none;
    font-size: 24px; line-height: 1; color: var(--m-navy); cursor: pointer;
  }
  .filters__panel .acc[open] > .chips, .filters__panel .acc > select { margin-bottom: 18px; }
  .filters__foot {
    display: block; position: sticky; bottom: 0; margin-top: auto;
    padding: 16px 0 24px; background: var(--m-white);
  }
  .filters__foot .btn { width: 100%; justify-content: center; }
  .filters-open { overflow: hidden; }
  .filters-open .site-nav, .filters-open .demo-switch { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) { .filters__panel { transition: none; } }
/* desktop: keep "Filters" heading above the search bar */
@media (min-width: 961px) {
  .jobs__filters { display: flex; flex-direction: column; }
  .filters__panel { display: contents; }
  .filters__panel .filters__head { order: -1; margin-top: 0; }
}
/* phones: filter bar first, Why Myton after the results */
@media (max-width: 960px) {
  .jobs__side { display: contents; }
  .jobs__grid > .jobs__filters, .jobs__side > .jobs__filters { order: 1; }
  #results { order: 2; }
  .jobs__side > .why { order: 3; }
  .jobs__grid { display: flex; flex-direction: column; }
}

/* home hero (desktop): centre the content in the space below the logo, so the
   gap logo→video equals the gap video→bottom of the screen */
@media (min-width: 961px) {
  .isc__grid { padding-top: 116px; } /* nav logo bottom: (132 - 100) / 2 + 100 */
}
.dw-foot__img { background-position: center 12%; }
/* blush scene: grey line work at full strength, like the concept slide */
#stories [data-layout="2"] .tst__draw--back .tst__piece { opacity: 1; }

/* machinery engraving in the right-hand space (replaces the potatoes) */
.kz__piece--machine { right: 3vw; top: 47vh; width: 16vw; rotate: 0deg; }
@media (max-width: 760px) { .kz__piece--machine { display: none; } }
#stories [data-layout="3"] .tst__draw--back .tst__piece { opacity: 1; }
/* hero: machinery takes the whole right-hand space (apples removed) */
.kz__piece--apples { display: none; }
.kz__piece--machine { right: 3vw; top: max(150px, 21vh); width: 28vw; }
@media (max-width: 760px) { .kz__piece--apples { display: block; } }
.site-menu__links a { font-weight: 700; } /* bold, as the rest of the titles */
/* jobs hero: machinery fills the right (apples + potatoes removed) */
.jh__piece--apples, .jh__piece--potatoes { display: none; }
.jh__piece--machine { right: 3vw; top: 10px; width: 26vw; }
.active-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.active-chips[hidden] { display: none; }
.active-chips .team-chip { margin: 0; }
/* phones: on the landed hero the video is 75% size (centred) for breathing room;
   it grows back to full text width as the stories start */
@media (max-width: 960px) {
  .isc__media { display: flex; align-items: center; justify-content: center; }
  .cards { transition: width .5s var(--m-ease), height .5s var(--m-ease); }
  .isc:not(.hero-out) .cards { width: 75%; height: 75%; }
}