/* GENERATED FILE: do not edit here. The source is css-src/concept-1/*.css (one file per section of the page);
   after changing one, run  node tools/build-html.cjs  (or node tools/build-css.cjs). See that script for why. */
/* =============================================================================
   concept-1.css — "Warm Sage, editorial"
   Cream and sage, Cormorant Garamond display, Jost body, soft pill CTAs.
   v2 (29 Sep 2026) keeps this design system and lays the client's 23.09.26
   content over it: full-bleed hero, the range, two product detail sections,
   a 2x2 story grid, stockists and a dark footer band.

   All classes are namespaced .c1-* so nothing collides with other CSS.

   PALETTE: sampled from the pack renders in Pictures/ — see README.md ("Palette").

   HOW THE STYLESHEETS FIT TOGETHER
   Load order (index.html) is the cascade: base.css, then this file, then
   fit.css (one section per screen), polish.css (motion and finishing),
   mobile.css (phones) and tablet.css (700-1199px). Later files win ties, and
   they repeat selectors from here on purpose:
     - `[data-fit][data-fit]` and `.c1-x[class]`-style doubling lifts a rule
       above the single-class rules in this file; it is not a typo.
     - To change how a section looks, edit its block here first; only look in
       the later files if the property is not set here (fit height and
       centring, rail, tablet type sizes).

   BREAKPOINTS IN USE (media queries cannot read variables, so keep these
   values as they are; a change means editing every file):
     max 720px / max 699px     phones (mobile.css, polish.css)
     min 700px                 tablets and up: sections fit one screen
     min 700px + aspect 5/4    hero and range in their landscape layouts
     min 900px + aspect 5/4    the split-screen Cleanse and Replenish sections
                               (photo one half, copy panel the other); landscape
                               phones (700-899px) keep them stacked
     900-1199px + aspect 5/4   narrower split screens: smaller button pair
     min 1000px                desktop: Made for Malaysia in two columns,
                               fit.css snapping
     min 1280px                the results box's small print sits beside the dots
     container 500px           key-ingredients table in two columns (measured
                               on the card, so it follows the panel width)
============================================================================= */

/* Fonts: self-hosted variable woff2 files (Latin subset, which includes é),
   under the SIL Open Font License (see assets/fonts/OFL-*.txt). Self-hosting
   removes a render-blocking request to a second origin. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('../fonts/jost-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.c1 {
  /* --- colour ------------------------------------------------------- */
  --ground: #f5f2ea; /* cream, from the pack label #D8D8CC lifted */
  --surface: #fffdf8;
  --surface-alt: #ece8dc;
  --ink: #1a1a18; /* pack cap */
  --olive: #4a4d3f; /* pack bottle, sampled #48483C */
  --shop-grey: #5c5e4f; /* the grey in PACT's icon: the Shopee and TikTok Shop buttons */
  --olive-deep: #35382d;
  --offer: #e6b843; /* saffron: the introductory-offer bar only, with black type */
  /* Darkened from #6e7260 (4.43:1 on --ground) to clear WCAG AA for body
     text: 4.98:1 on --ground, 4.55:1 on --surface-alt. */
  --muted: #666a59;
  --hairline: rgba(26, 26, 24, 0.12);
  --hairline-soft: rgba(26, 26, 24, 0.07);
  --umber: #36312a; /* footer band only (deck s9) */
  --panel: #eae1d9; /* shampoo and serum copy panels, sampled from Website Sample.pdf */

  /* --- split-screen product sections (Cleanse, Replenish) ------------ */
  --split-pad-copy: clamp(32px, 7vw, 140px); /* outer edge of the shampoo copy */
  --split-pad-side: clamp(32px, 4vw, 72px);
  --split-pad-rail: max(var(--split-pad-side), 64px); /* clear of the dot rail */
  --split-foot: clamp(16px, 2.4svh, 28px); /* gap under the button row */
  --split-btn: 44px; /* height of the button row */

  /* --- type --------------------------------------------------------- */
  --display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --body: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* --- rhythm ------------------------------------------------------- */
  --gutter: clamp(20px, 5vw, 40px);
  --measure: 1240px;
  --section-y: clamp(72px, 10vw, 130px);
  --radius: 999px;

  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
}

.c1 ::selection {
  background: var(--olive);
  color: var(--ground);
}

/* --- shared primitives ---------------------------------------------- */

.c1-wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.c1-eyebrow {
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}

.c1-h2 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(30px, 3.6vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

.c1-lede {
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.75;
  color: var(--muted);
}

/* Buttons. Pill-shaped is this concept's signature. */
.c1-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.c1-btn--solid {
  background: var(--olive);
  color: var(--ground);
}

.c1-btn--solid:hover,
.c1-btn--solid:focus-visible {
  background: var(--ink);
}

/* The default outline is currentColor, which on a solid pill is cream on the
   cream page: give keyboard focus a visible ink ring instead. */
.c1-btn--solid:focus-visible {
  outline-color: var(--ink);
}

.c1-btn--ghost {
  border-color: var(--hairline);
  color: var(--ink);
}

.c1-btn--ghost:hover,
.c1-btn--ghost:focus-visible {
  border-color: var(--olive);
  background: var(--olive);
  color: var(--ground);
}

/* A text link in button clothes: no outline or fill, an underline. Used for
   the third, quietest action next to a solid and a ghost button. */
.c1-btn--link {
  padding-inline: 12px;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

.c1-btn--link:hover,
.c1-btn--link:focus-visible {
  color: var(--olive);
}

/* The Shopee and TikTok Shop purchase buttons, wherever they appear (hero,
   Shampoo, Serum, Buy Now), are all one filled grey, whatever other button
   style they started from. The banner and FAQ links have no .c1-btn class. */
.c1-btn[data-channel],
.c1-btn[data-product-url] {
  border-color: var(--shop-grey);
  background: var(--shop-grey);
  color: var(--ground);
}

.c1-btn[data-channel]:hover,
.c1-btn[data-channel]:focus-visible,
.c1-btn[data-product-url]:hover,
.c1-btn[data-product-url]:focus-visible {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--ground);
}

.c1-btn[data-channel]:focus-visible,
.c1-btn[data-product-url]:focus-visible {
  outline-color: var(--ink);
}

/* =============================================================================
   Announcement bar
============================================================================= */

.c1-announce {
  background: var(--offer);
  color: var(--ink);
  font-weight: 500;
  padding: 11px var(--gutter);
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* The bar is the introductory offer alone, one line on a laptop. It is a little tighter than the base setting so the
   hero still ends inside the screen at 1280 x 720. */
@media (min-width: 700px) {
  .c1-announce {
    padding-block: 8px;
    font-size: 13px;
    letter-spacing: 0.12em;
    line-height: 1.45;
  }
}

/* On a phone the offer runs to several lines; a tighter letter-spacing keeps the bar as short as the larger type allows
   (it stays at the top of the screen as you scroll, see polish.css). */
@media (max-width: 699px) {
  .c1-announce {
    padding-block: 8px;
    font-size: 12.5px;
    letter-spacing: 0.06em;
    line-height: 1.45;
  }
}

.c1-announce a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.c1-announce a:hover {
  opacity: 0.75;
}

/* The shop links in the bar: a 44px-high hit area on touch screens without
   changing how the line looks. */
@media (pointer: coarse) {
  .c1-announce a {
    display: inline-block;
    padding-block: 15px;
    margin-block: -15px;
  }
}

/* =============================================================================
   Header
============================================================================= */

.c1-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px var(--gutter);
  background: rgba(245, 242, 234, 0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline-soft);
}

.c1-logo img {
  /* The official wordmark is narrower than the old typeset stand-in
     (3.4:1 against 4.4:1), so it sits a touch taller to keep its presence. */
  height: 26px;
  width: auto;
}

.c1-nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 34px);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.c1-nav a {
  color: var(--muted);
  transition: color 0.2s ease;
}

.c1-nav a:hover {
  color: var(--ink);
}

/* Header "Buy Now" is a solid pill in the footer band's colour (--umber). */
.c1-nav a.c1-nav__stockists {
  padding: 10px 20px;
  border-radius: var(--radius);
  background: var(--umber);
  color: var(--ground);
  transition: background 0.25s ease, color 0.25s ease;
}

.c1-nav a.c1-nav__stockists:hover,
.c1-nav a.c1-nav__stockists:focus-visible {
  background: var(--ink);
  color: var(--ground);
}

.c1-nav a.c1-nav__stockists:focus-visible {
  outline-color: var(--ink);
}

/* Language toggle: EN and BM side by side in one outlined track, the page you are on filled in. It is one link
   (each language is its own page), so a click anywhere on it switches. It sits outside .c1-nav__links, so it stays
   on phones. 44px high, as every tap target on the page. */
.c1-nav a.c1-nav__lang {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  color: var(--muted);
}

.c1-nav__opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--hairline);
  color: var(--muted);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.c1-nav__opt:first-child {
  border-radius: var(--radius) 0 0 var(--radius);
  border-right-width: 0;
}

.c1-nav__opt:last-child {
  border-radius: 0 var(--radius) var(--radius) 0;
}

.c1-nav__opt.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--ground);
}

.c1-nav a.c1-nav__lang:hover .c1-nav__opt:not(.is-on),
.c1-nav a.c1-nav__lang:focus-visible .c1-nav__opt:not(.is-on) {
  color: var(--ink);
  border-color: var(--ink);
}

/* Phones: the toggle adds a control to the header, and the Malay "Beli Sekarang" is longer than "Buy Now", so
   tighten the gaps and the pill, and never wrap the pill's label (the header must stay one row, 77px). */
@media (max-width: 480px) {
  .c1-header {
    gap: 12px;
  }

  .c1-nav {
    gap: 10px;
  }

  .c1-nav a.c1-nav__stockists {
    padding: 10px 14px;
    white-space: nowrap;
  }

  .c1-nav__opt {
    min-width: 30px;
    padding: 0 8px;
  }
}

