/* 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 (max-width: 1024px){
  .nav__list{gap: 8px;}
}
@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__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 (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 svg path{ stroke:var(--coral); }
.products .circle-btn:hover svg path{ stroke:var(--white); }
.products .circle-btn:hover{ background:var(--coral); } 
.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: 6%;
    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%; }
.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 (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:2%; right:4%; }
}
@media (max-width: 767px){
  .products__track{ height:52vw; }
  .product-card{
    width:100%; margin:-17vw auto 0;
    padding:27.8vw 20px 20px;
  }

  .products__badge{
    top:56.25vw; bottom:auto; right:7.25%;
  }
  .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__grid{ align-items:flex-start; }
.benefits__grid > .swiper-slide{ height:auto; }
.benefit{
  position:relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  aspect-ratio:290 / 340;
  padding:114px 25px 91px;                 
  text-align:center;
}
.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:144px; aspect-ratio:1;
  display:grid; place-items:center;
  border-radius:50%;
  border: 1px dashed #BBB1A4;
  background:#F7F3EC;
  /* 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:50%; height:auto; object-fit: contain; }
.benefit__title{
  position:relative; z-index:1;
  font-size:clamp(22px, 1.45vw, 24px);  line-height:1.3;
  color:var(--teal);
}
.benefit__copy{
  position:relative; z-index:1;
  margin-top:clamp(10px, 1vw, 12px);
  font-size:clamp(12px, .95vw, 14px); 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: 767px){
  .benefits__slider{
    margin-inline:calc(var(--gutter) * -1);
    width:calc(100% + var(--gutter) * 2);
  }
  .benefit{
    padding-top: 90px;
  }
  .benefit__icon{
    width: 100px;
  }
}

/* ============================================================  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;
  grid-template-columns:minmax(0, 44.7%) minmax(0, 33%);
  align-items:start;
}
.freeze__copy{
  max-width:480px; margin-top:4px;
  font-size:15px; line-height:1.6; color:var(--ink-soft);
}
.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. */
.freeze__stage{
  position:relative;
  width:100%; max-width:1285px; margin-inline:auto;
  aspect-ratio:1285 / 485;
  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. */
.freeze__bowl-wrap{
  position:absolute; left:25.68%; top:18.56%;
  width:50.58%;
}
.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. Held at the asset's own 35px: scaled down
   it was the 1px outer coral ring that broke first. */
.freeze__dot{
  position:absolute; left:var(--x); top:var(--y); z-index:3;
  width:35px; height:35px;
  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; }
/* --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 half a line box. */
.freeze__labels .freeze__label{
  position:absolute; top:var(--y); z-index:4;
  width:max-content; margin:0;
  transform:translateY(-0.75em);
  font-size:14px;
  font-size:clamp(11px, 1.09cqi, 15px);
  line-height:1.5; color:var(--ink);
  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); }
/* Row/side coordinates. These are here rather than on the elements because
   Swiper's destroy(cleanStyles) removes a slide's style attribute outright. */
.freeze__label:nth-child(1){ --y:3.71%;  --edge:72.22%; }
.freeze__label:nth-child(2){ --y:3.71%;  --edge:72.45%; }
.freeze__label:nth-child(3){ --y:36.08%; --edge:83.89%; }
.freeze__label:nth-child(4){ --y:36.08%; --edge:84.28%; }
.freeze__label:nth-child(5){ --y:62.68%; --edge:80.54%; }
.freeze__label:nth-child(6){ --y:62.68%; --edge:81.71%; }

@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__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; }
}