:root {
  --ink: #241b20;
  --muted: #6f6267;
  --paper: #fffaf7;
  --shell: #f6ebe5;
  --shell-2: #edddd6;
  --rose: #ba315d;
  --rose-dark: #922341;
  --rose-soft: #f3d8df;
  --line: rgba(67, 42, 49, .14);
  --white: #fff;
  --success: #216b4b;
  --danger: #aa203d;
  --shadow: 0 18px 50px rgba(80, 43, 54, .12);
  --shadow-small: 0 8px 22px rgba(80, 43, 54, .1);
  --radius-s: .75rem;
  --radius-m: 1.25rem;
  --radius-l: 2rem;
  --radius-xl: 3rem;
  --radius-primary: 1.5rem;
  --carousel-card-indicator-gap: 1rem;
  --max: 75rem;
  --space: clamp(3.25rem, 6vw, 6rem);
  font-family: "Aptos", "Segoe UI Variable", "Segoe UI", ui-sans-serif, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 20rem; background: var(--paper); color: var(--ink); line-height: 1.5; }
body.sticky-visible { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; }
button, a, input, label { touch-action: manipulation; }
button, a { -webkit-tap-highlight-color: rgba(186,49,93,.16); }
:focus-visible { outline: 3px solid #6e2d8f; outline-offset: 3px; }

.skip-link { position: fixed; z-index: 100; top: .75rem; left: .75rem; transform: translateY(-180%); background: var(--ink); color: white; padding: .75rem 1rem; border-radius: .5rem; }
.skip-link:focus { transform: none; }
.shell { width: min(calc(100% - 2rem), var(--max)); margin-inline: auto; }
.section { padding-block: var(--space); }
.eyebrow { margin: 0 0 .55rem; color: var(--rose-dark); font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.03; letter-spacing: -.035em; text-wrap: balance; scroll-margin-top: 1rem; }
p, li, label, small { overflow-wrap: anywhere; }
h1 { max-width: 18ch; margin-bottom: 1.05rem; font-size: clamp(2.15rem, 8.4vw, 5rem); line-height: .98; }
h2 { margin-bottom: .7rem; font-size: clamp(1.8rem, 5.5vw, 3.6rem); }
h3 { margin-bottom: .5rem; font-size: 1.15rem; }
.section-heading { margin-bottom: 1.45rem; }
.section-heading > p:last-child { max-width: 38rem; margin-bottom: 0; color: var(--muted); font-size: 1.02rem; }

.hero { --hero-beauty: image-set(url('../assets/images/optimized/hero/beauty-hero-1920.avif') type('image/avif'), url('../assets/images/optimized/hero/beauty-hero-1920.webp') type('image/webp'), url('../assets/images/beauty-hero.jpg') type('image/jpeg')); position: relative; overflow: clip; background: #f5e4dc; font-family: "Manrope", "Segoe UI", sans-serif; }
.hero__beauty { position: absolute; inset: 0; background: var(--hero-beauty) 64% center / cover no-repeat; }
.hero__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,250,247,.99) 0%, rgba(255,250,247,.95) 48%, rgba(255,250,247,.42) 69%, rgba(255,250,247,.06) 100%), linear-gradient(0deg, rgba(77,35,48,.2), transparent 38%); }
.hero__content { position: relative; display: grid; align-items: center; padding-block: 2.6rem 2rem; }
.hero__copy { position: relative; z-index: 2; width: min(100%, 39rem); }
.hero h1 { max-width: 22ch; margin-bottom: 1rem; font-family: "Raleway", "Segoe UI", sans-serif; font-size: clamp(2.15rem, 5.25vw, 4.2rem); font-weight: 600; line-height: 1.02; letter-spacing: -.025em; }
.hero h1 span { display: block; }
.hero-title__accent { color: var(--rose); }
.positioning { margin-bottom: .7rem; color: #594a50; font-size: .95rem; font-weight: 600; }
.hero-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; width: min(100%, 34rem); margin: .85rem 0 1rem; padding: 0; list-style: none; }
.hero-facts li { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: .45rem; }
.fact-mark { display: grid; place-items: center; width: 2.65rem; height: 2.65rem; border: 1px solid rgba(146,35,65,.35); border-radius: 50%; color: var(--rose-dark); background: rgba(255,250,247,.66); }
.fact-mark svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.fact-mark .hair-silhouette { width: 1.7rem; height: 1.7rem; fill: currentColor; stroke: none; }
.fact-copy { display: grid; gap: .12rem; }
.hero-facts strong { font-size: .79rem; font-weight: 700; line-height: 1.12; }
.hero-facts small { color: #615258; font-size: .67rem; line-height: 1.15; }
.price-block { display: flex; flex-direction: column; margin-bottom: .75rem; }
.price-block del { color: var(--muted); font-size: .95rem; opacity: .72; }
.price-block strong { color: var(--rose); font-size: clamp(2.5rem, 8vw, 4.2rem); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -.04em; }
.price-block strong span { font-size: .48em; letter-spacing: -.02em; }
.button { min-height: 3.25rem; border: 0; border-radius: var(--radius-primary); display: inline-flex; align-items: center; justify-content: center; gap: .75rem; padding: .8rem 1.3rem; font-weight: 800; text-decoration: none; cursor: pointer; }
.button--primary { width: 100%; color: white; background: var(--rose); box-shadow: 0 12px 30px rgba(186,49,93,.24); }
.button--primary:hover { background: var(--rose-dark); }
.button span { transition: transform .2s ease; }
.button:hover span { transform: translateX(.2rem); }
.hero-cta { font-weight: 600; }
.hero-cta-note { max-width: 23rem; margin: .5rem 0 0; color: #584950; font-size: .76rem; line-height: 1.35; text-align: center; }
.trust-inline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; margin: .8rem 0 0; padding: 0; color: #514047; font-size: .76rem; list-style: none; }
.trust-inline li { display: flex; min-width: 0; align-items: center; gap: .5rem; }
.trust-inline svg { flex: 0 0 auto; width: 1.6rem; fill: none; stroke: var(--rose-dark); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.trust-inline span, .trust-inline strong, .trust-inline small { display: block; }
.trust-inline strong { line-height: 1.18; }
.trust-inline small { margin-top: .1rem; color: var(--muted); font-weight: 500; }
.hero__product-media { position: relative; z-index: 1; width: min(100%, 21rem); margin: 1rem auto; overflow: hidden; border-radius: var(--radius-primary); background: #e8e5df; }
.hero__product-media picture { display: block; width: 100%; height: 100%; }
.hero__product-media img { display: block; width: 100%; height: auto; object-fit: contain; }
.package-image figcaption { position: absolute; right: .6rem; bottom: .6rem; padding: .25rem .5rem; border-radius: 999px; color: #fff; background: rgba(36,27,32,.78); font-size: .62rem; }

.color-section { background: radial-gradient(circle at 90% 15%, #f6dce1 0 11rem, transparent 11.2rem), var(--shell); }
.color-stage { --carousel-inset: 1rem; overflow: hidden; border-radius: var(--radius-primary); background: rgba(255,255,255,.7); box-shadow: var(--shadow); }
.color-stage__image { position: relative; min-height: 20rem; overflow: hidden; background: linear-gradient(145deg, #fffdfb, #eee4df); }
.color-stage__image > picture { display: block; width: 100%; height: 20rem; }
.color-stage__image > picture > img { width: 100%; height: 100%; padding: 1.15rem; object-fit: contain; object-position: center; filter: drop-shadow(0 4px 6px rgba(48, 39, 42, .25)); }

.reveal-enabled .reveal-item {
  opacity: 0;
  transform: translateY(1.5rem);
  transition:
    opacity .52s cubic-bezier(.22, 1, .36, 1),
    transform .52s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--reveal-order, 0) * 90ms);
}

.reveal-enabled .reveal-item.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-enabled .offer .reveal-item {
  transform: translateY(2.5rem);
  transition-duration: .68s;
}

.reveal-enabled .offer .reveal-item.is-revealed {
  transform: translateY(0);
}
.color-stage__gift { position: absolute; z-index: 1; top: 10%; right: 2.5%; width: 28%; margin: 0; text-align: center; pointer-events: none; }
.color-stage__gift picture { display: block; width: 100%; }
.color-stage__gift picture > img { display: block; width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 4px 7px rgba(48,39,42,.18)); }
.color-stage__gift figcaption { display: grid; gap: .12rem; margin-top: .25rem; line-height: 1.15; }
.color-stage__gift figcaption span { color: var(--rose-dark); font-size: .62rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.color-stage__gift figcaption strong { color: var(--ink); font-size: .72rem; font-weight: 750; }
.color-stage__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1rem 1rem .35rem; }
.color-stage__meta span { color: var(--muted); font-size: .8rem; }
.color-options { --carousel-gap: .65rem; display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: var(--carousel-gap); overflow-x: auto; overflow-y: hidden; padding: .65rem var(--carousel-inset) .75rem; scroll-padding-inline: var(--carousel-inset); scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
.color-options::-webkit-scrollbar { display: none; }
.color-option { flex: 0 0 6.7rem; min-height: 7.4rem; border: 1px solid #8a757d; border-radius: 1rem; display: grid; grid-template-rows: 4.7rem auto; place-items: center; gap: .3rem; padding: .35rem .4rem .55rem; background: white; color: var(--ink); cursor: pointer; scroll-snap-align: start; }
.color-option[aria-selected="true"] { border: 2px solid var(--rose); box-shadow: 0 0 0 3px rgba(186,49,93,.12); }
.color-option:hover { border-color: var(--rose); }
.color-option img { width: 100%; height: 4.7rem; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(48, 39, 42, .25)); }
.color-option span { font-size: .72rem; font-weight: 750; line-height: 1.08; text-align: center; }
.color-promo { width: fit-content; margin: 1rem auto 0; padding: .55rem 1rem; border: 1px solid rgba(186,49,93,.16); border-radius: 999px; color: var(--rose-dark); background: var(--rose-soft); font-size: .82rem; font-weight: 800; line-height: 1.25; text-align: center; }

.benefits { background: var(--paper); }
.benefit-grid { display: grid; gap: .75rem; }
.benefit-card { display: grid; grid-template-columns: minmax(0, 1fr); padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius-primary); background: #fff; }
.benefit-card p { margin-bottom: 0; color: var(--muted); }
.spec-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 1.25rem 0 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-primary); background: var(--line); }
.spec-strip div { padding: .8rem; background: var(--shell); }
.spec-strip dt { color: var(--muted); font-size: .72rem; }
.spec-strip dd { margin: .15rem 0 0; font-weight: 850; }

.attachments { overflow-x: clip; color: var(--ink); background: linear-gradient(180deg, #fffaf7 0%, #f8ece7 100%); }
.attachments .eyebrow { color: var(--rose-dark); }
.attachments-heading__aside { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.attachments-heading__aside > p { margin: 0; color: var(--muted); }
.attachment-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15.5rem, 79vw); align-items: start; gap: .85rem; overflow-x: auto; margin-inline: -1.5rem; padding: .25rem 1.5rem var(--carousel-card-indicator-gap); scroll-padding-inline: 1.5rem; scroll-snap-type: x mandatory; scrollbar-width: none; }
.attachment-grid::-webkit-scrollbar, .review-rail::-webkit-scrollbar { display: none; }
.attachment-card { min-width: 0; padding: .65rem .65rem .8rem; border: 1px solid rgba(102,68,78,.12); border-radius: var(--radius-primary); background: rgba(255,255,255,.86); box-shadow: 0 8px 24px rgba(106,63,77,.08); scroll-snap-align: start; }
.attachment-card:hover { transform: none; }
.attachment-card__media { height: 13.5rem; margin-bottom: .65rem; overflow: hidden; border-radius: calc(var(--radius-m) - .35rem); background: linear-gradient(145deg, #f8f3f0, #eee5e1); }
.attachment-card__media picture { display: block; width: 100%; height: 100%; }
.attachment-card__media img { width: 100%; height: 100%; padding: .45rem; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(48, 39, 42, .25)); }
.attachment-card h3 { margin-bottom: .3rem; }
.attachment-card > p:last-child { margin-bottom: 0; color: var(--muted); font-size: .88rem; }

.reviews { overflow-x: clip; background: var(--shell); }
.carousel-controls { display: flex; gap: .5rem; }
.carousel-controls button { width: 2.8rem; height: 2.8rem; border: 1px solid #8a757d; border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer; }
.carousel-controls button:not(:disabled):hover { color: #fff; background: var(--rose-dark); }
.carousel-controls button:disabled { opacity: .38; color: var(--muted); cursor: not-allowed; }
.reviews .carousel-controls { width: fit-content; margin-left: auto; }
.review-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(16rem, 84vw); gap: 1rem; overflow-x: auto; margin-inline: -1.5rem; padding: .25rem 1.5rem var(--carousel-card-indicator-gap); scroll-padding-inline: 1.5rem; scroll-snap-type: x mandatory; scrollbar-width: none; }
.review-card { min-height: 14.5rem; display: flex; flex-direction: column; padding: 1.2rem; border: 1px solid rgba(102,68,78,.09); border-radius: var(--radius-primary); background: rgba(255,255,255,.9); box-shadow: 0 8px 24px rgba(80,43,54,.07); scroll-snap-align: start; }
.review-card:hover { transform: none; }
.review-card picture, .review-card img { display: block; width: 100%; height: auto; }
.review-card img { object-fit: contain; }
.carousel-progress { position: relative; height: 1.25rem; margin: 0 .1rem; cursor: grab; touch-action: none; user-select: none; }
.carousel-progress::before { content: ''; position: absolute; top: 50%; right: 0; left: 0; height: .25rem; border-radius: 999px; background: rgba(111,98,103,.2); transform: translateY(-50%); }
.carousel-progress span { position: absolute; top: 50%; left: 0; width: 25%; height: .4rem; border-radius: 999px; background: var(--rose); transform: translateY(-50%); transition: left .08s linear, width .08s linear; }
.carousel-progress.is-dragging { cursor: grabbing; }
.carousel-progress.is-dragging span { transition: none; }
.carousel-dragging { scroll-snap-type: none !important; }
.carousel-progress--colors { margin: 0 var(--carousel-inset, 1rem) 1rem; }
#attachments-progress, #reviews-progress { margin-top: 0; }
.trust-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.trust-row li { min-width: 0; padding: .9rem .5rem; border-top: 1px solid var(--line); text-align: center; }
.trust-row strong, .trust-row span { display: block; }
.trust-row strong { color: var(--rose); font-size: 1.4rem; }
.trust-row span { color: var(--muted); font-size: .72rem; }

.offer { background: #f8f0ec; }
.offer-grid { display: grid; gap: 2rem; }
.offer-heading { margin-bottom: 0; }
.package-image { position: relative; margin: 0 0 1rem; overflow: hidden; border-radius: var(--radius-primary); box-shadow: var(--shadow-small); }
.package-image picture, .package-image img { display: block; width: 100%; height: auto; }
.package-image img { object-fit: contain; }
.package-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem; padding: 0; list-style: none; }
.package-list li { position: relative; padding-left: 1.5rem; font-size: .9rem; }
.package-list li::before { content: '✓'; position: absolute; left: 0; color: var(--rose); font-weight: 900; }
.order-form { align-self: start; padding: 1.25rem; border: 1px solid rgba(255,255,255,.8); border-radius: var(--radius-primary); background: rgba(255,255,255,.86); box-shadow: var(--shadow); scroll-margin-top: 1rem; }
.order-form__header { margin-bottom: 1.2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.order-form__header p { margin: 0 0 .45rem; font-weight: 800; }
.order-form__prices { display: flex; align-items: baseline; justify-content: center; gap: 1.5rem; }
.order-form__header del { color: var(--muted); font-size: 1.25rem; font-weight: 400; line-height: 1; }
.order-form__header strong { color: var(--rose); font-size: 2.4rem; line-height: 1; }
.order-form__header strong span { font-size: .55em; }
.form-field { margin-bottom: 1rem; }
.form-field label, .contact-fieldset legend { display: block; margin-bottom: .4rem; font-size: .85rem; font-weight: 800; }
.form-field__optional { color: var(--muted); font-size: .82em; font-weight: 500; }
.form-field input { width: 100%; min-height: 3.15rem; border: 1px solid #817478; border-radius: var(--radius-primary); padding: .75rem .9rem; background: white; color: var(--ink); }
.form-field input[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(170,32,61,.12); }
.form-field small { display: block; margin-top: .35rem; color: var(--muted); font-size: .72rem; }
.field-error { margin: .35rem 0 0; color: var(--danger); font-size: .78rem; font-weight: 750; }
.contact-fieldset { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; padding: 0; border: 0; }
.contact-fieldset legend { width: 100%; }
.contact-fieldset label { flex: 1 1 auto; min-height: 2.9rem; display: flex; align-items: center; gap: .4rem; padding: .6rem .75rem; border: 1px solid var(--line); border-radius: var(--radius-primary); background: #fff; cursor: pointer; }
.contact-fieldset label:hover { border-color: var(--rose); }
.contact-fieldset input { width: 1.1rem; height: 1.1rem; accent-color: var(--rose); }
.contact-fieldset[aria-invalid="true"] label { border-color: var(--danger); }
.contact-fieldset__error { flex-basis: 100%; margin-top: 0; }
.form-status { margin: 1rem 0 0; padding: 1rem; border: 1px solid rgba(33,107,75,.3); border-radius: .8rem; color: var(--success); background: #edf8f2; }
.form-status--error { border-color: rgba(170,32,61,.28); color: var(--danger); background: #fff0f3; }
.delivery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.2rem; }
.delivery-grid p { margin: 0; }
.delivery-grid strong, .delivery-grid span { display: block; }
.delivery-grid strong { font-size: .78rem; }
.delivery-grid span { color: var(--muted); font-size: .72rem; }

.footer { padding: 3rem 0 7rem; color: #d8cbd0; background: var(--ink); }
.footer:empty { min-height: 2.5rem; padding: 0; }
.footer-grid { display: grid; gap: 2rem; }
.footer p { margin-bottom: .45rem; font-size: .82rem; }
.footer-brand { color: white; font-size: 1.1rem !important; font-weight: 900; letter-spacing: -.02em; }
.footer nav { display: grid; gap: .55rem; }
.footer nav a { width: fit-content; color: white; font-size: .82rem; text-underline-offset: .2rem; }
.footer nav a:hover { color: #f29bb6; }

.sticky-order { position: fixed; z-index: 50; right: .5rem; bottom: calc(.5rem + env(safe-area-inset-bottom)); left: .5rem; min-height: 4.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem .7rem .65rem 1rem; border: 1px solid rgba(255,255,255,.35); border-radius: var(--radius-primary); color: white; background: rgba(146,35,65,.98); box-shadow: 0 15px 40px rgba(50,20,29,.3); }
.sticky-order[hidden] { display: none; }
.sticky-order div { display: flex; flex-direction: column; white-space: nowrap; }
.sticky-order strong { line-height: 1; }
.sticky-order del { opacity: .72; font-size: .75rem; }
.sticky-order .button { min-height: 3rem; padding-inline: 1rem; color: var(--rose-dark); background: white; }

@media (max-width: 39.999rem) {
  .hero { --hero-beauty: image-set(url('../assets/images/optimized/hero/beauty-hero-1280.avif') type('image/avif'), url('../assets/images/optimized/hero/beauty-hero-1280.webp') type('image/webp'), url('../assets/images/beauty-hero.jpg') type('image/jpeg')); }
  .hero__beauty { background-position: 72% top; }
  .hero__veil { background: linear-gradient(180deg, rgba(255,250,247,.9) 0%, rgba(255,250,247,.88) 39%, rgba(255,250,247,.72) 61%, rgba(255,250,247,.92) 100%); }
  .hero__content { width: calc(100% - 2rem); align-items: start; padding-block: 1rem .75rem; }
  .hero__copy { width: 100%; text-align: center; }
  .hero .eyebrow { width: fit-content; margin: 0 auto .5rem; padding: .3rem .85rem; border-radius: 999px; background: rgba(243,216,223,.82); color: var(--rose); font-size: .7rem; letter-spacing: .13em; }
  .hero h1 { max-width: 24rem; margin: 0 auto .5rem; font-size: clamp(1.8rem, 7.8vw, 2.05rem); font-weight: 600; line-height: 1.04; letter-spacing: -.03em; }
  .positioning { margin: 0 auto .5rem; color: #63575c; font-size: .88rem; font-weight: 500; }
  .hero-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; width: 100%; margin: 0; }
  .hero-facts li { width: 100%; align-items: center; gap: .5rem; text-align: center; }
  .fact-mark { width: 3rem; height: 3rem; border: 1px solid rgba(255,255,255,.84); color: var(--rose); background: rgba(250,218,228,.82); }
  .fact-mark svg { width: 1.55rem; height: 1.55rem; stroke-width: 1.8; }
  .hero-facts strong { font-size: clamp(.63rem, 2.8vw, .75rem); font-weight: 700; line-height: 1.08; }
  .hero__product-media { width: 100%; aspect-ratio: 1 / 1; margin: .75rem auto .5rem; border: 0; border-radius: var(--radius-primary); background: transparent; }
  .hero__product-media img { position: static; width: 100%; height: 100%; transform: none; object-fit: contain; }
  .price-block { width: 100%; flex-direction: row; align-items: baseline; justify-content: center; gap: 1.5rem; margin: 0 0 .5rem; text-align: left; }
  .price-block del { font-size: 1.5rem; font-weight: 400; line-height: 1; }
  .price-block strong { font-size: clamp(2.55rem, 13vw, 3.35rem); }
  .hero-cta { width: 100%; max-width: none; min-height: 3.45rem; font-size: 1.05rem; }
  .hero-cta-note { display: none; }
  .trust-inline { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; width: 100%; margin-top: .75rem; }
  .trust-inline li { position: relative; width: 100%; flex-direction: column; justify-content: flex-start; gap: .5rem; padding-inline: .5rem; text-align: center; }
  .trust-inline li + li::before { content: ''; position: absolute; top: .3rem; bottom: .3rem; left: 0; width: 1px; background: rgba(90,64,73,.18); }
  .trust-inline svg { width: 2.45rem; height: 2.45rem; padding: .55rem; border-radius: 50%; background: rgba(250,218,228,.82); }
  .trust-inline span { width: 100%; }
  .trust-inline strong { font-size: .7rem; line-height: 1.2; }
  .trust-inline small { margin-top: .25rem; font-size: .65rem; line-height: 1.2; }
  .color-stage { --carousel-inset: .75rem; }
  .color-option { flex-basis: 4.65rem; width: 4.65rem; min-height: 6rem; grid-template-rows: 3.5rem auto; padding: .3rem .25rem .45rem; }
  .color-option img { height: 3.5rem; }
  .color-option span { font-size: .62rem; }
}

@media (min-width: 23.751rem) and (max-width: 39.999rem) {
  .color-option { flex-basis: calc((100% - (3 * var(--carousel-gap))) / 4); width: auto; }
}

@media (max-width: 23.75rem) {
  .hero h1 { font-size: 1.8rem; }
  .hero-facts { gap: .25rem; }
  .fact-mark { width: 2.7rem; height: 2.7rem; }
  .hero-facts strong { font-size: .62rem; }
  .trust-inline { gap: .25rem; }
  .trust-inline li { padding-inline: .25rem; }
  .trust-inline strong { font-size: .64rem; }
  .trust-inline small { font-size: .61rem; }
}

@media (min-width: 40rem) {
  .shell { width: min(calc(100% - 3rem), var(--max)); }
  .hero__beauty {
    background: linear-gradient(90deg, #ead8cf 0%, #f2e2da 42%, #ead5ca 100%);
    transform: none;
  }
  .hero__beauty::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--hero-beauty) 88% center / cover no-repeat;
    transform: translateX(18%) scaleX(-1);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 72%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 72%, transparent 100%);
    pointer-events: none;
  }
  .hero__content { align-items: center; padding-block: 4rem 3rem; }
  .hero__copy { grid-column: 1; width: min(100%, 42rem); }
  .price-block { width: 20rem; flex-direction: row; align-items: baseline; justify-content: center; gap: 1.75rem; }
  .price-block del { font-size: 1.125rem; }
  .price-block strong { font-size: clamp(2.75rem, 6vw, 3.25rem); }
  .hero-cta { width: fit-content; min-width: 20rem; }
  .hero__product-media { width: min(72vw, 28rem); margin-block: 1rem 1.25rem; }
  .hero__product-media img { position: static; width: 100%; height: auto; transform: none; }
  .color-layout { display: grid; grid-template-columns: .75fr 1.25fr; align-items: center; column-gap: 3rem; row-gap: 1.25rem; }
  .color-promo { grid-column: 2; margin-block: 0; }
  .color-layout > .trust-row { grid-column: 1 / -1; }
  .section-heading--row { display: flex; justify-content: space-between; align-items: end; gap: 2rem; }
  .benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .benefit-card,
  .benefit-card--lead { grid-column: auto; grid-template-columns: minmax(0, 1fr); }
  .spec-strip { grid-template-columns: repeat(4, 1fr); gap: 0; background: transparent; }
  .spec-strip > div + div { border-left: 1px solid var(--line); }
  .attachment-grid { grid-auto-flow: initial; grid-template-columns: repeat(6, 1fr); overflow: visible; }
  .attachment-card { grid-column: span 2; }
  .attachment-card:nth-child(4), .attachment-card:nth-child(5) { grid-column: span 3; }
  .review-rail { grid-auto-columns: minmax(17rem, 40%); }
  .footer-grid { grid-template-columns: 1.1fr .9fr 1fr; }
}

@media (min-width: 40rem) and (max-width: 51.999rem) {
  .color-layout { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .color-promo { grid-column: 1; }
  .color-layout .section-heading,
  .color-stage,
  .color-layout > .trust-row { width: min(100%, 38rem); margin-inline: auto; }
}

@media (min-width: 48rem) and (max-width: 63.999rem) {
  .hero__content { padding-block: 3.5rem; }
  .hero__copy { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, .78fr); grid-template-rows: auto auto auto auto auto auto auto; column-gap: 2rem; align-items: start; }
  .hero__copy > :not(.hero__product-media) { grid-column: 1; }
  .hero__product-media { grid-column: 2; grid-row: 1 / 9; align-self: center; justify-self: center; width: 100%; max-width: 19rem; margin: 0; }
}

@media (min-width: 60rem) {
  .offer-grid { grid-template-columns: minmax(0, 1.08fr) minmax(20rem, .92fr); align-items: start; column-gap: clamp(2rem, 4vw, 3rem); row-gap: 1rem; }
  .offer-heading { grid-column: 1 / -1; grid-row: 1; }
  .offer-product { display: contents; }
  .package-image { grid-column: 1; grid-row: 2; margin-bottom: 0; }
  .package-list { grid-column: 1; grid-row: 3; grid-template-columns: repeat(5, max-content); justify-content: center; gap: clamp(.75rem, 1.5vw, 1.35rem); }
  .package-list li { padding-left: 1.15rem; font-size: .78rem; line-height: 1.3; }
  .order-form { position: sticky; top: 1rem; grid-column: 2; grid-row: 2; display: flex; height: 100%; flex-direction: column; justify-content: center; padding: 1.75rem; }
}

@media (min-width: 64rem) {
  .hero .shell, .color-section .shell { width: min(calc(100% - 3rem), var(--max)); }
  .hero__veil { background: linear-gradient(90deg, rgba(255,250,247,.9) 0%, rgba(255,250,247,.76) 46%, rgba(255,250,247,.46) 72%, rgba(255,250,247,.16) 100%), linear-gradient(0deg, rgba(77,35,48,.16), transparent 42%); }
  .hero__content { min-height: 43.5rem; padding-block: 4rem; }
  .hero__copy { width: 100%; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(26rem, .92fr); grid-template-rows: auto auto auto auto auto auto auto; column-gap: clamp(2.5rem, 4.5vw, 4rem); align-items: start; padding-top: 0; }
  .hero__copy > :not(.hero__product-media) { grid-column: 1; }
  .hero .eyebrow { margin-bottom: .9rem; font-size: .82rem; }
  .hero h1 { max-width: none; margin-bottom: 1.1rem; font-size: clamp(3.15rem, 3.7vw, 3.5rem); line-height: 1; }
  .positioning { margin-bottom: 1rem; font-size: 1.16rem; }
  .hero-facts { width: min(100%, 38rem); justify-self: center; gap: .75rem; margin: 1.25rem 0 1.75rem; }
  .hero-facts li { align-items: center; text-align: center; }
  .fact-mark { width: 3.75rem; height: 3.75rem; }
  .fact-mark svg { width: 1.85rem; height: 1.85rem; }
  .hero-facts strong { font-size: .95rem; }
  .hero-facts small { font-size: .75rem; }
  .hero__product-media { grid-column: 2; grid-row: 1 / 9; align-self: center; justify-self: center; width: 100%; max-width: 35rem; aspect-ratio: 1 / 1; margin: 0; background: transparent; box-shadow: 0 20px 55px rgba(65,38,46,.14); }
  .hero__product-media img { width: 100%; height: 100%; object-fit: contain; }
  .price-block { width: 25rem; flex-direction: row; align-items: baseline; justify-content: center; justify-self: center; gap: 2rem; margin-bottom: .75rem; }
  .price-block del { font-size: 1.25rem; font-weight: 400; }
  .price-block strong { font-size: 3.75rem; }
  .hero-cta { width: 25rem; min-width: 0; min-height: 3.75rem; justify-self: center; font-size: 1.05rem; }
  .hero-cta-note { width: 25rem; max-width: none; justify-self: center; font-size: .8rem; }
  .trust-inline { width: min(100%, 38rem); justify-self: center; gap: 1rem; margin-top: 1.5rem; font-size: .92rem; }
  .trust-inline li { justify-content: center; gap: .6rem; }
  .trust-inline svg { width: 2.35rem; height: 2.35rem; }
  .trust-inline strong { font-size: .92rem; }
  .trust-inline small { font-size: .78rem; }

  .color-section { padding-block: 4.5rem; }
  .color-layout { --color-preview-height: clamp(26rem, 38vw, 34rem); grid-template-columns: minmax(22rem, .56fr) minmax(0, 1fr); align-items: stretch; column-gap: clamp(2rem, 3vw, 2.5rem); row-gap: 1.25rem; }
  .color-layout .section-heading { align-self: stretch; display: flex; height: auto; flex-direction: column; justify-content: center; margin: 0; }
  .color-layout .section-heading h2 { max-width: none; font-size: clamp(3rem, 3.5vw, 3.5rem); }
  .color-layout .section-heading > p:last-child { max-width: 24rem; font-size: 1.05rem; }
  .color-stage { width: 100%; }
  .color-stage { --carousel-inset: 1.25rem; }
  .color-stage__image { min-height: 0; height: var(--color-preview-height); }
  .color-stage__image > picture { height: 100%; }
  .color-stage__image > picture > img { padding: 1.5rem; }
  .color-stage__gift { top: 11%; right: 3%; width: 29%; }
  .color-stage__gift figcaption span { font-size: .68rem; }
  .color-stage__gift figcaption strong { font-size: .82rem; }
  .color-stage__meta { padding: 1.1rem 1.25rem .45rem; }
  .color-stage__meta span { font-size: .86rem; }
  .color-stage__meta strong { font-size: 1.05rem; }
  .color-options { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: .65rem; overflow-x: auto; padding: .75rem var(--carousel-inset) 1.25rem; scroll-snap-type: x proximity; }
  .color-option { width: 6.7rem; min-height: 6rem; grid-template-rows: 3.75rem auto; padding: .35rem .3rem .5rem; }
  .color-option img { height: 3.75rem; }
  .color-option span { font-size: .65rem; }
  .benefit-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .benefit-card, .benefit-card--lead { grid-column: auto; grid-template-columns: minmax(0, 1fr); }
  .attachment-grid { grid-template-columns: repeat(5, 1fr); }
  .attachment-card, .attachment-card:nth-child(4), .attachment-card:nth-child(5) { grid-column: auto; }
  .review-rail { grid-auto-columns: calc((100% - 2rem) / 3); }
  .sticky-order { display: none !important; }
  body.sticky-visible { padding-bottom: 0; }
}

@media (min-width: 75rem) {
  .hero .shell, .color-section .shell { width: min(calc(100% - 4rem), 80rem); }
}

@media (min-width: 48rem) and (max-width: 68.75rem) {
  .shell,
  .hero .shell,
  .color-section .shell { width: min(calc(100% - 3rem), 64rem); }

  .hero__content { min-height: 0; padding-block: 3.5rem; }
  .hero__copy { display: block; width: min(100%, 46rem); margin-inline: auto; padding-top: 0; text-align: center; }
  .hero__copy > :not(.hero__product-media) { grid-column: auto; }
  .hero .eyebrow { margin-bottom: .75rem; }
  .hero h1 { max-width: 15ch; margin: 0 auto 1rem; font-size: clamp(2.75rem, 5.5vw, 3.4rem); }
  .positioning { margin-bottom: 1rem; }
  .hero-facts { width: min(100%, 38rem); margin: 1.25rem auto 0; }
  .hero-facts li { align-items: center; text-align: center; }
  .hero__product-media { width: min(100%, 30rem); max-width: none; margin: 2rem auto 1.25rem; aspect-ratio: 1 / 1; }
  .price-block { margin-inline: auto; }
  .hero-cta { display: flex; margin-inline: auto; }
  .trust-inline { width: min(100%, 40rem); margin: 1.5rem auto 0; }
  .trust-inline li { justify-content: center; text-align: left; }

  .color-section { padding-block: 4rem; }
  .color-layout { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .color-promo { grid-column: 1; }
  .color-layout .section-heading { display: block; width: min(100%, 48rem); height: auto; margin: 0 auto; text-align: center; }
  .color-layout .section-heading h2,
  .color-layout .section-heading > p:last-child { max-width: none; }
  .color-stage { width: min(100%, 48rem); margin-inline: auto; }
  .color-stage__image { height: clamp(28rem, 54vw, 32rem); }
  .color-options { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: .65rem; overflow-x: auto; scroll-snap-type: x proximity; }
  .color-option { width: 6.7rem; min-width: 0; }
  .color-layout > .trust-row { width: min(100%, 48rem); margin: 0 auto; }

  .benefits .section-heading,
  .attachments .section-heading { display: block; text-align: center; }
  .benefits .section-heading > p:last-child,
  .attachments .section-heading > p:last-child { margin-inline: auto; }
  .benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .benefit-card,
  .benefit-card--lead { grid-column: auto; grid-template-columns: minmax(0, 1fr); }

  .attachment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .attachment-card,
  .attachment-card:nth-child(4),
  .attachment-card:nth-child(5) { grid-column: auto; }
  .attachment-card:nth-child(5) { grid-column: 1 / -1; width: calc((100% - 1rem) / 2); justify-self: center; }

  .review-rail { grid-auto-columns: calc((100% - 1rem) / 2); }

  .offer-grid { width: min(100%, 48rem); grid-template-columns: minmax(0, 1fr); margin-inline: auto; gap: 2rem; }
  .order-form { position: static; }
  .sticky-order { display: none !important; }
  body.sticky-visible { padding-bottom: 0; }
}

@media (max-width: 24rem) {
  .hero__copy { width: 100%; }
  h1 { font-size: 2rem; }
  .hero__beauty { background-position: 61% center; }
  .hero-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .25rem; }
  .hero-facts li { width: 100%; }
  .delivery-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .reveal-enabled .reveal-item { opacity: 1; transform: none; transition: none; }
}