/* ==========================================================================
   Sparclet Foods — coming soon page
   Layout is expressed as a percentage of the 1535px design canvas.
   --k = 1% of the canvas width, so `8.1 * var(--k)` == 8.1% of the design.
   ========================================================================== */

:root {
  --k: min(1vw, 15.35px);

  --navy: #011f45;
  --navy-strip: #001f48;
  --orange: #f65403;
  --cream: #f4ede5;
  --card: #fdfcf7;
  --card-border: #e6ddd0;
  --body: #35404f;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

h1, h2, p, ul { margin: 0; }
ul { list-style: none; padding: 0; }

.page {
  max-width: 1535px;
  margin: 0 auto;
  background: var(--cream);
  overflow: hidden;
}

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  min-height: calc(45.3 * var(--k));
  padding: calc(2.9 * var(--k)) 0 0 calc(5.54 * var(--k));
}

.hero__copy {
  position: relative;
  z-index: 2;
}

.hero__art {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: 54.4%;
}

.hero__art img { width: 100%; height: auto; }

.logo {
  width: calc(31.9 * var(--k));
  height: auto;
}

/* headline ---------------------------------------------------------- */

.headline {
  position: relative;
  margin-top: calc(1.6 * var(--k));
  font-size: calc(4.1 * var(--k));
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
}

.headline__line { display: block; }

.headline__line:nth-of-type(1) {
  font-size: 2.02em;
  line-height: 0.98;
}

.headline .accent {
  position: relative;
  color: var(--orange);
  white-space: nowrap;
}

.swoosh {
  position: absolute;
  left: 2%;
  bottom: -0.1em;
  width: 82%;
  height: 0.2em;
  overflow: visible;
  fill: none;
  stroke: var(--orange);
  stroke-width: 6;
  stroke-linecap: round;
}

/* the two little green ticks above the "H" of Hold */
.headline__dashes {
  position: absolute;
  top: -0.28em;
  left: -0.44em;
  width: 0.6em;
  height: 0.5em;
}

.headline__dashes::before,
.headline__dashes::after {
  content: "";
  position: absolute;
  background: #3f8f2f;
  border-radius: 2px;
}

.headline__dashes::before {
  width: 0.34em;
  height: 0.055em;
  top: 0.10em;
  left: 0;
  transform: rotate(-38deg);
}

.headline__dashes::after {
  width: 0.30em;
  height: 0.055em;
  top: 0.34em;
  left: 0.05em;
  transform: rotate(-38deg);
}

/* lede -------------------------------------------------------------- */

.lede {
  margin-top: calc(1.7 * var(--k));
  max-width: calc(33 * var(--k));
  font-size: calc(1.12 * var(--k));
  line-height: 1.58;
  font-weight: 400;
  color: var(--navy);
}

/* about card -------------------------------------------------------- */

.about {
  display: flex;
  align-items: flex-start;
  gap: calc(1.4 * var(--k));
  width: calc(40 * var(--k));
  margin-top: calc(1.2 * var(--k));
  margin-left: calc(-1.05 * var(--k));
  padding: calc(1.1 * var(--k)) calc(1.5 * var(--k)) calc(1.15 * var(--k));
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: calc(0.85 * var(--k));
}

.about__icon {
  flex: 0 0 auto;
  width: calc(4.6 * var(--k));
  height: auto;
  border-radius: 50%;
}

.about__title {
  display: flex;
  align-items: center;
  gap: calc(0.5 * var(--k));
  font-size: calc(1.32 * var(--k));
  font-weight: 700;
  letter-spacing: -0.01em;
}

.about__leaf {
  width: calc(1.4 * var(--k));
  height: auto;
}

.about__text {
  margin-top: calc(0.4 * var(--k));
  font-size: calc(0.95 * var(--k));
  line-height: 1.5;
  color: var(--body);
}

/* -------------------------------------------------------- sneak peek */

.peek {
  padding: 0 calc(3.84 * var(--k)) calc(1.4 * var(--k));
}

.peek__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(0.85 * var(--k));
  margin-bottom: calc(0.9 * var(--k));
}

.peek__label h2 {
  font-size: calc(1.32 * var(--k));
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.peek__rule {
  width: calc(10 * var(--k));
  height: 1px;
  background: #4d7c34;
  opacity: 0.75;
}

.peek__leaf {
  width: calc(1.5 * var(--k));
  height: auto;
}

.peek__leaf--flip { transform: scaleX(-1); }

.peek__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: calc(0.85 * var(--k));
}

