/* ============================================================
   Luxshine — "What Is Vietnamese Remy Hair?" page (third build, 2026-10-13;
   banner, one-row header and three more sections added 2026-10-14).
   Its own design, not the home page's blocks: display type (--display-*),
   a banner the rest of the page slides over, copy that inks in word by
   word, a sideways pass through the three reasons, the comparison table,
   then quality, look and use. White and beige only, no dark blocks.
   Tokens only; spacing on the 12-step scale.
   Markup: what-is-vietnamese-remy-hair.html · word split: js/remy.js.

   Three layers, in this order:
   1. Layout. Everything is simply there. Small screens, reduced motion
      and browsers without scroll-driven animations stop here.
   2. Entrances. js/main.js adds .is-in to [data-reveal] on first view.
   3. Scroll scenes. CSS scroll-driven animations, desktop only.
   Transform and opacity only.
   ============================================================ */
.remy { --remy-ease: cubic-bezier(.16, 1, .3, 1); --remy-header: 72px; --remy-line-c: color-mix(in srgb, var(--color-black) 16%, transparent); position: relative; overflow-x: clip; background: var(--color-white); color: var(--color-black); }
/* The contact block and the footer carry this page's entrances on other pages too (.remy-contact / .remy-foot,
   Hair Extensions 2026-10-14: "đồng bộ … footer này với trang What Is Vietnamese Remy Hair"). */
.remy-contact, .remy-foot { --remy-ease: cubic-bezier(.16, 1, .3, 1); }
/* The contact block keeps the page frame at every width: the container's 24px margins, so its copy starts
   where every section's does (1352px of content from 1400px; user 2026-10-14: "lệch container"). */
.remy-contact .contact__inner { padding-inline: var(--space-6); }
/* js/main.js (headerOver) watches this mark to know the page is still at its top; the header is see-through until then. */
.remy > .header-over-mark { position: absolute; top: 0; left: 0; width: 1px; height: var(--space-12); pointer-events: none; }
/* The opening paragraph of a section: large reading type, a measure of 34em. */
.remy-lead { max-width: 34em; margin-top: var(--space-8); font-size: var(--display-3-size); line-height: var(--display-3-lh); color: var(--color-black); text-wrap: pretty; }
/* The link that leads on from a section. Links on this page read at Body lớn 20, in sentence case
   (user 2026-10-14), not the site's small uppercase label. */
.remy-more { margin-top: var(--space-12); }
.remy .label-link { font-size: var(--h6-size); line-height: var(--h6-lh); font-weight: 400; text-transform: none; }
.remy .label-link__arrow { width: 20px; height: 20px; }

/* ---------- Type ---------- */
.remy-display, .remy-h2 { font-family: var(--font-heading); font-weight: 400; text-transform: uppercase; color: inherit; }
.remy-display { font-size: var(--display-1-size); line-height: var(--display-1-lh); }
.remy-h2 { font-size: var(--display-2-size); line-height: var(--display-2-lh); }
/* Each line of display type sits in its own mask, so it can rise into place. */
.remy-line { display: block; overflow: hidden; }
/* A line too long for its column wraps inside its mask instead of being cut off by it (2026-10-14: the
   definition title lost its last letters on desktop once its column became six wide, and three titles did
   on phones). The mask still hides the whole line before it rises. */
.remy-line__in { display: block; text-wrap: balance; }
.remy-line--end { text-align: right; }
.remy-line--wrap .remy-line__in { white-space: normal; text-wrap: balance; }
.remy-nb { white-space: nowrap; }
/* A gold bar under the words a title leans on (user 2026-10-14, after the home page's highlighted
   titles). It is a block of its own behind the letters, sized in em so it keeps its proportion at
   every display size, and it sweeps in from the left once its line has risen (Layer 2). */
.remy-hl { position: relative; z-index: 0; display: inline-block; }
.remy-hl::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: .16em; height: .4em; background: var(--color-primary); transform-origin: 0 50%; }

/* ---------- Photo frame: square, no stroke, no shadow; a curtain lifts off it on reveal ---------- */
.remy-shot { position: relative; overflow: hidden; margin: 0; aspect-ratio: var(--ty-le-khoi_vuong); }
.remy-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.remy-shot::after { content: ""; position: absolute; inset: 0; background: var(--remy-curtain, var(--color-white)); transform: scaleY(0); transform-origin: top; pointer-events: none; }

