/* 12 Days of GLAM — Wink Beauty landing.
 * Mobile-first from the 390 px design; from 1024 px the 1440 px desktop design,
 * scaled with --u (1 design px, shrinking below a 1440 px viewport). */

/* Brand fonts, served by the shop (same files and licence as winkbeauty.pl). */
@font-face { font-family: Domaine; font-style: normal; font-weight: 400; font-display: swap; src: url("https://assets.winkbeauty.pl/2025/02/domaine-display-regular.woff2") format("woff2"); }
@font-face { font-family: Domaine; font-style: italic; font-weight: 400; font-display: swap; src: url("https://assets.winkbeauty.pl/2025/02/domaine-display-regular-italic.woff2") format("woff2"); }
@font-face { font-family: Recht; font-style: normal; font-weight: 400; font-display: swap; src: url("https://assets.winkbeauty.pl/2025/02/Recht-Regular.woff2") format("woff2"), url("https://assets.winkbeauty.pl/2025/02/Recht-Regular.woff") format("woff"); }
@font-face { font-family: Recht; font-style: normal; font-weight: 600 800; font-display: swap; src: url("https://assets.winkbeauty.pl/2025/02/Recht-ExtraBold.woff2") format("woff2"), url("https://assets.winkbeauty.pl/2025/02/Recht-ExtraBold.woff") format("woff"); }