/* The pill needs no underline sweep (polish.css adds one to nav links). */
.c1-nav a.c1-nav__stockists::after {
  display: none;
}

.c1-nav__links {
  display: flex;
  gap: clamp(18px, 2.4vw, 34px);
}

/* Mobile: Products and Our Story collapse; Stockists (outside the span) stays.
   A single-scroll page with six anchors does not warrant a burger menu.
   This block must stay AFTER the rule above — same specificity, so source
   order decides which wins. */
@media (max-width: 860px) {
  .c1-nav__links {
    display: none;
  }
}

/* =============================================================================
   NOTE (6 Oct 2026): the rail is currently HIDDEN: <nav class="c1-rail" ... hidden> in index.html, at
   Ben's request (5 Oct). Its markup, these styles (also in polish.css, mobile.css, tablet.css) and the
   script that highlights the current section (microsite.js, initRail) are kept so the dots can come back
   by deleting that one attribute. If they are retired for good, remove the nav, its styles, initRail and
   the --split-pad-rail padding that keeps text clear of it. Nothing else depends on it.
   Section-progress rail (after the Apple product-page navigator)
   Hidden below 1500px, where it would crowd the content.
============================================================================= */

.c1-rail {
  position: fixed;
  right: 22px;
  top: 50%;
  z-index: 45;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* Sized for the longest label at its active size, so the pill stays put
     while the label inside it grows. */
  min-width: 152px;
  padding: 20px 18px;
  border-radius: 22px;
  background: rgba(245, 242, 234, 0.72);
  backdrop-filter: blur(12px);
  border: 1px solid var(--hairline-soft);
}

.c1-rail a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--olive-deep);
  opacity: 0.85; /* 0.6 left the expanded labels at ~3.4:1 */
  transition: opacity 0.3s ease, font-size 0.3s ease, letter-spacing 0.3s ease,
    color 0.3s ease;
}

.c1-rail a:hover,
.c1-rail a.is-active {
  opacity: 1;
}

/* The section you have landed on. The label grows and darkens as well as
   brightening — previously only the dot changed size, which was too quiet to
   read as "you are here" at 9.5px.

   Tracking tightens as the size goes up so the label grows in weight without
   growing much in width; combined with the fixed rail width below, that stops
   the pill resizing every time the active section changes. */
.c1-rail a.is-active {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--ink);
}

.c1-rail__dot {
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: 999px;
  background: currentColor;
  transition: transform 0.3s ease;
}

.c1-rail a.is-active .c1-rail__dot {
  transform: scale(1.7);
}

@media (max-width: 1500px) {
  .c1-rail {
    display: none;
  }
}

/* =============================================================================
   LAYOUT MODES
   Photographs sit BEHIND the copy ("overlay") only where the screen is
   landscape and wide enough — desktop and landscape tablets:

       @media (min-width: 700px) and (min-aspect-ratio: 5/4)

   (for the shampoo and serum sections the split screen starts at 900px wide,
   so landscape phones keep the stacked layout.)

   Everywhere else (phones, portrait tablets) the photograph STACKS above the
   copy, because a full-bleed portrait crop would put the text across the
   products. Phones get the portrait art-directed crop (<picture>, <700px).
============================================================================= */

/* Shared: the availability line. The existing eyebrow language (tracked
   caps, hairline to its left) — deliberately not a button, and not a
   disabled button. */
.c1-availability {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.24em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--olive-deep);
}

.c1-availability::before {
  content: '';
  flex: none;
  width: 40px;
  height: 1px;
  background: var(--olive);
  opacity: 0.5;
}

/* =============================================================================
   1 — HERO (deck s4)  .c1-hero--bleed
============================================================================= */

.c1-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ground);
}

.c1-hero__media img {
  /* Phones get the whole portrait photograph at its own proportions: no
     sub-crop, so no product is cut. height: auto is load-bearing — the <img>
     height attribute is otherwise a fixed CSS height. */
  width: 100%;
  height: auto;
}

.c1-hero__inner {
  padding-block: clamp(30px, 6vw, 56px) clamp(40px, 7vw, 64px);
}

.c1-hero__copy {
  position: relative;
  max-width: 580px;
  animation: c1-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.c1-hero__rule {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: clamp(20px, 3svh, 32px);
}

.c1-hero__rule span:first-child {
  width: 48px;
  height: 1px;
  background: var(--olive);
  opacity: 0.5;
}

.c1-hero h1 {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(38px, 5.4vw, 80px);
  line-height: 1.03;
  letter-spacing: -0.02em;
  margin-bottom: clamp(18px, 2.6svh, 28px);
}

.c1-hero h1 em {
  font-style: italic;
  font-weight: 400;
}

/* Olive-deep rather than --muted: this copy can sit over photography, and
   needs a 4.5:1 margin even where the scrim thins out. */
.c1-hero__lede {
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.7;
  color: var(--olive-deep);
  max-width: 46ch;
  margin-bottom: 14px;
}

.c1-hero__audience {
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  max-width: 46ch;
  margin-bottom: clamp(24px, 4svh, 38px);
}

/* The line is a full sentence now ("An anti-dandruff shampoo and leave-on scalp serum for…"): wider on a laptop,
   so it takes two lines and the hero still ends inside a 1280 x 720 screen. */
@media (min-width: 700px) {
  .c1-hero__audience {
    max-width: min(100%, 440px);
  }
}

.c1-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.c1-hero__cta .c1-btn {
  padding: 16px 32px;
  font-size: 11px;
  letter-spacing: 0.16em;
}

.c1-hero__cta .c1-btn--solid {
  box-shadow: 0 18px 40px -12px rgba(74, 77, 63, 0.28);
}

.c1-hero__cta .c1-btn--ghost {
  background: rgba(255, 253, 248, 0.5);
}

/* The small line under the buttons (when it opens, then what the set is). */
.c1-hero__note {
  margin-top: 14px;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--olive-deep);
}

/* One line wherever the copy column is wide enough; on a narrower window it
   may wrap rather than run over the photograph. */
@media (min-width: 1100px) {
  .c1-hero__note {
    white-space: nowrap;
  }
}

.c1-hero__cta .c1-btn--link {
  padding-inline: 14px;
}

/* "Buy on:" and a button to each shop, on a row of their own above the other
   two actions. */
.c1-hero__buy {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
}

.c1-hero__buylabel {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
}

.c1-hero__cta .c1-hero__buy .c1-btn {
  padding: 16px 26px;
}

@media (min-width: 700px) {
  /* Portrait tablet, still stacked: the wide photograph at its own 16:9
     proportions, full width. */
  .c1-hero__media img {
    aspect-ratio: auto;
  }
}

@media (min-width: 700px) and (min-aspect-ratio: 5/4) {
  .c1-hero--bleed {
    display: grid;
    align-content: center;
    min-height: calc(100svh - var(--fit-chrome, 98px));
  }

  /* Soft cream scrim, strongest behind the copy, clear by the products. */
  .c1-hero--bleed::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
      90deg,
      rgba(245, 242, 234, 0.94) 0%,
      rgba(245, 242, 234, 0.86) 30%,
      rgba(245, 242, 234, 0.5) 47%,
      rgba(245, 242, 234, 0) 63%
    );
  }

  .c1-hero__inner {
    width: 100%;
    padding-block: clamp(36px, 6svh, 80px);
  }

  .c1-hero__copy {
    max-width: min(580px, 46vw);
  }
}

@keyframes c1-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* =============================================================================
   Shared section head
============================================================================= */

.c1-section__head {
  max-width: 640px;
  margin-bottom: clamp(28px, 4svh, 48px);
}

.c1-section__head .c1-eyebrow {
  display: block;
  margin-bottom: 16px;
}

.c1-section__head .c1-h2 {
  margin-bottom: 16px;
}

/* =============================================================================
   2 — THE RANGE (deck s5)
============================================================================= */

.c1-range {
  padding: var(--section-y) 0;
  background: var(--ground);
}

/* What early users told us (left) and the testimonials (right): one horizontal
   band, 50:50 from 900px, stacked below. Styled after the supplied design
   (Infinite Testimonials Bar.pdf): big light numbers in warm grey with the
   sentence beside them, and a quote card with a large opening and closing mark,
   all on a pale cream.
   Both sides advance together, one statement at a time, with small dots under each
   (microsite.js, initProof). Without the script, or with reduced motion, every
   statement shows at once: four rows on the left, three cards on the right. */
.c1-proof {
  /* How long each statement takes to fade out, and then in (the JS reads this: microsite.js, rotate()).
     The time each is fully visible is data-rotate-hold on the element in index.html. */
  --rotate-fade: 1s;
  --proof-sage: #e6e8da; /* statistics: a pale sage */
  --proof-card: #fff9f5; /* testimonials: warm cream */
  --proof-grey: #857e77;
  --proof-text: #535150;
  display: grid;
  gap: clamp(24px, 3vw, 40px);
  /* Sits first under the section heading, above the reels. */
  margin-bottom: clamp(28px, 4vw, 44px);
}

@media (min-width: 900px) {
  .c1-proof {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
}

.c1-results,
.c1-testimonials {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Left: the four figures. */
.c1-results__panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  padding: clamp(16px, 2vw, 24px) clamp(18px, 2.4vw, 30px);
  border-radius: 16px;
  background: var(--proof-sage);
}

.c1-results__grid {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin: 0;
  padding: 0;
  list-style: none;
}

.c1-results__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(16px, 2.4vw, 30px);
  padding-block: clamp(8px, 1.2vw, 14px);
}

.c1-results__item + .c1-results__item {
  border-top: 1px solid rgba(133, 126, 119, 0.22);
}

.c1-results__item strong {
  min-width: 2.7ch;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(46px, 4.6vw, 70px);
  line-height: 1;
  color: var(--proof-grey);
}

