/* ============================================================
   Luxshine — Quality Standards page (rebuilt 2026-10-14 on the design of
   "What Is Vietnamese Remy Hair?", user comment cmv7hvvjh4epf: same design
   system, minimalism, luxury, no black sections, no section labels).
   css/remy.css carries the banner, the display type, the gold bars, the photo
   curtains and the entrances. This file holds what is this page's own:
   the factory band, the L / PL pair, the tier table, the four end standards
   with their strand drawings, and the five production steps.
   Markup: quality-standards.html. Tokens only; spacing on the 12-step scale;
   transform and opacity only. Same three layers as remy.css:
   1. layout, 2. entrances (.is-in from js/main.js), 3. desktop scroll scenes.
   ============================================================ */

/* ---------- 2 · Opening: the introduction centred, then the factory across the whole screen ---------- */
.qs-open__band { position: relative; overflow: hidden; height: clamp(320px, 72svh, 760px); margin: var(--space-16) 0 0; background: var(--surface-beige); }
.qs-open__band img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.qs-open__band::after { content: ""; position: absolute; inset: 0; background: var(--color-white); transform: scaleY(0); transform-origin: top; pointer-events: none; }

/* ---------- 3 · Tiers, MS to PL left to right (comment cmvksmppugktt, 2026-10-23). Three even columns, so the three
   square photos are the same size (comment cmvp0loiefmc0 "3 ảnh bằng nhau"; they used to grow 3 : 4 : 5) and stand on
   one line; the photos open from that line in turn (the curtain of .remy-shot, staggered). Each code, in
   display type, rises over the foot of its photo. The columns share their rows (subgrid), so the names and the
   descriptions start level across the three. MS shows the homepage's tier photo. ---------- */
.qs-tiers { --remy-curtain: var(--surface-beige); background: var(--surface-beige); padding-block: calc(var(--space-16) * 2); }
.qs-tiers .remy-h2 { text-align: center; }
.qs-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); column-gap: var(--space-12); margin-top: var(--space-16); }
.qs-tier { display: grid; grid-row: 1 / span 3; grid-template-rows: subgrid; min-width: 0; }
.qs-tier .remy-shot { align-self: end; }
.qs-tier__id { position: relative; margin-top: calc(var(--display-1-size) * -.5); }
.qs-tier__head { display: flex; flex-direction: column; gap: var(--space-2); font-weight: 400; }
.qs-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); }
.qs-tier__name { font-family: var(--font-heading); font-size: var(--h4-size); line-height: var(--h4-lh); text-transform: uppercase; text-wrap: balance; color: var(--color-black); }
.qs-tier__tag { display: inline-block; margin-top: var(--space-3); font-size: var(--body-size); line-height: var(--body-lh); }
/* L's badge on the line of its name (comment cmvp0ma5im0gz): the heading on the left, the badge beside it at the foot,
   so it sits level with "Luxury" (the name's 40px line less the badge's 32px, halved). It stays a paragraph after the
   heading, not part of it. */
.qs-tier__id:has(.qs-tier__tag) { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: end; column-gap: var(--space-4); }
.qs-tier__id .qs-tier__tag { justify-self: start; margin: 0 0 var(--space-1); }
.qs-tier__text { 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; }

/* ---------- 4 · Compare: the shared table (.dtable). L and PL are both gold columns, side by side, so they
   read as one recommended zone; a hairline keeps the two apart. ---------- */
.qs-compare { background: var(--color-white); padding-block: calc(var(--space-16) * 2); }
.qs-compare .remy-h2 { text-align: center; }
.qs-compare__table { margin-top: var(--space-16); table-layout: fixed; }
.qs-compare__table thead th:first-child { width: 22%; }
.qs-compare__table .dtable__best + .dtable__best { border-left: 1px solid var(--remy-line-c); }
.qs-th__code, .qs-th__name { display: block; }
.qs-th__code { font-family: var(--font-heading); font-weight: 400; font-size: var(--h3-size); line-height: var(--h3-lh); text-transform: uppercase; }

/* ---------- 5 · End standards: the hanging bundle beside the title, then the four standards as one rising
   scale. Each column draws its ends: a weft bar with strands below it, the full-length ones reaching the
   foot. The parts of the four columns line up across (subgrid). ---------- */
.qs-ends { --remy-curtain: var(--surface-beige); background: var(--surface-beige); padding-block: calc(var(--space-16) * 2); }
.qs-ends__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-6); align-items: center; }
.qs-ends__shot { grid-column: 1 / span 5; }
.qs-ends__intro { grid-column: 7 / -1; }
.qs-ends__scale { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); column-gap: var(--space-12); margin: var(--space-24) 0 0; padding: 0; list-style: none; }
/* Every column is the same width, so the four photos match in size; the rule between two standards sits in
   the middle of the gap instead of on a padded edge (which made the first and last columns 24px wider). */
