/* fontss */


/* =========================
   Intelo Font Family
   ========================= */

@font-face {
    font-family: "Intelo";
    src: url("../fonts/intelo-font/Intelo-Hairline.woff2") format("woff2");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Intelo";
    src: url("../fonts/intelo-font/Intelo-HairlineItalic.woff2") format("woff2");
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Intelo";
    src: url("../fonts/intelo-font/Intelo-Thin.woff2") format("woff2");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Intelo";
    src: url("../fonts/intelo-font/Intelo-ThinItalic.woff2") format("woff2");
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: "Intelo";
    src: url("../fonts/intelo-font/Intelo-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Intelo";
    src: url("../fonts/intelo-font/Intelo-LightItalic.woff2") format("woff2");
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: "Intelo";
    src: url("../fonts/intelo-font/Intelo-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Intelo";
    src: url("../fonts/intelo-font/Intelo-Italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: "Intelo";
    src: url("../fonts/intelo-font/Intelo-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Intelo";
    src: url("../fonts/intelo-font/Intelo-MediumItalic.woff2") format("woff2");
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: "Intelo";
    src: url("../fonts/intelo-font/Intelo-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Intelo";
    src: url("../fonts/intelo-font/Intelo-SemiBoldItalic.woff2") format("woff2");
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: "Intelo";
    src: url("../fonts/intelo-font/Intelo-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Intelo";
    src: url("../fonts/intelo-font/Intelo-BoldItalic.woff2") format("woff2");
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: "Intelo";
    src: url("../fonts/intelo-font/Intelo-ExtraBold.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Intelo";
    src: url("../fonts/intelo-fontIntelo-ExtraBoldItalic.woff2") format("woff2");
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'Talina DEMO';
    src: url('../fonts/talina-demo/TalinaDEMO-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/* ============================================================  GLOBAL  ===== */
:root{
  /* Brand ----------------------------------------------------------------- */
  --cream:        #F7F3EC;   /* page + alternating section bg (Figma fill) */
  --white:        #ffffff;
  --coral:        #FA6A5F;   /* accent headings, stats band, next-button */
  --teal:         #007680;   /* primary CTA */
  --teal-dark:    #0A5757;

  --ink:          #383838;   /* headings + body on light */
  --ink-soft:     #565656;
  --muted:        #797979;   /* inactive nutrient rows */
  --line:         #DADADA;
  --line-dotted:  rgba(62,62,62,.35);
  --on-coral:     rgba(255,255,255,.92);

  /* Type ------------------------------------------------------------------
     "Talina DEMO" is the Figma display face and is not a webfont — Fredoka is
     the closest rounded geometric fallback. Swap in the licensed file when
     it lands and the stack keeps working. */
  --font-display: "Talina DEMO";
  --font-ui:      "Intelo", sans-serif;

  --h1-size:      clamp(36px, 4.2vw, 54px);
  --h2-size:      clamp(30px, 2.92vw, 42px);  /* Talina DEMO 42 at 1440 (Figma) */
  --h3-size:      clamp(18px, 1.5vw, 22px);
  --body:         15px;   --body-lh: 24px;
  --small:        13px;

  /* Layout ---------------------------------------------------------------- */
  /* Container maxes at 1920. The gutter formula resolves to exactly 60px at
     the 1440 design width — the inset Figma uses for the hero logo (X 60) and
     the footer columns — and scales to 80px at 1920, preserving the ratio. */
  --container:    1920px;
  --gutter:       clamp(20px, 4.1667vw, 60px);
  --section-y:    clamp(30px, 7.5vw, 60px);
  --header-h:     84px;
  --radius:       16px;
  --radius-lg:    28px;
  --ease:         cubic-bezier(.22,.61,.36,1);
}
/* Reset -------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-ui);
  font-size:var(--body);
  line-height:calc(var(--body-lh) / var(--body));
  color:var(--ink);
  background:var(--cream);
  overflow-x:hidden;
}
img,svg,video{ display:inline-block; max-width:100%; }
img{height: initial;}
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
figure,figcaption{ margin:0; }
address{ font-style:normal; }
:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; }
/* Helpers ------------------------------------------------------------------ */
.container{
  width:100%; max-width:var(--container);
  margin-inline:auto; padding-inline:var(--gutter);
}
.section{ padding-block:var(--section-y); }
/* Anchor targets. The header turns fixed once the hero has scrolled past, so a
   jump from the nav would otherwise land the section's top underneath it. */
section[id],
footer[id]{ scroll-margin-top:var(--header-h); }
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.no-scroll{ overflow:hidden; }
/* A hairline coral rule the design uses as a "keep scrolling" marker. */
.scroll-rule{
  display:block; width:2px; height:91px; margin:0 auto;
background-color: #F4EDE3;
position: relative;
}
.scroll-rule::after{
  content: "";
  position: absolute;
  bottom: 0;
  width: 2px;
  height: 32px;
  background-color: #FA6A5F;
}
/* Headings ----------------------------------------------------------------- */
.heading{
  font-family:var(--font-display);
  font-weight:400;
  font-size:var(--h2-size);
  line-height:1.16;
  letter-spacing:1.1px;
  color:var(--ink);
}
.heading--center{ text-align:center; }
.heading--light{ color:var(--white); }
.heading__accent{ color:var(--coral); }
.heading__accent--block{ display:block; }
/* Buttons ------------------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:48px; padding-inline:22px;
  border-radius:999px;
  font-size:15px; font-weight:400; letter-spacing:.01em; white-space:nowrap;
  transition:background-color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover{ transform:translateY(-1px); }
.btn--teal{ background:var(--teal); color:var(--white); }
.btn--teal:hover{ background:var(--teal-dark); }
.btn--lg{ height:56px; padding-inline:32px; font-size:15px; }
.btn__dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.btn__arrow{
  display:grid; place-items:center; width:30px; height:30px; margin-right:-14px;
  border-radius:50%; background:rgba(255,255,255,.18);
}
.btn__arrow svg{ width:15px; height:15px; }
@keyframes splash-bead{
  0%   { transform:translateY(0);    opacity:0; }
  30%  { opacity:1; }
  100% { transform:translateY(16px); opacity:0; }
}
@keyframes tab-in{
  from{ opacity:0; transform:translateY(10px); }
  to  { opacity:1; transform:none; }
}
@keyframes card-in-right{
  from{ opacity:0; transform:translateX(26px); }
  to  { opacity:1; transform:none; }
}
@keyframes card-in-left{
  from{ opacity:0; transform:translateX(-26px); }
  to  { opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}
@media (max-width: 991px){
  header:has(nav.is-open) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
}

/* ============================================================  REVEAL  ===== */
/*
   A lift-and-fade as things come into view. The class is added by JS, so with
   no JS — or under reduced motion — nothing is ever hidden.

   Only opacity and transform, so nothing reflows and no measurement changes.
   The elements it is applied to are picked by hand in initReveal() rather than
   by a blanket selector: anything that already carries a transform, is placed
   by script, or is measured by a slider is left alone.
   ------------------------------------------------------------------------- */
.reveal{
  opacity:0; transform:translateY(20px);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.is-revealed{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; }
}

/* ============================================================  SPLASH  ===== */

/* Shown ONLY while the splash is actually running. Left visible by default it
   is a full-screen cream sheet at z-index 60 — on the second load, where JS
   returns early and never removes the node, it covered the whole page. */
.splash{ display:none; }
.is-splashing .splash{
  position:fixed; inset:0; z-index:60;
  display:grid; place-items:center;
  background:var(--cream);
  transition:opacity .5s var(--ease) .35s, visibility .5s .35s;
}

.is-splashing{ --splash-disc:min(530px, 78vw, 58vh); }
.splash__disc{
  position:absolute; top:50%; left:50%;
  width:var(--splash-disc); height:var(--splash-disc);
  margin:calc(var(--splash-disc) / -2) 0 0 calc(var(--splash-disc) / -2);
  border-radius:50%;
  background:#EFE7D8;
}
.splash__wordmark{
  position:relative;
  width:min(1211px, 84vw); height:auto;   /* comp: 1211 of 1440 */
}
/* Comp: copyright on the gutter at x 60, socials ending on 1380, the scroll
   cue centred — the same row the hero used to carry. */
.splash__foot{
  position:absolute; inset:auto 0 clamp(18px, 2.6vw, 34px);
  width:100%; max-width:var(--container);
  margin-inline:auto; padding-inline:var(--gutter);
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-soft);
}
.splash__social{ display:flex; gap:20px; }
.splash__scroll{
  position:absolute; left:50%; bottom:0; translate:-50% 0;
  display:grid; justify-items:center; gap:10px;
}
/* The little mouse: a 22x36 pill with a bead that drifts down inside it. */
.splash__mouse{
  position:relative;
  width:22px; height:36px;
  border:1px solid var(--line); border-radius:999px;
}
.splash__mouse::after{
  content:""; position:absolute; top:7px; left:50%;
  width:3px; height:3px; margin-left:-1.5px;
  border-radius:50%; background:var(--coral);
  animation:splash-bead 1.6s var(--ease) infinite;
}
/* Held up over the splash and clipped back to the comp's 450 circle — sized
   off the disc so the pair keeps its 450:530 proportion as the disc is capped.
   0.4245 is 450 / 530 / 2, the radius as a fraction of the disc's diameter. */
.is-splashing .hero__media{
  z-index:61;
  clip-path:circle(calc(var(--splash-disc) * 0.4245) at 50% 50%);
}
.is-splashing .hero__media::after{ opacity:0; }
/* Everything the comp fades in only once the circle has opened. */
.is-splashing .header,
.is-splashing .hero__body,
.is-splashing .hero__foot{ opacity:0; }
.is-splash-open .hero__media{
  /* 75% of the diagonal clears the corners at any aspect ratio. */
  clip-path:circle(75% at 50% 50%);
  transition:clip-path 1.25s cubic-bezier(.16,.84,.34,1);
}
.is-splash-open .hero__media::after{ transition:opacity .6s var(--ease) .5s; opacity:1;}
.is-splash-open .splash{ opacity:0; visibility:hidden; }
.is-splash-open .header,
.is-splash-open .hero__body,
.is-splash-open .hero__foot{
  opacity:1; transition:opacity .6s var(--ease) .45s;
}
/* Narrow screens stack the row the way the comp does: the scroll cue on top,
   then the socials, then the copyright, all centred. */
@media (max-width: 767px){
  .splash__foot{
    flex-direction:column; align-items:center; gap:16px;
    text-align:center;
  }
  /* DOM order is copyright, scroll, socials — reordered here so the column
     reads scroll, socials, copyright the way the comp stacks it. */
  .splash__scroll{ position:static; translate:none; order:-1; }
  .splash__social{ order:0; gap:14px; }
  .splash__copyright{ order:1; }
}
/* Nothing to open out of if the visitor asked for less movement. */
@media (prefers-reduced-motion: reduce){
  .splash{ display:none; }
}

/* ============================================================  HEADER  ===== */
.header{
  position:absolute; inset:0 0 auto; z-index:999;
  height:var(--header-h);
  display:flex; align-items:center;
  transition:background-color .3s var(--ease), box-shadow .3s var(--ease);
}
/* Turns solid once the hero has scrolled past. */
.header.is-stuck{
  position:fixed;
  background:rgba(247,243,236,.94);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--line);
}
.header__inner{
  width:100%; max-width:var(--container);
  position: relative;
  margin-inline:auto; padding-inline:var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.header__logo img{ height:40px; width:auto; }
.header.is-stuck .header__logo img{ filter:none; }
.orange-logo{display: none;}
.is-stuck .orange-logo{display: inline-block;}
.is-stuck .whitelogo{display: none;}
.nav__list{ display:flex; align-items:center; gap:24px; }
.nav__link{
  position:relative;
  font-size:15px; color:var(--white);
  font-weight: 400;
  opacity:.9; transition:opacity .2s var(--ease);
}
.nav__link:hover,
.nav__link.is-active{ opacity:1; }
.header.is-stuck .nav__link{ color:var(--ink); }
/* The nav sits in a translucent pill over the hero photograph. */
.nav{
  padding:16px 31px; border-radius:999px;
 background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.4) 100%);
backdrop-filter: blur(34px);

  transition:background-color .3s var(--ease), padding .3s var(--ease);
}
.header.is-stuck .nav{ background:transparent; backdrop-filter:none; padding:0; }
.nav-toggle{ display:none; }
.nav-toggle__bars{ display:grid; gap:5px; width:22px; }
.nav-toggle__bars span{
  height:2px; background:currentColor; border-radius:2px;
  transition:transform .25s var(--ease), opacity .2s var(--ease);
}
/* The burger becomes the close cross rather than a second control appearing —
   it is already in the top-right corner and already toggles. Bars are 2px on a
   5px gap, so 7px of travel puts the outer two on the middle one. */
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
/* Only ever shown under the mobile drawer — see the 991 block. */
.nav-toggle[aria-expanded="true"]{    position: fixed;
    right: 15px;}
.nav-backdrop{ display:none; }
.nav-close{ display:none; }

@media screen and (max-width:1199px) {

  .nav__link{font-size: 14px;}
  .nav__list{gap: 16px;}
}

@media (max-width: 1024px){
  .nav__list{gap: 8px;}
  .nav__link{font-size: 13px;}
}

@media screen and (min-width:991px) {

  .nav{position: absolute; left: 50%; transform: translateX(-50%);}
}

@media (max-width: 991px){
  header .nav{background: #fff !important;}
  .header .nav{padding: 20px !important;}
  .nav-toggle{ display:block; color:var(--white); }
  .header__logo{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
  }

  .header.is-stuck .nav-toggle{ color:var(--ink); }
  .header__cta{ display:none; }
  .nav{
    position:fixed; inset:0; z-index:999;
    display:none; padding:28px var(--gutter);
    border-radius:0; background:var(--cream); backdrop-filter:none;
    overflow-y:auto;width: 50%;
  }
  .nav.is-open{ display:block; }
  .nav__list{ flex-direction:column; align-items:flex-start; gap:4px; }
  .nav__link{ display:block; padding-block:12px; font-size:19px; color:var(--ink); }

  .nav-backdrop{
    display:block;
    position:fixed; inset:0; z-index:99;
    background:rgba(62,62,62,.3);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    opacity:0; visibility:hidden;
    transition:opacity .3s var(--ease), visibility .3s var(--ease);
  }
  .nav-backdrop.is-visible{ opacity:1; visibility:visible; }
  .nav-toggle[aria-expanded="true"]{ color:var(--white); }
  .nav-toggle{ position:relative; z-index:1000; }
  .nav-close{
    display:block; position:absolute; top:12px; right:12px;
    width:40px; height:40px; border-radius:50%;
    color:var(--ink);
    transition:background-color .2s var(--ease);
  }
  .nav-close::before,
  .nav-close::after{
    content:""; position:absolute; top:50%; left:50%;
    width:18px; height:2px; margin:-1px 0 0 -9px;
    background:currentColor; border-radius:2px;
  }
  .nav-close::before{ transform:rotate(45deg); }
  .nav-close::after{ transform:rotate(-45deg); }
  .nav-close:hover{ background:rgba(62,62,62,.07); }
}
@media (max-width: 767px){
  .nav{width: calc(100% - 100px);}
}

/* ==============================================================  HERO  ===== */
.hero{
  position:relative;
  min-height:100svh;
  display:grid; align-items:flex-end;
  color:var(--white);
  overflow:hidden;
}
.hero__media{ position:absolute; inset:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero__media picture{height: 100%;display: block;}
/* Scrim so the headline and header stay legible over any crop. */
.hero__media::after{content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 67.75%, #000000 100%);}

.hero-puppy-img{width: 560px; height: auto; position: absolute; top: 54%; left: 48%; transform: translate(-50%, -50%);}
.hero-puppy-img img{width: 100%; height: auto; display: block; object-fit: contain;}
.hero-banner-left-text{position: absolute; top: 50%; left: 50px; transform: translateY(-50%);}
.hero-banner-heading{font-family: "Talina DEMO"; font-size: 42px; font-weight: 400; line-height: 1.2;}
.hero-banner-right-text{position: absolute; top: 50%; right: 140px; transform: translateY(-50%); max-width: 236px;}
.hero-banner-right-text .hero-banner-heading{display: none;} 
.hero-banner-right-text p{font-size: 14px; font-weight: 400; line-height: 1.4; margin-bottom: 20px;}

.hero__body{
  position:relative; z-index:2;
  width:100%; max-width:var(--container);
  margin-inline:auto; padding: 15px;padding-bottom: 119px;
  padding-top:var(--header-h);
  text-align:center;
}
.hero__headline{
  position:relative;
  display:grid; place-items:center;
  justify-content: center; align-items: center;
  font-family:var(--font-display);
  font-weight:400; font-size:var(--h1-size); line-height:1.14;
}
/* All three lines stack; only .is-active is visible. */
.hero__line{
  grid-area:1 / 1;
  opacity:0; transform:translateY(14px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.hero__line.is-active{ opacity:1; transform:none; }
.hero__line em{ display:block; font-style:normal; color:var(--coral); }
.hero__foot{
  position:absolute; inset:auto 0 28px; z-index:2;
  width:100%; max-width:var(--container);
  margin-inline:auto; padding-inline:var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.hero__social{ display:flex; gap:20px; }
.hero__social a:hover{ color:var(--white); }

@media screen and (max-width:1400px) {

  .hero-banner-right-text{right: 100px;}
  .hero-banner-heading{font-size: 36px;}
}

@media screen and (max-width:1199px) {

  .hero-banner-right-text{right: 30px;}
  .hero-puppy-img{top: 50%; left: 50%; width: 500px;}
}

@media screen and (max-width:1024px) {

  .hero-banner-right-text{right: 10px;}
  .hero-banner-left-text{left: 20px;}
  .hero-banner-heading{font-size: 30px;}
  .hero-puppy-img{left: 48%; width: 330px;}
}

@media screen and (max-width:767px) {

  .hero-banner-right-text{right: inherit; left: 50%; transform: translate(-50%, 0); width: 100%; margin: auto; max-width: 310px; top: inherit; bottom: 20px; text-align: center;}
  .hero-banner-left-text{display: none;}
  .hero-banner-right-text .hero-banner-heading{display: block; margin-bottom: 10px;}
  .hero-banner-heading{font-size: 24px; text-align: center; width: 90%; margin: auto;}
  .hero-puppy-img{left: 47%; top: 40%; width: 90%; max-width: 400px;}
}


@media (max-width: 767px){
  .hero__body{padding-bottom: 39px;}
  .hero__foot{ display:none; }
  .hero{align-items: flex-end;padding-bottom: 40px;}
}

/* ==========================================================  PRODUCTS  ===== */
/* Circular slider arrows, shared by both carousels. Sits above the product
   slides, which are stacked from z-index 20 down. */
.circle-btn{
  position:absolute; top:50%; z-index:30;
  display:grid; place-items:center; width:32px; height:32px;
  border-radius:50%; background:var(--white); color:var(--ink);
  transform:translateY(-50%);
  transition:background-color .2s var(--ease), transform .2s var(--ease);
}

.circle-btn--prev{ left:0; }
.circle-btn--next{ right:0; }
.circle-btn:hover{ transform:translateY(-50%) scale(1.06);  }
.circle-btn svg path{ stroke:#383838; }
.circle-btn:hover svg path{ stroke:#383838; }
.circle-btn.is-disabled{ opacity:.35; pointer-events:none; }
.products{
  position:relative;
  background:var(--cream);
  overflow-x:clip;
}
/* --- Species toggle ------------------------------------------------------- */
.products .circle-btn{background-color: var(--coral);}
.products .circle-btn svg path{ stroke:var(--white); }
.products .circle-btn:hover svg path{ stroke:var(--coral); }
.products .circle-btn:hover{ background:var(--white); } 
.species{
  display:flex; gap:4px; width:max-content; margin:22px auto 0; padding:6px;
  border-radius:999px; background:var(--white);
}
.species__btn{
  display:grid; place-items:center; width:48px; height:48px;
  border-radius:50%;
  transition:background-color .25s var(--ease);
}
.species__btn:nth-of-type(2){display: none;}
.species__btn img{
  width:28px; height:28px;
  opacity:.4; transition:opacity .25s var(--ease), filter .25s var(--ease);
}
.species__btn.is-active{ background:var(--coral); }
/* The glyphs are exported as one dark colour; the active one is flipped white. */
.species__btn.is-active img{ opacity:1; filter:brightness(0) invert(1); }
.species__btn:hover img{ opacity:.7; }
.species__btn.is-active:hover img{ opacity:1; }
.products__stage{
  position:relative;
  margin-inline: auto;
  max-width:var(--container); margin-top: 54px;
  padding-inline:var(--gutter);
}
.products__badge{
    position: absolute;
    top: 10%;
    right: 5.5%;
    z-index: 5;
    width: 87px;
    height: 87px;
}
.products__head[hidden],
.products__panel[hidden]{ display:none; }
.products__head.is-entering,
.products__panel.is-entering{
  animation:tab-in .45s var(--ease);
}
.products__slider{ position:relative; touch-action:pan-y pinch-zoom; }
.products__track{
  position:relative;
  height:clamp(220px, 31vw, 447px);
}
.products__slide{
  pointer-events:none;
  position:absolute; left:0; bottom:0; width:100%; height:100%;
  display:grid; grid-template-rows:100%; place-items:end center;
  transform-origin:bottom center;
  transition:transform .7s var(--ease), opacity .7s var(--ease);
  will-change:transform, opacity;
  backface-visibility:hidden;
}
.products__link{
  display:block; height:100%; width:auto;
  pointer-events:auto;
  -webkit-user-drag:none;
  user-select:none;
  transition:opacity .2s var(--ease);
}
.products__link:hover{ opacity:.88; }
.products__slide img{ width:100%; height:100%; min-height:0; object-fit:contain; }
.product-card{
  position:absolute; top:48%; right:7.5%; z-index:2;
  width:28%;
  padding:28px 32px;
  border: 1px solid #E9E2DA;
  border-radius: 24px;
  transform:translateY(-50%);
  padding-left: 105px;
}
.product-card__eyebrow{ font-size:12px; font-weight: 400; color:var(--coral); }
.product-card__title{
  margin-top:6px;
  font-family:var(--font-display); font-weight:400; font-size:var(--h3-size); color: #383838;
}
.product-card__eyebrow,
.product-card__title{
  animation-duration:.55s;
  animation-timing-function:var(--ease);
  animation-fill-mode:backwards;
}
.product-card.is-next .product-card__eyebrow,
.product-card.is-next .product-card__title{ animation-name:card-in-right; }
.product-card.is-prev .product-card__eyebrow,
.product-card.is-prev .product-card__title{ animation-name:card-in-left; }
/* Title follows a beat behind the eyebrow. */
.product-card__title{ animation-delay:.07s; }
.product-card__label{
  margin-top:16px;
  font-size:12px; letter-spacing:.08em; font-weight: 400; text-transform:uppercase; color:#9C9386;
}
.product-card__copy{ margin-top:8px; font-size:14px; color:var(--ink-soft);  font-weight: 400;}
.product-card__more{ font-weight:600; color:var(--ink); }
.product-card__sizes{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.product-card__sizes li{
  padding:7px 16px; border:1px solid var(--line); border-radius:999px;
  font-size:12px; font-weight: 400; color: var(--ink-soft);
}
.ingredients__slider .circle-btn{ top:37%; background-color: var(--coral); transition: all 0.3s;}
.ingredients__slider .circle-btn svg path{stroke: var(--white); transition: all 0.3s;}
.ingredients__slider .circle-btn:hover{ background-color: var(--white);}
.ingredients__slider .circle-btn:hover svg path{stroke: var(--coral);}

.ingredients__slider .circle-btn--prev{ left:28.5%; }
.ingredients__slider .circle-btn--next{ right:28.5%; }
@media (min-width: 768px){
  .species{
    position:absolute; z-index:4; margin:0;
    top:clamp(24px, 5.5vw, 80px); right:var(--gutter);
  }
}

@media screen and (max-width:1380px) {

      .products__badge{top: 4%;}
}

@media screen and (max-width:1099px) {

      .products__badge{top: -13%;right: 2.5%;}
      .product-card{padding-left: 75px;}
}

@media (max-width: 767px){
  .ingredients__slider .circle-btn{ top:34.7%; }
  .ingredients__slider .circle-btn--prev{ left:4%; }
  .ingredients__slider .circle-btn--next{ right:4%; }
}
@media (min-width:992px){
  .benefits__nav.circle-btn--prev{ left:-22px; }
  .benefits__nav.circle-btn--next{ right:-22px; }
}
@media (max-width: 991px){
  .product-card{
    position:static; width:min(460px, 100%); margin:24px auto 0;
    transform:none; 
            padding: 25px;
  }
  .products__badge{ top: -40px; right: 30px; width: 75px; height: 75px;}
}
@media (max-width: 767px){
  .products__track{ height:52vw; }
  .product-card{
    width:100%; margin:-17vw auto 0;
    padding:27.8vw 20px 20px;
  }

  .products__badge{
    top:54.25vw; bottom:auto; right:7.25%; width: 65px; height: 65px;
  }
  .circle-btn{ width:38px; height:38px; }
}

/* =======================================================  INGREDIENTS  ===== */

/* The arc now runs to the foot of the track, so the section only needs enough
   padding to stop it touching the next one. */
.ingredients{
  background:var(--white); overflow: hidden; 
}
.ingredients .scroll-rule-wrapper{
  position:absolute; left:0; right:0; top:67%;
  margin-inline:auto;
}
.ingredients__stage{
  position:relative;
  max-width:var(--container); margin:clamp(24px, 7vw, 101px) auto 0;
}
.ingredients__slider{ position:relative; touch-action:pan-y pinch-zoom; }
.ingredients__track{
  position:relative;
  width:100%; aspect-ratio:100 / 35.5;
}
/* The fade lives on the stroke, not the element — an opacity here would put
   the arc on its own compositing layer and soften the dots. */
.ingredients__arc{
  position:absolute; left:0; top:22.35%; z-index:0;
  width:100%; aspect-ratio:5; overflow:visible;
  color:var(--coral);
  pointer-events:none;
}
/* Comp decoration. Positions are fractions of the track, read off the same
   screenshot the slot table came from. */
.ingredients__spark{
  position:absolute; z-index:1;
  width:clamp(15px, 2.4%, 34px); height:auto;
  pointer-events:none;
}
.ingredients__spark--a{ left:3%;    top:61.4%; transform: rotate(260deg); }
/* by the far-left card */
.ingredients__spark--b{ left:16.6%; top:15%;  transform: rotate(260deg);}
/* Beside the centre card, not on it — that one is the sharp, focal card. */
.ingredients__spark--c{ left:40.8%; top:-4%; transform: rotate(260deg);}
.ingredients__spark--d{ left:82%;   top:18.2%; transform: rotate(25deg); }
.ingredient{
  position:absolute; top:0; left:50%;
  width:15.2%; margin-left:-7.6%;     /* half its own width, so left:50% centres it */
  aspect-ratio:1;
  transition:transform .6s var(--ease), opacity .6s var(--ease), filter .6s var(--ease);
  will-change:transform, opacity;
  /* Everything but the centre card is soft, exactly as the comp has it. The
     slot number is written by main.js. */
  filter:blur(3px);
}
.ingredient[data-slot="0"]{ filter:none; }
.ingredient img{
  width:100%; height:100%; object-fit:cover;
  border-radius:12%;
}

.ingredient__caption{
  position:absolute; left:0; right:0; top:51.5%;
  display:grid; justify-items:center; gap:4px;
  text-align:center; pointer-events:none;
}
.ingredient__name{ font-size:clamp(16px, 1.4vw, 22px); font-weight:400; color: #222222; }
.ingredient__note{ font-size:clamp(11px, .9vw, 13px); color:#000000; font-weight:400; }
/* Mobile is far tighter — a lands on the caption and c on the centre card, so
   only the pair that stays clear is kept. */
@media (max-width: 767px){
  .ingredients__spark--a,
  .ingredients__spark--c, .ingredients__spark--d{ display:none; }
  .ingredients__spark--b {
    left: 27.6%;
    top: -4%;}
}
@media (max-width: 767px){
  .ingredients__track{ aspect-ratio:100 / 75; }
  .ingredient{ width:32%; margin-left:-16%; }
  /* aspect-ratio stays 5, the same as the viewBox. Overriding it stretched the
     curve vertically and the parabola started reading as a V. */
  .ingredients__arc{ top:21.3%; }
  .ingredient__caption{ top:49.3%; }
  .ingredients .scroll-rule{ top:74.4%; height:60px; }
}

/* =========================================================  NUTRITION  ===== */
.nutrition{ position:relative; height:320vh; background:var(--cream); }
.nutrition__sticky{
  position:sticky; top:0;
  height:100svh; display:grid; align-items:center;
  /* padding-top:var(--header-h); */
  overflow:hidden;
}
.nutrition__grid{
  display:grid; align-items:center;
  grid-template-columns:1fr 1.4fr 1fr;
  grid-template-rows:auto auto;
  gap:clamp(16px, 3vw, 48px);
}
.nutrition__step{ grid-column:1; grid-row:1 / span 2; }
.nutrients{ grid-column:3; grid-row:1 / span 2; }
.nutrition__step{
  display:flex; align-items:center; gap:12px;
  font-size:15px; color:var(--coral);
}
.nutrition__step-rule{ width:46px; height:1px; background:currentColor; }
.nutrition__step-label{ color:var(--ink); }
.nutrition__bowl{
  position:relative; grid-column:2; grid-row:2;
  width:min(100%, 44vh); margin-inline:auto;
}
/* State one. Shares row 1 with .nutrition__intro so the two cross-fade in
   place, which is what the comp shows either side of the scroll. */
.nutrition__head{
  grid-column:2; grid-row:1;
  align-self:end; justify-self:center;
  display:grid; justify-items:center; gap:20px;
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.nutrition__head.is-gone{ opacity:0; transform:translateY(-18px); pointer-events:none; }
.nutrition__head .scroll-rule{ height:clamp(40px, 6vw, 74px); }
.nutrition__bowl-img{ width:100%; height:auto; }
/* Full bowl is revealed bottom-up as the section progresses. */
.nutrition__bowl-img--full{
  position:absolute; inset:0;
  clip-path:inset(calc(100% - var(--fill, 0%)) 0 0 0);
  transition:clip-path .25s linear;
}
.nutrition__scribble{
  position:absolute; left:-18%; bottom:10%;
  display:grid; justify-items:start; gap:2px;
  width:clamp(96px, 11vw, 150px);
}
.nutrition__scribble-arrow{ width:46px; margin-left:34px; }
.nutrients{ display:grid; gap:clamp(14px, 2.2vw, 26px); }
.nutrient{
  display:flex; align-items:flex-start; gap:14px;
  color:var(--muted);
  transition:color .45s var(--ease), opacity .45s var(--ease);
  opacity:.55;
}
.nutrient.is-active{ color:var(--ink); opacity:1; }
/* Exported from Figma at their natural sizes (41x38..41x44); the row keeps a
   fixed 32px box so the four names stay on one baseline grid. */
.nutrient__dot{
  flex:0 0 auto; width:32px; height:auto; margin-top:2px;
  filter:saturate(.2) opacity(.55);
  transition:filter .45s var(--ease);
}
.nutrient.is-active .nutrient__dot{ filter:none; }
.nutrient__name{ display:block; font-size:17px; font-weight:600; }
.nutrient__copy{ display:block; margin-top:2px; font-size:13px; }
/* The closing copy fades up once the bowl is full. */
.nutrition__intro{
  grid-column:2; grid-row:1;
  align-self:end; justify-self:center;
  display:grid; justify-items:center; gap:18px;
  opacity:0; transform:translateY(18px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
  pointer-events:none;
}
.nutrition__intro.is-visible{ opacity:1; transform:none; pointer-events:auto; }
.nutrition__lede{ text-align:center; color: #383838; font-size: 15px; font-weight: 400; line-height: 1.2; }
@media (max-width: 991px){
  .nutrition__grid{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto auto;
    justify-items:center; gap:clamp(14px, 3vw, 28px);
  }
  .nutrition__head,
  .nutrition__intro{ grid-column:1; grid-row:1; align-self:start; }
  .nutrition__step{ grid-column:1; grid-row:2; }
  .nutrition__bowl{ grid-column:1; grid-row:3; }
  .nutrients{ grid-column:1; grid-row:4; }
  .nutrition{ height:280vh; }
}
@media (max-width: 991px){
  /* The comp runs the nutrients across on a phone, dot above the name, and
     lets the row scroll rather than squeezing four columns into 390. */
  .nutrients{
    width:100%;
    grid-auto-flow:column; grid-auto-columns:minmax(148px, 1fr);
    gap:18px;
    overflow-x:auto; overscroll-behavior-x:contain;
    padding-bottom:6px;
    scrollbar-width:none;
  }
  .nutrients::-webkit-scrollbar{ display:none; }
  .nutrient{ flex-direction:column; align-items:flex-start; gap:10px; }
  /* Narrower again on a phone — the stage has the same four rows to fit into a
     much shorter pane, and the bowl is the piece with room to give. */
  .nutrition__bowl{ width:min(74%, 44vh); }
}

/* ==========================================================  BENEFITS  ===== */
/*
   Measured off the comp, as fractions of a card's width: shield 1.124 tall
   with a 0.15 notch, icon circle 0.485 across sitting on the shield's top
   edge. Percentages so the whole badge scales with the column.
   ------------------------------------------------------------------------- */
.benefits{
  background:var(--cream);
  --benefit-overhang:88px;
}
.benefits__stage{ position:relative; }
.benefits__slider{
  padding-top:var(--benefit-overhang);
  margin-top:clamp(20px, 3.1vw, 55px);
}
/* .benefits__nav{ display:none; } */
.benefits__nav{background-color: var(--coral); transition: all 0.3s;}
.benefits__nav svg path{stroke: var(--white); transition: all 0.3s;}
.benefits__nav:hover{background-color: var(--white);}
.benefits__nav:hover svg path{stroke: var(--charcoal);}


.benefits__grid{ align-items:flex-start; height: auto;}
.benefits__grid > .swiper-slide{ height:auto; }
.benefit{
  position:relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  aspect-ratio:290 / 340;
  padding: 94px 25px 91px;                 
  text-align:center;
  max-height: 320px;
  width: 100%;
}
.benefit__shield{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  pointer-events:none;
}
.benefit__icon{
  position:absolute; top:0; left:50%; z-index:2;
  /* The circle's centre sits exactly on the shield's top edge. */
  translate:-50% -50%;
  width:130px; aspect-ratio:1;
  display:grid; place-items:center;
  border-radius:50%;
  border: 1px dashed #BBB1A4;
  background: #007680;
  /* Solid ring, not a glow — it masks the shield's top edge behind the circle. */
    box-shadow: 0 0 0px 10px  #FCF9F3;
}
.benefit__icon img{ width: 63px; height: 63px; object-fit: contain; }
.benefit__title{
  position:relative; z-index:1;
  font-size: 24px;  
  line-height:1.3;
  color:var(--teal);
}
.benefit__copy{
  position:relative; z-index:1;
  margin-top: 16px;
  font-size: 16px; 
  line-height:1.5;
  color:#383838; font-weight: 400;
}
@media (min-width:992px){
  .benefits__nav{ display:grid; top:calc(50% + var(--benefit-overhang) / 2); }
  .benefits__nav.swiper-button-lock{ display:none; }
}

@media (max-width: 991px) {

  .benefit__title{font-size: 20px;}
  .benefit__copy{font-size: 14px;}

}
@media (max-width: 767px){
  .benefits__slider{
    margin-inline:calc(var(--gutter) * -1);
    width:calc(100% + var(--gutter) * 2);
  }
  .benefit{
    padding-top: 90px;
    aspect-ratio: 290 / 260;
    max-height: 300px;
    width: 100%;
  }
  .benefit__icon{
    width: 100px;
  }
  .benefit__icon img{width: 50px; height: 50px;}
}

@media screen and (max-width:480px) {

  .benefit__title{font-size: 18px;}
  .benefit__copy{font-size: 13px;}
  .benefit{aspect-ratio: 290 / 350;}
}




/* ============================================================  FREEZE  ===== */
.freeze{ background:var(--white); }
/* Comp: the heading owns the left ~45%, the copy sits in the third after it,
   and the last quarter of the row stays empty. space-between put the copy
   flush against the container's right edge, which is not where it belongs. */
.freeze__head{
  display:grid;
  /* Figma: heading at x 60, copy at x 617 width 410, in a 1440 frame — i.e.
     42.2% and 31.1% of the 1320 content width. */
  grid-template-columns:minmax(0, 42.2%) minmax(0, 31.1%);
  align-items:start;
}
.freeze__copy{
  max-width:410px; margin-top:4px;
  font-size:15px; line-height:1.6; color:#383838;
}
.freeze__diagram{ margin-top:clamp(40px, 6vw, 72px); }
/* The diagram frame in the comp is 1285x485. Holding that ratio is what keeps
   every percentage below — bowl, dots, labels — pinned to the same geometry the
   SVG wires are drawn in, so the whole thing scales as one piece.
   inline-size containment gives the labels a cqi to size against: the stage's
   own width, not the viewport, which is wider than the stage above 1285. */
/* 1320 x 405 is the diagram area of the 1440x702 Figma frame: 1440 less the
   60px gutters either side, and the band from the top of the bowl (y 253) to
   its foot (y 652). Every number below is that frame's own coordinate less
   (60, 250), so the layout is the design at 1:1 on a 1440 viewport. */
.freeze__stage{
  position:relative;
  width:100%; max-width:1320px; margin-inline:auto;
  aspect-ratio:1320 / 405;
  container-type:inline-size;
}
/* Deliberately NOT a stacking context — no z-index here — so the dots inside
   can still be lifted above .freeze__wires, which is its sibling. */
/* Figma puts the image at (422, 253) in the frame at its natural 598x399 —
   i.e. 1:1, not scaled. 422-60 = 362 of 1320, 253-250 = 3 of 405. */
.freeze__bowl-wrap{
  position:absolute; left:27.42%; top:0.74%;
  width:45.30%;
}
.freeze__bowl{ position:relative; z-index:1; display:block; width:100%; height:auto; }
/* Over the bowl — the last stretch of each wire crosses onto it — but under the
   dots, so every path's end is capped by the dot that owns it. */
.freeze__wires{
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%;
  overflow:visible; pointer-events:none;
}
/* Percentages of the BOWL, not the stage, so they hold when the wrap drops out
   of absolute positioning on mobile. 6.18% is the design's 35px against its
   566px bowl, so the ratio holds at every width and still resolves to the
   asset's native 35px at the 1320 design size. The floor stops the 1px outer
   coral ring disappearing into antialiasing on the narrowest desktop widths. */
.freeze__dot{
  position:absolute; left:var(--x); top:var(--y); z-index:3;
  width:clamp(16px, 5.85%, 35px); height:auto;
  transform:translate(-50%, -50%);
  pointer-events:none;
}
/* Only a wrapper above 767 — the labels place themselves against the stage.
   Swiper's own classes are kept off it until main.js needs them, so none of
   Swiper's CSS (overflow:hidden especially) reaches the desktop layout. */
.freeze__labels{ position:static; }
.freeze__labels .swiper-wrapper{ display:block; position:static; transform:none; height: auto;}
/* --y is the connector's line, which meets the label's FIRST line, not its
   middle — so the block is lifted by half of that line box (1.5em / 2). */
/* Two-class selector throughout: Swiper's .swiper-backface-hidden .swiper-slide
   also lands at 0,2,0 and would otherwise beat this rule's transform with its
   own translateZ(0), dropping every label out of line with its wire. */
.freeze__labels .freeze__label{
  position:absolute; top:var(--y); z-index:4;
  /* height:auto undoes Swiper's .swiper-slide{height:100%}. Left standing it
     resolves to the whole stage, and translateY(-50%) then drops every label
     half a stage down. */
  width:max-content; height:auto; margin:0;
  /* Centred on the connector rather than hung off its first line: these run
     one, two and three lines long, and only centring keeps all six sitting on
     their wire the same way. */
  transform:translateY(-50%);
  font-size:14px;
  font-size:clamp(11px, 1.06cqi, 15px);   /* 14px at the 1320 design width */
  line-height:1.5; color:#000;
  text-align:left;
}
/* Left labels hang off their RIGHT edge so the run-in to the connector is the
   same ~20px the right-hand column has. Anchored on the left instead, the box
   was wider than its text and left a ragged 50px before the wire started. */
.freeze__label--l{ right:var(--edge); }
.freeze__label--r{ left:var(--edge); }
/* The bottom pair hangs UNDER its connector rather than beside it: the wire
   runs out from the dot and turns down, and the label sits below that drop.
   So --y is their top edge, not the line they centre on. */
.freeze__labels .freeze__label--below{ transform:none; }
/* Row/side coordinates. These are here rather than on the elements because
   Swiper's destroy(cleanStyles) removes a slide's style attribute outright. */
/* Every label is anchored by its LEFT edge, the way Figma places them: its text
   boxes are a fixed width with the text left-aligned inside, so the box's right
   edge is not where the text ends and anchoring on it pushed the left-hand two
   ~64px right, squashing their connectors. */
.freeze__label:nth-child(1){ --y:8.89%;  --edge:17.95%; }
.freeze__label:nth-child(2){ --y:6.91%;  --edge:65.30%; }
.freeze__label:nth-child(3){ --y:32.96%; --edge:13.56%; }
.freeze__label:nth-child(4){ --y:29.01%; --edge:74.77%; }
/* --below: --y is the top edge and --edge the left, both from the frame. */
.freeze__label:nth-child(5){ --y:57.78%; --edge:13.79%; }
.freeze__label:nth-child(6){ --y:53.58%; --edge:75.38%; }

@media (max-width: 991px){
  .freeze__head{ grid-template-columns:1fr; gap:16px; }
  .freeze__copy{ max-width:560px; }
}
@media (max-width: 767px){
  /* No room for the callouts: the stage gives up its geometry, the bowl keeps
     its dots, and the six labels become a slider underneath. */
     .freeze__labels .freeze__label br{
      display: none;
     }
  .freeze__stage{
    aspect-ratio:auto; container-type:normal;
    display:block;
  }
  .freeze__wires{ display:none; }
  /* Stays relative — it is still the containing block for the dots. */
  .freeze__bowl-wrap{
    position:relative; left:auto; top:auto;
    width:100%; max-width:360px; margin-inline:auto;
  }
  /* Proportional to the smaller bowl; 35px here reads twice as heavy as it
     does against the 650px bowl at the design width. */
  .freeze__dot{ width:20px; height:20px; }

  .freeze__labels{ margin-top:22px; }
  .freeze__labels .swiper-wrapper{ display:flex; }
  .freeze__labels .freeze__label{
    position:static; width:auto; transform:none;
    font-size:12.5px;
    opacity:.4; transition:opacity .3s var(--ease);
  }
  .freeze__labels .freeze__label.swiper-slide-active{ opacity:1; }
}

/* =============================================================  STATS  ===== */

.stats{
  padding-block:clamp(40px, 4.03vw, 58px) 0;
  background:var(--coral); color:var(--white);
  overflow:hidden;
}
.stats .heading{
  max-width:640px; margin-inline:auto;   /* larger than the page h2 in the comp */
}
.stats__grid{
  display:grid;
  grid-template-columns:minmax(0,251fr) minmax(0,684fr) minmax(0,251fr);
  align-items:start;
  max-width:1186px; margin:clamp(40px, 4.58vw, 66px) auto 0;
}
.stats__col{ display:grid; gap:0; align-content:start; }
.stat{ min-height:clamp(180px, 17.6vw, 253px); }
.stat__value{ font-size:clamp(46px, 5.55vw, 80px); font-weight:400; line-height:1; white-space:nowrap; }
.stat__label{ margin-top:10px; font-size:14px; font-weight:400; color: var(--white); }
.stat__copy{
  margin-top:16px; padding-top:16px;
  border-top:1px dotted var(--white);
  font-size:13px; font-weight: 400; line-height:1.3; color:var(--white);
}
.stats__figure{
  position:relative; align-self:end;
  width:100%; max-width:552px; margin:10px auto 0;
}
/* The disc is the photo's own width and carries on below the band. */
.stats__photo{ position:relative; z-index:1; display:block; width:100%; height:auto; }
/* Sits over her shoulder at the photo's top edge. */
.stats__heart{
  position:absolute; z-index:2; left:52%; top:-30px;
  width:16.1%; height:auto;
}
@media (max-width: 991px){
  .stats{ padding-bottom:0; }
  .stats .heading{ max-width:none;  margin-inline:0; }
  .stats__grid{ grid-template-columns:1fr; max-width:none; row-gap:clamp(26px, 5vw, 40px); }
  .stats__col{ gap:clamp(26px, 5vw, 40px); }
  .stat{
    min-height:0;
    display:grid; grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
    column-gap:clamp(14px, 4vw, 28px); align-items:start;
  }
  .stat__value{ grid-column:1; grid-row:1; }
  .stat__label{ grid-column:1; grid-row:2; }
  .stat__copy{
    grid-column:2; grid-row:1 / span 2;
    padding-left: 14px;
    border-left: 1px dashed #FFFFFF;
    margin-top:6px; padding-top:0; border-top:0;
  }
  .stats__figure{ order:1; margin-top:clamp(24px, 6vw, 48px); max-width:min(420px, 92%); }
}
@media (max-width: 991px){
   .stat__value{
    font-size: 38px
   }
}

/* ============================================================  FAMILY  ===== */


.family{ background:var(--white); overflow:hidden; }
.family__lede{ margin-top:15px; text-align:center; font-weight:400; color: #000000; line-height: 1.3; }
.family__split{
  position:relative;
  height:34vw;
  margin-top:2.8vw;
}

.family__panel{
  position:absolute; top:0;
  width:35.97vw; height:30.97vw;   /* 518 x 446 of 1440 */
  margin:0;
  translate:0 0; rotate:0deg;
  transition:translate 1s var(--ease), rotate 1s var(--ease);
}
.family__panel img{
  width:100%; height:100%; object-fit:cover;
  border-radius:clamp(10px, 1.7vw, 24px);
}

.family__panel--left{  right:50%; margin-right:0.49vw; }
.family__panel--left img{ object-position:right center; }
.family__panel--right{ left:50%; margin-left:0.49vw; }
.family__panel--right img{ object-position:left center; }
.family__split.is-armed .family__panel--left{  translate:-76.7% -14.7%; rotate:-15deg; }
.family__split.is-armed .family__panel--right{ translate:85.8% -14.7%;  rotate:15deg; }
.family__split.is-armed.is-in .family__panel{ translate:0 0; rotate:0deg; }
.family__heart{
  position:absolute; top:45%; left:50%; transform:translate(-50%,-50%);
  width:clamp(48px, 6.6vw, 95px); height:auto;
}
@media (max-width: 991px){
  /* The comp brings the pair inboard on narrow screens — they meet either side
     of the heart instead of hanging off the frame edges. */
  .family__split{ height:42vw; }
  .family__panel{ top:0; width:44vw; height:38vw; }
  .family__panel--left{  margin-right:1vw; }
  .family__panel--right{ margin-left:1vw; }
}
@media (max-width: 767px){
  /* Same composition, just tighter — the heart stays between the two. */
  .family__split{ height:44vw; }
  .family__panel{ top:0; width:45vw; height:40vw; }
  .family__panel--left{  margin-right:1vw; }
  .family__panel--right{ margin-left:1vw; }
}

/* =============================================================  STORY  ===== */
.story{ position:relative;  overflow:hidden; }
.story__bg{ width:100%; height:100%; min-height:inherit; object-fit:cover; }
.story__lines{
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding-inline: var(--gutter);
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 80px;
}
.story__line{
  grid-area:1 / 1;
  /* max-width:14ch;  */
  text-align:center;
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(30px, 3.6vw, 52px); line-height:1.16;
  color:var(--white); text-shadow:0 2px 24px rgba(0,0,0,.28);
  opacity:0; transform:translateY(12px);
  letter-spacing: 1.1px;
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.story__line.is-active{ opacity:1; transform:none; }
.story__line span{display: inline-block;    color: var(--coral);}
@media (max-width: 991px){
  .story__line{max-width: 100%;}
}
/* ===============================================================  CTA  ===== */

.cta{
  position:relative;
  padding-block:clamp(56px, 11.25vw, 162px) clamp(44px, 5.76vw, 83px);
  background:var(--cream);
  overflow:hidden;
}
.cta__inner{ display:grid; justify-items:center; gap:clamp(26px, 4.86vw, 70px); text-align:center; }
.cta__title{
  position:relative;
  max-width:740px;
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(28px, 4.45vw, 60px); line-height:1.04;
  text-transform:uppercase; letter-spacing:.005em;
}

.cta__sparkle{
  position:absolute; left:-4.2%; top:.08em;
  width:clamp(14px, 1.9vw, 27px); height:auto;
  transform: rotate(260deg);
}
.cta__accent{ display:block; color:var(--coral); }
.cta__accent img{ display:inline-block; width:clamp(24px, 2.6vw, 38px); vertical-align:-.06em; }

.cta__photo{
  position:absolute;
  border-radius:clamp(10px, 1.4vw, 20px);
  object-fit:cover;
}
.cta__photo--left{
  left:-3.16vw; top:3.32vw;
  width:324px; height:302px;
  rotate:-15deg;
}
.cta__photo--right{
  right:-2.87vw; top:21.08vw;
   width:324px; height:302px;
  rotate:15deg;
}
.cta .scroll-rule{ margin-top:clamp(40px, 6.7vw, 97px); }

@media (max-width: 1350px){
.cta__photo--left{
  left:-3.16vw; top:3.32vw;
  width:250px; height:250px;
}
.cta__photo--right{
  right:-2.87vw; top:21.08vw;
   width:250px; height:250px;
}
}
@media (max-width: 1280px){
  .cta__title{
    font-size: 40px;
  }
  .cta__title{
    max-width: 500px;
  }
}
@media (max-width: 991px){
   .cta__title{
    font-size: 20px;
  }
  .cta{ padding-block:200px 140px }
  .cta__photo--left{  left:-6vw; top:3vw;   width:138px; height:129px; }
  .cta__photo--right{ right:-5vw; top:auto; bottom:2vw; width:138px; height:129px; }
}

/* ============================================================  FOOTER  ===== */
.footer{ padding-top:clamp(40px, 3.5vw, 44px); background:var(--white); }
.footer__grid{ display:grid; }
.footer__title{ font-size:18px; font-weight:400; color: var(--ink-soft); }
.footer__copy{ margin-top:12px; max-width:34ch; font-size:13px; font-weight: 400; color:#797979; }
.subscribe{ position:relative; max-width:360px; margin-top:27px; }
.subscribe__input{
  width:100%; height:52px; padding:0 52px 0 14px;
  border:0; border-bottom:1px solid var(--line);
  background:transparent; font-size:13px; font-weight: 400;
  border-radius: 12px;
  color: #797979;
}
.subscribe__input:focus{
  outline: none;
}
.subscribe__input::placeholder{ color:var(--muted); }
.subscribe__btn{
  position:absolute; top:9px; right:8px;
  display:grid; place-items:center; width:32px; height:32px;
  border-radius:50%; background: #F95E56; 
  transition:transform .2s var(--ease);
}
.subscribe__btn:hover{ transform:scale(1.07); }
.subscribe__btn svg{ width:9px; height: auto; }
/* No reserved line — empty it held 23px that the comp does not have, which
   pushed the socials clear of where they belong. */
.subscribe__msg{ margin-top:8px; font-size:12px; color:var(--coral); }
.subscribe__msg:empty{ margin-top:0; }
.subscribe__msg.is-ok{ color:var(--teal); }
/* One connected strip in the comp — 189 wide for four 48px cells, i.e. the
   cells share their borders rather than sitting in a row with gaps. */
.socials{ display:flex; gap:0; margin-top:14px; max-width: max-content; border: 1px solid #E2E2E2; border-radius: 8px; }
.socials li + li a{ border-left:0; }
.socials a{
  display:grid; place-items:center; width:48px; height:48px;
  border-right:1px solid #E2E2E2; 
  transition:border-color .2s var(--ease), background-color .2s var(--ease);
}
.socials li:last-child a{
  border: none;
}
.socials li img{
  width: 25px;
  height: auto;
  display: block;
  object-fit: contain;
}
.socials a:hover{ background:rgba(62,62,62,.04); }
.footer__heading{ font-size:18px; font-weight:400; color: #565656; }
/* A button at every width so the mobile accordion has something to press;
   above 768 it is inert and reads as the plain heading it looks like. */
.footer__toggle{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; padding:0; font:inherit; color:#565656; text-align:left;
  cursor:default;
}
.footer__chev{ display:none; }
.footer__panel{ display:grid; grid-template-rows:1fr; }
.footer__panel > div{ min-height:0; }
/* The size has to sit on the list, not the anchor: an inline <a> leaves the
   <li> line box at the inherited 15px and the pitch comes out 29, not 25. */
.footer__links{ display:grid; gap:5px; margin-top:11px; font-size:13px; line-height:1.55; font-weight: 400; }
.footer__links a{ color:var(--muted); }
.footer__links a:hover{ color:var(--ink); }
.footer__address,
.footer__contact{ margin-top:18px; font-size:13px; color:var(--ink-soft); line-height:1.6; font-weight: 400; }
.footer__contact{ margin-top:14px; }
.footer__phone{ font-weight:600; color:var(--ink); }
.footer__wordmark{ margin-top:clamp(44px, 7.15vw, 103px); padding-inline:var(--gutter); }
.footer__wordmark img{ width:min(780px, 62vw); height:auto; margin-inline:auto;display:block; }
/* The comp sets the copyright level with the foot of the wordmark rather than
   below it, so it is pulled back up over that row. */
.footer__legal{ margin-top:-1.39vw; padding-block:0 clamp(20px, 2.36vw, 34px); font-weight: 400; font-size:12px; color:var(--ink-soft); }

@media (min-width: 1025px){
  .footer__grid{
    grid-template-columns:41.1% 15.3% 13.1% 14.1% 16.4%;
    gap:0;
  }
  /* The socials sit outside .footer__intro so the mobile order can put them
     after the accordions; here they go back under the form. */
  .footer__intro{ grid-column:1; grid-row:1; }
  .footer__grid > .socials{ grid-column:1; grid-row:2; }
  /* The link columns span BOTH rows. Left in row 1 they set its height, which
     pushed the socials 92px below where the comp has them. */
  .footer__col{ grid-row:1 / span 2; align-self:start; }
}

@media (max-width: 1024px){
  /* The "Stay In Touch" block fills whatever row it is in, at every width
     below 1024 — grid row here, stacked column further down. */
  .footer__copy{ max-width:none; }
  .subscribe{ max-width:none; }
}

@media (min-width: 768px) and (max-width: 1024px){
  .footer__grid{
    grid-template-columns:repeat(4, 1fr);
    column-gap:clamp(16px, 2.4vw, 32px);
    row-gap:clamp(28px, 4vw, 46px);
    display: block;
  }
  .footer__intro{ grid-column:1 / -1; grid-row:1; }
  .footer__grid > .socials{ grid-column:1 / -1; grid-row:2; margin-top:20px; }
  .footer__col{ grid-row:3; align-self:start; }
}
@media (max-width: 767px){
  /* The comp stacks the footer and collapses the four link columns into
     accordions, with the socials moved below them. */
  .footer__grid{ display:flex; flex-direction:column; }
  .footer__intro{ order:0; text-align:center; }
  .footer__col{ order:1; border-top:0.8px solid var(--line); margin-left: 0 !important;}
  .footer__col:last-child{ border-bottom:1px solid var(--line); }
  .footer__grid > .socials{ order:2; justify-content:center; margin: 0 auto; margin-top:34px; }
  .footer__copy{ margin-inline:auto; }
  .footer__wordmark img{
    width: 100%;
  }
  .footer__heading{
    font-size: 14px;
    font-weight: 400;
  }
  .footer__wordmark{margin-top: 20px;}
  .subscribe{ margin-inline:auto;  margin-bottom: 35px;}
  .footer__heading{ margin:0; }
  .footer__toggle{ padding-block:20px; cursor:pointer; }
  .footer__chev{
    display:block; flex:0 0 auto; width:9px; height:9px;
    border-right:1.6px solid var(--ink-soft); border-bottom:1.6px solid var(--ink-soft);
    /* Same correction as the slider arrows: the ink is a "V" in half the box,
       so its centre sits 3.18px off the box centre once rotated. */
    rotate:45deg; translate:0 -3.18px;
    transition:rotate .25s var(--ease), translate .25s var(--ease);
  }
  .footer__col.is-open .footer__chev{ rotate:225deg; translate:0 3.18px; }
  /* 0fr to 1fr animates the height without needing a measured pixel value. */
  .footer__panel{
    grid-template-rows:0fr;
    transition:grid-template-rows .3s var(--ease);
  }
  .footer__panel > div{ overflow:hidden; }
  .footer__col.is-open .footer__panel{ grid-template-rows:1fr; }
  .footer__links{ margin-top:0; padding-bottom:18px; }
  .footer__address{ margin-top:0; padding-bottom:4px; }
  .footer__contact{ padding-bottom:18px; }
  .footer__legal{ margin-top:8px; text-align:center; }
}





/* ========================= nutrition section css start =========================== */
:root {
            --charcoal: #343434;
            --teala: #008d92;
            --cream: #f7f3ec;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            min-width: 320px;
            background: #fff;
            color: var(--charcoal);
            font-family: "Manrope", Arial, sans-serif;
            overflow-x: hidden;
        }

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

        .snuggles-page {
            background: #fff;
        }

        .nutrition-story {
            position: relative;
            min-height: 500vh;
            background: var(--cream);
        }

        /* CHANGED: Grid replaced with Flexbox and width distribution */
        .nutrition-sticky {
            position: sticky;
            top: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            min-height: 100vh;
            padding: 44px clamp(32px, 6vw, 96px) 56px;
            overflow: visible;
        }

        .nutrition-heading {
            position: absolute;
            top: clamp(28px, 5vh, 58px);
            left: 50%;
            z-index: 4;
            width: min(520px, calc(100% - 48px));
            transform: translateX(-50%);
            text-align: center;
            pointer-events: none;
        }

        .nutrition-heading h1 {
            color: #383838;
            font-size: clamp(32px, 4.4vw, 54px);
            font-weight: 800;
            line-height: 0.98;
            letter-spacing: 0;
        }

        .nutrition-heading h1 span {
            color: var(--coral);
        }

        .nutrition-heading p {
            max-width: 220px;
            margin: 20px auto 0;
            color: #565656;
            font-size: 13px;
            font-weight: 700;
            line-height: 1.15;
        }

        .nutrition-heading .nutrition-cta {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            min-height: 46px;
            margin-top: 18px;
            padding: 0 8px 0 22px;
            border: 0;
            border-radius: 999px;
            background: var(--teala);
            color: #fff;
            font-family: inherit;
            font-size: 14px;
            font-weight: 400;
            opacity: 0;
            transform: translateY(10px);
            transition: opacity 0.35s ease, transform 0.35s ease, background 0.35s;
            pointer-events: none;
            cursor: pointer;
        }

        .nutrition-heading .nutrition-cta:hover{background-color: #0a5757;}

        .nutrition-story[data-step="5"] .nutrition-heading .nutrition-cta {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }

        .nutrition-cta i {
            display: grid;
            width: 30px;
            height: 30px;
            place-items: center;
            border-radius: 50%;
            background: #fff;
            color: var(--teala);
            font-style: normal;
            line-height: 1;
        }

        /* Flex property added for proper width distribution */
        .stage-label {
            position: relative;
            z-index: 5;
            flex: 1 1 20%;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 14px;
            color: var(--coral);
            font-size: 16px;
            font-weight: 400;
            white-space: nowrap;
            transform: translateY(34px);
        }

        .stage-label::before {
            content: "";
            width: clamp(38px, 5vw, 72px);
            height: 1px;
            background: var(--coral);
        }

        .stage-label .stage-number {
            order: -1;
        }

        /* Flex layout with centered alignment */
        .bowl-stage {
            position: relative;
            z-index: 3;
            flex: 0 1 720px;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 520px;
            padding-top: 300px;
            overflow: visible;
        }

        .drop-line {
            position: absolute;
            top: 210px;
            left: 50%;
            width: 1px;
            height: 70px;
            background: #E6DED4;
            transform: translateX(-50%);
        }

        .drop-line::after {
            content: "";
            display: block;
            width: 100%;
            height: 20px;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: #FA6A5F;
        }

        .bowl {
            position: relative;
            width: min(550px, 78vw);
            aspect-ratio: 1.95 / 1;
            overflow: visible;
        }

        .bowl-step-layer {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            clip-path: inset(100% 0 0 0);
            transition: clip-path 0.05s linear;
            pointer-events: none;
            overflow: visible;
            background-color: var(--cream);
        }

        .bowl-step-layer[data-step-image="1"] {
            clip-path: inset(0% 0 0 0) !important;
        }

        .bowl-step-layer .bowl-image {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .bowl-top-img {
            position: absolute;
            top: 0;
            left: 25%;
            width: 80px;
        }
        .bowl-top-img img{width: 100%; height: 100%; display: block;}
 
        .bowl-left-img {
            position: absolute;
            top: 70%;
            left: 0;
            width: 140px;
            transform: translateY(-50%);
            z-index: 10;
            pointer-events: none;
        }

        .bowl-left-img img {
            width: 100%;
            height: auto;
            object-fit: contain;
        }

        /* Flex property added to align on right side */
        .nutrition-points {
            position: relative;
            z-index: 5;
            flex: 1 1 20%;
            display: flex;
            flex-direction: column;
            gap: clamp(28px, 5vh, 46px);
            align-items: flex-end;
        }

        .nutrition-point {
            display: grid;
            grid-template-columns: 34px minmax(130px, 190px);
            gap: 20px;
            align-items: start;
            opacity: 0.28;
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        .nutrition-point.active {
            opacity: 1;
            transform: translateX(-4px);
        }

        .point-orb {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--orb);
            margin-top: -6px;
        }


        .point-title {
            font-size: 16px;
            font-weight: 700;
            color: #383838;
            line-height: 1.1;
            font-family: "Intelo";
        }

        .point-copy {
            margin-top: 6px;
            color: #383838;
            font-size: 13px;
            font-weight: 400;
            line-height: 1.25;
        }

        @media screen and (max-width:1280px) {

            .bowl {
                width: min(450px, 65vw);
            }
        }

        @media (max-width: 991px) {
            .nutrition-story {
                min-height: 450vh;
                background: var(--cream);
            }

            .nutrition-sticky {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                min-height: 100vh;
                min-height: calc(100vh - 50px);
                padding: 30px 0 24px;
                background: var(--cream);
            }

            .nutrition-heading {
                position: relative;
                top: auto;
                left: auto;
                width: 100%;
                padding: 0 20px;
                transform: none;
            }

            .nutrition-heading h1 {
                font-size: clamp(30px, 8vw, 42px);
            }

            .nutrition-heading p {
                max-width: 320px;
                margin-top: 12px;
                font-size: 14px;
            }

            .bowl-stage {
                min-height: 200px;
                padding-top: 0;
                flex: none;
            }

            .bowl {
                width: min(440px, 88vw);
            }

            .bowl-top-img{width: 80px;}

            .bowl-left-img {
                /* left: -30px; */
                width: 110px;
            }

            .drop-line {
                display: none;
            }

            .stage-label {
                flex: none;
                justify-content: center;
                transform: none;
                margin: 10px 0;
                padding: 0 20px;
            }

            .stage-label::before {
                width: 40px;
            }

            .nutrition-points {
                flex: none;
                display: flex;
                flex-direction: row;
                width: 100%;
                gap: 20px;
                padding: 10px 24px 20px;
                overflow-x: auto;
                scroll-snap-type: x mandatory;
                scrollbar-width: none;
            }

            .nutrition-points::-webkit-scrollbar {
                display: none;
            }

            .nutrition-point {
                grid-template-columns: 1fr;
                flex: 0 0 170px;
                gap: 10px;
                scroll-snap-align: center;
                opacity: 0.35;
                transition: opacity 0.3s ease, transform 0.3s ease;
            }

            .nutrition-point.active {
                opacity: 1;
                transform: scale(1.04);
            }

            .point-orb {
                width: 30px;
                height: 30px;
                margin-left: -4px;
            }

            .point-title {
                font-size: 15px;
            }

            .point-copy {
                font-size: 12px;
                line-height: 1.4;
            }

            
        }

        @media screen and (max-width:767px) {

          .bowl-left-img{width: 90px; top: 80%;}
        }