.c1-results__item span {
  font-size: clamp(14px, 1.2vw, 16.5px);
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink);
}

.c1-results__note {
  margin: 0;
  text-align: right;
  font-size: 11.5px;
  font-weight: 300;
  line-height: 1.4;
  color: var(--muted);
}

/* Right: the three testimonials. */
.c1-quotes {
  flex: 1;
  display: grid;
  grid-auto-rows: 1fr;
  gap: clamp(12px, 1.6vw, 18px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.c1-quote {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(24px, 2.4vw, 28px) clamp(34px, 3.6vw, 46px) clamp(30px, 2.8vw, 34px) clamp(50px, 5vw, 66px);
  border-radius: 16px;
  background: var(--proof-card);
}

.c1-quote blockquote {
  margin: 0;
  font-size: clamp(13.5px, 1.1vw, 15.5px);
  font-weight: 300;
  line-height: 1.6;
  color: var(--proof-text);
}

/* Whose words they are: a small line under each quote. */
.c1-quote__source {
  margin: 12px 0 0;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.c1-quote::before,
.c1-quote::after {
  position: absolute;
  font-family: var(--display);
  font-weight: 500;
  font-size: 56px;
  line-height: 1;
  color: var(--proof-grey);
}

/* One at a time: the statements stack in one cell and fade into each other, so
   each side keeps the height of its longest statement and nothing jumps. */
.c1-proof.is-rotating .c1-results__grid,
.c1-proof.is-rotating .c1-quotes {
  display: grid;
  grid-auto-rows: auto;
  gap: 0;
  align-items: stretch;
}

.c1-proof.is-rotating .c1-results__item,
.c1-proof.is-rotating .c1-quote {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  /* The leaving statement fades out... */
  transition: opacity var(--rotate-fade) ease, visibility 0s linear var(--rotate-fade);
}

.c1-proof.is-rotating .c1-results__item.is-active,
.c1-proof.is-rotating .c1-quote.is-active {
  opacity: 1;
  visibility: visible;
  /* ...then the next waits that long and fades in: out, then in, never both at once. */
  transition: opacity var(--rotate-fade) ease var(--rotate-fade), visibility 0s linear var(--rotate-fade);
}

.c1-proof.is-rotating .c1-results__item + .c1-results__item {
  border-top: 0;
}

.c1-proof.is-rotating .c1-results__item {
  align-self: center;
}

/* Left and right need the same room whichever statement is showing. */
.c1-proof.is-rotating .c1-results__panel,
.c1-proof.is-rotating .c1-quotes {
  min-height: clamp(150px, 14vw, 190px);
}

/* The little buttons under each side. */
.c1-proof__dots {
  display: flex;
  justify-content: center;
  margin-top: 6px;
}

.c1-proof__dots[hidden] {
  display: none;
}

.c1-proof__dot {
  position: relative;
  width: 44px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.c1-proof__dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border: 1px solid var(--olive);
  border-radius: 50%;
  background: transparent;
  transition: background 0.25s ease;
}

.c1-proof__dot[aria-current="true"]::before,
.c1-proof__dot:hover::before {
  background: var(--olive);
}

.c1-proof__dot:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: -4px;
}

@media (prefers-reduced-motion: reduce) {
  .c1-proof.is-rotating .c1-results__item,
  .c1-proof.is-rotating .c1-quote {
    transition: none;
  }
}

/* Footnote row under the story: footnote 1 (left) and the source notes 2 and 3 (right)
   start on the same line on a wide screen. One column below 1000px, in reading order:
   copy, footnote 1, video and cards, notes 2 and 3. */
.c1-story__foot {
  min-width: 0;
}

.c1-story__foot p,
.c1-sci__notes p {
  margin: 0;
  font-size: 11.5px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--muted);
}

@media (max-width: 999px) {
  .c1-story__cell--copy {
    order: 1;
    padding-bottom: 0;
  }

  .c1-story__foot--left {
    order: 2;
    padding: 14px var(--gutter) clamp(32px, 5vw, 56px);
  }

  .c1-story__col {
    order: 3;
  }

  .c1-story__foot--right {
    order: 4;
    padding: 0 var(--gutter) clamp(28px, 4vw, 40px);
  }
}

@media (min-width: 700px) and (max-width: 999px) {
  .c1-story__foot--right {
    padding-inline: clamp(20px, 2.4vw, 30px);
  }
}

@media (min-width: 1000px) {
  .c1-story__cells {
    grid-template-rows: 1fr auto;
  }

  .c1-story__foot--left {
    padding: 0 clamp(32px, 3.6vw, 64px) clamp(24px, 3.6svh, 60px);
  }

  .c1-story__foot--right {
    padding: 0 clamp(20px, 2.4vw, 30px) clamp(24px, 3.6svh, 60px);
  }

  .c1-sci {
    margin-bottom: 0;
  }
}


/* Before and after one wash (9 Oct 2026): the supplied 2 x 2 scalp close-ups, shown whole as a small
   photo with a caption. A click (or tap) enlarges it in a <dialog> (.c1-photo, microsite.js,
   initPhotoZoom). On a phone or tablet the small photo follows the quotes, centred; from 900px it is
   a narrow third column beside the figures and the quotes, which take smaller type and tighter
   cards to make the room. */
.c1-beforeafter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0 auto;
  width: min(100%, 340px);
}

.c1-beforeafter__open {
  position: relative;
  display: block;
  width: 100%;
  border-radius: 16px;
  cursor: zoom-in;
}

.c1-beforeafter picture {
  display: block;
  width: 100%;
}

.c1-beforeafter img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  background: var(--proof-sage);
}

/* A small magnifier in the corner says the photo can be enlarged. */
.c1-beforeafter__zoom {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 249, 245, 0.92);
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(26, 26, 24, 0.25);
  transition: transform 0.25s ease;
}

.c1-beforeafter__zoom svg {
  width: 18px;
  height: 18px;
}

.c1-beforeafter__open:hover .c1-beforeafter__zoom,
.c1-beforeafter__open:focus-visible .c1-beforeafter__zoom {
  transform: scale(1.12);
}

.c1-beforeafter__open:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 3px;
}

.c1-beforeafter figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
}

.c1-beforeafter figcaption strong {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--ink);
}

.c1-beforeafter figcaption span {
  font-size: 11.5px;
  font-weight: 300;
  line-height: 1.4;
  color: var(--muted);
}

/* The enlarged photographs: a gallery in a dialog, one at a time. The stage keeps one height so the
   buttons do not jump as the portrait collages and the landscape slide take turns. */
.c1-photo {
  width: min(94vw, 880px);
  max-width: calc(100vw - 24px);
  max-height: calc(100svh - 24px);
  padding: 14px 14px 16px;
  border: 0;
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 20px 60px rgba(26, 26, 24, 0.3);
  overflow: auto;
}

.c1-photo::backdrop {
  background: rgba(26, 26, 24, 0.62);
}

.c1-photo__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(calc(100svh - 230px), 640px);
}

.c1-photo__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin: 0;
}

.c1-photo__item[hidden] {
  display: none;
}

.c1-photo picture {
  display: block;
  max-width: 100%;
}

.c1-photo img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100svh - 270px);
  margin: 0 auto;
  border-radius: 10px;
}

.c1-photo__caption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  text-align: center;
}

.c1-photo__caption strong {
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
}

.c1-photo__caption span {
  font-size: 12px;
  font-weight: 300;
  color: var(--muted);
}

.c1-photo__count,
.c1-photo__note {
  margin: 6px 0 0;
  text-align: center;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.4;
  color: var(--muted);
}

.c1-photo__count {
  color: var(--ink);
}

.c1-photo__nav,
.c1-photo__close {
  border: 0;
  border-radius: 50%;
  background: rgba(255, 249, 245, 0.92);
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(26, 26, 24, 0.25);
  cursor: pointer;
}

.c1-photo__nav {
  position: absolute;
  z-index: 1;
  top: 50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  padding: 0;
}

.c1-photo__nav[hidden] {
  display: none;
}

.c1-photo__nav--prev {
  left: 4px;
}

.c1-photo__nav--next {
  right: 4px;
}

.c1-photo__nav:hover,
.c1-photo__nav:focus-visible,
.c1-photo__close:hover,
.c1-photo__close:focus-visible {
  background: var(--surface);
}

.c1-photo__close {
  position: absolute;
  z-index: 2;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  font-size: 26px;
  line-height: 1;
}

/* "All 4 photos": a small pill on the thumbnail. */
.c1-beforeafter__more {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 249, 245, 0.92);
  color: var(--ink);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  box-shadow: 0 2px 8px rgba(26, 26, 24, 0.25);
}

@media (min-width: 900px) {
  /* Figures | quotes | the small photo. */
  .c1-proof {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) clamp(140px, 13vw, 176px);
    gap: clamp(14px, 1.8vw, 26px);
  }

  .c1-beforeafter {
    width: 100%;
    margin: 0;
    justify-content: flex-start;
  }

  .c1-results__panel {
    padding: clamp(14px, 1.5vw, 20px) clamp(16px, 1.8vw, 26px);
  }

  .c1-results__item {
    column-gap: clamp(12px, 1.6vw, 22px);
  }

  .c1-results__item strong {
    font-size: clamp(38px, 3.5vw, 54px);
  }

  .c1-results__item span {
    font-size: clamp(12.5px, 1vw, 14.5px);
  }

  .c1-quote {
    padding: clamp(18px, 1.8vw, 24px) clamp(28px, 2.8vw, 38px) clamp(22px, 2.2vw, 28px) clamp(42px, 4vw, 54px);
  }

  .c1-quote blockquote {
    font-size: clamp(12.5px, 1vw, 14.5px);
    line-height: 1.55;
  }

  .c1-beforeafter figcaption strong {
    font-size: 13px;
  }

  .c1-beforeafter figcaption span {
    font-size: 11px;
  }
}
/* =============================================================================
   Key ingredients under the story video  (.c1-story__col, .c1-sci)
   The four ingredient cards, one at a time under the ingredient video, five
   seconds each (microsite.js, initScience), with dots, and the source notes
   under the column. Without the script, or with reduced motion, all four show
   one under the other.
============================================================================= */