.qs-end { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; position: relative; min-width: 0; }
.qs-end + .qs-end::before { content: ""; position: absolute; inset-block: 0; left: calc(var(--space-6) * -1); border-left: 1px solid var(--remy-line-c); }
/* The four photos sit in the first row of the subgrid, so the ends line up side by side. Their white ground
   is multiplied into the beige behind them: the scale reads as one strip, not four white tiles. */
.qs-end__shot { aspect-ratio: var(--ty-le-san_pham); background: var(--surface-beige); }
.qs-end__shot img { mix-blend-mode: multiply; }
.qs-end__head { display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-8); font-weight: 400; }
.qs-end__code { font-family: var(--font-heading); font-size: var(--display-2-size); line-height: var(--display-2-lh); text-transform: uppercase; color: var(--color-black); }
.qs-end__name { font-family: var(--font-body); font-weight: 600; font-size: var(--h6-size); line-height: var(--h6-lh); color: var(--color-black); }
.qs-end__text { margin-top: var(--space-3); font-size: var(--body-size); line-height: var(--body-lh); color: var(--color-font); text-wrap: pretty; }
.qs-end__facts { display: grid; align-content: start; gap: var(--space-4); margin: var(--space-6) 0 0; padding-top: var(--space-6); border-top: 1px solid var(--remy-line-c); }
/* Body đậm (16/24 semibold) for the labels (user 2026-10-14). */
.qs-end__fact dt { font-size: var(--body-size); line-height: var(--body-lh); font-weight: 600; color: var(--color-black); }
.qs-end__fact dd { margin: 0; font-size: var(--body-size); line-height: var(--body-lh); color: var(--color-font); text-wrap: pretty; }

/* ---------- 6 · Production: the steps in order, down the page (user 2026-10-15: no section scrolls
   sideways). On desktop the title holds still in the left five columns while the steps pass in the right
   seven; each step is one row, its photo then its number, name and copy, every row alike. Below 1025px
   the title sits on top and the rows take the full width. ---------- */
.qs-make { background: var(--color-white); padding-block: calc(var(--space-16) * 2); }
.qs-make__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-6); align-items: start; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--space-6); }
.qs-make__title { grid-column: 1 / span 5; position: sticky; top: calc(var(--remy-header) + var(--space-12)); }
.qs-make__list { display: grid; grid-column: 6 / -1; row-gap: var(--space-16); margin: 0; padding: 0; list-style: none; }
.qs-step { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-12); align-items: center; min-width: 0; }
.qs-step__text { min-width: 0; }
/* Step numbers and names in SVN-Gilroy (comment cmvp0tg8410ro): the DS's Gilroy subhead, bold 28px (24 on phones). */
.qs-step__num { display: block; font-family: var(--font-body); font-weight: 700; font-size: var(--subhead-size); line-height: var(--subhead-lh); color: var(--color-black); }
/* Step names at Nhãn 40 (Bergola 40/48) and their copy at Body lớn 20 (user 2026-10-14). */
.qs-step__title { margin-top: var(--space-2); 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); text-wrap: balance; }
.qs-step__text p { max-width: 34em; margin-top: var(--space-2); font-size: var(--h6-size); line-height: var(--h6-lh); color: var(--color-black); text-wrap: pretty; }

/* ============================================================
   Layer 2 · Entrances (motion welcome, script running).
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  /* The factory loses its curtain and settles, as the photos of remy.css do. */
  .js .qs-open__band[data-reveal]::after { transform: scaleY(1); transition: transform 1.2s var(--remy-ease) var(--remy-d, 0s); }
  .js .qs-open__band[data-reveal].is-in::after { transform: scaleY(0); }
  .js .qs-open__band[data-reveal] img { transform: scale(1.14); transition: transform 1.8s var(--remy-ease) var(--remy-d, 0s); }
  .js .qs-open__band[data-reveal].is-in img { transform: none; }
  /* The table lands a row at a time, so the gold zone grows downward. */
  .js .qs-compare__table tr[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--remy-ease) calc(var(--qs-r, 0) * .09s), transform .7s var(--remy-ease) calc(var(--qs-r, 0) * .09s); }
  .js .qs-compare__table tr[data-reveal].is-in { opacity: 1; transform: none; }
  .qs-compare__table tbody tr:nth-child(2) { --qs-r: 1; }
  .qs-compare__table tbody tr:nth-child(3) { --qs-r: 2; }
  .qs-compare__table tbody tr:nth-child(4) { --qs-r: 3; }
  .qs-compare__table tbody tr:nth-child(5) { --qs-r: 4; }
  .qs-compare__table tbody tr:nth-child(6) { --qs-r: 5; }
  .qs-compare__table tbody tr:nth-child(7) { --qs-r: 6; }
  .qs-compare__table tbody tr:nth-child(8) { --qs-r: 7; }
}

/* ============================================================
   Layer 3 · Scroll scenes, desktop only (same gate as remy.css).
   ============================================================ */
