/* Redesign layer (branch meeth): navbar, home hero, footer, fonts. Loaded after the page CSS.
   Palette and font tokens live in styles/tokens.css. */

/* ------------------------------------------------------------------ smooth scrolling (Lenis, see interactions.js) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ------------------------------------------------------------------ fonts */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/vendor/font/redesign/InstrumentSans-normal.woff2) format('woff2');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(/vendor/font/redesign/InstrumentSans-italic.woff2) format('woff2');
}

.nine {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* The theme sets body { overflow-x: hidden; overflow-y: auto }, which makes <body> a scroll container
   that never scrolls, so position: sticky (the story deck) never pins. clip hides sideways overflow
   the same way without creating a scroll container. */
body.nine {
  overflow: visible !important;
  overflow-x: clip !important;
}
/* Headings: one sans family for everything (as in the reference), semibold with tight tracking. */
.nine :is(h1, h2, h3, h4, .h0, .h1, .h2, .h3):not(.nine-mark) {
  font-family: var(--font-family-display) !important;
  font-style: normal;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.12;
}

.nine-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font: 500 1.7rem/1.2 var(--font-family-text);
  text-decoration: none;
}
.nine-arrow {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nine-link span {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (hover: hover) {
  .nine-link:hover .nine-arrow { transform: translateX(4px); }
  .nine-link:hover span { background-size: 100% 1px; }
}
.nine-link:focus-visible {
  outline: 2px solid var(--nine-blush);
  outline-offset: 4px;
}

/* Big wordmark */
.nine-mark {
  display: inline-flex;
  align-items: flex-end;
  margin: 0;
  font: 500 1em/0.8 var(--font-family-text);
  letter-spacing: -0.075em;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ navbar */
.nine .header-wrapper {
  background: var(--nine-oxblood);
  border-bottom: 0;
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
}
.nine .header-wrapper--border-bottom { border-bottom: 0; }
.nine nav.header__inline-menu ul.list-menu li a,
.nine nav.header__inline-menu ul.list-menu li a span,
.nine .header__menu-item {
  text-transform: none !important;
}
.nine .header__menu-item {
  padding: 0;
  white-space: nowrap;
  color: #fff;
  font: 500 1.6rem/1.2 var(--font-family-text) !important;
  letter-spacing: -0.01em;
  text-transform: none !important;
}
.nine .header__menu-item span { text-decoration: none; }
.nine .header__menu-item span::after {
  content: '';
  display: block;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (hover: hover) {
  .nine .header__menu-item:hover span::after { transform: scaleX(1); }
}
.nine .header__active-menu-item span::after { transform: scaleX(1); }
.nine .header__inline-menu .list-menu--inline {
  flex-wrap: nowrap;
  gap: 0 clamp(22px, 3vw, 48px);
}
.nine .header__icon,
.nine .header__icon .icon { color: #fff; }

/* Right side: text labels instead of icons on desktop. */
.nine .header__icon--search,
.nine #cart-icon-bubble { text-decoration: none; }
.nine .nine-nav-label {
  font: 500 1.6rem/1.2 var(--font-family-text);
  letter-spacing: -0.01em;
  color: #fff;
  white-space: nowrap;
}
.nine .nine-nav-label--close { display: none; }
.nine details[open] > summary .nine-nav-label--open { display: none; }
.nine details[open] > summary .nine-nav-label--close { display: inline; }
.nine .header__icon--account,
.nine .header [data-wl-slot],
.nine .header [id^="wishlist-header-block"] { display: none !important; }
.nine #cart-icon-bubble > svg,
.nine #cart-icon-bubble .cart-count-bubble { display: none; }
.nine #cart-icon-bubble {
  width: auto;
  height: auto;
  padding: 0 0 0 clamp(20px, 2.6vw, 40px);
}
@media screen and (min-width: 990px) {
  .nine .header__icon--search > span > svg { display: none; }
  .nine .header__icon--search { width: auto; height: auto; }
}
@media screen and (max-width: 989px) {
  .nine .header__icon--search .nine-nav-label { display: none !important; }
  .nine .nine-nav-label { font-size: 1.5rem; }
  .nine #cart-icon-bubble { padding-left: 8px; }
}

/* Home: the header floats over the hero until you scroll past it. */
.nine--home .section-header:not(.scrolled-past-header):not(.menu-open) .header-wrapper {
  background: transparent;
}
.nine--home .section-header:not(.scrolled-past-header) .header__heading {
  opacity: 0;
  visibility: hidden;
}
.nine .header__heading {
  transition: opacity 0.3s ease, visibility 0.3s;
}
.nine .shopify-section-header-sticky.scrolled-past-header .header-wrapper {
  background: rgba(61, 4, 9, 0.86);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
}

/* ------------------------------------------------------------------ navbar: landing page
   Home only (body.nine--home); the inner pages keep the bar above. Overrides it where they meet.
   Floating, not a store bar (after fluxtheory.in). No full-width band: the page shows through.
     left   the 9skin wordmark in a small glass chip (hidden over the home hero, which has its own)
     right  a round glass search button, then one glass pill (.nine-navpill, see apply-redesign.mjs)
            holding the links and a white Bag chip with the count
   Phones: the pill holds just the Bag chip; the menu button is a round glass button at the far right.
   The header still hides on scroll down and returns on scroll up (sticky-header in interactions.js). */
.nine--home .header-wrapper,
.nine--home .shopify-section-header-sticky.scrolled-past-header .header-wrapper {
  background: transparent !important;
  border-bottom: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.nine--home .header-wrapper--border-bottom { border-bottom: 0; }
.nine--home .header__menu-item span::after { display: none; }
.nine--home .header-wrapper { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.nine--home .header {
  display: flex !important;
  align-items: center;
  gap: 10px;
  max-width: none;
  padding: 18px clamp(16px, 2.4vw, 36px) !important;
}
.nine--home .header__heading { order: 0; margin: 0 auto 0 0 !important; }
.nine--home .header__icons { order: 1; display: flex; align-items: center; margin: 0; }
.nine--home .nine-navpill { order: 2; }
.nine--home header-drawer { order: 3; margin: 0 !important; }

/* glass, shared by the logo chip, the pill and the round buttons */
.nine--home .header__heading-link,
.nine--home .nine-navpill,
.nine--home .header__icon--search,
.nine--home header-drawer .header__icon--menu {
  background: rgba(24, 3, 7, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 8px 24px rgba(10, 1, 3, 0.18);
  transition: background-color 0.25s ease, opacity 0.3s ease, visibility 0.3s;
}

/* logo chip */
.nine--home .header__heading-link {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 18px;
  border-radius: 999px;
}
.nine--home .header__heading-logo-wrapper { display: block; width: auto; }
.nine--home .header__heading-logo { width: 88px !important; height: auto !important; max-width: none; }

/* the pill */
.nine--home .nine-navpill {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 48px;
  padding: 4px;
  border-radius: 999px;
}
.nine--home .nine-navpill .header__inline-menu { margin: 0; }
.nine--home .header__inline-menu .list-menu--inline { flex-wrap: nowrap; gap: 2px; }
.nine--home .header__inline-menu li:has(#HeaderMenu-contact-us) { display: none; } /* contact lives in the footer */
.nine--home nav.header__inline-menu ul.list-menu li a,
.nine--home nav.header__inline-menu ul.list-menu li a span,
.nine--home .header__menu-item { text-transform: none !important; }
.nine--home .header__menu-item {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 16px !important;
  border-radius: 999px;
  white-space: nowrap;
  color: #fff;
  font: 500 1.45rem/1 var(--font-family-text) !important;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background-color 0.25s ease;
}
.nine--home .header__menu-item span { text-decoration: none !important; }
@media (hover: hover) {
  .nine--home .header__menu-item:hover { background: rgba(255, 255, 255, 0.1); }
}
.nine--home .header__active-menu-item { background: rgba(255, 255, 255, 0.12); }
.nine--home .header__menu-item:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

/* Bag chip: white, with a count badge */
.nine--home #cart-icon-bubble {
  display: inline-flex;
  align-items: center;
  width: auto;
  height: 38px;
  margin: 0 0 0 4px;
  padding: 0 8px 0 16px;
  border-radius: 999px;
  background: #fff;
  text-decoration: none;
  transition: transform 0.15s ease, background-color 0.25s ease;
}
.nine--home #cart-icon-bubble:active { transform: scale(0.97); }
.nine--home #cart-icon-bubble > svg,
.nine--home #cart-icon-bubble .cart-count-bubble { display: none; }
.nine--home #cart-icon-bubble .nine-nav-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--nine-oxblood);
  font: 600 1.45rem/1 var(--font-family-text);
}
.nine--home .nine-cart-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--nine-red);
  color: #fff;
  font: 600 1.15rem/1 var(--font-family-text);
}

/* round glass buttons: search, and the menu on phones */
.nine--home .header__icon--search,
.nine--home header-drawer .header__icon--menu {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0;
  border-radius: 999px;
  color: #fff;
}
.nine--home .header__icon,
.nine--home .header__icon .icon { color: #fff; }
.nine--home .header__icon--search .nine-nav-label { display: none !important; }
.nine--home .header__icon--search > span { display: grid; place-items: center; }
/* the shared bar hides the search icon on desktop (text label instead); here it is the icon */
.nine--home .header__icon--search svg.icon-search { display: block !important; }
.nine--home .header__icon--search svg.icon-close { display: none !important; }
.nine--home details[open] > .header__icon--search svg.icon-search { display: none !important; }
.nine--home details[open] > .header__icon--search svg.icon-close { display: block !important; }
@media (hover: hover) {
  .nine--home .header__icon--search:hover,
  .nine--home header-drawer .header__icon--menu:hover { background: rgba(24, 3, 7, 0.6); }
}
.nine--home .header__icon--account,
.nine--home .header [data-wl-slot],
.nine--home .header [id^="wishlist-header-block"] { display: none !important; }

/* Home: over the hero the big 9skin mark is the logo, so the chip waits until you scroll past it. */
.nine--home .section-header:not(.scrolled-past-header) .header__heading {
  opacity: 0;
  visibility: hidden;
}
.nine--home .header__heading { transition: opacity 0.3s ease, visibility 0.3s; }

/* once scrolled, the page under the nav is often white: a deeper tint keeps the glass rich, not grey */
.nine--home .section-header.scrolled-past-header :is(.header__heading-link, .nine-navpill, .header__icon--search, header-drawer .header__icon--menu) {
  background: rgba(36, 5, 11, 0.9);
}
/* phone menu: the brand's dark burgundy with large white links, instead of the theme's white drawer */
.nine--home #menu-drawer { background: #180307; }
.nine--home #menu-drawer .menu-drawer__menu-item {
  padding: 14px 28px;
  color: #fff;
  font: 600 3rem/1.1 var(--font-family-text) !important;
  letter-spacing: -0.03em;
}
.nine--home #menu-drawer .menu-drawer__utility-links { background: rgba(255, 255, 255, 0.04); }
.nine--home #menu-drawer :is(.menu-drawer__account, .list-social__link),
.nine--home #menu-drawer .menu-drawer__account * { color: rgba(255, 255, 255, 0.85) !important; }
.nine--home #menu-drawer .icon { color: inherit; }
/* the theme's dimming block under its old square menu button */
.nine--home header-drawer .header__icon--menu::before { display: none !important; }

@media screen and (max-width: 989px) {
  .nine--home .header { padding: 12px 14px !important; gap: 8px; }
  .nine--home .header__heading-link { height: 44px; padding: 0 14px; }
  .nine--home .header__heading-logo { width: 74px !important; }
  .nine--home .nine-navpill { height: 44px; }
  .nine--home .header__icon--search,
  .nine--home header-drawer .header__icon--menu { width: 44px; height: 44px; }
}

/* ------------------------------------------------------------------ home hero */
.nine-hero-section { margin: 0; }
.nine-hero {
  position: relative;
  isolation: isolate;
  height: 100vh;
  height: 100svh;
  min-height: 640px;
  max-height: 1100px;
  margin-top: calc(-1 * var(--header-height, 90px));
  overflow: hidden;
  color: #fff;
  /* static velvet: shows before the live shader's first frame and wherever WebGL is unavailable
     (same as VELVET_FALLBACK in components/VelvetShader.tsx) */
  background:
    radial-gradient(55% 42% at 24% 58%, rgba(166, 44, 64, 0.42) 0%, rgba(142, 23, 45, 0.28) 38%, rgba(74, 7, 21, 0) 72%),
    linear-gradient(158deg, rgba(0, 0, 0, 0) 34%, rgba(142, 23, 45, 0.22) 46%, rgba(0, 0, 0, 0) 58%),
    linear-gradient(158deg, rgba(0, 0, 0, 0) 58%, rgba(74, 7, 21, 0.35) 68%, rgba(0, 0, 0, 0) 80%),
    linear-gradient(100deg, #2a050c 0%, #4A0715 30%, #24050B 62%, #180307 100%);
}
/* live velvet shader layer (app/hero-velvet.tsx), first child: under the portrait, shade and copy */
.nine-hero__velvet {
  display: block !important; /* the theme hides div:empty */
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* the portrait is a cut-out: she stands bottom-left at full height, the velvet shows around her */
.nine-hero__media img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: auto;
  height: 100%;
  max-width: 64%;
  object-fit: contain;
  object-position: left bottom;
  transform-origin: 30% 100%;
  animation: nine-hero-in 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes nine-hero-in {
  from { opacity: 0; transform: scale(1.05); }
  to { opacity: 1; transform: none; }
}
.nine-hero__shade {
  display: block !important; /* the theme hides div:empty */
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(18, 2, 4, 0.5) 0%, rgba(18, 2, 4, 0) 22%),
    linear-gradient(0deg, rgba(18, 2, 4, 0.55) 0%, rgba(18, 2, 4, 0) 42%),
    linear-gradient(270deg, rgba(18, 2, 4, 0.35) 0%, rgba(18, 2, 4, 0) 45%);
}
.nine-hero__copy {
  position: absolute;
  z-index: 2;
  /* centred vertically, in the right-hand half beside the portrait */
  top: 50%;
  left: 50%;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 clamp(24px, 4vw, 64px);
  text-align: center;
  transform: translateY(-50%);
}
.nine-hero__copy > * { animation: nine-rise 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.35s both; }
.nine-hero__lede {
  margin: 0 0 22px;
  color: #fff !important;
  font: 600 clamp(4.4rem, 5vw, 7.6rem)/1.02 var(--font-family-text) !important;
  letter-spacing: -0.035em;
}
.nine-hero__text {
  max-width: 440px;
  margin: 0 0 34px;
  font: 500 1.7rem/1.4 var(--font-family-text);
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.92);
}
.nine-hero__cta {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 34px;
  border-radius: 999px;
  background: #fff;
  color: #000 !important;
  font: 600 1.6rem/1 var(--font-family-text);
  text-decoration: none;
  transition: transform 0.25s ease, background-color 0.25s ease;
}
.nine-hero__cta:hover { transform: translateY(-2px); background: #f1ece8; }
.nine-hero__cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.nine-hero__mark {
  position: absolute;
  z-index: 2;
  left: clamp(20px, 2vw, 32px);
  bottom: clamp(20px, 3vw, 44px);
  font-size: clamp(140px, 21vw, 380px);
  color: #fff !important;
  animation: nine-rise 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s both;
}
.nine-hero__scroll {
  position: absolute;
  z-index: 2;
  left: 59.5%;
  bottom: 18px;
  color: #fff;
  font: 500 1.7rem/1.2 var(--font-family-text);
  text-decoration: none;
}
.nine-hero__scroll::after {
  content: '';
  display: block;
  height: 1px;
  margin-top: 4px;
  background: currentColor;
  transform-origin: left;
  animation: nine-scroll-cue 2.4s ease-in-out 1.6s infinite;
}
@keyframes nine-scroll-cue {
  0% { transform: scaleX(0); transform-origin: left; }
  45% { transform: scaleX(1); transform-origin: left; }
  55% { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}
@keyframes nine-rise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

@media screen and (max-width: 749px) {
  .nine-hero {
    min-height: 600px;
    max-height: none;
  }
  .nine-hero__media img {
    top: 0;
    bottom: auto;
    width: 100%;
    max-width: none;
    height: 68%;
    object-fit: cover;
    object-position: 64% 12%;
    transform: none;
    animation-name: nine-hero-in-m;
  }
  @keyframes nine-hero-in-m {
    from { opacity: 0; transform: scale(1.06); }
    to { opacity: 1; transform: none; }
  }
  .nine-hero__shade {
    background:
      linear-gradient(180deg, rgba(18, 2, 4, 0.55) 0%, rgba(18, 2, 4, 0) 18%),
      linear-gradient(0deg, var(--nine-oxblood) 0%, var(--nine-oxblood) 32%, rgba(61, 4, 9, 0) 52%);
  }
  .nine-hero__copy {
    left: 0;
    right: 0;
    top: auto;
    bottom: calc(31vw + 32px);
    padding: 0 20px;
    transform: none;
  }
  .nine-hero__lede { font-size: 3.6rem !important; margin-bottom: 12px; }
  .nine-hero__text { font-size: 1.5rem; margin-bottom: 20px; max-width: 320px; }
  .nine-hero__cta { height: 46px; padding: 0 28px; font-size: 1.5rem; }
  .nine-hero__mark {
    left: 14px;
    bottom: 16px;
    font-size: 33vw;
  }
  .nine-hero__scroll { display: none; }
}

/* ------------------------------------------------------------------ footer */
/* Photo footer revealed from underneath: the wrapper clips, interactions.js moves the inner layer
   from -100% to 0 as the wrapper scrolls into view (the footer looks pinned to the viewport bottom). */
.nine .footer { display: none; }
.nine-reveal {
  position: relative;
  overflow: hidden;
}
.nine-reveal__inner { will-change: transform; }
/* landing page: the newsletter is a sheet lifting off the footer: rounded bottom edge and a shadow,
   with the footer tucked up under the curve. The footer fills the screen and its content settles in
   (--reveal 0 -> 1 as it is uncovered, from interactions.js) */
.nine--home .nine-news {
  z-index: 3;
  border-radius: 0 0 clamp(28px, 4vw, 64px) clamp(28px, 4vw, 64px);
  box-shadow: 0 40px 80px -30px rgba(24, 3, 7, 0.55);
}
.nine--home .nine-reveal { --reveal: 1; margin-top: calc(-1 * clamp(28px, 4vw, 64px)); }
.nine--home .nine-footer { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.nine--home .nine-footer__content {
  flex: 1;
  opacity: calc(0.2 + 0.8 * var(--reveal));
  transform: translate3d(0, calc((1 - var(--reveal)) * 90px), 0) scale(calc(0.92 + 0.08 * var(--reveal)));
}
.nine--home .nine-footer__bg {
  transform: scale(calc(1.14 - 0.14 * var(--reveal)));
  filter: brightness(calc(0.45 + 0.55 * var(--reveal)));
}
.nine-footer {
  position: relative;
  overflow: hidden;
  color: #fff;
  font-family: var(--font-family-text);
  background: var(--nine-oxblood);
}
.nine-footer__bg {
  display: block !important; /* the theme hides div:empty */
  position: absolute;
  inset: 0;
  /* portrait on the right; the dark left and a soft gradient keep the centred white text readable */
  background:
    linear-gradient(90deg, rgba(24, 3, 7, 0.78) 0%, rgba(24, 3, 7, 0.6) 38%, rgba(24, 3, 7, 0.15) 62%, rgba(24, 3, 7, 0) 75%),
    url(/assets/redesign/footer-portrait.webp) right 22% / auto 118% no-repeat; /* a little smaller, so she clears the link row */
  background-color: #180307;
}
.nine-footer__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 96px 48px;
}
.nine-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 32px;
}
.nine-footer__logo {
  display: block;
  width: 256px;
  height: auto;
}
.nine-footer__sub {
  align-self: flex-end;
  margin: 10px -12px 0 0;
  color: #fff;
  font: 500 2.4rem/1.2 var(--font-family-text);
  letter-spacing: -0.01em;
}
.nine-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  margin-bottom: 48px;
  padding: 0 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  color: #fff;
  font: 500 1.5rem/1 var(--font-family-text);
  text-decoration: none;
  transition: transform 0.2s ease;
}
@media (hover: hover) {
  .nine-pill:hover { transform: scale(1.05); }
}
.nine-pill:active { transform: scale(0.95); }
.nine-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nine-footer__links a,
.nine-footer__credit a {
  color: #fff;
  text-decoration: none;
  transition: color 0.2s ease;
}
.nine-footer__links a { font: 500 1.6rem/1.5 var(--font-family-text); }
@media (hover: hover) {
  .nine-footer__links a:hover { color: rgba(255, 255, 255, 0.7); }
  .nine-footer__credit a:hover { color: rgba(255, 255, 255, 0.7); }
}
.nine-footer__credit {
  position: relative;
  z-index: 2;
  padding-bottom: 24px;
  text-align: center;
}
.nine-footer__credit p {
  margin: 0;
  color: #fff;
  font: 500 1.3rem/1.2 var(--font-family-text);
}
.nine-footer__credit a { text-decoration: underline; text-underline-offset: 2px; }
.nine-footer a:focus-visible,
.nine-pill:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
@media screen and (max-width: 749px) {
  .nine-footer__bg {
    background-image:
      linear-gradient(180deg, rgba(24, 3, 7, 0.1) 0%, rgba(24, 3, 7, 0.6) 50%, rgba(24, 3, 7, 0.85) 100%),
      url(/assets/redesign/footer-portrait.webp);
    background-position: center, 72% top; /* phones: her face at the top, the text on the dark below */
    background-size: cover, cover;
  }
  /* phones: her face stays clear at the top; the content sits lower, on the darkened drape */
  .nine-footer__content { padding: 64px 24px 40px; min-height: 92svh; justify-content: flex-end; }
  .nine-footer__logo { width: 160px; }
  .nine-footer__sub { font-size: 2rem; margin-right: -8px; }
  .nine-footer__links { gap: 16px 24px; }
  .nine-footer__links a { font-size: 1.5rem; }
}

/* ------------------------------------------------------------------ home story deck
   Pinned stage (one screen per card plus one for the intro). interactions.js scrubs it:
   intro words sharpen out of a blur, the intro fades as the first card rises, each square card
   slides up from below the fold onto the stack, and its two flanking words sharpen in as it lands. */
.nine-deck {
  position: relative;
  height: calc((var(--cards) + 1) * 100vh);
  background: #fff;
  color: var(--nine-oxblood);
}
.nine-deck__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.nine-deck__intro {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  text-align: center;
}
.nine-deck .nine-deck__headline {
  margin: 0;
  color: var(--nine-oxblood);
  font: 500 clamp(3.6rem, 4.2vw, 6.4rem) / 1.05 var(--font-family-text) !important;
  letter-spacing: -0.035em !important;
}
.nine-deck__line { display: block; }
.nine-w {
  display: inline-block;
  opacity: 0;
  filter: blur(14px);
  transform: translateY(10px);
  transition:
    opacity 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.nine-deck.is-in .nine-w,
.nine-rail.is-in .nine-w {
  opacity: 1;
  filter: blur(0);
  transform: none;
}
.nine-deck__row {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 48px;
}
.nine-deck__side {
  position: relative;
  height: 1.2em;
  font: 500 clamp(2.8rem, 2.6vw, 4rem) / 1.1 var(--font-family-text);
  letter-spacing: -0.03em;
}
.nine-deck__word {
  position: absolute;
  top: 0;
  white-space: nowrap;
  opacity: 0;
  filter: blur(14px);
  transform: translateY(24px);
  will-change: opacity, filter, transform;
}
.nine-deck__side--left .nine-deck__word { right: 0; }
.nine-deck__side--right .nine-deck__word { left: 0; }
.nine-deck__frame {
  position: relative;
  width: min(85vw, 520px);
  aspect-ratio: 1;
}
.nine-deck__card {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  transform: translateY(110vh);
  will-change: transform;
}
.nine-deck__card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.25);
  will-change: transform;
}
.nine-deck__card:focus-visible {
  outline: 2px solid var(--nine-red);
  outline-offset: 4px;
}
@media screen and (max-width: 749px) {
  .nine-deck__row {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    justify-items: center;
    align-content: center;
    gap: 14px;
  }
  .nine-deck__side { width: min(85vw, 520px); font-size: 3rem; }
  .nine-deck__side--left { order: 1; }
  .nine-deck__frame { order: 2; }
  .nine-deck__side--right { order: 3; }
  .nine-deck__side--left .nine-deck__word { left: 0; right: auto; }
  .nine-deck__side--right .nine-deck__word { right: 0; left: auto; }
}
/* No script / reduced motion: a plain stack, everything visible. */
.nine-deck--static { height: auto; }
.nine-deck--static .nine-deck__stage { position: static; height: auto; overflow: visible; padding: 96px 24px; }
.nine-deck--static .nine-deck__intro { position: static; margin-bottom: 48px; }
.nine-deck--static .nine-w { opacity: 1; filter: none; transform: none; }
.nine-deck--static .nine-deck__row { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; max-width: 1200px; margin: 0 auto; }
.nine-deck--static .nine-deck__side { display: none; }
.nine-deck--static .nine-deck__frame { display: contents; }
.nine-deck--static .nine-deck__card { position: relative; aspect-ratio: 1; transform: none; }
.nine-deck--static .nine-deck__card img { transform: none; }

/* ------------------------------------------------------------------ home product rail */
.nine-rail {
  --gutter: clamp(20px, 3.5vw, 50px);
  padding: clamp(72px, 9vw, 128px) 0 clamp(64px, 8vw, 112px);
  background: #fff;
  color: var(--nine-oxblood);
  overflow: hidden;
}
.nine-rail__head {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 420px);
  align-items: end;
  gap: 32px 64px;
  padding: 0 var(--gutter);
  margin-bottom: clamp(36px, 4vw, 56px);
}
.nine-rail .nine-rail__title {
  margin: 0;
  color: var(--nine-oxblood);
  font: 600 clamp(4rem, 5.2vw, 7.6rem) / 0.98 var(--font-family-text) !important;
  letter-spacing: -0.045em !important;
}
.nine-rail__aside p {
  margin: 0 0 24px;
  color: rgba(61, 4, 9, 0.72);
  font: 400 1.7rem/1.45 var(--font-family-text);
}
.nine-rail__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.nine-link--dark { color: var(--nine-oxblood); }
.nine-rail__nav { display: flex; gap: 8px; }
.nine-rail__btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(61, 4, 9, 0.22);
  border-radius: 50%;
  background: #fff;
  color: var(--nine-oxblood);
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}
.nine-rail__btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (hover: hover) {
  .nine-rail__btn:not(:disabled):hover { background: var(--nine-oxblood); border-color: var(--nine-oxblood); color: #fff; }
}
.nine-rail__btn:active:not(:disabled) { transform: scale(0.94); }
.nine-rail__btn:disabled { opacity: 0.35; cursor: default; }
.nine-rail__btn:focus-visible { outline: 2px solid var(--nine-red); outline-offset: 3px; }

.nine-rail__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(260px, 24vw, 340px);
  gap: 20px;
  margin: 0;
  padding: 0 var(--gutter) 8px;
  scroll-padding: 0 var(--gutter);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  cursor: grab;
}
.nine-rail__track::-webkit-scrollbar { display: none; }
.nine-rail__track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.nine-rail__track.is-dragging a { pointer-events: none; }

/* Cards rise and unmask in a stagger the first time the rail scrolls into view. */
.nine-pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: calc(0.25s + var(--i) * 80ms);
}
.nine-rail.is-in .nine-pcard { opacity: 1; transform: none; }
.nine-pcard__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #f6eeea;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.1s cubic-bezier(0.7, 0, 0.2, 1);
  transition-delay: calc(0.25s + var(--i) * 80ms);
}
.nine-rail.is-in .nine-pcard__media { clip-path: inset(0 0 0 0); }
.nine-pcard__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 1.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.5s ease;
  transition-delay: calc(0.25s + var(--i) * 80ms), 0s;
}
.nine-rail.is-in .nine-pcard__img { transform: scale(1); }
.nine-pcard__img--alt { opacity: 0; }
@media (hover: hover) {
  .nine-pcard:hover .nine-pcard__img--alt { opacity: 1; }
  .nine-rail.is-in .nine-pcard:hover .nine-pcard__img { transform: scale(1.04); transition-delay: 0s; }
}
.nine-pcard__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--nine-oxblood);
  color: #fff;
  font: 500 1.2rem/1 var(--font-family-text);
  letter-spacing: 0.01em;
}
.nine-pcard__badge--out { background: rgba(255, 255, 255, 0.92); color: var(--nine-oxblood); }
.nine-pcard__wish {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--nine-oxblood);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.6s ease 1s, transform 0.2s ease;
}
.nine-rail.is-in .nine-pcard__wish { opacity: 1; }
.nine-pcard__wish svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.nine-pcard__wish:active { transform: scale(0.9); }
.nine-pcard__wish:focus-visible { outline: 2px solid var(--nine-red); outline-offset: 2px; }
.nine-pcard__info {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  padding: 16px 2px 14px;
}
.nine-rail .nine-pcard__name {
  margin: 0;
  font: 600 1.8rem/1.25 var(--font-family-text) !important;
  letter-spacing: -0.02em !important;
}
.nine-pcard__name a { color: var(--nine-oxblood); text-decoration: none; }
.nine-pcard__price {
  margin: 0;
  color: var(--nine-oxblood);
  font: 500 1.6rem/1.4 var(--font-family-text);
  white-space: nowrap;
  text-align: right;
}
.nine-pcard__price s {
  display: block;
  color: rgba(61, 4, 9, 0.45);
  font-size: 1.3rem;
}
.nine-pcard__kind,
.nine-pcard__rating {
  margin: 0;
  grid-column: 1 / -1;
  color: rgba(61, 4, 9, 0.64);
  font: 400 1.45rem/1.4 var(--font-family-text);
}
.nine-pcard__rating { margin-top: 6px; color: var(--nine-oxblood); font-size: 1.35rem; }
.nine-pcard__rating > span[aria-hidden] { color: var(--nine-red); }
.nine-pcard__count { color: rgba(61, 4, 9, 0.5); }
.nine-pcard__form { margin-top: auto; }
.nine-pcard__form form { margin: 0; }
.nine-pcard__add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 46px;
  border: 1px solid var(--nine-oxblood);
  border-radius: 999px;
  background: transparent;
  color: var(--nine-oxblood);
  font: 500 1.5rem/1 var(--font-family-text);
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.2s ease;
}
@media (hover: hover) {
  .nine-pcard__add:not(:disabled):hover { background: var(--nine-oxblood); color: #fff; }
}
.nine-pcard__add:active:not(:disabled) { transform: scale(0.97); }
.nine-pcard__add:disabled { border-color: rgba(61, 4, 9, 0.18); color: rgba(61, 4, 9, 0.4); cursor: not-allowed; }
.nine-pcard__add.loading { opacity: 0.6; }
.nine-pcard__add:focus-visible { outline: 2px solid var(--nine-red); outline-offset: 3px; }

.nine-rail__progress {
  position: relative;
  height: 2px;
  margin: clamp(28px, 3vw, 40px) var(--gutter) 0;
  background: rgba(61, 4, 9, 0.12);
  overflow: hidden;
}
.nine-rail__progress span {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--nine-oxblood);
  transition: transform 0.15s linear;
}
@media screen and (max-width: 749px) {
  .nine-rail__head { grid-template-columns: 1fr; }
  .nine-rail__track { grid-auto-columns: 74vw; gap: 14px; }
  .nine-rail__nav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nine-pcard,
  .nine-pcard__media,
  .nine-pcard__img,
  .nine-pcard__wish { transition: none; opacity: 1; transform: none; clip-path: none; }
}