/* ---------- 1 · Banner: one photo across the screen, the page title on it, the header see-through
   above (from 1025px the banner runs up behind the 72px header). No button, no veil: the photo is
   light enough for black type. As tall as the About banner, max(35.19vw, 240px) (comments cmvoyannpo3kc,
   cmvoyb9tv6vwh, cmvoybectyrn4, cmvoybo79fxiw, cmvoybrpshtc3): behind the header it adds the header's 72px,
   as the Factory banner does, so its foot lands where About's does. A minimum, so a long title still fits. ---------- */
.remy-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; min-height: max(35.19vw, 240px); overflow: hidden; background: var(--surface-beige); }
.remy-hero__photo { position: absolute; inset: 0; overflow: hidden; }
.remy-hero__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.remy-hero__photo::after { content: ""; position: absolute; inset: 0; background: var(--color-white); transform: scaleY(0); transform-origin: bottom; pointer-events: none; }
.remy-hero__head { position: relative; padding-block: var(--space-12); }
@media (min-width: 1025px) {
  .remy-hero { min-height: calc(max(35.19vw, 240px) + var(--remy-header)); margin-top: calc(var(--remy-header) * -1); }
  .remy-hero__head { padding-block: calc(var(--remy-header) + var(--space-12)) var(--space-16); }
}

/* ---------- 2 · Introduction: the opening copy and the way on, centred; then the factory film across the
   container in a 16:9 frame, with nothing under it before the next section. User 2026-10-14. ---------- */
.remy-open { background: var(--color-white); padding-block: var(--space-24) 0; }
.remy-open__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-16); }
.remy-open__copy { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); text-align: center; }
/* The large body style of the definition below: display-3 at 1.4 (capped by the screen height in the scroll scenes). */
.remy-open__lead { max-width: 30em; font-size: var(--display-3-size); line-height: var(--display-3-lh); color: var(--color-black); text-wrap: balance; }
.remy-open__media { position: relative; overflow: hidden; width: 100%; margin: 0; aspect-ratio: var(--ty-le-video); background: var(--surface-beige); }
.remy-open__media iframe { display: block; width: 100%; height: 100%; border: 0; }
.remy-open__media::after { content: ""; position: absolute; inset: 0; background: var(--color-white); transform: scaleY(0); transform-origin: top; pointer-events: none; }

/* Everything after the banner rides on one white sheet; on desktop it slides over the pinned banner. */
.remy-sheet { position: relative; z-index: 1; background: var(--color-white); }

/* ---------- 2 · Definition: large reading copy beside one square photo, a second one over its corner ---------- */
.remy-def { padding-block: var(--space-24); }
.remy-def__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-6); align-items: center; }
/* Copy on six columns, the photo on the last five: one empty column between them (user 2026-10-14, after a
   larger photo earlier the same day: "tăng gap giữa cụm content bên trái và cái hình… Hình bên phải thì scale
   nhỏ lại chút"). */
.remy-def__text { grid-column: 1 / span 6; padding-right: var(--space-6); }
.remy-def__body { display: grid; gap: var(--space-6); max-width: 34em; margin-top: var(--space-12); font-size: var(--display-3-size); line-height: var(--display-3-lh); color: var(--color-black); text-wrap: pretty; }
.remy-def__media { grid-column: 8 / -1; position: relative; justify-self: end; width: 100%; }
/* The title keeps its two lines in a six-column text column: its size follows the screen width as well. */
@media (min-width: 900px) { .remy-def .remy-h2 { font-size: calc(var(--display-2-size) * .86); } }
/* The second photo hangs 24px out past the corner of the first; the copy keeps 48px clear of it (user 2026-10-14:
   "text đang quá sát hình"). */
.remy-def__inset { position: absolute; left: calc(var(--space-6) * -1); bottom: calc(var(--space-12) * -1); z-index: 1; width: 40%; }

/* ---------- 3 · Strong by Nature: the title, then the three reasons in three even columns, each its
   photo over its name and copy (user 2026-10-15: no section scrolls sideways; 2026-10-15 earlier: even
   columns, none set lower). They open one after another, left to right. ---------- */
