/* =========================================================
   XQS – Strawberry Cream landing page
   Built from _XQS_Landing_page.psd (artboards "Web" 2880px @2x
   and "Mobile" 780px @2x).

   Scaling: every size is written as  calc(var(--u) * N)  where N is
   the value in CSS px from the design (1440 desktop / 390 mobile).
   --u = 1px at the design width and shrinks proportionally below it,
   so the layout stays pixel-faithful and simply scales.
   ========================================================= */

/* Montserrat, self-hosted (SIL OFL) – no Google Fonts request (GDPR-friendly) */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/montserrat-300.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/montserrat-400.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/montserrat-500.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/montserrat-700.woff2") format("woff2"); }

:root {
  --pink: #ee3e80;
  --pink-light: #f6adcd;
  --pink-pill: #f6b8d4;
  --pink-line: #f287b7;
  --pink-bg: #fde8f1;
  --grey-bg: #ecedf0;
  --ink: #231f20;
  --white: #fff;

  --u: min(1px, calc(100vw / 1440));
  --border: max(1px, calc(var(--u) * 3));
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
  color: var(--pink);
  background: var(--grey-bg);
  -webkit-font-smoothing: antialiased;
}

main { overflow-x: clip; }

img { display: block; max-width: none; height: auto; }

p, h1, h2, ul, address { margin: 0; padding: 0; }

.frame {
  position: relative;
  width: calc(var(--u) * 1440);
  margin: 0 auto;
}

/* ---------- HERO ---------- */
.hero {
  position: relative;
  z-index: 3;
  background: #f4a9c9 url("assets/bg-hero-desktop.jpg") center / cover no-repeat;
}
.hero .frame { height: calc(var(--u) * 800); }

.hero__content {
  position: relative;
  z-index: 2;
  padding: calc(var(--u) * 161) 0 0 calc(var(--u) * 170);
}

.hero__line {
  position: absolute;
  left: calc(var(--u) * 46);
  top: calc(var(--u) * 50);
  width: calc(var(--u) * 258);
  pointer-events: none;
}

.hero__berry-top {
  position: absolute;
  z-index: 1;
  left: calc(var(--u) * 652);
  top: calc(var(--u) * 54);
  width: calc(var(--u) * 401);
}

.hero__berry-whole {
  position: absolute;
  z-index: 3;
  left: calc(var(--u) * 116);
  top: calc(var(--u) * 692);
  width: calc(var(--u) * 240);
}

.brand {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--u) * 16);
  margin-left: calc(var(--u) * -14);
}
.brand__logo { width: calc(var(--u) * 283.5); }
.brand__tagline {
  color: var(--white);
  font-weight: 700;
  font-size: calc(var(--u) * 39.4);
  line-height: calc(var(--u) * 36.6);
  text-transform: uppercase;
  letter-spacing: -0.015em;
}

.hero__packshot {
  position: absolute;
  left: calc(var(--u) * 946.5);
  top: calc(var(--u) * 237.5);
  width: calc(var(--u) * 433.5);
}

.hero__title {
  margin-top: calc(var(--u) * 46.4);
  color: var(--white);
  font-weight: 700;
  font-size: calc(var(--u) * 90);
  line-height: calc(var(--u) * 83.7);
  text-transform: uppercase;
  letter-spacing: -0.012em;
}
.hero__title > span { display: block; }
.hero__title-row {
  display: flex !important;
  align-items: center;
  gap: calc(var(--u) * 13);
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: calc(var(--u) * 325);
  height: calc(var(--u) * 47);
  margin-top: calc(var(--u) * 3);
  border-radius: 999px;
  background: var(--white);
  color: var(--pink-pill);
  font-weight: 500;
  font-size: calc(var(--u) * 35.5);
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.hero__intro {
  width: calc(var(--u) * 654);
  margin-top: calc(var(--u) * 35);
  color: var(--white);
  font-weight: 500;
  font-size: calc(var(--u) * 29);
  line-height: calc(var(--u) * 33);
  text-align: justify;
  text-align-last: left;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--u) * 286);
  height: calc(var(--u) * 57);
  margin: calc(var(--u) * 37) 0 0 calc(var(--u) * 369);
  border-radius: 999px;
  background: var(--white);
  color: var(--pink);
  font-weight: 700;
  font-size: calc(var(--u) * 28.4);
  line-height: 1;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn:hover,
.btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(238, 62, 128, .25);
}
.btn:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }

/* ---------- FEATURES ---------- */
.features {
  position: relative;
  z-index: 2;
  background: var(--pink-bg) url("assets/bg-features-desktop.jpg") center / cover no-repeat;
  border-bottom: var(--border) solid var(--pink-line);
}
.features .frame { height: calc(var(--u) * 264.5); }

.features__list {
  display: grid;
  grid-template-columns: calc(var(--u) * 363) calc(var(--u) * 414.5) 1fr;
  padding: calc(var(--u) * 100.9) 0 0 calc(var(--u) * 170);
  list-style: none;
}
.feature__title,
.feature__text { display: block; }
.feature__title {
  font-weight: 700;
  font-size: calc(var(--u) * 46.7);
  line-height: calc(var(--u) * 31.2);
  padding-top: calc(var(--u) * 5);
}
.feature__text {
  margin-top: calc(var(--u) * 9);
  font-weight: 400;
  font-size: calc(var(--u) * 23.4);
  line-height: calc(var(--u) * 31.2);
}

