/* =====================================================
   GPB — test build
   Typography: ABC Monument Grotesk (headings) / Helvetica Neue (body)
   Fluid sizing: Scaling System by Osmo [https://osmo.supply/]
   ===================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'ABC Monument Grotesk';
  src: url('../fonts/ABCMonumentGroteskCyrillicVariableVF-Trial.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ------------------------- Scaling System by Osmo [https://osmo.supply/] ------------------------- */

/* Desktop — Figma frame 1440 */
:root {
  --size-unit: 16;
  --size-container-ideal: 1440;
  --size-container-min: 992px;
  --size-container-max: 1920px;
  --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));

  /* Colors */
  --color-black: #000000;
  --color-body: rgba(0, 0, 0, 0.8);       /* body / eyebrow — 80% */
  --color-white: #ffffff;
  --color-body-inverse: rgba(255, 255, 255, 0.8);
  --color-bg: #ffffff;
  --color-bg-soft: #f1f1ef;
  --color-bg-dark: #050505;

  /* Type scale (px @1440 → em) */
  --text-h1: 3.75em;      /* 60px */
  --text-h2: 2.625em;     /* 42px */
  --text-h3: 1.5em;       /* 24px */
  --text-body: 1.125em;   /* 18px */
  --text-small: 1em;      /* 16px */
  --text-btn: 1em;        /* 16px */
  --text-eyebrow: 0.75em; /* 12px */

  --font-heading: 'ABC Monument Grotesk', Helvetica, Arial, sans-serif;
  --font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --container-padding: 2.5em; /* 40px */
}

/* Tablet */
@media screen and (max-width: 991px) {
  :root {
    --size-container-ideal: 834;
    --size-container-min: 768px;
    --size-container-max: 991px;
  }
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
  :root {
    --size-container-ideal: 550;
    --size-container-min: 480px;
    --size-container-max: 767px;
  }
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {
  :root {
    --size-container-ideal: 390;
    --size-container-min: 320px;
    --size-container-max: 479px;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: initial; /* Lenis handles it */
  /* wheel/tornado/gallery items intentionally overhang the viewport —
     clip here so they never create a horizontal scrollbar on phones */
  overflow-x: clip;
}

body {
  font-size: var(--size-font);
  font-family: var(--font-body);
  color: var(--color-body);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

.container {
  width: 100%;
  max-width: var(--size-container);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* ---------- Typography ---------- */
.h1 {
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.04em;
  color: var(--color-black);
}

.h2 {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.04em;
  color: var(--color-black);
}

.h3 {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: -0.02em;
  color: var(--color-black);
}

.body-text {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-body);
}

.small-text {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-body);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-body);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

.eyebrow__arrow {
  width: 0.834em; /* 10px @ 12px font */
  height: auto;
  flex-shrink: 0;
}

/* Dark theme inversion */
.theme-dark .h1,
.theme-dark .h2,
.theme-dark .h3 { color: var(--color-white); }

.theme-dark .body-text,
.theme-dark .small-text,
.theme-dark .eyebrow { color: var(--color-body-inverse); }

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--font-body);
  font-size: var(--text-btn);
  font-weight: 400;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.75em 1.25em;
  border-radius: 10em;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}

.btn--dark {
  background-color: var(--color-black);
  color: var(--color-white);
}
.btn--dark:hover { opacity: 0.85; }

.btn--light {
  background-color: var(--color-white);
  color: var(--color-black);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.btn--light:hover { background-color: rgba(0, 0, 0, 0.04); }

.btn__dot {
  width: 0.375em;
  height: 0.375em;
  border-radius: 50%;
  background-color: currentColor;
}

/* ---------- Header ----------
   Fixed + mix-blend-mode: difference. Everything inside is painted in the
   INVERSE of how it should look on a white page (difference re-inverts it),
   so on the black section the whole bar flips to light automatically. */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  mix-blend-mode: difference;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25em var(--container-padding);
}