.remy-why { --remy-curtain: var(--surface-beige); background: var(--surface-beige); padding-block: calc(var(--space-16) * 2); }
.remy-why__inner { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-6); }
.remy-why__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-6); align-items: start; margin-top: var(--space-16); }
.remy-reason { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
/* SVN-Gilroy (comments cmvp0sibnmh0s, cmvp0t0fbipv6, cmvp0t5432h12): the DS's Gilroy subhead, bold 28px (24 on phones). */
.remy-reason__title { font-family: var(--font-body); font-weight: 700; font-size: var(--subhead-size); line-height: var(--subhead-lh); text-transform: uppercase; color: var(--color-black); }
/* Body lớn 20 (20/28 regular), as the tier copy (user 2026-10-14). */
/* balance, not pretty: in the one-column phone layout pretty still left "last." alone on a fourth line. */
.remy-reason__text p { max-width: 44ch; margin-top: var(--space-2); font-size: var(--h6-size); line-height: var(--h6-lh); color: var(--color-black); text-wrap: balance; }

/* ---------- 4 · Comparison, on white, centred on the page. The table is the site's shared table
   (.dtable, css/sections.css): Remy, the standard every Luxshine order meets, is its gold column. ---------- */
.remy-vs { background: var(--color-white); color: var(--color-black); padding-block: calc(var(--space-16) * 2); }
.remy-vs .remy-h2 { text-align: center; }
.remy-vs__table { margin-top: var(--space-16); table-layout: fixed; }
.remy-vs__table thead th:first-child { width: 20%; }
/* Cells at Body lớn 20 (user 2026-10-14); 16 on a phone, where three columns share the width. */
.remy-vs__table td { font-size: var(--h6-size); line-height: var(--h6-lh); }

/* ---------- 5 · Quality: the three tiers as a ledger. A row is the tier's code in display type, its name,
   and what it is for; one hairline above each. L and PL, the tiers Luxshine steers buyers to, carry
   the gold bar. ---------- */
.remy-tier { --remy-curtain: var(--surface-beige); background: var(--surface-beige); padding-block: calc(var(--space-16) * 2); }
/* Laid out as on Quality Standards and the homepage (comment cmvp0pb7yy6oh "đồng bộ layout section này"; it was a ledger of
   code | name | copy | photo rows, comment cmvkskgg4dkwf): three even columns MS → L → PL, the square photo on top, the code
   in display type rising over the photo's foot, the name with L's badge beside it, the words. The columns share their rows
   (subgrid), so the names and the words start level across the three. Same measures as .qs-pick / .qs-tier. */
.remy-tier__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); column-gap: var(--space-12); margin: var(--space-16) 0 0; padding: 0; list-style: none; }
.remy-tier__row { display: grid; grid-row: 1 / span 3; grid-template-rows: subgrid; min-width: 0; }
.remy-tier__media { grid-row: 1; align-self: end; }
.remy-tier__head { grid-row: 2; position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--space-2); margin-top: calc(var(--display-1-size) * -.5); font-weight: 400; }
.remy-tier__code { font-family: var(--font-heading); font-size: var(--display-1-size); line-height: var(--display-1-lh); text-transform: uppercase; color: var(--color-black); }
.remy-tier__name { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); font-family: var(--font-heading); font-size: var(--h4-size); line-height: var(--h4-lh); text-transform: uppercase; color: var(--color-black); }
.remy-tier__tag { padding: var(--space-1) var(--space-2); background: var(--color-primary); font-family: var(--font-body); font-size: var(--caption-size); line-height: var(--caption-lh); font-weight: 600; text-transform: none; color: var(--color-black); }
/* On this page the tag reads at Body lớn 20 (user 2026-10-14); the Quality page keeps 16. */
.remy-tier .remy-tier__tag { font-size: var(--h6-size); line-height: var(--h6-lh); font-weight: 400; }
.remy-tier__text { grid-row: 3; max-width: 34em; margin-top: var(--space-4); font-size: var(--h6-size); line-height: var(--h6-lh); color: var(--color-black); text-wrap: pretty; }

/* ---------- 6 · Look: the three texture families as an index in display type, their photo in one frame
   beside them (the family under the pointer, or holding the focus, shows its own), then the factory
   colour chart: 34 swatches, each over its code. ---------- */
