/* ==========================================================================
   English home page (design: 1024 × 1536)
   Values are design px / 10  →  rem
   ========================================================================== */

.home-en { --bg: #f7f7f8; background: var(--bg); }

/* ------------------------------------------------------------------ HERO */
.hero { position: relative; height: 55.8rem; overflow: hidden; background: #e9eef6; }
.hero::before { /* soft extension of the photo on screens wider than the canvas */
  content: ""; position: absolute; inset: -4rem;
  background: url("../img/en-hero.jpg") center / cover no-repeat;
  filter: blur(28px) saturate(1.05); opacity: .9;
}
.hero-bg {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 102.4rem; height: 100%; object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3rem, #000 calc(100% - 3rem), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 3rem, #000 calc(100% - 3rem), transparent 100%);
}
@media (max-width: 1440px) { .hero-bg { -webkit-mask-image: none; mask-image: none; } }
.hero-frame { height: 100%; }

.eyebrow { position: absolute; left: 8rem; top: 5.1rem; font-size: 1.32rem; line-height: 1.6rem; font-weight: 500; color: #4b4b52; letter-spacing: -.005em; }
.hero-title {
  position: absolute; left: 7.8rem; top: 9.2rem;
  font-size: 4.6rem; line-height: 4.85rem; font-weight: 700; letter-spacing: .006em; color: #0f0f12;
}
.hero-lead { position: absolute; left: 8rem; top: 25.6rem; font-size: 1.45rem; line-height: 2rem; color: #66666d; letter-spacing: -.003em; }
.btn-dark {
  position: absolute; left: 8rem; top: 32.1rem; width: 18.6rem; height: 4.1rem;
  display: inline-flex; align-items: center; gap: .55rem; padding-left: 2.1rem;
  border-radius: 99rem; background: #18181d; color: #fff;
  font-size: 1.3rem; font-weight: 500; letter-spacing: -.005em;
  box-shadow: 0 .4rem 1.4rem rgba(15, 15, 25, .14);
  transition: transform .2s ease, box-shadow .2s ease, background .2s;
}
.btn-dark span { font-size: 1.4rem; transition: transform .2s ease; }
.btn-dark:hover { background: #000; transform: translateY(-1px); box-shadow: 0 .8rem 2rem rgba(15, 15, 25, .2); }
.btn-dark:hover span { transform: translateX(3px); }

.note { position: absolute; color: #7d7f88; white-space: nowrap; pointer-events: none; font-weight: 400; }
.note .dash { letter-spacing: .1em; }
.note-adventures { left: 8.7rem; top: 42.8rem; font-size: 1.8rem; line-height: 2.25rem; transform: rotate(-11deg); transform-origin: 0 100%; }
.note-adventures .l2 { display: block; padding-left: 3.1rem; }
.note-next { left: 84rem; top: 16.6rem; font-size: 1.8rem; line-height: 2.2rem; color: #6f7480; transform: rotate(-15deg); transform-origin: 0 100%; }
.note-next .l2 { display: block; padding-left: .2rem; }
.note-tick { position: absolute; left: 5.4rem; top: 5.2rem; width: 1.4rem; height: 2.4rem; }

/* ------------------------------------------------------------------ ACCESSORIES */
.accessories { padding: 2.75rem 0 4rem; background: var(--bg); }
.acc-head { position: relative; padding-left: 4.4rem; }
.acc-title { font-size: 3.15rem; line-height: 3.4rem; font-weight: 700; letter-spacing: -.008em; }
.acc-sub { margin-top: .75rem; font-size: 1.65rem; line-height: 2rem; color: #7a7a81; letter-spacing: -.01em; }
.acc-note { position: absolute; right: 4.5rem; top: 1.98rem; font-size: 1.08rem; line-height: 1.4rem; color: #7a7a81; }

.acc-grid { list-style: none; margin: 2.1rem 0 0 2.2rem; padding: 0; width: 99.6rem; display: grid; grid-template-columns: repeat(5, 1fr); }
.acc-card { position: relative; }
.acc-card + .acc-card::before { content: ""; position: absolute; left: 0; top: .4rem; bottom: 0; width: 1px; background: #ebebef; }
.acc-card a { display: block; padding: 0 0 .2rem 2.2rem; }
.acc-card img { width: 18.6rem; height: 11.8rem; margin-left: -1.4rem; object-fit: cover; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.acc-card h3 { margin-top: .84rem; font-size: 1.4rem; line-height: 1.7rem; font-weight: 600; letter-spacing: -.01em; }
.acc-card p { margin-top: .24rem; font-size: 1.1rem; line-height: 1.4rem; color: #7d7d84; }
.arrow-dot { margin-top: 1rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: #ececef; color: #333; display: grid; place-items: center; transition: background .2s, color .2s, transform .2s; }
.arrow-dot svg { width: 1.1rem; height: 1.1rem; }
.acc-card a:hover img { transform: translateY(-.4rem) scale(1.03); }
.acc-card a:hover .arrow-dot { background: var(--ink); color: #fff; transform: translateX(2px); }

/* ------------------------------------------------------------------ SAME DUCK */
.same-duck { position: relative; height: 28.6rem; background: #f3f1f2; overflow: hidden; }
.same-duck-bg { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 102.4rem; height: 100%; object-fit: cover; }
.same-duck-frame { height: 100%; }
.same-duck-copy { position: absolute; left: 4.4rem; top: 9.53rem; }
.same-duck-copy h2 { font-size: 2.8rem; line-height: 3rem; font-weight: 700; letter-spacing: -.028em; }
.same-duck-copy p { margin-top: .98rem; font-size: 1.26rem; line-height: 1.6rem; color: #78787f; }
.note-days { left: 92.2rem; top: 11rem; width: 8rem; text-align: center; font-size: 1.5rem; line-height: 1.95rem; color: #8b8c93; transform: rotate(-7deg); }

/* ------------------------------------------------------------------ STICKERS + MAKE IT YOURS */
.duo { padding-top: .4rem; }
.duo-grid { display: grid; grid-template-columns: 48.4rem 48.2rem; gap: 1.1rem; margin-left: 2.2rem; width: auto; }
.sticker-card, .yours-card { position: relative; display: block; height: 23.5rem; border-radius: 1rem; overflow: hidden; }
.sticker-card { background: #f5f5f5; }
.sticker-copy { position: absolute; left: 2.2rem; top: 1.63rem; z-index: 1; }
.sticker-card h3, .yours-card h3 { font-size: 2.4rem; line-height: 2.8rem; font-weight: 700; letter-spacing: -.008em; }
.sticker-card p, .yours-card p { margin-top: .7rem; font-size: 1.24rem; line-height: 1.6rem; color: #7f7f86; }
.sticker-set { position: absolute; left: -.6rem; top: 6.77rem; width: 22.6rem; height: 13.2rem; max-width: none; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.sticker-laptop { position: absolute; left: 25rem; top: 0; width: 23.4rem; height: 23.5rem; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.sticker-card:hover .sticker-set { transform: rotate(-2deg) scale(1.03); }
.sticker-card:hover .sticker-laptop { transform: scale(1.03); }
.yours-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.yours-copy { position: absolute; left: 2.1rem; top: 1.63rem; }
.yours-card:hover img { transform: scale(1.03); }

/* ------------------------------------------------------------------ FOOTER */
.site-footer { height: 10.8rem; overflow: hidden; }
.footer-frame { height: 100%; text-align: center; padding-top: 1.75rem; }
.footer-brand { font-size: 1.41rem; line-height: 1.8rem; font-weight: 600; letter-spacing: -.01em; color: #1d1d22; }
.footer-links { margin-top: .66rem; display: flex; justify-content: center; gap: 1.3rem; font-size: 1.12rem; line-height: 1.5rem; color: #9b9ba2; }
.footer-links a { transition: color .2s; }
.footer-links a:hover { color: var(--ink); }
.footer-dash { display: block; width: 1.3rem; height: 1px; margin: 1.4rem auto 0; background: #b9b9bf; }
.footer-legal { margin-top: .9rem; font-size: .95rem; line-height: 1.2rem; color: #a6a6ac; }
.note-world { left: 88.3rem; top: 3.3rem; text-align: left; font-size: 1.28rem; line-height: 1.7rem; color: #8c8d94; transform: rotate(-7deg); }

/* ==========================================================================
   Tablet / phone
   ========================================================================== */
@media (max-width: 900px) {
  .hero { height: auto; background: linear-gradient(180deg, #e3eaf5 0%, #eef2f8 55%, #f7f7f8 100%); }
  .hero::before { display: none; }
  .hero-bg { position: relative; left: 0; transform: none; order: 2; height: 62vw; min-height: 26rem; object-position: 78% 40%; max-width: none; }
  .hero { display: flex; flex-direction: column; }
  .hero-frame { position: static; height: auto; padding: 8rem 2.4rem 2.8rem; order: 1; }
  .eyebrow, .hero-title, .hero-lead, .btn-dark { position: static; }
  .eyebrow { font-size: 1.4rem; }
  .hero-title { margin-top: 1.4rem; font-size: clamp(3.8rem, 10vw, 5.6rem); line-height: 1.04; }
  .hero-lead { margin-top: 1.6rem; font-size: 1.5rem; line-height: 1.5; }
  .btn-dark { margin-top: 2.4rem; width: auto; padding: 0 2.4rem; height: 4.6rem; font-size: 1.5rem; }
  .note-adventures { position: absolute; left: auto; right: 2.4rem; top: auto; bottom: calc(62vw - 1rem); font-size: 1.7rem; z-index: 2; }
  .note-next { display: none; }

  .accessories { padding: 4rem 0 3.2rem; }
  .acc-head { padding: 0 2.4rem; }
  .acc-title { font-size: 3rem; }
  .acc-sub { font-size: 1.6rem; }
  .acc-note { position: static; margin-top: .8rem; font-size: 1.3rem; }
  .acc-grid { width: auto; margin: 2.4rem 0 0; padding: 0 2.4rem .4rem; display: flex; gap: 1.2rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 2.4rem; scrollbar-width: none; }
  .acc-grid::-webkit-scrollbar { display: none; }
  .acc-card { flex: 0 0 min(44vw, 22rem); scroll-snap-align: start; }
  .acc-card + .acc-card::before { display: none; }
  .acc-card a { padding: 1.2rem 1.4rem 1.6rem; background: #fff; border-radius: 1.6rem; height: 100%; }
  .acc-card img { width: 100%; height: auto; aspect-ratio: 186 / 118; margin: 0; }
  .acc-card h3 { font-size: 1.6rem; line-height: 2rem; }
  .acc-card p { font-size: 1.3rem; line-height: 1.7rem; }

  .same-duck { height: auto; display: flex; flex-direction: column; }
  .same-duck-bg { position: relative; order: 2; left: 0; transform: none; width: 100%; height: auto; aspect-ratio: 645 / 286; object-position: 64% 50%; max-width: none; }
  .same-duck-frame { order: 1; height: auto; padding: 4rem 2.4rem 0; }
  .same-duck-copy { position: static; }
  .same-duck-copy h2 { font-size: 3rem; line-height: 1.1; }
  .same-duck-copy p { font-size: 1.5rem; }
  .note-days { left: auto; right: 2.4rem; top: 3.6rem; font-size: 1.5rem; }

  .duo { padding: 1.6rem 2.4rem 0; }
  .duo-grid { grid-template-columns: 1fr; margin: 0; gap: 1.6rem; }
  .sticker-card { height: auto; padding: 2.4rem 2.2rem 0; display: flex; flex-direction: column; }
  .sticker-copy { position: static; }
  .sticker-set { position: static; width: 100%; max-width: 32rem; height: auto; margin: 1.6rem 0 0 -1rem; }
  .sticker-card { padding-bottom: 2rem; }
  .sticker-laptop { display: none; }
  .yours-card { height: 62vw; min-height: 24rem; }
  .yours-copy { left: 2.2rem; top: 2.2rem; }

  .site-footer { height: auto; padding: 3.6rem 0 4.8rem; }
  .footer-frame { padding-top: 0; }
  .footer-legal { margin-top: .9rem; font-size: .95rem; line-height: 1.2rem; color: #a6a6ac; }
.note-world { position: static; display: block; transform: rotate(-5deg); margin: 2.4rem auto 0; text-align: center; }
  .footer-brand { font-size: 1.7rem; }
  .footer-links { font-size: 1.4rem; gap: 2rem; }
}