.header__logo-svg {
  height: 1.75em;
  width: auto;
  display: block;
  /* fills are painted white in the SVG → difference reads black on white, white on black */
}

.header__actions {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5em;
}

.header .btn--dark {
  /* looks like a black pill with white text on light bg */
  background-color: #fff;
  color: #000;
}

.header .btn--light {
  /* painted #1A1A1A → difference renders border/hover-bg as #E5E5E5 on white */
  background-color: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 1px #1a1a1a;
}
.header .btn--light:hover { background-color: #1a1a1a; }

.header__clock {
  font-family: var(--font-body);
  font-size: 0.875em;
  color: rgba(255, 255, 255, 0.8);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

.header__clock-dot {
  width: 0.43em; /* ≈6px, same as the button dot */
  height: 0.43em;
  border-radius: 50%;
  /* painted #202020 → difference renders it #DFDFDF on the white page */
  background-color: #202020;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  /* em-based height so the wheel geometry scales with the Osmo scale system
     (100svh broke proportions on wide/short screens) */
  min-height: max(100svh, 58.75em);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 10em;
  z-index: 1;
}

.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5em;
}

.hero__content .h1 { max-width: 10.5em; }
.hero__sub { max-width: 24em; }

/* Radial wheel — center pinned to the hero's bottom edge */
.radial-wheel {
  --wheel-radius: 23em; /* per concept PDF: top card sits ~6em below the hero copy */
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(var(--wheel-radius) * 2);
  height: calc(var(--wheel-radius) * 2);
  transform: translate(-50%, 50%);
  pointer-events: none;
}

.radial-wheel__parallax {
  width: 100%;
  height: 100%;
  position: relative;
}

.radial-wheel__inner {
  width: 100%;
  height: 100%;
  position: relative;
  will-change: transform;
}

/* 10 cards × 36° — chord ≈ 14.2em vs card ≈ 12.9em diagonal support → cards never touch */
.radial-wheel__item {
  --angle: 0deg;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9.5em; /* 152px */
  aspect-ratio: 160 / 211;
  margin: -6.26em 0 0 -4.75em; /* center the card on the wheel center */
  transform: rotate(var(--angle)) translateY(calc(var(--wheel-radius) * -1));
}

.radial-wheel__item:nth-child(1)  { --angle: 0deg; }
.radial-wheel__item:nth-child(2)  { --angle: 36deg; }
.radial-wheel__item:nth-child(3)  { --angle: 72deg; }
.radial-wheel__item:nth-child(4)  { --angle: 108deg; }
.radial-wheel__item:nth-child(5)  { --angle: 144deg; }
.radial-wheel__item:nth-child(6)  { --angle: 180deg; }
.radial-wheel__item:nth-child(7)  { --angle: 216deg; }
.radial-wheel__item:nth-child(8)  { --angle: 252deg; }
.radial-wheel__item:nth-child(9)  { --angle: 288deg; }
.radial-wheel__item:nth-child(10) { --angle: 324deg; }

.radial-wheel__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.375em;
}

/* ---------- Section 2 — Focus (glass) ---------- */
.section-focus {
  position: relative;
  z-index: 2;
  background-color: var(--color-bg-soft);
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 7.5em 0;
}

.section-focus__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.section-focus__content .eyebrow { margin-bottom: 1.5em; }
.section-focus__content .h2 { max-width: 11em; }
.section-focus__sub { max-width: 34em; margin-top: 1.35em; }

.fact-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25em;
  margin-top: 4.5em;
  width: 100%;
  max-width: 52em;
}

.fact-card {
  background-color: var(--color-white);
  border: 1px solid rgb(207, 207, 207);
  border-radius: 0.8em;
  padding: 1.75em 1.5em;
  min-height: 15.5em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  text-align: left;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.fact-card__icon { margin-bottom: 2.5em; }
.fact-card__icon svg { width: 3.25em; height: 3.25em; }

.fact-card__body { display: flex; flex-direction: column; gap: 0.65em; }

/* ----- Liquid glass canvas (three.js) — full-section background ----- */
.glass-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 1;
}

