/* FRAG — Coming soon. Values from Figma "FRAG - Website V.0.1" (page Coming soon, option B).
   Token names mirror the Figma variables: primitive → semantic → responsive. */

@font-face {
  font-family: "Zalando Sans Expanded";
  src: url("/assets/fonts/zalando-sans-expanded-latin.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Zalando Sans SemiExpanded";
  src: url("/assets/fonts/zalando-sans-semiexpanded-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Zalando Sans";
  src: url("/assets/fonts/zalando-sans-latin.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* primitive */
  --color-neutral-0: #ffffff;
  --color-neutral-200: #e2e2e2;
  --color-neutral-900: #121212;
  --font-display: "Zalando Sans Expanded", "Helvetica Neue", Arial, sans-serif;
  --font-sub: "Zalando Sans SemiExpanded", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Zalando Sans", "Helvetica Neue", Arial, sans-serif;

  /* semantic */
  --bg-canvas: var(--color-neutral-0);
  --bg-media: #efefef;
  --text-primary: var(--color-neutral-900);
  --text-inverse: var(--color-neutral-0);
  --border-default: var(--color-neutral-200);
  --text-secondary: #8a8885;
  --border-strong: var(--color-neutral-900);
  --bg-subtle: #f7f5f0;
  --action-primary-bg: var(--color-neutral-900);
  --action-primary-bg-hover: #2b2b2b;
  --action-primary-fg: var(--color-neutral-0);
  --action-disabled-bg: #efefef;
  --action-disabled-fg: #8a8885;
  --focus-ring: var(--color-neutral-900);
  --bg-scrim: rgb(18 18 18 / 0.4);
  --elevation-overlay: 0 8px 24px rgb(18 18 18 / 0.08);
  --scrim-ink: 18 18 18;

  /* responsive — mobile (≤767) */
  --layout-gutter: 16px;
  --layout-section-y: 56px;
  --header-h: 80px;
  --font-size-display: 44px;
  --font-size-subheading: 18px;
  --font-size-label: 11px;
  --logo-nav-w: 66px;
  --copy-gap: 12px;
  --cell-w: 140.8px;
  --cell-h: 70.4px;
  --font-size-h3: 22px;
  --font-size-h4: 18px;
  --font-size-body-m: 15px;
  --font-size-body-s: 13px;
}

@media (min-width: 768px) {
  :root {
    --layout-gutter: 32px;
    --layout-section-y: 72px;
    --font-size-display: 64px;
    --font-size-subheading: 20px;
    --font-size-label: 12px;
    --logo-nav-w: 81px;
    --copy-gap: 18px;
    --cell-w: 180.4px;
    --cell-h: 90.2px;
    --font-size-h3: 24px;
    --font-size-body-m: 16px;
    --font-size-body-s: 14px;
  }
}

@media (min-width: 1080px) {
  :root {
    --layout-gutter: 48px;
    --layout-section-y: 96px;
    --font-size-display: 96px;
    --font-size-subheading: 22px;
    --logo-nav-w: 88px;
    --cell-w: 220px;
    --cell-h: 110px;
    --font-size-h3: 28px;
    --font-size-h4: 20px;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: var(--header-h) minmax(520px, 1fr) auto;
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }

/* navigation/header — type=logo-only */
.header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--layout-gutter);
  background: var(--bg-canvas);
}
.header__logo { width: var(--logo-nav-w); height: auto; }

/* Hero — full-bleed image */
.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: var(--layout-section-y) var(--layout-gutter);
  background: var(--bg-media);
  color: var(--text-inverse);
}
.hero__media, .hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__media img { object-fit: cover; object-position: center; }
.hero::after {               /* scrim — ink gradient */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(var(--scrim-ink) / 0) 35%, rgb(var(--scrim-ink) / 0.62) 100%);
  pointer-events: none;
}
.hero__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--copy-gap);
  text-align: center;
}
.hero__label, .hero__title, .hero__sub { margin: 0; }
.hero__label {
  font-weight: 500;
  font-size: var(--font-size-label);
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hero__title {
  font-weight: 500;
  font-size: var(--font-size-display);
  line-height: 1;
  letter-spacing: -0.03em;
}
.hero__sub {
  font-family: var(--font-sub);
  font-weight: 400;
  font-size: var(--font-size-subheading);
  line-height: 1.35;
}

@media (min-width: 768px) {
  .hero { align-items: flex-start; padding-left: 56px; }
  .hero::after { background: linear-gradient(180deg, rgb(var(--scrim-ink) / 0) 45%, rgb(var(--scrim-ink) / 0.7) 100%); }
  .hero__copy { align-items: flex-start; text-align: left; }
}

@media (min-width: 1080px) {
  .hero { justify-content: center; padding-left: 120px; }
  .hero::after { background: linear-gradient(90deg, rgb(var(--scrim-ink) / 0.62) 0%, rgb(var(--scrim-ink) / 0) 62%); }
}

/* Brand marquee — one row, auto-scroll ← */
.brands {
  overflow: hidden;
  background: var(--bg-canvas);
  border-top: 1px solid var(--border-default);
}
.brands__track {
  display: flex;
  width: max-content;
  animation: marquee 60s linear infinite;
  will-change: transform;
}
.brands__list { display: flex; margin: 0; padding: 0; list-style: none; }
.brands__cell {
  width: var(--cell-w);
  height: var(--cell-h);
  display: grid;
  place-items: center;
}
.brands__cell img { width: 75%; height: auto; }

/* Track holds 3 identical lists; moving by exactly one list keeps the row full at any width. */
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-100% / 3), 0, 0); }
}

