@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

/* Keep the original artwork's proportions rather than cropping it with cover. */
body { width: 100%; max-width: none; margin: 0; }
main { width: 100%; max-width: 1440px; margin-inline: auto; }
.hero {
  position: relative;
  isolation: isolate;
  min-height: 0;
  aspect-ratio: 785 / 369;
  background-size: 115% auto;
  background-position: right bottom;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, #fff9 0%, #fff8 35%, transparent 53%);
}
.header { position: relative; width: 89%; height: auto; min-height: 0; padding-block: 0; }
.brand { gap: 6px; }
.brand strong { font-family: Anton, Impact, sans-serif; font-weight: 400; }
.brand small { font-size: clamp(10px, 1.4vw, 20px); }
.header .brand strong { font-size: clamp(27px, 3.65vw, 52px); }
.header .logo-crop { width: clamp(60px, 7.65vw, 110px); height: auto; aspect-ratio: 60 / 71; }
.header nav { gap: clamp(25px, 4vw, 58px); font-size: clamp(11px, 1.2vw, 17px); }
.header-socials { gap: clamp(12px, 1.55vw, 22px); }
.hero-copy { position: relative; width: 89%; padding: 2.3% 0 0; }
h1, h2, .footer-motto { font-family: Anton, Impact, 'Arial Narrow', sans-serif; font-weight: 400; letter-spacing: -.035em; }
h1 { font-size: clamp(42px, 6.1vw, 88px); line-height: .89; }
.hero-copy p { font-size: clamp(13px, 1.6vw, 23px); line-height: 1.25; margin: 1.1% 0 1.5%; }
.hero-copy .button { min-width: 0; width: 28.5%; font-size: clamp(20px, 2.4vw, 34px); padding: .65% 2%; }
.announcement { font-size: clamp(12px, 1.45vw, 21px); padding: .6% 12px; line-height: 1.1; }
.shop { width: 95%; padding-top: 2.3%; }
.section-title h2 { font-size: clamp(39px, 5.6vw, 81px); }
.section-title p { font-size: clamp(15px, 1.85vw, 27px); margin-top: 4px; }
.section-title h2::before, .section-title h2::after {
  content: '';
  display: block;
  position: absolute;
  width: .75em;
  height: 1em;
  top: 0;
  font-size: inherit;
}
.section-title h2::before { left: -.95em; }
.section-title h2::after { right: -.95em; }
.products { margin-top: 1.2%; gap: 1%; }
.product { padding: 5px 6px 8px; }
.product-picture { width: 105%; aspect-ratio: 140 / 120; background-size: 560.714% 1670%; background-position: var(--position) 25.3185%; }
.product h3 { font-size: clamp(12px, 1.45vw, 21px); margin: 5px 0; }
.product p { font-size: clamp(11px, 1.26vw, 18px); max-width: none; line-height: 1.05; }
.product button { padding: 5px 8px; font-size: clamp(11px, 1.35vw, 19px); white-space: nowrap; }
.shopping { padding-top: .65%; }
.crown { width: 9%; height: auto; aspect-ratio: 71 / 52; margin-inline: auto; font-size: 0; color: transparent; }
.shopping .section-title h2 { font-size: clamp(39px, 6.2vw, 89px); }
.shopping .section-title h2::before, .shopping .section-title h2::after { width: 1em; height: 1.55em; top: 0; }
.shopping .section-title h2::before { left: -1.06em; }
.shopping .section-title h2::after { right: -1.06em; }
.shop-options { margin: 3.6% 5% 3.8%; }
.shop-options article { padding: 0 4%; }
.amazon-word, .tiktok-word { display: block; height: auto; margin: 0 auto 12px; font-size: 0; color: transparent; }
.amazon-word { width: 63%; aspect-ratio: 202 / 71; }
.tiktok-word { width: 83%; aspect-ratio: 266 / 71; }
.amazon-word span, .tiktok-word span, .tiktok-word b { display: none; }
.shop-options h3 { font-size: clamp(23px, 2.8vw, 40px); letter-spacing: -.04em; }
.shop-options p { font-size: clamp(17px, 2.1vw, 30px); line-height: 1.2; margin: 4px 0 18px; }
.shop-options .button { font-size: clamp(20px, 2.45vw, 35px); padding: 12px 32px; }
.benefits { padding: 0 5% 2%; gap: 2%; }
.benefits > div { gap: 9px; }
.benefits > div + div { padding-left: 10%; }
.benefits > div > span { width: 25%; height: auto; aspect-ratio: 34 / 28; font-size: 0; flex-shrink: 0; }
.benefits strong { font-size: clamp(12px, 1.35vw, 19px); }
.benefits small { font-size: clamp(8px, .95vw, 13px); white-space: nowrap; }
.our-vibe { width: 98%; grid-template-columns: 62% 38%; padding-top: 1%; }
.people-art { aspect-ratio: 480 / 355; }
.people-art img { visibility: hidden; }
.people-copy { padding: 0 4% 0 5%; }
.people-copy h2 { font-size: clamp(31px, 4.7vw, 68px); line-height: 1.08; }
.people-copy > p { font-size: clamp(14px, 1.75vw, 25px); line-height: 1.2; margin: 5% 0 10%; }
.follow { gap: 10px; flex-wrap: nowrap; }
.follow > strong { font-size: clamp(13px, 1.55vw, 22px); white-space: nowrap; }
.follow small { font-size: clamp(9px, 1.1vw, 15px); white-space: nowrap; }
.follow .socials { gap: 7px; }
.follow .socials a { width: clamp(21px, 2.65vw, 38px); height: auto; aspect-ratio: 1; flex-shrink: 0; }
.community { width: 100%; grid-template-columns: 47% 53%; align-items: center; margin-top: -1%; }
.community-copy { padding: 4% 1% 3% 10%; }
.community-logo { width: 55%; height: auto; aspect-ratio: 180 / 105; margin-bottom: 5%; }
.community h2 { font-size: clamp(49px, 9.4vw, 135px); font-weight: 400; line-height: .97; }
.community h2 .join-line { position: relative; display: inline-block; }
.join-line::after { content: ''; position: absolute; width: .7em; height: .85em; right: -.74em; top: -.03em; }
.community-copy > p { font-size: clamp(19px, 2.2vw, 32px); margin: 6% 0 5%; }
.community-character { width: 108%; margin: 0 0 -5% -5%; max-width: none; align-self: end; }
.community::after { content: ''; position: absolute; width: 9.4%; aspect-ratio: 74 / 78; right: 3.5%; top: 32%; pointer-events: none; mix-blend-mode: multiply; }
form { max-width: none; }
form input { font-size: clamp(12px, 1.45vw, 20px); padding: 12px 18px; }
form .button { min-width: 35%; font-size: clamp(15px, 1.8vw, 26px); padding: 9px 16px; }
.community-copy .form-message:empty { display: none; }
footer { position: relative; isolation: isolate; width: 100%; max-width: none; overflow: hidden; }
footer::before, footer::after { content: ''; position: absolute; width: 8.2%; height: 100%; top: 0; z-index: -1; }
footer::before { left: 0; }
footer::after { right: 0; }
.footer-inner { width: 86%; padding: 0; gap: 2%; justify-content: space-between; }
.footer-logo { width: 19%; height: auto; aspect-ratio: 119 / 129; }
.footer-motto { font-size: clamp(20px, 2.3vw, 33px); padding: 3% 1.5%; white-space: nowrap; }
.footer-social { padding: 3% 2%; }
.footer-social .socials { gap: 10px; }
.footer-social .socials a { width: clamp(30px, 4.2vw, 60px); height: auto; aspect-ratio: 1; }
.footer-social > strong { font-size: clamp(15px, 1.8vw, 26px); }
.footer-shop { width: 25%; flex-shrink: 0; }
.footer-shop h3 { font-size: clamp(18px, 2.3vw, 33px); }
.footer-shop .button { width: 100%; min-width: 0; font-size: clamp(13px, 1.55vw, 22px); padding: 7px 12px; }