@media (min-width: 1025px) and (min-height: 680px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* The factory drifts inside its band as it crosses the screen. */
    .qs-open__band img { animation: remy-drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    /* The tier photos and the codes over them move at their own speeds. */
    .qs-tier .remy-shot img { animation: remy-drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .qs-tier__code { animation: remy-slide linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .qs-ends__shot img { animation: remy-drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }

    /* Production: each step's photo drifts inside its frame as it crosses the screen, as the other photos
       of the page do. The steps themselves move only with the page. */
    .qs-step .remy-shot img { animation: remy-drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
}

/* ---------- Production between 1025px and 1279px: the copy column narrows to about 300px, so the photo
   takes two parts of five and the names step down to 32px; a long name ("Preparation") still fits. ---------- */
@media (min-width: 1025px) and (max-width: 1279px) {
  .qs-step { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: var(--space-8); }
}
/* ---------- Below 1025px: the title on top, the steps under it across the full width ---------- */
@media (max-width: 1024px) {
  .qs-make__title { grid-column: 1 / -1; position: static; }
  .qs-make__list { grid-column: 1 / -1; row-gap: var(--space-12); margin-top: var(--space-12); }
  .qs-step { column-gap: var(--space-8); }
}

/* ---------- Below 900px: everything stacks ---------- */
@media (max-width: 899px) {
  .qs-tiers, .qs-compare, .qs-ends, .qs-make { padding-block: var(--space-24); }
  .qs-open__band { height: clamp(240px, 48svh, 480px); margin-top: var(--space-12); }
  /* The tiers: one row each, still from MS down to PL, the photo on the left and the code, name and words beside it. */
  .qs-pick { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: var(--space-12); margin-top: var(--space-12); }
  .qs-tier { grid-row: auto; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: var(--space-6); }
  .qs-tier .remy-shot { grid-row: 1 / span 2; align-self: start; }
  .qs-tier__id { margin-top: 0; }
  .qs-tier__head { gap: 0; }
  .qs-tier__code { font-size: var(--h1-size); line-height: var(--h1-lh); }
  .qs-tier__name { font-size: var(--h5-size); line-height: var(--h5-lh); }
  .qs-tier__id .qs-tier__tag { margin-bottom: 0; } /* the name's line is 32px here, as tall as the badge */
  .qs-th__code { font-size: var(--h5-size); line-height: var(--h5-lh); }
  .qs-compare__table { margin-top: var(--space-12); }
  .qs-ends__head { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-12); }
  .qs-ends__shot, .qs-ends__intro { grid-column: 1; }
  .qs-ends__shot { width: min(100%, 560px); }
  .qs-ends__scale { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(8, auto); row-gap: var(--space-12); margin-top: var(--space-16); }
  .qs-end:nth-child(3)::before { content: none; }
}
/* Phone: one standard per row: its photo across the top, the code beside the name, the facts in two columns. */
@media (max-width: 599px) {
  .qs-ends__scale { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: var(--space-12); }
  .qs-end { display: block; grid-row: auto; padding-inline: 0; padding-top: var(--space-12); border-left: 0; border-top: 1px solid var(--remy-line-c); }
  .qs-end:first-child { padding-top: 0; border-top: 0; }
  .qs-end + .qs-end::before { content: none; }
  .qs-end__head { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4); margin-top: var(--space-6); }
  .qs-end__code { font-size: var(--h2-size); line-height: var(--h2-lh); }
  .qs-end__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-6); }
  /* The two short counts share a row; the finish and the longer "Best for" each take the full width. */
  .qs-end__fact:nth-child(n + 3) { grid-column: 1 / -1; }
  .qs-tier__text, .qs-step__text p { font-size: var(--body-size); line-height: var(--body-lh); }
  .qs-tier__code { font-size: var(--h2-size); line-height: var(--h2-lh); }
  /* Production: each step is one column, its photo across the top and its copy under it. */
  .qs-step { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-6); }
}
/* Phone (user comments 2026-10-14 at 375px). */
@media (max-width: 767px) {
  /* The tiers title: its two lines run on as one and balance, so "to" no longer stands alone above the gold
     "Premium Luxury" (which cannot break); on a phone the lines show at once rather than rising. */
  .qs-tiers .remy-h2 { text-wrap: balance; }
  /* Beside its photo the copy column is about 190px, too narrow for "Luxury" and the badge side by side: the badge goes
     back under the name. */
  .qs-tier__id:has(.qs-tier__tag) { display: block; }
  .qs-tier__id .qs-tier__tag { margin: var(--space-3) 0 0; }
  .qs-tiers .remy-h2 :is(.remy-line, .remy-line__in) { display: inline; }
  /* The comparison stacks (.dtable--stack): one block per question, the three tiers as label / value lines,
     L and PL on gold. */
  .qs-compare__table.dtable--stack td { grid-template-columns: 48px minmax(0, 1fr); padding: var(--space-3); font-size: var(--body-size); line-height: var(--body-lh); }
  .qs-compare__table.dtable--stack td::before { font-family: var(--font-heading); font-weight: 400; font-size: var(--h5-size); line-height: var(--body-lh); }
  .qs-compare__table.dtable--stack .dtable__best + .dtable__best { border-left: 0; border-top: 1px solid color-mix(in srgb, var(--color-black) 24%, transparent); }
}