.remy-look { background: var(--color-white); padding-block: calc(var(--space-16) * 2); }
.remy-look__body { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-6); align-items: start; margin-top: var(--space-16); }
.remy-look__list { grid-column: 1 / span 6; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--remy-line-c); }
/* The stage stays in view under the header while the list scrolls past (user 2026-10-14). */
.remy-look__stage { position: sticky; top: calc(var(--remy-header) + var(--space-12)); grid-column: 8 / -1; grid-row: 1; aspect-ratio: var(--ty-le-khoi_vuong); }
.remy-look__item { padding-block: var(--space-8); border-top: 1px solid var(--remy-line-c); }
/* The three families' names in SVN-Gilroy (comment cmvp0swq248pi): bold h3, still the largest line of the list. */
.remy-look__name { display: flex; align-items: baseline; gap: var(--space-4); font-family: var(--font-body); font-weight: 700; font-size: var(--h3-size); line-height: var(--h3-lh); text-transform: uppercase; color: var(--color-black); }
.remy-look__name a { color: inherit; }
.remy-look__count { font-family: var(--font-body); font-size: var(--body-size); line-height: var(--body-lh); text-transform: none; color: var(--color-font); }
.remy-look__text { max-width: 34em; margin-top: var(--space-3); font-size: var(--h6-size); line-height: var(--h6-lh); color: var(--color-black); text-wrap: pretty; }
.remy-look__kinds { max-width: 44em; margin-top: var(--space-2); font-size: var(--body-size); line-height: var(--body-lh); color: var(--color-font); }
/* One photo shows at a time (--on): the family under the pointer or holding the focus, otherwise the one at
   the middle of the screen (js/remy.js writes data-active), and the first one before that. */
.remy-look__item .remy-look__shot { display: none; }
.remy-look__stage .remy-look__shot { --on: 0; position: absolute; inset: 0; opacity: var(--on); transition: opacity .5s ease; }
.remy-look__body:not([data-active]) .remy-look__stage > :nth-child(1),
.remy-look__body[data-active="1"] .remy-look__stage > :nth-child(1),
.remy-look__body[data-active="2"] .remy-look__stage > :nth-child(2),
.remy-look__body[data-active="3"] .remy-look__stage > :nth-child(3) { --on: 1; }
.remy-look__body:has(.remy-look__item:is(:hover, :focus-within)) .remy-look__stage > * { --on: 0; }
.remy-look__body:has(.remy-look__item:nth-child(1):is(:hover, :focus-within)) .remy-look__stage > :nth-child(1),
.remy-look__body:has(.remy-look__item:nth-child(2):is(:hover, :focus-within)) .remy-look__stage > :nth-child(2),
.remy-look__body:has(.remy-look__item:nth-child(3):is(:hover, :focus-within)) .remy-look__stage > :nth-child(3) { --on: 1; }
.remy-look__item { transition: opacity .4s ease; }
.remy-look__list:has(.remy-look__item:is(:hover, :focus-within)) .remy-look__item:not(:hover, :focus-within) { opacity: .32; }
/* Desktop: each family holds the screen a while, so the stage stays put through all three; the families
   not at the middle of the screen step back, as they do under the pointer. */
@media (min-width: 900px) {
  /* No minimum height: each family has the same 32px above and below (user 2026-10-14). */
  .remy-look__body[data-active]:not(:has(.remy-look__item:is(:hover, :focus-within))) .remy-look__item { opacity: .32; }
  .remy-look__body[data-active="1"]:not(:has(.remy-look__item:is(:hover, :focus-within))) .remy-look__item:nth-child(1),
  .remy-look__body[data-active="2"]:not(:has(.remy-look__item:is(:hover, :focus-within))) .remy-look__item:nth-child(2),
  .remy-look__body[data-active="3"]:not(:has(.remy-look__item:is(:hover, :focus-within))) .remy-look__item:nth-child(3) { opacity: 1; }
}
.remy-chart { margin-top: var(--space-24); }
.remy-chart__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-6); padding-bottom: var(--space-6); }
.remy-chart__head .label-link { font-weight: 700; } /* the way on to the colour shop, beside the chart's title (comment cmvksltnnq8uc: "bold lên") */
.remy-chart__title { font-family: var(--font-body); font-weight: 700; font-size: var(--subhead-size); line-height: var(--subhead-lh); text-transform: uppercase; color: var(--color-black); }
.remy-swatches { display: grid; grid-template-columns: repeat(17, minmax(0, 1fr)); row-gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.remy-swatch { min-width: 0; }
.remy-swatch img { display: block; width: 100%; height: auto; aspect-ratio: var(--ty-le-khoi_vuong); object-fit: cover; }
/* Colour codes at 20px (user 2026-10-14); smaller where the chart has 9 or 6 columns (below). */
.remy-swatch__code { display: block; padding-top: var(--space-2); font-size: var(--h6-size); line-height: var(--h6-lh); font-weight: 600; text-align: center; color: var(--color-black); overflow-wrap: anywhere; }

/* ---------- 7 · Use: a tall photo, and beside it the three things the hair lets a salon do ---------- */
.remy-use { --remy-curtain: var(--surface-beige); background: var(--surface-beige); padding-block: calc(var(--space-16) * 2); }
.remy-use__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-6); align-items: start; margin-top: var(--space-16); }
.remy-use__shot { grid-column: 1 / span 5; aspect-ratio: var(--ty-le-editorial); }
.remy-use__list { grid-column: 7 / -1; margin: 0; border-bottom: 1px solid var(--remy-line-c); }
.remy-use__item { padding-block: var(--space-8); border-top: 1px solid var(--remy-line-c); }
/* The list opens on its first heading: no rule and no padding above it (user 2026-10-14). */
.remy-use__item:first-child { padding-top: 0; border-top: 0; }
.remy-use__item dt { font-family: var(--font-body); font-weight: 700; font-size: var(--subhead-size); line-height: var(--subhead-lh); text-transform: uppercase; color: var(--color-black); }
.remy-use__item dd { max-width: 34em; margin: var(--space-3) 0 0; font-size: var(--h6-size); line-height: var(--h6-lh); color: var(--color-black); text-wrap: pretty; }