.c1-story__col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.c1-story__col .c1-story__cell--media {
  flex: none;
  aspect-ratio: 16 / 9;
  min-height: 0;
}

/* As wide as the video above it. */
.c1-sci {
  --rotate-fade: 0.5s; /* fade out, then in; see .c1-proof and microsite.js rotate() */
  margin: clamp(14px, 1.8vw, 22px) 0 clamp(28px, 4vw, 40px);
}

@media (min-width: 1000px) {
  .c1-sci {
    margin: clamp(14px, 2svh, 22px) 0 clamp(20px, 3svh, 36px);
  }
}

.c1-sci[hidden] {
  display: none;
}

.c1-sci__box {
  padding: clamp(18px, 2vw, 26px) clamp(20px, 2.4vw, 30px);
  background: #fff9f5;
}

@media (min-width: 700px) {
  .c1-sci__box {
    border-radius: 16px;
  }
}

.c1-sci__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.c1-sci__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.c1-sci__item + .c1-sci__item {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(133, 126, 119, 0.22);
}

.c1-sci__name {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(21px, 1.8vw, 26px);
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink);
}

.c1-sci__amount {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  margin: 0;
}

.c1-sci__amount strong {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(40px, 3.6vw, 56px);
  line-height: 1;
  color: #857e77;
}

.c1-sci__amount span {
  font-size: 13px;
  font-weight: 300;
  color: var(--muted);
}

.c1-sci__finding {
  margin: 0;
  font-size: clamp(13.5px, 1.1vw, 15px);
  font-weight: 300;
  line-height: 1.65;
  color: #535150;
}

.c1-sci__ref {
  margin-left: 1px;
  color: inherit;
  text-decoration: none;
}

.c1-sci__source {
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid rgba(133, 126, 119, 0.22);
  font-size: 11.5px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--muted);
}

/* One at a time: the items stack in one cell, so the panel keeps the height of
   the longest card; the leaving one fades out, then the next fades in. */
.c1-sci.is-rotating .c1-sci__list {
  display: grid;
}

.c1-sci.is-rotating .c1-sci__item {
  grid-area: 1 / 1;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--rotate-fade) ease, visibility 0s linear var(--rotate-fade);
}

.c1-sci.is-rotating .c1-sci__item.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--rotate-fade) ease var(--rotate-fade), visibility 0s linear var(--rotate-fade);
}

@media (prefers-reduced-motion: reduce) {
  .c1-sci.is-rotating .c1-sci__item {
    transition: none;
  }
}

.c1-sci__notes {
  display: grid;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--muted);
}

.c1-sci__notes p {
  margin: 0;
}


.c1-sci__notes a {
  color: var(--ink);
  text-underline-offset: 3px;
}

.c1-quote::before {
  content: "\201C";
  top: 14px;
  left: clamp(16px, 2vw, 24px);
}

.c1-quote::after {
  content: "\201D";
  right: clamp(16px, 2vw, 24px);
  bottom: -6px;
}

/* The range section is only an introduction (heading and one line) above the two products.
   It is not a screen of its own: it has no data-fit attribute (data-fit="off" does not work
   here, because the later [data-fit][data-fit] rules in polish.css and tablet.css win). */
.c1-range.c1-range--intro {
  padding: var(--section-y) 0 clamp(20px, 3vw, 36px);
  /* A snap point of its own, so "Our Products" and the nav land on this heading rather
     than snapping on past it to the shampoo. */
  scroll-snap-align: start;
  /* The same colour as the shampoo copy panel beneath it. */
  background: var(--panel);
}

.c1-range--intro .c1-range__head {
  max-width: none;
  margin-bottom: 0;
}

.c1-range--intro .c1-range__head .c1-h2 {
  margin-bottom: 14px;
}

.c1-step {
  /* "Step 01:" / "Step 02:" at the start of the shampoo and serum headings. */
  color: var(--muted);
  font-weight: 300;
  letter-spacing: 0.01em;
}

/* =============================================================================
   3 & 4 — PRODUCT DETAIL (deck s6, s7)  .c1-detail--shampoo / --serum
============================================================================= */

.c1-detail {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--panel);
}

.c1-detail__media img {
  /* Stacked (phones, portrait tablets): the whole photograph at its own
     proportions, full width — no product cut. */
  width: 100%;
  height: auto;
}

.c1-detail__inner {
  padding-block: clamp(30px, 6vw, 56px) clamp(40px, 7vw, 64px);
}

.c1-detail__panel {
  max-width: 560px;
}

.c1-detail__panel .c1-eyebrow {
  display: block;
  margin-bottom: 14px;
}

.c1-detail .c1-h2 {
  font-size: clamp(28px, 3vw, 46px);
  margin-bottom: clamp(16px, 2.4svh, 26px);
}

.c1-detail__name {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(19px, 1.6vw, 23px);
  line-height: 1.2;
}

.c1-detail__meta {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}

.c1-detail__body {
  margin-top: clamp(10px, 1.6svh, 16px);
}

.c1-detail__body p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--olive-deep);
}

.c1-detail__body p + p {
  margin-top: 6px;
}

.c1-detail__complex {
  margin-top: clamp(14px, 2.4svh, 24px);
  padding-top: clamp(12px, 1.8svh, 16px);
  border-top: 1px solid var(--hairline);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--olive);
}

.c1-actions {
  display: grid;
  gap: clamp(10px, 1.5svh, 14px);
  margin-top: clamp(10px, 1.6svh, 14px);
}

.c1-action {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.c1-action__icon {
  width: 44px;
  height: auto;
}

.c1-action__title {
  margin-bottom: 3px;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

.c1-action__body {
  font-size: 13px;
  line-height: 1.6;
  color: var(--olive-deep);
}

/* The availability line, with the cross-link to the other product beneath
   it, inside the copy panel (clear of the photograph). */
.c1-detail__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(10px, 1.6svh, 14px);
  margin-top: clamp(18px, 3svh, 28px);
}

/* Cross-link to the other product: a ghost pill, lightly backed so it
   reads over the scene photograph. */
.c1-detail__cross {
  margin-top: 14px;
  padding: 12px 22px;
  background: rgba(255, 253, 248, 0.5);
}

/* A "Back" arrow points left and eases left on hover. Doubled class so it
   outranks polish.css's shared arrow transforms, which load later. */
.c1-btn .c1-btn__arrow.c1-btn__arrow--back {
  transform: scaleX(-1);
}

.c1-btn:hover .c1-btn__arrow.c1-btn__arrow--back,
.c1-btn:focus-visible .c1-btn__arrow.c1-btn__arrow--back {
  transform: scaleX(-1) translateX(4px);
}

.c1-detail__buy,
.c1-stockists__buy {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  /* Split screen (Website Sample.pdf): a solid panel for the copy on one half,
     the photograph on the other, with a clean edge between them. Shampoo has
     the copy on the left; the serum mirrors it. */
  .c1-detail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: stretch;
    min-height: calc(100svh - var(--fit-header, 72px));
  }

  /* polish.css centres [data-fit] sections; the split screen must fill. */
  .c1-detail[data-fit][data-fit] {
    align-content: stretch;
  }

  .c1-detail__inner {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: none;
    margin: 0;
    /* The bottom padding leaves room for the Next / Back button below. */
    padding: clamp(28px, 4svh, 56px) var(--split-pad-side)
      calc(var(--split-foot) + var(--split-btn) + 20px) var(--split-pad-copy);
    background: var(--panel);
  }

  /* Next / Back: at the foot of the panel, to the right of the "Click for Key
     Ingredients" button (same distance from the bottom, same 44px height). */
  .c1-detail {
    --cue-w: 222px;
  }

  .c1-detail__cross {
    position: absolute;
    left: calc(var(--split-pad-copy) + var(--cue-w) + 10px);
    bottom: var(--split-foot);
    min-height: var(--split-btn);
    margin: 0;
    padding: 0 16px;
    font-size: 10.5px;
    letter-spacing: 0.14em;
  }

  .c1-detail--serum .c1-detail__cross {
    left: calc(var(--split-pad-side) + var(--cue-w) + 10px);
  }

  .c1-detail--serum .c1-detail__inner {
    grid-column: 2;
    /* Clear of the fixed dot rail on the right. */
    padding: clamp(28px, 4svh, 56px) var(--split-pad-rail)
      calc(var(--split-foot) + var(--split-btn) + 20px) var(--split-pad-side);
  }

  .c1-detail__panel {
    width: 100%;
    max-width: min(560px, 44vw);
  }
}

/* Full-bleed photographs (.c1-bleed: hero, shampoo, serum) in overlay mode
   (the hero from 700px wide, shampoo and serum from 900px).
   Sized to the section's full height and anchored right, so the products are
   never cropped top or bottom. On a screen wider than the photograph, the
   spare width on the left (behind the copy) is empty wall fading into
   --ground; on a narrower one the overflow is cropped from the left, which is
   the same empty wall. Placed after both sections so it outranks their
   stacked-mode image rules. */
@media (min-width: 700px) and (min-aspect-ratio: 5/4) {
  /* The hero photograph. :where() keeps the selectors as light as `.c1-bleed`
     was, and leaves the shampoo and serum photographs to the block below. */
  .c1-bleed:where(:not(.c1-detail__media)) {
    position: absolute;
    inset: 0;
    z-index: -2;
    display: flex;
    justify-content: flex-end;
    overflow: hidden;
  }

  .c1-bleed:where(:not(.c1-detail__media)) img {
    flex: none;
    width: auto;
    height: 100%;
    max-width: none;
    max-height: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%);
    mask-image: linear-gradient(90deg, transparent 0, #000 22%);
  }
}