/* ------------------------------------------------------------------ home day & night ritual
   Desktop (.is-pinned, set by interactions.js): a pinned stage where scrolling turns day into night.
   --p (0 day .. 1 night) mixes the background and text colours and moves the switch; --wipe reveals
   the night photo from the top down over the day photo, like dusk; each ritual's copy fades with a blur.
   Phones / reduced motion: the two rituals simply stack, the night one dark. */
.nine-dn {
  --day-bg: #fbf0e4;
  --night-bg: #1b0205;
  --day-ink: #3d0409;
  --night-ink: #fbe9e2;
  --p: 0;
  --wipe: 0;
  position: relative;
  color: var(--day-ink);
  background: var(--day-bg);
}
.nine-dn__head { padding: clamp(64px, 8vw, 112px) clamp(20px, 3.5vw, 50px) 0; }
.nine-dn__stage { padding: 0 clamp(20px, 3.5vw, 50px) clamp(64px, 8vw, 112px); }
.nine-dn :is(p, li, span, s) { color: inherit; }
.nine-dn__head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(28px, 3vw, 44px);
}
.nine-dn .nine-dn__title {
  margin: 0;
  max-width: 14ch;
  color: inherit !important;
  font: 600 clamp(3.4rem, 4vw, 6rem) / 1 var(--font-family-text) !important;
  letter-spacing: -0.04em !important;
}
.nine-dn.is-in .nine-w { opacity: 1; filter: blur(0); transform: none; }
.nine-dn__switch {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 500 1.5rem/1 var(--font-family-text);
}
.nine-dn__label--night { opacity: calc(0.45 + 0.55 * var(--p)); }
.nine-dn__label--day { opacity: calc(1 - 0.55 * var(--p)); }
.nine-dn__track {
  position: relative;
  width: 72px;
  height: 2px;
  background: currentColor;
  opacity: 0.35;
}
.nine-dn__dot {
  position: absolute;
  top: 50%;
  left: calc(var(--p) * 100%);
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in oklab, currentColor 18%, transparent);
}
.nine-dn__state {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
}
.nine-dn__state + .nine-dn__state { margin-top: 64px; }
.nine-dn__media {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  max-height: 72vh;
  overflow: hidden;
  background: #e9dccf;
}
.nine-dn__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nine-dn__eyebrow {
  margin: 0 0 18px;
  font: 500 1.4rem/1.3 var(--font-family-text);
  letter-spacing: 0.02em;
  opacity: 0.75;
}
.nine-dn__eyebrow span {
  display: inline-block;
  margin-right: 10px;
  padding: 4px 9px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 1.2rem;
}
.nine-dn .nine-dn__name {
  margin: 0 0 18px;
  color: inherit !important;
  font: 600 clamp(3.2rem, 3.4vw, 5.2rem) / 1.02 var(--font-family-text) !important;
  letter-spacing: -0.04em !important;
}
.nine-dn__text {
  max-width: 46ch;
  margin: 0 0 26px;
  font: 400 1.7rem/1.5 var(--font-family-text);
  opacity: 0.8;
}
.nine-dn__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
}
.nine-dn__chips li {
  padding: 9px 14px;
  border: 1px solid color-mix(in oklab, currentColor 30%, transparent);
  border-radius: 999px;
  font: 500 1.4rem/1 var(--font-family-text);
}
.nine-dn__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 32px;
  padding-top: 24px;
  border-top: 1px solid color-mix(in oklab, currentColor 18%, transparent);
}
.nine-dn .nine-dn__cols h4 {
  margin: 0 0 10px;
  color: inherit !important;
  font: 600 1.3rem/1.2 var(--font-family-text) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  opacity: 0.7;
}
.nine-dn__cols ul { margin: 0; padding: 0; list-style: none; }
.nine-dn__cols li { font: 400 1.6rem/1.7 var(--font-family-text); }
.nine-dn__buy {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 20px;
}
.nine-dn__price {
  margin: 0;
  font: 600 2rem/1 var(--font-family-text);
  letter-spacing: -0.02em;
}
.nine-dn__price s {
  margin-left: 8px;
  font-size: 1.4rem;
  font-weight: 400;
  opacity: 0.5;
}
.nine-dn__form { flex: 0 0 200px; }
.nine-dn .nine-dn__add { border-color: currentColor; color: inherit; }
@media (hover: hover) {
  .nine-dn .nine-dn__add:hover { background: currentColor; }
  .nine-dn .nine-dn__add:hover > * { color: var(--day-bg); }
  .nine-dn__state--night .nine-dn__add:hover > * { color: var(--night-bg); }
}
.nine-dn__more {
  color: inherit;
  font: 500 1.5rem/1 var(--font-family-text);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.nine-dn__pair {
  margin: 24px 0 0;
  font: 400 1.4rem/1.4 var(--font-family-text);
  opacity: 0.7;
}
.nine-dn__pair a { color: inherit; text-underline-offset: 3px; }
.nine-dn a:focus-visible,
.nine-dn button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* The Rejuvenate shot has a bright daytime sky: dim it and wash the top into the night colour. */
.nine-dn__state--night .nine-dn__media img { filter: brightness(0.8) saturate(0.88); }
.nine-dn__state--night .nine-dn__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(27, 2, 5, 0.62) 0%, rgba(27, 2, 5, 0.18) 45%, rgba(27, 2, 5, 0) 70%);
  pointer-events: none;
}