/* ---------- Section 3 — Dark / 3D Cards Tornado ---------- */
.section-brands {
  position: relative;
  z-index: 2;
  background-color: var(--color-bg-dark);
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: clip;
}

.section-brands__layout {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.section-brands__text {
  max-width: 27em;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.section-brands__text .eyebrow { margin-bottom: 1.5em; }
.section-brands__text .body-text { margin-top: 1.35em; max-width: 20em; }

/* ----- Osmo 3D Cards Tornado (verbatim; placement adapted to right column) ----- */
.cards-tornado {
  cursor: grab;
  touch-action: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 55%;
  height: 100%;
  overflow: clip;
}

.cards-tornado__collection {
  width: 100%;
  height: 100%;
  position: relative;
}

.cards-tornado__list {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  perspective: 75em;
  font-size: clamp(.5em, .75vw, 1.5em);
  position: relative;
}

.cards-tornado__item {
  transform-style: preserve-3d;
  backface-visibility: visible;
  will-change: transform, filter;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.tornado-card {
  aspect-ratio: 4 / 5;
  pointer-events: none;
  user-select: none;
  background-color: #222;
  border-radius: 1em;
  width: 18em;
  position: relative;
}

.tornado-card__img {
  object-fit: cover;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* ---------- Section 2b — Own brands (full-bleed image, text overlaid on top) ----------
   The image has empty beige headroom at the top, made on purpose for the copy. */
.section-own {
  position: relative;
  z-index: 2;
  aspect-ratio: 1440 / 1511; /* mask height = image height at design width (new wider-margin image) */
  overflow: hidden;
}

/* parallax target — 120% tall (10% overflow each side) so a ±7% drift never
   exposes a blind zone; cover keeps the enlarged image edge-to-edge */
.section-own__media {
  position: absolute;
  left: 0;
  top: -10%;
  width: 100%;
  height: 120%;
  will-change: transform;
}

.section-own__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.section-own__overlay {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  padding-top: 14em;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.section-own__overlay .eyebrow { margin-bottom: 1.5em; }
.section-own__overlay .h2 { max-width: 22em; }
.section-own__sub { max-width: 28em; margin-top: 1.35em; }

/* ---------- Brand logos (dark Brands section) ----------
   SVGs are black artwork → invert to white so they read on the dark background. */
.brand-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2.5em;
  margin-top: 3em;
}

.brand-logos__item {
  width: auto;
  height: 1.75em;           /* wide wordmarks (Laóka/Sowell/Deonica) */
  object-fit: contain;
  flex: 0 0 auto;
  filter: invert(1);
  opacity: 0.85;
}

/* QUAD is an emblem-over-wordmark lockup → taller, to read at the same optical size */
.brand-logos__item[alt="QUAD"] { height: 3.25em; }

/* ---------- Section 4 — Process ---------- */
.section-process {
  position: relative;
  z-index: 2;
  background-color: var(--color-bg);
  padding: 12em 0;
}

.section-process__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.section-process__content .eyebrow { margin-bottom: 1.5em; }
.section-process__content .h2 { max-width: 12em; }

.section-process__sub { max-width: 26em; margin-top: 1.35em; }

/* ---------- Section 7 — Our Values ----------
   Soft bg to separate from the white section above and the dark Contact below. */
.section-values {
  position: relative;
  z-index: 2;
  background-color: var(--color-bg-soft);
  padding: 12em 0;
}

.section-values__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.section-values__content .eyebrow { margin-bottom: 2em; }
.section-values__statement { line-height: 1.0; }

/* ---------- Section 8 — Contact (Osmo Footer Parallax / unmask) ----------
   Section = mask (overflow hidden). Inner slides up from yPercent -25 → 0 as it
   scrolls in (revealed from under the mask), dark layer fades 0.5 → 0 over it. */
.section-contact {
  position: relative;
  z-index: 2;
  overflow: hidden;
  background-color: var(--color-bg-dark);
}

.section-contact__inner {
  position: relative;
  padding: 12em 0;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}

.section-contact__dark {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  background-color: #050505;
}

.section-contact__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.section-contact__content .eyebrow { margin-bottom: 1.5em; }
.section-contact__content .h2 { max-width: 14em; }

.section-contact__email {
  margin-top: 2em;
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  letter-spacing: -0.02em;
  color: var(--color-white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 0.15em;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
.section-contact__email:hover {
  opacity: 0.75;
  border-color: rgba(255, 255, 255, 0.7);
}

/* ---------- Section 5 — Rotating gallery (Codrops Variation 1, adapted) ----------
   Demo values kept verbatim where possible; rem@11px converted to em@16:
   item 600px → 37.5em, stack overlap -5rem → -3.4375em, marquee gap 3rem → 2.0625em,
   marquee font clamp(2rem,16vw,8rem) → clamp(1.375em,16vw,5.5em). */
.section-rotate {
  position: relative;
  z-index: 2;
  background-color: #141414;
  overflow: clip;
}

/* demo's body::after vignette, scoped: sticky so it hugs the viewport through the section */
.section-rotate__vignette {
  position: sticky;
  top: 0;
  /* lvh, not svh: with the mobile address bar hidden the viewport is taller than
     svh and the bottom strip would stay undimmed. lvh always covers it, and
     unlike dvh it's static, so it can't reintroduce scroll jitter. */
  height: 100vh;            /* fallback for browsers without lvh */
  height: 100lvh;
  margin-bottom: -100vh;
  margin-bottom: -100lvh;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(rgba(0, 0, 0, 0.2) 10%, rgba(0, 0, 0, 0.8) 80%);
  background-repeat: no-repeat;
  background-size: 100%;
}

.rotate-gallery {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* svh, not vh: vh changes when the mobile address bar shows/hides → layout jump */
  padding-top: 25svh;
  padding-bottom: 35svh;
}

.rotate-gallery__item-wrap {
  width: 100%;
  max-width: 37.5em; /* 600px */
  perspective: 900px;
  margin-bottom: -3.4375em; /* -5rem @ 11px root */
}

.rotate-gallery__item {
  width: 100%;
  aspect-ratio: 14 / 9;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform-style: preserve-3d;
  will-change: transform, filter;
  border-radius: 0;
}

.rotate-mark {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 100vw;
  left: 0;
  z-index: 5;
  overflow: hidden;
  mix-blend-mode: plus-lighter; /* demo-1 */
  pointer-events: none;
}

.rotate-mark__inner {
  display: flex;
  gap: 2.0625em; /* 3rem @ 11px root */
  width: max-content;
  position: relative;
  will-change: transform;
  transform: translateX(100vw); /* parked off-screen until the scrub kicks in */
}

.rotate-mark__inner span {
  white-space: nowrap;
  text-transform: uppercase;
  color: #ffffff; /* was demo-1 khaki rgb(190,175,110) — testing white */
  font-size: clamp(1.375em, 16vw, 5.5em);
  line-height: 1;
  font-family: var(--font-heading);
  font-weight: 772; /* demo font-variation "wght" 772 */
}

/* ---------- Reveal helpers ---------- */
[data-reveal] { visibility: hidden; }
[data-reveal].is-split { visibility: visible; }

/* SplitText mask: at line-height 0.96 the mask's clip edge cuts descenders
   (y, g, p). `overflow: clip` clips at the padding box, so padding-bottom
   enlarges the visible area; the negative margin keeps line spacing intact. */
[data-reveal] .line-mask {
  padding-bottom: 0.2em;
  margin-bottom: -0.2em;
}

[data-fade] { opacity: 0; }

/* ---------- Responsive ---------- */
@media screen and (max-width: 767px) {
  :root {
    --container-padding: 1.25em;
    /* tighter type scale so headings don't eat the whole screen */
    --text-h1: 2.5em;      /* ~38px */
    --text-h2: 1.875em;    /* ~29px */
    --text-h3: 1.25em;     /* ~19px */
    --text-body: 1em;      /* ~15px */
  }

  /* Header: logo + 3 compact shortcuts on one row */
  .header { padding: 1em var(--container-padding); }
  .header__actions {
    position: static;
    transform: none;
    gap: 0.375em;
  }
  .header__clock { display: none; }
  .header__logo-svg { height: 1.375em; }
  .header .btn {
    font-size: 0.75em;
    padding: 0.6em 0.85em;
    white-space: nowrap;
  }
  .header .btn__dot { width: 0.3em; height: 0.3em; }

  /* Hero: smaller wheel so it doesn't blow past the screen */
  .hero { padding-top: 7.5em; min-height: max(100svh, 46em); }
  .hero__content .h1 { max-width: 100%; }
  .hero__sub { max-width: 100%; }
  .radial-wheel { --wheel-radius: 14em; }
  .radial-wheel__item {
    width: 6.25em;
    margin: -4.12em 0 0 -3.125em;
  }

  /* Focus: WebGL glass is skipped on mobile (see initGlassSection) */
  .section-focus { padding: 6em 0; }
  .glass-canvas { display: none; }
  .section-focus__content .h2,
  .section-focus__sub { max-width: 100%; }
  .fact-cards { grid-template-columns: 1fr; max-width: 26em; margin-top: 3em; }
  .fact-card { min-height: 0; padding: 1.5em 1.25em; }
  .fact-card__icon { margin-bottom: 1.5em; }

  /* Own brands: stack vertically — copy first, image below it (parallax is
     disabled here on mobile, so the media can sit in normal flow) */
  .section-own {
    aspect-ratio: auto;
    background-color: #baa38c;   /* sampled from the photo's top edge — hides the seam */
    display: flex;
    flex-direction: column;
  }
  .section-own__media {
    position: relative;
    inset: auto;
    top: auto;
    left: auto;
    width: 100%;
    height: 26em;            /* crops the photo's empty top margin */
    order: 2;
  }
  .section-own__img {
    height: 100%;
    object-fit: cover;
    object-position: center 62%;   /* frames the ceramic, drops the empty headroom */
  }
  .section-own__overlay {
    position: relative;
    left: auto;
    transform: none;
    order: 1;
    padding-top: 5em;
    padding-bottom: 1em;
  }
  .section-own__overlay .h2,
  .section-own__sub { max-width: 100%; }

  /* Brands: text block first, tornado below, logos wrap */
  /* Stack instead of overlaying: tornado on top, copy block below it on its own
     black area — otherwise the heading half-sits on the tornado. */
  .section-brands {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding-bottom: 4em;
  }
  .cards-tornado {
    position: relative;
    top: auto;
    right: auto;
    order: 1;
    width: 100%;
    height: 26em;
    /* touch-action:none (from the snippet) swallows the swipe on phones, so the
       page can't be scrolled from the tornado area — allow vertical panning */
    touch-action: pan-y;
  }
  .section-brands__layout {
    order: 2;
    padding-top: 3em;   /* breathing room between the tornado and the copy */
  }
  .section-brands__text { max-width: 100%; }
  .section-brands__text .body-text { max-width: 100%; }
  .brand-logos { gap: 1.5em 2em; margin-top: 2em; }

  /* Own/process/values/contact: lighter vertical rhythm */
  .section-process { padding: 6em 0; }
  .section-process__content .h2,
  .section-process__sub { max-width: 100%; }
  .section-values { padding: 6em 0; }
  .section-contact__inner { padding: 6em 0; }
  .section-contact__content .h2 { max-width: 100%; }

  /* Rotating gallery: shorter stack, smaller marquee */
  .rotate-gallery { padding-top: 15svh; padding-bottom: 20svh; }
  .rotate-gallery__item-wrap { margin-bottom: -1.5em; }
}

@media screen and (max-width: 479px) {
  .header .btn { font-size: 0.6875em; padding: 0.55em 0.7em; }
  .radial-wheel { --wheel-radius: 12em; }
  .section-own__media { height: 22em; }
}