@font-face {
  font-family: "Glacial Indifference";
  src: url("assets/fonts/glacial-indifference-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Glacial Indifference";
  src: url("assets/fonts/glacial-indifference-medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Glacial Indifference";
  src: url("assets/fonts/glacial-indifference-semibold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Glacial Indifference";
  src: url("assets/fonts/glacial-indifference-bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
:root{
  --font-glacial: "Glacial Indifference", "Helvetica Neue", Arial, sans-serif;
  --ink: #181512;
  --ink-soft: #5f5850;
  --page-canvas: #f6efe5;
  --section-canvas: #eceae6;
  --surface: #fff9f0;
  --surface-line: rgb(24 21 18 / 14%);
  --brand-teal: #1f9a94;
  --brand-sage: #b5bea5;
  /* Shared component roles: change these once to retint the entire interface. */
  --card-surface: var(--surface);
  --card-muted-surface: var(--section-canvas);
  --card-line: var(--surface-line);
  /* Image frames inherit their parent canvas; they never introduce a second backdrop. */
  --media-frame-surface: transparent;
  --cta-card-surface: var(--card-surface);
  --footer-surface: var(--card-muted-surface);
  --footer-bar-surface: var(--brand-sage);
  --footer-bar-ink: var(--surface);
  --paper: var(--page-canvas);
  --paper-strong: var(--surface);
  --mist: #eee6dc;
  --copper: #985a20;
  --clay: #74452c;
  /* Shared button system — change these tokens to restyle every CTA. */
  --button-min-height: 46px;
  --button-padding-block: 0.88rem;
  --button-padding-inline: 1.18rem;
  --button-radius: 999px;
  --button-font-size: 0.84rem;
  --button-font-weight: 800;
  --button-fill: var(--copper);
  --button-fill-ink: #fffaf2;
  --button-fill-hover: var(--clay);
  --button-ghost-border: color-mix(in srgb, var(--copper) 55%, transparent);
  --button-ghost-fill: rgb(255 255 255 / 42%);
  --button-ghost-ink: var(--ink);
  --button-motion: transform 180ms ease, background 180ms ease, color 180ms ease, border-color 180ms ease;
  --smoke: #f2eee7;
  --charcoal: #181512;
  --line: var(--surface-line);
  --white-line: rgba(255, 255, 255, 0.22);
  --shadow: 0 28px 90px rgba(45, 33, 22, 0.16);
  --radius: 8px;
  /*
    Fluid content rail for large desktops:
    - grows past the old 1320px reading width on wide screens
    - hard-caps so ultrawide layouts do not stretch forever
    - keeps a shared inset so content never hugs the viewport edge
  */
  --content-rail-max: 1840px;
  --content-rail-inset: clamp(3rem, 7vw, 11rem);
  --content-rail-width: min(var(--content-rail-max), calc(100% - var(--content-rail-inset)));
  --content-rail-boundary: min(var(--content-rail-max), calc(100vw - var(--content-rail-inset)));
  --learning-rail-max: 1680px;
  --learning-rail-width: min(var(--learning-rail-max), calc(100% - var(--content-rail-inset)));
  /* Subpage content starts flush under the fixed cream header — no blank gap. */
  --site-header-offset: 6.55rem;
  /* Breathing room from hero photo bottom to the next section title — not a large cream band. */
  --product-after-hero-space: clamp(2.25rem, 3.25vw, 3rem);
}
*{
  box-sizing: border-box;
}
html{
  scroll-padding-top: 8.5rem;
  scroll-behavior: auto;
}
html.is-scroll-ready{
  scroll-behavior: smooth;
}
body{
  margin: 0;
  min-width: 320px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-glacial);
}
body[data-page="subpage"]{
  overflow-anchor: none;
}
body::before{
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(circle at 14% 12%, rgba(191, 124, 53, 0.12), transparent 32%),
    radial-gradient(circle at 84% 8%, rgba(255, 255, 255, 0.82), transparent 30%);
}
body::after{
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  opacity: 0.12;
  background-image:
    linear-gradient(135deg, rgba(24, 21, 18, 0.05) 25%, transparent 25%),
    linear-gradient(225deg, rgba(191, 124, 53, 0.06) 25%, transparent 25%);
  background-size: 6px 6px;
}
img{
  display: block;
  max-width: 100%;
  height: auto;
}
a{
  color: inherit;
}
.skip-link{
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 300;
  transform: translateY(-140%);
  padding: 0.7rem 1rem;
  background: var(--paper-strong);
  color: var(--ink);
}
.skip-link:focus{
  transform: translateY(0);
}
.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.opening-loader{
  position: fixed;
  inset: 0;
  z-index: 240;
  display: grid;
  place-items: center;
  background: var(--paper-strong);
  transition: opacity 500ms ease, visibility 500ms ease;
}
html[data-opening-loader-seen="true"] .opening-loader{
  display: none;
}
.opening-loader img{
  width: min(360px, 58vw);
  height: auto;
  animation: loader-mark 900ms ease both;
}
.opening-loader span{
  position: absolute;
  width: min(760px, 72vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--copper), transparent);
  transform: scaleX(0);
  animation: loader-line 850ms 120ms ease both;
}
.opening-loader.is-hidden{
  opacity: 0;
  visibility: hidden;
}
.site-header{
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  min-height: 92px;
  padding: 0.65rem clamp(2.25rem, 4.6vw, 4.75rem);
  border: 0;
  border-radius: 0;
  background: rgba(239, 236, 231, 0.96);
  box-shadow: 0 16px 48px rgba(45, 33, 22, 0.08);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-105%);
  transition: transform 280ms ease, opacity 280ms ease, background 220ms ease, box-shadow 220ms ease;
}
.site-header.is-visible{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.site-header.is-compact{
  transform: translateY(0);
  background: rgba(239, 236, 231, 0.96);
  box-shadow: 0 16px 48px rgba(45, 33, 22, 0.08);
}
.site-header.is-scroll-hidden{
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px);
}
body:has(.shop-page) .site-header.is-scroll-hidden{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.brand{
  display: grid;
  place-items: center;
  justify-self: start;
  width: 142px;
  min-height: 48px;
}
.brand img{
  width: 136px;
  height: auto;
}
.primary-nav{
  display: flex;
  justify-content: center;
  gap: clamp(1rem, 2vw, 2.1rem);
  color: rgba(0, 0, 0, 0.72);
  font-family: var(--font-glacial);
  font-size: clamp(0.8rem, 1vw, 0.92rem);
  white-space: nowrap;
}
.lang-switch{
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.35rem;
  margin-left: 0.15rem;
  color: rgba(0, 0, 0, 0.55);
  font-family: var(--font-glacial);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.lang-switch__link{
  color: inherit;
  text-decoration: none;
}
.lang-switch__link.is-active,
.lang-switch__link[aria-current="true"]{
  color: var(--copper, #985a20);
}
.lang-switch__link:hover{
  color: var(--ink, #181512);
}
.header-tools{
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-self: end;
  gap: 0.7rem;
}
.header-shop{
  flex-shrink: 0;
  color: rgba(0, 0, 0, 0.72);
  font-family: var(--font-glacial);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.header-shop:hover,
.header-shop[aria-current="page"]{
  color: var(--copper, #985a20);
}
.header-cart{
  position: relative;
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  overflow: visible;
  width: 2.35rem;
  height: 2.35rem;
  color: var(--ink);
}
.header-cart__icon{
  display: block;
}
.header-cart:hover,
.header-cart[aria-current="page"]{
  color: var(--copper, #985a20);
}
.header-cart__count{
  position: absolute;
  top: -0.18rem;
  right: -0.22rem;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  min-width: 1.2rem;
  height: 1.15rem;
  padding: 0 0.32rem;
  border: 1.5px solid var(--page-canvas, #efece7);
  border-radius: 999px;
  background: var(--copper, #985a20);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
}
.header-cart__count.is-bump{
  animation: shop-cart-bump 420ms ease;
}
.header-cart.is-catching{
  animation: shop-cart-catch 560ms ease;
}
.header-cart.is-catching .header-cart__icon{
  color: var(--copper, #985a20);
}
@keyframes shop-cart-bump{
  0%,
  100%{ transform: scale(1); }
  35%{ transform: scale(1.28); }
}
@keyframes shop-cart-catch{
  0%{ transform: scale(1) rotate(0deg); }
  28%{ transform: scale(1.16) rotate(-10deg); }
  52%{ transform: scale(1.08) rotate(7deg); }
  100%{ transform: scale(1) rotate(0deg); }
}
.shop-fly{
  position: fixed;
  inset: 0;
  z-index: 220;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.shop-fly__body{
  fill: var(--copper, #985a20);
  stroke: var(--copper, #985a20);
  stroke-width: 0.8;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.shop-buy{
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
}
.shop-buy .button[data-add-to-cart],
.shop-buy .button[data-shop-region-hint]{
  min-width: 9.5rem;
  justify-content: center;
  text-align: center;
}
.shop-qty{
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--card-line, rgb(24 21 18 / 14%));
  border-radius: 999px;
  overflow: hidden;
  background: var(--card-surface, #fff9f0);
}
.shop-qty button,
.shop-qty input{
  border: 0;
  background: transparent;
  color: var(--ink);
  min-height: 2.4rem;
  font: inherit;
}
.shop-qty button{
  width: 2.4rem;
  cursor: pointer;
}
.shop-qty input{
  width: 2.75rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.shop-qty.is-locked button:disabled,
.shop-qty button:disabled,
.shop-qty button[aria-disabled="true"]{
  cursor: default;
  opacity: 0.38;
}
.shop-qty.is-locked input{
  pointer-events: none;
}
.shop-amount{
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 0.85rem 0 0.95rem;
  border: 1px solid var(--card-line, rgb(24 21 18 / 14%));
  border-radius: 999px;
  overflow: hidden;
  background: var(--card-surface, #fff9f0);
}
.shop-amount__prefix{
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.08em;
}
.shop-amount input{
  width: 8.4rem;
  max-width: 8.4rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  min-height: 2.4rem;
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.shop-qty button:hover:not(:disabled):not([aria-disabled="true"]){
  color: var(--copper, #985a20);
}
.shop-qty button:active:not(:disabled):not([aria-disabled="true"]){
  transform: scale(0.92);
}
.shop-toast{
  position: fixed;
  left: max(1rem, env(safe-area-inset-left));
  bottom: max(1.15rem, env(safe-area-inset-bottom));
  z-index: 110;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  max-width: min(24rem, calc(100vw - 6rem));
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--card-line);
  border-radius: 1rem;
  background: var(--card-surface, #fff);
  box-shadow: 0 12px 28px rgba(24, 21, 18, 0.12);
  color: var(--ink);
  opacity: 0;
  transform: translateY(0.7rem);
  pointer-events: none;
  transition: opacity 280ms ease, transform 280ms ease;
}
.shop-toast.is-visible{
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.shop-toast.is-bump{
  animation: shop-toast-refresh 420ms ease;
}
@keyframes shop-toast-refresh{
  0%{ transform: translateY(0.4rem); opacity: 0.72; }
  58%{ transform: translateY(-0.08rem); opacity: 1; }
  100%{ transform: none; opacity: 1; }
}
.shop-toast[hidden]{
  display: none;
}
.shop-toast__media{
  width: 3.1rem;
  height: 3.1rem;
  object-fit: cover;
  border-radius: 0.55rem;
  background: var(--media-frame-surface, transparent);
}
.shop-toast__copy p{
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.35;
}
.shop-toast__meta{
  margin-top: 0.15rem !important;
  color: var(--ink-soft);
  font-size: 0.78rem !important;
}
.shop-toast__link{
  flex-shrink: 0;
  color: var(--copper, #985a20);
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
}
.shop-toast__link:hover{
  color: var(--ink);
}
@media (prefers-reduced-motion: reduce){
  .header-cart__count.is-bump,
  .header-cart.is-catching,
  .shop-toast,
  .shop-toast.is-bump,
  .shop-qty button,
  .shop-fly{
    animation: none;
    transition: none;
    transform: none;
  }
}
.site-header a,
.button,
.floating-cta{
  text-decoration: none;
}
.primary-nav > a,
.nav-group > a,
.nav-menu a{
  transition: color 180ms ease;
}
.primary-nav a[aria-current="page"]{
  color: var(--copper);
}
.primary-nav > a:hover,
.nav-group:hover > a,
.nav-group:focus-within > a,
.nav-menu a:hover{
  color: var(--ink);
}
.nav-group{
  position: relative;
}
.nav-group > a::after{
  display: inline-block;
  margin-left: 0.34rem;
  color: var(--copper);
  content: "v";
  font-size: 0.66em;
  transform: translateY(-1px);
}
.nav-menu{
  position: absolute;
  top: calc(100% + 1rem);
  left: 50%;
  z-index: 120;
  display: grid;
  gap: 0.35rem;
  min-width: 245px;
  padding: 1rem;
  border: 1px solid rgba(24, 21, 18, 0.08);
  border-radius: 24px;
  background: rgba(255, 250, 242, 0.96);
  box-shadow: 0 22px 64px rgba(45, 33, 22, 0.16);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -8px);
  transition: opacity 160ms ease, transform 160ms ease;
}
.nav-menu::before{
  position: absolute;
  inset: -1.05rem 0 auto;
  height: 1.05rem;
  content: "";
}
.nav-group:hover .nav-menu,
.nav-group:focus-within .nav-menu{
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.nav-menu a{
  padding: 0.72rem 0.8rem;
  border-radius: 14px;
  color: var(--ink-soft);
}
.nav-menu a:hover{
  background: rgba(191, 124, 53, 0.09);
}
/*
  Shared button component.
  One place to change CTA format sitewide:
  edit the --button-* tokens above, or the rules in this block.
  Do not re-skin .button--primary / .button--ghost in page CSS.
*/
.button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--button-min-height);
  padding: var(--button-padding-block) var(--button-padding-inline);
  border: 1px solid transparent;
  border-radius: var(--button-radius);
  font-family: var(--font-glacial);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: var(--button-motion);
}
.button--primary{
  border-color: var(--button-fill);
  background: var(--button-fill);
  color: var(--button-fill-ink);
}
.button--ghost,
.button--secondary{
  border-color: var(--button-ghost-border);
  background: var(--button-ghost-fill);
  color: var(--button-ghost-ink);
}
.button--primary:hover:not(:active),
.button--primary:focus-visible{
  transform: translateY(-2px);
  border-color: var(--button-fill-hover);
  background: var(--button-fill-hover);
  color: var(--button-fill-ink);
}
.button:active{
  transform: translateY(1px) scale(0.97);
}
.button--ghost:hover,
.button--ghost:focus-visible,
.button--secondary:hover,
.button--secondary:focus-visible{
  transform: translateY(-2px);
  border-color: var(--copper);
  background: var(--button-ghost-fill);
  color: var(--copper);
}
.button:focus-visible{
  outline: 2px solid var(--copper);
  outline-offset: 3px;
}
.button:disabled,
.button[aria-disabled="true"]{
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
}
.hero{
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  place-items: center;
  gap: 0;
  min-height: 100dvh;
  padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.2rem, 5vw, 5.4rem) 1.8rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 57% 48%, rgba(255, 255, 255, 0.95) 0 14%, rgba(225, 221, 216, 0.95) 36%, transparent 62%),
    linear-gradient(112deg, rgba(255, 250, 242, 0.98) 0 42%, rgba(226, 222, 216, 0.94) 42% 74%, rgba(255, 250, 242, 0.96) 74% 100%),
    var(--paper);
  isolation: isolate;
}
.hero::before{
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(112deg, transparent 0 51%, rgba(24, 21, 18, 0.06) 51% 51.25%, transparent 51.25%),
    linear-gradient(112deg, transparent 0 66%, rgba(191, 124, 53, 0.2) 66% 66.25%, transparent 66.25%);
}
.hero::after{
  position: absolute;
  inset: auto 5vw 7vh;
  height: 22vh;
  content: "";
  background: radial-gradient(ellipse at center, rgba(69, 55, 41, 0.12), transparent 68%);
  filter: blur(14px);
}
.label{
  color: var(--clay);
  font-family: var(--font-glacial);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
h1,
h2,
h3{
  margin: 0;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: 0;
  text-wrap: balance;
}
h1{
  max-width: 12ch;
  font-size: clamp(4rem, 7.2vw, 8.4rem);
  line-height: 0.88;
}
h2{
  max-width: 13ch;
  font-size: clamp(2.5rem, 3.8vw, 4.2rem);
  line-height: 1.02;
}
h3{
  font-size: clamp(1.35rem, 2vw, 2.1rem);
  line-height: 1.04;
}
p{
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.26vw, 1.14rem);
  line-height: 1.68;
}
.section,
.about-cocoon,
.product-showcase,
.pathways{
  padding: clamp(5rem, 8vw, 8.5rem) clamp(1.4rem, 5vw, 5.4rem);
  scroll-margin-top: 8.5rem;
}
.section__intro{
  max-width: 760px;
}
.section__intro p{
  max-width: 680px;
}
.section__intro--center{
  max-width: 860px;
  margin: 0 auto 3.2rem;
  text-align: center;
}
.section__intro--center h2,
.section__intro--center p{
  margin-inline: auto;
}
.why{
  display: grid;
  grid-template-columns: 0.88fr 1.12fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
  background: var(--paper-strong);
}
.faq-list{
  display: grid;
  gap: 1rem;
}
.about-cocoon{
  display: grid;
  grid-template-columns: minmax(360px, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  background: var(--page-canvas);
}
.about-cocoon__media{
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.about-cocoon__media::before{
  content: none;
}
.about-cocoon__media img{
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1 / 1.03;
  object-fit: cover;
  object-position: center;
}
.about-cocoon__copy{
  display: grid;
  gap: 0.95rem;
}
.about-cocoon__copy h2{
  max-width: 31ch;
  color: var(--clay);
  font-size: clamp(1.45rem, 1.8vw, 2.25rem);
  line-height: 1.18;
}
.about-cocoon__tagline{
  margin: 0;
  color: var(--ink);
  font-style: italic;
  font-weight: 800;
}
.about-cocoon__copy p{
  max-width: 720px;
}
.about-cocoon__full-copy{
  text-align: justify;
  text-justify: inter-word;
}
.copy-points{
  display: grid;
  margin-top: 0.7rem;
}
.copy-points span{
  padding: 1rem 0;
  color: var(--ink-soft);
  font-family: var(--font-glacial);
  line-height: 1.5;
}
.product-showcase{
  background: var(--page-canvas);
}
.product-card{
  display: grid;
  gap: 1rem;
  min-height: 430px;
  padding: 1rem;
  border: 1px solid rgba(24, 21, 18, 0.1);
  border-radius: var(--radius);
  background: rgba(255, 250, 242, 0.74);
  box-shadow: 0 20px 54px rgba(45, 33, 22, 0.08);
  text-decoration: none;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.product-card:hover{
  transform: translateY(-5px);
  border-color: rgba(191, 124, 53, 0.42);
  box-shadow: 0 26px 70px rgba(45, 33, 22, 0.14);
}
.product-card img{
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: calc(var(--radius) - 2px);
  background: rgba(255, 255, 255, 0.48);
  object-fit: cover;
}
.product-card span{
  color: var(--clay);
  font-family: var(--font-glacial);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.product-card h3{
  max-width: 16ch;
  margin-bottom: 0.5rem;
  font-size: clamp(1.35rem, 2vw, 2.25rem);
}
.pathways{
  display: grid;
  grid-template-columns: minmax(320px, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
  background:
    radial-gradient(circle at 82% 18%, rgba(191, 124, 53, 0.12), transparent 30%),
    linear-gradient(180deg, rgba(255, 250, 242, 0.96), rgba(238, 230, 220, 0.64));
}
.benefits{
  display: grid;
  grid-template-columns: 0.96fr 1.04fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
  background: var(--paper-strong);
}
.faq{
  background: linear-gradient(180deg, rgba(246, 239, 229, 0.92), rgba(238, 230, 220, 0.52));
}
.faq-list{
  max-width: 980px;
  margin: 0 auto;
}
.faq-list details{
  border: 0;
  background: rgba(255, 255, 255, 0.32);
}
.faq-list details:last-child{
  border: 0;
}
.faq-list summary{
  cursor: pointer;
  padding: 1.25rem 0.5rem;
  color: var(--ink);
  font-family: var(--font-glacial);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  list-style: none;
}
.faq-list summary::-webkit-details-marker{
  display: none;
}
.faq-list summary::after{
  float: right;
  content: "+";
  color: var(--copper);
}
.faq-list details[open] summary::after{
  content: "-";
}
.faq-list p{
  max-width: 760px;
  margin: 0;
  padding: 0 0.5rem 1.35rem;
}
.trust{
  display: block;
  background: var(--page-canvas);
}
.trust-center{
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  max-width: 720px;
  text-align: center;
}
.trust-center h2{
  max-width: 13ch;
  margin-top: 0.5rem;
}
.trust-center p{
  max-width: 620px;
}
/* Legacy homepage footer rules removed — see Shared footer section below. */
/* Homepage rebuild: align the prototype with the current O2genes site and proposal blocks. */
.why{
  --flow-x: 0px;
  --flow-y: 0px;
  --flow-rx: 0px;
  --flow-ry: 0px;

  position: relative;
  display: block;
  min-height: clamp(600px, 72vh, 760px);
  padding: clamp(6.4rem, 8vw, 8.8rem) clamp(1.4rem, 5vw, 5.4rem) clamp(3.2rem, 5vw, 5.4rem);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(255, 255, 255, 0.96), transparent 58%),
    linear-gradient(180deg, rgba(246, 242, 235, 0.98), rgba(244, 239, 231, 0.98));
  text-align: center;
}
.why::before,
.why::after{
  position: absolute;
  content: "";
  pointer-events: none;
  border: 1px solid rgba(190, 132, 68, 0.16);
  border-radius: 999px;
}
.why::before{
  inset: 27% 11% 7%;
  transform: translate3d(var(--flow-x), var(--flow-y), 0) rotate(-7deg);
  transition: transform 420ms cubic-bezier(0.18, 0.95, 0.24, 1);
}
.why::after{
  inset: 38% 23% 15%;
  border-color: rgba(22, 48, 45, 0.08);
  transform: translate3d(var(--flow-rx), var(--flow-ry), 0) rotate(8deg);
  transition: transform 520ms cubic-bezier(0.18, 0.95, 0.24, 1);
}
.why__heading{
  position: relative;
  z-index: 1;
  width: min(960px, 100%);
  margin: 0 auto clamp(1.5rem, 2.5vw, 2.8rem);
  padding-inline: 0;
}
.why__heading .label{
  color: rgba(190, 132, 68, 0.9);
}
.why__heading h2{
  max-width: 18ch;
  margin: 0.7rem auto 0;
  color: var(--copper);
  font-family: var(--font-glacial);
  font-size: clamp(2.2rem, 3.2vw, 3.75rem);
  font-weight: 800;
  line-height: 1.02;
  text-wrap: balance;
}
.why-proof-grid{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.1rem, 2.6vw, 3.4rem);
  align-items: start;
  width: var(--content-rail-width);
  max-width: var(--content-rail-max);
  margin: 0 auto;
}
.why-card{
  --why-y: 0px;
  --mag-x: 0px;
  --mag-y: 0px;
  --mag-scale: 1;
  --mag-rotate: 0deg;
  --mag-glow: 0;

  position: relative;
  min-height: clamp(215px, 16vw, 270px);
  padding: clamp(0.65rem, 1.15vw, 1.1rem);
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  display: block;
  text-align: left;
  text-decoration: none;
  transform: translate3d(var(--mag-x), calc(var(--why-y) + var(--mag-y)), 0) scale(var(--mag-scale)) rotate(var(--mag-rotate));
  transform-origin: center;
  transition:
    filter 260ms ease,
    transform 360ms cubic-bezier(0.18, 0.95, 0.24, 1);
  will-change: transform;
}
.why-card::before{
  position: absolute;
  inset: -0.65rem -0.8rem;
  z-index: -1;
  content: "";
  border: 1px solid rgba(190, 132, 68, calc(0.05 + var(--mag-glow) * 0.16));
  background:
    radial-gradient(ellipse at 50% 22%, rgba(255, 255, 255, calc(var(--mag-glow) * 0.78)), transparent 62%),
    linear-gradient(180deg, rgba(255, 250, 242, calc(var(--mag-glow) * 0.18)), rgba(255, 250, 242, calc(var(--mag-glow) * 0.58)));
  opacity: calc(0.22 + var(--mag-glow) * 0.78);
  transition:
    border-color 260ms ease,
    opacity 260ms ease;
}
.why-card--one{
  --why-y: clamp(0.1rem, 0.8vw, 0.9rem);
}
.why-card--two{
  --why-y: clamp(0.75rem, 1.7vw, 1.9rem);
}
.why-card--three{
  --why-y: clamp(0rem, 0.6vw, 0.7rem);
}
.why-card--four{
  --why-y: clamp(0.65rem, 1.5vw, 1.7rem);
}
.why-card:hover{
  filter: drop-shadow(0 24px 42px rgba(94, 63, 35, 0.12));
}
.why-card:active{
  transform: translate3d(var(--mag-x), calc(var(--why-y) + var(--mag-y) + 1px), 0) scale(calc(var(--mag-scale) * 0.992)) rotate(var(--mag-rotate));
}
.why-card:focus-visible{
  outline: 2px solid rgba(190, 132, 68, 0.75);
  outline-offset: 12px;
}
.why-card img{
  width: clamp(74px, 7vw, 116px);
  height: auto;
  margin: 0 0 clamp(1.2rem, 1.8vw, 2rem);
  transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}
.why-card:hover img{
  transform: translateY(-4px) rotate(1deg) scale(1.05);
}
.why-card span{
  display: block;
  margin-bottom: clamp(0.65rem, 1vw, 1rem);
  color: rgba(24, 21, 18, 0.74);
  font-family: var(--font-glacial);
  font-size: clamp(0.86rem, 0.95vw, 1rem);
  font-weight: 800;
  letter-spacing: 0.02em;
}
.why-card h3{
  max-width: 15ch;
  margin: 0 0 clamp(0.75rem, 1.1vw, 1rem);
  color: var(--clay);
  font-family: var(--font-glacial);
  font-size: clamp(1.45rem, 2.1vw, 2.25rem);
  font-weight: 800;
  line-height: 1.06;
  text-wrap: balance;
}
.why-card p{
  max-width: 25ch;
  margin: 0;
  color: rgba(24, 21, 18, 0.62);
  font-size: clamp(0.98rem, 1.04vw, 1.12rem);
  line-height: 1.58;
}
.why-card__cta{
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  margin-top: clamp(1rem, 1.4vw, 1.45rem);
  color: var(--copper);
  font-family: var(--font-glacial);
  font-size: clamp(1rem, 1.05vw, 1.12rem);
  font-weight: 800;
  line-height: 1.1;
}
.why-card__cta span{
  display: inline;
  margin: 0;
  color: currentColor;
  font: inherit;
  letter-spacing: 0;
}
.why-card:hover .why-card__cta span{
  transform: translateX(3px);
}
.about-cocoon{
  grid-template-columns: minmax(420px, 0.9fr) minmax(0, 1.1fr);
  background: var(--page-canvas);
}
.about-cocoon__copy h2{
  max-width: 31ch;
  color: var(--clay);
  font-size: clamp(1.45rem, 1.8vw, 2.25rem);
  line-height: 1.18;
}
.product-showcase{
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--line);
  background: var(--page-canvas);
}
.product-showcase::before{
  content: none;
}
.product-showcase > *{
  position: relative;
  z-index: 1;
}
.product-showcase .section__intro--center{
  margin-bottom: clamp(2.2rem, 4vw, 4rem);
}
.product-showcase .section__intro--center h2{
  max-width: 16ch;
}
.product-slider{
  position: relative;
  width: var(--content-rail-width);
  max-width: var(--content-rail-max);
  margin: 0 auto;
  padding-inline: clamp(3.6rem, 5vw, 5.2rem);
}
.product-carousel{
  --product-gap: clamp(1.1rem, 2vw, 1.8rem);
  --product-visible-count: 3;
  --product-slide-width: calc((100% - (var(--product-visible-count) - 1) * var(--product-gap)) / var(--product-visible-count));
  --product-track-x: 0px;

  overflow: hidden;
  margin: 0 auto;
  padding: 0.35rem 0.2rem 0.55rem;
}
@media (max-width: 1599px) {.product-carousel{
    --product-visible-count: 2;
  }}
@media (max-width: 900px) {.product-carousel{
    --product-visible-count: 1;
  }}
.product-carousel__track{
  display: flex;
  gap: var(--product-gap);
  transform: translate3d(var(--product-track-x), 0, 0);
  transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.product-carousel__track.is-jump-reset{
  transition: none;
}
.product-carousel .product-card{
  display: grid;
  flex: 0 0 var(--product-slide-width);
  grid-template-rows: auto auto auto 1fr auto;
  justify-items: center;
  min-height: 500px;
  padding: clamp(1.1rem, 1.7vw, 1.55rem);
  border-color: var(--card-line);
  background: var(--card-surface);
  box-shadow: none;
  text-align: center;
}
.product-carousel.is-enhanced .product-card{
  opacity: 1;
  transform: none;
}
.product-carousel .product-card:hover{
  border-color: var(--copper);
  box-shadow: none;
}
.product-carousel .product-card img{
  width: 100%;
  aspect-ratio: 1.62 / 1;
  object-fit: cover;
  object-position: center;
  background: transparent;
}
.product-carousel .product-card h3{
  max-width: 100%;
  min-width: 0;
  margin: 0.2rem auto 0;
  font-size: clamp(1.28rem, 1.55vw, 2.05rem);
  line-height: 1.02;
  white-space: nowrap;
  text-wrap: nowrap;
}
.product-carousel .product-card p{
  max-width: 30ch;
  margin: 0 auto;
  color: rgba(24, 21, 18, 0.62);
  font-size: clamp(0.98rem, 1vw, 1.08rem);
  line-height: 1.5;
}
.product-carousel .product-card b{
  align-self: end;
  margin-top: 0.6rem;
  color: var(--ink-soft);
  font-family: var(--font-glacial);
  font-size: 1rem;
  font-weight: 800;
}
.product-carousel .product-card span{
  color: rgba(141, 95, 60, 0.86);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
}
.product-slider__button{
  position: absolute;
  top: 50%;
  z-index: 4;
  display: grid;
  width: 44px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid var(--card-line);
  border-radius: 999px;
  background: var(--card-surface);
  color: var(--ink-soft);
  box-shadow: none;
  cursor: pointer;
  font-family: var(--font-glacial);
  font-size: 0;
  line-height: 1;
  transform: translateY(-50%);
  transition:
    border-color 180ms ease,
    color 180ms ease,
    transform 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}
.product-slider__button::before{
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-block-start: 2px solid currentColor;
  border-inline-start: 2px solid currentColor;
  transform: translateX(0.12rem) rotate(-45deg);
}
.product-slider__button--next::before{
  transform: translateX(-0.12rem) rotate(135deg);
}
.product-slider__button:hover{
  border-color: var(--copper);
  background: var(--card-surface);
  color: var(--copper);
  box-shadow: none;
}
.product-slider__button:active{
  transform: translateY(-50%) scale(0.96);
}
.product-slider__button:focus-visible,
.carousel-controls button:focus-visible{
  outline: 2px solid rgba(191, 124, 53, 0.8);
  outline-offset: 4px;
}
.product-slider__button--prev{
  left: 0.5rem;
}
.product-slider__button--next{
  right: 0.5rem;
}
.carousel-controls{
  display: flex;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 1.05rem;
}
.carousel-controls button{
  width: 10px;
  aspect-ratio: 1;
  border: 2px solid rgba(191, 124, 53, 0.55);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}
.carousel-controls button.is-active{
  background: rgba(191, 124, 53, 0.62);
}
.carousel-controls button:hover{
  transform: scale(1.12);
  border-color: rgba(191, 124, 53, 0.78);
}
.faq{
  background: var(--paper-strong);
}
.faq-more-link{
  display: inline-flex;
  width: fit-content;
  margin-top: 1.2rem;
  color: var(--copper);
  font-family: var(--font-glacial);
  font-size: 1rem;
  font-weight: 800;
  text-decoration: none;
  transition: color 220ms ease, transform 220ms ease;
}
.faq-more-link:hover{
  color: var(--ink);
  transform: translateX(4px);
}
.trust{
  overflow: hidden;
  padding-right: 0;
  padding-left: 0;
  padding-top: clamp(4.5rem, 7vw, 7rem);
  padding-bottom: clamp(5rem, 8vw, 8rem);
  background: var(--page-canvas);
}
.trust-shell{
  position: relative;
  min-height: clamp(760px, 58vw, 940px);
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.4rem, 5vw, 5.4rem);
  border-bottom: 1px solid rgba(24, 21, 18, 0.08);
  background: transparent;
}
.trust-shell::before,
.trust-shell::after{
  position: absolute;
  inset: 15% 5% auto;
  height: 52%;
  border: 1px solid rgba(191, 124, 53, 0.15);
  border-radius: 50%;
  pointer-events: none;
  content: "";
  transform: rotate(-5deg);
}
.trust-shell::after{
  inset: 22% 16% auto;
  height: 38%;
  border-color: rgba(24, 21, 18, 0.08);
  transform: rotate(7deg);
}
.trust-center{
  position: absolute;
  top: 47%;
  left: 50%;
  z-index: 2;
  width: min(690px, 72vw);
  margin: 0;
  text-align: center;
  transform: translate(-50%, -50%);
}
.trust-center h2{
  margin: 0.6rem auto 1rem;
  font-family: var(--font-glacial);
  font-size: clamp(3.5rem, 5vw, 5rem);
  line-height: 0.94;
  letter-spacing: 0;
  text-wrap: balance;
}
.trust-center p{
  max-width: 430px;
  margin: 0 auto 1.4rem;
  color: var(--ink-soft);
  line-height: 1.55;
}
.trust-proof{
  position: absolute;
  inset: 0;
  z-index: 1;
}
.clinic-grid{
  position: absolute;
  inset: 0;
}
.clinic-card{
  position: absolute;
  z-index: 3;
  display: grid;
  grid-template-rows: auto 1fr;
  width: clamp(136px, 11vw, 178px);
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(24, 21, 18, 0.08);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 250, 242, 0.92)),
    var(--paper-strong);
  box-shadow: 0 24px 68px rgba(45, 33, 22, 0.1);
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.clinic-card:hover{
  transform: translateY(-6px) scale(1.025);
  box-shadow: 0 30px 78px rgba(45, 33, 22, 0.15);
}
.clinic-card:nth-child(1){
  top: 7%;
  left: 5%;
}
.clinic-card:nth-child(2){
  top: 3%;
  left: 27%;
}
.clinic-card:nth-child(3){
  bottom: 23%;
  left: 25%;
}
.clinic-card:nth-child(4){
  top: 5%;
  right: 5%;
}
.clinic-card:nth-child(5){
  top: 2%;
  right: 27%;
}
.clinic-card:nth-child(6){
  bottom: 23%;
  left: 7%;
}
.clinic-card:nth-child(7){
  bottom: 22%;
  right: 21%;
}
.clinic-card:nth-child(8){
  bottom: 23%;
  right: 4%;
}
.clinic-card__image{
  display: grid;
  aspect-ratio: 1 / 0.88;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.95), rgba(246, 239, 229, 0.74)),
    var(--paper);
}
.clinic-card__image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
}
.clinic-card--logo .clinic-card__image img{
  width: 72%;
  height: 72%;
  object-fit: contain;
  filter: saturate(0.82);
}
.clinic-card figcaption{
  display: grid;
  gap: 0.22rem;
  min-height: 4.25rem;
  padding: 0.65rem 0.72rem 0.75rem;
  border-top: 1px solid rgba(24, 21, 18, 0.07);
  background: rgba(255, 252, 246, 0.96);
  color: var(--ink-soft);
  font-size: 0.72rem;
  line-height: 1.25;
}
.clinic-card figcaption strong{
  color: var(--ink);
  font-family: var(--font-glacial);
  font-size: clamp(0.92rem, 1.1vw, 1.1rem);
  font-weight: 700;
  line-height: 1;
}
.clinic-card figcaption span{
  text-wrap: pretty;
}
.media-features{
  position: absolute;
  right: 0;
  bottom: clamp(0.25rem, 1vw, 0.9rem);
  left: 0;
  z-index: 2;
  padding-inline: clamp(1rem, 3vw, 2rem);
}
.media-features__heading{
  display: none;
}
.media-marquee{
  display: grid;
  gap: 1.15rem;
  overflow: hidden;
  padding-block: 0.45rem 0.55rem;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.media-marquee__row{
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  overflow: hidden;
}
.media-marquee__track{
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  min-width: max-content;
  animation: media-marquee 36s linear infinite;
  will-change: transform;
}
.media-marquee__row--reverse .media-marquee__track{
  animation-duration: 42s;
  animation-direction: reverse;
}
.media-marquee__group{
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: clamp(1.3rem, 3.5vw, 3.8rem);
  padding-right: clamp(1.3rem, 3.5vw, 3.8rem);
}
.media-logo{
  display: inline-flex;
  flex-shrink: 0;
  align-items: baseline;
  justify-content: center;
  min-width: clamp(132px, 15vw, 240px);
  color: rgba(24, 21, 18, 0.34);
  font-family: var(--font-glacial);
  font-size: clamp(1.35rem, 2.35vw, 2.8rem);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.media-logo small{
  display: inline-block;
  margin-left: 0.3em;
  color: rgba(24, 21, 18, 0.28);
  font-size: 0.36em;
  font-weight: 600;
}
.media-logo--honey{
  color: rgba(191, 124, 53, 0.42);
  font-weight: 500;
}
.media-logo--cna{
  color: rgba(24, 21, 18, 0.42);
  font-size: clamp(1.8rem, 3vw, 3.4rem);
  font-weight: 800;
}
.media-logo--tabloid{
  color: rgba(95, 88, 80, 0.42);
  font-weight: 800;
}
.media-logo--tabloid b{
  color: rgba(191, 124, 53, 0.5);
}
.media-logo--vulcan,
.media-logo--sea{
  color: rgba(24, 21, 18, 0.38);
  font-size: clamp(1.25rem, 2.1vw, 2.35rem);
}
.media-logo--bt{
  gap: 0.28em;
  color: rgba(20, 95, 112, 0.36);
  font-family: var(--font-glacial);
  font-size: clamp(1.9rem, 3.2vw, 3.7rem);
}
.media-logo--shin{
  gap: 0.32em;
  color: rgba(141, 61, 42, 0.38);
  font-size: clamp(1.15rem, 1.9vw, 2.2rem);
}
@keyframes media-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}
@keyframes symbol-draw {
  0% {
    stroke-dashoffset: 920;
    opacity: 0.15;
  }

  34%,
  72% {
    stroke-dashoffset: 0;
    opacity: 1;
  }

  100% {
    stroke-dashoffset: -920;
    opacity: 0.22;
  }
}
@keyframes symbol-grid-draw {
  0% {
    stroke-dashoffset: 520;
    opacity: 0.08;
  }

  40%,
  76% {
    stroke-dashoffset: 0;
    opacity: 0.58;
  }

  100% {
    stroke-dashoffset: -520;
    opacity: 0.16;
  }
}
@keyframes symbol-breathe {
  0%,
  100% {
    opacity: 0.18;
    transform: translate(-18%, -8%) scale(0.82);
  }

  48% {
    opacity: 0.48;
    transform: translate(-18%, -8%) scale(1.08);
  }
}
/* Earlier multi-column footer overrides removed — use Shared footer section. */
.floating-cta{
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border-radius: 19px;
  background: #25d366;
  color: #fff;
  box-shadow:
    0 16px 34px rgba(18, 82, 45, 0.24),
    0 4px 12px rgba(24, 21, 18, 0.12);
  opacity: 0;
  pointer-events: none;
  transform-origin: 50% 100%;
  transition:
    background 180ms ease,
    box-shadow 180ms ease,
    opacity 180ms ease,
    transform 180ms ease;
}
.floating-cta.is-visible{
  animation: whatsapp-nudge 5.6s 1.2s ease-in-out infinite;
  opacity: 1;
  pointer-events: auto;
}
.floating-cta img{
  display: block;
  width: 40px;
  height: 40px;
}
.floating-cta:hover,
.floating-cta:focus-visible{
  animation: none;
  background: #25d366;
  color: #fff;
  box-shadow:
    0 20px 40px rgba(18, 82, 45, 0.3),
    0 5px 14px rgba(24, 21, 18, 0.14);
  transform: translateY(-3px) scale(1.04);
}
.floating-cta:focus-visible{
  outline: 3px solid rgba(24, 21, 18, 0.72);
  outline-offset: 4px;
}
@keyframes whatsapp-nudge {
  0%,
  72%,
  88%,
  100% {
    transform: translateY(0) scale(1);
  }

  76% {
    transform: translateY(-10px) scale(1.02);
  }

  80% {
    transform: translateY(0) scale(1);
  }

  84% {
    transform: translateY(-5px) scale(1.01);
  }
}
.subpage-main{
  padding-top: var(--site-header-offset);
}
.page-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.6rem;
}
/* Exactly two actions: keep primary + secondary on one row. */
.page-actions:has(> :nth-child(2):last-child){
  flex-wrap: nowrap;
  align-items: center;
}
.symbol-points{
  display: grid;
  gap: 0.45rem;
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: symbol;
}
.symbol-points li{
  position: relative;
  display: grid;
  gap: 0.35rem;
  padding: 0.85rem 1rem 0.85rem 3.4rem;
  border: 1px solid rgba(24, 21, 18, 0.08);
  border-radius: var(--radius);
  background: rgba(255, 250, 242, 0.58);
  cursor: default;
  transition: background 220ms ease, border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}
.symbol-points li::before{
  position: absolute;
  top: 0.92rem;
  left: 1rem;
  color: rgba(191, 124, 53, 0.72);
  content: counter(symbol, decimal-leading-zero);
  counter-increment: symbol;
  font-family: var(--font-glacial);
  font-size: 0.82rem;
  font-weight: 800;
}
.symbol-points li.is-active,
.symbol-points li:hover,
.symbol-points li:focus-visible{
  border-color: rgba(191, 124, 53, 0.34);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 20px 54px rgba(45, 33, 22, 0.1);
  transform: translateX(8px);
  outline: none;
}
.symbol-points strong{
  color: var(--ink);
  font-family: var(--font-glacial);
  font-size: 1.04rem;
}
.symbol-points span{
  color: var(--ink-soft);
  line-height: 1.48;
}
.reveal{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 520ms ease, transform 520ms ease;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {.reveal{
    opacity: 1;
    transform: none;
    transition: none;
  }}
@keyframes loader-mark {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes loader-line {
  to {
    transform: scaleX(1);
  }
}
@keyframes content-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes product-arrive {
  from {
    opacity: 0;
    transform: translateY(34px) scale(1.08) rotate(-2deg);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes cinematic-product {
  0% {
    opacity: 0;
    transform: translate3d(-2vw, -2vh, 0) scale(1.62) rotate(-14deg);
  }

  58% {
    opacity: 1;
    transform: translate3d(1vw, 0, 0) scale(1.05) rotate(-4deg);
  }

  100% {
    opacity: 1;
    transform:
      translate3d(var(--product-x, 0), var(--product-y, 0), 0)
      scale(var(--product-scale, 1.16))
      rotate(var(--product-rotate, -7deg));
  }
}
@keyframes vortex-arrive {
  0% {
    opacity: 0;
    transform: rotate(-34deg) scale(0.42);
  }

  62% {
    opacity: 1;
    transform: rotate(-10deg) scale(1.08);
  }

  100% {
    opacity: 1;
    transform: rotate(-8deg) scale(1);
  }
}
@keyframes hero-float {
  0%,
  100% {
    transform: translateY(0) rotate(-1.2deg);
  }

  50% {
    transform: translateY(-14px) rotate(0.6deg);
  }
}
@keyframes flow-draw {
  from {
    opacity: 0;
    transform: rotate(-7deg) scale(0.9);
  }

  to {
    opacity: 1;
    transform: rotate(-7deg) scale(1);
  }
}
@keyframes line-sweep {
  from {
    opacity: 0;
    transform: rotate(-7deg) scaleX(0.35);
  }

  to {
    opacity: 1;
    transform: rotate(-7deg) scaleX(1);
  }
}
@keyframes ring-drift {
  0%,
  100% {
    transform: rotate(0deg) scale(1);
  }

  50% {
    transform: rotate(4deg) scale(1.035);
  }
}
@media (max-width: 1080px) {.site-header{
    grid-template-columns: auto 1fr;
  }
.site-header nav{
    display: none;
  }
.why,
.about-cocoon,
.pathways,
.benefits,
.trust{
    grid-template-columns: 1fr;
  }
.trust-center{
    grid-column: 1 / -1;
    order: -1;
    justify-self: center;
    padding-bottom: 1rem;
  }}
/* The Learning mega menu is a stable category filter, not a mix of links and anchors. */
.learning-menu__topics .learning-menu__topic{
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.learning-menu__answers-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.learning-menu a.learning-menu__overview{
  align-self: baseline;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--copper);
  font-size: 0.76rem;
  font-weight: 700;
  text-decoration: none;
}
.learning-menu a.learning-menu__overview:hover,
.learning-menu a.learning-menu__overview:focus-visible{
  color: var(--ink);
}
.learning-menu__results{
  /* Fixed height keeps the mega-menu panel the same size across topics. */
  height: 21.75rem;
  max-height: none;
  overflow-x: hidden;
  overflow-y: hidden;
  overscroll-behavior: contain;
  scrollbar-color: var(--copper) transparent;
  scrollbar-width: thin;
}
.learning-menu__results.is-scrollable{
  overflow-y: auto;
}
.learning-menu__result{
  box-sizing: border-box;
  min-height: calc((21.75rem - 2px) / 3);
  align-content: center;
}
.learning-menu__result small{
  display: none;
}
.mobile-learning__topic,
.mobile-learning__back{
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.mobile-learning__topic{
  display: flex;
  min-height: 3.4rem;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--surface-line);
  font-size: 1rem;
}
.mobile-learning__back,
.mobile-learning__overview{
  display: inline-flex;
  margin: 0.65rem 0 1.15rem;
  color: var(--copper);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}
.mobile-learning__title{
  margin-bottom: 0.4rem;
  color: var(--ink);
  font-size: 1.35rem;
  font-weight: 500;
}
.mobile-learning__article-list{
  display: grid;
}
.mobile-learning__article-list .mobile-nav__subnav-link{
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 0;
}
.mobile-learning__article-list small{
  display: block;
  margin-bottom: 0.25rem;
  color: var(--copper);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
@media (max-width: 1180px) {.why{
    min-height: auto;
  }
.why-proof-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: clamp(1.2rem, 3vw, 2.5rem);
  }
.why-card--one,
.why-card--three{
    --why-y: 0px;
  }
.why-card--two,
.why-card--four{
    --why-y: clamp(2rem, 4vw, 4rem);
  }
.product-carousel{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
.clinic-card{
    width: clamp(126px, 13vw, 158px);
  }}
@media (max-width: 760px) {.why{
    min-height: auto;
    padding-block: 4rem;
  }
.why__heading{
    margin-bottom: 2.5rem;
  }
.why-proof-grid{
    grid-template-columns: 1fr;
    gap: 1rem;
  }
.why-card,
.why-card--one,
.why-card--two,
.why-card--three,
.why-card--four{
    --why-y: 0px;

    min-height: auto;
    padding: 1.25rem;
    transform: none;
  }
.why-card:hover{
    transform: translate3d(var(--mag-x), calc(var(--why-y) + var(--mag-y) - 4px), 0) scale(var(--mag-scale)) rotate(var(--mag-rotate));
  }
.why-card h3{
    font-size: clamp(1.55rem, 9vw, 2.25rem);
  }
.product-slider{
    padding-inline: 2.65rem;
  }
.product-carousel{
    grid-template-columns: 1fr;
  }
.product-carousel .product-card{
    min-height: 450px;
  }
.product-slider__button{
    width: 38px;
    font-size: 1.7rem;
  }
.product-slider__button--prev{
    left: 0.2rem;
  }
.product-slider__button--next{
    right: 0.2rem;
  }
.trust{
    padding-inline: 0;
  }
.trust-shell{
    min-height: auto;
    padding-inline: 1rem;
    padding-block: 3.2rem 4rem;
  }
.trust-shell::before,
.trust-shell::after{
    display: none;
  }
.trust-center{
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    margin: 0 auto 2.2rem;
    padding-inline: 0.25rem;
    transform: none;
  }
.trust-center h2{
    font-size: clamp(2.75rem, 12vw, 3.5rem);
    line-height: 0.96;
  }
.trust-proof{
    position: relative;
    inset: auto;
  }
.clinic-grid{
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
.clinic-card,
.clinic-card:nth-child(n){
    position: relative;
    inset: auto;
    width: 100%;
  }
.clinic-card:hover{
    transform: translateY(-4px);
  }
.clinic-card__image{
    aspect-ratio: 1 / 0.94;
  }
.clinic-card figcaption{
    min-height: 5.8rem;
    padding: 0.75rem;
    font-size: 0.78rem;
  }
.media-marquee{
    margin-top: 2rem;
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  }
.media-features{
    position: relative;
    inset: auto;
    padding-inline: 0;
  }
.media-logo{
    min-width: clamp(124px, 42vw, 170px);
    font-size: clamp(1.15rem, 7vw, 1.9rem);
  }
.floating-cta{
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    width: 58px;
    height: 58px;
    border-radius: 17px;
  }
.floating-cta img{
    width: 36px;
    height: 36px;
  }}
/* Shared footer — one balanced row, no hollow center. */
.site-footer{
  display: block;
  padding: 0;
  border-top: 1px solid var(--card-line);
  background: var(--footer-surface);
}
.site-footer__inner{
  display: grid;
  grid-template-columns: minmax(240px, 1.15fr) minmax(100px, 0.55fr) minmax(170px, 0.85fr) minmax(240px, 1.1fr);
  gap: clamp(1.8rem, 3.8vw, 3.2rem);
  align-items: start;
  width: var(--content-rail-width);
  margin: 0 auto;
  padding: clamp(2.6rem, 4vw, 3.4rem) 0 clamp(2.2rem, 3.2vw, 2.8rem);
}
.footer-brand{
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 1.15rem;
  padding-right: clamp(0rem, 2vw, 1.5rem);
}
.footer-brand img{
  display: block;
  width: min(176px, 58vw);
  height: auto;
}
.footer-contact{
  display: grid;
  gap: 0.45rem;
}
.footer-contact a{
  color: var(--ink) !important;
  font-family: var(--font-glacial);
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.4;
}
.footer-contact p{
  margin: 0;
  color: rgba(47, 43, 37, 0.62);
  font-size: 0.92rem;
  line-height: 1.6;
}
.site-footer a{
  text-decoration: none;
  transition: color 200ms ease;
}
.site-footer a:hover{
  color: var(--copper);
}
.footer-links,
.footer-community{
  display: grid;
  align-content: start;
  gap: 0.85rem;
}
.footer-links h2,
.footer-community h2{
  margin: 0 0 0.15rem;
  color: rgba(122, 78, 42, 0.92);
  font-family: var(--font-glacial);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.footer-links a{
  width: fit-content;
  color: rgba(47, 43, 37, 0.7);
  font-family: var(--font-glacial);
  font-size: 0.98rem;
  line-height: 1.45;
}
.footer-socials{
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}
.footer-socials a{
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0;
  background: transparent;
  color: var(--footer-bar-surface);
  box-shadow: none;
}
.footer-socials a:hover{
  color: var(--copper);
  background: transparent;
}
.footer-socials svg{
  width: 1.28rem;
  height: 1.28rem;
  fill: currentColor;
  stroke: none;
}
.footer-note{
  margin: 0.35rem 0 0;
  max-width: 26rem;
  color: rgba(47, 43, 37, 0.55);
  font-size: 0.86rem;
  line-height: 1.65;
}
.site-footer__bar{
  display: grid;
  place-items: center;
  min-height: 3.25rem;
  padding: 0.75rem 1rem;
  background: var(--footer-bar-surface);
  color: var(--footer-bar-ink);
  font-family: var(--font-glacial);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.site-footer .footer-links a[aria-current="page"]{
  color: var(--copper);
  font-weight: 700;
}
@media (max-width: 1000px) {.site-footer__inner{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 1.8rem;
  }
.footer-brand{
    grid-column: 1 / -1;
    padding-right: 0;
    max-width: 28rem;
  }}
.official-page{
  padding-top: var(--site-header-offset);
}
.faq-cat{
  box-sizing: border-box;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 2.35rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid rgba(70, 58, 45, 0.18);
  border-radius: 999px;
  background: var(--surface);
  color: rgba(47, 43, 37, 0.78);
  font-family: var(--font-glacial);
  font-size: 0.84rem;
  line-height: 1.2;
  text-decoration: none;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.faq-cat:hover{
  background: var(--surface);
  color: var(--copper);
  border-color: rgba(191, 124, 53, 0.45);
}
.faq-category{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  width: min(1280px, calc(100% - clamp(1.2rem, 3vw, 2.6rem)));
  margin: 0 auto;
  padding: clamp(1.8rem, 3.2vw, 2.6rem) 0;
  border-bottom: 1px solid rgba(70, 58, 45, 0.12);
}
.faq-category__header{
  position: static;
}
.faq-category__header h2{
  max-width: none;
  margin: 0.35rem 0 0;
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  line-height: 1.25;
  text-wrap: balance;
}
.faq-list--large{
  position: relative;
  display: block;
  gap: 0;
  max-width: none;
  margin: 0;
  padding: 0.7rem clamp(1.4rem, 2.8vw, 2rem) 0.85rem;
  border: 1px solid var(--surface-line);
  border-radius: 10px;
  background: var(--surface);
}
.faq-list--large details{
  position: relative;
  z-index: 1;
  border: 0;
  background: transparent;
}
.faq-list--large details + details{
  background-image: none;
}
.faq-list--large details:last-child{
  border: 0;
}
.faq-list--large summary{
  padding: 1.15rem 2.4rem 1.15rem 0.1rem;
  font-size: 1.02rem;
}
.faq-list--large details[open] summary{
  padding-bottom: 0.45rem;
}
.faq-list--large details.is-disclosure-closing summary{
  padding-bottom: 1.15rem;
}
.faq-list--large details.is-disclosure-closing summary::after{
  content: "+";
}
.faq-list--large p{
  max-width: 52rem;
  margin: 0;
  padding: 0 0.1rem 1.25rem;
  color: rgba(47, 43, 37, 0.76);
  font-size: 0.98rem;
  line-height: 1.7;
}
.official-hero{
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(430px, 62vh, 660px);
  overflow: hidden;
  isolation: isolate;
  background-image:
    linear-gradient(90deg, rgba(18, 17, 15, 0.68), rgba(18, 17, 15, 0.32)),
    var(--hero-image);
  background-position: center;
  background-size: cover;
  background-attachment: scroll;
  color: #fffaf2;
  text-align: center;
}
.official-hero::after{
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background:
    radial-gradient(ellipse at 50% 45%, rgba(255, 255, 255, 0.11), transparent 44%),
    linear-gradient(180deg, rgba(191, 124, 53, 0.08), rgba(0, 0, 0, 0.08));
}
.official-hero__inner{
  width: min(980px, calc(100% - 2rem));
  padding: clamp(3rem, 8vw, 6rem) 0;
}
.official-hero .label{
  color: rgba(255, 250, 242, 0.78);
}
.official-hero h1{
  max-width: 16ch;
  margin: 0.85rem auto 1rem;
  color: #fffaf2;
  font-size: clamp(3.3rem, 7vw, 7.4rem);
  text-wrap: balance;
}
.official-hero--cocoon{
  --hero-image: url("assets/products/hard-shell/aura-cocoon-exterior-warm.webp");
  background-position: center 52%;
}
.official-hero--cocoon h1{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.06em;
  max-width: calc(100% - 2rem);
}
.official-hero p{
  max-width: 760px;
  margin: 0 auto;
  color: rgba(255, 250, 242, 0.82);
  font-size: clamp(1.05rem, 1.35vw, 1.24rem);
  line-height: 1.78;
}
.official-hero .page-actions{
  justify-content: center;
}
@media (max-width: 1000px) {.faq-category{
    grid-template-columns: 1fr;
  }
.faq-category__header{
    position: static;
  }
.official-hero{
    background-attachment: scroll;
  }}
.symbol-points{
  display: grid;
  gap: 0.85rem;
  margin: 0;
  padding-left: 1.8rem;
  color: #173c39;
  list-style: decimal;
  counter-reset: none;
}
.symbol-points li{
  display: list-item;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #173c39;
  font-size: clamp(1.08rem, 1.28vw, 1.32rem);
  line-height: 1.65;
  transition: color 220ms ease, transform 220ms ease;
}
.symbol-points li::before{
  content: none;
}
.symbol-points li.is-active,
.symbol-points li:hover,
.symbol-points li:focus-visible{
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--copper);
  transform: translateX(5px);
  outline: none;
}
.about-numbers{
  display: grid;
  min-height: clamp(420px, 48vw, 720px);
  align-items: end;
  padding: clamp(5rem, 10vw, 10rem) clamp(1rem, 4vw, 3rem) 0;
  background:
    linear-gradient(180deg, rgba(237, 233, 226, 0.08), rgba(237, 233, 226, 0.5)),
    url("assets/heroes/about/cocoon-lumiere-founder.webp") center / cover no-repeat;
}
.about-numbers__panel{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1560px;
  width: min(100%, 1560px);
  margin: 0 auto;
  background: #ede9e2;
}
.about-numbers__panel div{
  display: grid;
  min-height: clamp(150px, 12vw, 210px);
  align-content: center;
  justify-items: center;
  gap: 0.55rem;
  border-right: 1px solid rgba(23, 60, 57, 0.08);
}
.about-numbers__panel div:last-child{
  border-right: 0;
}
.about-numbers__panel strong{
  color: #003d37;
  font-family: var(--font-glacial);
  font-size: clamp(3.2rem, 5vw, 6.1rem);
  font-weight: 800;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}
.about-numbers__panel span{
  color: #aebca4;
  font-size: clamp(1.7rem, 2.8vw, 3.6rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) {*,
*::before,
*::after{
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
.floating-cta.is-visible{
    animation: none !important;
  }
.media-marquee{
    overflow: hidden;
  }
.media-marquee__row{
    overflow-x: auto;
    overflow-y: hidden;
  }
.media-marquee__track{
    flex-wrap: nowrap;
    min-width: max-content;
    animation: none !important;
    transform: none !important;
  }
.media-marquee__group{
    flex-wrap: nowrap;
    justify-content: flex-start;
    min-width: max-content;
  }
.media-marquee__row--reverse,
.media-marquee__group[aria-hidden="true"]{
    display: none;
  }}
.product-experience .official-hero--comparison{
  --hero-image: none;
  --hero-position: center 50%;
}
.comparison-table-section{
  width: var(--learning-width);
  margin-inline: auto;
}
.healthspan-list div > span{
  color: var(--copper);
  font-family: var(--font-glacial);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.study-facts{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 2rem 0;
  border-top: 1px solid rgba(24, 21, 18, 0.14);
}
.study-facts > div{
  padding: 1rem 1rem 1rem 0;
  border-bottom: 1px solid rgba(24, 21, 18, 0.14);
}
.study-facts dt{
  color: rgba(24, 21, 18, 0.55);
  font-family: var(--font-glacial);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.study-facts dd{
  margin: 0.35rem 0 0;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
}
.study-facts--compact{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.learning-note{
  padding: 1.25rem 1.4rem;
  border-left: 3px solid var(--copper);
  background: rgba(255, 250, 242, 0.74);
  color: rgba(24, 21, 18, 0.72);
  font-size: 0.98rem;
  line-height: 1.68;
}
.learning-findings{
  margin: 1.2rem 0 0;
  padding-left: 1.15rem;
  color: rgba(24, 21, 18, 0.72);
  font-size: 0.98rem;
  line-height: 1.65;
}
.learning-findings li + li{
  margin-top: 0.7rem;
}
.learning-disclaimer{
  margin: 2rem auto 0;
  max-width: var(--learning-rail, 46rem);
  padding: 1.15rem 1.25rem;
  border: 1px solid rgba(24, 21, 18, 0.14);
  background: rgba(255, 250, 242, 0.88);
}
.learning-disclaimer strong{
  display: block;
  margin-bottom: 0.45rem;
  color: var(--ink);
  font-family: var(--font-glacial);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.learning-disclaimer p{
  margin: 0;
  color: rgba(24, 21, 18, 0.7);
  font-size: 0.92rem;
  line-height: 1.6;
}
.learning-evidence-brief{
  display: grid;
  margin: 1.6rem 0 0;
  border-top: 1px solid rgba(24, 21, 18, 0.16);
}
.learning-evidence-brief p{
  display: grid;
  grid-template-columns: minmax(8rem, 0.35fr) minmax(0, 1fr);
  gap: 1.2rem;
  margin: 0;
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(24, 21, 18, 0.12);
  color: rgba(24, 21, 18, 0.69);
  line-height: 1.55;
}
.learning-evidence-brief strong{
  color: var(--ink);
  font-family: var(--font-glacial);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.comparison-table-section{
  padding: clamp(4.5rem, 7vw, 6.5rem) 0;
}
.learning-faq__items{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--card-line);
}
.learning-faq__items article{
  min-height: 0;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--card-surface);
}
.learning-faq__items h3{
  margin: 0 0 1rem;
  font-size: clamp(1.35rem, 1.7vw, 1.7rem);
  line-height: 1.2;
}
.learning-faq__items p{
  margin: 0;
  color: rgba(24, 21, 18, 0.66);
  line-height: 1.68;
}
.healthspan-list{
  border-top: 1px solid rgba(24, 21, 18, 0.14);
}
.healthspan-list > div{
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(24, 21, 18, 0.14);
}
.healthspan-list p{
  margin: 0;
  color: rgba(24, 21, 18, 0.7);
  line-height: 1.58;
}
.comparison-table-section{
  border-top: 1px solid rgba(24, 21, 18, 0.14);
}
.comparison-table-wrap{
  overflow-x: auto;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  outline-offset: 4px;
}
.comparison-table{
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
}
.comparison-table th,
.comparison-table td{
  padding: 1.25rem 1.4rem;
  border-bottom: 1px solid rgba(24, 21, 18, 0.14);
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
}
.comparison-table thead th{
  background: var(--ink);
  color: var(--surface);
  font-family: var(--font-glacial);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.comparison-table tbody th{
  width: 22%;
  color: var(--clay);
}
.comparison-table td{
  color: rgba(24, 21, 18, 0.7);
}
.comparison-decision-flow{
  display: grid;
  grid-template-columns: minmax(260px, 0.66fr) minmax(0, 1.34fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  width: var(--learning-width);
  margin-inline: auto;
  padding: clamp(4.5rem, 7vw, 6.5rem) 0;
}
.comparison-decision-flow ol{
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(24, 21, 18, 0.14);
}
.comparison-decision-flow li{
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid rgba(24, 21, 18, 0.14);
}
.comparison-decision-flow li span{
  color: var(--copper);
  font-family: var(--font-glacial);
  font-size: 0.75rem;
  font-weight: 800;
}
.comparison-decision-flow li p{
  margin: 0;
  color: rgba(24, 21, 18, 0.7);
  line-height: 1.6;
}
@media (max-width: 900px) {.comparison-decision-flow{
    grid-template-columns: 1fr;
    gap: 2rem;
  }}
.policy-page{
  padding-top: var(--site-header-offset);
  background: var(--page-canvas);
}
.policy-hero{
  width: min(1280px, calc(100% - clamp(1.2rem, 3vw, 2.6rem)));
  margin: 0 auto;
  padding: clamp(2rem, 3.5vw, 2.8rem) 0 1.2rem;
}
.policy-hero .label{
  display: inline-block;
  margin-bottom: 0.55rem;
}
.policy-hero h1{
  margin: 0 0 0.65rem;
  color: var(--ink);
  font-family: var(--font-glacial);
  font-size: clamp(2.3rem, 4.4vw, 3.3rem);
  line-height: 1.1;
}
.policy-hero p{
  margin: 0;
  max-width: 48rem;
  color: rgba(47, 43, 37, 0.76);
  font-size: 1rem;
  line-height: 1.65;
}
.policy-layout{
  display: grid;
  grid-template-columns: minmax(180px, 0.28fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 3.5vw, 3rem);
  width: min(1280px, calc(100% - clamp(1.2rem, 3vw, 2.6rem)));
  margin: 0 auto;
  padding: 1rem 0 clamp(3.2rem, 5vw, 4.4rem);
  align-items: start;
}
.policy-toc{
  position: sticky;
  top: 9.5rem;
  display: grid;
  gap: 0.35rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--surface-line);
  border-radius: 6px;
  background: var(--surface);
}
.policy-toc strong{
  display: block;
  margin-bottom: 0.35rem;
  color: var(--clay);
  font-family: var(--font-glacial);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.policy-toc a{
  color: rgba(47, 43, 37, 0.72);
  font-family: var(--font-glacial);
  font-size: 0.9rem;
  line-height: 1.35;
  text-decoration: none;
}
.policy-toc a:hover{
  color: var(--copper);
}
.policy-toc a.is-current{
  color: var(--copper);
}
.policy-content{
  max-width: none;
  margin: 0;
  padding: 0.2rem 0 0;
  background: var(--surface);
  border: 1px solid var(--surface-line);
  border-radius: 6px;
  padding: 1.2rem 1.35rem 1.6rem;
}
.policy-content h2{
  max-width: none;
  margin: 1.7rem 0 0.55rem;
  color: var(--ink);
  font-family: var(--font-glacial);
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
}
.policy-content h2:first-child{
  margin-top: 0.2rem;
}
.policy-content h3{
  margin: 1.2rem 0 0.45rem;
  color: var(--ink);
  font-family: var(--font-glacial);
  font-size: 1rem;
}
.policy-content p,
.policy-content li{
  color: rgba(47, 43, 37, 0.82);
  font-size: 0.98rem;
  line-height: 1.7;
}
.policy-content p{
  margin: 0 0 0.85rem;
  text-align: justify;
  text-justify: inter-word;
}
.policy-content ul,
.policy-content ol{
  margin: 0 0 1rem;
  padding-left: 1.2rem;
}
.policy-content li + li{
  margin-top: 0.35rem;
}
.policy-content a{
  color: var(--copper);
}
@media (max-width: 900px) {.policy-layout{
    grid-template-columns: 1fr;
  }
.policy-toc{
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.85rem;
  }
.policy-toc strong{
    width: 100%;
  }}
/* ——— Product pages: shared transparent hero + model specs ——— */
.official-hero{
  --hero-parallax: 0%;
  --hero-copy-fade: 1;
}
.official-hero__media{
  position: absolute;
  inset: -8% 0;
  z-index: -2;
  background-image:
    linear-gradient(90deg, rgba(18, 17, 15, 0.68), rgba(18, 17, 15, 0.32)),
    var(--hero-image);
  background-position: center calc(50% + var(--hero-parallax));
  background-size: cover;
  background-attachment: scroll;
  transform: none;
  opacity: 1;
  will-change: auto;
  pointer-events: none;
}
.official-hero:has(.official-hero__media){
  background-image: none;
}
.official-hero--elevate .official-hero__inner{
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 1.05s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.05s cubic-bezier(0.22, 1, 0.36, 1);
}
body[data-page="subpage"] .official-hero--elevate:not(.is-ready) .official-hero__inner{
  opacity: 1;
  transform: none;
  transition: none;
}
.official-hero--elevate.is-ready .official-hero__inner{
  opacity: var(--hero-copy-fade);
  transform: translateY(calc((1 - var(--hero-copy-fade)) * 36px));
}
.official-hero--elevate .official-hero__media{
  transition: none;
}
.official-hero--elevate.is-ready .official-hero__media{
  transform: none;
}
.model-card{
  display: grid;
  gap: 0;
  border-bottom: 1px solid rgba(24, 21, 18, 0.1);
}
.model-card__specs{
  padding: 0 0 1.35rem;
}
.model-card__specs dl{
  display: grid;
  gap: 0.65rem;
  margin: 0 0 1rem;
}
.model-card__specs dl > div{
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 0.75rem;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(24, 21, 18, 0.08);
}
.model-card__specs dt{
  color: rgba(24, 21, 18, 0.5);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.model-card__specs dd{
  margin: 0;
  color: rgba(24, 21, 18, 0.82);
}
@media (prefers-reduced-motion: reduce) {.official-hero--elevate .official-hero__inner,
.official-hero--elevate .official-hero__media{
    transition: none;
  }
.official-hero--elevate .official-hero__inner{
    opacity: 1;
    transform: none;
  }}
@media (max-width: 900px) {.model-card__specs dl > div{
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }}
/* --- Product experience v3: controlled photography, sticky model stories --- */
.product-experience{
  overflow: clip;
  background: var(--paper);
}
.product-experience .official-hero--product{
  --hero-shift: 0px;
  --hero-position: center;
  /* Taller hero so more photo fills the former cream band under the frame. */
  min-height: clamp(600px, 84vh, 900px);
  max-height: 940px;
  background: #27221d;
}
.product-experience .official-hero--product .official-hero__media{
  inset: -3% 0;
  background-image:
    linear-gradient(90deg, rgba(18, 16, 14, 0.62), rgba(18, 16, 14, 0.27)),
    linear-gradient(180deg, rgba(18, 16, 14, 0.12), rgba(18, 16, 14, 0.28)),
    var(--hero-image);
  background-position: var(--hero-position);
}
.product-experience .official-hero--product .official-hero__inner{
  width: min(900px, calc(100% - 2rem));
  padding: clamp(7rem, 14vh, 9rem) 1rem clamp(4rem, 8vh, 6rem);
}
.product-experience .official-hero--product h1{
  max-width: 12ch;
  margin-right: auto;
  margin-left: auto;
  font-size: clamp(3.2rem, 6.8vw, 6.8rem);
  line-height: 0.96;
  text-wrap: balance;
}
.product-experience.hub-experience .official-hero--cocoon h1{
  max-width: 12ch;
  font-size: clamp(2.8rem, 5.2vw, 4.6rem);
  line-height: 0.98;
}
.product-experience .official-hero--product p{
  max-width: 58ch;
  font-size: clamp(1rem, 1.55vw, 1.2rem);
}
/* Keep a real gap to the title; do not collapse photo against the next section. */
.product-experience > .official-hero + .product-intro{
  padding-top: var(--product-after-hero-space);
}
.product-experience .official-hero--cocoon{
  --hero-image: url("assets/heroes/cocoon/hard-shell-client-entry.webp");
  --hero-position: center 48%;
}
.product-experience .official-hero--oxygen-products{
  --hero-image: url("assets/heroes/oxygen-products/poc-hub-panel-centered-v1.webp");
  --hero-position: center 50%;
}
.product-intro,
.family-selector,
.model-story,
.product-specs,
.product-closing-cta{
  width: var(--content-rail-width);
  margin-right: auto;
  margin-left: auto;
}
.product-intro{
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: center;
  padding: clamp(5.5rem, 10vw, 9rem) 0;
}
.product-mid-enquire{
  display: flex;
  margin: 0.9rem 0 0;
}
.product-mid-enquire--center{
  justify-content: center;
}
.model-story__chapter > .product-mid-enquire{
  margin: 0 0 1.15rem;
}
.product-intro h2,
.family-selector h2,
.model-story h2,
.product-specs h2,
.product-closing-cta h2{
  margin: 0.6rem 0 1rem;
  font-size: clamp(2.35rem, 4vw, 4rem);
  line-height: 1.04;
  text-wrap: balance;
}
.hub-selector--cocoon .family-selector__intro h2{
  max-width: min(100%, 22ch);
  font-size: clamp(2.1rem, 3.6vw, 3.45rem);
  line-height: 1.12;
  text-wrap: pretty;
}
.hub-selector--cocoon .family-selector__intro p{
  max-width: none;
  margin-inline: auto;
  color: rgba(24, 21, 18, 0.62);
  font-size: clamp(0.92rem, 1.25vw, 1.12rem);
  line-height: 1.45;
  white-space: nowrap;
}
.product-intro__body{
  max-width: 64ch;
}
.product-intro__body p,
.family-row__copy p{
  color: rgba(24, 21, 18, 0.7);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.78;
  text-align: justify;
  text-justify: inter-word;
}
.family-row__copy p + p{
  margin-top: 0.85em;
}
.family-selector{
  padding: clamp(5.5rem, 10vw, 9rem) 0;
}
.family-selector--cocoon{
  padding-bottom: clamp(1.5rem, 3vw, 2.75rem);
}
.family-selector__intro{
  max-width: 780px;
  margin: 0 auto clamp(3rem, 7vw, 6rem);
  text-align: center;
}
h2.section-heading--centered{
  width: 100%;
  margin-inline: auto;
  text-align: center;
}
.family-row{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  padding: clamp(2.5rem, 6vw, 5rem) 0;
  border-top: 1px solid rgba(24, 21, 18, 0.12);
  color: inherit;
  text-decoration: none;
}
.family-row:last-of-type{
  border-bottom: 1px solid rgba(24, 21, 18, 0.12);
}
.family-selector--cocoon .family-row:last-of-type{
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 0;
}
.family-row--reverse .family-row__media{
  order: 2;
}
.family-row__media{
  margin: 0;
  overflow: hidden;
  border-radius: 6px;
  background: var(--media-frame-surface);
}
.family-row__media img{
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.family-row__media--cover img{
  object-fit: cover;
}
.family-row:hover .family-row__media img{
  transform: scale(1.025);
}
.family-row__copy h3{
  margin: 0.55rem 0 1rem;
  font-size: clamp(2.4rem, 4.8vw, 4.8rem);
  line-height: 1;
}
.family-selector--cocoon .family-row__copy h3{
  max-width: none;
  font-size: clamp(2.15rem, 4vw, 3.8rem);
  letter-spacing: -0.025em;
  white-space: nowrap;
}
.family-row__link{
  display: inline-block;
  margin-top: 1rem;
  color: var(--copper);
}
.model-story{
  --model-story-sticky-top: clamp(150px, 20vh, 220px);
  padding: clamp(5.5rem, 9vw, 8rem) 0 clamp(3rem, 6vw, 6rem);
}
.model-story__heading{
  max-width: none;
  margin: 0 auto clamp(3rem, 7vw, 6rem);
  text-align: center;
}
.model-story__heading h2{
  max-width: none;
  font-size: clamp(2.75rem, 4.5vw, 4rem);
  white-space: nowrap;
}
@media (max-width: 1180px) {.model-story__heading h2{
    white-space: normal;
    font-size: clamp(2.05rem, 4.2vw, 3.1rem);
  }}
.model-story__layout{
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(1.5rem, 4vw, 7rem);
  align-items: start;
}
.model-story__visual{
  position: sticky;
  top: var(--model-story-sticky-top);
  min-width: 0;
}
.model-story__frame{
  position: relative;
  overflow: hidden;
  width: min(100%, calc(100svh - var(--model-story-sticky-top) - 1.5rem));
  max-height: none;
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 6px;
  background: var(--media-frame-surface);
  box-shadow: 0 28px 80px rgba(64, 47, 31, 0.1);
  transition:
    box-shadow 0.38s ease,
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.model-story__frame > img{
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(0.985);
  transform-origin: center center;
  transition:
    opacity 0.55s ease,
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.model-story__frame > img.is-active{
  z-index: 1;
  opacity: 1;
  transform: scale(1);
}
.model-story.is-model-active-change .model-story__frame{
  box-shadow: 0 33px 86px rgba(64, 47, 31, 0.14);
  transform: translateY(-1px) scale(1.008);
}
.model-story.is-model-settling .model-story__frame{
  box-shadow: 0 35px 90px rgba(64, 47, 31, 0.16);
  transform: translateY(-2px) scale(1.01);
}
.model-story__counter{
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 2;
  padding: 0.45rem 0.65rem;
  border-radius: 4px;
  background: rgba(255, 250, 242, 0.82);
  color: rgba(24, 21, 18, 0.68);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}
.model-story__chapters{
  min-width: 0;
}
.model-story__chapter{
  display: flex;
  min-height: min(72vh, calc(100svh - var(--model-story-sticky-top) - 1.5rem));
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 5vw, 4rem) 0;
  border-top: 1px solid rgba(24, 21, 18, 0.1);
  opacity: 0.5;
  transition: opacity 0.45s ease;
}
.model-story__chapter:last-child{
  border-bottom: 1px solid rgba(24, 21, 18, 0.1);
}
.model-story__chapter.is-active{
  opacity: 1;
}
.model-story__chapter:has(.model-story__specs[open]){
  justify-content: flex-start;
}
.model-story__chapter h3{
  margin: 0.6rem 0 1rem;
  font-size: clamp(2.5rem, 3.85vw, 4rem);
  letter-spacing: -0.025em;
  line-height: 1;
  white-space: nowrap;
}
.nowrap{
  white-space: nowrap;
}
.registered-mark{
  display: inline-block;
  margin-left: 0.08em;
  font-family: var(--font-glacial);
  font-size: 0.3em;
  line-height: 1;
  vertical-align: 1.55em;
}
.model-story__chapter > p{
  max-width: 50ch;
  color: rgba(24, 21, 18, 0.72);
  font-size: clamp(1rem, 1.35vw, 1.12rem);
  line-height: 1.75;
  text-align: justify;
  text-justify: inter-word;
}
.model-story__points{
  display: grid;
  gap: 0.55rem;
  margin: 1.2rem 0 1.4rem;
  padding: 0;
  list-style: none;
}
.model-story__points li{
  position: relative;
  padding-left: 1.15rem;
  color: rgba(24, 21, 18, 0.74);
}
.model-story__points strong{
  color: var(--ink);
  font-weight: 700;
}
.model-story__points li::before{
  position: absolute;
  top: 0.7em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--copper);
  content: "";
}
.model-story__specs{
  margin: 0 0 1.4rem;
  border-top: 1px solid rgba(24, 21, 18, 0.12);
  border-bottom: 1px solid rgba(24, 21, 18, 0.12);
}
.model-story__specs summary{
  padding: 0.9rem 0;
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}
.model-story__specs summary::after{
  float: right;
  color: var(--copper);
  content: "+";
}
.model-story__specs[open] summary::after{
  content: "−";
}
.model-story__specs summary::-webkit-details-marker{
  display: none;
}
.model-story__specs dl{
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 0.85rem;
  row-gap: 0.55rem;
  margin: 0 0 1rem;
  align-items: start;
}
.model-story__specs dl > div{
  display: contents;
}
.model-story__specs dt{
  min-width: 0;
  color: rgba(24, 21, 18, 0.5);
  white-space: nowrap;
}
.model-story__specs dd{
  min-width: 0;
  margin: 0;
}
.model-story__mobile-image{
  display: none;
}
.product-specs{
  padding: clamp(5.5rem, 10vw, 9rem) 0;
}
.product-specs{
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: start;
  border-top: 1px solid rgba(24, 21, 18, 0.12);
}
/* Product FAQ shares .product-specs; when stacked, do not keep the wide column gap. */
@media (max-width: 960px) {.product-specs.product-faq{
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }}
.product-specs__list{
  border: 0;
}
.product-specs__list details{
  border: 0;
}
.product-specs__list details:first-child{
  border-top: 0;
}
.product-specs__list summary{
  padding: 1.15rem 0;
  cursor: pointer;
  font-family: var(--font-glacial);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  list-style: none;
}
.product-specs__list summary::after{
  float: right;
  color: var(--copper);
  content: "+";
}
.product-specs__list details[open] summary::after{
  content: "−";
}
.product-specs__list summary::-webkit-details-marker{
  display: none;
}
.product-specs__list p{
  max-width: 62ch;
  margin: 0 0 1.2rem;
  color: rgba(24, 21, 18, 0.7);
  line-height: 1.72;
}
.product-closing-cta{
  padding: clamp(5rem, 9vw, 8rem) 0;
  border-top: 1px solid rgba(24, 21, 18, 0.12);
  text-align: center;
}
.product-closing-cta h2{
  max-width: 13ch;
  margin-right: auto;
  margin-left: auto;
}
.product-experience--hard-shell .product-closing-cta h2{
  font-size: clamp(2.5rem, 5.4vw, 5.4rem);
  line-height: 1;
}
.product-experience--cocoon .product-closing-cta h2{
  max-width: none;
  font-size: clamp(1.75rem, 5.2vw, 4.2rem);
}
.product-experience--cocoon .product-closing-cta{
  padding-top: clamp(3rem, 6vw, 5rem);
  border-top: 0;
}
.product-closing-cta p{
  max-width: 58ch;
  margin: 0 auto 1.5rem;
  color: rgba(24, 21, 18, 0.68);
}
.product-closing-cta .page-actions{
  justify-content: center;
}
.product-closing-cta--showroom{
  /* Geometry comes from .product-closing-cta--framed (shared CTA contract). */
  background: var(--cta-card-surface);
  color: var(--ink);
  text-align: left;
}
.product-end-transition{
  width: var(--content-rail-width);
  margin-right: auto;
  margin-left: auto;
  margin-bottom: clamp(2.4rem, 3vw, 3.2rem);
}
.product-end-transition__line{
  display: block;
  height: 1px;
  background: rgb(0 0 0 / 14%);
}
@media (min-width: 961px) {.product-closing-cta--hard-shell.is-motion-ready .product-closing-cta__media,
.product-closing-cta--hard-shell.is-motion-ready .product-closing-cta__content{
    opacity: 0;
    transform: translateY(20px);
    transition:
      opacity 560ms ease,
      transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
  }
.product-closing-cta--hard-shell.is-motion-ready .product-closing-cta__content{
    transition-delay: 70ms;
  }
.product-closing-cta--hard-shell.is-motion-ready.is-visible .product-closing-cta__media,
.product-closing-cta--hard-shell.is-motion-ready.is-visible .product-closing-cta__content{
    opacity: 1;
    transform: translateY(0);
  }}
.product-closing-cta--showroom .product-closing-cta__media{
  /* Shared framed media min-height applies. */
  margin: 0;
  overflow: hidden;
  background: var(--media-frame-surface);
}
.product-closing-cta--showroom .product-closing-cta__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-closing-cta--soft-shell .product-closing-cta__media img{
  object-position: 50% 50%;
}
.product-closing-cta--hard-shell .product-closing-cta__media img{
  object-position: 50% 48%;
}
.product-closing-cta--showroom .label{
  color: #B87F45;
}
.product-closing-cta--showroom h2,
.product-experience--hard-shell .product-closing-cta--showroom h2{
  /* Shared framed CTA type wins; keep only ink for legacy non-framed callers. */
  max-width: none;
  margin: 0.8rem 0 1.4rem;
  color: var(--ink);
  font-size: clamp(1.7rem, 2.65vw, 3.2rem);
  line-height: 1;
  letter-spacing: -0.025em;
}
.product-closing-cta__title-line{
  display: block;
  white-space: nowrap;
}
.product-closing-cta--showroom p{
  max-width: 41ch;
  margin: 0 0 1.8rem;
  color: var(--ink-soft);
  line-height: 1.65;
}
.product-closing-cta--showroom .page-actions{
  justify-content: flex-start;
  margin-top: 0;
}
.product-closing-cta__link{
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #fffaf2;
  font-family: var(--font-glacial);
  font-weight: 700;
  text-decoration: none;
  transition: color 180ms ease, transform 180ms ease;
}
.product-closing-cta__link:hover,
.product-closing-cta__link:focus-visible{
  color: #e8c395;
  transform: translateX(3px);
}
.product-closing-cta__link:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
[data-disclosure-motion] [data-disclosure-content]{
  max-height: 0;
  margin: 0;
  padding: 0 var(--disclosure-content-inline-end, 0) 0 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-0.35rem);
  transition:
    max-height var(--disclosure-motion-duration, 420ms) cubic-bezier(0.22, 1, 0.36, 1),
    padding-bottom var(--disclosure-motion-duration, 420ms) cubic-bezier(0.22, 1, 0.36, 1),
    opacity var(--disclosure-motion-duration, 420ms) cubic-bezier(0.22, 1, 0.36, 1),
    transform var(--disclosure-motion-duration, 420ms) cubic-bezier(0.22, 1, 0.36, 1);
}
[data-disclosure-motion] details.is-disclosure-open [data-disclosure-content]{
  max-height: var(--disclosure-content-height, 18rem);
  padding-bottom: var(--disclosure-content-space, 1.6rem);
  opacity: 1;
  transform: translateY(0);
}
[data-disclosure-motion] details.is-disclosure-closing summary{
  pointer-events: none;
}
[data-disclosure-motion] [data-disclosure-auto-content]{
  --disclosure-content-space: 0;
}
.product-faq__questions > details:first-child{
  border-top: 0;
}
.product-experience--hard-shell .product-closing-cta--showroom{
  /* Frame geometry comes from .product-closing-cta--framed. */
  width: var(--hard-shell-closure-width);
  margin-bottom: clamp(4.5rem, 6vw, 6rem);
  background: var(--surface);
  color: #000000;
}
.product-experience--hard-shell .product-closing-cta--showroom .product-closing-cta__media{
  background: var(--media-frame-surface);
}
.product-experience--hard-shell .product-closing-cta--showroom .label{
  color: #B87F45;
}
.product-experience--hard-shell .product-closing-cta--showroom p{
  color: var(--ink-soft);
}
.product-experience--hard-shell .product-closing-cta__link,
.product-experience--hard-shell .product-closing-cta__link:hover,
.product-experience--hard-shell .product-closing-cta__link:focus-visible{
  color: #000000;
}
@media (min-width: 961px) {@keyframes product-end-dot-pop {
    0% { transform: scale(0.25); }
    62% { transform: scale(1.22); }
    100% { transform: scale(1); }
  }
@keyframes product-end-dot-nudge {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(5px) scale(0.92); }
    72% { transform: translateY(1px) scale(1.06); }
  }
[data-product-end-scroll].is-scroll-motion-ready .product-end-transition__line{
    width: var(--product-end-line-width, 10px);
    height: calc(6px - (var(--product-end-line-progress, 0) * 5px));
    margin-right: auto;
    margin-left: auto;
    border-radius: 999px;
    background: #000000;
    opacity: var(--product-end-line-opacity, 0.6);
    will-change: width, height;
  }
[data-product-end-scroll].is-product-end-line-started .product-end-transition__line{
    animation: none;
  }
[data-product-end-scroll].is-product-end-line-started.is-product-end-line-waiting .product-end-transition__line{
    animation:
      product-end-dot-pop 280ms cubic-bezier(0.22, 1, 0.36, 1),
      product-end-dot-nudge 1.35s 280ms ease-in-out infinite;
  }
[data-product-closing-scroll].is-scroll-motion-ready{
    overflow: clip;
    clip-path: inset(
      calc((1 - var(--product-end-progress, 0)) * 28%)
      calc((1 - var(--product-end-progress, 0)) * 41%)
      calc((1 - var(--product-end-progress, 0)) * 28%)
      calc((1 - var(--product-end-progress, 0)) * 41%)
      round 12px
    );
    will-change: clip-path;
  }
[data-product-closing-scroll].is-scroll-motion-ready .product-closing-cta__media{
    clip-path: inset(
      calc((1 - var(--product-end-media-progress, 0)) * 28%)
      calc((1 - var(--product-end-media-progress, 0)) * 30%)
      calc((1 - var(--product-end-media-progress, 0)) * 28%)
      calc((1 - var(--product-end-media-progress, 0)) * 30%)
    );
    transform: scale(calc(0.96 + (var(--product-end-media-progress, 0) * 0.04)));
    transform-origin: center center;
    will-change: clip-path, transform;
  }
[data-product-closing-scroll].is-scroll-motion-ready .product-closing-cta__content{
    opacity: var(--product-end-content-progress, 0);
    transform: scale(calc(0.97 + (var(--product-end-content-progress, 0) * 0.03)));
    transform-origin: center center;
    will-change: opacity, transform;
  }
[data-product-closing-scroll].is-scroll-motion-ready .product-closing-cta__content .page-actions{
    opacity: var(--product-end-action-progress, 0);
    transform: scale(calc(0.98 + (var(--product-end-action-progress, 0) * 0.02)));
    transform-origin: center center;
    pointer-events: none;
    will-change: opacity, transform;
  }
[data-product-closing-scroll].is-scroll-motion-ready.is-product-end-interactive .product-closing-cta__content .page-actions{
    pointer-events: auto;
  }
.product-experience--hard-shell .product-closing-cta--hard-shell.is-motion-ready:not(.is-visible) .product-closing-cta__media,
.product-experience--hard-shell .product-closing-cta--hard-shell.is-motion-ready:not(.is-visible) .product-closing-cta__content{
    transform: translateY(14px);
    transition-duration: 520ms;
  }}
@media (max-width: 960px) {@keyframes product-end-mobile-dot-pop {
    0% { transform: scale(0.35); }
    68% { transform: scale(1.12); }
    100% { transform: scale(1); }
  }
@keyframes product-end-mobile-dot-nudge {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(3px) scale(0.94); }
  }
[data-product-end-scroll].is-scroll-motion-ready .product-end-transition__line{
    width: var(--product-end-line-width, 10px);
    height: calc(4px - (var(--product-end-line-progress, 0) * 3px));
    margin-right: auto;
    margin-left: auto;
    border-radius: 999px;
    background: #000000;
    opacity: var(--product-end-line-opacity, 0.6);
    will-change: width, height;
  }
[data-product-end-scroll].is-product-end-line-started .product-end-transition__line{
    animation: none;
  }
[data-product-end-scroll].is-product-end-line-started.is-product-end-line-waiting .product-end-transition__line{
    animation:
      product-end-mobile-dot-pop 240ms cubic-bezier(0.22, 1, 0.36, 1),
      product-end-mobile-dot-nudge 1.2s 240ms ease-in-out infinite;
  }
[data-product-closing-scroll].is-scroll-motion-ready{
    overflow: clip;
    clip-path: inset(
      calc((1 - var(--product-end-progress, 0)) * 18%)
      calc((1 - var(--product-end-progress, 0)) * 42%)
      calc((1 - var(--product-end-progress, 0)) * 18%)
      calc((1 - var(--product-end-progress, 0)) * 42%)
      round 12px
    );
    will-change: clip-path;
  }
[data-product-closing-scroll].is-scroll-motion-ready .product-closing-cta__media{
    clip-path: inset(
      calc((1 - var(--product-end-media-progress, 0)) * 18%)
      calc((1 - var(--product-end-media-progress, 0)) * 34%)
      calc((1 - var(--product-end-media-progress, 0)) * 18%)
      calc((1 - var(--product-end-media-progress, 0)) * 34%)
    );
    transform: scale(calc(0.985 + (var(--product-end-media-progress, 0) * 0.015)));
    transform-origin: center center;
    will-change: clip-path, transform;
  }
[data-product-closing-scroll].is-scroll-motion-ready .product-closing-cta__content{
    opacity: var(--product-end-content-progress, 0);
    transform: translateY(calc((1 - var(--product-end-content-progress, 0)) * 16px));
    will-change: opacity, transform;
  }
[data-product-closing-scroll].is-scroll-motion-ready .product-closing-cta__content .page-actions{
    opacity: var(--product-end-action-progress, 0);
    transform: translateY(calc((1 - var(--product-end-action-progress, 0)) * 10px));
    pointer-events: none;
    will-change: opacity, transform;
  }
[data-product-closing-scroll].is-scroll-motion-ready.is-product-end-interactive .product-closing-cta__content .page-actions{
    pointer-events: auto;
  }}
/* Cocoon family pages: factual selection and system context */
.cocoon-family-facts,
.cocoon-system{
  width: var(--content-rail-width);
  margin-right: auto;
  margin-left: auto;
}
.cocoon-family-facts{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.cocoon-family-facts article{
  min-width: 0;
  padding: clamp(1.6rem, 3vw, 2.7rem);
  text-align: center;
}
.cocoon-family-facts article:first-child{
  padding-left: 0;
}
.cocoon-family-facts article:last-child{
  padding-right: 0;
}
.cocoon-family-facts span{
  color: rgba(24, 21, 18, 0.5);
  font-family: var(--font-glacial);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.cocoon-family-facts strong{
  display: block;
  margin: 0.7rem 0 0.5rem;
  color: var(--ink);
  font-family: var(--font-glacial);
  font-size: clamp(2.3rem, 4.2vw, 4.15rem);
  font-weight: 400;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.cocoon-family-facts p{
  max-width: 29ch;
  margin: 0 auto;
  color: rgba(24, 21, 18, 0.64);
  line-height: 1.55;
}
.cocoon-system{
  padding: clamp(5.5rem, 9vw, 8rem) 0;
  border-top: 1px solid var(--line);
}
.cocoon-system > header{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  align-items: start;
  padding-bottom: clamp(2.2rem, 4vw, 3.5rem);
}
.cocoon-system > header .label{
  margin-bottom: 0;
}
.cocoon-system h2{
  max-width: none;
  margin: 0;
  font-size: clamp(2.65rem, 4vw, 3.8rem);
  line-height: 1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.cocoon-system > header p,
.cocoon-system__grid p{
  color: rgba(24, 21, 18, 0.68);
  line-height: 1.7;
}
.cocoon-system > header p{
  max-width: 62ch;
  margin: 0;
  text-align: justify;
  text-justify: inter-word;
}
.cocoon-system__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(1.75rem, 3.5vw, 3.5rem);
}
.cocoon-system__grid article{
  display: grid;
  grid-template-rows: auto auto 1fr;
  align-content: start;
  padding: clamp(2.1rem, 3.5vw, 3.2rem) 0;
}
.cocoon-system__icon{
  width: 3.75rem;
  height: 3.75rem;
  object-fit: contain;
  object-position: left center;
}
.cocoon-system__icon--landscape{
  width: 5rem;
}
.cocoon-system__grid h3{
  margin: 1.15rem 0 0.55rem;
  font-size: clamp(1.55rem, 2.2vw, 2.1rem);
  font-weight: 400;
  line-height: 1.08;
}
.cocoon-system__grid p{
  max-width: 58ch;
  margin: 0;
  text-align: justify;
  text-justify: inter-word;
}
.product-faq .product-specs__list summary{
  padding-right: 1.5rem;
}
@media (max-width: 960px) {.product-intro,
.family-row,
.model-story__layout,
.product-specs{
    grid-template-columns: 1fr;
  }
.cocoon-system > header{
    row-gap: 1rem;
  }
.cocoon-system__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
.family-row--reverse .family-row__media{
    order: initial;
  }
.model-story__visual{
    position: relative;
    top: auto;
    display: none;
  }
.model-story__chapter{
    min-height: auto;
    padding: clamp(3rem, 8vw, 5rem) 0;
    opacity: 1;
  }
.model-story__mobile-image{
    display: block;
    width: 100%;
    max-height: 560px;
    margin: 0 0 2rem;
    object-fit: contain;
    border-radius: 6px;
    background: rgba(255, 250, 242, 0.74);
  }}
@media (prefers-reduced-motion: reduce) {.product-experience .official-hero--product .official-hero__media,
.model-story__frame,
.model-story__frame > img,
.model-story__chapter,
.family-row__media img{
    transition: none;
    transform: none;
  }}
.product-experience .official-hero--comparison{
  --hero-image: none;
  --hero-position: center 50%;
}
.product-experience .official-hero--comparison .official-hero__media--comparison{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: none;
}
.product-experience .official-hero--comparison .official-hero__media--comparison::after{
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, rgb(17 14 11 / 72%) 0%, rgb(17 14 11 / 56%) 46%, rgb(17 14 11 / 27%) 100%),
    linear-gradient(180deg, rgb(17 14 11 / 10%) 0%, rgb(17 14 11 / 28%) 100%);
  pointer-events: none;
}
.product-closing-cta--oxygen-rental .product-closing-cta__media img{
  object-position: 50% 47%;
}
.product-closing-cta--oxygen-rental p{
  max-width: 41ch;
  margin-bottom: 1.8rem;
}
/* Shared desktop product system: confirmed palette, rhythm, imagery, FAQ, and CTA ending. */
body:has(> main.product-experience--standard-ending){
  --ink: #000000;
  --ink-soft: rgb(0 0 0 / 68%);
  --paper: var(--page-canvas);
  --paper-strong: var(--page-canvas);
  --mist: rgb(181 190 165 / 34%);
  --copper: #985a20;
  --clay: #74452c;
  --smoke: var(--page-canvas);
  --charcoal: #000000;
  --line: rgb(0 0 0 / 14%);
  --white-line: rgb(239 236 231 / 24%);
  --shadow: 0 28px 90px rgb(0 0 0 / 16%);
  background: var(--page-canvas);
  color: #000000;
}
body:has(> main.product-experience--standard-ending)::before,
body:has(> main.product-experience--standard-ending)::after{
  display: none;
}
body:has(> main.product-experience--standard-ending) .floating-cta{
  background: #25D366;
  color: #ffffff;
}
body:has(> main.product-experience--standard-ending) .nav-menu{
  background: rgb(239 236 231 / 96%);
}
.product-experience--standard-ending{
  --product-content-width: var(--content-rail-width);
  --product-boundary-width: var(--content-rail-boundary);
  --product-section-space: clamp(5.5rem, 10vw, 9rem);
  --product-faq-exit-space: clamp(5rem, 6vw, 7rem);
  --product-cta-entry-space: clamp(2.4rem, 3vw, 3.2rem);
  --product-section-line: rgb(0 0 0 / 14%);
  background: var(--page-canvas);
  color: #000000;
}
.product-experience--standard-ending .official-hero--product{
  background: #000000;
}
.product-experience--standard-ending .official-hero--product .official-hero__media{
  background-image:
    linear-gradient(90deg, rgb(0 0 0 / 62%), rgb(0 0 0 / 27%)),
    linear-gradient(180deg, rgb(0 0 0 / 12%), rgb(0 0 0 / 28%)),
    var(--hero-image);
}
.product-experience--standard-ending > section:not(.official-hero):not(.product-closing-cta){
  position: relative;
  border-top: 0;
}
.product-experience--standard-ending > section:not(.official-hero):not(.product-closing-cta)::before{
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--product-boundary-width);
  height: 1px;
  background: var(--product-section-line);
  content: "";
  transform: translateX(-50%);
}
.product-experience--standard-ending .cocoon-family-facts{
  border-top: 0;
  border-bottom: 0;
}
.product-experience--standard-ending.product-experience--cocoon .family-selector--cocoon{
  padding-bottom: var(--product-section-space);
}
.product-experience--standard-ending .family-row__media,
.product-experience--standard-ending .model-story__frame,
.product-experience--standard-ending .ewot-paths__shot-media,
.product-experience--standard-ending .ewot-system-card__media{
  background: var(--media-frame-surface);
}
.product-experience--standard-ending .ewot-system-card{
  background: var(--card-surface);
}
.product-experience--standard-ending .oxygen-bar-process__steps > li > span{
  background: #B87F45;
  color: #000000;
}
.product-experience--standard-ending .product-faq{
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(3rem, 8vw, 8rem);
  width: var(--product-content-width);
  padding: var(--product-section-space) 0 var(--product-faq-exit-space);
  border-color: var(--product-section-line);
}
.product-experience--standard-ending .product-faq__intro h2{
  max-width: 12ch;
  font-size: clamp(2.6rem, 4vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
}
.product-experience--standard-ending .product-faq__intro h2:has(.product-faq__title-line){
  max-width: none;
}
.product-experience--standard-ending .product-faq__title-line{
  display: block;
  white-space: normal;
  text-wrap: balance;
}
.product-experience--standard-ending .product-faq .product-specs__list,
.product-experience--standard-ending .product-faq .product-specs__list details{
  border-color: var(--product-section-line);
}
.product-experience--standard-ending .product-faq .product-specs__list summary{
  position: relative;
  display: flex;
  min-height: 5.75rem;
  align-items: center;
  padding: 1.2rem 3.25rem 1.2rem 0;
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  line-height: 1.16;
}
.product-experience--standard-ending .product-faq .product-specs__list summary::after{
  position: absolute;
  top: 50%;
  right: 0;
  float: none;
  color: #B87F45;
  font-family: var(--font-glacial);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  transform: translateY(-50%);
}
.product-experience--standard-ending .product-faq .product-specs__list summary:focus-visible,
.product-experience--standard-ending .model-story__specs summary:focus-visible{
  outline: 2px solid #1F9A94;
  outline-offset: -0.35rem;
}
.product-experience--standard-ending .product-faq .product-specs__list [data-disclosure-content]{
  --disclosure-content-inline-end: 3rem;
  color: rgb(0 0 0 / 72%);
}
.product-experience--standard-ending .product-faq__questions[hidden]{
  display: none;
}
.product-experience--standard-ending .product-faq__questions.is-faq-extra-animating{
  display: block;
  overflow: hidden;
  will-change: height, opacity;
}
.product-experience--standard-ending .product-faq__toggle{
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.6rem;
  padding: 0;
  border: 0;
  border-bottom: 1px solid currentcolor;
  background: transparent;
  color: #B87F45;
  cursor: pointer;
  font-family: var(--font-glacial);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
}
.product-experience--standard-ending .product-faq__toggle:hover,
.product-experience--standard-ending .product-faq__toggle:focus-visible{
  color: #000000;
}
.product-experience--standard-ending .product-faq__toggle:focus-visible{
  outline: 2px solid #1F9A94;
  outline-offset: 0.3rem;
}
:is(.product-experience--standard-ending, .learning-guide) .product-end-transition{
  width: var(--product-content-width);
  margin-bottom: var(--product-cta-entry-space);
}
:is(.product-experience--standard-ending, .learning-guide) .product-end-transition__line{
  background: var(--product-section-line);
}
/* Product-page ink + rail width only — Learning uses its own compact panel below. */
.product-experience--standard-ending .product-closing-cta--framed{
  width: var(--product-content-width);
  background: var(--cta-surface);
  color: #000000;
}
:is(.product-experience--standard-ending, .learning-guide) .product-closing-cta--framed{
  background: var(--cta-surface);
  color: #000000;
}
:is(.product-experience--standard-ending, .learning-guide) .product-closing-cta--framed .product-closing-cta__media img{
  object-position: center;
}
.product-experience--standard-ending.product-experience--hard-shell .product-closing-cta__media img{
  object-position: 50% 48%;
}
.product-experience--standard-ending.product-experience--oxygen-bar .product-closing-cta__media img{
  object-position: 50% 47%;
}
.product-experience--standard-ending.product-experience--ewot .product-closing-cta__media img{
  object-position: 46% 54%;
}
:is(.product-experience--standard-ending, .learning-guide) .product-closing-cta--framed .label{
  color: #B87F45;
}
:is(.product-experience--standard-ending, .learning-guide) .product-closing-cta--framed h2{
  max-width: none;
  min-width: 0;
  width: 100%;
  margin: 0.8rem 0 1.4rem;
  color: #000000;
  font-size: clamp(1.7rem, 2.65vw, 3.2rem);
  line-height: 1;
  letter-spacing: -0.025em;
  overflow-wrap: break-word;
  white-space: normal;
  text-align: left;
  text-wrap: balance;
}
:is(.product-experience--standard-ending, .learning-guide) .product-closing-cta--framed p{
  max-width: 41ch;
  margin: 0 0 1.8rem;
  color: var(--ink-soft);
  line-height: 1.65;
  text-align: left;
}
:is(.product-experience--standard-ending, .learning-guide) .product-closing-cta--framed .page-actions{
  justify-content: flex-start;
  align-items: center;
  margin-top: 0;
}
:is(.product-experience--standard-ending, .learning-guide) .product-closing-cta--framed .product-closing-cta__link,
:is(.product-experience--standard-ending, .learning-guide) .product-closing-cta--framed .product-closing-cta__link:hover,
:is(.product-experience--standard-ending, .learning-guide) .product-closing-cta--framed .product-closing-cta__link:focus-visible{
  color: #000000;
}
@media (max-width: 960px) {.product-experience--standard-ending .product-faq,
.product-experience--standard-ending .product-specs.product-faq{
    grid-template-columns: 1fr;
    height: auto;
    /* Stacked FAQ: keep title close to the first question (desktop column gap is too large). */
    gap: 0.85rem;
  }
.product-experience--standard-ending .product-faq__intro h2{
    margin-bottom: 0.2rem;
  }
:is(.product-experience--standard-ending, .learning-guide) .product-closing-cta--framed .product-closing-cta__title-line{
    white-space: normal;
  }}
body:has(> main.product-experience--standard-ending) .site-footer{
  border-color: rgb(0 0 0 / 14%);
  background: var(--section-canvas);
}
body:has(> main.product-experience--standard-ending) .footer-links h2,
body:has(> main.product-experience--standard-ending) .footer-community h2{
  color: #B87F45;
}
body:has(> main.product-experience--standard-ending) .footer-contact p,
body:has(> main.product-experience--standard-ending) .footer-links a,
body:has(> main.product-experience--standard-ending) .footer-note{
  color: rgb(0 0 0 / 62%);
}
body:has(> main.product-experience--standard-ending) .footer-socials a{
  color: var(--footer-bar-surface);
}
body:has(> main.product-experience--standard-ending) .site-footer__bar{
  background: var(--footer-bar-surface);
  color: var(--footer-bar-ink);
}
body:has(> main.product-experience--standard-ending) .floating-cta:hover,
body:has(> main.product-experience--standard-ending) .floating-cta:focus-visible{
  background: #25D366;
  color: #ffffff;
  box-shadow:
    0 20px 40px rgb(18 82 45 / 30%),
    0 5px 14px rgb(0 0 0 / 14%);
}
body:has(> main.product-experience--standard-ending) .floating-cta:focus-visible{
  outline-color: #B87F45;
}
.product-experience--standard-ending :where(p, li, dt, dd, figcaption){
  color: rgb(0 0 0 / 70%) !important;
}
.product-experience--standard-ending :where(.cocoon-family-facts span, .product-data-strip span, .model-story__specs dt, .model-story__counter){
  color: rgb(0 0 0 / 50%) !important;
}
.product-experience--standard-ending .model-story__counter{
  background: rgb(239 236 231 / 82%);
}
.product-experience--standard-ending :where(.label, .product-use-cases__grid article > span, .ewot-process__grid article > span, .ewot-support__icon){
  color: #B87F45;
}
.product-experience--standard-ending .official-hero--product,
.product-experience--standard-ending .official-hero--product :where(h1, p, .label){
  color: #EFECE7 !important;
}
.product-experience--standard-ending .product-closing-cta--framed p{
  color: rgb(0 0 0 / 72%) !important;
}
/* Navigation hubs: high-resolution heroes and editorial destination rows. */
.hub-experience .official-hero--product .official-hero__media{
  background-attachment: scroll;
}
.hub-experience .official-hero__media--family-split,
.hub-experience .official-hero__media--product-split{
  display: grid;
  overflow: hidden;
  background-attachment: scroll;
  background-color: #000000;
  background-image: none;
}
.hub-experience .official-hero__media--family-split{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hub-experience .official-hero__media--product-split{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.hub-experience .official-hero__panel{
  min-width: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.product-experience--cocoon .official-hero__panel--hard-shell{
  background-image:
    linear-gradient(90deg, rgb(0 0 0 / 44%), rgb(0 0 0 / 66%)),
    url("assets/heroes/cocoon/cocoon-hard-shell-product.webp");
  background-position: center;
}
.product-experience--cocoon .official-hero__panel--soft-shell{
  background-image:
    linear-gradient(90deg, rgb(0 0 0 / 66%), rgb(0 0 0 / 44%)),
    url("assets/heroes/cocoon/cocoon-soft-shell-product.webp");
  background-position: center;
}
.product-experience--oxygen-products .official-hero__panel--boost{
  --hero-image-position: 68% center;
  background-image:
    linear-gradient(rgb(0 0 0 / 56%), rgb(0 0 0 / 56%)),
    url("assets/heroes/oxygen-products/boost-lifestyle-calm-user.webp");
  background-position: 68% center;
}
.product-experience--oxygen-products .official-hero__panel--poc{
  --hero-image-position: center center;
  background-image:
    linear-gradient(rgb(0 0 0 / 52%), rgb(0 0 0 / 52%)),
    url("assets/heroes/oxygen-products/poc-hub-panel-centered-v1.webp");
  background-position: center center;
}
.product-experience--oxygen-products .official-hero__panel--ewot{
  --hero-image-position: center 28%;
  --hero-image-scale: 1;
  overflow: hidden;
  background-image:
    linear-gradient(rgb(0 0 0 / 52%), rgb(0 0 0 / 52%)),
    url("assets/heroes/oxygen-products/ewot-cabinet-interior-full-generated-v4.webp");
  background-position: center 28%;
}
.hub-experience .official-hero--product .official-hero__media--learning-reading{
  background-image:
    linear-gradient(90deg, rgb(0 0 0 / 64%), rgb(0 0 0 / 26%)),
    linear-gradient(180deg, rgb(0 0 0 / 10%), rgb(0 0 0 / 24%)),
    url("assets/hubs/learning-reading-hero.webp");
  background-position: center, center, 58% center;
  background-size: cover;
}
.hub-experience .family-selector--cocoon{
  padding-bottom: clamp(5.5rem, 10vw, 9rem);
}
.hub-experience .family-selector--cocoon .family-row:last-of-type{
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
  border-bottom: 1px solid rgb(0 0 0 / 14%);
}
.hub-experience .hub-entry-row{
  position: relative;
  border-radius: 6px;
  outline: none;
}
.hub-experience .hub-entry-row:focus-visible{
  outline: 2px solid #1F9A94;
  outline-offset: 0.65rem;
}
.hub-experience .hub-entry-row__media{
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000000;
}
.hub-experience .hub-entry-row__media::after{
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgb(0 0 0 / 0%);
  content: "";
  pointer-events: none;
  transition: background-color 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hub-experience .hub-entry-row__media img{
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hub-experience .hub-entry-row__media--empty{
  display: grid;
  place-items: center;
  color: #f4ead8;
  font-family: var(--font-glacial);
  font-size: clamp(1.35rem, 2.4vw, 2.05rem);
  letter-spacing: -0.02em;
  text-align: center;
  padding: 1.4rem;
}
/* Cocoon hub entry plates are generated at 3:2 with product breathing room.
   Match that ratio so object-fit:cover does not shave the chamber. */
.product-experience--cocoon .hub-entry-row__media{
  aspect-ratio: 3 / 2;
}
.product-experience--cocoon .hub-entry-row__media img{
  object-position: center center;
}
.product-experience--oxygen-products .hub-entry-row[href*="ewot"] .hub-entry-row__media img{
  object-position: center 48%;
}
.hub-experience .hub-entry-row__arrow{
  position: absolute;
  right: clamp(1rem, 2vw, 1.5rem);
  bottom: clamp(1rem, 2vw, 1.5rem);
  z-index: 2;
  display: grid;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: #EFECE7;
  color: #000000;
  font-family: var(--font-glacial);
  font-size: 1.35rem;
  line-height: 1;
  opacity: 0;
  place-items: center;
  transform: translate3d(-0.75rem, 0.3rem, 0) scale(0.86);
  transition:
    opacity 320ms ease,
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hub-experience .hub-entry-row:is(:hover, :focus-visible) .hub-entry-row__media img{
  filter: none;
  transform: scale(1.025);
}
.hub-experience .hub-entry-row:is(:hover, :focus-visible) .hub-entry-row__media::after{
  background-color: rgb(0 0 0 / 8%);
}
.hub-experience .hub-entry-row:is(:hover, :focus-visible) .hub-entry-row__arrow{
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}
@media (prefers-reduced-motion: reduce) {.hub-experience .hub-entry-row__media img,
.hub-experience .hub-entry-row__media::after,
.hub-experience .hub-entry-row__arrow{
    transition: none;
  }}
.contact-choice__option:is(:hover, :has(input:checked)) .contact-choice__mark{
  opacity: 1;
  transform: translate(0, 0);
}
.contact-concierge__option:is(:hover, :has(input:checked)) .contact-concierge__mark{
  opacity: 1;
  transform: translateX(0);
}
/* ——— Mobile completion pass: navigation, reading rhythm, and touch-safe controls ——— */
.reveal{
  opacity: 1;
  transform: none;
}
.js .reveal{
  opacity: 0;
  transform: translateY(16px);
}
.js .reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}
.mobile-nav-toggle,
.mobile-nav-layer{
  display: none;
}
@media (prefers-reduced-motion: reduce) {.js .reveal{
    opacity: 1;
    transform: none;
  }}
/* Global typography system: Glacial Indifference is the single approved typeface.
   Components keep their own scale so cards, disclosures, and editorial areas do
   not inherit a page-wide heading size. */
body{
  font-family: var(--font-glacial);
  font-synthesis: none;
}
button,
input,
select,
textarea{
  font: inherit;
}
@media (min-width: 701px) {.primary-nav{
    gap: clamp(1.1rem, 1.9vw, 2rem);
    font-size: clamp(1rem, 1.16vw, 1.13rem);
    font-weight: 500;
    letter-spacing: 0.005em;
  }
.nav-menu{
    font-size: 1rem;
  }}
/* Final CTA cards share one quiet ivory surface across the site. */
.product-closing-cta--showroom{
  background: var(--cta-card-surface);
  color: var(--ink);
}
.product-closing-cta--showroom :is(h2, h3){
  color: var(--ink);
}
.product-closing-cta--showroom p{
  color: rgba(24, 21, 18, 0.72);
}
/* Shared CTA and FAQ component contract.
   Content may differ from page to page; surface, scale, motion, and disclosure
   states must not. Keep this block last so retired page-local rules cannot
   change a component's visual behaviour. */
:root{
  /* Component aliases intentionally resolve to the site-wide colour contract. */
  --shared-component-canvas: var(--card-muted-surface);
  --shared-component-surface: var(--card-surface);
  --shared-component-line: var(--card-line);
  /* Policy-inspired FAQ hierarchy: quiet canvas, then a distinct reading surface. */
  /* Keep the category rail on the same reading surface as FAQ answers. */
  --faq-page-rail: var(--card-surface);
  --faq-page-surface: var(--card-surface);
  --shared-component-radius: 12px;
  --shared-component-motion-duration: 420ms;
  --shared-component-motion-easing: cubic-bezier(0.22, 1, 0.36, 1);
}
.product-experience--standard-ending{
  background: var(--page-canvas);
}
.product-closing-cta--framed{
  /*
    Shared closing CTA frame — About showroom is the source of truth.
    Every page with --framed uses this geometry: width, columns, height,
    radius, and content padding. Do not re-declare these per product page.
  */
  --cta-canvas: var(--cta-card-surface);
  --cta-surface: var(--cta-card-surface);
  --cta-line: var(--card-line);
  --cta-frame-min-height: 560px;
  --cta-frame-media-ratio: 16 / 10;
  --cta-frame-radius: clamp(1.3rem, 2.3vw, 2.4rem);
  --cta-content-padding: clamp(3rem, 5.5vw, 6rem);
  --cta-frame-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  --cta-radius: var(--cta-frame-radius);
  --cta-motion-duration: var(--shared-component-motion-duration);
  --cta-motion-easing: var(--shared-component-motion-easing);

  display: grid;
  grid-template-columns: var(--cta-frame-columns);
  align-items: stretch;
  /* Keep the About-era breathing room between photo and copy. */
  gap: clamp(2rem, 5vw, 4rem);
  overflow: hidden;
  width: var(--content-rail-width);
  min-height: 0;
  margin: 0 auto clamp(4.5rem, 6vw, 6rem);
  padding: 0;
  border: 0;
  border-block: 0;
  border-radius: var(--cta-frame-radius);
  background: var(--cta-surface);
  color: var(--ink);
  text-align: left;
}
/* Kill legacy .showroom-cta chrome when the shared framed CTA is in use. */
.product-closing-cta--framed .product-closing-cta__media{
  position: relative;
  align-self: stretch;
  aspect-ratio: var(--cta-frame-media-ratio);
  height: auto;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: var(--cta-canvas);
}
.product-closing-cta--framed .product-closing-cta__media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.product-closing-cta--framed .product-closing-cta__content{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
  box-sizing: border-box;
  min-width: 0;
  /* Keep copy from shrinking under the photo-height row (overflow:hidden on the
     frame would otherwise zero min-height and clip instead of reflowing). */
  min-height: min-content;
  height: auto;
  padding: var(--cta-content-padding);
  background: var(--cta-surface);
  text-align: left;
}
/* Shared copy tone for every framed CTA, including About. */
.product-closing-cta--framed .label{
  color: #B87F45;
}
.product-closing-cta--framed h2{
  max-width: none;
  min-width: 0;
  width: 100%;
  margin: 0.8rem 0 1.4rem;
  color: var(--ink);
  font-size: clamp(1.7rem, 2.65vw, 3.2rem);
  line-height: 1;
  letter-spacing: -0.025em;
  overflow-wrap: break-word;
  white-space: normal;
  text-align: left;
  text-wrap: balance;
}
.product-closing-cta--framed p{
  max-width: 41ch;
  margin: 0 0 1.8rem;
  color: var(--ink-soft);
  line-height: 1.65;
  text-align: left;
}
.product-closing-cta--framed .page-actions{
  justify-content: flex-start;
  align-items: center;
  margin-top: 0;
}
.product-closing-cta--framed .page-actions:has(> :nth-child(2):last-child){
  flex-wrap: nowrap;
  gap: 0.85rem;
}
.product-closing-cta--framed .page-actions .button{
  flex: 0 1 auto;
  min-width: 0;
}
.product-closing-cta--framed .page-actions .product-closing-cta__link{
  flex: 0 0 auto;
  white-space: nowrap;
}
@media (max-width: 960px) {.product-closing-cta--framed{
    grid-template-columns: 1fr;
    min-height: 0;
    height: auto;
    /* Stacked frame: desktop column gap must not become a tall empty band. */
    gap: 0;
  }
.product-closing-cta--framed .product-closing-cta__media,
.product-closing-cta--framed .product-closing-cta__content{
    min-height: 0;
  }
.product-closing-cta--framed .product-closing-cta__media{
    aspect-ratio: 16 / 10;
  }
.product-closing-cta--framed .product-closing-cta__content{
    height: auto;
    padding: 1.45rem 1.15rem 2.5rem;
  }
.product-closing-cta--framed .product-closing-cta__title-line{
    white-space: normal;
  }
/* Dual actions stay one row — shrink control size so long labels do not clip. */
.product-closing-cta--framed .page-actions:has(> :nth-child(2):last-child){
    gap: 0.45rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
.product-closing-cta--framed .page-actions:has(> :nth-child(2):last-child) .button{
    flex: 1 1 auto;
    min-width: 0;
    min-height: 2.4rem;
    padding-inline: 0.72rem;
    font-size: 0.76rem;
  }
.product-closing-cta--framed .page-actions:has(> :nth-child(2):last-child) .product-closing-cta__link{
    flex: 0 1 auto;
    min-width: 0;
    min-height: 2.4rem;
    font-size: 0.76rem;
  }}
/* This selector matches the legacy product-ending rule's specificity so the
   shared CTA surface cannot be replaced by an older page-level declaration. */
:is(.product-experience--standard-ending, .learning-guide) .product-closing-cta--framed{
  border: 0;
  background: var(--cta-surface);
}
/* Match the legacy CTA selector specificity so its fallback cannot create a colour seam. */
:is(.product-experience--standard-ending, .learning-guide) .product-closing-cta--framed .product-closing-cta__media,
.product-closing-cta--framed .product-closing-cta__media{
  background: var(--cta-canvas);
}
.product-closing-cta--framed .button--primary{
  transition:
    background-color var(--cta-motion-duration) var(--cta-motion-easing),
    border-color var(--cta-motion-duration) var(--cta-motion-easing),
    color var(--cta-motion-duration) var(--cta-motion-easing),
    transform var(--cta-motion-duration) var(--cta-motion-easing);
}
.product-closing-cta--framed :is(h2, h3),
.product-closing-cta--framed .product-closing-cta__link,
.product-closing-cta--framed .product-closing-cta__link:hover,
.product-closing-cta--framed .product-closing-cta__link:focus-visible{
  color: var(--ink);
}
.product-closing-cta--framed p{
  color: var(--ink-soft) !important;
}
[data-disclosure-motion]{
  --disclosure-motion-duration: var(--shared-component-motion-duration);
  --disclosure-motion-easing: var(--shared-component-motion-easing);
}
@media (prefers-reduced-motion: reduce) {.product-closing-cta--framed .button--primary{
    transition: none;
  }}
@media (min-width: 701px) {.cocoon-system__toggle{
    display: none;
  }}
/* Learning centre: question-led navigation and searchable guide directory. */
@media (min-width: 961px) {.nav-group--learning .learning-menu{
    position: fixed;
    top: 92px;
    left: 50%;
    z-index: 130;
    display: block;
    width: min(1120px, calc(100vw - 4rem));
    min-height: 438px;
    max-height: calc(100vh - 116px);
    padding: clamp(1.55rem, 2.4vw, 2.25rem);
    overflow: hidden;
    border-radius: 0 0 18px 18px;
    background: rgb(255 249 240 / 98%);
    box-shadow: 0 30px 70px rgb(27 20 13 / 18%);
    transform: translate(-50%, -10px);
  }
/*
    The Learning mega menu is fixed below the header, and its own overflow
    clips any ::before bridge attached to the panel. Keep an invisible
    corridor on the nav group so moving from "Learning" into the panel does
    not leave :hover and collapse the menu.
  */
.nav-group--learning:hover::before,
.nav-group--learning:focus-within::before{
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 129;
    width: min(1120px, calc(100vw - 4rem));
    height: 3.25rem;
    transform: translateX(-50%);
    content: "";
  }
.nav-group--learning .learning-menu::before{
    content: none;
  }
.nav-group--learning:hover .learning-menu,
.nav-group--learning:focus-within .learning-menu{
    transform: translate(-50%, 0);
  }}
.learning-menu__search{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.9rem;
  align-items: center;
  min-height: 58px;
  padding: 0 1.05rem;
  border: 1px solid rgb(0 0 0 / 24%);
  border-radius: 9px;
  background: rgb(255 255 255 / 36%);
  color: rgb(0 0 0 / 68%);
}
.learning-menu__search img{
  width: 1.35rem;
  height: 1.35rem;
  opacity: 0.82;
}
.learning-menu__search input{
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
}
.learning-menu__search input::placeholder{
  color: rgb(0 0 0 / 42%);
  opacity: 1;
}
.learning-menu__search:focus-within{
  border-color: var(--copper);
  box-shadow: 0 0 0 3px rgb(184 127 69 / 12%);
}
.learning-menu__search > span{
  color: rgb(0 0 0 / 42%);
  font-size: 0.74rem;
}
.learning-menu__body{
  display: grid;
  grid-template-columns: minmax(210px, 0.32fr) minmax(0, 0.68fr);
  gap: clamp(2rem, 4vw, 4rem);
  margin-top: 1.65rem;
}
.learning-menu__topics{
  display: grid;
  align-content: start;
  max-height: min(28rem, calc(100vh - 240px));
  overflow-y: auto;
  border-right: 1px solid rgb(0 0 0 / 12%);
}
.learning-menu__topics .learning-menu__topic{
  position: relative;
  display: block;
  width: calc(100% - 1.8rem);
  padding: 0.62rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgb(0 0 0 / 72%);
  font: inherit;
  font-size: 0.96rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.learning-menu__topic::after{
  position: absolute;
  right: 0;
  bottom: 0.2rem;
  left: 0;
  height: 2px;
  background: var(--copper);
  content: "";
  opacity: 0;
  transform: scaleX(0.45);
  transform-origin: left center;
  transition: opacity 180ms ease, transform 220ms ease;
}
.learning-menu__topic:hover,
.learning-menu__topic:focus-visible,
.learning-menu__topic.is-active{
  color: var(--copper);
}
.learning-menu__topic:focus-visible{
  outline: 2px solid var(--copper);
  outline-offset: 4px;
}
.learning-menu__topic.is-active::after{
  opacity: 1;
  transform: scaleX(1);
}
.learning-menu__answers{
  min-width: 0;
}
.learning-menu__answers-head{
  margin-bottom: 0.2rem;
  color: rgb(0 0 0 / 62%);
  font-size: 0.76rem;
  letter-spacing: 0.02em;
}
.learning-menu__results{
  border-bottom: 1px solid rgb(0 0 0 / 13%);
}
.learning-menu__result{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.25rem;
  align-items: center;
  padding: 1rem 0;
  border-top: 1px solid rgb(0 0 0 / 13%);
  border-radius: 0;
  color: var(--ink);
  text-decoration: none;
}
.learning-menu__result-copy{
  display: grid;
  gap: 0.3rem;
  min-width: 0;
}
.learning-menu__eyebrow{
  color: var(--copper);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.learning-menu__result strong{
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  font-weight: 500;
  line-height: 1.26;
}
.learning-menu__result small{
  max-width: 56ch;
  color: rgb(0 0 0 / 56%);
  font-size: 0.76rem;
  line-height: 1.45;
}
.learning-menu__arrow{
  color: rgb(0 0 0 / 68%);
  font-size: 1.3rem;
  transition: color 180ms ease, transform 180ms ease;
}
.learning-menu__result:hover,
.learning-menu__result:focus-visible,
.learning-menu__result.is-selected,
.learning-menu__result.is-current,
.learning-menu__result[aria-current="page"]{
  background: linear-gradient(90deg, rgb(184 127 69 / 7%), transparent 72%);
  color: var(--copper);
}
.learning-menu__result:hover .learning-menu__arrow,
.learning-menu__result:focus-visible .learning-menu__arrow,
.learning-menu__result.is-selected .learning-menu__arrow,
.learning-menu__result.is-current .learning-menu__arrow,
.learning-menu__result[aria-current="page"] .learning-menu__arrow{
  color: var(--copper);
  transform: translateX(0.24rem);
}
.learning-menu__result:focus-visible{
  outline: 2px solid var(--copper);
  outline-offset: 3px;
}
.learning-menu__empty{
  display: grid;
  gap: 0.35rem;
  min-height: 9rem;
  align-content: center;
  border-top: 1px solid rgb(0 0 0 / 13%);
  color: rgb(0 0 0 / 56%);
}
.learning-menu__empty strong{
  color: var(--ink);
  font-size: 1.08rem;
}
.learning-menu__browse{
  display: inline-flex;
  gap: 0.75rem;
  align-items: center;
  margin-top: 1.2rem;
  color: var(--copper);
  text-decoration: none;
}
.learning-menu__browse:hover,
.learning-menu__browse:focus-visible{
  color: var(--ink);
}
@media (prefers-reduced-motion: reduce) {.learning-menu__topic::after,
.learning-menu__arrow{
    transition: none;
  }}
.learning-library__results .hub-entry-row[hidden]{
  display: none;
}
.learning-library__results .hub-entry-row.is-search-selected{
  outline: 2px solid var(--copper);
  outline-offset: 0.65rem;
}
@media (prefers-reduced-motion: reduce) {.learning-library__results .hub-entry-row{
    transition: none;
  }}
/* The hub reaches its first guide sooner and keeps summaries complete on mobile. */
.hub-experience .learning-intro{
  padding-block: clamp(3.25rem, 5vw, 4.5rem);
}
.hub-experience .hub-selector--learning{
  padding-top: clamp(3.25rem, 5vw, 4.5rem);
}
.hub-experience .hub-selector--learning .family-selector__intro{
  margin-bottom: clamp(2rem, 3vw, 2.75rem);
}
@media (min-width: 701px) and (max-width: 1080px) {body.has-mobile-nav{
    overflow: hidden;
  }
.site-header{
    grid-template-columns: minmax(0, 1fr) auto;
  }
.mobile-nav-toggle{
    display: inline-grid;
    min-width: 4.5rem;
    min-height: 2.9rem;
    place-items: center;
    padding-inline: 1rem;
    border: 1px solid rgb(0 0 0 / 16%);
    background: rgb(239 236 231 / 92%);
    color: var(--ink);
    cursor: pointer;
    font-family: var(--font-glacial);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
.mobile-nav-layer{
    position: fixed;
    inset: 0;
    z-index: 120;
    display: block;
    overflow-y: auto;
    padding: 1.25rem clamp(1.5rem, 5vw, 3rem) 2rem;
    background: #efece7;
  }
.mobile-nav-layer[hidden]{
    display: none;
  }
.mobile-nav__bar{
    display: flex;
    min-height: 3.5rem;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--surface-line);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
.mobile-nav-close{
    min-height: 2.75rem;
    border: 0;
    background: transparent;
    color: var(--copper);
    cursor: pointer;
    font: 800 0.78rem var(--font-glacial);
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }
.mobile-nav{
    display: grid;
    padding-block: 1.25rem 2rem;
  }
.mobile-nav__group,
.mobile-nav > .mobile-nav__link{
    border-bottom: 1px solid var(--surface-line);
  }
.mobile-nav__group-trigger{
    display: flex;
    width: 100%;
    min-height: 3.5rem;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    font: 500 1.8rem/1 var(--font-glacial);
    text-align: left;
  }
.mobile-nav__chevron{
    width: 0.6rem;
    height: 0.6rem;
    margin-right: 0.25rem;
    border-right: 1.5px solid var(--copper);
    border-bottom: 1.5px solid var(--copper);
    transform: rotate(45deg);
  }
.mobile-nav__group-trigger[aria-expanded="true"] .mobile-nav__chevron{
    transform: rotate(225deg);
  }
.mobile-nav__link,
.mobile-nav__subnav a{
    display: flex;
    min-height: 3.5rem;
    align-items: center;
    color: var(--ink);
    font-family: var(--font-glacial);
    font-size: 1.8rem;
    line-height: 1;
    text-decoration: none;
  }
.mobile-nav__link[aria-current="page"],
.mobile-nav__subnav a[aria-current="page"]{
    color: var(--copper);
  }
.mobile-nav__subnav{
    display: grid;
    padding: 0.15rem 0 0.8rem 1rem;
  }
.mobile-nav__subnav[hidden]{
    display: none !important;
  }
.mobile-nav__subnav a{
    min-height: 2.75rem;
    color: var(--ink-soft);
    font-size: 1rem;
    line-height: 1.3;
  }
.mobile-nav-toggle:focus-visible,
.mobile-nav-close:focus-visible,
.mobile-nav__group-trigger:focus-visible,
.mobile-nav__subnav-link:focus-visible{
    outline: 2px solid var(--copper);
    outline-offset: 3px;
  }}
/* ===== Merged official-hero runtime (formerly hero-loading.css) ===== */
/*
 * Hero images use real <picture>/<img> layers so each page owns its media.
 * A tiny preview is shown first; script.js promotes the matching full image
 * only after it has downloaded and decoded.
 */
.official-hero[data-official-hero]{
  background-color: transparent !important;
  background-image: none !important;
  background-attachment: scroll !important;
}
.official-hero[data-official-hero] .official-hero__media{
  overflow: hidden;
  background: none !important;
  background-attachment: scroll !important;
}
.official-hero__picture{
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
}
@media (min-width: 701px) {.official-hero__picture.is-fixed-stage-ready{
    background-image: var(--hero-stage-image);
    background-attachment: fixed;
    background-position: var(--hero-image-position, var(--hero-position, center));
    background-repeat: no-repeat;
    background-size: cover;
  }
.official-hero__picture.is-fixed-stage-ready .official-hero__image{
    opacity: 0;
    visibility: hidden;
  }
/* Split-panel hub Heroes: keep each panel crop via object-fit, but hold the
     whole media grid still in the viewport while opening copy scrolls. */
@supports (clip-path: inset(0)) {.official-hero[data-official-hero]:has(> .official-hero__media--family-split),
.official-hero[data-official-hero]:has(> .official-hero__media--product-split){
      overflow: clip;
      -webkit-clip-path: inset(0);
      clip-path: inset(0);
    }
/* Align to the Hero under the sticky header — viewport top:0 leaves a
       paper-coloured band at the Hero bottom (header-height tall). Match the
       product Hero min-height so the grid fills the clipped box. */
.official-hero[data-official-hero] > .official-hero__media--family-split,
.official-hero[data-official-hero] > .official-hero__media--product-split{
      position: fixed;
      top: var(--site-header-offset);
      right: 0;
      bottom: auto;
      left: 0;
      z-index: 0;
      width: 100%;
      height: clamp(600px, 84vh, 900px);
      max-height: 940px;
    }
.official-hero[data-official-hero]:has(> .official-hero__media--family-split) .official-hero__inner,
.official-hero[data-official-hero]:has(> .official-hero__media--product-split) .official-hero__inner{
      position: relative;
      z-index: 1;
    }}}
.official-hero__image{
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-image-position, var(--hero-position, center));
  transform: scale(var(--hero-image-scale, 1));
  transform-origin: center;
}
.official-hero__image--full{
  z-index: 1;
  opacity: 0;
  transition: opacity 220ms ease;
}
.official-hero__image--full.is-loaded{
  opacity: 1;
}
.official-hero[data-official-hero] .official-hero__media::after,
.official-hero[data-official-hero] .official-hero__panel::after{
  position: absolute;
  inset: 0;
  z-index: 2;
  content: "";
  pointer-events: none;
}
.official-hero[data-official-hero] .official-hero__media::after{
  background:
    linear-gradient(90deg, rgb(0 0 0 / 62%), rgb(0 0 0 / 27%)),
    linear-gradient(180deg, rgb(0 0 0 / 12%), rgb(0 0 0 / 28%));
}
/* styles.css: one consolidated <=700px sheet (last-wins cascade flattened). */
@media (max-width: 700px) {.site-header,
.site-header.is-visible,
.site-header.is-compact,
body[data-page] .site-header,
body[data-page] .site-header.is-visible,
body[data-page] .site-header.is-compact{
    inset: 0 0 auto;
    min-height: 4.5rem;
    padding: 0.55rem 1.1rem;
    grid-template-columns: minmax(0, 1fr) auto;
    border-bottom: 1px solid var(--surface-line);
    background: var(--page-canvas);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
.brand{
    width: 132px;
  }
.brand img{
    width: 124px;
  }
h1{
    font-size: 3.6rem;
  }
h2{
    font-size: 2.65rem;
  }
.section,
.about-cocoon,
.product-showcase,
.pathways{
    padding-inline: 1rem;
  }
.subpage-main{
    padding-top: var(--site-header-offset);
  }
.symbol-points li{
    padding-left: 3rem;
  }
.product-card{
    grid-column: auto;
  }
.learning-menu__results{
    height: auto;
    max-height: none;
  }
.site-footer__inner{
    grid-template-columns: 1fr;
    width: min(100% - 2.2rem, 34rem);
    padding-top: 2rem;
    padding-bottom: 5.5rem;
    gap: 1.15rem;
    padding: 2.3rem 0 6.5rem;
    margin: 0 auto;
  }
.footer-brand{
    grid-column: auto;
    gap: 1rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--surface-line);
    grid-template-columns: minmax(5.85rem, 0.7fr) minmax(0, 1.3fr);
    padding: 0 0 1.25rem;
    align-items: start;
  }
.policy-page{
    padding-top: var(--site-header-offset);
  }
.official-page{
    padding-top: var(--site-header-offset);
  }
.official-hero{
    min-height: 520px;
    text-align: left;
  }
.official-hero__inner{
    width: calc(100% - 2rem);
  }
.official-hero h1{
    margin-inline: 0;
    font-size: clamp(3rem, 14vw, 4.1rem);
  }
.official-hero p{
    margin-inline: 0;
  }
.official-hero .page-actions{
    justify-content: center;
  }
.about-numbers__panel{
    grid-template-columns: 1fr;
  }
.about-numbers{
    min-height: 560px;
    padding-inline: 1rem;
  }
.about-numbers__panel div{
    min-height: 138px;
    border-right: 0;
    border-bottom: 1px solid rgba(23, 60, 57, 0.08);
  }
.about-numbers__panel div:last-child{
    border-bottom: 0;
  }
.learning-faq__items,
.study-facts,
.study-facts--compact{
    grid-template-columns: 1fr;
  }
.learning-faq__items article{
    min-height: 0;
  }
.learning-evidence-brief p{
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
.model-story__visual{
    display: none;
  }
.model-story__mobile-image{
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: 23rem;
    margin: 0 0 1.1rem;
    object-fit: cover;
    border-radius: 6px;
    background: transparent;
    margin-bottom: 1.25rem;
  }
.model-story__chapter{
    min-height: 0;
    padding: 1.35rem 0;
    padding-block: 2.6rem;
    border-top: 0;
  }
.model-story__chapter:last-child{
    border-bottom: 0;
    padding-bottom: 0.35rem;
  }
.model-story__specs{
    margin-bottom: 0;
    border: 0;
  }
.product-experience--standard-ending{
    --product-section-space: 3rem;
  }
.product-experience--standard-ending .product-intro,
.product-experience--standard-ending .model-story,
.product-experience--standard-ending .cocoon-system{
    padding-top: var(--product-section-space);
    padding-bottom: var(--product-section-space);
  }
.model-story__chapter h3{
    white-space: normal;
    font-size: clamp(1.9rem, 9vw, 2.55rem);
  }
.product-closing-cta--showroom .page-actions{
    align-items: center;
  }
/* Global dual-action row: compact controls so primary + secondary fit without clipping. */
.page-actions:has(> :nth-child(2):last-child){
    gap: 0.45rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
.page-actions:has(> :nth-child(2):last-child) > .button{
    flex: 1 1 auto;
    min-width: 0;
    min-height: 2.4rem;
    padding-inline: 0.72rem;
    font-size: 0.76rem;
  }
.page-actions:has(> :nth-child(2):last-child) > .product-closing-cta__link,
.page-actions:has(> :nth-child(2):last-child) > a:not(.button){
    flex: 0 1 auto;
    min-width: 0;
    font-size: 0.76rem;
  }
.product-experience .official-hero--product{
    min-height: min(30.5rem, 57svh);
    max-height: none;
    height: auto;
    place-items: center;
  }
.product-experience .official-hero--product .official-hero__media{
    inset: -1.5% 0;
    transform: translate3d(0, var(--hero-shift), 0) scale(1.015);
  }
.product-experience .official-hero--product.official-hero--elevate.is-ready .official-hero__media{
    transform: translate3d(0, var(--hero-shift), 0) scale(1.015);
  }
.product-experience .official-hero--product h1{
    font-size: clamp(3rem, 15vw, 4.8rem);
  }
.product-intro h2,
.product-specs h2,
.product-closing-cta h2{
    font-size: clamp(2.05rem, 8.5vw, 2.65rem);
    line-height: 1.06;
  }
/* Product FAQ rows: desktop keeps 5.75rem; mobile denser scan height. */
.product-experience--standard-ending .product-faq .product-specs__list summary{
    min-height: 3.75rem;
    padding: 0.85rem 2.75rem 0.85rem 0;
    font-size: clamp(1.05rem, 4.2vw, 1.2rem);
    line-height: 1.22;
  }
.model-story__heading{
    text-align: center;
  }
.model-story__heading .label,
.model-story__heading h2{
    display: block;
    margin-inline: auto;
    text-align: center;
    white-space: normal;
  }
.model-story__heading h2{
    font-size: clamp(1.55rem, 7.6vw, 2.6rem);
  }
.product-experience--standard-ending .cocoon-family-facts::before,
.product-experience--standard-ending .model-story::before{
    display: none;
  }
.product-intro,
.family-selector,
.model-story,
.product-specs,
.product-closing-cta{
    width: min(100% - 2rem, var(--content-rail-max));
  }
.cocoon-family-facts,
.cocoon-system{
    width: min(100% - 2rem, var(--content-rail-max));
  }
.cocoon-family-facts{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1.1rem;
    margin-block: 0.35rem 0.75rem;
    padding: 0.95rem 1rem 1.05rem;
    border: 1px solid var(--card-line);
    border-radius: var(--cta-frame-radius, 1.15rem);
    background: var(--card-surface);
  }
.cocoon-family-facts article,
.cocoon-family-facts article:first-child,
.cocoon-family-facts article:last-child{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 0.28rem;
    align-items: start;
    min-height: 0;
    padding: 0.15rem 0.1rem;
    border: 0;
    justify-items: center;
    text-align: center;
  }
.cocoon-family-facts article:nth-child(-n + 2),
.cocoon-family-facts article:nth-child(odd){
    padding-left: 0.1rem;
    border: 0;
  }
.cocoon-family-facts strong{
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    font-size: clamp(1.45rem, 6.4vw, 1.8rem);
    line-height: 0.95;
    text-align: center;
    white-space: nowrap;
  }
.cocoon-family-facts span{
    grid-column: 1;
    grid-row: 2;
    max-width: 14ch;
    margin-inline: auto;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    line-height: 1.28;
    text-align: center;
  }
.cocoon-family-facts p{
    display: none;
  }
.cocoon-system{
    padding: 4rem 0;
  }
.cocoon-system h2{
    font-size: clamp(2.5rem, 12vw, 4rem);
  }
.cocoon-system__grid{
    grid-template-columns: 1fr;
  }
.model-story__specs dl{
    grid-template-columns: minmax(0, 1fr);
  }
.model-story__specs dl > div{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.15rem;
  }
.product-closing-cta--oxygen-rental .product-closing-cta__media{
    aspect-ratio: 4 / 3;
  }
:root{
    --site-header-offset: 4.25rem;
    --product-after-hero-space: 1.6rem;
  }
html{
    scroll-padding-top: 5.25rem;
  }
body.has-mobile-nav{
    overflow: hidden;
  }
.site-header .brand{
    width: auto;
    min-height: 2.5rem;
  }
.site-header .brand img{
    width: auto;
    height: 2.35rem;
    max-width: 7.1rem;
    object-fit: contain;
    object-position: left center;
  }
.site-header .primary-nav{
    display: none;
  }
.site-header .header-tools{
    justify-self: end;
    gap: 0.45rem;
  }
.site-header .lang-switch{
    margin-right: 0;
    margin-left: 0;
  }
.site-header.is-menu-open{
    opacity: 1;
    pointer-events: auto;
    transform: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
.mobile-nav-toggle{
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    min-width: auto;
    min-height: 2.45rem;
    gap: 0.42rem;
    padding: 0 0.15rem 0 0.65rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    font-family: var(--font-glacial);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
.mobile-nav-toggle:focus-visible,
.mobile-nav-close:focus-visible{
    outline: 3px solid rgb(184 127 69 / 78%);
    outline-offset: 3px;
  }
.mobile-nav-layer{
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: block;
    overflow-y: auto;
    padding: max(1rem, env(safe-area-inset-top)) 1.35rem max(1.5rem, env(safe-area-inset-bottom));
    background: var(--page-canvas);
    overscroll-behavior: contain;
    min-height: 100dvh;
  }
.mobile-nav-layer[hidden]{
    display: none;
  }
.mobile-nav__bar{
    display: flex;
    min-height: 3.35rem;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgb(0 0 0 / 14%);
    color: var(--ink);
    font-family: var(--font-glacial);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-bottom-color: var(--surface-line);
  }
.mobile-nav-close{
    min-height: 2.75rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #B87F45;
    cursor: pointer;
    font-family: var(--font-glacial);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }
.mobile-nav{
    display: grid;
    padding: 0.75rem 0 1.45rem;
  }
.mobile-nav__group,
.mobile-nav > .mobile-nav__link{
    border-bottom: 1px solid rgb(0 0 0 / 14%);
    border-bottom-color: var(--surface-line);
  }
.mobile-nav__group-trigger{
    display: flex;
    width: 100%;
    min-height: 3.5rem;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    font: 500 1.8rem/1 var(--font-glacial);
    text-align: left;
    font-family: var(--font-glacial);
  }
.mobile-nav__chevron{
    width: 0.55rem;
    height: 0.55rem;
    margin-right: 0.2rem;
    border-right: 1.5px solid var(--copper);
    border-bottom: 1.5px solid var(--copper);
    transform: rotate(45deg) translate(-0.1rem, -0.1rem);
    transition: transform 220ms ease;
  }
.mobile-nav__group-trigger[aria-expanded="true"] .mobile-nav__chevron{
    transform: rotate(225deg) translate(-0.05rem, -0.05rem);
  }
.mobile-nav__link,
.mobile-nav__subnav a{
    display: flex;
    min-height: 3rem;
    align-items: center;
    color: #000000;
    font-family: var(--font-glacial);
    font-size: clamp(1.55rem, 7vw, 2rem);
    line-height: 1;
    text-decoration: none;
  }
.mobile-nav__link[aria-current="page"],
.mobile-nav__subnav a[aria-current="page"]{
    color: #B87F45;
  }
.mobile-nav__subnav{
    display: grid;
    padding: 0.15rem 0 0.75rem 0.95rem;
    gap: 0.08rem;
  }
.mobile-nav__subnav[hidden]{
    display: none !important;
  }
.mobile-nav__subnav a{
    min-height: 2.45rem;
    color: rgb(0 0 0 / 72%);
    font-family: var(--font-glacial);
    font-size: 0.9rem;
    line-height: 1.3;
  }
.official-page,
.policy-page{
    padding-top: var(--site-header-offset);
  }
.official-hero__inner,
.product-experience .official-hero--product .official-hero__inner{
    width: min(100% - 2rem, 40rem);
    padding: 5.75rem 0 2.15rem;
    text-align: center;
  }
.product-experience > .official-hero,
.about-page--editorial .official-hero--about,
.hub-experience .official-hero--product{
    min-height: min(30.5rem, 57svh);
    max-height: none;
    height: auto;
    place-items: center;
  }
.product-experience > .official-hero .official-hero__inner,
.about-page--editorial .official-hero--about .official-hero__inner,
.hub-experience .official-hero--product .official-hero__inner{
    padding: 2.35rem 0 2.5rem;
  }
.product-experience:not(.hub-experience) > .official-hero .page-actions{
    margin-top: 1.05rem;
    justify-content: center;
  }
.official-hero h1,
.product-experience .official-hero--product h1{
    max-width: 12ch;
    margin-top: 0.65rem;
    font-size: clamp(2.55rem, 11.5vw, 3.8rem);
    line-height: 0.98;
    letter-spacing: -0.035em;
    white-space: normal;
  }
.official-hero p,
.product-experience .official-hero--product p{
    max-width: 34ch;
    font-size: 1rem;
    line-height: 1.58;
  }
.official-hero--elevate .official-hero__inner{
    transition-duration: 420ms;
  }
.product-slider{
    padding-inline: 2.25rem;
  }
.product-carousel .product-card{
    grid-template-rows: auto auto auto auto auto;
    min-height: 0;
    padding: 0.85rem;
  }
.product-carousel .product-card img{
    aspect-ratio: 1 / 0.78;
    height: clamp(12rem, 58vw, 16rem);
    object-fit: cover;
    object-position: center bottom;
    background: transparent;
  }
.product-carousel .product-card p{
    margin-top: 0.5rem;
    font-size: 0.92rem;
  }
.product-slider__button{
    width: 2.75rem;
    min-height: 2.75rem;
  }
.carousel-controls{
    gap: 0.15rem;
  }
.carousel-controls button{
    display: grid;
    width: 2.75rem;
    min-height: 2.75rem;
    place-items: center;
    border: 0;
    border-radius: 0;
  }
.carousel-controls button::after{
    width: 0.5rem;
    height: 0.5rem;
    border: 2px solid rgb(184 127 69 / 70%);
    border-radius: 999px;
    content: "";
  }
.carousel-controls button.is-active::after{
    background: rgb(184 127 69 / 78%);
  }
.family-selector,
.model-story,
.policy-layout{
    scroll-margin-top: 5rem;
  }
.model-story__specs summary{
    min-height: 2.75rem;
    display: flex;
    align-items: center;
  }
.comparison-table-wrap{
    position: relative;
    margin-right: -1rem;
    margin-left: -1rem;
    padding: 0 1rem 2.4rem;
    -webkit-overflow-scrolling: touch;
  }
.comparison-table-wrap::after{
    position: sticky;
    left: 1rem;
    display: inline-block;
    margin-top: 0.85rem;
    padding: 0.45rem 0.65rem;
    background: #B5BEA5;
    color: #000000;
    content: "Swipe to compare →";
    font-family: var(--font-glacial);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
.comparison-table{
    min-width: 40rem;
  }
.comparison-table thead th:first-child,
.comparison-table tbody th{
    position: sticky;
    left: 0;
    z-index: 2;
    box-shadow: 0.6rem 0 0.8rem rgb(239 236 231 / 88%);
  }
.comparison-table thead th:first-child{
    background: #000000;
  }
.comparison-table tbody th{
    background: #EFECE7;
  }
.policy-layout{
    gap: 1rem;
    width: min(100% - 1.25rem, 42rem);
    padding-top: 0;
  }
.policy-toc{
    position: sticky;
    top: var(--site-header-offset);
    z-index: 30;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    box-sizing: border-box;
    width: calc(100% + 1.25rem);
    max-width: none;
    margin: 0 0 0.75rem;
    margin-left: -0.625rem;
    padding: 0.3rem max(1.1rem, 18vw);
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--surface-line);
    background: var(--page-canvas);
    box-shadow: none;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    mask-image: linear-gradient(
      90deg,
      transparent 0,
      #000 1.15rem,
      #000 calc(100% - 1.15rem),
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0,
      #000 1.15rem,
      #000 calc(100% - 1.15rem),
      transparent 100%
    );
  }
.policy-toc::-webkit-scrollbar{
    display: none;
  }
.policy-toc strong{
    display: none;
  }
.policy-toc a{
    display: inline-flex;
    min-width: max-content;
    min-height: 2.4rem;
    align-items: center;
    padding-inline: 0.7rem;
    font-size: 0.86rem;
    font-weight: 600;
  }
.policy-toc a.is-current{
    color: var(--copper);
    box-shadow: inset 0 -2px 0 var(--copper);
  }
.policy-content :is(h2[id], h3[id]){
    scroll-margin-top: calc(var(--site-header-offset) + 4.25rem);
  }
.policy-content{
    padding: 1.2rem 1rem 1.7rem;
    border-radius: 0;
  }
.policy-content p,
.policy-content li{
    font-size: 1rem;
    line-height: 1.72;
  }
.footer-links a,
.footer-contact a{
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
  }
.footer-socials a{
    width: 2.15rem;
    height: 2.15rem;
  }
body:has(.policy-page) .floating-cta{
    opacity: 1;
    pointer-events: auto;
    transform: translateY(1rem);
  }
.site-header.is-scroll-hidden,
body[data-page] .site-header.is-scroll-hidden{
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
h1,
.official-hero h1,
.product-experience .official-hero--product h1{
    font-size: clamp(2.05rem, 8.6vw, 2.5rem);
    line-height: 1.03;
  }
h2,
.why__heading h2,
.product-showcase .section__intro--center h2{
    font-size: clamp(1.8rem, 7.4vw, 2.25rem);
    line-height: 1.08;
  }
.why{
    min-height: 0;
    padding: 3.25rem 1.25rem 2.75rem;
    text-align: left;
  }
.why::before{
    inset: 18% -18% 3%;
  }
.why::after{
    inset: 43% 8% 8%;
  }
.why__heading{
    margin-bottom: 1.4rem;
    text-align: left;
  }
.why__heading h2{
    margin-left: 0;
  }
.why-proof-grid{
    gap: 0;
  }
.why-card,
.why-card--one,
.why-card--two,
.why-card--three,
.why-card--four{
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr);
    column-gap: 0.9rem;
    min-height: 0;
    padding: 1.35rem 0;
    border-top: 0;
  }
.why-card::before{
    display: none;
  }
.why-card img{
    grid-row: span 4;
    width: 2.65rem;
    margin: 0;
  }
.why-card span{
    margin-bottom: 0.3rem;
    font-size: 0.76rem;
  }
.why-card h3{
    max-width: 14ch;
    margin: 0 0 0.45rem;
    font-size: 1.48rem;
    line-height: 1.08;
  }
.why-card p{
    max-width: 29ch;
    font-size: 0.94rem;
    line-height: 1.55;
  }
.why-card__cta{
    margin-top: 0.7rem;
    font-size: 0.88rem;
  }
.product-showcase{
    padding-inline: 1rem;
  }
.product-showcase .section__intro--center{
    margin-bottom: 1.5rem;
  }
.product-carousel .product-card h3{
    margin-top: 0.8rem;
    font-size: 1.5rem;
    line-height: 1.08;
    white-space: nowrap;
    text-wrap: nowrap;
  }
.footer-brand img{
    width: 6rem;
    grid-row: auto;
    margin: 0;
    margin-top: 0.15rem;
  }
.footer-links,
.footer-community{
    gap: 0.45rem;
  }
.mobile-nav-close{
    min-height: 2.45rem;
    padding-inline: 0.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--ink);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
  }
.site-header .mobile-nav{
    padding: 1rem 0 0;
    gap: 0;
  }
.mobile-nav__link{
    font-size: clamp(1.28rem, 6.4vw, 1.6rem);
  }
.footer-contact{
    gap: 0.25rem;
  }
.footer-contact a,
.footer-links a{
    min-height: 2.25rem;
    font-size: 0.9rem;
  }
.footer-links{
    gap: 0.45rem;
    display: grid;
    align-content: start;
    grid-template-columns: 6rem minmax(0, 1fr);
    column-gap: 0.9rem;
    row-gap: 0.35rem;
    padding: 0.05rem 0;
  }
.footer-links h2,
.footer-community h2{
    margin-top: 0.45rem;
    font-size: 0.72rem;
  }
.footer-community{
    gap: 0.65rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--surface-line);
    grid-column: 1 / -1;
  }
.footer-socials{
    gap: 0.15rem;
  }
.footer-contact a,
.footer-contact p{
    font-size: 0.84rem;
    line-height: 1.48;
  }
.footer-links h2{
    margin: 0;
    grid-column: 1;
    grid-row: 1;
    padding-top: 0.32rem;
  }
.footer-links a{
    min-height: 1.8rem;
    padding: 0;
    font-size: 0.86rem;
    line-height: 1.35;
    grid-column: 2;
    width: fit-content;
  }
.footer-note{
    max-width: 39ch;
    margin-top: 0.15rem;
    font-size: 0.77rem;
    line-height: 1.5;
  }
.site-footer__bar{
    min-height: 3.25rem;
    border-top: 1px solid rgb(24 21 18 / 10%);
    background: var(--footer-bar-surface);
    color: var(--footer-bar-ink);
    font-size: 0.72rem;
    padding-bottom: max(0.7rem, env(safe-area-inset-bottom));
  }
.floating-cta.is-near-footer{
    bottom: max(5.5rem, calc(env(safe-area-inset-bottom) + 4.75rem));
  }
.product-experience .product-closing-cta--framed .product-closing-cta__title-line,
.product-closing-cta--showroom .product-closing-cta__title-line{
    white-space: nowrap;
  }
.mobile-nav-toggle::after{
    flex: 0 0 auto;
    width: 1.1rem;
    height: 0.72rem;
    border-top: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat;
    content: "";
  }
.mobile-nav__eyebrow{
    color: var(--copper);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
.mobile-nav-close span{
    color: var(--copper);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1;
  }
.mobile-nav__link,
.mobile-nav__group-trigger{
    min-height: 3.25rem;
    color: var(--ink);
    font-size: clamp(1.16rem, 5.3vw, 1.38rem);
    font-weight: 500;
    line-height: 1.15;
  }
.mobile-nav__link[aria-current="page"],
.mobile-nav__subnav-link[aria-current="page"]{
    color: var(--copper);
  }
.mobile-nav__subnav-link{
    display: flex;
    min-height: 2.5rem;
    align-items: center;
    color: var(--ink-soft);
    font-family: var(--font-glacial);
    font-size: 0.92rem;
    font-weight: 400;
    line-height: 1.35;
    text-decoration: none;
  }
.mobile-nav-toggle:focus-visible,
.mobile-nav-close:focus-visible,
.mobile-nav__group-trigger:focus-visible,
.mobile-nav__subnav-link:focus-visible{
    outline: 2px solid var(--copper);
    outline-offset: 3px;
  }
.section__intro--center,
.section-heading--centered{
    text-align: center;
  }
.section__intro--center :is(.eyebrow, h2, p),
.section-heading--centered{
    margin-inline: auto;
  }
.section__intro--center h2,
h2.section-heading--centered{
    max-width: min(100%, 17ch);
    font-size: clamp(1.85rem, 8.3vw, 2.35rem);
    line-height: 1.06;
    text-wrap: balance;
  }
.hub-selector--cocoon .family-selector__intro h2{
    max-width: min(100%, 22ch);
    font-size: clamp(1.85rem, 7.2vw, 2.4rem);
  }
.hub-selector--cocoon .family-selector__intro p{
    font-size: clamp(0.74rem, 3.15vw, 0.95rem);
  }
.section__intro--center p{
    max-width: 34ch;
    font-size: 0.98rem;
    line-height: 1.55;
    text-wrap: pretty;
  }
.floating-cta,
body:has(> main.product-experience--standard-ending) .floating-cta{
    right: max(0.9rem, env(safe-area-inset-right));
    bottom: max(0.9rem, env(safe-area-inset-bottom));
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 1rem;
    background: #25D366;
    box-shadow: 0 0.55rem 1.2rem rgb(24 21 18 / 22%);
  }
.floating-cta img{
    width: 2rem;
    height: 2rem;
  }
.floating-cta.is-content-overlap,
body:has(> main.product-experience--standard-ending) .floating-cta.is-content-overlap{
    opacity: 0;
    pointer-events: none;
    transform: translateX(calc(100% + 1.5rem));
  }
.footer-community h2{
    margin: 0;
  }
.hub-experience .official-hero--product{
    min-height: min(34rem, 78svh);
    max-height: none;
    height: auto;
    place-items: center;
  }
.hub-experience .official-hero__media--family-split,
.hub-experience .official-hero__media--product-split{
    display: block !important;
    grid-template-columns: 1fr !important;
    background: #181512;
  }
.hub-experience .official-hero[data-official-hero] .official-hero__panel{
    display: none !important;
    width: 100%;
    height: 100%;
    background-image: none !important;
  }
.product-experience--cocoon .official-hero[data-official-hero] .official-hero__panel--hard-shell{
    display: block !important;
    --hero-image-position: 54% center;
  }
.product-experience--oxygen-products .official-hero[data-official-hero] .official-hero__panel--poc{
    display: block !important;
    --hero-image-position: center;
  }
.hub-experience .official-hero[data-official-hero] .official-hero__panel::after{
    background: none !important;
  }
.hub-experience .official-hero--product .official-hero__inner{
    right: auto;
    bottom: auto;
    left: auto;
    width: min(100% - 2rem, 31rem);
    max-width: 31rem;
    padding: 6.5rem 0 3.25rem;
    border: 0;
    background: transparent;
    position: relative;
    margin-inline: auto;
  }
.hub-experience .official-hero--product h1{
    max-width: 12ch;
    font-size: clamp(2.4rem, 10.5vw, 3.2rem);
    line-height: 0.98;
  }
.product-experience.hub-experience .official-hero--cocoon h1,
.hub-experience .official-hero--cocoon h1{
    max-width: 12ch;
    font-size: clamp(2.1rem, 8.4vw, 2.8rem);
  }
.hub-experience .official-hero--product p{
    max-width: 32ch;
    font-size: 0.98rem;
    line-height: 1.52;
  }
.hub-experience .official-hero--product .button{
    min-height: 2.8rem;
    padding-inline: 1rem;
    font-size: 0.86rem;
  }
.product-experience--standard-ending .cocoon-system--supported{
    padding-block: var(--product-section-space);
  }
.product-experience--standard-ending .cocoon-system--supported > header{
    max-width: 34rem;
    margin-inline: auto;
  }
.product-experience--standard-ending .cocoon-system--supported > header h2{
    max-width: 14ch;
    font-size: clamp(2rem, 9vw, 2.6rem);
  }
.product-experience--standard-ending .cocoon-system--supported > header p{
    max-width: 36ch;
  }
.product-experience--standard-ending .cocoon-system__grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 1.75rem;
  }
.product-experience--standard-ending .cocoon-system__grid article{
    display: grid;
    grid-template-columns: 2.7rem minmax(0, 1fr);
    column-gap: 0.9rem;
    align-items: start;
    min-height: 0;
    padding: 1.1rem 0;
    border: 0;
  }
.product-experience--standard-ending .cocoon-system__icon{
    grid-row: span 2;
    width: 2.7rem;
    height: 2.7rem;
    margin: 0;
    object-fit: contain;
  }
.product-experience--standard-ending .cocoon-system__grid h3{
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.15;
  }
.product-experience--standard-ending .cocoon-system__grid p{
    display: -webkit-box;
    margin: 0.38rem 0 0;
    overflow: hidden;
    font-size: 0.89rem;
    line-height: 1.48;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
.product-experience--standard-ending .cocoon-system__grid > article:nth-child(n + 5){
    display: none;
  }
.product-experience--standard-ending .cocoon-system--supported.is-expanded .cocoon-system__grid > article:nth-child(n + 5){
    display: grid;
  }
.cocoon-system__toggle{
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 2.75rem;
    margin-top: 1rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid rgb(191 124 53 / 48%);
    background: transparent;
    color: #8f623d;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 600;
  }
.cocoon-system__toggle:focus-visible{
    outline: 2px solid #bf7c35;
    outline-offset: 3px;
  }
.official-hero .label,
.official-hero h1,
.official-hero p{
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }
.learning-library__results .hub-entry-row.is-search-selected{
    outline-offset: 0.3rem;
  }
.official-hero h1,
.product-experience .official-hero--product h1,
.policy-hero h1{
    max-width: min(20ch, 100%);
  }
.policy-hero h1{
    max-width: min(18ch, 100%);
  }
@supports (clip-path: inset(0)) {.official-hero[data-official-hero]{
      overflow: clip;
      -webkit-clip-path: inset(0);
      clip-path: inset(0);
    }
.official-hero[data-official-hero] > .official-hero__media:not(
        .official-hero__media--comparison
      ){
      position: fixed;
      inset: 4.5rem 0 auto;
      height: min(34rem, 78svh);
    }}}
.official-hero[data-official-hero] .official-hero__media--family-split,
.official-hero[data-official-hero] .official-hero__media--product-split,
.official-hero[data-official-hero] .official-hero__media--comparison{
  display: grid;
  background: none !important;
}
.official-hero[data-official-hero] .official-hero__media--family-split,
.official-hero[data-official-hero] .official-hero__media--comparison{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.official-hero[data-official-hero] .official-hero__media--product-split{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.official-hero[data-official-hero] .official-hero__panel{
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  background: none !important;
}
.official-hero__media--family-split::after,
.official-hero__media--product-split::after{
  display: none;
}
.official-hero__panel--hard-shell::after{
  background: linear-gradient(90deg, rgb(0 0 0 / 44%), rgb(0 0 0 / 66%));
}
.official-hero__panel--soft-shell::after{
  background: linear-gradient(90deg, rgb(0 0 0 / 66%), rgb(0 0 0 / 44%));
}
.official-hero__panel--boost::after{
  background: rgb(0 0 0 / 56%);
}
.official-hero__panel--poc::after,
.official-hero__panel--ewot::after{
  background: rgb(0 0 0 / 52%);
}
.official-hero__panel--boost{
  --hero-image-position: 68% center;
}
.official-hero__panel--poc{
  --hero-image-position: center center;
}
.official-hero__panel--ewot{
  --hero-image-position: center 28%;
}
.official-hero__media--comparison::after{
  display: block;
  background:
    linear-gradient(90deg, rgb(17 14 11 / 72%) 0%, rgb(17 14 11 / 56%) 46%, rgb(17 14 11 / 27%) 100%),
    linear-gradient(180deg, rgb(17 14 11 / 10%) 0%, rgb(17 14 11 / 28%) 100%) !important;
}
.official-hero[data-official-hero].is-visual-unavailable{
  display: none;
}
@media (prefers-reduced-motion: reduce) {.official-hero__image--full{
    transition: none;
  }}