/* Stacked layout: the night ritual on its own dark panel. */
.nine-dn:not(.is-pinned) .nine-dn__state--night {
  margin: 64px calc(-1 * clamp(20px, 3.5vw, 50px)) calc(-1 * clamp(64px, 8vw, 112px));
  padding: 64px clamp(20px, 3.5vw, 50px);
  background: var(--night-bg);
  color: var(--night-ink);
}
.nine-dn:not(.is-pinned) .nine-dn__switch { display: none; }

/* Pinned desktop layout. */
.nine-dn.is-pinned .nine-dn__pin { height: 300vh; }
.nine-dn.is-pinned {
  background: color-mix(in oklab, var(--day-bg), var(--night-bg) calc(var(--p) * 100%));
  color: color-mix(in oklab, var(--day-ink), var(--night-ink) calc(var(--p) * 100%));
}
.nine-dn.is-pinned .nine-dn__stage {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100svh;
  padding-top: 7vh;
  padding-bottom: 7vh;
  overflow: hidden;
}
/* Pinned copy sizes follow the screen height so the whole ritual always fits the stage. */
.nine-dn.is-pinned .nine-dn__eyebrow { margin-bottom: 1.8vh; }
.nine-dn.is-pinned .nine-dn__name { font-size: clamp(2.8rem, min(3.4vw, 5.6vh), 5.2rem) !important; margin-bottom: 1.8vh; }
.nine-dn.is-pinned .nine-dn__text { font-size: clamp(1.4rem, min(1.2vw, 2vh), 1.7rem); margin-bottom: 2.6vh; }
.nine-dn.is-pinned .nine-dn__chips { margin-bottom: 3vh; }
.nine-dn.is-pinned .nine-dn__chips li { padding: 1vh 14px; font-size: clamp(1.2rem, 1.6vh, 1.4rem); }
.nine-dn.is-pinned .nine-dn__cols { padding-top: 2.4vh; margin-bottom: 3vh; }
.nine-dn.is-pinned .nine-dn__cols li { font-size: clamp(1.3rem, min(1.1vw, 1.9vh), 1.6rem); line-height: 1.65; }
.nine-dn.is-pinned .nine-dn__pair { margin-top: 2.4vh; }
@media (max-height: 760px) {
  .nine-dn.is-pinned .nine-dn__chips,
  .nine-dn.is-pinned .nine-dn__pair { display: none; }
}
.nine-dn.is-pinned .nine-dn__states {
  position: relative;
  flex: 1;
  min-height: 0;
}
.nine-dn.is-pinned .nine-dn__state {
  position: absolute;
  inset: 0;
  margin: 0;
}
.nine-dn.is-pinned .nine-dn__media { height: 100%; max-height: none; aspect-ratio: auto; }
.nine-dn.is-pinned .nine-dn__state--day .nine-dn__media img {
  transform: scale(calc(1 + 0.06 * var(--p)));
  filter: brightness(calc(1 - 0.45 * var(--p)));
}
.nine-dn.is-pinned .nine-dn__state--night .nine-dn__media {
  clip-path: inset(0 0 calc((1 - var(--wipe)) * 100%) 0);
  background: transparent;
}
.nine-dn.is-pinned .nine-dn__state--night .nine-dn__media img {
  transform: scale(calc(1.08 - 0.08 * var(--wipe)));
}
.nine-dn.is-pinned .nine-dn__copy {
  opacity: var(--o, 1);
  filter: blur(var(--b, 0px));
  transform: translate3d(0, var(--y, 0px), 0);
  will-change: opacity, filter, transform;
}
.nine-dn.is-pinned .nine-dn__state:not(.is-active) .nine-dn__copy { pointer-events: none; }
.nine-dn.is-pinned .nine-dn__state--day .nine-dn__add:hover > * { color: var(--day-bg); }

@media screen and (max-width: 749px) {
  .nine-dn__head { flex-direction: column; align-items: flex-start; }
  .nine-dn__state { grid-template-columns: 1fr; }
  .nine-dn__media { aspect-ratio: 4 / 4.4; }
  .nine-dn__cols { grid-template-columns: 1fr 1fr; gap: 16px; }
  .nine-dn__form { flex: 1 1 160px; }
}

/* ------------------------------------------------------------------ home "how to use" reel (the ritual)
   "Five quiet minutes, twice a day." A five-minute dial: the brand's how-to video in a window at the
   centre of a fine ring, and the five steps sitting on the ring like the numbers of a clock. As the
   section scrolls (pinned) the ring revolves: each step swings round to sit beside the video (3
   o'clock; 6 o'clock on phones), large, with its details beside it, and its video ripples in over
   the last like a drop landing in water (assets/shaders.js videoRipple). interactions.js places the
   names every frame (--S is the ring's size). Click a name to revolve to it. */
