/* ==========================================================================
   Noody brand layer — 2026 Brand Guidelines
   Loaded after styles.css. Supplies the real Noody typefaces, palette and
   wordmark, and strips the generic decorative chrome the page shipped with:
   aurora blobs, grain, glassmorphism, rainbow glows, sparkles, floating
   chips, orbit rings and confetti. Type and product photography do the work.
   ========================================================================== */

/* --- Typefaces ----------------------------------------------------------- */
/* Licensed Noody webfonts, subset from the fonts already deployed on the live
   noody.co.nz theme. Display = Laica A. Body/UI = PP Mori. */
@font-face {
  font-family: "Laica A";
  src: url("assets/fonts/laica-a.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Mori";
  src: url("assets/fonts/pp-mori-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PP Mori";
  src: url("assets/fonts/pp-mori-medium.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* --- Tokens -------------------------------------------------------------- */
:root {
  /* The five product colours. Each one maps to a product — never swap them. */
  --ndy-green:  #44D62C; /* Soft Suds      */
  --ndy-pink:   #FF4162; /* Lotion Potion  */
  --ndy-lilac:  #C18CFF; /* Calm Balm      */
  --ndy-blue:   #00AEEF; /* Bedtime Bestie */
  --ndy-yellow: #FFD100; /* Sun Balm       */

  --wash-green:  #e8fbe3;
  --wash-pink:   #ffe9ed;
  --wash-lilac:  #f3ebff;
  --wash-blue:   #e2f6fd;
  --wash-yellow: #fff8dc;

  /* Remap the generic names styles.css already consumes. */
  --green:  var(--ndy-green);
  --lime:   var(--ndy-green);
  --pink:   var(--ndy-pink);
  --purple: var(--ndy-lilac);
  --sky:    var(--ndy-blue);
  --sun:    var(--ndy-yellow);

  --paper: #FBF9F2;
  --ink:   #123A2C;
  --muted: #5C7268;
  --line:  rgba(18, 58, 44, .14);

  --radius:       24px;
  --radius-stage: 36px;
}

body {
  font-family: "PP Mori", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
}

/* --- Typography ---------------------------------------------------------- */
.hero h1,
.brand-copy h2,
.connect-heading h2,
.sheet h2 {
  font-family: "Laica A", ui-serif, Georgia, serif;
  font-weight: 400;
  letter-spacing: -.02em;
}
.hero h1 { line-height: .88; }

/* Solid, not outlined — the hollow treatment read as a webfont fallback. */
.hero h1 span { color: var(--ndy-lilac); -webkit-text-stroke: 0; }

.eyebrow, .role, .proofs span, .product-label,
.trip-pill, .scroll-cue, legend, .form-grid label {
  font-family: "PP Mori", sans-serif;
  font-weight: 600;
}

.eyebrow { letter-spacing: .14em; }
.role    { color: var(--ink); opacity: .72; letter-spacing: .06em; }
.lede    { font-weight: 400; }
.btn     { font-weight: 600; letter-spacing: -.01em; }

/* --- Wordmark ------------------------------------------------------------ */
.brand { gap: 0; }
.brand-logo { display: block; height: 26px; width: auto; color: var(--ink); }

/* --- Flat ground --------------------------------------------------------- */
/* The hero shipped with three stacked radial gradients, two animated blurred
   "aurora" blobs and a noise overlay. Warm paper, nothing else. */
.hero { background: var(--paper); }

/* --- Surfaces ------------------------------------------------------------ */
/* No glassmorphism. Solid surfaces with a hairline, which survives being
   photographed, screenshotted and read in direct sun. */
.btn-glass, .trip-pill, .connect-card, .sheet-card {
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

.btn-glass { background: #fff; border: 1px solid var(--line); box-shadow: none; }
.btn-glass:hover { background: #fff; box-shadow: 0 6px 18px rgba(18, 58, 44, .07); }

.trip-pill { background: #fff; border: 1px solid var(--line); box-shadow: none; color: var(--ink); }
.trip-pill i { background: var(--ndy-green); box-shadow: none; }

/* The pulsing halo on the status dot goes; it is a plain marker. */
.pulse-dot { background: var(--ndy-green); }
.pulse-dot:after { display: none; }

.connect-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
}
.connect-card:hover { box-shadow: 0 8px 22px rgba(18, 58, 44, .07); }
.connect-card:nth-child(1) .connect-icon { background: var(--wash-green); border-color: transparent; }
.connect-card:nth-child(2) .connect-icon { background: var(--wash-pink);  border-color: transparent; }
.connect-card:nth-child(3) .connect-icon { background: var(--wash-blue);  border-color: transparent; }
.connect-card:nth-child(4) .connect-icon { background: var(--wash-lilac); border-color: transparent; }

.sheet-card {
  background: var(--paper);
  border: 0;
  border-radius: var(--radius-stage) var(--radius-stage) 0 0;
  box-shadow: 0 -20px 60px rgba(7, 34, 25, .18);
}
.form-grid input { border-radius: 14px; }

/* --- Buttons ------------------------------------------------------------- */
/* Brand green is bright. White on it fails contrast, so the primary pill is
   green with ink text — higher contrast and more on-brand than the old teal. */
.btn-primary { background: var(--ndy-green); color: var(--ink); box-shadow: none; }
.btn-primary:hover { box-shadow: 0 8px 20px rgba(68, 214, 44, .3); }

.btn-sun { background: var(--ndy-yellow); color: var(--ink); box-shadow: none; }
.btn-sun:hover { box-shadow: 0 8px 20px rgba(255, 209, 0, .28); }

/* Was --ndy-pink. That hex is a product colour and works on a Lotion Potion
   pack, but as a lone line of text on cream it reads as an error message — and
   at 3.22:1 it failed contrast anyway. Ink at 72% gives 5.22:1, which passes
   AA and still sits back from the heading beside it. */
.wink { color: var(--ink); opacity: .72; font-weight: 600; }
.lime { color: var(--ndy-green); }
.form-grid input:focus { border-color: var(--ndy-green); box-shadow: 0 0 0 3px rgba(68, 214, 44, .16); }
.interest-chips input:checked + span { background: var(--wash-green); border-color: var(--ndy-green); color: #1C6B12; }
.success-orb { background: var(--ndy-green); color: var(--ink); animation: none; }

/* --- Hero composition ---------------------------------------------------- */
/* A still, deliberate arrangement. The products were previously on a spinning
   orbit plane with counter-rotation, ringed guides and blurred colour glows. */
.avatar-stage { perspective: none; transform-style: flat; max-width: 520px; }
.product-arrangement { position: absolute; inset: 0; }

/* The avatar is a transparent cut-out illustration, so it floats on the paper
   with a soft shadow. No circular crop — that would clip the arms and hair. */
.avatar-core { width: 54%; filter: none; transform: none; cursor: default; }
.avatar-hero-frame { position: absolute; inset: 0; background: none; border: 0; box-shadow: none; }
.avatar-hero-frame img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: center bottom;
  border-radius: 0;
  filter: drop-shadow(0 18px 24px rgba(18, 58, 44, .16));
  user-select: none; pointer-events: none;
}

/* Products float on the paper — the photograph is the card, no box, no border. */
.product-node {
  position: absolute;
  width: 17%; height: auto; aspect-ratio: auto;
  overflow: visible;
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  animation: none; transform: none;
  filter: drop-shadow(0 14px 18px rgba(18, 58, 44, .14));
  z-index: 5;
}
.product-node img { width: 100%; height: auto; object-fit: contain; }
.product-node:hover img { scale: 1; }

/* The figure occupies the middle third and is cropped at the hip, so nothing
   sits centre or bottom-centre — it would land on his forearms or his head.
   Two flanking columns: three down the left, two set into the gaps at right. */
.product-calm    { left: 2%;   top: 1%;   width: 13%; }
.product-sun     { left: 0%;   top: 35%;  width: 13%; }
.product-suds    { left: 2%;   top: 69%;  width: 12.5%; }
.product-bedtime { right: 2%;  top: 15%;  width: 13%; }
.product-lotion  { right: 0%;  top: 52%;  width: 12.5%; }

.product-label {
  position: absolute;
  bottom: -6px; left: 50%; transform: translateX(-50%);
  white-space: nowrap;
  padding: 4px 8px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line); box-shadow: none;
  color: var(--ink); font-size: 9px; font-weight: 600;
}

/* --- Meet Noody ---------------------------------------------------------- */
.brand-section { background: var(--ink); border-radius: var(--radius-stage) var(--radius-stage) 0 0; }
.brand-section:before { display: none; } /* concentric ring decoration */
.brand-copy > p:not(.eyebrow) { color: #BCD2C7; }
.proofs span { border-color: rgba(255, 255, 255, .18); }

/* One photograph, not a scrapbook of three. Most of the PDP library carries
   ingredient-claim or how-to text burnt into the image — "magnesium supports
   restful sleep", "kawakawa calms inflammation", before/after eczema pairs —
   none of which is substantiated. Only untitled photography is used here. */
.brand-photo {
  margin: 0;
  border-radius: var(--radius-stage);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .3);
}
.brand-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Motion -------------------------------------------------------------- */
/* A short fade-up on first view is all that remains. */
.reveal { transform: translateY(14px); transition-duration: .5s; }

@media (max-width: 900px) { .avatar-stage { max-width: 400px; } }

@media (max-width: 600px) {
  .brand-logo { height: 22px; }
  .avatar-stage { max-width: 330px; }
  /* Keep the desktop widths: at 19% three bottles cannot stack in one
     column without colliding. */
  .product-label { display: none; }
  /* The stage sits directly above the copy on mobile; keep the lowest bottle
     clear of the eyebrow rather than letting it overhang onto the text. */
  .hero-copy { margin-top: 16px; }
  .sheet-card { border-radius: var(--radius) var(--radius) 0 0; }
}

@media (max-height: 740px) and (max-width: 600px) { .avatar-stage { max-width: 280px; } }

/* ==========================================================================
   Hero orbit v2 — tighter, moving, label-free
   ========================================================================== */
.avatar-stage {
  max-width: 540px;
  overflow: visible;
  perspective: none;
  transform-style: flat;
}

/* Scott stays still and dominant while the Noody range moves around him. */
.avatar-core {
  width: 69%;
  top: 51%;
  z-index: 10;
}

/* The whole product system rotates around Scott. Keeping the orbit container
   inset makes the products feel connected to him rather than pinned to the
   edges of the page. */
.product-arrangement {
  position: absolute;
  inset: 8%;
  pointer-events: none;
  transform-origin: 50% 50%;
  animation: noodyOrbitSpin 20s linear infinite;
  z-index: 4;
}

.product-arrangement::before,
.product-arrangement::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  pointer-events: none;
  border-radius: 50%;
  z-index: 1;
}
.product-arrangement::before {
  width: 96%;
  height: 66%;
  border: 1px solid rgba(18,58,44,.12);
  transform: translate(-50%,-50%) rotate(-13deg);
}
.product-arrangement::after {
  width: 68%;
  height: 98%;
  border: 1px solid rgba(18,58,44,.08);
  transform: translate(-50%,-50%) rotate(37deg);
}

/* No text pills in the orbit. Product identity comes from the pack itself. */
.product-label {
  display: none !important;
}

.product-node {
  position: absolute;
  width: 19%;
  height: auto;
  aspect-ratio: auto;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 12px 17px rgba(18,58,44,.17));
  z-index: 8;

  /* Counter-rotate each bottle so the orbit moves but packs stay upright. */
  animation: noodyOrbitCounter 20s linear infinite !important;
  transform-origin: 50% 50%;
}

.product-node img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  animation: noodyProductBob 4.4s ease-in-out infinite;
}
.product-node:hover img { scale: 1; }

.product-sun {
  left: 40.5%;
  top: -8%;
  width: 20%;
}
.product-bedtime {
  right: -5%;
  top: 21%;
  width: 18.5%;
}
.product-calm {
  right: -2%;
  bottom: 8%;
  width: 19%;
}
.product-lotion {
  left: 9%;
  bottom: -2%;
  width: 18.5%;
}
.product-suds {
  left: -6%;
  top: 25%;
  width: 18.5%;
}

/* Slightly stagger the breathing motion so the five packs don't bob together. */
.product-bedtime img { animation-delay: -.8s; }
.product-calm img    { animation-delay: -1.7s; }
.product-lotion img  { animation-delay: -2.5s; }
.product-suds img    { animation-delay: -3.2s; }

@keyframes noodyOrbitSpin {
  to { transform: rotate(360deg); }
}
@keyframes noodyOrbitCounter {
  to { transform: rotate(-360deg); }
}
@keyframes noodyProductBob {
  0%,100% { translate: 0 0; }
  50%     { translate: 0 -6px; }
}

@media (max-width: 900px) {
  .avatar-stage { max-width: 430px; }
  .avatar-core { width: 70%; }
  .product-arrangement { inset: 7%; }
}

@media (max-width: 600px) {
  .avatar-stage { max-width: 350px; }
  .avatar-core { width: 72%; }
  .product-arrangement { inset: 6%; }

  .product-sun     { left: 40%; top: -7%; width: 20%; }
  .product-bedtime { right: -4%; top: 21%; width: 18%; }
  .product-calm    { right: -2%; bottom: 9%; width: 18.5%; }
  .product-lotion  { left: 8%; bottom: -1%; width: 18%; }
  .product-suds    { left: -5%; top: 25%; width: 18%; }
}

@media (prefers-reduced-motion: reduce) {
  .product-arrangement,
  .product-node,
  .product-node img {
    animation: none !important;
  }
}

/* --- Hero actions -------------------------------------------------------- */
/* Wholesale sits in the hero rather than below the fold: this trip is a
   commercial one, so the distribution conversation should not be behind a
   scroll. Base CSS only promotes the 3rd button to full width on mobile. */
@media (max-width: 600px) {
  .hero-actions .btn:nth-child(n+3) { grid-column: 1 / -1; }
}

/* --- Short-viewport hero fit ---------------------------------------------
   The orbit stage is 350px on mobile, which pushes the wholesale CTA below
   the fold on every common phone height except the very tallest. Measured
   with the CTA's own bounding box, not by eye. Tighten the copy rhythm and
   step the stage down as the viewport gets shorter, so all four actions stay
   reachable without scrolling. Roomy screens keep the full-size orbit. */
@media (max-width: 600px) and (max-height: 900px) {
  .topbar             { height: 56px; }
  .hero-copy          { margin-top: 4px; }
  .lede               { margin-top: 9px; }
  .hero-actions       { margin-top: 11px; gap: 6px; }
  .hero-actions .btn  { min-height: 47px; }
  .meta-line          { margin-top: 7px; }
  .hero-grid          { padding-bottom: 6px; min-height: calc(100svh - 74px); }
  .avatar-stage       { max-width: 288px; }
}
@media (max-width: 600px) and (max-height: 780px) {
  .avatar-stage { max-width: 252px; }
}
@media (max-width: 600px) and (max-height: 720px) {
  .avatar-stage { max-width: 216px; }
  .hero h1      { font-size: 46px; }
  .lede         { font-size: 13px; }
}
@media (max-width: 600px) and (max-height: 650px) {
  .avatar-stage { max-width: 188px; }
}

/* --- Connect grid -------------------------------------------------------- */
/* Six cards now (WhatsApp and LinkedIn added), so three columns reads evenly
   as two rows rather than the lopsided 4 + 2 the old four-column grid gave. */
@media (min-width: 901px) {
  .connect-grid { grid-template-columns: repeat(3, 1fr); }
}
.connect-card:nth-child(1) .connect-icon { background: var(--wash-lilac);  border-color: transparent; }
.connect-card:nth-child(2) .connect-icon { background: var(--wash-pink);   border-color: transparent; }
.connect-card:nth-child(3) .connect-icon { background: var(--wash-green);  border-color: transparent; }
.connect-card:nth-child(4) .connect-icon { background: var(--wash-blue);   border-color: transparent; }
.connect-card:nth-child(5) .connect-icon { background: var(--wash-yellow); border-color: transparent; }
.connect-card:nth-child(6) .connect-icon { background: var(--wash-lilac);  border-color: transparent; }

/* "in" is two glyphs where the others are one. */
.connect-card[data-track="linkedin_click"] .connect-icon {
  font-size: 13px;
  letter-spacing: -.03em;
}
.connect-icon .wa-mark { width: 16px; height: 16px; display: block; }

/* --- The range ----------------------------------------------------------- */
/* Every line here traces to the verified-claims document. Product-specific
   substantiation does not transfer between SKUs — Calm Balm's patch test is
   Calm Balm's alone, and Lotion Potion carries a fragrance-allergen warning,
   so it deliberately carries no skin-kindness language at all.

   Visually: no cards. Each product floats on a soft wash of its own colour,
   which is the brand's wayfinding system doing actual work — you can tell
   where you are in the range by colour alone. The bottles carry the Noody
   characters, so the photograph is the decoration; nothing else is needed. */
.range-section { padding: 96px 0 104px; background: var(--paper); }
.range-head h2 {
  font-family: "Laica A", ui-serif, Georgia, serif;
  font-weight: 400;
  font-size: clamp(42px, 6vw, 76px);
  line-height: .94;
  letter-spacing: -.025em;
  margin: 0;
}
.lime-ink { color: var(--ink); opacity: .5; }
.range-intro { max-width: 520px; color: var(--muted); font-size: 17px; line-height: 1.55; margin: 20px 0 0; }

.range-list { list-style: none; margin: 54px 0 0; padding: 0; display: grid; gap: 18px; }

.range-item {
  display: grid;
  grid-template-columns: 46% 1fr;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border-radius: var(--radius-stage);
  background: var(--wash);
  border: 0;
  overflow: hidden;
}
.theme-green  { --accent: var(--ndy-green);  --wash: var(--wash-green); }
.theme-pink   { --accent: var(--ndy-pink);   --wash: var(--wash-pink); }
.theme-lilac  { --accent: var(--ndy-lilac);  --wash: var(--wash-lilac); }
.theme-blue   { --accent: var(--ndy-blue);   --wash: var(--wash-blue); }
.theme-yellow { --accent: var(--ndy-yellow); --wash: var(--wash-yellow); }

/* Alternate the side the photograph sits on so the eye travels down the page. */
.range-item:nth-child(even) { grid-template-columns: 1fr 46%; }
.range-item:nth-child(even) .range-media { order: 2; }

/* Swipeable gallery: CSS scroll-snap, so it is native momentum scrolling on
   touch and a real focusable scroller with arrow keys on desktop. No carousel
   library — one fewer thing to load on conference wifi and one fewer thing to
   break. Only untitled imagery is used; the rest of the PDP library has
   unsubstantiated claims burnt into the pixels. */
.range-media { position: relative; min-height: 520px; }
.range-gallery {
  /* Absolute so it fills whatever height the grid row resolves to. height:100%
     collapses here because .range-media has no definite height on desktop. */
  position: absolute;
  inset: 0;
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.range-gallery::-webkit-scrollbar { display: none; }
.range-gallery:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: center;
  display: block;
}
/* Lifestyle shots fill the frame; pack shots are cut-outs and need air. */
.slide-photo { object-fit: cover; }
.slide-pack  { object-fit: contain; padding: 30px 30px 34px; background: #fff; }

.range-dots {
  position: absolute;
  left: 50%; bottom: 14px; transform: translateX(-50%);
  display: flex; gap: 6px;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.range-dot {
  width: 6px; height: 6px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(18, 58, 44, .28);
  transition: background .2s, width .2s;
}
.range-dot[aria-current="true"] { background: var(--ink); width: 16px; border-radius: 999px; }
/* A single-image gallery needs no controls. */
.range-dots:has(.range-dot:only-child) { display: none; }

.range-copy { padding: 48px 54px; align-self: center; }
.range-step {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: .5;
  margin-bottom: 10px;
}
.range-item h3 {
  font-family: "Laica A", ui-serif, Georgia, serif;
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1;
  letter-spacing: -.025em;
  margin: 0 0 12px;
}
.range-item p { margin: 0; color: #3C5A4D; font-size: 16px; line-height: 1.55; max-width: 44ch; }
.range-ings-label {
  margin: 20px 0 9px !important;
  font-family: "PP Mori", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: .45;
}
.range-ings {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.range-ings li {
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .62);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.range-note {
  display: inline-block;
  margin-top: 16px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #fff;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
}

/* --- For buyers ---------------------------------------------------------- */
.trade-section { padding: 96px 0 104px; background: var(--ink); color: #F2F7F4; }
.trade-head h2 {
  font-family: "Laica A", ui-serif, Georgia, serif;
  font-weight: 400;
  font-size: clamp(40px, 5.2vw, 64px);
  line-height: .96;
  letter-spacing: -.02em;
  margin: 0;
}
.trade-facts { margin: 44px 0 0; display: grid; gap: 0; }
.trade-facts > div {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 22px;
  padding: 17px 0;
  border-top: 1px solid rgba(255, 255, 255, .13);
}
.trade-facts > div:last-child { border-bottom: 1px solid rgba(255, 255, 255, .13); }
.trade-facts dt { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ndy-green); }
.trade-facts dd { margin: 0; font-size: 16px; line-height: 1.5; color: #D6E4DC; }

.trade-docs { margin-top: 52px; }
.trade-docs h3 {
  font-size: 12px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ndy-green); margin: 0 0 18px;
}
.trade-docs ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; max-width: 760px; }
.trade-docs li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.5;
  color: #D6E4DC;
}
.trade-docs li:before {
  content: "";
  position: absolute;
  left: 4px; top: 9px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ndy-green);
}
.trade-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }

@media (max-width: 600px) {
  .range-section { padding: 66px 0 72px; }
  .trade-section { padding: 68px 0 76px; }
  /* Stacked and centred on mobile: bottle, then name, then the line. */
  .range-list { gap: 14px; }
  .range-item,
  .range-item:nth-child(even) {
    grid-template-columns: 1fr;
    border-radius: var(--radius);
  }
  .range-item:nth-child(even) .range-media { order: 0; }
  .range-media { min-height: 0; aspect-ratio: 1 / 1; }
  .slide-pack { padding: 22px 22px 26px; }
  .range-copy { padding: 30px 24px 34px; }
  .range-ings { justify-content: center; }
  .range-ings-label { margin-top: 18px !important; }
  .range-item h3 { font-size: 30px; }
  .range-item p { font-size: 14px; }
  .trade-facts dd, .trade-docs li { font-size: 14px; }
  .trade-facts > div { grid-template-columns: 1fr; gap: 5px; padding: 15px 0; }
  .trade-actions { display: grid; }
  .trade-actions .btn { width: 100%; }
}

/* --- Orbit refinements --------------------------------------------------- */
/* Three small changes, all reversible by deleting this block.

   1. The guide ellipses were the one piece of generic geometry left in the
      hero. Softened rather than removed — they give the orbit a path to sit
      on without drawing attention to themselves.
   2. Each bottle gets its own resting tilt. The counter-rotation held every
      pack perfectly upright, which reads computed; a few degrees of variation
      reads hand-arranged. Applied with the `rotate` property so it composes
      with the existing `translate` bob instead of fighting it.
   3. The orbit pauses while someone is looking at it. If a bottle catches a
      buyer's eye they can hold it still rather than chase it round. */
.product-arrangement::before { border-color: rgba(18, 58, 44, .07); }
.product-arrangement::after  { border-color: rgba(18, 58, 44, .05); }

.product-sun img     { rotate: -6deg; }
.product-bedtime img { rotate:  5deg; }
.product-calm img    { rotate: -3deg; }
.product-lotion img  { rotate:  7deg; }
.product-suds img    { rotate: -4deg; }

.avatar-stage:hover .product-arrangement,
.avatar-stage:hover .product-node,
.avatar-stage:hover .product-node img,
.avatar-stage:active .product-arrangement,
.avatar-stage:active .product-node,
.avatar-stage:active .product-node img { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .product-sun img, .product-bedtime img, .product-calm img,
  .product-lotion img, .product-suds img { rotate: 0deg; }
}

/* --- Buyer section, joined to the brand story ---------------------------- */
/* The commercial facts now sit directly after "Made by parents who needed it
   first" and ahead of the catalogue: at a trade show the buyer is scanning for
   territory, registration and terms, and five detailed product cards are for
   the person who has already decided to look closer.

   Both sections are --ink, so they abut. Rather than stacking two panels that
   look accidentally identical, they read as one dark passage split by a
   hairline — story, then the numbers. */
.trade-section--joined {
  padding-top: 0;
  border-radius: 0;
  margin-top: -1px; /* close the sub-pixel seam between two identical fills */
}
.trade-section--joined .trade-head {
  padding-top: 76px;
  border-top: 1px solid rgba(255, 255, 255, .13);
}
/* The brand block above no longer needs to close itself off. */
.brand-section { padding-bottom: 0; }
.brand-section .brand-grid { padding-bottom: 96px; }

/* The range now follows a dark block, so it takes the rounded shoulder that
   the buyer panel used to carry. */
.range-section {
  border-radius: var(--radius-stage) var(--radius-stage) 0 0;
  margin-top: -1px;
  position: relative;
}

@media (max-width: 600px) {
  .trade-section--joined .trade-head { padding-top: 56px; }
  .brand-section .brand-grid { padding-bottom: 68px; }
}