.features__berry-half {
  position: absolute;
  z-index: 2;
  left: calc(var(--u) * 1147);
  top: calc(var(--u) * 149.5);
  width: calc(var(--u) * 237);
}

/* ---------- DISCOVER ---------- */
.discover {
  position: relative;
  z-index: 1;
  background: var(--pink-bg) url("assets/bg-discover-desktop.jpg") center / cover no-repeat;
  border-bottom: var(--border) solid var(--pink-line);
}
.discover .frame { height: calc(var(--u) * 463); }

.discover__berry {
  position: absolute;
  left: calc(var(--u) * 17);
  top: calc(var(--u) * 182.5);
  width: calc(var(--u) * 356.5);
}

.discover__head {
  position: relative;
  display: flex;
  align-items: flex-start;
  padding: calc(var(--u) * 55.4) 0 0 calc(var(--u) * 170.5);
}
.discover__logo {
  width: calc(var(--u) * 224.5);
  margin-top: calc(var(--u) * 44.6);
}
.discover__title {
  margin-left: calc(var(--u) * 37.5);
  font-weight: 400;
}
.discover__title > span { display: block; }
.discover__light {
  font-weight: 300;
  font-size: calc(var(--u) * 35);
  line-height: calc(var(--u) * 31.2);
}
.discover__light:first-child { margin-left: calc(var(--u) * 4); }
.discover__light:last-child  { margin-top: calc(var(--u) * 9.2); margin-left: calc(var(--u) * 2); }
.discover__name {
  margin-top: calc(var(--u) * 8.9);
  font-weight: 700;
  font-size: calc(var(--u) * 50);
  line-height: calc(var(--u) * 45.1);
  text-transform: uppercase;
  letter-spacing: -0.012em;
}

.location {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: calc(var(--u) * 14);
  margin: calc(var(--u) * 44.4) 0 0 calc(var(--u) * 397.5);
  font-style: normal;
}
.location__pin {
  width: calc(var(--u) * 24.5);
  margin-top: calc(var(--u) * 3.5);
}
.location__text {
  font-weight: 500;
  font-size: calc(var(--u) * 25);
  line-height: calc(var(--u) * 30);
}
.location__text strong {
  font-weight: 700;
  text-transform: uppercase;
}
.location__date {
  display: block;
  font-size: calc(var(--u) * 20);
  line-height: calc(var(--u) * 26);
}

.countdown {
  position: absolute;
  left: calc(var(--u) * 837);
  top: calc(var(--u) * 266);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 10.5);
}
.countdown__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(var(--u) * 100.5);
  height: calc(var(--u) * 100.5);
  border-radius: 50%;
  background: var(--pink-light);
  color: var(--white);
  font-weight: 700;
  text-transform: uppercase;
}
.countdown__num {
  font-size: calc(var(--u) * 40);
  line-height: calc(var(--u) * 34);
}
.countdown__label {
  margin-top: calc(var(--u) * 4);
  font-size: calc(var(--u) * 12);
  line-height: calc(var(--u) * 15);
}
.countdown__caption {
  margin-top: calc(var(--u) * -3);
  color: var(--pink-light);
  font-weight: 700;
  font-size: calc(var(--u) * 20);
  line-height: calc(var(--u) * 20);
  text-transform: uppercase;
}

/* ---------- FOOTER / DISCLAIMER ---------- */
.disclaimer {
  min-height: calc(var(--u) * 140);
  padding: calc(var(--u) * 56.2) 24px calc(var(--u) * 20);
  background: var(--grey-bg);
  color: var(--ink);
  font-weight: 700;
  font-size: max(11px, calc(var(--u) * 24.7));
  line-height: max(14px, calc(var(--u) * 28.5));
  text-align: center;
  text-transform: uppercase;
}

/* =========================================================
   MOBILE  (design artboard: 390px)
   ========================================================= */