.nine-ritual {
  --S: min(80svh, 44vw);
  --cx: 34vw;
  position: relative;
  height: 320svh;
  background: radial-gradient(70% 70% at 34% 50%, #2a070e 0%, #160406 70%);
  color: #fbe9e2;
}
.nine-ritual :is(p, span, a, h2, li, button) { color: inherit; }
.nine-ritual__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.nine-ritual__intro { position: absolute; right: clamp(20px, 3.5vw, 50px); top: clamp(88px, 12vh, 128px); max-width: 30rem; text-align: right; }
.nine-ritual .nine-ritual__title {
  margin: 0 0 14px;
  color: #fbe9e2 !important;
  font: 600 clamp(3.4rem, 3.6vw, 6rem) / 0.95 var(--font-family-text) !important;
  letter-spacing: -0.045em !important;
}
.nine-ritual.is-in .nine-w { opacity: 1; filter: blur(0); transform: none; }
.nine-ritual__text { margin: 0 0 0 auto; max-width: 30ch; font: 400 1.6rem/1.5 var(--font-family-text); opacity: 0.7; }

.nine-ritual__orbit { position: absolute; left: calc(var(--cx) - var(--S) / 2); top: calc(50% - var(--S) / 2); width: var(--S); height: var(--S); }
.nine-ritual__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.nine-ritual__ring circle { fill: none; stroke: rgba(251, 233, 226, 0.22); stroke-width: 1; vector-effect: non-scaling-stroke; }
/* a short bright arc where the active step sits */
/* (dashes on a non-scaling stroke are measured in screen px; this one is measured along the circle) */
.nine-ritual__ring .nine-ritual__tick { vector-effect: none; stroke: #ffb8b4; stroke-width: 0.5; stroke-dasharray: 3 97; stroke-dashoffset: 1.5; stroke-linecap: round; }
.nine-ritual__frame {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 54%;
  aspect-ratio: 4 / 5;
  translate: -50% -50%;
  overflow: hidden;
  border-radius: 6px;
  background: #24050b;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.8);
}
.nine-ritual__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s ease; }
.nine-ritual__video.is-on { opacity: 1; }
.nine-ritual__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.nine-ritual__frame.is-gl .nine-ritual__video { visibility: hidden; }
.nine-ritual__when {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 2;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(22, 4, 6, 0.55);
  font: 500 1.1rem/1 var(--font-family-text);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* the names on the ring: each li sits at the ring's centre; JS moves it out along its angle */
.nine-ritual__names { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.nine-ritual__names li { position: absolute; left: 50%; top: 50%; will-change: transform, opacity; }
.nine-ritual__name {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 4px;
  border: 0;
  background: none;
  color: #fbe9e2;
  font: 600 clamp(3.2rem, 3.4vw, 5.8rem) / 1 var(--font-family-text);
  letter-spacing: -0.045em;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  transition: color 0.4s ease;
}
.nine-ritual__name.is-on { color: #fff; }
.nine-ritual__name:hover { color: #ffb8b4; }
.nine-ritual__n { font: 500 1.2rem/1 var(--font-family-text); letter-spacing: 0.08em; opacity: 0.6; padding-top: 0.5em; }
.nine-ritual__name:focus-visible, .nine-ritual a:focus-visible { outline: 2px solid #fbe9e2; outline-offset: 4px; }

/* the active step's details, under its name at 3 o'clock */
.nine-ritual__detail { position: absolute; left: calc(var(--cx) + var(--S) / 2 + 36px); top: calc(50% + 46px); width: min(30rem, calc(100vw - var(--cx) - var(--S) / 2 - 80px)); }
.nine-ritual__info { position: absolute; inset: 0 auto auto 0; width: 100%; opacity: 0; translate: 0 10px; visibility: hidden; transition: opacity 0.45s ease, translate 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0.6s; }
.nine-ritual__info.is-on { opacity: 1; translate: 0 0; visibility: visible; transition: opacity 0.55s ease 0.15s, translate 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s, visibility 0s; }
.nine-ritual__kind { margin: 0 0 12px; font: 500 1.25rem/1 var(--font-family-text); letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.6; }
.nine-ritual__how { margin: 0 0 18px; font: 400 clamp(1.8rem, 1.4vw, 2.2rem) / 1.4 var(--font-family-text); }
.nine-ritual .nine-link { color: #fbe9e2; }

@media screen and (max-width: 749px) {
  .nine-ritual { --S: 78vw; --cx: 50vw; height: 300svh; }
  .nine-ritual__intro { left: 20px; right: 20px; top: 76px; max-width: none; text-align: left; }
  .nine-ritual .nine-ritual__title { font-size: 3rem !important; }
  .nine-ritual__text { display: none; }
  .nine-ritual__orbit { top: calc(47% - var(--S) / 2); }
  .nine-ritual__ring .nine-ritual__tick { rotate: 90deg; transform-origin: 50% 50%; }
  .nine-ritual__name { font-size: 2.4rem; }
  .nine-ritual__detail { left: 20px; right: 20px; width: auto; top: calc(47% + var(--S) / 2 + 64px); text-align: center; }
  .nine-ritual__how { font-size: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .nine-ritual__info { transition: none; }
}

/* ------------------------------------------------------------------ home "a note from Nayanthara"
   The paragraph reads along with the scroll: each word goes from faint to full as you move down,
   the portrait drifts slowly inside its frame, and the signature writes itself in at the end
   (all driven by --read / --drift / --sign from interactions.js). */
.nine-love {
  --gutter: clamp(20px, 3.5vw, 50px);
  --read: 1;
  --sign: 1;
  --drift: 0;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(32px, 6vw, 112px);
  padding: clamp(80px, 10vw, 160px) var(--gutter);
  background: #fbf3ee;
  color: var(--nine-oxblood);
}
.nine-love :is(p, span) { color: inherit; }
.nine-love__media {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #e9dccf;
}
.nine-love__media img {
  position: absolute;
  inset: -8% 0;
  width: 100%;
  height: 116%;
  object-fit: cover;
  object-position: 38% 30%;
  transform: translate3d(0, calc(var(--drift) * 6%), 0);
  will-change: transform;
}
.nine-love__eyebrow {
  margin: 0 0 24px;
  font: 500 1.4rem/1 var(--font-family-text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.6;
}
/* her closing line is the headline; "love" in crimson, as in "Self care is self love" */
.nine-love .nine-love__quote {
  max-width: 16ch;
  margin: 0 0 28px;
  color: var(--nine-oxblood) !important;
  font: 600 clamp(3.4rem, 3.9vw, 6rem) / 1.02 var(--font-family-text) !important;
  letter-spacing: -0.045em !important;
}
.nine-love__quote em { font-style: normal; color: #8e172d; }
.nine-love__word { white-space: nowrap; }
/* the heart between "Self" and "Love" (her own spelling, Self♡Love); it beats once when the note comes in */
.nine-love__heart {
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  margin: 0 0.04em 0 0.06em;
  vertical-align: 0.02em;
}
.nine-love__heart svg { display: block; width: 100%; height: 100%; fill: #8e172d; }
.nine-love.is-in .nine-love__heart { animation: nine-heartbeat 1.4s cubic-bezier(0.3, 0, 0.3, 1) 0.4s both; }
@keyframes nine-heartbeat {
  0%, 100% { transform: scale(1); }
  18% { transform: scale(1.28); }
  32% { transform: scale(0.96); }
  46% { transform: scale(1.16); }
  64% { transform: scale(1); }
}
/* the rest of the note at reading size (it still lights up word by word as you scroll) */
.nine-love__text {
  max-width: 46ch;
  margin: 0 0 36px;
  font: 400 clamp(1.7rem, 1.25vw, 2rem) / 1.6 var(--font-family-text);
}
.nine-rw {
  opacity: calc(0.16 + 0.84 * var(--w, 1));
  transition: opacity 0.2s linear;
}
.nine-love__sign {
  display: block;
  width: max-content;
  margin: 0 0 32px;
  font: 400 clamp(6rem, 6vw, 9rem) / 1 var(--font-family-script);
  clip-path: inset(-20% calc((1 - var(--sign)) * 100%) -20% 0);
}
@media screen and (max-width: 749px) {
  .nine-love { grid-template-columns: 1fr; gap: 28px; padding-top: 64px; padding-bottom: 72px; }
  .nine-love__media { aspect-ratio: 4 / 3.6; }
  .nine-love .nine-love__quote { font-size: clamp(3rem, 8.6vw, 3.8rem) !important; }
  .nine-love__sign { font-size: 5.6rem; margin-bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .nine-rw { opacity: 1; transition: none; }
  .nine-love__sign { clip-path: none; }
  .nine-love__media img { transform: none; }
  .nine-love.is-in .nine-love__heart { animation: none; }
}

/* ------------------------------------------------------------------ home "9SKIN promise" marquee
   Endless band of the six promises. interactions.js moves it (base speed + scroll velocity, in the
   scroll direction) and leans it slightly with speed. Reduced motion: a static wrapped line. */
.nine-promise {
  padding: clamp(56px, 7vw, 104px) 0;
  background: #fff;
  color: var(--nine-oxblood);
  overflow: hidden;
}
.nine-promise .nine-promise__title {
  margin: 0 0 clamp(20px, 2.4vw, 32px);
  padding: 0 clamp(20px, 3.5vw, 50px);
  color: var(--nine-oxblood) !important;
  font: 500 1.4rem/1 var(--font-family-text) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  opacity: 0.6;
}
.nine-marquee { overflow: hidden; }
.nine-marquee__inner {
  display: flex;
  width: max-content;
  will-change: transform;
}
.nine-marquee__run {
  display: flex;
  align-items: center;
  flex: none;
}
.nine-marquee__item {
  font: 600 clamp(5.2rem, 8vw, 12rem) / 1 var(--font-family-text);
  letter-spacing: -0.05em;
  white-space: nowrap;
  color: var(--nine-oxblood);
}
.nine-marquee__dot {
  width: clamp(12px, 1.2vw, 18px);
  height: clamp(12px, 1.2vw, 18px);
  margin: 0 clamp(28px, 3.4vw, 56px);
  border-radius: 50%;
  background: var(--nine-red);
  flex: none;
}
@media (prefers-reduced-motion: reduce) {
  .nine-marquee__inner { width: auto; flex-wrap: wrap; padding: 0 clamp(20px, 3.5vw, 50px); }
  .nine-marquee__run + .nine-marquee__run { display: none; }
  .nine-marquee__run { flex-wrap: wrap; row-gap: 12px; }
  .nine-marquee__item { font-size: clamp(3.2rem, 4vw, 5.6rem); }
}

/* ------------------------------------------------------------------ home "9SKIN promise" badges
   Six line-drawn badges after the ritual: an icon inside an open ring, its label curving round the
   gap at the bottom. When the row comes in (.is-in from interactions.js) each ring draws itself round,
   then its icon rises in, one badge after another. While on screen the rings turn a little with the
   scroll (--spin). Without script / reduced motion: all in place. */
.nine-pledge {
  --gutter: clamp(20px, 3.5vw, 50px);
  --spin: 0;
  padding: clamp(88px, 10vw, 150px) var(--gutter);
  background: #fbf3ee;
  color: var(--nine-oxblood);
  text-align: center;
}
.nine-pledge .nine-pledge__title {
  margin: 0 0 clamp(48px, 6vw, 88px);
  color: var(--nine-oxblood) !important;
  font: 600 clamp(4.4rem, 6vw, 9.6rem) / 0.95 var(--font-family-text) !important;
  letter-spacing: -0.05em !important;
}
.nine-pledge.is-in .nine-w { opacity: 1; filter: blur(0); transform: none; }
.nine-pledge__list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 36px);
  max-width: 1320px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.nine-pledge__badge {
  display: block;
  width: 100%;
  max-width: 200px;
  height: auto;
  margin: 0 auto;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nine-pledge__ring {
  stroke-width: 1.6;
  transform: rotate(calc(var(--spin) * (var(--i) - 2.5) * 6deg));
  transform-origin: 100px 100px;
}
.nine-pledge__icon .f { fill: currentColor; stroke: none; }
.nine-pledge__icon .p { fill: #fbf3ee; }
.nine-pledge__arc { stroke: none; }
.nine-pledge__label {
  fill: currentColor;
  stroke: none;
  font: 600 13.5px/1 var(--font-family-text);
  letter-spacing: 0.14em;
}
@media (hover: hover) {
  .nine-pledge__icon { transition: transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1); transform-origin: 100px 96px; }
  .nine-pledge__item:hover .nine-pledge__icon { transform: scale(1.08); }
}
.nine-pledge.is-armed .nine-pledge__ring { stroke-dasharray: 1; stroke-dashoffset: 1; }
.nine-pledge.is-armed :is(.nine-pledge__icon, .nine-pledge__label) { opacity: 0; translate: 0 10px; }
.nine-pledge.is-armed.is-in .nine-pledge__ring {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.3s cubic-bezier(0.45, 0, 0.2, 1) calc(300ms + var(--i) * 140ms);
}
.nine-pledge.is-armed.is-in :is(.nine-pledge__icon, .nine-pledge__label) {
  opacity: 1;
  translate: 0 0;
  transition: opacity 0.7s ease, translate 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: calc(800ms + var(--i) * 140ms);
}
@media screen and (max-width: 989px) {
  .nine-pledge__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; max-width: 640px; }
}
@media screen and (max-width: 479px) {
  .nine-pledge__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; max-width: 360px; }
  .nine-pledge__label { font-size: 15.5px; letter-spacing: 0.08em; }
}

/* ------------------------------------------------------------------ home customer reviews ("love notes")
   A board: the heading top-left, the cream line drawing of a woman hugging herself in the middle, and
   the reviews as notes on stationery taped neatly down either side of her (three a side, each with
   its own small tilt). When the section comes in the notes stick on one by one, alternating sides:
   each comes down onto the page a little large and settles with a soft press (interactions.js adds
   .is-armed, then .is-in). Without script / reduced motion: everything is simply in place. */
.nine-revs {
  --gutter: clamp(20px, 3.5vw, 50px);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 3vw, 48px);
  padding: clamp(96px, 10vw, 150px) var(--gutter) clamp(72px, 7vw, 110px);
  background: radial-gradient(120% 90% at 50% 100%, #4a0715 0%, #2a050c 55%, #180307 100%);
  color: #fbe9e2;
  overflow: hidden;
}
.nine-revs :is(p, span, blockquote, cite, li) { color: inherit; }
.nine-revs {
  --p: 0; /* -1 as the section enters .. 1 as it leaves (interactions.js) */
  --enter: max(0, calc(-1 * var(--p)));
  --spread: 1;
}
.nine-revs__head { max-width: 56rem; margin: 0 auto; text-align: center; }
.nine-revs .nine-revs__title {
  margin: 0 0 18px;
  color: #fbe9e2 !important;
  font: 600 clamp(5.6rem, 8.4vw, 14rem) / 0.9 var(--font-family-text) !important;
  letter-spacing: -0.055em !important;
}
.nine-revs.is-in .nine-w { opacity: 1; filter: blur(0); transform: none; }
.nine-revs__text { margin: 0 0 22px; font: 400 clamp(1.8rem, 1.4vw, 2.2rem)/1.45 var(--font-family-text); opacity: 0.75; }
.nine-revs__head.is-in .nine-w { opacity: 1; filter: blur(0); transform: none; }
.nine-revs .nine-link { color: #fbe9e2; }
.nine-revs .nine-link:focus-visible { outline: 2px solid #fbe9e2; outline-offset: 4px; }

.nine-revs__board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(16px, 2.5vw, 48px);
  max-width: 1500px;
  width: 100%;
  margin: 0 auto;
}
.nine-revs__col {
  display: grid;
  gap: clamp(26px, 3vw, 44px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nine-revs__col--left { justify-items: end; }
.nine-revs__col--right { justify-items: start; }
/* each note's place: a small hand-set tilt and nudge, so the columns read as placed, not stacked */
.nine-revs__col--left .nine-note:nth-child(1) { --tilt: -3deg; --nudge: -28px; --o: 0; }
.nine-revs__col--left .nine-note:nth-child(2) { --tilt: 2deg; --nudge: 18px; --o: 2; }
.nine-revs__col--left .nine-note:nth-child(3) { --tilt: -1.5deg; --nudge: -10px; --o: 4; }
.nine-revs__col--right .nine-note:nth-child(1) { --tilt: 2.5deg; --nudge: 22px; --o: 1; }
.nine-revs__col--right .nine-note:nth-child(2) { --tilt: -2deg; --nudge: -16px; --o: 3; }
.nine-revs__col--right .nine-note:nth-child(3) { --tilt: 1.5deg; --nudge: 12px; --o: 5; }
/* scroll: the two columns come in from the sides as the section arrives, and each note floats at its
   own depth (and turns a touch) as you scroll through, so the board feels layered */
.nine-revs__col { transform: translate3d(calc(var(--side) * var(--enter) * var(--spread) * 18vw), 0, 0); will-change: transform; }
.nine-revs__col--left { --side: -1; }
.nine-revs__col--right { --side: 1; }
.nine-revs__col .nine-note:nth-child(1) { --depth: 1.1; }
.nine-revs__col .nine-note:nth-child(2) { --depth: 0.5; }
.nine-revs__col .nine-note:nth-child(3) { --depth: 0.85; }
.nine-revs__col--right .nine-note:nth-child(1) { --depth: 0.7; }
.nine-revs__col--right .nine-note:nth-child(3) { --depth: 1.2; }
.nine-revs__col .nine-note {
  transform: translate3d(0, calc(var(--p) * var(--depth) * -90px), 0) rotate(calc(var(--p) * var(--side) * var(--depth) * 4deg));
}
.nine-revs__illo {
  display: block;
  height: min(78svh, 740px);
  width: auto;
  opacity: 0.9;
  transform: translate3d(0, calc(var(--p) * 40px), 0) scale(calc(1.06 - var(--enter) * 0.12));
  will-change: transform;
}
.nine-revs.is-armed .nine-revs__illo { clip-path: inset(0 0 100% 0); }
.nine-revs.is-armed.is-in .nine-revs__illo { clip-path: inset(0 0 0 0); transition: clip-path 2.2s cubic-bezier(0.45, 0, 0.2, 1); }

/* each review is a piece of stationery: a paper card (ivory, blush or linen) held by a strip of
   translucent tape, a "No. 0n · Love note" header with a small heart seal, faint ruled lines under
   the words, the writer signing off under a hairline, and the bottom-right corner folded over.
   The paper is ::before (cut at the corner); ::after is the fold; the shadow follows both. */
.nine-note {
  --paper: #fbf3ea;
  --fold: 16px;
  position: relative;
  isolation: isolate;
  width: clamp(250px, 19vw, 330px);
  padding: 24px 24px 22px;
  color: #3d0409 !important;
  filter: drop-shadow(0 16px 18px rgba(0, 0, 0, 0.42));
  rotate: calc((var(--i) - 2.5) * 2.2deg);
  user-select: none;
  -webkit-user-select: none;
}
.nine-note:nth-child(3n + 2) { --paper: #f9ddd6; }
.nine-note:nth-child(3n + 3) { --paper: #efe6da; }
.nine-note::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 3px;
  background: var(--paper);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--fold)), calc(100% - var(--fold)) 100%, 0 100%);
}
.nine-note::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--fold);
  height: var(--fold);
  background: linear-gradient(135deg, color-mix(in srgb, var(--paper), #3d0409 16%), color-mix(in srgb, var(--paper), #3d0409 6%));
  clip-path: polygon(0 0, 100% 0, 0 100%);
  border-top-left-radius: 2px;
}
.nine-note__tape {
  position: absolute;
  left: 50%;
  top: -11px;
  width: 92px;
  height: 24px;
  translate: -50% 0;
  rotate: calc((2.5 - var(--i)) * 3deg);
  background: rgba(255, 222, 214, 0.62);
}
.nine-note__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(61, 4, 9, 0.14);
  font: 600 1.05rem/1 var(--font-family-text);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.nine-note__top > span:first-child { opacity: 0.7; }
.nine-note__seal { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #8e172d; }
.nine-note__seal svg { width: 12px; height: 12px; fill: #fbe9e2; }
.nine-note__key {
  margin: 0 0 10px;
  font: 600 clamp(2.3rem, 1.9vw, 3rem) / 1.02 var(--font-family-text);
  letter-spacing: -0.035em;
}
.nine-revs .nine-note .nine-note__text {
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  font: 400 1.42rem / 2.1rem var(--font-family-text) !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
  /* ruled like writing paper, the lines on the text's own line grid */
  background: repeating-linear-gradient(to bottom, transparent 0 calc(2.1rem - 1px), rgba(61, 4, 9, 0.08) calc(2.1rem - 1px) 2.1rem);
  opacity: 0.85;
}
.nine-note__by {
  display: block;
  padding-top: 10px;
  border-top: 1px solid rgba(61, 4, 9, 0.14);
  font: 600 1.1rem/1 var(--font-family-text);
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.75;
}
.nine-note__by::before { content: "— "; }
.nine-revs__col .nine-note { rotate: var(--tilt, 0deg); translate: var(--nudge, 0) 0; }
/* sticking on: a little large and lifted (bigger shadow), then pressed down onto the page */
.nine-revs.is-armed .nine-revs__col .nine-note { opacity: 0; scale: 1.14; translate: var(--nudge, 0) -18px; filter: drop-shadow(0 34px 30px rgba(0, 0, 0, 0.35)); }
.nine-revs.is-armed.is-in .nine-revs__col .nine-note {
  opacity: 1;
  scale: 1;
  translate: var(--nudge, 0) 0;
  filter: drop-shadow(0 16px 18px rgba(0, 0, 0, 0.42));
  transition: opacity 0.35s ease, scale 0.75s cubic-bezier(0.34, 1.4, 0.64, 1), translate 0.75s cubic-bezier(0.34, 1.4, 0.64, 1), filter 0.75s ease;
  transition-delay: calc(700ms + var(--o) * 200ms);
}

@media screen and (max-width: 989px) {
  .nine-revs { --spread: 0; }
  .nine-revs__board { grid-template-columns: 1fr; justify-items: center; }
  .nine-revs__illo { order: -1; height: min(52svh, 460px); }
  .nine-revs__col { justify-items: center; }
  .nine-revs__col .nine-note { translate: 0 0; }
}
@media screen and (max-width: 749px) {
  .nine-note { width: min(300px, 82vw); }
}

/* ------------------------------------------------------------------ "join our community"
   The handle is the link (no button): huge type whose underline draws in on hover. Below it a row
   of photos drifts at slightly different speeds as you scroll (--drift from interactions.js). */
.nine-comm {
  --gutter: clamp(20px, 3.5vw, 50px);
  padding: clamp(80px, 9vw, 140px) 0 clamp(64px, 7vw, 104px);
  background: #fff;
  color: var(--nine-oxblood);
  overflow: hidden;
}
.nine-comm :is(p, span) { color: inherit; }
.nine-comm__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 32px;
  padding: 0 var(--gutter);
  margin-bottom: 18px;
}
.nine-comm .nine-comm__title {
  margin: 0;
  color: var(--nine-oxblood) !important;
  font: 500 1.4rem/1 var(--font-family-text) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  opacity: 0.6;
}
.nine-comm__text {
  margin: 0;
  font: 400 1.6rem/1.4 var(--font-family-text);
  opacity: 0.7;
}
.nine-comm__handle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 var(--gutter) clamp(32px, 3.6vw, 52px);
  color: var(--nine-oxblood);
  text-decoration: none;
}
.nine-comm__handle > span:first-child {
  font: 600 clamp(3rem, 3.6vw, 5.2rem) / 1 var(--font-family-text);
  letter-spacing: -0.04em;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 max(3px, 0.06em) no-repeat;
  padding-bottom: 0.06em;
  transition: background-size 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nine-comm__handle .nine-arrow {
  width: clamp(24px, 2.2vw, 34px);
  height: clamp(24px, 2.2vw, 34px);
  stroke-width: 1.5;
  transform: rotate(-45deg);
}
@media (hover: hover) {
  .nine-comm__handle:hover > span:first-child { background-size: 100% max(3px, 0.06em); }
  .nine-comm__handle:hover .nine-arrow { transform: rotate(0deg) translateX(6px); }
}
.nine-comm__handle:focus-visible { outline: 2px solid var(--nine-red); outline-offset: 6px; }
.nine-comm__tiles {
  --drift: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0 var(--gutter);
  list-style: none;
}
.nine-comm__tile {
  transform: translate3d(0, calc(var(--drift) * (var(--i) - 2) * 18px), 0);
  will-change: transform;
}
.nine-comm__tile a {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #f6eeea;
}
.nine-comm__tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.5s ease;
}
@media (hover: hover) {
  .nine-comm__tile a:hover img { transform: scale(1.05); filter: brightness(1.04); }
}
.nine-comm__tile a:focus-visible { outline: 2px solid var(--nine-red); outline-offset: 3px; }
@media screen and (max-width: 749px) {
  .nine-comm__tiles {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 46vw;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .nine-comm__tiles::-webkit-scrollbar { display: none; }
  .nine-comm__tile { scroll-snap-align: start; transform: none; }
}

/* ------------------------------------------------------------------ newsletter ("a love letter")
   A letter, not a form: the line in the middle of a warm page, and the email field itself as large
   type on a single underline you write on. Two arch photos float at the edges (--p drift, like the
   care section). The words rise once on view (.is-in). */
.nine-news {
  --gutter: clamp(20px, 3.5vw, 50px);
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100svh;
  padding: clamp(96px, 11vw, 160px) var(--gutter);
  background: linear-gradient(to bottom, #fff4ef 0%, #fbe3da 100%);
  color: var(--nine-oxblood);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.nine-news :is(p, span) { color: inherit; }
.nine-news__float { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.nine-news__arch {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  aspect-ratio: 4 / 5;
  height: auto;
  object-fit: cover;
  border-radius: 999px 999px 18px 18px;
  box-shadow: 0 24px 60px -28px rgba(61, 4, 9, 0.45);
  transform: translate3d(0, calc(var(--p, 0) * var(--d) * -90px), 0);
  will-change: transform;
}
/* the hand-on-cheek drawing with its little heart, drawing in from the top once the section is in */
.nine-news__illo {
  position: absolute;
  left: 3%;
  top: 12%;
  width: clamp(220px, 22vw, 400px);
  height: auto;
  transform: translate3d(0, calc(var(--p, 0) * var(--d) * -70px), 0);
}
.nine-news.is-armed .nine-news__illo { clip-path: inset(0 0 100% 0); }
.nine-news.is-armed.is-in .nine-news__illo { clip-path: inset(0 0 0 0); transition: clip-path 2.2s cubic-bezier(0.45, 0, 0.2, 1) 0.3s; }
.nine-news__eyebrow {
  margin: 0 0 26px;
  font: 500 1.3rem/1 var(--font-family-text);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.6;
}
.nine-news .nine-news__title {
  margin: 0 0 24px;
  color: var(--nine-oxblood) !important;
  font: 600 clamp(4.6rem, 7.4vw, 12rem) / 0.94 var(--font-family-text) !important;
  letter-spacing: -0.05em !important;
}
.nine-news.is-in .nine-w { opacity: 1; filter: blur(0); transform: none; }
.nine-news__text {
  max-width: min(44ch, 100%);
  margin: 0 0 clamp(40px, 5vw, 72px);
  font: 400 1.7rem/1.5 var(--font-family-text);
  opacity: 0.72;
}
.nine-news__form {
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(100%, 860px);
  padding-bottom: 14px;
  border-bottom: 1.5px solid rgba(61, 4, 9, 0.28);
  transition: border-color 0.3s ease;
}
.nine-news__form:focus-within { border-bottom-color: var(--nine-oxblood); }
.nine-news__form input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--nine-oxblood);
  font: 500 clamp(2.8rem, 4.2vw, 6.4rem) / 1.1 var(--font-family-text);
  letter-spacing: -0.035em;
  text-align: center;
  caret-color: var(--nine-red);
  outline: none;
  box-shadow: none;
}
.nine-news__form input::placeholder { color: rgba(61, 4, 9, 0.24); }
.nine-news__form button {
  display: grid;
  place-items: center;
  flex: none;
  width: clamp(48px, 4.4vw, 64px);
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: var(--nine-oxblood);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.15s ease;
}
.nine-news__form button .nine-arrow { width: 22px; height: 22px; transition: transform 0.25s ease; }
.nine-news__form button:hover { background: var(--nine-red); }
.nine-news__form button:hover .nine-arrow { transform: translateX(3px); }
.nine-news__form button:active { transform: scale(0.94); }
.nine-news__form button:focus-visible { outline: 2px solid var(--nine-oxblood); outline-offset: 3px; }
.nine-news__fine { margin: 18px 0 0; font: 400 1.25rem/1.4 var(--font-family-text); opacity: 0.55; }

@media screen and (max-width: 749px) {
  .nine-news { min-height: 92svh; }
  .nine-news__arch { width: calc(var(--w) * 2.3); opacity: 0.9; }
  .nine-news__illo { left: -9%; top: 1%; width: 36vw; opacity: 0.8; }
  .nine-news__arch:nth-child(2) { left: 76%; top: 74%; }
  .nine-news__form input { font-size: clamp(2.2rem, 7vw, 3rem); }
}

/* ------------------------------------------------------------------ home before & after
   Desktop (.is-pinned): the stage pins and scrolling sweeps the divider across, from all "before" to
   all "after", then settles it in the middle; dragging takes over until you scroll again.
   --cut is how much of "after" shows, left of the divider (0 = all before, 1 = all after). Phones: drag, plus one gentle
   automatic sweep when the comparison first comes into view. */
.nine-ba {
  --gutter: clamp(20px, 3.5vw, 50px);
  --cut: 0.5;
  background: #fff;
  color: var(--nine-oxblood);
}
.nine-ba :is(p, span) { color: inherit; }
.nine-ba__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(32px, 6vw, 112px);
  padding: clamp(72px, 9vw, 128px) var(--gutter);
  max-width: 1320px;
  margin: 0 auto;
}
.nine-ba__eyebrow {
  margin: 0 0 22px;
  font: 500 1.4rem/1 var(--font-family-text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.6;
}
.nine-ba .nine-ba__title {
  margin: 0 0 22px;
  color: var(--nine-oxblood) !important;
  font: 600 clamp(4rem, 5vw, 7.2rem) / 0.98 var(--font-family-text) !important;
  letter-spacing: -0.045em !important;
}
.nine-ba.is-in .nine-w { opacity: 1; filter: blur(0); transform: none; }
.nine-ba__text {
  max-width: 36ch;
  margin: 0 0 36px;
  font: 400 1.7rem/1.5 var(--font-family-text);
  opacity: 0.72;
}
.nine-ba__legend {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 340px;
  font: 500 1.5rem/1 var(--font-family-text);
}
.nine-ba__key--before { opacity: calc(1 - 0.65 * var(--cut)); }
.nine-ba__key--after { opacity: calc(0.35 + 0.65 * var(--cut)); }
.nine-ba__meter {
  position: relative;
  flex: 1;
  height: 2px;
  background: rgba(61, 4, 9, 0.15);
}
.nine-ba__meter span {
  position: absolute;
  top: 50%;
  left: calc(var(--cut) * 100%);
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--nine-oxblood);
}
.nine-ba__frame {
  position: relative;
  width: min(44vw, 72svh, 560px);
  aspect-ratio: 1;
  overflow: hidden;
  background: #f6eeea;
  touch-action: pan-y;
  user-select: none;
  cursor: ew-resize;
}
.nine-ba__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
/* "after" shows to the left of the divider */
.nine-ba__img--after { clip-path: inset(0 calc((1 - var(--cut)) * 100%) 0 0); }
.nine-ba__img:not(.nine-ba__img--after) { clip-path: inset(0 0 0 calc(var(--cut) * 100%)); }
.nine-ba__tag {
  position: absolute;
  bottom: 16px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--nine-oxblood) !important;
  font: 600 1.3rem/1 var(--font-family-text);
  pointer-events: none;
}
.nine-ba__tag--after { left: 16px; opacity: calc(min(1, var(--cut) * 4)); }
.nine-ba__tag--before { right: 16px; opacity: calc(min(1, (1 - var(--cut)) * 4)); }
.nine-ba__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--cut) * 100%);
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(61, 4, 9, 0.08);
  pointer-events: none;
}
.nine-ba__knob {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: #fff;
  color: var(--nine-oxblood) !important;
  box-shadow: 0 6px 20px rgba(61, 4, 9, 0.18);
}
.nine-ba__knob svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* Native range input on top: keyboard and screen-reader control of the same divider. */
.nine-ba__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}
.nine-ba__frame:has(.nine-ba__range:focus-visible) { outline: 2px solid var(--nine-red); outline-offset: 4px; }

.nine-ba.is-pinned .nine-ba__pin { height: 240vh; }
.nine-ba.is-pinned .nine-ba__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  padding-top: 0;
  padding-bottom: 0;
}
@media screen and (max-width: 989px) {
  .nine-ba__stage { grid-template-columns: 1fr; }
  .nine-ba__frame { width: 100%; max-width: 560px; }
}

/* ------------------------------------------------------------------ home before & after: cursor lens
   The photo shows "before"; a circular lens (--x, --y, --r in px, set by interactions.js) reveals the
   "after" photo inside it, magnified slightly around the lens centre. The lens follows the pointer,
   drifts slowly on its own when idle, and the mode buttons grow it to the full photo or close it. */
.nine-lens {
  --gutter: clamp(20px, 3.5vw, 50px);
  --x: 50%;
  --y: 50%;
  --r: 0px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(32px, 6vw, 112px);
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(80px, 10vw, 150px) var(--gutter);
  background: #fff;
  color: var(--nine-oxblood);
}
.nine-lens :is(p, span) { color: inherit; }
.nine-lens__eyebrow {
  margin: 0 0 22px;
  font: 500 1.4rem/1 var(--font-family-text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.6;
}
.nine-lens .nine-lens__title {
  margin: 0 0 22px;
  color: var(--nine-oxblood) !important;
  font: 600 clamp(4.4rem, 5.6vw, 8rem) / 0.95 var(--font-family-text) !important;
  letter-spacing: -0.05em !important;
}
.nine-lens.is-in .nine-w { opacity: 1; filter: blur(0); transform: none; }
.nine-lens__text {
  max-width: 34ch;
  margin: 0 0 34px;
  font: 400 1.7rem/1.5 var(--font-family-text);
  opacity: 0.72;
}
.nine-lens__modes {
  display: inline-flex;
  padding: 4px;
  border: 1px solid rgba(61, 4, 9, 0.18);
  border-radius: 999px;
}
.nine-lens__mode {
  padding: 10px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--nine-oxblood);
  font: 500 1.4rem/1 var(--font-family-text);
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.nine-lens__mode.is-active { background: var(--nine-oxblood); color: #fbe9e2; }
.nine-lens__mode:focus-visible { outline: 2px solid var(--nine-red); outline-offset: 2px; }
.nine-lens__frame {
  position: relative;
  width: min(46vw, 76svh, 600px);
  aspect-ratio: 1;
  overflow: hidden;
  background: #f6eeea;
  cursor: none;
  touch-action: none;
  user-select: none;
}
.nine-lens__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.nine-lens__reveal {
  position: absolute;
  inset: 0;
  clip-path: circle(var(--r) at var(--x) var(--y));
}
.nine-lens__img--after {
  transform: scale(var(--zoom, 1.14));
  transform-origin: var(--x) var(--y);
}
.nine-lens__ring {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(var(--r) * 2);
  height: calc(var(--r) * 2);
  margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1);
  border: 2px solid rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  box-shadow: 0 10px 40px rgba(61, 4, 9, 0.25), inset 0 0 0 1px rgba(61, 4, 9, 0.08);
  opacity: var(--ring, 1);
  pointer-events: none;
}
.nine-lens__ringtag {
  position: absolute;
  left: 50%;
  bottom: -14px;
  padding: 6px 11px;
  border-radius: 999px;
  background: #fff;
  color: var(--nine-oxblood) !important;
  font: 600 1.2rem/1 var(--font-family-text);
  transform: translateX(-50%);
  white-space: nowrap;
}
.nine-lens__tag {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--nine-oxblood) !important;
  font: 600 1.3rem/1 var(--font-family-text);
  opacity: var(--before-tag, 1);
  pointer-events: none;
}
@media screen and (max-width: 989px) {
  .nine-lens { grid-template-columns: 1fr; }
  .nine-lens__frame { width: 100%; max-width: 600px; cursor: grab; }
}
@media (hover: none) {
  .nine-lens__frame { cursor: grab; }
}

/* ------------------------------------------------------------------ home before & after: converging pair
   Two separate cards (the before/after photos are framed differently, so no overlay). --p (0..1,
   from interactions.js) runs as the row crosses the viewport: the cards start apart, offset and
   tilted, and settle side by side, straight, with a small gap. */
.nine-pair {
  --gutter: clamp(20px, 3.5vw, 50px);
  --p: 1;
  padding: clamp(80px, 10vw, 150px) var(--gutter);
  background: #fff;
  color: var(--nine-oxblood);
  overflow: hidden;
}
.nine-pair :is(p, span, figcaption) { color: inherit; }
.nine-pair__head { margin: 0 auto clamp(40px, 5vw, 72px); text-align: center; }
.nine-pair__eyebrow {
  margin: 0 0 18px;
  font: 500 1.4rem/1 var(--font-family-text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.6;
}
.nine-pair .nine-pair__title {
  margin: 0;
  color: var(--nine-oxblood) !important;
  font: 600 clamp(3.8rem, 5vw, 7.2rem) / 1 var(--font-family-text) !important;
  letter-spacing: -0.045em !important;
}
.nine-pair.is-in .nine-w { opacity: 1; filter: blur(0); transform: none; }
.nine-pair__row {
  display: flex;
  justify-content: center;
  gap: clamp(12px, 1.4vw, 20px);
}
.nine-pair__card {
  width: min(40vw, 480px);
  margin: 0;
  will-change: transform;
}
/* Start: before sits left, low and tilted left; after sits right, high and tilted right. */
.nine-pair__card--before {
  transform: translate3d(calc((1 - var(--p)) * -14vw), calc((1 - var(--p)) * 80px), 0) rotate(calc((1 - var(--p)) * -7deg));
}
.nine-pair__card--after {
  transform: translate3d(calc((1 - var(--p)) * 14vw), calc((1 - var(--p)) * -60px), 0) rotate(calc((1 - var(--p)) * 7deg));
}
.nine-pair__media {
  aspect-ratio: 1;
  overflow: hidden;
  background: #f6eeea;
  box-shadow: 0 calc(30px * (1 - var(--p))) calc(60px * (1 - var(--p))) rgba(61, 4, 9, 0.18);
}
.nine-pair__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(calc(1.12 - 0.12 * var(--p)));
}
.nine-pair__card figcaption {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 16px;
  font: 400 1.5rem/1.3 var(--font-family-text);
  opacity: calc(0.2 + 0.8 * var(--p));
}
.nine-pair__card figcaption span {
  font: 600 1.6rem/1 var(--font-family-text);
  opacity: 1;
}
@media screen and (max-width: 749px) {
  .nine-pair__card { width: 46vw; }
  .nine-pair__card figcaption { flex-direction: column; gap: 4px; font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .nine-pair { --p: 1 !important; }
}

/* ------------------------------------------------------------------ home before & after: flip card
   One square card, "before" on the front and "after" on the back. --turn (0..1, from interactions.js)
   is the flip: driven by scroll as the card passes the middle of the screen, or set by a tap / the
   toggle (which takes over until the next scroll). --lift and --shadow follow the turn. */
.nine-flip {
  --gutter: clamp(20px, 3.5vw, 50px);
  --turn: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(32px, 6vw, 112px);
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(80px, 10vw, 150px) var(--gutter);
  background: #fff;
  color: var(--nine-oxblood);
}
.nine-flip :is(p, span) { color: inherit; }
.nine-flip__eyebrow {
  margin: 0 0 22px;
  font: 500 1.4rem/1 var(--font-family-text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.6;
}
.nine-flip .nine-flip__title {
  margin: 0 0 22px;
  color: var(--nine-oxblood) !important;
  font: 600 clamp(4rem, 5vw, 7.2rem) / 0.98 var(--font-family-text) !important;
  letter-spacing: -0.045em !important;
}
.nine-flip.is-in .nine-w { opacity: 1; filter: blur(0); transform: none; }
.nine-flip__text {
  max-width: 34ch;
  margin: 0 0 34px;
  font: 400 1.7rem/1.5 var(--font-family-text);
  opacity: 0.72;
}
.nine-flip__toggle {
  display: inline-flex;
  padding: 4px;
  border: 1px solid rgba(61, 4, 9, 0.18);
  border-radius: 999px;
}
.nine-flip__opt {
  padding: 10px 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--nine-oxblood);
  font: 500 1.4rem/1 var(--font-family-text);
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.nine-flip__opt.is-active { background: var(--nine-oxblood); color: #fbe9e2; }
.nine-flip__opt:focus-visible { outline: 2px solid var(--nine-red); outline-offset: 2px; }
.nine-flip__scene {
  position: relative;
  width: min(42vw, 70svh, 540px);
  aspect-ratio: 1;
  perspective: 1600px;
}
.nine-flip__card {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform-style: preserve-3d;
  /* --lift (px, from interactions.js) brings the card towards the viewer mid-turn */
  transform: translateZ(var(--lift, 0px)) rotateY(calc(var(--turn) * -180deg));
  will-change: transform;
}
.nine-flip__card:focus-visible { outline: 2px solid var(--nine-red); outline-offset: 6px; }
.nine-flip__face {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  background: #f6eeea;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.nine-flip__face--back { transform: rotateY(180deg); }
.nine-flip__face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.nine-flip__tag {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--nine-oxblood) !important;
  font: 600 1.3rem/1 var(--font-family-text);
}
/* soft ground shadow that narrows as the card turns edge-on */
.nine-flip__shadow {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -28px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(61, 4, 9, 0.22), rgba(61, 4, 9, 0));
  transform: scaleX(var(--shadow, 1));
  pointer-events: none;
}
@media screen and (max-width: 989px) {
  .nine-flip { grid-template-columns: 1fr; }
  .nine-flip__scene { width: 100%; max-width: 540px; }
}
/* Reduced motion: no 3D turn, the two sides cross-fade. */
@media (prefers-reduced-motion: reduce) {
  .nine-flip__card { transform: none !important; transition: none !important; }
  .nine-flip__face--back { transform: none; opacity: var(--turn); transition: opacity 0.3s ease; }
  .nine-flip__shadow { transform: none; }
}

/* ------------------------------------------------------------------ home day & night: worlds
   A pinned full-bleed scene per ritual (after fluxtheory.in's persona worlds). One WebGL canvas
   renders both photos with live light (sun glints by day, moonlight and fireflies by night) and a
   mist front that carries the change; interactions.js drives --mix (0 day .. 1 night) from scroll.
   Copy switches on the midpoint (data-world), it is not scrubbed. */
.nine-worlds {
  --gutter: clamp(20px, 3.5vw, 50px);
  position: relative;
  height: 260svh;
  background: #1a1410;
  color: #fff;
}
.nine-worlds :is(p, li, span, s, h2, h3) { color: inherit; }
.nine-worlds__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
}
.nine-worlds__poster, .nine-worlds__gl, .nine-worlds__jar, .nine-worlds__scrim { position: absolute; inset: 0; width: 100%; height: 100%; }
.nine-worlds__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: opacity 0.8s ease;
}
.nine-worlds__img--night { opacity: 0; }
.nine-worlds[data-world="night"] .nine-worlds__img--night { opacity: 1; }
.nine-worlds__gl, .nine-worlds__jar { display: block; opacity: 0; transition: opacity 0.9s ease; }
.nine-worlds.is-live :is(.nine-worlds__gl, .nine-worlds__jar) { opacity: 1; }
/* legibility: a soft floor of shade under the copy, nothing over the product */
.nine-worlds__scrim {
  background:
    linear-gradient(to top, rgba(10, 6, 4, 0.62) 0%, rgba(10, 6, 4, 0.18) 34%, rgba(10, 6, 4, 0) 52%),
    linear-gradient(to bottom, rgba(10, 6, 4, 0.35) 0%, rgba(10, 6, 4, 0) 22%);
  pointer-events: none;
}
.nine-worlds .nine-worlds__eyebrow {
  position: absolute;
  top: clamp(92px, 12vh, 128px);
  left: 50%;
  translate: -50% 0;
  margin: 0;
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font: 500 1.3rem/1 var(--font-family-text) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff !important;
  z-index: 3;
}

/* one state per world; the inactive one is out of the accessibility tree */
.nine-worlds__state {
  position: absolute;
  inset: auto var(--gutter) clamp(28px, 6vh, 64px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  z-index: 3;
  visibility: hidden;
}
.nine-worlds__state.is-active { visibility: visible; }
.nine-worlds .nine-worlds__name {
  margin: 0 0 18px;
  overflow: hidden;
  font: 600 clamp(6.4rem, 8.6vw, 16rem) / 0.86 var(--font-family-text) !important;
  letter-spacing: -0.055em !important;
  text-transform: uppercase;
  color: #fff !important;
}
.nine-worlds__word { display: inline-block; }
.nine-worlds__char {
  display: inline-block;
  translate: 0 105%;
  transition: translate 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--c, 0) * 28ms);
}
.nine-worlds__state.is-active .nine-worlds__char { translate: 0 0; }
.nine-worlds__mantra {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nine-worlds__mantra li {
  position: relative;
  font: 600 clamp(1.4rem, 1.35vw, 1.9rem) / 1.2 var(--font-family-text) !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 0;
  translate: 0 12px;
  transition: opacity 0.6s ease, translate 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(240ms + var(--c, 0) * 90ms);
}
.nine-worlds__mantra li + li::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  background: currentColor;
}
.nine-worlds__state.is-active .nine-worlds__mantra li { opacity: 1; translate: 0 0; }
.nine-worlds__right {
  max-width: 36rem;
  opacity: 0;
  translate: 0 16px;
  transition: opacity 0.7s ease 0.3s, translate 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}
.nine-worlds__state.is-active .nine-worlds__right { opacity: 1; translate: 0 0; }
.nine-worlds .nine-worlds__product {
  margin: 0 0 10px;
  font: 600 clamp(1.8rem, 1.5vw, 2.2rem) / 1.2 var(--font-family-text) !important;
  letter-spacing: -0.01em !important;
  color: #fff !important;
}
.nine-worlds__text { margin: 0 0 20px; font: 400 1.6rem/1.5 var(--font-family-text); opacity: 0.82; }
.nine-worlds__buy { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; }
.nine-worlds__price { margin: 0; font: 600 1.7rem/1 var(--font-family-text); }
.nine-worlds__price s { margin-left: 8px; font-weight: 400; opacity: 0.6; }
.nine-worlds__form { display: block; }
.nine-worlds__form form { margin: 0; }
.nine-worlds__add {
  padding: 14px 22px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #1a1410;
  font: 600 1.4rem/1 var(--font-family-text);
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, scale 0.15s ease;
}
.nine-worlds__add:hover { background: var(--nine-red); color: #fff; }
.nine-worlds__add:active { scale: 0.97; }
.nine-worlds__more { color: #fff; font: 500 1.4rem/1 var(--font-family-text); text-underline-offset: 4px; }
.nine-worlds :is(.nine-worlds__add, .nine-worlds__more, .nine-worlds__opt, .nine-worlds__skip):focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* right-edge dial: Day, a progress track, Night */
.nine-worlds__dial {
  position: absolute;
  right: clamp(14px, 2vw, 28px);
  top: 50%;
  translate: 0 -50%;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 10px 6px;
  border-radius: 999px;
  background: rgba(10, 6, 4, 0.38);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 4;
}
.nine-worlds__opt {
  width: 46px;
  padding: 9px 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font: 600 1.15rem/1 var(--font-family-text);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.nine-worlds__opt.is-active { background: #fff; color: #1a1410; }
.nine-worlds__ticks {
  position: relative;
  width: 2px;
  height: 64px;
  border-radius: 2px;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.45) 0 2px, transparent 2px 6px);
}
.nine-worlds__fill {
  position: absolute;
  inset: 0 0 auto;
  height: calc(var(--mix, 0) * 100%);
  background: #fff;
  border-radius: 2px;
}
.nine-worlds__skip {
  position: absolute;
  left: 50%;
  bottom: clamp(28px, 6vh, 64px);
  translate: -50% 0;
  padding: 14px 24px;
  border-radius: 999px;
  background: rgba(10, 6, 4, 0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font: 600 1.3rem/1 var(--font-family-text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  z-index: 3;
  transition: background-color 0.25s ease;
}
.nine-worlds__skip:hover { background: rgba(10, 6, 4, 0.7); }
.nine-worlds__end { position: absolute; bottom: 0; }

@media screen and (max-width: 1199px) {
  .nine-worlds__skip { display: none; }
}
@media screen and (max-width: 989px) {
  .nine-worlds__state { flex-direction: column; align-items: flex-start; gap: 22px; }
}
@media screen and (max-width: 749px) {
  .nine-worlds { height: 220svh; }
  .nine-worlds__state { flex-direction: column; align-items: stretch; gap: 18px; inset: auto 20px 28px; }
  .nine-worlds .nine-worlds__name { font-size: clamp(4.4rem, 12.5vw, 8rem) !important; margin-bottom: 12px; }
  .nine-worlds__mantra { flex-direction: column; gap: 4px; }
  .nine-worlds__mantra li { font-size: 1.3rem !important; }
  .nine-worlds__mantra li + li::before { display: none; }
  .nine-worlds__text { display: none; }
  /* the dial goes horizontal and takes the eyebrow's place, clear of the product */
  .nine-worlds .nine-worlds__eyebrow { display: none; }
  .nine-worlds__dial { top: 84px; right: auto; left: 50%; translate: -50% 0; grid-auto-flow: column; align-items: center; padding: 5px 6px; }
  .nine-worlds__ticks { width: 56px; height: 2px; background: repeating-linear-gradient(to right, rgba(255, 255, 255, 0.45) 0 2px, transparent 2px 6px); }
  .nine-worlds__fill { inset: 0 auto 0 0; width: calc(var(--mix, 0) * 100%); height: auto; }
  .nine-worlds__scrim { background: linear-gradient(to top, rgba(10, 6, 4, 0.75) 0%, rgba(10, 6, 4, 0.25) 42%, rgba(10, 6, 4, 0) 60%), linear-gradient(to bottom, rgba(10, 6, 4, 0.35) 0%, rgba(10, 6, 4, 0) 22%); }
}
/* Reduced motion: no pin and no scrub; the dial swaps worlds in place. */
@media (prefers-reduced-motion: reduce) {
  .nine-worlds { height: auto; }
  .nine-worlds__pin { position: relative; height: 100svh; }
  .nine-worlds__char, .nine-worlds__mantra li, .nine-worlds__right { transition: none !important; }
}

/* ------------------------------------------------------------------ home: every version of you
   One still woman among blurred versions of herself (rebuild/source/versions.png). After the Flux
   Theory "Embrace your flux" frame: the headline splits around her at mid-height, LOVE EVERY on the
   left and VERSION OF YOU on the right. The letters thin out where the blurred figures pass (a mask
   whose bands sit on the figures), so the figures read as walking in front of the words.
   interactions.js sets --z (photo zoom 1.1 -> 1 as the section scrolls in) and adds .is-in. */
.nine-versions {
  position: relative;
  isolation: isolate;
  height: 100vh;
  height: 100svh;
  min-height: 620px;
  max-height: 1100px;
  overflow: hidden;
  background: #180307;
  color: #fff;
}
.nine-versions__media,
.nine-versions__shade { position: absolute; inset: 0; }
.nine-versions__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  transform: scale(var(--z, 1));
  transform-origin: 50% 40%;
  will-change: transform;
}
.nine-versions__shade {
  display: block !important; /* the theme hides div:empty */
  background:
    linear-gradient(180deg, rgba(24, 3, 7, 0.55) 0%, rgba(24, 3, 7, 0) 22%),
    linear-gradient(0deg, rgba(24, 3, 7, 0.85) 0%, rgba(24, 3, 7, 0.45) 18%, rgba(24, 3, 7, 0) 36%);
  pointer-events: none;
}
.nine-versions :is(p, span) { color: inherit; }
/* the headline layer spans the full width, so the mask's bands line up with the photo's figures */
.nine-versions .nine-versions__title {
  position: absolute;
  z-index: 2;
  inset: 44% 0 auto;
  height: 1em; /* the halves are absolute; the box must hold them or the mask clips them away */
  margin: 0;
  color: #fff !important;
  font: 600 min(4.6vw, 9rem) / 0.9 var(--font-family-text) !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.5) 9%, rgba(0, 0, 0, 0.5) 17%, #000 24%, #000 28%,
    rgba(0, 0, 0, 0.55) 33%, #000 40%, #000 62%, rgba(0, 0, 0, 0.5) 68%, rgba(0, 0, 0, 0.5) 73%, #000 78%, #000 83%,
    rgba(0, 0, 0, 0.5) 88%, #000 95%);
  mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.5) 9%, rgba(0, 0, 0, 0.5) 17%, #000 24%, #000 28%,
    rgba(0, 0, 0, 0.55) 33%, #000 40%, #000 62%, rgba(0, 0, 0, 0.5) 68%, rgba(0, 0, 0, 0.5) 73%, #000 78%, #000 83%,
    rgba(0, 0, 0, 0.5) 88%, #000 95%);
}
.nine-versions__half { position: absolute; top: 0; }
.nine-versions__half--left { left: 3.2vw; }
.nine-versions__half--right { right: 3.2vw; }
/* each half arrives from its own side */
.nine-versions__half--left .nine-w { transform: translateX(-48px); }
.nine-versions__half--right .nine-w { transform: translateX(48px); }
.nine-versions.is-in .nine-w { opacity: 1; filter: blur(0); transform: none; }
.nine-versions__bottom {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: clamp(32px, 6vh, 64px);
  translate: -50% 0;
  width: min(92vw, 560px);
  text-align: center;
}
.nine-versions__text {
  margin: 0 auto 18px;
  font: 400 1.7rem/1.5 var(--font-family-text);
  opacity: 0.86;
}
.nine-versions .nine-link { color: #fff; }

@media screen and (max-width: 749px) {
  .nine-versions { height: 92svh; min-height: 600px; }
  /* portrait: the photo starts below a dark band that holds the headline, fading in from it */
  .nine-versions__media { top: 24%; }
  .nine-versions__media::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 22%;
    z-index: 1;
    background: linear-gradient(180deg, #180307, rgba(24, 3, 7, 0));
  }
  /* the two halves stack, centred, above her */
  .nine-versions .nine-versions__title {
    inset: 40px 0 auto;
    height: auto;
    font-size: clamp(3.6rem, 11vw, 5.2rem) !important;
    text-align: center;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .nine-versions__half { position: static; display: block; }
  .nine-versions__text { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .nine-versions__media img { transform: none; }
}

/* ------------------------------------------------------------------ home: self care is self love
   One line on a quiet, cool cream page. When it comes into view the second "care" dissolves letter
   by letter and "love" rises in its place in crimson, while a blush glow blooms behind the word and
   the whole page warms to peach. Plays once (interactions.js adds .is-armed, then .is-in).
   The resting state is the end state, so without script it simply reads "Self care is self love". */
.nine-care {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: clamp(22px, 3vw, 40px);
  min-height: 86svh;
  padding: clamp(96px, 12vw, 180px) clamp(20px, 5vw, 64px);
  background: #ffe8dc;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.nine-care .nine-care__line {
  margin: 0;
  /* light and large, like the fine-line drawings around it; only "love" carries weight */
  font: 400 clamp(5rem, 9.4vw, 16rem) / 0.95 var(--font-family-text) !important;
  letter-spacing: -0.055em !important;
  color: var(--nine-oxblood) !important;
}
.nine-care__swap {
  position: relative;
  display: inline-grid;
}
.nine-care__swap > span { grid-area: 1 / 1; }
/* one fine burgundy line under "love" that loops into a small heart, in the drawings' hand;
   it draws itself once "love" has risen */
.nine-care__stroke {
  position: absolute;
  left: -3%;
  top: 88%;
  width: 112%;
  height: 0.42em;
  overflow: visible;
  pointer-events: none;
}
.nine-care__stroke path {
  fill: none;
  stroke: #8e172d;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.nine-care__from { visibility: hidden; }
/* the site-wide heading rule sets every heading to 600 !important; this line is the exception */
.nine .nine-care .nine-care__line { font-weight: 400 !important; }
.nine-care__to { color: #8e172d; font-weight: 600; }
.nine-care__ch { display: inline-block; }
.nine-care .nine-care__sub {
  max-width: 34ch;
  margin: 0;
  font: 400 clamp(1.7rem, 1.45vw, 2.4rem) / 1.45 var(--font-family-text) !important;
  color: rgba(61, 4, 9, 0.72) !important;
}

/* armed: the start state, cool and muted, "care" in place (no transitions, so arming is instant) */
.nine-care.is-armed { background: #f1eeeb; }
.nine-care.is-armed .nine-care__line { color: #8a7d7b !important; }
.nine-care.is-armed .nine-care__from { visibility: visible; }
.nine-care.is-armed .nine-care__to .nine-care__ch { opacity: 0; translate: 0 0.32em; filter: blur(10px); }
.nine-care.is-armed .nine-care__stroke path { stroke-dashoffset: 1; }
/* (a fully hidden dash still draws its round end caps as a dot: keep the stroke invisible until it draws) */
.nine-care.is-armed .nine-care__stroke { opacity: 0; }
.nine-care.is-armed.is-in .nine-care__stroke { opacity: 1; transition: opacity 0.2s ease 0.6s; }
.nine-care.is-armed .nine-care__sub { opacity: 0; translate: 0 10px; }
/* in: "care" lifts away as "love" rises, the line draws under it, the page warms */
.nine-care.is-armed.is-in {
  background: #ffe8dc;
  transition: background-color 1.3s cubic-bezier(0.33, 0, 0.2, 1) 0.2s;
}
.nine-care.is-armed.is-in .nine-care__line {
  color: var(--nine-oxblood) !important;
  transition: color 1s ease 0.2s;
}
.nine-care.is-armed.is-in .nine-care__from .nine-care__ch {
  opacity: 0;
  translate: 0 -0.28em;
  filter: blur(10px);
  transition: opacity 0.4s ease, translate 0.5s cubic-bezier(0.33, 0, 0.2, 1), filter 0.45s ease;
  transition-delay: calc(80ms + var(--i) * 45ms);
}
.nine-care.is-armed.is-in .nine-care__to .nine-care__ch {
  opacity: 1;
  translate: 0 0;
  filter: blur(0);
  transition: opacity 0.55s ease, translate 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.55s ease;
  transition-delay: calc(260ms + var(--i) * 55ms);
}
.nine-care.is-armed.is-in .nine-care__stroke path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.45, 0, 0.2, 1) 0.6s;
}
.nine-care.is-armed.is-in .nine-care__sub {
  opacity: 1;
  translate: 0 0;
  transition: opacity 0.6s ease 0.8s, translate 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.8s;
}

/* the floating moments: burgundy line drawings (serum, morning, night, the jar, the mirror),
   positioned by --x/--y, drifting with scroll by --d (interactions.js sets --p, -1..1 as the section
   passes). When "care" turns to "love" they draw in from the top, one after another. */
.nine-care { min-height: 112svh; }
.nine-care__float { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.nine-care__img {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: auto;
  opacity: 0.85;
  transform: translate3d(0, calc(var(--p, 0) * var(--d) * -90px), 0);
  will-change: transform;
}
.nine-care.is-armed .nine-care__img { clip-path: inset(0 0 100% 0); }
.nine-care.is-armed.is-in .nine-care__img {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.1s cubic-bezier(0.45, 0, 0.2, 1);
  transition-delay: calc(350ms + var(--i) * 120ms);
}

@media screen and (max-width: 749px) {
  .nine-care { min-height: 100svh; }
  .nine-care .nine-care__line { font-size: clamp(4.2rem, 13vw, 6.4rem) !important; }
  .nine-care__img { width: calc(var(--w) * 2.6); }
  .nine-care__img:nth-child(1) { left: 2%; top: 5%; }
  .nine-care__img:nth-child(2) { left: 58%; top: 3%; }
  .nine-care__img:nth-child(3) { left: 52%; top: 74%; }
  .nine-care__img:nth-child(4) { left: 4%; top: 76%; }
  .nine-care__img:nth-child(5) { display: none; }
}

/* ------------------------------------------------------------------ home: before & after, still
   An editorial spread: the line on the left, one photo frame on the right. As the frame scrolls
   through the screen the change travels across the skin: a soft noisy front (the shader DISSOLVE,
   assets/shaders.js) turns "before" into "after", scrubbed by scroll, reversing on the way back
   (--p 0..1 from interactions.js). Without WebGL the two photos cross-fade by --p instead. The frame
   unveils upwards once as the section comes in. No script: the before photo. */
.nine-still {
  --gutter: clamp(20px, 3.5vw, 50px);
  --p: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(40px, 6vw, 112px);
  padding: clamp(88px, 10vw, 152px) max(var(--gutter), calc((100vw - 1320px) / 2));
  background: var(--nine-cream);
  color: var(--nine-oxblood);
}
.nine-still :is(p, h2, figcaption, span) { color: inherit; }
.nine-still__eyebrow {
  margin: 0 0 20px;
  font: 500 1.3rem/1 var(--font-family-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
}
.nine-still .nine-still__title {
  margin: 0 0 20px;
  color: var(--nine-oxblood) !important;
  font: 600 clamp(4rem, 4.8vw, 7rem) / 0.98 var(--font-family-text) !important;
  letter-spacing: -0.045em !important;
}
.nine-still__text {
  max-width: 30ch;
  margin: 0;
  font: 400 1.7rem/1.5 var(--font-family-text);
  opacity: 0.7;
}
.nine-dis { margin: 0; width: min(38vw, 66svh, 560px); }
.nine-still__frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #ead9d2; }
.nine-dis__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.nine-dis__img--after { opacity: var(--p); }
.nine-dis__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.nine-dis__frame.is-gl .nine-dis__img { visibility: hidden; }
.nine-dis__labels {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(61, 4, 9, 0.18);
  font: 500 1.2rem/1 var(--font-family-text);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.nine-dis__label { opacity: 0.35; transition: opacity 0.4s ease; }
.nine-dis__label.is-on { opacity: 1; }
/* the unveil (only once script has armed it) */
.nine-still.is-armed .nine-still__frame { clip-path: inset(100% 0 0 0); }
.nine-still.is-armed :is(.nine-still__copy, .nine-dis__labels) { opacity: 0; translate: 0 12px; }
.nine-still.is-armed.is-in .nine-still__frame { clip-path: inset(0 0 0 0); transition: clip-path 1.1s cubic-bezier(0.65, 0, 0.35, 1); }
.nine-still.is-armed.is-in :is(.nine-still__copy, .nine-dis__labels) { opacity: 1; translate: 0 0; transition: opacity 0.8s ease 0.5s, translate 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.5s; }

@media screen and (max-width: 989px) {
  .nine-still { grid-template-columns: 1fr; align-items: start; }
  .nine-dis { width: 100%; }
}

/* ------------------------------------------------------------------ home: before & after mirror
   The two photos sit in a round mirror on a deep wine page. --v (0 before .. 1 after) grows a
   soft-edged circle of "after" from the mirror's centre, fills the ring and brightens the blush light
   around the glass. interactions.js plays it once when it comes into view, then the ring is a
   dial: drag round it (or use the arrow keys on the knob), or tap Before / After. */
.nine-mirror {
  --gutter: clamp(20px, 3.5vw, 50px);
  --size: min(40vw, 68svh, 560px);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(40px, 7vw, 128px);
  padding: clamp(96px, 11vw, 168px) max(var(--gutter), calc((100vw - 1320px) / 2));
  background: radial-gradient(120% 90% at 78% 50%, #3a0a12 0%, #240509 55%, #180307 100%);
  color: #fbe9e2;
  overflow: hidden;
  isolation: isolate;
}
.nine-mirror :is(p, h2, span) { color: inherit; }
.nine-mirror__eyebrow {
  margin: 0 0 22px;
  font: 500 1.4rem/1 var(--font-family-text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.6;
}
.nine-mirror .nine-mirror__title {
  margin: 0 0 24px;
  color: #fbe9e2 !important;
  font: 600 clamp(4.4rem, 5.6vw, 8.4rem) / 0.96 var(--font-family-text) !important;
  letter-spacing: -0.045em !important;
}
.nine-mirror.is-in .nine-w { opacity: 1; filter: blur(0); transform: none; }
.nine-mirror__text {
  max-width: 36ch;
  margin: 0 0 36px;
  font: 400 1.7rem/1.5 var(--font-family-text);
  opacity: 0.72;
}
.nine-mirror__toggle {
  display: inline-flex;
  padding: 4px;
  border: 1px solid rgba(251, 233, 226, 0.25);
  border-radius: 999px;
}
.nine-mirror__opt {
  padding: 10px 22px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #fbe9e2;
  font: 500 1.4rem/1 var(--font-family-text);
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.nine-mirror__opt.is-active { background: #fbe9e2; color: var(--nine-oxblood); }
.nine-mirror :is(.nine-mirror__opt, .nine-mirror__knob):focus-visible { outline: 2px solid #fbe9e2; outline-offset: 3px; }

.nine-mirror__stage {
  position: relative;
  width: var(--size);
  aspect-ratio: 1;
  touch-action: none;
  cursor: grab;
  user-select: none;
}
.nine-mirror__stage.is-dragging { cursor: grabbing; }
/* blush light behind the glass, warmer as the after side grows */
.nine-mirror__stage::before {
  content: "";
  position: absolute;
  inset: -28%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 150, 140, 0.42), rgba(255, 150, 140, 0.1) 60%, transparent);
  opacity: calc(0.35 + var(--v) * 0.65);
  scale: calc(0.86 + var(--v) * 0.14);
  pointer-events: none;
}
.nine-mirror__glass {
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(251, 233, 226, 0.22), 0 40px 90px -30px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.nine-mirror__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.nine-mirror__img--after {
  --r: calc(var(--v) * 125%);
  -webkit-mask-image: radial-gradient(circle closest-side at 50% 50%, #000 calc(var(--r) - 25%), transparent var(--r));
  mask-image: radial-gradient(circle closest-side at 50% 50%, #000 calc(var(--r) - 25%), transparent var(--r));
}
/* a soft sheen across the glass */
.nine-mirror__glass::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0) 70%, rgba(255, 220, 210, 0.08) 100%);
  pointer-events: none;
}
.nine-mirror__tag {
  position: absolute;
  left: 50%;
  bottom: 9%;
  translate: -50% 0;
  z-index: 1;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(24, 3, 7, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font: 500 1.2rem/1 var(--font-family-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nine-mirror__tag--before { opacity: calc(1 - var(--v) * 2); }
.nine-mirror__tag--after { opacity: calc(var(--v) * 2 - 1); }
.nine-mirror__ring { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; overflow: visible; pointer-events: none; }
.nine-mirror__track { fill: none; stroke: rgba(251, 233, 226, 0.16); stroke-width: 0.35; stroke-dasharray: 0.4 1.2; }
.nine-mirror__arc {
  fill: none;
  stroke: #ffb8b4;
  stroke-width: 0.5;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--v) * 100);
  filter: drop-shadow(0 0 1.2px rgba(255, 184, 180, 0.9));
}
/* the knob rides the ring: angle = v * 360deg, starting at 12 o'clock */
.nine-mirror__knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  background: #fbe9e2;
  box-shadow: 0 0 0 6px rgba(255, 184, 180, 0.22), 0 6px 18px rgba(0, 0, 0, 0.4);
  transform: rotate(calc(var(--v) * 360deg)) translateY(calc(var(--size) * -0.48)) rotate(calc(var(--v) * -360deg));
  cursor: grab;
}

@media screen and (max-width: 989px) {
  .nine-mirror { --size: min(84vw, 520px); grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .nine-mirror__text { margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .nine-mirror .nine-w { opacity: 1; filter: none; transform: none; transition: none; }
}

/* ------------------------------------------------------------------ home day & night: the divider
   One screen, morning | night (phones: morning above night). A WebGL stage (assets/worlds-divider.js)
   draws both worlds, the shader divider between them, and both jars; until it is ready (or without
   WebGL) the two plates show as photos side by side. The copy is staggered: Revive's block low on
   the left, Rejuvenate's high on the right, each with its own Add to bag. */
.nine-split {
  --gutter: clamp(20px, 3.5vw, 50px);
  position: relative;
  height: 100svh;
  min-height: 640px;
  background: #1a1410;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.nine-split :is(p, span, a) { color: inherit; }
.nine-split__poster { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; }
.nine-split__poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nine-split__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 0.9s ease; }
.nine-split.is-live .nine-split__gl { opacity: 1; }
/* legibility: shade under the morning copy (bottom-left) and the night copy (top-right) only */
.nine-split__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 0% 100%, rgba(10, 6, 4, 0.55), rgba(10, 6, 4, 0) 70%),
    radial-gradient(60% 50% at 100% 0%, rgba(4, 6, 14, 0.55), rgba(4, 6, 14, 0) 70%);
}
.nine-split__side { position: absolute; z-index: 3; }
.nine-split__side--day { left: var(--gutter); bottom: clamp(32px, 6vh, 64px); }
.nine-split__side--night { right: var(--gutter); top: clamp(96px, 13vh, 132px); text-align: right; }
/* "Morning" / "Night": also the way in (and out) of a world */
.nine-split__when {
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font: 500 1.3rem/1 var(--font-family-text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.8;
  cursor: pointer;
}
.nine-split__when::after { content: "  ·  Step in"; opacity: 0.6; letter-spacing: 0.08em; }
.nine-split__when[aria-pressed="true"]::after { content: "  ·  Back"; }
.nine-split__when:hover { opacity: 1; }
.nine-split :is(.nine-split__when):focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.nine-split { cursor: pointer; }
.nine-split :is(.nine-split__buy, .nine-split__buy *) { cursor: auto; }
.nine-split .nine-split__add, .nine-split .nine-split__more { cursor: pointer; }
/* in a world: the other side's copy leaves */
.nine-split__side { transition: opacity 0.5s ease, translate 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.nine-split.is-focus-day .nine-split__side--night,
.nine-split.is-focus-night .nine-split__side--day { opacity: 0; translate: 0 12px; pointer-events: none; }
.nine-split .nine-split__name {
  margin: 0 0 14px;
  white-space: nowrap;
  font: 600 clamp(4.4rem, 5.4vw, 9rem) / 0.86 var(--font-family-text) !important;
  letter-spacing: -0.055em !important;
  text-transform: uppercase;
}
.nine-split__text { max-width: 34rem; margin: 0 0 20px; font: 400 1.6rem/1.5 var(--font-family-text); opacity: 0.85; }
.nine-split__side--night .nine-split__text { margin-left: auto; }
.nine-split__buy { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; }
.nine-split__side--night .nine-split__buy { justify-content: flex-end; }
.nine-split__price { font: 600 1.7rem/1 var(--font-family-text); }
.nine-split__form, .nine-split__form form { display: block; margin: 0; }
.nine-split__add {
  padding: 14px 22px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #1a1410;
  font: 600 1.4rem/1 var(--font-family-text);
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, scale 0.15s ease;
}
.nine-split__side--day .nine-split__add:hover { background: #f2b35e; color: #2a1604; }
.nine-split__side--night .nine-split__add:hover { background: #b9c9ff; color: #0c1226; }
.nine-split__add:active { scale: 0.97; }
.nine-split__more { color: #fff; font: 500 1.4rem/1 var(--font-family-text); text-underline-offset: 4px; }
.nine-split :is(.nine-split__add, .nine-split__more):focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media screen and (max-width: 749px) {
  .nine-split { min-height: 760px; }
  .nine-split__poster { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  /* each block sits by the divider (--div, 0..1 down the screen, set by interactions.js): morning
     just above it, night just below it; the jars stand at the outer ends of their halves */
  .nine-split { --div: 0.5; }
  .nine-split__side { max-width: none; left: 20px; right: 20px; text-shadow: 0 1px 14px rgba(20, 8, 4, 0.45); }
  .nine-split__side--day { top: auto; bottom: calc((1 - var(--div)) * 100% + 22px); }
  .nine-split__side--night { top: calc(var(--div) * 100% + 22px); text-align: right; }
  .nine-split__price { text-shadow: 0 1px 10px rgba(20, 8, 4, 0.6); }
  .nine-split .nine-split__name { font-size: clamp(4rem, 12vw, 5.6rem) !important; margin-bottom: 10px; }
  .nine-split__text { display: none; }
  .nine-split__shade {
    background:
      linear-gradient(to bottom, rgba(10, 6, 4, 0.5), rgba(10, 6, 4, 0) 22%),
      linear-gradient(to bottom, rgba(4, 6, 14, 0) 48%, rgba(4, 6, 14, 0.5) 52%, rgba(4, 6, 14, 0) 72%);
  }
}

/* ------------------------------------------------------------------ home: ambient shaders
   (assets/shaders.js) Satin: live silk behind Love notes (wine) and the newsletter (peach); it
   fades in over the section's own background once its canvas is running. Seam: a band at the
   bottom of a section where the next section's colour rises as a soft mist front, so sections meet
   without a hard line. */
.nine-hero, .nine-care, .nine-love, .nine-revs, .nine-news { position: relative; }
.nine-revs { isolation: isolate; }
/* (the theme hides empty divs; these hosts are empty until their canvas is made) */
.nine-satin, .nine-seam { display: block !important; }
.nine-satin { position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 1.2s ease; pointer-events: none; }
.nine-satin.is-live { opacity: 1; }
.nine-satin canvas, .nine-seam canvas { display: block; width: 100%; height: 100%; }
.nine-seam {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  height: clamp(90px, 15vh, 170px);
  pointer-events: none;
}
/* in the hero the mist passes under the 9skin wordmark and the copy, never over them */
.nine-hero > .nine-seam { z-index: 1; }

/* ------------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  .nine-hero__media img,
  .nine-hero__copy > *,
  .nine-hero__mark { animation: none; }
  .nine-hero__cta { transition: none; }
  .nine-revs__col, .nine-revs__col .nine-note, .nine-revs__illo { transform: none; }
  .nine--home .nine-footer__content, .nine--home .nine-footer__bg { opacity: 1; transform: none; filter: none; }
  .nine-hero__scroll::after { animation: none; }
  .nine-link .nine-arrow,
  .nine-pill { transition: none; }
}