/* Shampoo and serum (from 900px wide; narrower landscape screens keep the
   stacked layout): the photograph fills its own half, cropped to fit, no fade
   into the panel. The products sit at the right of both photographs, so the
   crop is anchored right. */
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .c1-detail__media.c1-bleed {
    position: relative;
    inset: auto;
    z-index: auto;
    display: block;
    justify-content: flex-end;
    overflow: hidden;
    grid-column: 2;
    grid-row: 1;
  }

  .c1-detail--serum .c1-detail__media.c1-bleed {
    grid-column: 1;
  }

  .c1-detail__media.c1-bleed img {
    position: absolute;
    inset: 0;
    flex: none;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: 100% 50%;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* =============================================================================
   4b — KEY INGREDIENTS  .c1-hotspot  (shampoo and serum sections)
   A button and a card for each product. Wide screens: the button sits at the
   foot of the copy panel, left of the Next / Back link, and the card opens over
   the copy when it is pressed (click, Enter, Space or a tap; Escape closes it).
   Smaller screens: a bar under the photograph opens the card in place. One semantic <table> each, laid out
   as blocks (name and amount, then the description).
============================================================================= */

/* The pill buttons below are also used by the Made for Malaysia topics. */
.c1-ingpanel__tabs {
  display: inline-flex;
  gap: 6px;
}

.c1-ingpanel__tabs[hidden] {
  display: none;
}

.c1-ingpanel__tabs button {
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: transparent;
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.c1-ingpanel__tabs button:hover {
  border-color: var(--olive);
}

.c1-ingpanel__tabs button[aria-selected="true"] {
  border-color: var(--umber);
  background: var(--umber);
  color: var(--ground);
}

.c1-ingpanel__tabs button:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 2px;
}

.c1-hotspot {
  position: relative;
  background: var(--panel);
}

.c1-hotspot__cue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 0 var(--gutter);
  border: 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: transparent;
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
}

.c1-hotspot__cue::after {
  content: "+";
  font-size: 16px;
  line-height: 1;
}

.c1-hotspot__cue[aria-expanded="true"]::after {
  content: "\2212";
}

.c1-hotspot__cue:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: -4px;
}

.c1-hotspot__card {
  display: none;
  container-type: inline-size;
  padding: 20px var(--gutter) 26px;
}

.c1-hotspot.is-open .c1-hotspot__card {
  display: block;
}

.c1-hotspot__card table,
.c1-hotspot__card tbody {
  display: block;
}

.c1-hotspot__card caption {
  display: block;
  padding-bottom: 12px;
  text-align: left;
  font-family: var(--display);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.2;
  color: var(--ink);
}

.c1-hotspot__card thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.c1-hotspot__card tbody {
  display: grid;
  gap: 0 28px;
}

.c1-hotspot__card tbody tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 14px;
  row-gap: 3px;
  padding: 11px 0;
  border-top: 1px solid var(--hairline);
}

.c1-hotspot__card tbody th,
.c1-hotspot__card tbody td {
  display: block;
  padding: 0;
  border: 0;
  text-align: left;
}

.c1-hotspot__card tbody th {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
}

.c1-hotspot__card .c1-hotspot__amt {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.2;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--olive);
  white-space: nowrap;
}

.c1-hotspot__card tbody td:last-child {
  grid-column: 1 / -1;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--olive-deep);
}

/* In the page flow (portrait tablets): keep clear of the dot rail. */
@media (min-width: 700px) and (max-width: 1439px) {
  .c1-hotspot__card {
    padding-right: max(var(--gutter), 76px);
  }
}

