/* =========================================================
   Body Sweat — styles.css
   Desktop values come from the 1440px Figma frames; each
   clamp() scales them down proportionally (px / 1440 = vw).
   ========================================================= */

:root {
  --cream: #fffaec;
  --navy: #26225d;
  --red: #ec1c24;
  --white: #ffffff;
  --ice: #cfe6ef;

  /* Trust 3A from Adobe Fonts (kit qrb6ovg, Regular + Bold) */
  --font: "trust-3a", Optima, Candara, "Gill Sans", "Segoe UI", sans-serif;

  --gutter: clamp(16px, 3.82vw, 55px);          /* guide rules: 55px in from each edge */
  --content-w: calc(100vw - 2 * var(--gutter));
  --rule: 1px solid var(--red);
  --header-h: clamp(88px, 12.57vw, 181px);
  --ticker-h: clamp(46px, 5.28vw, 76px);

  /* Header + section fill exactly one screen, so the ticker sits on the fold. */
  --section-min: 380px;
  --section-h: max(var(--section-min), calc(100vh - var(--header-h) - var(--ticker-h)));

  /* The can: same size on every page. Capped so it always fits the right-hand column. */
  --can-h: min(calc(var(--section-h) * .902), calc(var(--content-w) * .4859));
  --can-w: calc(var(--can-h) * .593);
  --can-x-home: 50%;
  --can-x-side: calc(var(--gutter) + (100% - 2 * var(--gutter)) * .80263);   /* centre of the right column */
  --divider-x: calc(var(--gutter) + (100% - 2 * var(--gutter)) * .60526);    /* 860px at 1440 */

  --ease-move: cubic-bezier(.65, 0, .35, 1);
  color-scheme: light;
}
@supports (height: 100svh) {
  :root { --section-h: max(var(--section-min), calc(100svh - var(--header-h) - var(--ticker-h))); }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--cream); }