/* Reveal on load — CSS only (the page ships no scripts). */
:root {
  --ease-reveal: cubic-bezier(0.77, 0, 0.18, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Image reveal: wipe up from the bottom while settling from a slight zoom. */
.hero__media {
  clip-path: inset(100% 0 0 0);
  animation: wipe-up 1.4s var(--ease-reveal) 0.1s forwards;
}
.hero__media img {
  transform: scale(1.12);
  animation: settle 2.4s var(--ease-out) 0.1s forwards;
}
.hero::after {
  opacity: 0;
  animation: fade-in 1s ease 0.9s forwards;
}

/* Text reveal: each line/word rises from behind its own mask. */
.mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.14em;      /* keep descenders (g, comma) inside the mask */
  margin-bottom: -0.14em;
}
.rise {
  display: inline-block;
  transform: translate3d(0, 110%, 0);
  animation: rise 1.1s var(--ease-out) forwards;
}
.rise.d0 { animation-delay: 0.95s; }
.rise.d1 { animation-delay: 1.05s; }
.rise.d2 { animation-delay: 1.15s; }
.rise.d3 { animation-delay: 1.3s; }

.header__logo { opacity: 0; animation: fade-in 0.8s ease 0.1s forwards; }
.brands { opacity: 0; animation: fade-in 0.9s ease 1.4s forwards; }

@keyframes wipe-up { to { clip-path: inset(0 0 0 0); } }
@keyframes settle { to { transform: scale(1); } }
@keyframes rise { to { transform: translate3d(0, 0, 0); } }
@keyframes fade-in { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .brands__track { animation: none; }
  .hero__media, .hero__media img, .hero::after, .rise, .header__logo, .brands {
    animation: none;
    clip-path: none;
    transform: none;
    opacity: 1;
  }
}

/* ── Cookie consent — Figma page "Cookie consent" (consent/banner 2:466, consent/preferences 2:525, toggle 2:440) ── */

.hero__cookies {
  position: absolute;
  z-index: 1;
  right: var(--layout-gutter);
  bottom: 20px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--text-inverse);
  font: 500 var(--font-size-label)/1.3 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.consent__label {
  margin: 0;
  color: var(--text-secondary);
  font: 500 var(--font-size-label)/1.3 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.consent__body {
  margin: 0;
  color: var(--text-secondary);
  font: 400 var(--font-size-body-s)/1.5 var(--font-body);
}
.consent__actions { display: flex; gap: 8px; }
.consent__actions .btn { flex: 1 1 0; }

/* button — style primary / secondary / link */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 28px;
  border: 1px solid transparent;
  border-radius: 0;
  font: 500 13px/1 var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.btn--primary { background: var(--action-primary-bg); color: var(--action-primary-fg); }
.btn--secondary { background: var(--bg-canvas); color: var(--text-primary); border-color: var(--border-strong); }
.btn--link { padding: 6px 0; background: none; color: var(--text-primary); }
.btn:focus-visible, .toggle:focus-visible, .hero__cookies:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.hero__cookies:focus-visible { outline-color: var(--text-inverse); }

/* consent/banner — bottom sheet below 1080, floating card at ≥1080 */
.consent-banner {
  position: fixed;
  z-index: 50;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: 20px var(--layout-gutter) calc(20px + env(safe-area-inset-bottom));
  background: var(--bg-canvas);
  color: var(--text-primary);
  border-top: 1px solid var(--border-default);
  box-shadow: var(--elevation-overlay);
  animation: sheet-in 0.5s var(--ease-out) both;
}
.consent-banner[hidden] { display: none; }
.consent-banner > .btn--link { align-self: flex-start; }
.consent-banner__title {
  margin: 0;
  font: 500 var(--font-size-h4)/1.25 var(--font-display);
  letter-spacing: -0.01em;
}
@media (min-width: 1080px) {
  .consent-banner {
    left: var(--layout-gutter);
    right: auto;
    bottom: 24px;
    width: 400px;
    gap: 16px;
    padding: 24px;
    border-top: 0;
  }
}

/* consent/preferences — native <dialog>: focus trap, Esc and backdrop for free */
.consent-dialog {
  width: 520px;
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--bg-canvas);
  color: var(--text-primary);
  box-shadow: var(--elevation-overlay);
}
.consent-dialog::backdrop { background: var(--bg-scrim); }
.consent-dialog__inner { display: flex; flex-direction: column; gap: 20px; padding: 32px; }
.consent-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.consent-dialog__head .consent__label { margin-bottom: 8px; }
.consent-dialog__title {
  margin: 0;
  font: 500 var(--font-size-h3)/1.15 var(--font-display);
  letter-spacing: -0.01em;
}
.consent-dialog__actions { padding-top: 4px; }
.consent-dialog__actions .btn { flex: 0 0 auto; }

.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--border-default);
}
.consent-row__text { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.consent-row__name {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font: 400 var(--font-size-body-m)/1.55 var(--font-body);
}

/* toggle — on / off / locked */
.toggle {
  position: relative;
  flex: none;
  width: 40px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 11px;
  background: var(--bg-canvas);
  cursor: pointer;
}
.toggle::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text-primary);
  transition: transform 0.2s var(--ease-out), background-color 0.2s;
}
.toggle[aria-checked="true"] { background: var(--action-primary-bg); }
.toggle[aria-checked="true"]::after { transform: translateX(18px); background: var(--action-primary-fg); }
.toggle[aria-disabled="true"] { border-color: transparent; background: var(--action-disabled-bg); cursor: default; }
.toggle[aria-disabled="true"]::after { background: var(--action-disabled-fg); }