@container (min-width: 500px) {
  .c1-hotspot__card tbody {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Split-screen product sections: the button and card share the grid cell of
   the copy panel, and the card covers the copy when opened. */
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  /* Over the copy panel (shampoo: left half; serum: right half). The cell
     itself lets clicks through to the panel and the Next / Back link. */
  .c1-detail--shampoo .c1-hotspot {
    --spot-left: var(--split-pad-copy);
    --spot-right: var(--split-pad-side);
    grid-column: 1;
    grid-row: 1;
  }

  .c1-detail--serum .c1-hotspot {
    --spot-left: var(--split-pad-side);
    --spot-right: var(--split-pad-rail);
    grid-column: 2;
    grid-row: 1;
  }

  .c1-hotspot {
    z-index: 2;
    background: transparent;
    pointer-events: none;
  }

  /* Bottom-left of the panel, with the Next / Back link to its right. */
  .c1-hotspot__cue {
    position: absolute;
    left: var(--spot-left);
    bottom: var(--split-foot);
    z-index: 2;
    width: var(--cue-w);
    min-height: var(--split-btn);
    padding: 0 14px;
    gap: 10px;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    background: rgba(245, 242, 234, 0.92);
    pointer-events: auto;
  }

  /* The card covers the copy, above the button row. */
  .c1-hotspot__card {
    display: block;
    position: absolute;
    top: clamp(20px, 3.2svh, 40px);
    left: var(--spot-left);
    right: var(--spot-right);
    bottom: calc(var(--split-foot) + var(--split-btn) + 16px);
    z-index: 1;
    overflow: auto;
    padding: clamp(12px, 1.8svh, 20px) clamp(16px, 1.6vw, 24px);
    border: 1px solid var(--hairline);
    background: var(--panel);
    box-shadow: 0 10px 40px rgba(26, 26, 24, 0.1);
    opacity: 0;
    visibility: hidden;
    pointer-events: auto;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  .c1-hotspot.is-open .c1-hotspot__card {
    opacity: 1;
    visibility: visible;
  }

  .c1-hotspot__card tbody tr {
    padding: 8px 0;
  }

  .c1-hotspot__card caption {
    padding-bottom: 8px;
    font-size: clamp(16px, 1.4vw, 19px);
  }

  .c1-hotspot__card tbody td:last-child {
    font-size: 12px;
    line-height: 1.45;
  }

  .c1-hotspot__card tbody th {
    font-size: 12.5px;
  }
}

@media (min-width: 900px) and (min-aspect-ratio: 5/4) and (prefers-reduced-motion: reduce) {
  .c1-hotspot__card {
    transition: none;
  }
}

/* Narrower split screens (roughly 700 to 1199px wide): a smaller button pair
   and slimmer side padding, so both fit on one line in the half-width panel. */
@media (min-width: 900px) and (min-aspect-ratio: 5/4) and (max-width: 1199px) {
  .c1-detail {
    --cue-w: 198px;
  }

  .c1-detail--shampoo .c1-detail__inner {
    padding-left: 40px;
  }

  .c1-detail--shampoo .c1-hotspot {
    --spot-left: 40px;
  }

  .c1-detail--serum .c1-hotspot {
    --spot-left: 40px;
  }

  .c1-detail--serum .c1-detail__inner {
    padding-left: 40px;
  }

  .c1-hotspot__cue,
  .c1-detail__cross {
    font-size: 10px;
    letter-spacing: 0.1em;
  }

  .c1-hotspot__cue {
    padding: 0 12px;
    gap: 8px;
  }

  .c1-detail__cross {
    padding: 0 12px;
  }

  .c1-detail--shampoo .c1-detail__cross,
  .c1-detail--serum .c1-detail__cross {
    left: calc(40px + var(--cue-w) + 8px);
  }
}

/* =============================================================================
   4 — MADE FOR MALAYSIA  #malaysia  .c1-malaysia
   Text only. Header across the top, two panels side by side from 1200px
   (stacked below), and a closing line. Rows reuse .c1-actions / .c1-action.
============================================================================= */

.c1-malaysia {
  padding: var(--section-y) 0;
  background: var(--ground);
}

/* One hairline across the whole container, level with the rules above the
   other section headings (polish.css draws those on the head itself, which is
   only 62ch wide here). */
.c1-malaysia > .c1-wrap {
  position: relative;
  width: 100%;
}

.c1-malaysia > .c1-wrap::before {
  content: "";
  position: absolute;
  top: -18px;
  left: var(--gutter);
  right: var(--gutter);
  height: 1px;
  background: rgba(26, 26, 24, 0.12);
}

@media (min-width: 700px) and (max-width: 1439px) {
  .c1-malaysia > .c1-wrap::before {
    right: max(var(--gutter), 64px);
  }
}

.c1-malaysia .c1-malaysia__head::after {
  display: none;
}

.c1-malaysia__head {
  /* The heading and the first paragraph run the full width of the page (one line each on a
     wide screen), not a single narrow column. */
  max-width: none;
  margin-bottom: clamp(24px, 4svh, 40px);
}

.c1-malaysia__head .c1-eyebrow {
  display: block;
  margin-bottom: 14px;
}

.c1-malaysia__panel {
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
}

.c1-malaysia__label {
  margin-bottom: 10px;
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--olive);
}

.c1-malaysia__h3 {
  max-width: 24ch;
  margin-bottom: 12px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.15;
}

.c1-malaysia__body {
  max-width: 62ch;
  font-size: 14px;
  line-height: 1.7;
  color: var(--olive-deep);
}

/* The source line under a panel (a footnote, as in the story and the FAQ). */
.c1-malaysia__note {
  max-width: none;
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.c1-malaysia__panel .c1-actions {
  margin-top: clamp(14px, 2svh, 20px);
}

.c1-malaysia__panel .c1-action__body a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Two topics behind the same buttons as the ingredients panel, with artwork on
   the left that changes with them. Without JavaScript both topics show, one
   after the other, each with its label. */
.c1-malaysia__stage {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
}

.c1-malaysia__content {
  min-width: 0;
}

.c1-malaysia__tabs {
  margin-bottom: 18px;
}

.c1-action--plain {
  grid-template-columns: minmax(0, 1fr);
}

.c1-malaysia__media {
  position: relative;
  min-width: 0;
}

.c1-malaysia__fig {
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--surface-alt);
}

.c1-malaysia__fig + .c1-malaysia__fig {
  margin-top: 16px;
}

.c1-malaysia__fig picture,
.c1-malaysia__fig img,
.c1-malaysia__fig video {
  display: block;
  width: 100%;
  height: 100%;
}

.c1-malaysia__fig img,
.c1-malaysia__fig video {
  object-fit: cover;
  object-position: 50% 24%; /* keeps the face in a wider crop */
}

.c1-malaysia__fig:last-child video {
  object-position: 50% 40%;
}

/* Tabbed (script running): the topics share one cell so the block keeps the
   height of the taller one, and only the chosen one shows. */
.c1-malaysia__stage.is-tabbed .c1-malaysia__label {
  display: none;
}

.c1-malaysia__stage.is-tabbed .c1-malaysia__stack {
  display: grid;
}

.c1-malaysia__stage.is-tabbed .c1-malaysia__panel {
  grid-area: 1 / 1;
  padding-top: 0;
  border-top: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.c1-malaysia__stage.is-tabbed .c1-malaysia__panel.is-active {
  opacity: 1;
  visibility: visible;
}

.c1-malaysia__stage.is-tabbed .c1-malaysia__media {
  aspect-ratio: 3 / 4;
  max-width: 420px;
  background: var(--surface-alt);
}

.c1-malaysia__stage.is-tabbed .c1-malaysia__fig {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  margin: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.c1-malaysia__stage.is-tabbed .c1-malaysia__fig.is-active {
  opacity: 1;
}

@media (min-width: 1000px) {
  /* The artwork is portrait: a narrower column on the left, as tall as the
     text block; the topic buttons and text sit on the right. The markup keeps
     the text first, so screen readers and the stacked layout are unchanged. */
  .c1-malaysia__stage {
    grid-template-columns: minmax(260px, 0.62fr) minmax(0, 1fr);
    gap: clamp(40px, 5vw, 80px);
    align-items: stretch;
  }

  .c1-malaysia__stage .c1-malaysia__media {
    grid-column: 1;
    grid-row: 1;
  }

  .c1-malaysia__stage .c1-malaysia__content {
    grid-column: 2;
    grid-row: 1;
  }

  .c1-malaysia__stage.is-tabbed .c1-malaysia__media {
    aspect-ratio: auto;
    max-width: none;
    min-height: 320px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c1-malaysia__stage.is-tabbed .c1-malaysia__panel,
  .c1-malaysia__stage.is-tabbed .c1-malaysia__fig {
    transition: none;
  }
}

.c1-malaysia__closing {
  margin-top: clamp(22px, 3.4svh, 36px);
  padding-top: clamp(14px, 2svh, 20px);
  border-top: 1px solid var(--hairline);
  font-family: var(--display);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.4;
  color: var(--olive);
}

/* =============================================================================
   5 — OUR STORY (deck s8)  .c1-story--grid
============================================================================= */

.c1-story {
  background: var(--ground);
}

.c1-story__cells {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.c1-story__cell {
  min-width: 0;
}

.c1-story__cell--copy {
  padding: clamp(40px, 6vw, 64px) var(--gutter);
}

.c1-story__cell--media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--olive-deep);
  container-type: size;
}

.c1-story__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The ingredient name burned into each clip needs about 75% of the frame
   width ("Piroctone Olamine"). A cell narrower than 1.35:1 would crop it, so
   the whole frame is shown instead, on the page's ground colour. */
@container (max-aspect-ratio: 27/20) {
  .c1-story__cell--media .c1-story__video {
    object-fit: contain;
    background: var(--ground);
  }
}

.c1-story__cell .c1-eyebrow {
  display: block;
  margin-bottom: 16px;
}

.c1-story__cell--copy .c1-h2 {
  font-size: clamp(28px, 2.7vw, 42px);
  max-width: 30ch;
  margin-bottom: clamp(16px, 2.4svh, 24px);
}

.c1-story__cell p {
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--olive-deep);
  max-width: 60ch;
}

.c1-story__cell p + p {
  margin-top: 10px;
}


.c1-story__cell .c1-story__closing {
  display: flex;
  flex-direction: column;
  margin-top: clamp(16px, 2.4svh, 22px);
  padding-top: clamp(14px, 2svh, 18px);
  border-top: 1px solid var(--hairline);
  font-family: var(--display);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.4;
  color: var(--olive);
}

.c1-story__tagline {
  display: block;
  align-self: flex-start;
  width: clamp(150px, 14vw, 220px);
  height: auto;
  margin-top: clamp(10px, 1.6svh, 16px);
}

.c1-story__closing strong {
  font-weight: 500;
  color: var(--ink);
}

@media (min-width: 1000px) {
  /* One row, half and half: the copy on the left, the ingredient video on
     the right. */
  .c1-story__cells {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* The cell is wide enough here for the heading to run long; the
     narrow-screen cap would otherwise cost a line. */
  .c1-story__cell--copy .c1-h2 {
    max-width: none;
  }

  .c1-story__cell--copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(24px, 3.6svh, 60px) clamp(32px, 3.6vw, 64px);
  }

  .c1-story__cell p {
    font-size: 14px;
    line-height: 1.65;
  }

  .c1-story__cell--media {
    aspect-ratio: auto;
    min-height: 240px;
  }
}

/* =============================================================================
   6 — FROM OUR COMMUNITY  (restored from v1, 27 Sep 2026, with PACT's reels)
============================================================================= */

.c1-community[data-fit][data-fit] {
  scroll-snap-align: none;
}

.c1-community {
  padding: var(--section-y) 0;
  background: var(--surface-alt);
}

.c1-community__head {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: clamp(28px, 4vw, 48px);
}

.c1-community__head .c1-eyebrow {
  display: block;
  margin-bottom: 16px;
}

.c1-community__head .c1-follow {
  display: flex;
  gap: 8px;
}

/* Instagram and TikTok follow links (community head). */
.c1-follow a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  color: var(--ink);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.c1-follow a:hover,
.c1-follow a:focus-visible {
  border-color: var(--olive);
  background: var(--olive);
  color: var(--ground);
}

.c1-follow svg {
  width: 20px;
  height: 20px;
}

/* Two across on phones and tablets (the v1 swipe rail is retired), four
   across from 1000px. */
.c1-grid-4 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.8vw, 22px);
}

@media (min-width: 1000px) {
  .c1-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.c1-tile {
  display: block;
  background: var(--surface);
  border: 1px solid var(--hairline-soft);
  border-radius: 6px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.c1-tile:hover,
.c1-tile:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 22px 40px -26px rgba(26, 26, 24, 0.4);
}

.c1-tile__well {
  position: relative;
  aspect-ratio: 9 / 13;
  overflow: hidden;
  background: var(--surface-alt);
}

/* Reels are 9:16; the hook line sits mid-frame, so a centred cover crop to
   the 9:13 tile keeps it. */
.c1-tile__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.c1-tile:hover .c1-tile__video,
.c1-tile:focus-visible .c1-tile__video {
  transform: scale(1.03);
}

.c1-tile__body {
  padding: 18px 20px 22px;
}

.c1-tile__title {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.24;
}

@media (max-width: 560px) {
  .c1-tile__body {
    padding: 12px 12px 16px;
  }

  .c1-tile__title {
    font-size: 16.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c1-tile,
  .c1-tile__video {
    transition: none;
  }
}


/* In the press (redesigned 23 Oct 2026): a banner above the reels. A heading and one line; the belt, a row of the outlets'
   names running left like a ticker (it stops under the pointer or keyboard focus; each name is a link to its article); and
   the window, one story card that changes between four, with little dots (the same rotation as the quotes above). Without
   JavaScript, or with reduced motion, the belt is a row you scroll yourself and the four stories show one under the other. */
.c1-press {
  --press-card: #fff9f5;
  --press-line: rgba(133, 126, 119, 0.35);
  margin-bottom: clamp(24px, 3.4vw, 40px);
}

/* On a wide screen (23 Oct): the heading, the line and the belt take the left half, and the story window, one card changing
   between four with its picture on the left and its text on the right, takes the right half, beside the belt. Under 1000px
   they stack, the window under the belt. */
@media (min-width: 1000px) {
  .c1-press {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(20px, 3vw, 44px);
    align-items: center;
  }

  .c1-press__lead {
    min-width: 0;
  }

  .c1-press__lead .c1-press__belt {
    margin-bottom: 0;
  }
}

.c1-press__eyebrow {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--olive);
}

.c1-press__title {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: clamp(22px, 2.1vw, 31px);
  font-weight: 400;
  line-height: 1.12;
  color: var(--ink);
}

.c1-press__intro {
  max-width: 58ch;
  margin: 0 0 clamp(14px, 1.8vw, 20px);
  font-size: clamp(13.5px, 1.05vw, 15px);
  font-weight: 300;
  line-height: 1.6;
  color: var(--muted);
}

/* the belt. contain: inline-size: the names in a row, twice over, are far wider than the page, and without it that width
   counted as the page's own (the tablet and phone views came out wider than the screen). */
.c1-press__belt {
  contain: inline-size;
  margin: 0 0 clamp(14px, 1.8vw, 20px);
  border-block: 1px solid var(--press-line);
  overflow-x: auto;
  scrollbar-width: none;
}

.c1-press__belt::-webkit-scrollbar {
  display: none;
}

.c1-press__belt.is-running {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}

.c1-press__outlets {
  display: flex;
  align-items: center;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}

.c1-press__outlets li {
  flex: none;
  margin-right: clamp(26px, 3.6vw, 54px);
}

.c1-press__name {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  padding-block: 6px;
  font-family: var(--display);
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 400;
  color: var(--muted);
  white-space: nowrap;
  transition: color 0.25s ease;
}

.c1-press__name:hover,
.c1-press__name:focus-visible {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 6px;
}

.c1-press__name:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 2px;
}