@media (min-width: 701px) {
  .wrap { max-width: none; }
  .header nav { position: absolute; left: 33%; top: 50%; transform: translateY(-50%); }
  .header-socials { margin-left: auto; }
  .hero-copy::after {
    content: ''; position: absolute; width: 9.5%; aspect-ratio: 63 / 62;
    left: 49%; top: -2%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 70'%3E%3Cg fill='none' stroke='%23ffda00' stroke-width='6' stroke-linecap='round'%3E%3Cpath d='M7 48L28 55M24 18L41 37M60 2L64 26'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
    pointer-events: none;
  }
}
@media (max-width: 700px) {
  .announcement { font-size: 11px; padding: 7px 8px; }
  .hero { aspect-ratio: auto; min-height: 0; background-size: auto 330px; background-position: right bottom; }
  .hero::before { display: none; }
  .header { min-height: 85px; width: 92%; }
  .header .brand strong { font-size: 29px; }
  .header .brand small { font-size: 10px; }
  .header .logo-crop { width: 59px; }
  .header nav { font-size: 15px; gap: 22px; }
  .hero-copy { width: 92%; padding: 12px 0 335px; background: none; }
  h1 { font-size: clamp(35px, 8.9vw, 58px); }
  .hero-copy p { font-size: 14px; margin: 12px 0 16px; }
  .hero-copy .button { width: auto; min-width: 210px; padding: 9px 22px; font-size: 22px; }
  .shop { padding-top: 22px; width: 94%; }
  .section-title h2 { font-size: clamp(30px, 8vw, 42px); }
  .section-title p { font-size: 16px; }
  .products { gap: 12px; margin-top: 18px; }
  .product { padding: 6px 12px 12px; }
  .product-picture { width: 110%; }
  .product h3 { font-size: 14px; }
  .product p { font-size: 12px; line-height: 1.15; }
  .product button { font-size: 12px; padding: 7px; }
  .shopping { padding-top: 20px; }
  .crown { width: 63px; }
  .shopping .section-title h2 { font-size: clamp(25px, 6.5vw, 43px); }
  .shopping .section-title h2::before, .shopping .section-title h2::after { display: block; width: .65em; height: 1.15em; }
  .shopping .section-title h2::before { left: -.8em; }
  .shopping .section-title h2::after { right: -.8em; }
  .shop-options { margin: 28px 10px; }
  .amazon-word { width: 202px; }
  .tiktok-word { width: 266px; }
  .shop-options h3 { font-size: 25px; }
  .shop-options p { font-size: 18px; margin-bottom: 18px; }
  .shop-options .button { font-size: 21px; }
  .benefits { padding: 12px 8px 20px; gap: 18px; }
  .benefits > div + div { padding-left: 0; }
  .benefits > div > span { width: 32px; }
  .benefits strong { font-size: 13px; }
  .benefits small { font-size: 8px; white-space: normal; }
  .our-vibe { grid-template-columns: 1fr; width: 96%; }
  .people-copy { padding: 20px 12px; }
  .people-copy h2 { font-size: 37px; }
  .people-copy > p { font-size: 17px; margin: 16px 0 22px; }
  .follow { flex-wrap: wrap; }
  .follow > strong { font-size: 16px; }
  .follow small { font-size: 11px; }
  .follow .socials a { width: 27px; }
  .community { grid-template-columns: 1fr; }
  .community-copy { padding: 16px 6% 0; }
  .community-logo { width: 170px; margin-bottom: 18px; }
  .community h2 { font-size: clamp(49px, 13vw, 80px); }
  .community-copy > p { font-size: 20px; margin: 22px 0; }
  form { max-width: 440px; }
  form input { font-size: 13px; }
  form .button { font-size: 19px; }
  .community-character { width: 100%; max-width: 460px; margin: 20px auto -5%; }
  .community::after { width: 15%; top: auto; bottom: 26%; right: 6%; }
  .footer-inner { width: 92%; padding: 12px 8px; gap: 16px; }
  .footer-logo { width: 120px; }
  .footer-motto { font-size: 23px; padding: 10px; }
  .footer-social { padding: 5px 0; }
  .footer-social .socials { gap: 7px; }
  .footer-social .socials a { width: 30px; }
  .footer-social > strong { font-size: 14px; }
  .footer-shop { width: 100%; }
  .footer-shop .button { font-size: 13px; }
  .footer-shop h3 { font-size: 22px; }
}