@media (max-width: 767px) {
  :root { --u: min(1.3px, calc(100vw / 390)); }

  .br-desktop { display: none; }

  .frame { width: calc(var(--u) * 390); }

  /* hero */
  .hero { background-image: url("assets/bg-hero-mobile.jpg"); }
  .hero .frame { height: calc(var(--u) * 843); }

  .hero__content { padding: calc(var(--u) * 71) 0 0 calc(var(--u) * 70.5); }

  .hero__line {
    left: calc(var(--u) * 6);
    top: calc(var(--u) * 12.5);
    width: calc(var(--u) * 135.5);
  }
  .hero__berry-top {
    z-index: 3;
    left: calc(var(--u) * 190.5);
    top: calc(var(--u) * 488);
    width: calc(var(--u) * 219.5);
  }
  .hero__berry-whole {
    left: calc(var(--u) * 24.5);
    top: calc(var(--u) * 787);
    width: calc(var(--u) * 145.5);
  }

  .brand {
    gap: calc(var(--u) * 8.5);
    margin-left: calc(var(--u) * -6.5);
  }
  .brand__logo { width: calc(var(--u) * 149); }
  .brand__tagline {
    font-size: calc(var(--u) * 20.7);
    line-height: calc(var(--u) * 19.2);
  }

  .hero__packshot {
    position: static;
    width: calc(var(--u) * 282);
    margin: calc(var(--u) * 33.5) 0 0 calc(var(--u) * -13);
  }

  .hero__title {
    margin-top: calc(var(--u) * 24.4);
    font-size: calc(var(--u) * 41.1);
    line-height: calc(var(--u) * 38.2);
  }
  .hero__title-row { display: block !important; }
  .pill {
    display: flex;
    width: calc(var(--u) * 148.5);
    height: calc(var(--u) * 21.5);
    margin: calc(var(--u) * 5.2) 0 0 calc(var(--u) * -4);
    font-size: calc(var(--u) * 16.5);
  }

  .hero__intro {
    width: calc(var(--u) * 212.5);
    margin-top: calc(var(--u) * 38.8);
    font-size: calc(var(--u) * 14);
    line-height: calc(var(--u) * 17);
    letter-spacing: -0.02em;
  }

  .btn {
    width: calc(var(--u) * 150.5);
    height: calc(var(--u) * 30);
    margin: calc(var(--u) * 14.2) 0 0;
    font-size: calc(var(--u) * 14.7);
  }

  /* features */
  .features { background-image: url("assets/bg-features-mobile.jpg"); }
  .features .frame { height: calc(var(--u) * 369.5); }
  .features__list {
    grid-template-columns: 1fr;
    row-gap: calc(var(--u) * 28);
    padding: calc(var(--u) * 74.8) 0 0 calc(var(--u) * 70.5);
  }
  .feature__title {
    padding-top: 0;
    font-size: calc(var(--u) * 32.9);
    line-height: calc(var(--u) * 21.95);
  }
  .feature:nth-child(3) { margin-top: calc(var(--u) * 3.5); }
  .feature__text {
    margin-top: calc(var(--u) * 6.5);
    font-size: calc(var(--u) * 16.5);
    line-height: calc(var(--u) * 21.95);
  }
  .features__berry-half {
    left: calc(var(--u) * 240);
    top: calc(var(--u) * 289.5);
    width: calc(var(--u) * 129);
  }

  /* discover */
  .discover { background-image: url("assets/bg-discover-mobile.jpg"); }
  .discover .frame { height: calc(var(--u) * 698); }

  .discover__berry {
    left: calc(var(--u) * 18);
    top: calc(var(--u) * 155);
    width: calc(var(--u) * 235.5);
  }

  .discover__head { padding: calc(var(--u) * 65.5) 0 0 calc(var(--u) * 24.5); }
  .discover__logo {
    width: calc(var(--u) * 127.5);
    margin-top: calc(var(--u) * 25);
  }
  .discover__title { margin-left: calc(var(--u) * 9); }
  .discover__light {
    font-size: calc(var(--u) * 20);
    line-height: calc(var(--u) * 17.75);
  }
  .discover__light:first-child { margin-left: calc(var(--u) * 2.5); }
  .discover__light:last-child  { margin-top: calc(var(--u) * 5.7); margin-left: calc(var(--u) * 1); }
  .discover__name {
    margin-top: calc(var(--u) * 4.6);
    font-size: calc(var(--u) * 28.5);
    line-height: calc(var(--u) * 25.7);
  }

  .location {
    gap: calc(var(--u) * 8.5);
    margin: calc(var(--u) * 145.75) 0 0 calc(var(--u) * 31.5);
  }
  .location__pin { margin-top: calc(var(--u) * 10.5); }

  .countdown {
    position: static;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(var(--u) * 8);
    margin-top: calc(var(--u) * 39);
    padding-left: calc(var(--u) * 7);
  }
  .countdown__item {
    width: calc(var(--u) * 87);
    height: calc(var(--u) * 87);
  }
  .countdown__num {
    font-size: calc(var(--u) * 34.4);
    line-height: calc(var(--u) * 29);
  }
  .countdown__label {
    margin-top: calc(var(--u) * 3);
    font-size: calc(var(--u) * 10.3);
    line-height: calc(var(--u) * 13);
  }
  .countdown__caption {
    flex-basis: 100%;
    margin-top: calc(var(--u) * 13.8);
    font-size: calc(var(--u) * 17.2);
    line-height: calc(var(--u) * 17.2);
    text-align: center;
  }

  /* footer */
  .disclaimer {
    min-height: calc(var(--u) * 138.5);
    padding: calc(var(--u) * 15.2) calc(var(--u) * 18) calc(var(--u) * 20) calc(var(--u) * 25);
    font-size: calc(var(--u) * 18.4);
    line-height: calc(var(--u) * 21.2);
    letter-spacing: -0.01em;
    text-align: left;
  }
  .disclaimer p {
    max-width: calc(var(--u) * 347);
    margin: 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}