/* the loop: the names are in the list twice (the second copy is added by the script), so moving it left by half its width
   and starting again is seamless. The time for one pass is set from the width (--belt-duration, in the script). */
.c1-press__belt.is-running .c1-press__outlets {
  animation: c1-press-belt var(--belt-duration, 45s) linear infinite;
}

.c1-press__belt.is-running:hover .c1-press__outlets,
.c1-press__belt.is-running:focus-within .c1-press__outlets {
  animation-play-state: paused;
}

@keyframes c1-press-belt {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* the window */
.c1-press__window {
  --rotate-fade: 0.8s; /* fade out, then in; the time each story is fully shown is data-rotate-hold on the element */
}

.c1-press__slides {
  display: grid;
  gap: clamp(14px, 1.8vw, 22px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.c1-press__slide {
  min-width: 0;
  border: 1px solid var(--press-line);
  background: var(--press-card);
}

.c1-press__window.is-rotating .c1-press__slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--rotate-fade) ease, visibility 0s linear var(--rotate-fade);
}

.c1-press__window.is-rotating .c1-press__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--rotate-fade) ease var(--rotate-fade), visibility 0s linear var(--rotate-fade);
}

.c1-press__link {
  /* a positioned parent for the visually hidden "In English:" label: with none, the label's box sat at the card's own place,
     off-screen to the right of a card that was not showing, and made the whole page wider than a phone */
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 44px;
  color: var(--ink);
}

.c1-press__link:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 3px;
}

.c1-press__media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--surface-alt);
}

/* the picture fills the frame without setting its height: beside the text the frame is as tall as the text, not as tall as a portrait photo */
.c1-press__media picture,
.c1-press__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.c1-press__media img {
  object-fit: cover;
}

/* where each picture is cropped (kept here, not in an inline style: the site's policy allows none) */
.c1-press__slide[data-image="press-shampoo"] .c1-press__media img { object-position: 50% 62%; }
.c1-press__slide[data-image="press-flatlay"] .c1-press__media img { object-position: 50% 45%; }
.c1-press__slide[data-image="press-duo"] .c1-press__media img { object-position: 50% 58%; }

.c1-press__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: clamp(16px, 2vw, 26px);
}

.c1-press__source {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.c1-press__outlet {
  font-family: var(--display);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 500;
  line-height: 1.2;
}

.c1-press__lang {
  padding: 1px 7px;
  border: 1px solid var(--press-line);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.5;
  color: var(--muted);
}

.c1-press__meta {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.c1-press__headline {
  font-family: var(--display);
  font-size: clamp(19px, 1.8vw, 25px);
  font-weight: 400;
  line-height: 1.22;
  overflow-wrap: anywhere;
}

.c1-press__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: 2px;
  border-bottom: 1px solid var(--ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}

.c1-press__arrow {
  flex: none;
  transition: transform 0.3s ease;
}

.c1-press__link:hover .c1-press__arrow,
.c1-press__link:focus-visible .c1-press__arrow {
  transform: translateX(3px);
}

/* beside the belt the card is half the width: smaller type and padding (this comes after the base rules above, on purpose) */
@media (min-width: 1000px) {
  .c1-press__media {
    flex-basis: 42%;
    min-height: 210px;
  }

  .c1-press__body {
    padding: clamp(16px, 1.6vw, 22px);
  }

  .c1-press__headline {
    font-size: clamp(18px, 1.5vw, 21px);
  }
}

@media (min-width: 700px) {
  .c1-press__link {
    flex-direction: row;
    align-items: stretch;
  }

  .c1-press__media {
    flex: 0 0 40%;
    aspect-ratio: auto;
    min-height: 200px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c1-press__name,
  .c1-press__arrow {
    transition: none;
  }

  .c1-press__belt.is-running .c1-press__outlets {
    animation: none;
  }
}
/* =============================================================================
   7 — STOCKISTS (deck s9)
============================================================================= */

.c1-stockists {
  position: relative;
  padding: var(--section-y) 0;
  background: var(--ground);
}

/* Zero-size anchor for the old #stockists address. */
.c1-anchor-alias {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
}

/* Top-anchored, like the Made for Malaysia and FAQ sections: the eyebrow sits
   the same distance from the top of the section as theirs. */
.c1-stockists[data-fit][data-fit] {
  align-content: start;
}

/* As a grid item of the fit section, .c1-wrap would shrink to its content and
   the head's rule with it. */
.c1-stockists > .c1-wrap {
  width: 100%;
}

/* Full container width, so the hairline above the eyebrow (drawn by polish.css
   at 100% of the head) runs as far as it does in the sections above. The
   heading keeps its own measure. */
.c1-stockists__head {
  position: relative;
  max-width: none;
  margin-bottom: clamp(28px, 4svh, 44px);
}

.c1-stockists .c1-stockists__head .c1-h2 {
  /* Same size and spacing as the other section headings (the fit rule sets
     the size). */
  margin-bottom: 16px;
}

/* One column across the page: the heading, one line of text, then the two
   shop buttons. The hairline above the eyebrow is drawn across
   the whole layout (like the FAQ), so it runs as far as the rules above 06 and 07. */
.c1-stockists__layout {
  position: relative;
  display: grid;
  gap: clamp(28px, 4vw, 48px);
}

.c1-stockists__layout::before {
  content: "";
  position: absolute;
  top: -18px;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(26, 26, 24, 0.12);
}

.c1-stockists .c1-stockists__head::after {
  display: none;
}

.c1-stockists__copy {
  min-width: 0;
  align-self: start;
}

.c1-stockists .c1-availability {
  font-size: 13px;
}

.c1-stockists .c1-availability::before {
  width: 56px;
}

.c1-stockists__head .c1-eyebrow {
  display: block;
  margin-bottom: 14px;
}

.c1-stockists__channels {
  margin-top: 18px;
  font-family: var(--display);
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.2;
  color: var(--ink);
}

/* The two shop buttons, under the line of text. */
.c1-stockists .c1-stockists__buy {
  margin-top: clamp(20px, 2.6vw, 28px);
}

.c1-stockists .c1-stockists__buy .c1-btn {
  min-height: 44px;
}

@media (max-width: 720px) {
  .c1-stockists .c1-stockists__buy .c1-btn {
    flex: 1 1 100%;
    justify-content: center;
    min-height: 48px;
  }
}

/* =============================================================================
   Footer (deck s9) — the one place --umber is used
============================================================================= */

.c1-footer {
  padding: clamp(44px, 6vw, 68px) 0 32px;
  background: var(--umber);
  color: var(--ground);
}

.c1-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(28px, 4vw, 60px);
  padding-bottom: clamp(32px, 4vw, 44px);
  border-bottom: 1px solid rgba(245, 242, 234, 0.16);
}

@media (max-width: 800px) {
  .c1-footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* "Distributed by" sits in the right-hand column, where "Made in Malaysia by"
   used to be (removed 29 Sep). Single column below 800px, so no offset there. */
@media (min-width: 801px) {
  .c1-footer__col--end {
    grid-column: 3;
  }
}

.c1-footer__logo {
  height: 40px;
  width: auto;
}

.c1-footer__label {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 14px;
}

.c1-footer__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
}

.c1-footer__links a:hover {
  opacity: 0.7;
}

.c1-footer__links--icons {
  flex-direction: row;
  align-items: center;
  gap: 18px;
  margin-top: 22px;
}

.c1-footer__links--icons svg {
  display: block;
  width: 20px;
  height: 20px;
}

.c1-footer__label--sub {
  margin-top: 26px;
  line-height: 1.7;
}

.c1-footer__label--contact {
  margin-top: 22px;
  margin-bottom: 8px;
}

.c1-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  line-height: 1.75;
  opacity: 0.8;
}

.c1-footer__wa {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.c1-footer__wa svg {
  width: 19px;
  height: 19px;
  flex: none;
}

.c1-footer__contact a:hover {
  opacity: 0.7;
}

.c1-footer__address {
  font-size: 14px;
  line-height: 1.75;
  opacity: 0.8;
}

.c1-footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 18px;
  padding-top: 24px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* =============================================================================
   6 — FAQ  #faq  (restored 29 Sep, from the v1 accordion)
   Native <details>/<summary>: opening, closing and keyboard use need no JS.
   The answers are ordinary content in the page source, so they read with
   scripts off; opening simply fades them in.
============================================================================= */

.c1-faq {
  padding: var(--section-y) 0;
  background: var(--surface);
}

.c1-faq__grid {
  position: relative;
  /* As a grid item of the fit section, .c1-wrap would shrink to its content. */
  width: 100%;
  display: grid;
  gap: clamp(22px, 4vw, 40px);
}

/* One continuous hairline across the whole section, level with the rule above
   the other section headings (polish.css draws those at top: -18px on the
   head; here the head is only a column wide, so the grid carries it). */
.c1-faq__grid::before {
  content: "";
  position: absolute;
  top: -18px;
  left: var(--gutter);
  right: var(--gutter);
  height: 1px;
  background: rgba(26, 26, 24, 0.12);
}

/* polish.css widens the right padding of .c1-wrap from 700px to 1439px to
   clear the dot rail; the rule follows the same edge as the other headings. */
@media (min-width: 700px) and (max-width: 1439px) {
  .c1-faq__grid::before {
    right: max(var(--gutter), 64px);
  }
}

.c1-faq .c1-faq__head::after {
  display: none;
}

.c1-faq__head {
  max-width: none;
  margin-bottom: 0;
  text-align: left;
}

/* The questions sit under the heading, centred on the page, on longer lines
   than the old side-by-side column. */
.c1-faq__list {
  min-width: 0;
  width: 100%;
  max-width: 980px;
  margin-inline: auto;
  border-top: 1px solid var(--hairline);
}

/* Three groups of questions, each a <details> of its own: the small-caps title is the
   summary, with the same plus and minus as the questions. The first group starts open;
   the groups share name="faq-section", so opening one closes the others. The questions
   inside keep the rules between them. */
.c1-faq__group {
  border-bottom: 1px solid var(--hairline);
}

/* A little air between the bands, so two closed groups do not run into one block. */
.c1-faq__group + .c1-faq__group {
  margin-top: 6px;
}

.c1-faq__group-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 64px; /* clear of the 44px tap-target floor */
  padding: 0 clamp(14px, 2vw, 22px);
  list-style: none;
  cursor: pointer;
  /* The whole row is a darker band than the questions beneath it. */
  background: var(--surface-alt);
  color: var(--ink);
  transition: background-color 0.25s ease;
}

.c1-faq__group-summary::-webkit-details-marker {
  display: none;
}

.c1-faq__group-summary:hover,
.c1-faq__group-summary:focus-visible {
  background: #e3dece;
}

.c1-faq__group-summary:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 2px;
}