/* Original supplied artwork, displayed as CSS sprites without modifying the files. */
.section-title h2::before {
  background-image: url('images/Untitled design - 2.png');
  background-repeat: no-repeat;
  background-size: 2532.258065% 5010.000000%;
  background-position: 32.493369% 20.875764%;
}
.section-title h2::after {
  background-image: url('images/Untitled design - 2.png');
  background-repeat: no-repeat;
  background-size: 2453.125000% 5010.000000%;
  background-position: 67.330677% 20.875764%;
}
.shopping .section-title h2::before {
  background-image: url('images/Untitled design - 2.png');
  background-repeat: no-repeat;
  background-size: 1869.047619% 3036.363636%;
  background-position: 20.726783% 38.854489%;
}
.shopping .section-title h2::after {
  background-image: url('images/Untitled design - 2.png');
  background-repeat: no-repeat;
  background-size: 1962.500000% 3036.363636%;
  background-position: 78.389262% 38.854489%;
}
.crown {
  background-image: url('images/Untitled design - 2.png');
  background-repeat: no-repeat;
  background-size: 1105.633803% 3853.846154%;
  background-position: 49.579832% 36.065574%;
}
.amazon-word {
  background-image: url('images/Untitled design - 2.png');
  background-repeat: no-repeat;
  background-size: 388.613861% 2822.535211%;
  background-position: 19.897084% 43.973099%;
}
.tiktok-word {
  background-image: url('images/Untitled design - 2.png');
  background-repeat: no-repeat;
  background-size: 295.112782% 2822.535211%;
  background-position: 85.356455% 43.817900%;
}
.logo-crop {
  background-image: url('images/Untitled design - 2.png');
  background-repeat: no-repeat;
  background-size: 1308.333333% 2822.535211%;
  background-position: 6.206897% 1.241593%;
}
.community-logo {
  background-image: url('images/Untitled design - 2.png');
  background-repeat: no-repeat;
  background-size: 436.111111% 1908.571429%;
  background-position: 18.016529% 78.936282%;
}
.join-line::after {
  background-image: url('images/Untitled design - 2.png');
  background-repeat: no-repeat;
  background-size: 1481.132075% 3340.000000%;
  background-position: 40.437158% 82.767490%;
}
.community::after {
  background-image: url('images/Untitled design - 2.png');
  background-repeat: no-repeat;
  background-size: 1060.810811% 2569.230769%;
  background-position: 96.343179% 82.710280%;
}
.footer-logo {
  background-image: url('images/Untitled design - 2.png');
  background-repeat: no-repeat;
  background-size: 659.663866% 1553.488372%;
  background-position: 9.609610% 99.680000%;
}
footer::before {
  background-image: url('images/Untitled design - 2.png');
  background-repeat: no-repeat;
  background-size: 1226.562500% 1577.952756%;
  background-position: 0.000000% 100.000000%;
}
footer::after {
  background-image: url('images/Untitled design - 2.png');
  background-repeat: no-repeat;
  background-size: 1226.562500% 1577.952756%;
  background-position: 100.000000% 100.000000%;
}
.people-art {
  background-image: url('images/Untitled design - 2.png');
  background-repeat: no-repeat;
  background-size: 163.541667% 564.507042%;
  background-position: 2.622951% 68.223166%;
}
.benefits > div:nth-child(1) > span {
  background-image: url('images/Untitled design - 2.png');
  background-repeat: no-repeat;
  background-size: 2121.621622% 6910.344828%;
  background-position: 8.021390% 54.430380%;
}
.benefits > div:nth-child(2) > span {
  background-image: url('images/Untitled design - 2.png');
  background-repeat: no-repeat;
  background-size: 2706.896552% 6910.344828%;
  background-position: 30.423280% 54.430380%;
}
.benefits > div:nth-child(3) > span {
  background-image: url('images/Untitled design - 2.png');
  background-repeat: no-repeat;
  background-size: 2907.407407% 6910.344828%;
  background-position: 53.693931% 54.430380%;
}
.benefits > div:nth-child(4) > span {
  background-image: url('images/Untitled design - 2.png');
  background-repeat: no-repeat;
  background-size: 2308.823529% 6910.344828%;
  background-position: 78.029294% 54.430380%;
}
.socials a[aria-label="TikTok"] {
  background-image: url('images/Untitled design - 2.png');
  background-repeat: no-repeat;
  background-size: 2180.555556% 5566.666667%;
  background-position: 49.532710% 97.256098%;
}
.socials a[aria-label="Instagram"] {
  background-image: url('images/Untitled design - 2.png');
  background-repeat: no-repeat;
  background-size: 2180.555556% 5566.666667%;
  background-position: 55.273698% 97.256098%;
}
.socials a[aria-label="Facebook"] {
  background-image: url('images/Untitled design - 2.png');
  background-repeat: no-repeat;
  background-size: 2180.555556% 5566.666667%;
  background-position: 61.148198% 97.256098%;
}
.socials a[aria-label="YouTube"] {
  background-image: url('images/Untitled design - 2.png');
  background-repeat: no-repeat;
  background-size: 2180.555556% 5566.666667%;
  background-position: 66.889186% 97.256098%;
}
.header-socials a[aria-label="TikTok"] {
  background-image: url('images/Untitled design - 2.png');
  background-repeat: no-repeat;
  background-size: 2907.407407% 7422.222222%;
  background-position: 84.300792% 1.820941%;
}
.header-socials a[aria-label="Instagram"] {
  background-image: url('images/Untitled design - 2.png');
  background-repeat: no-repeat;
  background-size: 2907.407407% 7422.222222%;
  background-position: 89.050132% 1.820941%;
}
.header-socials a[aria-label="Facebook"] {
  background-image: url('images/Untitled design - 2.png');
  background-repeat: no-repeat;
  background-size: 2907.407407% 7422.222222%;
  background-position: 93.799472% 1.820941%;
}