html.gate-on { background: #d6eaf3; }
/* While the age gate is up, only the first screen of the site exists, on an ice-coloured page.
   iPhone Safari shows whatever is beneath its floating toolbar, so there's no photo there to show. */
html.gate-on body { background: #d6eaf3; }
html.gate-on .site { max-height: 100vh; overflow: hidden; }
@supports (height: 100svh) { html.gate-on .site { max-height: 100svh; } }
.page-body { background: var(--white); }
body { min-height: 100vh; }
@supports (height: 100svh) { body { min-height: 100svh; } }

.snap-mark { height: 0; }
body {
  margin: 0;
  background: var(--white);
  color: var(--navy);
  font-family: var(--font);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
html:not(.age-ok) body { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p, h1, h2 { margin: 0; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
main:focus { outline: none; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--gutter); top: 8px; z-index: 50;
  background: var(--navy); color: var(--cream); padding: 8px 12px; border-radius: 3px;
  text-decoration: none; transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* No animation on first paint (a page opened directly shouldn't slide its can in) */
.no-anim *, .no-anim *::before, .no-anim *::after { transition: none !important; }

/* ---------- Frame: header + first section, with the red guide rules ---------- */
.frame { position: relative; }
.frame::before, .frame::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 1px;
  background: var(--red); pointer-events: none; z-index: 4;
}
.frame::before { left: var(--gutter); }
.frame::after { right: var(--gutter); }

/* ---------- Header ---------- */
.header { background: var(--cream); border-bottom: var(--rule); height: var(--header-h); }
.header__nav {
  height: 100%;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding-inline: clamp(calc(var(--gutter) + 14px), 12.7vw, 183px);
}
.header__link {
  justify-self: start;
  font-size: clamp(13px, 1.455vw, 21px); line-height: 1.3;
  text-transform: uppercase; text-decoration: none;
  text-decoration-color: var(--red); text-decoration-thickness: 1px; text-underline-offset: .32em;
}
.header__link--right { justify-self: end; }
.header__group { justify-self: start; display: flex; gap: clamp(20px, 4.65vw, 67px); }
.header__link[aria-current="page"], .header__link:hover { text-decoration-line: underline; }
.header__logo img { width: clamp(84px, 12.28vw, 177px); height: auto; }

/* ---------- Mobile menu (shown only on small screens) ---------- */
.menu-btn, .mobile-menu { display: none; }

/* ---------- Stage: the can + centre divider, kept alive between pages ---------- */
.stage {
  position: absolute; left: 0; right: 0; top: var(--header-h); height: var(--section-h);
  pointer-events: none; z-index: 2;
}
.stage__divider {
  position: absolute; top: 0; bottom: 0; left: var(--divider-x); width: 1px;
  background: var(--red); opacity: 0;
  transition: opacity .6s ease;
}
[data-page="about"] .stage__divider,
[data-page="where"] .stage__divider,
[data-page="contact"] .stage__divider { opacity: 1; transition-delay: .35s; }

.can {
  position: absolute; top: 50%; left: var(--can-x-home);
  width: var(--can-w); height: var(--can-h);
  transform: translate(-50%, -50%);
  pointer-events: auto;
  transition: left .95s var(--ease-move), top .95s var(--ease-move), opacity .5s ease;
}
[data-page="about"] .can,
[data-page="where"] .can,
[data-page="contact"] .can { left: var(--can-x-side); }
.can__still, .can__3d { position: absolute; inset: 0; width: 100%; height: 100%; }
.can__still { object-fit: contain; transition: opacity .4s ease; }
.can--live .can__still { opacity: 0; }
.can__3d { touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.can__3d.is-dragging { cursor: grabbing; }
.can__3d canvas { display: block; width: 100%; height: 100%; }

/* ---------- Page content swap ---------- */
main { transition: opacity .3s ease; }
main.is-leaving { opacity: 0; }
main.is-entering { opacity: 0; transition: none; }

/* ---------- Home hero ---------- */
.hero { position: relative; height: var(--section-h); margin-inline: var(--gutter); overflow: hidden; }
.hero__type {
  position: absolute; inset: 0;
  background: url("/assets/hero-type.svg") center / cover no-repeat;   /* fills the frame like a texture, crops from the centre */
}

/* ---------- Two-column split (About, Where to buy) ---------- */
.split {
  display: grid; grid-template-columns: 805fr 525fr;
  margin-inline: var(--gutter); height: var(--section-h);
}
.split__media { position: relative; }

.about__copy { align-self: center; padding: 32px clamp(16px, 2vw, 32px) 32px clamp(16px, 8.47vw, 122px); }
.about__text p { font-size: clamp(17px, 1.992vw, 28.7px); line-height: 1.29; }
.about__text p + p { margin-top: 1.29em; }

/* ---------- Where to buy: scrolling stockist window ---------- */
.where__copy { min-height: 0; padding: clamp(28px, 2.85vw, 41px) clamp(16px, 2vw, 32px) 0 clamp(16px, 8.5vw, 124px); }
.stockists-box {
  height: 100%; overflow-y: auto; overscroll-behavior: auto;
  scrollbar-width: none;
  padding-bottom: clamp(28px, 2.85vw, 41px);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent);
}
.stockists-box::-webkit-scrollbar { display: none; }
.stockists-box.at-end, .stockists-box.no-scroll { -webkit-mask-image: none; mask-image: none; }
.stockists-box:focus-visible { outline-offset: -2px; }

.stockists { border-collapse: collapse; font-size: clamp(14px, 1.528vw, 22px); line-height: 1.27; }
.stockists th {
  position: sticky; top: 0; z-index: 1; background: var(--white);
  font-weight: 700; font-size: clamp(14px, 1.6vw, 23px); line-height: 1.26;
  text-align: left; text-transform: uppercase; padding: 0 0 .7em;
}
.stockists th:first-child, .stockists td:first-child {
  width: clamp(170px, 34.44vw, 496px); padding-right: clamp(12px, 2vw, 32px);
}
.stockists td { padding: 0; vertical-align: top; }
.stockists tbody + tbody tr:first-child td { padding-top: 1.27em; }

/* the red pill: scroll position of the list, and draggable */
.split__thumb {
  position: absolute; left: -16px; top: 8px;
  width: 7px; height: 78px; border-radius: 7px; background: var(--red);
  cursor: grab; touch-action: none; will-change: transform;
}
.split__thumb::before { content: ""; position: absolute; inset: -6px -10px; }   /* bigger grab area */
.split__thumb.is-dragging { cursor: grabbing; }
.split__thumb[hidden] { display: none; }

/* ---------- Contact ---------- */
.split.contact { height: auto; min-height: var(--section-h); }
.contact__copy { padding: clamp(28px, 5.28vw, 76px) clamp(16px, 2vw, 32px) clamp(28px, 2.85vw, 41px) clamp(16px, 8.9vw, 128px); }
.contact__title { font-weight: 400; font-size: clamp(18px, 1.992vw, 28.7px); line-height: 1.29; }
.contact__form { width: min(550px, 100%); margin-top: clamp(18px, 1.74vw, 25px); display: grid; gap: 16px; }
.contact__row { display: grid; grid-template-columns: 287fr 245fr; gap: 18px; }
.cfield {
  font: inherit; font-size: 17.64px; line-height: normal; color: var(--navy);
  background: transparent; border: 1px solid var(--navy); border-radius: 2.5px;
  padding: 8.4px; width: 100%; min-width: 0;
}
.cfield::placeholder { color: var(--navy); opacity: 1; text-transform: uppercase; }
.cfield:focus, .cfield:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--navy); }
.cfield--message { height: 234px; resize: vertical; display: block; }
.contact__submit {
  font: inherit; font-size: 17.64px; line-height: normal; text-transform: uppercase;
  color: var(--cream); background: var(--navy); border: 0; border-radius: 2.5px;
  padding: 8.4px; width: 100%; cursor: pointer;
}
.contact__submit:hover { filter: brightness(1.2); }
.contact__submit:disabled { opacity: .6; cursor: default; }
.contact__status { font-size: 14px; line-height: 1.4; min-height: 0; }
.contact__status:empty { display: none; }
.contact__note { font-size: 12.33px; line-height: 1.47; margin-top: -6px; }
.contact__check:empty { display: none; }
.contact__trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Ticker ---------- */
.ticker {
  background: var(--red); color: var(--cream);
  height: var(--ticker-h); overflow: hidden;
  display: flex; align-items: center;
}
.ticker__track { display: flex; width: max-content; }
.ticker__group { display: flex; align-items: center; flex-shrink: 0; }
.ticker__item { font-size: clamp(17px, 2.186vw, 31.5px); line-height: 1; text-transform: uppercase; white-space: nowrap; }
.ticker__dot {
  width: clamp(4px, .475vw, 6.84px); aspect-ratio: 1; flex-shrink: 0;
  border-radius: 50%; background: var(--cream); margin-inline: clamp(18px, 3.2vw, 46px);
}

/* ---------- Photo gallery (cross-dissolve) ---------- */
.gallery { position: relative; height: calc(100vw / 2.4); overflow: hidden; background: var(--navy); }   /* fixed 12:5 on desktop: export 2880 x 1200 */

/* Footer drawer: once the bottom of the page reaches the bottom of the screen, everything above
   the footer stops and the footer slides up over it. (--page-stick is set from main.js.) */
.page-body { position: sticky; top: var(--page-stick, 0px); z-index: 0; }
.gallery__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
  opacity: 0; transition: opacity 1.2s ease;
}
.gallery__img.is-active { opacity: 1; }
.gallery__next {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.gallery__next:focus-visible { outline: 2px solid var(--cream); outline-offset: -6px; }

/* ---------- 404 ---------- */
.nf {
  margin-inline: var(--gutter);
  padding: clamp(24px, 3.2vw, 46px) 0 clamp(48px, 6.4vw, 92px) clamp(16px, 7.43vw, 107px);
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  column-gap: clamp(20px, 4.8vw, 69px);
}
.nf__code { font-weight: 400; font-size: clamp(72px, 10.708vw, 154px); line-height: 1.28; }
.nf__msg { font-size: clamp(15px, 1.32vw, 19px); line-height: 1.3; }
.nf__img {
  grid-column: 1 / -1; width: clamp(260px, 55.97vw, 806px);
  margin: clamp(16px, 3.2vw, 46px) 0 0 clamp(0px, 20.7vw, 298px);
}

/* ---------- Footer ---------- */
.footer {
  position: relative; z-index: 1;
  box-shadow: 0 -14px 32px rgb(38 34 93 / .28);              /* lifts like a drawer over the photos */
  background: var(--navy); color: var(--cream);
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center;   /* logo + nav centred on each other and in the footer */
  column-gap: clamp(24px, 4.9vw, 72px);
  padding: calc(clamp(32px, 3.125vw, 45px) + 15px) var(--gutter) calc(clamp(32px, 3.125vw, 45px) + 15px) clamp(16px, 3.89vw, 56px);   /* equal top and bottom so the row sits centred */
  overflow: hidden;
}
.footer__pitch { font-size: clamp(17px, 1.797vw, 25.9px); line-height: 1.2; }
.footer__pitch small { display: block; font-size: 12.33px; line-height: 1.47; margin-top: .1em; }
.footer__head, .footer__pitch small { display: block; }
.footer__pitch { min-width: 0; }
.fit-line { display: block; width: max-content; max-width: none; white-space: nowrap; }
.footer__form { display: flex; flex-wrap: wrap; gap: 15.5px; margin-top: clamp(18px, 1.8vw, 26px); }
.footer__status { flex-basis: 100%; font-size: 12.33px; line-height: 1.47; }
.footer__status:empty { display: none; }
.footer__legal { font-size: 12.33px; line-height: 1.47; text-transform: uppercase; margin-top: clamp(18px, 1.8vw, 26px); }
.footer__logo { width: clamp(180px, 25vw, 360px); }
.footer__nav { display: flex; flex-direction: column; align-items: flex-start; gap: 15.6px; }

.field, .btn-outline {
  font: inherit; font-size: 17.64px; line-height: normal;
  color: var(--cream); background: transparent;
  border: 1px solid var(--cream); border-radius: 2.5px; padding: 8.4px 9.26px;
}
.field { width: min(371.5px, 100%); }
.field:focus, .field:focus-visible { outline: none; }
.field::placeholder { color: var(--cream); opacity: 1; text-transform: uppercase; }
.btn-outline {
  display: inline-flex; align-items: center; justify-content: center;
  text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.btn-outline:hover { background: var(--cream); color: var(--navy); }
.btn-outline:disabled { opacity: .6; cursor: default; }

/* ---------- Easter egg: the broken site ---------- */
html.is-broken, html.is-broken body { overflow: hidden; }
html.is-broken .stage { z-index: 7; }            /* the can stays in front while everything falls behind it */
.debris { z-index: 6; pointer-events: none; will-change: transform; }
.frame.is-broken::before, .frame.is-broken::after { opacity: 0; }
.frame.is-broken .header { border-bottom-color: transparent; }
.debris-line { position: absolute; background: var(--red); z-index: 6; pointer-events: none; }
.hero__slice { pointer-events: none; }
.reset-site {
  position: fixed; z-index: 120; opacity: 0; transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease;
  box-shadow: 0 6px 18px rgb(38 34 93 / .25);
}
.reset-site.is-shown { opacity: 1; transform: none; }

/* ---------- Age gate ---------- */
.gate {
  position: fixed; top: 0; left: 0; right: 0; height: 100vh; z-index: 100;
  background: rgb(214 234 243 / .9); color: var(--navy);
  transition: opacity .45s ease;
}
.gate--live { background: transparent; }
.gate--fade { opacity: 0; }
.gate__blur {
  --blur: 1;
  position: absolute; inset: 0;
  -webkit-backdrop-filter: blur(calc(var(--blur) * 3px));
  backdrop-filter: blur(calc(var(--blur) * 3px));
}
@supports (height: 100lvh) { .gate { height: 100lvh; } }
.gate__ice, .gate__mist { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.gate__panel {
  position: absolute; inset: 0; overflow-y: auto;
  display: grid; place-items: center; text-align: center;
  padding: clamp(120px, 13vw, 170px) 20px;
  opacity: 0; transition: opacity .4s ease;
}
.gate--ready .gate__panel { opacity: 1; }
.gate--leaving .gate__panel { opacity: 0; transition-duration: .18s; }
.gate__logo {
  position: absolute; top: clamp(18px, 2.64vw, 38px); left: 50%; transform: translateX(-50%);
  width: clamp(84px, 12.28vw, 177px);
}
.gate__title { font-size: clamp(32px, 4.444vw, 64px); line-height: 1; }
.gate__title:focus, .gate__panel:focus { outline: none; }
.gate__q { font-size: clamp(17px, 1.667vw, 24px); line-height: 1.15; margin-top: clamp(20px, 2.3vw, 33px); }
.gate__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 25px; margin-top: clamp(20px, 2.3vw, 33px); }
.gate__fine { font-size: clamp(13px, 1.11vw, 16px); line-height: 1.1; max-width: 400px; text-wrap: balance; margin: clamp(20px, 2.3vw, 33px) auto 0; }
.btn {
  font: inherit; font-size: 17.64px; line-height: normal; text-transform: uppercase;
  color: var(--cream); border: 0; border-radius: 2.53px; padding: 8.42px; min-height: 40px; cursor: pointer;
}
.btn--navy { background: var(--navy); }
.btn--red { background: var(--red); }
.btn:hover { filter: brightness(1.15); }

/* ---------- Small screens ---------- */
@media (max-width: 760px) {
  :root {
    --can-h: min(calc(var(--section-h) * .767), 118.8vw);   /* +10% */
  }
  /* Mobile header + menu: Figma frames "Mobile Header" / "Mobile Menu - open" (1080 wide) */
  :root {
    --m: calc(100vw / 1080);
    --gutter: calc(var(--m) * 79);
    --header-h: calc(var(--m) * 372);
  }
  .header { position: relative; }
  .header__nav { display: block; height: 100%; padding: 0; }
  .header__link { display: none; }
  .header__logo { position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%); }
  .header__logo img { width: calc(var(--m) * 344); }
  .page-body { position: static; }      /* no drawer on phones: the footer simply follows the photos */
  .footer { box-shadow: none; }
  .gallery { height: calc(100vw / 1.5); }   /* fixed 3:2 on phones: export 1200 x 800 */
  .br-desktop { display: none; }
  .hero__type { background-image: url("/assets/hero-type-mobile.svg"); }   /* phone-only copy, Figma "Mobile text" */
  .frame::before, .frame::after { top: var(--header-h); }          /* guides start below the header */

  .menu-btn {
    display: block; position: absolute; right: var(--gutter); top: 50%;
    width: calc(var(--m) * 106); height: calc(var(--m) * 106); transform: translateY(-50%);
    min-width: 40px; min-height: 40px; padding: 0; border: 0; background: none; cursor: pointer;
  }
  .menu-btn span {
    position: absolute; left: 0; right: 0; height: 1.5px; background: var(--red); border-radius: 1px;
    top: 50%; transition: transform .35s var(--ease-move), opacity .2s ease;
  }
  .menu-btn span:nth-child(1) { transform: translateY(calc(var(--m) * -35.4)); }
  .menu-btn span:nth-child(3) { transform: translateY(calc(var(--m) * 35.4)); }
  .menu-btn[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg) scaleX(1.36); }
  .menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-btn[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg) scaleX(1.36); }

  /* frosted glass panel between the red guide lines */
  .mobile-menu {
    display: block; position: fixed; z-index: 30;
    top: var(--menu-top, var(--header-h)); bottom: 0;
    left: calc(var(--gutter) + 1px); right: calc(var(--gutter) + 1px);
    background: rgb(255 255 255 / .9);
    -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
    padding: calc(var(--m) * 63) calc(var(--m) * 56);
    overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; transition: opacity .3s ease;
  }
  .mobile-menu[hidden] { display: none; }
  .mobile-menu.is-open { opacity: 1; }
  .mobile-menu__label { font-weight: 700; font-size: max(12px, calc(var(--m) * 33.3)); letter-spacing: .02em; text-transform: uppercase; }
  .mobile-menu ul { list-style: none; margin: calc(var(--m) * 35) 0 0; padding: 0; }
  .mobile-menu a {
    display: inline-block; font-size: calc(var(--m) * 102.4); line-height: 1.36;
    text-transform: uppercase; text-decoration: none; color: var(--navy);
    transform: translateY(8px); opacity: 0; transition: transform .45s var(--ease-move), opacity .35s ease;
  }
  .mobile-menu.is-open a { transform: none; opacity: 1; }
  .mobile-menu.is-open li:nth-child(2) a { transition-delay: .05s; }
  .mobile-menu.is-open li:nth-child(3) a { transition-delay: .1s; }
  .mobile-menu a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 1px; text-underline-offset: .15em; }
  html.menu-open, html.menu-open body { overflow: hidden; }

  .stage__divider { display: none; }
  /* About: can sits at the top, copy below it */
  [data-page="about"] .can { left: var(--can-x-home); top: calc(24px + var(--can-h) / 2); }
  /* Where to buy: no can, list flows on the page */
  [data-page="where"] .can,
  [data-page="contact"] .can { left: var(--can-x-home); opacity: 0; pointer-events: none; }

  .split { grid-template-columns: 1fr; height: auto; min-height: var(--section-h); }
  .split__media { display: none; }
  .about__copy { align-self: start; padding: calc(var(--can-h) + 48px) 16px 40px; }
  .where__copy { padding: 28px 10px 40px; }
  /* Mobile contact: Figma "Mobile Contact" (1080 wide) */
  .contact__copy { padding: calc(var(--m) * 81) var(--gutter) calc(var(--m) * 90); }   /* same inset inside the red lines as outside them */
  .contact__line { white-space: nowrap; }
  .contact__title { font-size: min(calc(var(--m) * 57), 5.6vw); line-height: 1.3; }
  .contact__form { width: 100%; margin-top: calc(var(--m) * 45); gap: calc(var(--m) * 25.4); }
  .contact__row { grid-template-columns: 1fr 1fr; gap: calc(var(--m) * 23); }
  .cfield, .contact__submit { font-size: 16px; padding: max(8px, calc(var(--m) * 14.6)); }
  .cfield--message { height: max(150px, calc(var(--m) * 368)); }
  .contact .cfield::placeholder { font-size: 14px; }   /* labels fit the narrow boxes; typed text stays 16px */
  .contact__note { margin-top: calc(var(--m) * 25.4); }   /* double the usual gap below Submit */
  .stockists-box { height: auto; overflow: visible; padding-bottom: 0; -webkit-mask-image: none; mask-image: none; }
  .stockists { width: 100%; }
  .stockists th:first-child, .stockists td:first-child { width: auto; padding-right: 14px; }
  .stockists th:last-child, .stockists td:last-child { width: 1%; white-space: nowrap; }

  .nf { grid-template-columns: 1fr; row-gap: 8px; padding: 28px 16px 48px; }
  .nf__msg { text-wrap: balance; }
  .nf__img { margin-left: 0; width: 100%; }

  /* Mobile footer: Figma frame "Mobile Footer" (reworked). Stacked: copy, form row, nav row,
     big centred roundel, © line. --mu = 1 Figma px; minimums keep text readable and tappable. */
  .footer {
    --mu: calc(100vw / 1080);
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "pitch" "form" "nav" "logo" "legal";
    padding: calc(var(--mu) * 65) calc(var(--mu) * 69) calc(var(--mu) * 60);
  }
  .footer__main { display: contents; }
  .footer__pitch { grid-area: pitch; }
  .footer__head { font-size: clamp(16px, 5.4vw, 24px); line-height: 1.22; }
  .footer__head .fit-line:nth-child(2) { width: auto; white-space: normal; text-wrap: balance; }
  .footer__pitch small { font-size: max(12px, 3.15vw); line-height: 1.4; margin-top: .55em; }
  .footer__pitch small .fit-line { width: max-content; white-space: nowrap; }   /* one line, scaled to fit */
  .footer__form { grid-area: form; position: relative; flex-wrap: nowrap; align-items: stretch; gap: calc(var(--mu) * 20); margin-top: calc(var(--mu) * 50); }
  .footer__form .btn-outline { flex: none; padding-inline: calc(var(--mu) * 53); }
  .footer__status { position: absolute; top: 100%; margin-top: 6px; }
  .footer__nav { grid-area: nav; flex-direction: row; flex-wrap: nowrap; gap: calc(var(--mu) * 20); margin-top: calc(var(--mu) * 60); }
  .footer__nav { display: grid; grid-template-columns: 1fr 1fr; }   /* 4 buttons: tidy 2 x 2 on phones */
  .footer__nav .btn-outline { padding-inline: 4px; }
  .footer__logo { grid-area: logo; justify-self: center; width: calc(var(--mu) * 723); margin-top: calc(var(--mu) * 60); }
  .footer__legal { grid-area: legal; justify-self: center; margin-top: calc(var(--mu) * 43); font-size: max(11px, calc(var(--mu) * 22)); }
  .footer .field, .footer .btn-outline {
    font-size: max(16px, calc(var(--mu) * 27.1)); min-height: max(40px, calc(var(--mu) * 63));   /* same size as the EMAIL text */
    border-radius: max(2.5px, calc(var(--mu) * 3.88));
  }
  .footer .field {
    flex: 1 1 auto; width: auto; min-width: 0; padding-inline: 12px;
    font-size: max(16px, calc(var(--mu) * 27.1));       /* 16px+ stops iOS zooming in on focus */
    background: var(--cream); color: var(--navy); border-color: var(--cream);
  }
  .footer .field::placeholder { color: var(--navy); }
  .footer .field:focus, .footer .field:focus-visible { outline: none; }

  .gate__logo { left: var(--gutter); top: calc(var(--m) * 82); transform: none; width: calc(var(--m) * 344); }
  .gate__title { font-size: min(7.2vw, 34px); }        /* two lines, no widow */
  /* iPhone Safari draws the page under its floating toolbar: run the ice well past the bottom
     edge so nothing peeks out, while the copy stays centred in the visible screen */
  .gate { height: calc(100vh + 200px); }
  @supports (height: 100lvh) { .gate { height: calc(100lvh + 200px); } }
  .gate__panel { bottom: auto; height: 100vh; }
  @supports (height: 100dvh) { .gate__panel { height: 100dvh; } }
}

@media (prefers-reduced-motion: reduce) {
  .can, .stage__divider, main, .gallery__img { transition-duration: .01s !important; transition-delay: 0s !important; }
  .gate, .gate__panel { transition-duration: .15s; }
}