/* ============================================================
   Layer 2 · Entrances. The hidden starting states exist only when
   scripting runs (.js on <html>) and motion is welcome.
   ============================================================ */
:is(.remy, .remy-contact, .remy-foot) [data-reveal-delay="1"] { --remy-d: .12s; }
:is(.remy, .remy-contact, .remy-foot) [data-reveal-delay="2"] { --remy-d: .24s; }
:is(.remy, .remy-contact, .remy-foot) [data-reveal-delay="3"] { --remy-d: .36s; }
/* Order in which the contact form's parts come up (Layer 2), and the footer's links and icons. */
.remy-contact .contact__form > :nth-child(3) { --i: 5; }
.remy-contact .contact__form > :nth-child(4) { --i: 6; }
.remy-contact .contact__form > :nth-child(5) { --i: 7; }
.remy-contact .form__grid > :nth-child(1), .remy-foot :is(.footer__links, .footer__social) > :nth-child(2) { --i: 1; }
.remy-contact .form__grid > :nth-child(2), .remy-foot :is(.footer__links, .footer__social) > :nth-child(3) { --i: 2; }
.remy-contact .form__grid > :nth-child(3), .remy-foot :is(.footer__links, .footer__social) > :nth-child(4) { --i: 3; }
.remy-contact .form__grid > :nth-child(4), .remy-foot :is(.footer__links, .footer__social) > :nth-child(5) { --i: 4; }
.remy-foot :is(.footer__links, .footer__social) > :nth-child(6) { --i: 5; }
.remy-foot .footer__links > :nth-child(7) { --i: 6; }
.remy-foot .footer__links > :nth-child(8) { --i: 7; }
.remy-foot .footer__links > :nth-child(9) { --i: 8; }
@media (prefers-reduced-motion: no-preference) {
  /* The banner plays once on load: a curtain lifts off the photo while the picture settles, and the
     two title lines rise out of their masks (the header's own load-in lives in css/sections.css). */
  .remy-hero .remy-line__in { animation: remy-up 1.2s var(--remy-ease) .15s both; }
  .remy-hero .remy-line--end .remy-line__in { animation-delay: .27s; }
  .remy-hero__photo::after { animation: remy-lift 1.4s var(--remy-ease) both; }
  .remy-hero__photo img { animation: remy-settle 2.2s var(--remy-ease) both; }
  /* Further down: display lines rise, photos lose their curtain, copy comes up. */
  .js .remy-line[data-reveal] .remy-line__in { transform: translateY(105%); transition: transform 1.1s var(--remy-ease) var(--remy-d, 0s); }
  .js .remy-line[data-reveal].is-in .remy-line__in { transform: none; }
  /* The gold bar waits for its line, then shoots across from the left and settles. */
  .js .remy [data-reveal] .remy-hl::after { transform: scaleX(0); }
  .js .remy [data-reveal].is-in .remy-hl::after { animation: remy-swipe 1s var(--remy-ease) calc(var(--remy-d, 0s) + .5s) both; }
  .js .remy-shot[data-reveal]::after { transform: scaleY(1); transition: transform 1.2s var(--remy-ease) var(--remy-d, 0s); }
  .js .remy-shot[data-reveal].is-in::after { transform: scaleY(0); }
  .js .remy-shot[data-reveal] img { transform: scale(1.14); transition: transform 1.8s var(--remy-ease) var(--remy-d, 0s); }
  .js .remy-shot[data-reveal].is-in img { transform: none; }
  .js .remy-rise[data-reveal] { opacity: 0; transform: translateY(32px); transition: opacity .9s var(--remy-ease) var(--remy-d, 0s), transform .9s var(--remy-ease) var(--remy-d, 0s); }
  .js .remy-rise[data-reveal].is-in { opacity: 1; transform: none; }
  /* The colour chart: the swatches come up one after another, left to right. */
  .js .remy-swatches[data-reveal] .remy-swatch { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--remy-ease) calc(var(--i, 0) * .025s), transform .6s var(--remy-ease) calc(var(--i, 0) * .025s); }
  .js .remy-swatches[data-reveal].is-in .remy-swatch { opacity: 1; transform: none; }
  /* A texture photo that comes forward settles as it does. */
  .remy-look__stage .remy-look__shot img { transform: scale(calc(1.08 - .08 * var(--on))); transition: transform 1.1s var(--remy-ease); }
  /* The comparison lands a row at a time, so the gold column grows downward. */
  .js .remy-vs__table tr[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--remy-ease) calc(var(--remy-r, 0) * .09s), transform .7s var(--remy-ease) calc(var(--remy-r, 0) * .09s); }
  .js .remy-vs__table tr[data-reveal].is-in { opacity: 1; transform: none; }
  .remy-vs__table tbody tr:nth-child(2) { --remy-r: 1; }
  .remy-vs__table tbody tr:nth-child(3) { --remy-r: 2; }
  .remy-vs__table tbody tr:nth-child(4) { --remy-r: 3; }
  .remy-vs__table tbody tr:nth-child(5) { --remy-r: 4; }
  .remy-vs__table tbody tr:nth-child(6) { --remy-r: 5; }
  /* The opening photo loses its curtain after the copy above it has come up. */
  .js .remy-open__media[data-reveal]::after { transform: scaleY(1); transition: transform 1.2s var(--remy-ease) var(--remy-d, 0s); }
  .js .remy-open__media[data-reveal].is-in::after { transform: scaleY(0); }
  /* Contact and footer (user 2026-10-14: "chưa có motion mạnh"): titles rise out of their masks, then the
     rest follows in order; the form's title, fields and button come up one after another. */
  .js .remy-contact .contact__form[data-reveal] > :not(.form__grid), .js .remy-contact .contact__form[data-reveal] .form__grid > * { opacity: 0; transform: translateY(32px); transition: opacity .8s var(--remy-ease) calc(.1s + var(--i, 0) * .08s), transform .8s var(--remy-ease) calc(.1s + var(--i, 0) * .08s); }
  .js .remy-contact .contact__form[data-reveal].is-in > :not(.form__grid), .js .remy-contact .contact__form[data-reveal].is-in .form__grid > * { opacity: 1; transform: none; }
  /* The icons sit at the very foot of the page, below where the reveal can see, so they follow the links. */
  .js .remy-foot :is(.footer__links[data-reveal], .footer__social) > * { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--remy-ease) calc(.2s + var(--i, 0) * .06s), transform .6s var(--remy-ease) calc(.2s + var(--i, 0) * .06s); }
  .js .remy-foot .footer__links.is-in > *, .js .remy-foot:has(.footer__links.is-in) .footer__social > * { opacity: 1; transform: none; }
  .js .remy-foot .footer__social > * { transition-delay: calc(.6s + var(--i, 0) * .06s); }
}
@keyframes remy-up { from { transform: translateY(105%); } }
@keyframes remy-swipe { 0% { transform: scaleX(0); } 55% { transform: scaleX(1.05); } 100% { transform: none; } }
@keyframes remy-lift { from { transform: scaleY(1); } to { transform: scaleY(0); } }
@keyframes remy-settle { from { transform: scale(1.14); } }
@keyframes remy-rise { from { opacity: 0; transform: translateY(32px); } }