.peek__grid img {
  width: 100%;
  height: calc(10.95 * var(--k));
  object-fit: cover;
  border-radius: calc(0.25 * var(--k));
}

/* ------------------------------------------------------- bottom strip */

.strip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(2 * var(--k));
  min-height: calc(7.36 * var(--k));
  padding: calc(0.9 * var(--k)) calc(3.5 * var(--k));
  background: var(--navy-strip);
  color: #fff;
}

.strip__dots {
  position: absolute;
  left: calc(0.65 * var(--k));
  top: 50%;
  transform: translateY(-50%);
  width: calc(4.6 * var(--k));
  height: calc(4.9 * var(--k));
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.32) 22%, transparent 24%);
  background-size: calc(1.15 * var(--k)) calc(1.2 * var(--k));
}

.strip__list {
  display: flex;
  align-items: center;
}

.strip__item {
  display: flex;
  align-items: center;
  gap: calc(0.8 * var(--k));
  padding: 0 calc(1.85 * var(--k));
}

.strip__item + .strip__item {
  border-left: 1px solid rgba(226, 148, 92, 0.55);
}

.strip__item img {
  width: calc(4.1 * var(--k));
  height: auto;
  flex: 0 0 auto;
}

.strip__item span {
  font-size: calc(1.22 * var(--k));
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.strip__badge {
  width: calc(9.6 * var(--k));
  height: auto;
  flex: 0 0 auto;
}

/* ============================================================ tablet */

@media (max-width: 1024px) {
  :root { --k: 1.05vw; }

  .lede { max-width: calc(38 * var(--k)); }
  .about { width: calc(44 * var(--k)); }
  .strip__item { padding: 0 calc(1.3 * var(--k)); }
}

/* ============================================================ mobile */

@media (max-width: 820px) {
  :root { --k: 1vw; }

  .hero {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 26px 20px 0;
  }

  .hero__copy { display: contents; }

  .hero__art {
    position: static;
    order: 3;
    width: calc(100% + 40px);
    margin: 18px -20px 0;
  }

  .logo { width: min(62vw, 300px); }

  .headline {
    order: 1;
    margin-top: 22px;
    font-size: clamp(24px, 6.8vw, 38px);
    line-height: 1.2;
  }

  .headline__line:nth-of-type(1) { font-size: 1.6em; }

  .headline__dashes { display: none; }

  .swoosh { bottom: -0.3em; stroke-width: 7; }

  .lede {
    order: 4;
    max-width: none;
    margin-top: 18px;
    font-size: clamp(14px, 3.9vw, 18px);
    line-height: 1.6;
  }

  .lede br { display: none; }

  .about {
    order: 5;
    width: 100%;
    margin: 20px 0 0;
    gap: 14px;
    padding: 16px 18px 18px;
    border-radius: 14px;
  }

  .about__icon { width: 52px; }

  .about__title {
    gap: 8px;
    font-size: clamp(16px, 4.4vw, 19px);
  }

  .about__leaf { width: 15px; }

  .about__text {
    margin-top: 6px;
    font-size: clamp(13px, 3.6vw, 15px);
  }

  .peek { padding: 30px 20px 22px; }

  .peek__label { gap: 10px; margin-bottom: 14px; }

  .peek__label h2 { font-size: clamp(13px, 3.6vw, 16px); }

  .peek__rule { width: clamp(28px, 12vw, 80px); }

  .peek__leaf { width: 16px; }

  .peek__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .peek__grid img {
    height: clamp(96px, 30vw, 150px);
    border-radius: 6px;
  }

  .strip {
    flex-direction: column;
    gap: 18px;
    min-height: 0;
    padding: 26px 20px 24px;
  }

  .strip__dots { display: none; }

  .strip__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 10px;
    width: 100%;
    max-width: 420px;
  }

  .strip__item {
    gap: 10px;
    padding: 0;
    border-left: 0 !important;
  }

  .strip__item:last-child {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .strip__item img { width: 38px; }

  .strip__item span { font-size: clamp(11px, 3.2vw, 13px); }

  .strip__badge { width: 120px; }
}

@media (max-width: 380px) {
  .peek__grid img { height: 90px; }
  .strip__list { gap: 14px 6px; }
}