.c1-faq__group-title {
  margin: 0;
  padding: 0;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: inherit;
}

.c1-faq__group[open] > .c1-faq__group-summary .c1-faq__icon::after {
  transform: scaleY(0);
}

.c1-faq__item {
  border-bottom: 1px solid var(--hairline);
}

.c1-faq__group-summary + .c1-faq__item {
  border-top: 1px solid var(--hairline);
}

/* A question that stands on its own below the three sections ("When and where can I buy"). */
.c1-faq__list > .c1-faq__item {
  margin-top: 6px;
  border-top: 1px solid var(--hairline);
}

/* The group draws the line under its last question. */
.c1-faq__group > .c1-faq__item:last-child {
  border-bottom: 0;
}

/* A linked question lands below the sticky header. */
.c1-faq__item[id] {
  scroll-margin-top: var(--fit-header, 72px);
}

.c1-faq__item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 56px; /* clear of the 44px tap-target floor */
  padding: clamp(16px, 2vw, 22px) 2px;
  list-style: none;
  cursor: pointer;
  font-family: var(--display);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink);
  transition: color 0.25s ease;
}

.c1-faq__item > summary::-webkit-details-marker {
  display: none;
}

.c1-faq__item > summary:hover,
.c1-faq__item > summary:focus-visible {
  color: var(--olive);
}

.c1-faq__item > summary:focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 2px;
}

.c1-faq__icon {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
}

.c1-faq__icon::before,
.c1-faq__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: currentColor;
  transition: transform 0.3s ease;
}

.c1-faq__icon::before {
  width: 13px;
  height: 1.5px;
}

.c1-faq__icon::after {
  width: 1.5px;
  height: 13px;
}

.c1-faq__item[open] .c1-faq__icon::after {
  transform: scaleY(0);
}

.c1-faq__item[open] .c1-faq__answer {
  animation: c1-faq-in 0.3s ease;
}

@keyframes c1-faq-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.c1-faq__answer p {
  max-width: none;
  padding: 0 2px clamp(18px, 2vw, 24px);
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--olive-deep);
}

/* Numbered steps under the lead line (How do I use the shampoo? / How do I apply the serum?). */
.c1-faq__answer p:has(+ .c1-faq__steps) {
  padding-bottom: 8px;
}

.c1-faq__steps {
  margin: 0;
  list-style: decimal outside; /* the page resets lists to none */
  padding: 0 2px clamp(18px, 2vw, 24px) 1.7em;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--olive-deep);
}

.c1-faq__steps li {
  padding-left: 0.3em;
}

.c1-faq__steps li + li {
  margin-top: 4px;
}

.c1-faq__steps li::marker {
  color: var(--muted);
}

.c1-faq__answer a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.c1-faq__answer a:hover {
  color: var(--olive);
}

/* Small print under an answer: footnotes and the asterisk line. Tucked up
   against the answer; the last one carries the space below. */
.c1-faq__answer .c1-faq__note {
  margin-top: -10px;
  padding-bottom: 8px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
}

.c1-faq__answer .c1-faq__note:last-child {
  padding-bottom: clamp(18px, 2vw, 24px);
}

/* The two contact links in the last answer: a 44px-high hit area on touch
   screens without changing how the sentence looks. */
@media (pointer: coarse), (max-width: 999px) {
  .c1-faq__answer a {
    display: inline-block;
    padding-block: 12px;
    margin-block: -12px;
  }
}

/* fit.css and polish.css centre [data-fit] content vertically, so opening an
   answer re-centred the section and moved the heading. Anchor the content to
   the top instead: the eyebrow and headline stay put, and only the items below
   an opened answer move. Triple attribute to outrank those rules. */
.c1-faq[data-fit][data-fit] {
  align-content: start;
  /* Opening an answer changes the section's height; a snap point would pull
     the page back to the section edge and make it jump. */
  scroll-snap-align: none;
}

@media (prefers-reduced-motion: reduce) {
  .c1-faq__icon::after,
  .c1-faq__group-summary,
  .c1-faq__item > summary {
    transition: none;
  }

  .c1-faq__item[open] .c1-faq__answer {
    animation: none;
  }
}

/* =============================================================================
   404 page (404.html)
============================================================================= */

.c1-notfound {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 22px;
  min-height: 100svh;
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--section-y) var(--gutter);
}

.c1-notfound img {
  height: 26px;
  width: auto;
  margin-bottom: 18px;
}

/* =============================================================================
   DESKTOP — one section per screen (fit.css tuning)
   Values are capped by an `svh` figure, so a tall screen keeps the original
   proportions and a short laptop tightens instead of overflowing.
============================================================================= */

.c1 {
  /* Announcement bar plus header, reclaimed by the hero. polish.js measures
     the real values; these are the fallbacks. */
  --fit-chrome: 98px;
  --fit-header: 72px;
}

@media (min-width: 1000px) and (min-height: 640px) {
  .c1 {
    --section-y: min(clamp(72px, 10vw, 130px), 5svh);
  }

  .c1-section__head .c1-h2,
  .c1-stockists__head .c1-h2 {
    font-size: min(clamp(30px, 3.6vw, 56px), 6.5svh);
  }

  .c1-hero h1 {
    font-size: min(clamp(40px, 5.4vw, 80px), 11svh);
  }

  /* The story grid fills its screen edge to edge: rows share the height,
     and the video cells stretch to meet the copy beside them. */
  .c1-story--grid[data-fit][data-fit] {
    align-content: stretch;
  }

  /* Community: tile wells take their height from the screen, not their
     width, so the whole section fits one screen on a laptop. */
  .c1-community__head {
    margin-bottom: min(clamp(28px, 4vw, 48px), 3.5svh);
  }

  .c1-tile__well {
    aspect-ratio: auto;
    height: min(40svh, 460px);
  }

  .c1-tile__body {
    padding: min(18px, 1.8svh) 20px min(22px, 2.2svh);
  }

  /* Content-sized rows that stretch to fill the screen when there is room;
     when there is not, the section grows (fit is a target, never a clip). */
  .c1-story--grid .c1-story__cells {
    align-content: stretch;
  }

  .c1-story__cell--copy .c1-h2 {
    font-size: min(clamp(26px, 2.4vw, 38px), 4.4svh);
  }

  .c1-story__cell .c1-story__closing {
    font-size: min(clamp(17px, 1.4vw, 21px), 2.5svh);
  }
}

/* Stockists shares the last screen with the footer (deck s9), wherever
   sections fill a screen (700px and up, incl. tablets). --fit-footer is
   measured by polish.js; the id outranks tablet.css's [data-fit] rules. */
@media (min-width: 700px) {
  #faq[data-fit][data-fit] {
    min-height: calc(100svh - var(--fit-header, 72px) - var(--fit-footer, 0px));
  }

  /* Buy Now is no longer the last section: it sizes to its content instead of
     filling a screen, but never less than 60% of one, so the side rail still
     marks it when you jump to it (the rail follows what sits at the middle of
     the screen). The id outranks the [data-fit] rules that load later. */
  #buy-now[data-fit][data-fit] {
    min-height: 60vh;
    min-height: 60svh;
    scroll-snap-align: none;
  }
}

/* Laptop-height screens (roughly 680-900px tall): the product panels carry
   the longest copy on the page, so they widen a little and their type scales
   with the screen height instead of overflowing it. */
@media (min-width: 900px) and (min-aspect-ratio: 5/4) and (max-height: 900px) {
  .c1-detail__panel {
    max-width: min(600px, 48vw);
  }

  .c1-detail .c1-h2 {
    font-size: min(clamp(28px, 3vw, 46px), 5svh);
  }

  .c1-detail__body p {
    font-size: 13.5px;
    line-height: 1.6;
  }

  .c1-action {
    gap: 12px;
  }

  .c1-action__body {
    font-size: 12.5px;
    line-height: 1.55;
  }
}

/* Short landscape screens (800px tall or less): the shampoo panel carries
   the longest copy plus the cross-link, so its vertical gaps tighten a
   little to keep the section to one screen. */
@media (min-width: 900px) and (min-aspect-ratio: 5/4) and (max-height: 800px) {
  .c1-detail__complex {
    margin-top: 12px;
    padding-top: 10px;
  }

  .c1-actions {
    gap: 8px;
  }

  .c1-detail__foot {
    margin-top: 12px;
    gap: 10px;
  }
}

@media (min-width: 1000px) and (max-height: 900px) {
  /* Laptop-height screens: the story copy is tightened so its section keeps to one screen. */
  .c1-story__cell p {
    font-size: 13.5px;
    line-height: 1.6;
  }

  .c1-story__cell--copy {
    padding-block: clamp(20px, 2.8svh, 40px);
  }
}