:root {
  --navy: #0B3F7E;
  --blue: #0E6CC4;
  --ink: #0B0B0B;
  --slate: #3E5068;
  --cream: #F8F6F3;
  --line: #D5E3F4;
  --wine: #4A0812;
  --seal: #8E2034;
  --blush: #F6E7EA;
  --serif: Domaine, "Domaine Display", Georgia, "Times New Roman", serif;
  --sans: Recht, "Helvetica Neue", system-ui, sans-serif;
  --mobile-max: 600px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; background: var(--cream); color: var(--navy); font: 400 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, p, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.hero a:focus-visible, .gift a:focus-visible { outline-color: #fff; }

/* ---------- motion (from the design) ---------- */
@keyframes foil { from { background-position: 0% 50%; } to { background-position: 220% 50%; } }
@keyframes rise { from { transform: translateY(110%); } to { transform: translateY(0); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes kb { from { transform: scale(1.02); } to { transform: scale(1.1); } }
@keyframes twinkle { 0%, 100% { opacity: .15; transform: scale(.6) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
@keyframes shine { from { transform: translateX(-140%) skewX(-18deg); } to { transform: translateX(260%) skewX(-18deg); } }
@keyframes reveal { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }

.foil {
  background: linear-gradient(100deg, #9DA3AC 0%, #F3F4F6 18%, #B7BCC3 34%, #FFFFFF 50%, #A6ACB4 66%, #ECEEF1 82%, #9DA3AC 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: foil 7s linear infinite;
}
.rise { display: inline-block; animation: rise 1.2s cubic-bezier(.2, .8, .2, 1) .1s both; }
.rise--2 { animation-delay: .28s; }
.fade { animation: fadeUp 1.1s cubic-bezier(.2, .8, .2, 1) var(--d, 0s) both; }
.kb { animation: kb 22s ease-in-out infinite alternate; }
.twinkle { animation: twinkle 3.2s ease-in-out infinite; }
@supports (animation-timeline: view()) {
  .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
}

/* ---------- shared ---------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  border-radius: 28px;
  background: #fff;
  color: var(--wine);
  font-size: 16px;
  font-weight: 600;
  transition: transform .25s, box-shadow .25s;
}
.btn:hover { transform: translateY(-2px); text-decoration: none; box-shadow: 0 14px 26px -14px rgba(11, 11, 11, .5); }
.eyebrow { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--slate); }
.eyebrow--light { color: var(--blush); }
.h2 { font-family: var(--serif); font-weight: 400; color: var(--ink); }
.h2 i, .gift__title i { font-weight: 400; }
.accent { color: var(--blue); }
.star { position: absolute; fill: #fff; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-bottom: 40px;
  background: linear-gradient(180deg, #8E2034 0%, #3A0008 20%, #A22C40 42%, #8A1F33 72%, #5A0716 100%);
  color: #fff;
}
.hero__media { position: relative; height: calc(495 / 390 * min(100vw, var(--mobile-max))); overflow: hidden; }
.hero__media img {
  width: 100%;
  height: 93.5%;
  object-fit: cover;
  object-position: 50% 94.7%;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
}
.star--1 { left: 23.6%; top: 9.7%; width: 18px; height: 18px; }
.star--2 { left: 85.4%; top: 19.2%; width: 14px; height: 14px; fill: #E9ECF0; animation-delay: -1.2s; }
.star--3 { left: 20.3%; top: 80.6%; width: 11px; height: 11px; fill: #E9ECF0; animation-delay: -1.2s; }
@media (min-width: 600px) and (max-width: 1023px) { .hero__media { width: var(--mobile-max); margin-inline: auto; } }

.hero__copy {
  position: relative;
  max-width: var(--mobile-max);
  margin: -40px auto 0;
  padding: 0 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.hero__title { font-family: var(--serif); font-weight: 400; font-size: 76px; line-height: .92; letter-spacing: -1.5px; }
.hero__line { display: block; overflow: hidden; padding-bottom: 12px; }
.hero__line:first-child { padding-bottom: 24px; margin-bottom: -16px; }
.foil--days { display: inline-block; padding-bottom: 16px; margin-bottom: -16px; }
.hero__of { font-size: 52px; }
.hero__sub { margin-top: 8px; font-family: var(--serif); font-style: italic; font-size: 22px; }
.hero__lead { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--blush); }

.price { margin-top: 22px; display: flex; align-items: center; gap: 29px; }
.price__main { display: flex; flex-direction: column; gap: 6px; }
.price__label { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; }
.price__value { font-family: var(--serif); font-size: 44px; line-height: 1; }
.price__badge { width: 62px; height: 62px; flex-shrink: 0; padding: 3px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .55); transform: rotate(6deg); }
.price__badge > div { width: 100%; height: 100%; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .45); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; }
.price__badge-label { font-size: 5px; letter-spacing: 1.2px; text-transform: uppercase; line-height: 1.25; color: var(--blush); }
.price__badge-value { font-family: var(--serif); font-size: 15px; line-height: 1; }

.hero__cta { margin-top: 26px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.hero__link { font-size: 15px; text-decoration: underline; text-underline-offset: 5px; }

/* ---------- inside (annotated open box) ---------- */
.inside,
.contents,
.gallery,
.faq { padding-inline: max(20px, (100% - var(--mobile-max)) / 2); }

.inside { padding-block: 56px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.inside__head { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.inside__title { font-size: 42px; line-height: 1; letter-spacing: -1px; }

.inside__fig { position: relative; width: 100%; aspect-ratio: 350 / 343; container-type: inline-size; }
.inside__img {
  position: absolute;
  left: 0;
  top: 15.16%;
  width: 100%;
  height: 67.93%;
  object-fit: contain;
  filter: drop-shadow(0 12px 12px rgba(11, 63, 126, .22)) drop-shadow(0 3px 4px rgba(11, 63, 126, .12));
}
.seal {
  position: absolute;
  left: 6.29%;
  top: 12.24%;
  /* explicit width = height: WebKit sizes aspect-ratio without the padding and draws an oval */
  width: 22.86cqw;
  height: 22.86cqw;
  padding: 1.43cqw;
  border-radius: 50%;
  background: var(--seal);
  box-shadow: 0 12px 24px -10px rgba(74, 8, 18, .55);
  transform: rotate(-12deg);
  color: #fff;
}
.seal > div { position: relative; width: 100%; height: 100%; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .55); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .86cqw; text-align: center; }
.seal__big { font-family: var(--serif); font-style: italic; font-size: 4.57cqw; line-height: 1; padding-right: .08em; }
.seal__small { font-size: 2cqw; letter-spacing: .43cqw; text-transform: uppercase; line-height: 1; margin-right: -.43cqw; }
.seal__star { position: absolute; left: 50%; width: 1.71cqw; height: 1.71cqw; margin-left: -.86cqw; fill: #fff; }
.seal__star--top { top: 2.29cqw; }
.seal__star--bottom { bottom: 2.29cqw; }

.note { position: absolute; font-size: 3.71cqw; line-height: 1.4; color: var(--navy); text-align: center; }
.note--news { left: 33.71%; top: 8.16%; width: 53.71%; }
.note--models { left: 3.71%; top: 81.34%; width: 46%; }
.note--models br { display: none; }
.note--best { left: 56.57%; top: 83.67%; width: 42.86%; }

.arrow { position: absolute; fill: none; stroke: var(--navy); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.arrow--d1, .arrow--d2, .arrow--d3 { display: none; }
.arrow--m1 { left: 40.29%; top: 14.29%; width: 10.86%; height: 17.78%; transform: rotate(26deg); }
.arrow--m2 { left: 22.57%; top: 65.31%; width: 13.14%; height: 14.58%; transform: rotate(-33deg); }
.arrow--m3 { left: 75.14%; top: 67.06%; width: 12%; height: 14.87%; transform: rotate(22deg); }

/* ---------- contents ---------- */
.contents { padding-block: 40px; background: #fff; display: flex; flex-direction: column; }
.contents__body { display: contents; }
.contents__head { order: 1; display: flex; flex-direction: column; gap: 8px; }
.contents__photo { order: 2; margin-top: 24px; height: 280px; overflow: hidden; border-radius: 22px; }
.contents__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 35% center; }
.tiles { order: 3; }
.surprise { order: 4; }
.contents__title { font-size: 40px; line-height: 1.05; letter-spacing: -.8px; }

.tiles { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tile {
  --stripe: 22px;
  position: relative;
  overflow: hidden;
  height: 88px;
  padding: 0 13px 0 12px;
  border-radius: 22px;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
}
.tile--a { background: linear-gradient(120deg, #DCEAFB, #F6FAFE); }
.tile--b { background: repeating-linear-gradient(90deg, #E3EEFB 0 var(--stripe), #EEF5FD var(--stripe) calc(2 * var(--stripe))); }
.tile--c { background: #DCEAFB; }
.tile--d { background: linear-gradient(120deg, #F6FAFE, #DCEAFB); }
.tile--stack { flex-direction: column; justify-content: center; gap: 6px; padding: 0 10px; text-align: center; }
.tile--center { justify-content: center; }
.tile b { font-family: var(--serif); font-weight: 400; color: var(--blue); line-height: 1; }
.tile__num { font-size: 44px; }
.tile__rule { display: none; width: 1px; height: 64px; background: var(--navy); opacity: .4; }
.tile__txt { font-size: 12px; line-height: 1.35; }
.tile__txt br { display: none; }
.tile__name { font-size: 20px; }
.tile__hr { width: 90px; height: 1px; background: var(--blue); opacity: .4; }
.tile__small { font-size: 12px; }
.tile__word { font-size: 24px; }
.sh { position: absolute; top: 0; bottom: 0; left: 0; width: 35%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .75), rgba(255, 255, 255, 0)); transform: translateX(-140%) skewX(-18deg); pointer-events: none; }
.tile:hover .sh { animation: shine 1.1s ease; }

.surprise { margin-top: 28px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; text-align: center; }
.surprise__line { height: 1px; background: var(--blue); }
.surprise__star { width: 18px; height: 18px; fill: var(--blue); }
.surprise p { grid-column: 1 / -1; font-size: 15px; color: var(--ink); }

/* ---------- gallery ---------- */
.gallery { padding-block: 40px; }
.gallery__title { font-size: 36px; line-height: 1.05; letter-spacing: -.6px; }
.gallery__grid { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 170px 170px 200px; gap: 10px; }
.gallery__item { position: relative; overflow: hidden; border-radius: 18px; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.gallery__item:hover img { transform: scale(1.04); }
.gallery__item--tall { grid-column: 1; grid-row: 1 / span 2; }
.gallery__item--tall img { object-position: 47% 50%; }
.gallery__item--tall figcaption { position: absolute; inset: 0 0 auto; padding: 16px 16px 0; font-family: var(--serif); font-size: 16px; line-height: 1.15; color: var(--ink); }
.gallery__item--wide { grid-column: 2; grid-row: 1; }
.gallery__item--wide img { object-position: 40% 40%; }
.gallery__item--a { grid-column: 2; grid-row: 2; }
.gallery__item--a img { object-position: 30% center; }
.gallery__item--b { grid-column: 1 / span 2; grid-row: 3; }
.gallery__item--b img { object-position: 50% 21.3%; }

/* ---------- gift ---------- */
.gift { background: var(--wine); color: #fff; display: flex; flex-direction: column; }
.gift__media { height: calc(309 / 390 * min(100vw, var(--mobile-max))); overflow: hidden; }
@media (min-width: 600px) and (max-width: 1023px) { .gift__media { width: var(--mobile-max); margin-inline: auto; } }
.gift__media img {
  width: 100%;
  height: 94%;
  object-fit: cover;
  object-position: 54% 8%;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
}
.gift__copy { width: 100%; max-width: var(--mobile-max); margin-inline: auto; padding: 8px 22px 40px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.gift__title { font-family: var(--serif); font-weight: 400; font-size: 52px; line-height: 1; letter-spacing: -1px; }
.gift__title i { display: block; }
.gift__text { font-size: 16px; line-height: 1.65; color: var(--blush); }
.gift .btn { margin-top: 6px; }

/* ---------- faq ---------- */
.faq { padding-block: 56px; }
.faq__title { font-size: 32px; }
.faq__list { margin-top: 22px; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq h3 { font: inherit; }
.faq button {
  width: 100%;
  min-height: 66px;
  padding: 10px 0;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  text-align: left;
  font-family: var(--serif);
  font-size: 19px;
  color: var(--ink);
  cursor: pointer;
}
.faq__icon {
  display: flex;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: #E6EEF8;
  color: var(--blue);
  transition: transform .4s, background .3s, color .3s;
}
.faq__icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.faq button[aria-expanded="true"] .faq__icon { background: var(--blue); color: #fff; transform: rotate(45deg); }
.faq__a { padding: 0 0 20px; font-size: 15px; line-height: 1.6; color: var(--slate); animation: fadeUp .5s cubic-bezier(.2, .8, .2, 1) both; }


/* ======================================================================
   Desktop — the 1440 px design
   ====================================================================== */
@media (min-width: 1024px) {
  :root { --u: min(1px, 100vw / 1440); }

  /* hero: text column + full-bleed photo */
  .hero {
    display: grid;
    grid-template-columns: 1fr calc(736 * var(--u)) minmax(0, calc(704 * var(--u))) 1fr;
    padding-bottom: 0;
    background: linear-gradient(180deg, #8E2034 0%, #5A0716 22%, #3A0008 45%, #6E0C1D 56%, #9A2438 72%, #A52C40 100%);
  }
  .hero__copy {
    grid-column: 2;
    grid-row: 1;
    z-index: 2;
    max-width: none;
    margin: 0;
    padding: calc(96 * var(--u)) calc(40 * var(--u)) calc(96 * var(--u)) calc(88 * var(--u));
    justify-content: center;
    gap: 0;
  }
  .hero__media { grid-column: 3 / -1; grid-row: 1; height: auto; width: auto; margin: 0; }
  .hero__media img {
    position: absolute;
    inset: 0;
    height: 100%;
    object-position: 30% center;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 calc(140 * var(--u)));
    mask-image: linear-gradient(90deg, transparent 0, #000 calc(140 * var(--u)));
  }
  .star--1 { left: calc(180 * var(--u)); top: calc(99 * var(--u)); width: calc(30 * var(--u)); height: calc(30 * var(--u)); fill: #fff; }
  .star--2 { left: calc(559 * var(--u)); top: calc(172 * var(--u)); width: calc(18 * var(--u)); height: calc(18 * var(--u)); animation-delay: -1.1s; }
  .star--3 { left: calc(18 * var(--u)); top: calc(756 * var(--u)); width: calc(22 * var(--u)); height: calc(22 * var(--u)); fill: #fff; animation-delay: -2.2s; }

  .hero__title { margin-top: calc(22 * var(--u)); font-size: calc(136 * var(--u)); letter-spacing: calc(-3 * var(--u)); }
  .hero__line { padding-bottom: calc(14 * var(--u)); }
  .hero__line:first-child { padding-bottom: calc(42 * var(--u)); margin-bottom: calc(-32 * var(--u)); }
  .foil--days { padding-bottom: calc(32 * var(--u)); margin-bottom: calc(-32 * var(--u)); }
  .hero__of { font-size: calc(96 * var(--u)); }
  .hero__sub { margin-top: calc(14 * var(--u)); font-size: calc(32 * var(--u)); }
  .hero__lead { margin-top: calc(16 * var(--u)); max-width: calc(500 * var(--u)); font-size: max(15px, calc(18 * var(--u))); }

  .price { margin-top: calc(30 * var(--u)); gap: calc(32 * var(--u)); }
  .price__main { gap: calc(8 * var(--u)); }
  .price__label { font-size: max(11px, calc(12 * var(--u))); }
  .price__value { font-size: calc(56 * var(--u)); }
  .price__badge { width: calc(85 * var(--u)); height: calc(85 * var(--u)); padding: calc(4 * var(--u)); transform: rotate(7deg); }
  .price__badge > div { gap: calc(4 * var(--u)); }
  .price__badge-label { font-size: calc(7.5 * var(--u)); }
  .price__badge-value { font-size: calc(20 * var(--u)); }

  .hero__cta { margin-top: calc(36 * var(--u)); width: auto; flex-direction: row; gap: calc(26 * var(--u)); }
  .hero .btn { width: auto; height: 58px; padding: 0 30px; border-radius: 29px; }
  .hero__link { font-size: 16px; text-underline-offset: 6px; }

  /* shared desktop gutters: 88 design px, content centred above 1440 px */
  .contents,
  .gallery { padding-inline: calc(max(0px, (100% - 1440px) / 2) + 88 * var(--u)); }
  .eyebrow { font-size: 13px; }

  /* inside */
  .inside { padding: calc(80 * var(--u)) 0 calc(64 * var(--u)); gap: 0; }
  .inside__head { gap: 12px; }
  .inside__head .eyebrow { color: var(--navy); }
  .inside__title { font-size: calc(66 * var(--u)); letter-spacing: calc(-1.5 * var(--u)); }
  .inside__fig { margin-top: calc(16 * var(--u)); width: calc(1100 * var(--u)); aspect-ratio: 1100 / 733; }
  .inside__img { top: 0; height: 100%; filter: drop-shadow(0 30px 28px rgba(11, 63, 126, .22)) drop-shadow(0 8px 8px rgba(11, 63, 126, .12)); }
  .seal { left: 16.36%; top: 5.73%; width: 12cqw; height: 12cqw; padding: .64cqw; }
  .seal > div { gap: .55cqw; }
  .seal__big { font-size: 2.36cqw; }
  .seal__small { font-size: 1cqw; letter-spacing: .14cqw; margin-right: -.14cqw; }
  .seal__star { width: .91cqw; height: .91cqw; margin-left: -.45cqw; }
  .seal__star--top { top: 1.27cqw; }
  .seal__star--bottom { bottom: 1.09cqw; }
  .note { font-size: 1.64cqw; }
  .note--news { left: 63%; top: 3.27%; width: 23.18%; }
  .note--models { left: 15.45%; top: 89.22%; width: 22.73%; }
  .note--models br { display: inline; }
  .note--best { left: 72.27%; top: 89.63%; width: 24.64%; }
  .arrow { stroke-width: 1.5; }
  .arrow--m1, .arrow--m2, .arrow--m3 { display: none; }
  .arrow--d1, .arrow--d2, .arrow--d3 { display: block; }
  .arrow--d1 { left: 52.55%; top: 8.59%; width: 10%; height: 14.73%; transform: rotate(90deg) scaleX(-1); }
  .arrow--d2 { left: 25.91%; top: 76.81%; width: 7.27%; height: 11.05%; transform: rotate(-10deg); }
  .arrow--d3 { left: 78.91%; top: 76.4%; width: 6.18%; height: 12.28%; }

  /* contents */
  .contents {
    padding-block: calc(80 * var(--u)) calc(64 * var(--u));
    display: grid;
    grid-template-columns: calc(540 * var(--u)) minmax(0, 1fr);
    gap: calc(80 * var(--u));
  }
  .contents__body { display: flex; flex-direction: column; justify-content: center; }
  .contents__photo { order: 0; margin-top: 0; height: calc(700 * var(--u)); border-radius: 28px; }
  .contents__photo img { object-position: 30% center; }
  .contents__head { gap: 10px; }
  .contents__head .eyebrow { color: var(--navy); }
  .contents__title { font-size: calc(58 * var(--u)); line-height: 1.04; letter-spacing: calc(-1 * var(--u)); }

  .tiles { margin-top: calc(40 * var(--u)); gap: calc(18 * var(--u)); }
  .tile { --stripe: 30px; height: calc(132 * var(--u)); padding: 0 calc(24 * var(--u)); border-radius: 28px; gap: calc(20 * var(--u)); }
  .tile--stack { gap: calc(8 * var(--u)); }
  .tile__num { font-size: calc(84 * var(--u)); }
  .tile__rule { display: block; height: calc(64 * var(--u)); }
  .tile__txt { font-size: max(13px, calc(16 * var(--u))); line-height: 1.4; }
  .tile__txt br { display: inline; }
  .tile__name { font-size: calc(32 * var(--u)); }
  .tile__hr { width: calc(150 * var(--u)); background: var(--navy); }
  .tile__small { font-size: max(12px, calc(14 * var(--u))); }
  .tile__word { font-size: calc(34 * var(--u)); }

  .surprise { margin-top: calc(34 * var(--u)); display: flex; gap: 16px; text-align: left; }
  .surprise__line { width: calc(120 * var(--u)); flex-shrink: 0; }
  .surprise__star { width: 20px; height: 20px; flex-shrink: 0; }
  .surprise p { margin-left: 12px; font-size: 16px; }

  /* gallery */
  .gallery { padding-block: calc(80 * var(--u)); }
  .gallery__title { font-size: calc(52 * var(--u)); line-height: 1.2; letter-spacing: calc(-1 * var(--u)); }
  .gallery__grid { margin-top: calc(36 * var(--u)); grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, calc(320 * var(--u))); gap: 16px; }
  .gallery__item { border-radius: 24px; }
  .gallery__item--tall img { object-position: 16.41% 50%; }
  .gallery__item--tall figcaption { top: calc(24 * var(--u)); padding: 0 calc(24 * var(--u)); font-size: calc(36 * var(--u)); }
  .gallery__item--wide { grid-column: 2 / span 2; }
  .gallery__item--wide img { object-position: center 40%; }
  .gallery__item--a img { object-position: 60.16% 50%; }
  .gallery__item--b { grid-column: 3; grid-row: 2; }
  .gallery__item--b img { object-position: 50.47% 50%; }

  /* gift: full-bleed photo + text column */
  .gift {
    display: grid;
    grid-template-columns: 1fr calc(820 * var(--u)) minmax(0, calc(620 * var(--u))) 1fr;
    height: calc(680 * var(--u));
  }
  .gift__media { grid-column: 1 / 3; grid-row: 1; height: auto; width: auto; margin: 0; }
  .gift__media img {
    height: 100%;
    object-position: 78% 37%;
    -webkit-mask-image: linear-gradient(270deg, transparent 0, #000 calc(160 * var(--u)));
    mask-image: linear-gradient(270deg, transparent 0, #000 calc(160 * var(--u)));
  }
  .gift__copy { grid-column: 3; grid-row: 1; max-width: none; margin: 0; padding: 0 calc(72 * var(--u)) 0 calc(56 * var(--u)); justify-content: center; }
  .gift__title { font-size: calc(76 * var(--u)); letter-spacing: calc(-1.5 * var(--u)); }
  .gift__text { font-size: max(15px, calc(18 * var(--u))); }
  .gift .btn { width: auto; margin-top: 8px; padding: 0 28px; }
  .gift .eyebrow { font-size: 13px; }

  /* faq */
  .faq { padding: calc(80 * var(--u)) 0; display: flex; flex-direction: column; align-items: center; }
  .faq__title, .faq__list { width: calc(860 * var(--u)); }
  .faq__title { font-size: calc(44 * var(--u)); }
  .faq__list { margin-top: calc(36 * var(--u)); }
  .faq button { min-height: 72px; padding: 0; gap: 20px; font-size: max(19px, calc(23 * var(--u))); }
  .faq__icon { width: 40px; height: 40px; }
  .faq__icon svg { width: 16px; height: 16px; }
  .faq__a { padding: 0 60px 24px 0; font-size: 16px; line-height: 1.65; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}