.socials a { color: transparent; font-size: 0 !important; background-color: transparent; border-radius: 0; }

.header-socials a { border-radius: 50%; }

/* Client review: live copy, quieter product cards, and a centered community invitation. */
.hero { background-image: url('images/2E2FFB37-FE51-4C0E-A4A0-6BF10B0DD53D.png'); }
.header { background: transparent; }
@media (min-width: 701px) {
  .hero { background-size: cover; }
  /* Fade the copy backdrop in below the transparent navigation. */
  .hero::before { mask-image: linear-gradient(to bottom, transparent 0%, transparent 12%, #000 32%); }
}
.hero::before { background: linear-gradient(90deg, #fffdf5 0%, #fffdf5ed 30%, #fffdf5b3 43%, transparent 62%); }
.hero-copy { padding-top: 3%; padding-bottom: 5%; }
.hero-copy h1 { font-size: clamp(32px, 4.6vw, 72px); line-height: 1.08; letter-spacing: -.025em; }
.hero-copy p { max-width: 36%; font-size: clamp(15px, 1.5vw, 22px); line-height: 1.55; margin: 20px 0 24px; }
.hero-copy::after { display: none; }
.products { margin-top: 32px; gap: 16px; }
.product { position: relative; padding: 30px 14px 18px; border-color: #eae7dc; border-radius: 12px; box-shadow: none; background: #fff; }
.product h3 { font-size: clamp(17px, 1.5vw, 22px); font-weight: 600; margin: 16px 0 10px; }
.product p { font-size: clamp(14px, 1.15vw, 17px); line-height: 1.55; color: #464b43; margin: 0 0 20px; }
.product button { margin-top: auto; padding: 10px 8px; font-size: 14px; }
.bestseller-badge { position: absolute; top: 10px; left: 12px; border-radius: 20px; background: #edf4ed; color: #006735; padding: 5px 10px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.bundle-note { text-align: center; max-width: 620px; margin: 38px auto 26px; padding: 28px 20px; border-block: 1px solid #e6e2d5; }
.bundle-note h3 { color: var(--green); font-size: clamp(21px, 2.3vw, 30px); font-family: 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: .055em; }
.bundle-note p { margin: 10px 0 12px; font-size: 16px; line-height: 1.6; }
.bundle-note > span { color: #656958; font-size: 12px; letter-spacing: .04em; }
.community { display: block; margin: 28px auto 36px; padding: 35px 20px; background: #faf9f3; }
.community-copy { max-width: 650px; margin: auto; padding: 0; }
.community-logo { width: 150px; margin-bottom: 22px; }
.community h2 { font-size: clamp(48px, 6vw, 80px); }
.community-copy > p { font-size: 20px; line-height: 1.5; margin: 22px 0; }
.community::after, .join-line::after { display: none; }
.community form { max-width: 480px; }
@media (max-width: 1000px) and (min-width: 701px) {
  .header nav { gap: 18px; left: 36%; }
  .products { gap: 8px; }
  .product { padding-inline: 9px; }
}
@media (max-width: 700px) {
  .hero-copy { padding: 16px 0 345px; }
  .hero-copy h1 { font-size: clamp(32px, 8.2vw, 56px); }
  .hero-copy p { max-width: 360px; font-size: 16px; margin: 16px 0 20px; }
  .products { gap: 12px; margin-top: 24px; }
  .product p { min-height: 0; }
  .product-picture { width: 100%; }
  .bundle-note { margin-block: 28px; padding: 24px 10px; }
  .community { padding: 30px 6%; }
}