/* ============================================================
   Layer 3 · Scroll scenes. Desktop, a viewport tall enough to hold
   a pinned scene, motion welcome, and a browser that can tie an
   animation to the scroll position. No scroll listeners anywhere.
   ============================================================ */
@media (min-width: 1025px) and (min-height: 680px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) and (timeline-scope: --remy) {
    /* 1 · The banner stays where it is while the sheet rises over it. As it is covered the two title
       lines slide past each other and the photo sinks back. */
    /* The banner is shorter than the screen (as tall as About's), so the sheet already shows below it on load: both
       moves start counting at the sheet's position then, not where it would first come into view, so nothing has moved
       before the page is scrolled. */
    .remy { timeline-scope: --remy-sheet; --remy-sheet-start: max(0px, calc(100vh - max(35.19vw, 240px) - var(--remy-header))); }
    .remy-sheet { view-timeline: --remy-sheet block; }
    .remy-hero { position: sticky; top: 0; }
    .remy-hero__title .remy-line { animation: remy-cross linear both; animation-timeline: --remy-sheet; animation-range: entry var(--remy-sheet-start) entry 100%; }
    .remy-hero__title .remy-line--end { --remy-dir: -1; }
    .remy-hero__photo { animation: remy-sink linear both; animation-timeline: --remy-sheet; animation-range: entry var(--remy-sheet-start) entry 100%; }

    /* (The held definition whose copy inked in word by word is gone: comment cmvoqy7bxuznp, 2026-10-26.) */

    /* 3 · Strong by Nature: each reason's photo drifts inside its frame as it crosses the screen. */
    .remy-reason .remy-shot img { animation: remy-drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    /* 7 · The tall photo of "Use" drifts inside its frame as it crosses the screen. */
    .remy-use__shot img { animation: remy-drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }

    /* Parallax all the way down (user 2026-10-14). What stands in a column of its own moves at its own
       speed as it crosses the screen: photos drift inside their frames (far), frames and the contact copy
       slide past the columns beside them (middle), the large tier codes travel sideways (near). */
    .remy-use__shot, .remy-contact .contact__info { animation: remy-depth linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .remy-use__shot { --remy-par: 48px; }
    .remy-contact .contact__info { --remy-par: 40px; }
    .remy-foot .footer__bg img { animation: remy-foot linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .remy-look__shot, .remy-look__shot img, .remy-look__item { transition: none; }
}
@keyframes remy-cross { to { transform: translateX(calc(var(--remy-dir, 1) * 6%)); } }
@keyframes remy-sink { to { transform: scale(1.12); } }
@keyframes remy-drift { from { transform: translateY(-5%) scale(1.14); } to { transform: translateY(5%) scale(1.14); } }
@keyframes remy-float { from { transform: translateY(48px); } to { transform: translateY(-48px); } }
@keyframes remy-drift-x { from { transform: translateX(-6%) scale(1.14); } to { transform: translateX(6%) scale(1.14); } }
@keyframes remy-bob { from { transform: translateY(32px); } to { transform: translateY(-32px); } }
@keyframes remy-slide { from { transform: translateX(-24px); } to { transform: translateX(24px); } }
@keyframes remy-depth { from { transform: translateY(var(--remy-par, 64px)); } to { transform: translateY(calc(var(--remy-par, 64px) * -1)); } }
@keyframes remy-foot { from { transform: translateY(-10%) scale(1.25); } to { transform: scale(1.1); } }
@keyframes remy-pan { to { transform: translateX(min(0px, calc(-100% + 100cqw))); } }

/* ---------- Below 900px (portrait tablet and phone): everything stacks. The opening becomes title,
   photo, then the copy on the page itself; the three reasons run one under another. A landscape tablet
   keeps the desktop composition, without the pinned scenes. ---------- */
@media (max-width: 899px) {
  .remy-open { padding-block: var(--space-16) 0; }
  .remy-open__inner { gap: var(--space-12); }
  .remy-open__copy { gap: var(--space-6); }
  .remy-def { padding-block: var(--space-16); }
  .remy-def__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-12); }
  .remy-def__text, .remy-def__media { grid-column: 1; }
  .remy-def__text { padding-right: 0; }
  .remy-def__body { margin-top: var(--space-8); }
  .remy-def__media { justify-self: start; width: min(100%, 560px); margin-bottom: var(--space-12); padding-left: var(--space-12); }
  .remy-def__inset { left: 0; }
  .remy-why { padding-block: var(--space-16); }
  /* The three reasons one under another, each its photo beside its copy (over it on a phone, below). */
  .remy-why__list { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-12); margin-top: var(--space-12); }
  .remy-reason { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); align-items: center; }
  .remy-vs { padding-block: var(--space-24); }
  .remy-vs__table { margin-top: var(--space-12); }
  .remy-more { margin-top: var(--space-8); }
  /* Quality: a row is the copy stacked (code, name, copy) beside the tier's photo; the code stays large.
     The two empty 1fr rows above and below the copy take up the photo's extra height, so the copy sits
     centred on the photo the way it does on a desktop row. */
  .remy-tier, .remy-look, .remy-use { padding-block: var(--space-24); }
  /* The tiers, as on Quality: one row each, the photo on the left and the code, name and words beside it. */
  .remy-tier__list { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: var(--space-12); margin-top: var(--space-12); }
  .remy-tier__row { grid-row: auto; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: var(--space-6); }
  .remy-tier__media { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
  .remy-tier__head { grid-column: 2; grid-row: 1; margin-top: 0; gap: 0; }
  .remy-tier__text { grid-column: 2; grid-row: 2; }
  .remy-tier__code { font-size: var(--h1-size); line-height: var(--h1-lh); }
  .remy-tier__name { font-size: var(--h5-size); line-height: var(--h5-lh); }
  /* Look: no pointer to choose a family with, so each family shows its photo under its own copy. */
  .remy-look__body { grid-template-columns: minmax(0, 1fr); margin-top: var(--space-12); }
  .remy-look__list { grid-column: 1; }
  .remy-look__stage { display: none; }
  .remy-look__item .remy-look__shot { display: block; width: min(100%, 420px); margin-top: var(--space-6); }
  .remy-look__list:has(.remy-look__item:is(:hover, :focus-within)) .remy-look__item:not(:hover, :focus-within) { opacity: 1; }
  .remy-chart { margin-top: var(--space-16); }
  .remy-look__name { font-size: var(--h4-size); line-height: var(--h4-lh); }
  .remy-swatches { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  /* Use: the photo, then the three points. */
  .remy-use__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-12); margin-top: var(--space-12); }
  .remy-use__shot, .remy-use__list { grid-column: 1; }
  .remy-use__shot { width: min(100%, 420px); }
}
@media (max-width: 899px) {
  .remy-swatch__code { font-size: var(--body-size); line-height: var(--body-lh); }
}
@media (max-width: 480px) {
  .remy-swatches { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .remy-swatch__code { font-size: var(--caption-size); line-height: var(--caption-lh); }
  .remy-look__text, .remy-tier__text, .remy-use__item dd, .remy-reason__text p { font-size: var(--body-size); line-height: var(--body-lh); }
}
/* Phone: each reason is one column, its photo across the top and its copy under it. */
@media (max-width: 599px) {
  .remy-reason { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-6); }
  /* A tier's photo takes two fifths of the row, beside the code and name only; the copy runs the full
     width under them so it does not wrap word by word in a narrow column. */
  .remy-tier__code { font-size: var(--h2-size); line-height: var(--h2-lh); }
  .remy-tier .remy-tier__tag { font-size: var(--body-size); line-height: var(--body-lh); }
}
/* Phone (user comments 2026-10-14 at 375px). */
@media (max-width: 767px) {
  /* Section titles one step up (28 → the phone h1, 34px: the largest heading the design system has on a
     phone); a line too long wraps inside its mask. */
  .remy .remy-h2 { font-size: var(--h1-size); line-height: 1.1; }
  /* The comparison keeps its three columns side by side (.dtable--fold); the rows land together. */
  .remy-vs__table tbody tr { --remy-r: 0; }
  .remy-vs__table td { font-size: var(--body-size); line-height: var(--body-lh); }
  /* Use: the list ends on its last item, with no padding or rule under it. */
  .remy-use__list { border-bottom: 0; }
  .remy-use__item:last-child { padding-bottom: 0; }
  /* Contact: a full-height submit button. */
  .remy-contact .contact__submit { height: 52px; font-size: var(--h6-size); line-height: var(--h6-lh); }
  /* Footer: no fixed line break, balanced lines, so no word is left alone on the last line. */
  .remy-foot .footer__cta p br { display: none; }
  .remy-foot :is(.footer__cta p, .footer__copy) { text-wrap: balance; }
}
/* Footer social links: 44px targets with larger icons, at every width (user 2026-10-14). */
.remy-foot .soc { width: 44px; height: 44px; }
.remy-foot .soc:not(.soc--ring) img { width: 100%; height: 100%; }
.remy-foot .soc--ring img { width: 18px; height: auto; }
/* Below 360px six 44px links do not fit the 272px line: 40px links, 4px apart. */
@media (max-width: 359px) {
  .remy-foot .footer__social { gap: var(--space-1); }
  .remy-foot .soc { width: 40px; height: 40px; }
}