/* Parfum Deals — brand presentation
   Layout: each slide is a 1920×1080 Figma frame, rebuilt on a scalable "stage" (1 design px = --u).
   Below 1024×600 the stage turns into a stacked, scrollable layout per slide. */

@font-face { font-family: "Britanica"; src: url("assets/fonts/Britanica-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Britanica"; src: url("assets/fonts/Britanica-Black.otf") format("opentype"); font-weight: 900; font-display: swap; }

:root {
  /* colour (brand is deliberately single-theme: white gallery walls, ink, night bar) */
  --paper: #ffffff;
  --mist: #f3f3f3;
  --ink: #000000;
  --night: #0a1014;
  --line: #e7e7e7;
  --on-night: #ffffff;

  /* type */
  --display: "Britanica", "Helvetica Neue", Arial, sans-serif;
  --text: "Inter", "Helvetica Neue", Arial, sans-serif;

  /* scale: 1 Figma pixel */
  --u: min(calc(100vw / 1920), calc(100dvh / 1080), 0.9px); /* 0.9px = MacBook Pro 16" full screen (1728 px wide); bigger screens keep that size */
  --menu-h: max(56px, calc(124 * var(--u)));
  --fs-body: max(13px, calc(18 * var(--u)));
  --fs-h1: max(24px, calc(48 * var(--u)));
  --fs-h2: max(18px, calc(32 * var(--u)));
  --fs-menu: max(11px, calc(18 * var(--u)));
  --fs-small: max(11px, calc(14 * var(--u)));

  --ease: cubic-bezier(.77, 0, .18, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --slide-dur: 1000ms;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; overflow: hidden;
  background: var(--paper); color: var(--ink);
  font-family: var(--text); font-size: var(--fs-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p { margin: 0; }
h1, h2 { margin: 0; font-weight: 700; }
figure { margin: 0; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- deck & slide transitions ---------- */
.deck { position: fixed; inset: 0; overflow: hidden; background: var(--night); touch-action: pan-y; }
.slide {
  position: absolute; inset: 0; overflow: hidden;
  background: var(--mist);
  visibility: hidden;
  transform: translate3d(100%, 0, 0);
  will-change: transform;
}
.slide--white { background: var(--paper); }
.slide--dark { background: #121212; color: var(--on-night); } /* matches the right edge of the laptop photo */
.slide.is-current { visibility: visible; transform: none; z-index: 2; }
.slide.is-leaving { visibility: visible; z-index: 1; }

/* ---------- stage ---------- */
.stage {
  position: absolute;
  left: 50%;
  top: calc((100dvh - 1080 * var(--u)) / 2);
  width: calc(1920 * var(--u));
  height: calc(956 * var(--u));
  transform: translateX(-50%);
}
.abs {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
}
.abs[style*="--h"] { height: calc(var(--h) * var(--u)); }

/* ---------- type ---------- */
.h1 { font-family: var(--display); font-weight: 700; font-size: var(--fs-h1); line-height: 1.1; letter-spacing: -0.005em; text-wrap: balance; }
.h1--tight { line-height: 1.2; }
.h2 { font-family: var(--display); font-weight: 700; font-size: var(--fs-h2); line-height: 1.25; text-wrap: balance; }
.body { font-size: var(--fs-body); line-height: 1.6; font-weight: 400; max-width: 68ch; }
.body--light { font-weight: 300; }
.stack { display: flex; flex-direction: column; gap: 1.6em; }
.caption { font-size: var(--fs-small); line-height: 1.2; margin-top: calc(10 * var(--u)); }
.caption--right { text-align: right; }

.title { display: flex; flex-direction: column; gap: calc(40 * var(--u)); }
.title__head { display: flex; align-items: center; gap: calc(25 * var(--u)); }
/* two-line titles: slash runs from the cap top of line 1 to the baseline of line 2 */
.title__head:has(.h1--tight) .slash { align-self: flex-start; height: calc(91 * var(--u)); margin-top: calc(16 * var(--u)); }
/* tall slashes: rotate around the middle so the line fills its own box, bottom tip on the text column edge */
.title__head:has(.h1--tight) .slash::before, .contact__head .slash--thin::before, .campaign__title .slash--thin::before { transform: translateX(-50%) rotate(29.5deg); transform-origin: 50% 50%; }
.title__head .h1, .title__head .h2 { flex: 1; min-width: 0; }

/* the brand slash: a single hairline at the logo's angle */
.slash {
  --sh: 36;
  position: relative; flex: none; display: inline-block;
  height: max(18px, calc(var(--sh) * var(--u)));
  aspect-ratio: 0.566;
}
.slash::before {
  content: ""; position: absolute; left: 50%; top: -7.4%; bottom: -7.4%;
  width: max(1px, calc(1.4 * var(--u))); background: currentColor;
  transform: translateX(-50%) rotate(29.5deg) scaleY(var(--draw, 1));
  transform-origin: 50% 100%;
}
.slash--thin::before { width: max(1px, calc(1.2 * var(--u))); }

/* ---------- slide content ----------
   Content sits still on each slide; the whole page moves as one (push transition, see app.js). */

/* one arrow shape everywhere: line and head drawn as a single SVG path (mask), coloured by currentColor */
.opener__arrow, .pill__arrow, .card__cta::before, .arrow::before {
  display: block; flex: none;
  background-color: currentColor;
  -webkit-mask: var(--arrow) center / 100% 100% no-repeat;
          mask: var(--arrow) center / 100% 100% no-repeat;
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpath d='M0 5.0H19.3M14.8 0.5L19.3 5.0L14.8 9.5' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E");
}
.opener__arrow { --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 12'%3E%3Cpath d='M0 6.0H43.3M37.8 0.5L43.3 6.0L37.8 11.5' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E"); }
.card__cta::before { background-color: var(--ink); }

/* ---------- 1A opener ---------- */
.slide--opener { background: var(--mist); }
.opener__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 48%;
  transform: scale(1.44); transform-origin: 50% 48%;
}
.js .opener__img { transform: scale(1.56); opacity: 0; }
.slide--opener.is-in .opener__img { transform: scale(1.44); opacity: 1; transition: transform 2600ms var(--ease-out), opacity 1200ms ease; }
.opener__logo {
  position: absolute; left: 50%; top: 55%;
  width: calc(925 * var(--u)); height: calc(50 * var(--u));
  transform: translate(-50%, -30%);
  display: flex; justify-content: space-between; align-items: center;
}
.opener__parfum { width: calc(262 * var(--u)); }
.opener__deals { width: calc(236 * var(--u)); }
.js .opener__parfum { opacity: 0; transform: translateX(calc(-80 * var(--u))); }
.js .opener__deals { opacity: 0; transform: translateX(calc(80 * var(--u))); }
.slide--opener.is-in .opener__parfum,
.slide--opener.is-in .opener__deals { opacity: 1; transform: none; transition: opacity 1200ms ease 700ms, transform 1600ms var(--ease-out) 700ms; }
.opener__hint {
  position: absolute; left: 50%; bottom: calc(56 * var(--u) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px;
  font-size: var(--fs-small); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); white-space: nowrap;
  padding: 10px 14px;
}
.js .opener__hint { opacity: 0; }
.slide--opener.is-in .opener__hint { opacity: .75; transition: opacity 1000ms ease 1800ms; }
.opener__hint:hover { opacity: 1 !important; }
.opener__arrow { width: 44px; height: 12px; animation: nudge 2.4s var(--ease) infinite 2.4s; }
@keyframes nudge { 0%, 60%, 100% { transform: translateX(0); } 30% { transform: translateX(10px); } }
.hint-touch { display: none; }
@media (hover: none) and (pointer: coarse), (max-width: 1023px), (max-height: 599px) { .hint-touch { display: inline; } .hint-desktop { display: none; } }

/* ---------- 1B story ---------- */
.story__img { height: auto; }
.story-slider { display: none; }

/* ---------- 2 webshop ---------- */
.bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 20% 50%; }
/* Laptop photo: fills the slide like "cover", but slides left when needed so the laptop
   (right edge at 56.9% of the photo) always stays at least 50 design px clear of the text column (x 1092). */
.webshop__bg {
  --bw: max(100vw, calc(100dvh * 16 / 9));
  inset: auto; max-width: none; object-fit: fill;
  width: var(--bw); height: calc(var(--bw) * 9 / 16);
  top: calc(50% - var(--bw) * 9 / 32);
  left: min(calc((100vw - var(--bw)) * 0.2), calc(50vw - 960 * var(--u) + 1042 * var(--u) - 0.569 * var(--bw)));
}
.webshop__text { display: flex; flex-direction: column; gap: calc(40 * var(--u)); }
.webshop__mobile { display: none; }
.feature { display: flex; flex-direction: column; gap: calc(20 * var(--u)); }

/* ---------- 3 concept ---------- */
.media-card { object-fit: cover; border-radius: calc(15 * var(--u)); background: var(--mist); }

/* ---------- 4 campaigns ---------- */
.cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(30 * var(--u)); }
.card { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 0; }
.card__img { position: relative; display: block; width: 100%; aspect-ratio: 286 / 443; border-radius: calc(13 * var(--u)); overflow: hidden; background: var(--mist); }
.card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.card__cta {
  position: absolute; right: calc(16 * var(--u)); bottom: calc(16 * var(--u));
  width: max(26px, calc(40 * var(--u))); aspect-ratio: 1; border-radius: 50%;
  background: var(--paper); box-shadow: 0 1px 0 rgba(0,0,0,.04);
  transition: transform 600ms var(--ease-out), background-color 400ms ease;
}
.card__cta::before { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 10px; transform: translate(-40%, -50%); --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 10'%3E%3Cpath d='M0.6 0.6L5.2 5L0.6 9.4' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E"); } /* chevron only */
.card__name { font-family: var(--display); font-weight: 700; font-size: max(16px, calc(26 * var(--u))); margin-top: calc(20 * var(--u)); line-height: 1.15; }
.card__brand { font-weight: 500; font-size: var(--fs-body); color: var(--brand); margin-top: calc(10 * var(--u)); }
@media (hover: hover) {
  .card:hover .card__img img { transform: scale(1.05) translateY(-1.5%); }
  .card:hover .card__cta { background: var(--brand); transform: scale(1.12); }
  .card:hover .card__cta::before { background-color: #fff; }
}

/* ---------- 4B campaign detail ---------- */
.campaign__title { display: flex; align-items: flex-start; gap: calc(26 * var(--u)); }
.campaign__brand { line-height: 1.3; margin-top: calc(2 * var(--u)); }
.campaign__name { line-height: 1.15; }
.campaign__nav { display: flex; gap: 10px; flex-wrap: wrap; }
.campaign__social { height: auto; }
.campaign__site { border: 1px solid var(--line); border-radius: calc(20 * var(--u)); overflow: hidden; background: var(--paper); }
.campaign__site img { width: 100%; }
.campaign__slides, .campaign__slide { display: contents; }
.campaign__dots { display: none; }

.pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: max(8px, calc(10 * var(--u))) max(14px, calc(20 * var(--u)));
  border-radius: 120px; background: var(--mist);
  font-size: var(--fs-small); line-height: 1.2; white-space: nowrap;
}
.pill--dark { background: var(--ink); color: var(--paper); }
.pill--ghost { background: transparent; border: 1px solid var(--line); transition: background-color 300ms ease, border-color 300ms ease; }
.pill--ghost:hover { background: var(--mist); border-color: var(--mist); }
.pill__arrow { width: 18px; height: 9px; }
.pill__arrow--back { transform: scaleX(-1); }

/* ---------- 5 process ---------- */
.collage { display: contents; }
.process__slide, .process__desktop-only { display: contents; }
.process__dots { display: none; }
.process__main img { border-radius: calc(14 * var(--u)); background: var(--mist); }
.process__main .pill { position: absolute; top: calc(-12 * var(--u)); left: 50%; transform: translateX(-50%); }
.process__posts .caption { margin: 0 0 calc(10 * var(--u)); }

/* ---------- 6 motion ---------- */
.motion__tags { display: flex; justify-content: flex-end; gap: 10px; }
.motion__grid {
  display: grid; grid-template-columns: 1fr 1fr 2.07fr; grid-template-rows: auto auto;
  gap: calc(10 * var(--u));
}
.motion__item { position: relative; display: block; width: 100%; height: 100%; border-radius: calc(10 * var(--u)); overflow: hidden; }
.motion__item img { width: 100%; height: 100%; aspect-ratio: 311 / 175; object-fit: cover; transition: transform 900ms var(--ease-out); }
.motion__play { /* round play button, triangle only */
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: max(36px, calc(52 * var(--u))); aspect-ratio: 1; border-radius: 50%;
  background: rgba(255,255,255,.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: transform 500ms var(--ease-out), background-color 300ms ease;
}
.motion__play::before {
  content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%);
  border-style: solid; border-color: transparent transparent transparent var(--ink);
  border-width: max(6px, calc(8 * var(--u))) 0 max(6px, calc(8 * var(--u))) max(9px, calc(13 * var(--u)));
}
.motion__big .motion__play { width: max(48px, calc(72 * var(--u))); }
.motion__tag {
  position: absolute; left: calc(14 * var(--u)); bottom: calc(14 * var(--u));
  padding: 6px 12px; border-radius: 120px; background: rgba(255,255,255,.85);
  font-size: var(--fs-small); line-height: 1.2;
}
@media (hover: hover) {
  .motion__item:hover img { transform: scale(1.04); }
  .motion__item:hover .motion__play { transform: translate(-50%, -50%) scale(1.1); background: #fff; }
}

/* ---------- video lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: max(24px, 5vh) max(16px, 5vw);
  background: rgba(10, 16, 20, .92);
  opacity: 0; transition: opacity 300ms ease;
}
.lightbox.is-open { opacity: 1; }
.lightbox__frame { position: relative; width: min(100%, calc((100dvh - 2 * max(24px, 5vh)) * 16 / 9)); aspect-ratio: 16 / 9; transform: scale(.97); transition: transform 400ms var(--ease-out); }
.lightbox.is-open .lightbox__frame { transform: none; }
.lightbox__video { display: block; width: 100%; height: 100%; background: #000; border-radius: 10px; }
.lightbox__close {
  position: absolute; top: max(16px, 2vh); right: max(16px, 2vw);
  width: 44px; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); color: #fff;
  transition: border-color 300ms ease, background-color 300ms ease;
}
.lightbox__close:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.lightbox__close::before, .lightbox__close::after { content: ""; position: absolute; left: 30%; right: 30%; top: 50%; height: 1px; background: currentColor; transform: rotate(45deg); }
.lightbox__close::after { transform: rotate(-45deg); }
.motion__big { grid-column: 3; grid-row: 1 / span 2; }

/* ---------- 7 partnership ---------- */
.partner__mobile { display: none; }
.partner__bg { /* the collage never crosses its Figma start line (x 708), so it can't run into the text on narrower screens; extra width is cropped on the right */
  position: absolute; top: 0; bottom: 0; right: 0;
  left: calc(50vw - 960 * var(--u) + 708 * var(--u));
  width: auto; height: 100%; max-width: none;
  object-fit: cover; object-position: 0% 100%;
}

/* ---------- 8 contact ---------- */
.contact__head { display: flex; align-items: flex-start; gap: calc(26 * var(--u)); }
.contact__head .slash { height: calc(123 * var(--u)); margin-top: calc(8 * var(--u)); } /* top of kicker to baseline of 'Together' */
.contact__kicker { font-size: max(16px, calc(24 * var(--u))); line-height: 1.6; margin-left: calc(14 * var(--u)); }
.contact__big { font-family: var(--display); font-weight: 700; font-size: max(56px, calc(100 * var(--u))); line-height: 1; letter-spacing: -0.01em; }
.contact__body { display: flex; flex-direction: column; gap: calc(60 * var(--u)); }
.contact__card { display: flex; flex-direction: column; gap: calc(8 * var(--u)); font-size: var(--fs-body); line-height: 1.6; }
.contact__name { font-weight: 600; margin-bottom: calc(6 * var(--u)); }
.contact__link { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 500ms var(--ease-out); width: fit-content; user-select: all; }
.contact__link:hover { background-size: 100% 1px; }

/* ---------- fixed chrome ---------- */
.corner-logo {
  position: fixed; top: 0; right: 0; z-index: 20;
  width: max(150px, calc(276 * var(--u)));
  transition: transform 800ms var(--ease-out), opacity 600ms ease;
}
.corner-logo img { width: 100%; }
body.at-opener .corner-logo { transform: translateY(-100%); opacity: 0; pointer-events: none; }

.menu {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  height: calc(var(--menu-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--night); color: var(--on-night);
  display: flex; align-items: center; justify-content: center;
  transition: transform 900ms var(--ease-out);
}
body.at-opener .menu { transform: translateY(100%); }
.menu__progress { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(255,255,255,.08); }
.menu__progress span { display: block; height: 100%; width: 100%; background: rgba(255,255,255,.55); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: transform 900ms var(--ease); }
.menu__items {
  display: flex; align-items: center; gap: max(18px, calc(60 * var(--u)));
  overflow-x: auto; scrollbar-width: none; max-width: 100%;
  padding-inline: 16px;
}
.menu__items::-webkit-scrollbar { display: none; }
.menu__viewport { display: contents; }
.menu__items button {
  display: inline-flex; align-items: center; gap: max(12px, calc(22 * var(--u)));
  font-size: var(--fs-menu); font-weight: 300; line-height: 1.4; white-space: nowrap;
  opacity: .6; transition: opacity 400ms ease;
  padding-block: 8px;
}
.menu__items button:hover { opacity: .9; }
.menu__items button.is-active { opacity: 1; font-weight: 400; }
.slash--menu { height: 1.3em; --draw: 1; transform: translateY(-0.1em); } /* text is optically centred on the slash */
.slash--menu::before { width: 1px; }
.menu__items button.is-active .slash--menu::before { width: 2px; }

.menu__arrows { position: absolute; right: calc(40 * var(--u)); top: 50%; transform: translateY(-50%); display: flex; gap: 6px; }
.arrow { position: relative; width: max(34px, calc(48 * var(--u))); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); transition: border-color 300ms ease, background-color 300ms ease, opacity 300ms ease; }
.arrow:hover { border-color: rgba(255,255,255,.6); }
.arrow::before { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 9px; transform: translate(-50%, -50%); }
.arrow--prev { transform: scaleX(-1); }
.arrow:disabled { opacity: .25; cursor: default; }

@media (max-width: 1440px) { .menu__arrows { display: none; } }

/* =========================================================
   Stacked layout: phones, small tablets, landscape phones
   ========================================================= */
@media (max-width: 1023px), (max-height: 599px) {
  :root {
    --u: 0.5px;
    --menu-h: 56px;
    --fs-body: 14px;
    --fs-h1: clamp(26px, 7vw, 34px);
    --fs-h2: 21px;
    --fs-menu: 13px;
    --fs-small: 13px;
  }
  .slide { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  .stage {
    position: relative; left: auto; top: auto; transform: none;
    width: 100%; height: auto; min-height: 100%;
    display: flex; flex-direction: column; gap: 32px;
    padding: calc(54px + env(safe-area-inset-top, 0px)) 20px calc(var(--menu-h) + 44px + env(safe-area-inset-bottom, 0px));
    max-width: 760px; margin-inline: auto;
  }
  .abs, .abs[style*="--h"] { position: relative; left: auto; top: auto; width: auto; height: auto; }
  .title { gap: 18px; }
  .title__head { gap: 14px; }
  .slash { height: 30px; }
  /* phones: every title slash runs from the top of the first line to the baseline of the last line
     (height + offset set by fitSlashes() in app.js); bottom tip on the text column edge */
  .title__head, .campaign__title, .contact__head { align-items: flex-start; }
  .title__head .slash, .campaign__title .slash, .contact__head .slash { align-self: flex-start; transform: none; }
  .title__head .slash::before, .campaign__title .slash::before, .contact__head .slash::before { transform: translateX(-50%) rotate(29.5deg); transform-origin: 50% 50%; }
  .h1--tight + * { margin-top: 0; }
  .body { max-width: none; line-height: 1.5; }
  .contact__card { line-height: 1.5; }
  .caption { margin-top: 8px; }

  /* opener stays a full-bleed poster */
  .opener__img { transform: none !important; object-position: 50% 45%; }
  .js .opener__img { transform: scale(1.08) !important; }
  .slide--opener.is-in .opener__img { transform: none !important; }
  .opener__logo { width: min(86vw, 520px); height: auto; transform: translate(-50%, -50%); }
  .opener__parfum { width: 28.3%; } .opener__deals { width: 25.5%; }
  .opener__hint { bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
  .opener__arrow { width: 12px; height: 30px; --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 30'%3E%3Cpath d='M6 30V0.7M0.5 6.2L6 0.7L11.5 6.2' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E"); animation-name: nudge-up; }
  @keyframes nudge-up { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-8px); } }

  /* story: rotating full-screen photos behind the text instead of the five-model strip */
  /* the photo sits below the text: head under the paragraph, feet above the menu (placed by fitStory() in app.js);
     the frame carries the photo's own edge colours so a narrower photo blends into the page */
  .story-slider { display: block; position: absolute; inset: 0; z-index: 0; overflow: hidden; background: rgb(164,168,177); }
  .story-slider__frame {
    position: absolute; left: 0; right: 0; top: var(--st-top, 0px); height: var(--st-h, 100%);
    background: linear-gradient(180deg, rgb(164,168,177) 0%, rgb(181,184,191) 10%, rgb(197,198,202) 20%, rgb(210,210,212) 30%, rgb(224,223,221) 40%, rgb(233,232,230) 50%, rgb(231,230,229) 60%, rgb(226,225,224) 70%, rgb(230,229,227) 80%, rgb(245,244,242) 90%, rgb(245,245,243) 100%);
  }
  .story-slider__img {
    position: absolute; top: 0; left: 50%; height: 100%; width: auto; max-width: none; transform: translateX(-50%);
    opacity: 0; transition: opacity 700ms ease;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  }
  .story-slider__img.is-on { opacity: 1; }
  [data-slide="story"] .stage { position: relative; z-index: 1; }
  .story__img { display: none; }

  /* webshop: text first, laptop photo fills the rest of the screen above the menu; no scrolling */
  .slide--dark { background: var(--night); }
  .webshop__bg { display: none; }
  .slide--dark .stage { padding-bottom: var(--menu-h); gap: 0; }
  .webshop__text { gap: 22px; }
  .webshop__mobile.is-hidden { display: none; }
  .motion__tags.is-hidden { display: none; }
  .webshop__mobile {
    display: block; flex: 1 1 0; min-height: 150px; max-height: 62vw;
    width: calc(100% + 40px); max-width: none; margin: auto -20px 0; /* spare height goes above the photo */
    object-fit: cover; object-position: 42% 55%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 28%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 28%);
  }
  .feature { gap: 10px; }

  /* concept */
  /* concept: the two photos take whatever height is left above the menu, so the page never scrolls */
  [data-slide="concept"] .stage { min-height: 100%; gap: 24px; }
  .concept__media { display: flex; gap: 12px; order: 2; flex: 1 1 0; min-height: 120px; max-height: 88vw; justify-content: center; }
  .media-card { flex: 0 1 auto; width: auto !important; height: 100% !important; max-width: calc(50% - 6px); aspect-ratio: 363 / 560; border-radius: 12px; }

  /* campaigns */
  /* rows of three; the last row (two cards) is centred */
  .cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 10px; }
  .cards .card { flex: 0 0 calc((100% - 20px) / 3); min-width: 0; }
  .card__img { border-radius: 12px; }
  /* shorter screens: trim the plain grey above and below the bottles (bottle stays centred) */
  @media (max-height: 880px) { .card__img { aspect-ratio: 286 / 350; } }
  @media (max-height: 760px) { .card__img { aspect-ratio: 286 / 295; } }
  @media (max-height: 700px) { [data-slide="campaigns"] .stage { gap: 20px; } .cards { row-gap: 12px; } .card__name { margin-top: 6px; } }
  .card__name { font-size: 15px; margin-top: 8px; }
  .card__brand { font-size: 12px; margin-top: 2px; }
  .card__cta { width: 24px; right: 6px; bottom: 6px; }

  /* campaign detail */
  .campaign__title { gap: 16px; }
  .campaign__title .slash { height: 56px; }
  /* two alternating slides fill the space between title and menu: colour + social ads, then the product page */
  .slide--campaign .stage { min-height: 100%; gap: 18px; }
  .campaign__nav { order: 2; gap: 8px; }
  .campaign__slides { order: 3; display: block; position: relative; flex: 1 1 0; min-height: 260px; margin-top: 20px; }
  .campaign__slide { display: flex; flex-direction: column; gap: 14px; position: absolute; inset: 0 0 22px 0; opacity: 0; transition: opacity 600ms ease; pointer-events: none; }
  .campaign__slide.is-on { opacity: 1; pointer-events: auto; }
  .campaign__colour { width: 84px !important; flex: none; }
  .campaign__social { width: 100% !important; height: auto !important; flex: 1 1 0; min-height: 0; object-fit: contain; object-position: 50% 0; }
  .campaign__slide--site { align-items: center; }
  .campaign__site { width: auto !important; height: 100% !important; max-width: 100%; border-radius: 14px; }
  .campaign__site img { width: auto; height: 100%; max-width: 100%; object-fit: contain; }
  .campaign__dots { display: flex; gap: 6px; justify-content: center; position: absolute; left: 0; right: 0; bottom: 0; }
  .campaign__dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); opacity: .2; transition: opacity 300ms ease; }
  .campaign__dots span.is-on { opacity: .8; }

  /* process */
  .m-hide { display: none; }
  /* process: four alternating slides fill the space under the text */
  [data-slide="process"] .stage { min-height: 100%; }
  .collage { order: 2; display: block; position: relative; flex: 1 1 0; min-height: 130px; margin-top: 4px; }
  @media (max-height: 760px) { [data-slide="process"] .stage { gap: 20px; } [data-slide="process"] .stack { gap: 1em; } }
  .process__slide { display: flex; gap: 12px; justify-content: center; align-items: stretch; position: absolute; inset: 0 0 22px 0; opacity: 0; transition: opacity 600ms ease; pointer-events: none; }
  .process__slide.is-on { opacity: 1; pointer-events: auto; }
  .process__desktop-only { display: none; }
  .collage .abs { width: auto !important; }
  .process__slide figure { display: flex; flex-direction: column; min-width: 0; min-height: 0; flex: 1 1 0; align-items: center; justify-content: center; }
  .process__slide figure img { min-height: 0; max-height: 100%; width: auto; max-width: 100%; object-fit: contain; flex: 0 1 auto; }
  .process__slide figure .caption { flex: none; }
  .process__colours img { width: 240px; }
  .process__main { position: relative; padding-top: 16px; }
  .process__main img { border-radius: 12px; }
  .process__main .pill { top: 0; }
  .process__posts { justify-content: center !important; }
  .process__dots { display: flex; gap: 6px; justify-content: center; position: absolute; left: 0; right: 0; bottom: 0; }
  .process__dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); opacity: .2; transition: opacity 300ms ease; }
  .process__dots span.is-on { opacity: .8; }
  .caption--right { text-align: left; }

  /* motion */
  .motion__tags { justify-content: flex-start; flex-wrap: wrap; }
  .motion__grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .motion__big { grid-column: 1 / -1; grid-row: 1; }
  .motion__item { border-radius: 8px; }
  .motion__big { aspect-ratio: auto !important; }
  .motion__big img { aspect-ratio: 645 / 360; }
  @media (max-height: 700px) { [data-slide="motion"] .stage { gap: 18px; } [data-slide="motion"] .stack { gap: 0.9em; } .motion__big img { aspect-ratio: 645 / 330; } }

  /* partnership: its own tilted collage sits in the bottom-right corner, behind the text */
  .partner__bg { display: none; }
  .partner__mobile { display: block; position: absolute; right: 0; bottom: var(--menu-h); width: 100%; max-width: 520px; height: auto; max-height: calc(100dvh - var(--menu-h) - 330px); object-fit: contain; object-position: 100% 100%; z-index: 0; pointer-events: none; } /* shrinks on short phones so it stays clear of the text */
  [data-slide="partnership"] .stage { position: relative; z-index: 1; }

  /* contact */
  .contact__head { gap: 16px; }
  .contact__head .slash { height: 76px; margin-top: 4px; }
  .contact__kicker { margin-left: 4px; }
  .contact__body { gap: 36px; }
  .contact__card { gap: 4px; }

  /* one section in the middle, earlier ones fading out left, the next one peeking in on the right */
  .menu__viewport {
    display: block; position: absolute; inset: 0 0 env(safe-area-inset-bottom, 0px) 0; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 4%, #000 38%, #000 62%, transparent 96%);
            mask-image: linear-gradient(90deg, transparent 4%, #000 38%, #000 62%, transparent 96%);
  }
  .menu__items {
    position: absolute; left: 0; top: 0; bottom: 0; max-width: none; width: max-content;
    overflow: visible; justify-content: flex-start; gap: 52px; padding: 0;
    transition: transform 600ms var(--ease-out);
  }
  .menu__items button { gap: 0; }
  .slash--menu { display: none; }
  .corner-logo { width: 128px; }
}


/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  :root { --slide-dur: 1ms; }
  .js .opener__img, .js .opener__parfum, .js .opener__deals, .js .opener__hint { opacity: 1 !important; transform: none !important; transition: none !important; }
  .opener__img { transform: scale(1.44) !important; }
  .opener__arrow { animation: none; }
}