@media (max-width: 1079px) {
  .consent-dialog {
    width: 100%;
    max-width: 100%;
    margin: auto 0 0;
    max-height: 90dvh;
  }
  .consent-dialog[open] { animation: sheet-in 0.4s var(--ease-out) both; }
  .consent-dialog__inner { padding: 24px var(--layout-gutter) calc(24px + env(safe-area-inset-bottom)); }
  .consent-dialog__actions .btn { flex: 1 1 0; }
}

@keyframes sheet-in { from { transform: translate3d(0, 24px, 0); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .consent-banner, .consent-dialog[open] { animation: none; }
  .toggle::after { transition: none; }
}
.consent__actions .btn { white-space: nowrap; }
@media (max-width: 767px) {
  .consent__actions .btn { padding-left: 12px; padding-right: 12px; }
}

/* Match Figma: banner + sheet padding is 20 at tablet/mobile (consent/banner & consent/preferences, mobile variant),
   not the layout gutter. Reset UA button styling so Safari/iOS renders the same as Chrome. */
.btn, .toggle, .hero__cookies { -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; }
@media (max-width: 1079px) {
  .consent-banner { padding-left: 20px; padding-right: 20px; }
  .consent-dialog__inner { padding-left: 20px; padding-right: 20px; }
}

/* Hover only where a real hover exists — on touch screens :hover sticks after a tap. */
@media (hover: hover) {
  .hero__cookies:hover { opacity: 0.7; }
  .btn--primary:hover { background: var(--action-primary-bg-hover); }
  .btn--secondary:hover { background: var(--bg-subtle); }
  .btn--link:hover { color: var(--text-secondary); }
}
/* The dialog opens with focus on its title (tabindex=-1), so no control shows a focus ring on open. */
.consent-dialog__title:focus { outline: none; }