/* ===================================================================
   WHOLESALE — one story in the About page's language (comment
   cmvj5jhagonhs, user 2026-10-22: "các section với layout có tính kết nối
   với nhau như đang kể một câu chuyện … cách sắp xếp hình cũng cần có ý đồ
   tựa như tấm hình ở trang about us").
   The page is built from About's approved pieces (css/about-page.css,
   js/about.js, loaded before this file): gold-bar titles, the People
   cluster, the gold line and the figures band across the seams, Our Story
   rows, Vision cards, the Journey line, Come Meet Us. This file holds only
   what is particular to Wholesale. Tokens only; spacing on the 12-step
   scale; photo frames by registered role.
   =================================================================== */

/* The homepage blocks this page borrows (.hm-tier and others) ease on --hm-ease, which home.css sets on .page-home only:
   without it here their transition was dropped and the cards popped in with no motion (comment cmvkdpqbtf2z5). */
.wh { --wh-ease: cubic-bezier(.16, 1, .3, 1); --hm-ease: var(--wh-ease); }

/* No gold scroll-progress line under the header on this page (comment cmvkh6zdfjh39); other pages keep it. */
.site-header--min::after { content: none; }

/* Titles followed by an opening paragraph sit close to it; the paragraph then leads into the chapter. */
.wh .ab-title { margin-bottom: var(--space-12); }
.wh .ab-title:has(+ .wh-intro) { margin-bottom: var(--space-6); }
.wh-intro { max-width: 65ch; margin: 0 auto var(--space-16); text-align: center; text-wrap: pretty; }
/* Long titles in narrow columns: a bar under each line (About's Partners title does the same below 1900px). */
:is(.wh-trust, .wh-contact) .ab-title__t { display: inline; padding: 0; overflow: visible; }
:is(.wh-trust, .wh-contact) .ab-title__t::before { content: none; }
:is(.wh-trust, .wh-contact) .ab-title__in { display: inline; padding-inline: .34em; background: linear-gradient(var(--color-primary), var(--color-primary)) 0 100% / 100% .45em no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---------- Banner: the factory film across the screen, nothing over it (comment cmvjan4rrn9ym) ---------- */
/* As tall as the About banner, max(35.19vw, 240px) (comment cmvoybjmh3e8t; it used to be the whole film at 16:9, up to
   the screen's height). The player is cut to the box like a cover photo: as wide as the box or as the box's height × 16/9. */
.wh-banner { position: relative; height: max(35.19vw, 240px); overflow: hidden; background: var(--surface-dark); container-type: size; }
.wh-banner__media { position: absolute; inset: 0; }
.wh-banner__poster, .wh-banner__player { position: absolute; top: 50%; left: 50%; width: max(100cqw, 100cqh * 16 / 9); height: max(100cqh, 100cqw * 9 / 16); border: 0; transform: translate(-50%, -50%); }
.wh-banner__poster { object-fit: cover; }
.wh-banner__player { pointer-events: none; opacity: 0; transition: opacity 1s ease; }
.wh-banner__player.is-playing { opacity: 1; }
/* The header lies on the film (comment cmvjewar4rrc1, as on the Factory page): see-through over a black wash that fades
   down past it, white menu and logo; solid white once scrolled, under the pointer or holding focus (hub.css + main.js).
   The wash is the banner's own top edge: the header's ::before and ::after are its gold bar and its scroll line. */
@media (min-width: 1025px) {
  [data-header-over] .wh-banner { margin-top: calc(-1 * var(--header-over-h)); height: calc(max(35.19vw, 240px) + var(--header-over-h)); }
  [data-header-over] .wh-banner::before { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 2; height: calc(var(--header-over-h) + var(--space-24)); background: linear-gradient(color-mix(in srgb, var(--color-black) 85%, transparent), color-mix(in srgb, var(--color-black) 55%, transparent) 43%, transparent); pointer-events: none; }
  [data-header-over]:has(.wh-banner) .site-header:not(.is-solid, :hover, :focus-within) :is(.menutab, .lang__current) { color: var(--color-white); }
  [data-header-over]:has(.wh-banner) .site-header:not(.is-solid, :hover, :focus-within) :is(.lang__globe, .lang__chev, .icon-btn img) { filter: brightness(0) invert(1); }
  [data-header-over]:has(.wh-banner) .site-header:not(.is-solid, :hover, :focus-within) .navbar__logo img { content: url("../assets/images/footer-logo.png"); }
}

/* ---------- 1. Who we work with: the partners as a heart, then the five kinds of partner ---------- */
/* On white (comment cmvkf7chst0ww, was cream); the gold promise band that used to hang into it is gone (comment cmvjewncako4y). */
.wh-who { position: relative; z-index: 3; display: flow-root; padding: var(--space-24) 0; --ab-curtain: var(--color-white); background: var(--color-white); }
/* The user's sketch (comment cmvj7dzx1qp13): eighteen frames in the shape of a heart, measured off the sketch as shares
   of its 6:5 frame. Each photo sits at its own --x / --y / --w / --h; the frames carry People's thin gold edge and the
   centre carries People's caption strip, which here is the invitation. The heart keeps its shape at every width. */
.wh-heart { position: relative; width: min(100%, 1240px); margin-inline: auto; aspect-ratio: var(--ty-le-cau_chuyen); }
.wh-heart > figure { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); margin: 0; overflow: hidden; background: var(--surface-beige); }
.wh-heart img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.wh-heart__tile { border: 2px solid var(--primary-300); }
.wh-heart__hub { z-index: 1; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.wh-heart__hub img { min-height: 0; }
.wh-heart__cap { padding: var(--space-2) var(--space-4); background: var(--primary-300); font-family: var(--font-heading); font-size: var(--h4-size); line-height: var(--h4-lh); text-transform: uppercase; text-align: center; color: var(--color-black); }
.wh-heart__go { display: block; color: inherit; text-decoration: none; transition: color .2s ease; }
.wh-heart__go:hover { color: var(--primary-700); }
.wh-heart__go:focus-visible { outline: 2px solid var(--color-black); outline-offset: -4px; }
/* The five kinds, three over two, centred, each under its own large mark (comment cmvj7hf4czb4r). */
.wh-kinds { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-12) var(--space-8); margin: var(--space-16) 0 0; padding: 0; list-style: none; }
.wh-kind { display: flex; flex-direction: column; align-items: center; grid-column: span 2; text-align: center; }
.wh-kind:nth-child(4) { grid-column: 2 / span 2; }
.wh-kind__icon { flex: none; width: var(--space-12); height: var(--space-12); margin-bottom: var(--space-4); color: var(--color-primary); }
.wh-kind__icon :is(g, path, circle) { stroke-width: 1.5; }
.wh-kind__title { margin: 0 0 var(--space-3); font-family: var(--font-heading); font-weight: 400; font-size: var(--h5-size); line-height: var(--h5-lh); text-transform: uppercase; text-wrap: balance; }
.wh-kind p { margin: 0; font-size: var(--body-size); line-height: var(--body-lh); text-wrap: pretty; }

/* ---------- 2a. Struggles, a chapter of its own: four questions around the world map (comment cmvjb50rwip0j) ---------- */
/* The map in the middle column; two questions each side, the upper ones high, the lower ones low, each with a hand-drawn
   arrow (#wh-arrow, the user's sample traced as one stroke) turned to point at the map. */
.wh-qs { padding: var(--space-24) 0 0; } /* no foot padding: the CEO stands on the section's edge (comment cmvjexq9tut2z) */
.wh-qs__stage { position: relative; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); grid-template-rows: auto auto; column-gap: var(--space-4); row-gap: var(--space-24); align-items: center; }
.wh-qs__map { grid-column: 2; grid-row: 1 / 3; display: block; width: 100%; height: auto; }
/* The picture at the centre, standing on the foot of the section in a square frame (comments cmvjexq9tut2z, cmvkc9dibyqbz):
   since comments cmvkdkjub9clr / cmvkexuuybxfm a model holding up two bundles of hair (the user's image, its backdrop
   cut again with macOS Vision), so the product sits among the four questions. */
.wh-qs__ceo { justify-self: center; align-self: end; max-width: 560px; aspect-ratio: var(--ty-le-khoi_vuong); object-fit: contain; object-position: 50% 100%; transform-origin: 50% 100%; }
.wh-q--bl, .wh-q--br { margin-bottom: var(--space-16); }
.wh-qs__list { display: contents; margin: 0; padding: 0; list-style: none; }
/* Each question sits beside its arrow; the arrow reaches over the map's edge. */
.wh-q { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.wh-q--tl { grid-column: 1; grid-row: 1; justify-content: flex-end; align-self: start; text-align: right; }
.wh-q--bl { grid-column: 1; grid-row: 2; justify-content: flex-end; align-self: end; text-align: right; }
.wh-q--tr { grid-column: 3; grid-row: 1; flex-direction: row-reverse; justify-content: flex-end; align-self: start; } /* the arrow back on the CEO's side of the words (comment cmvkc9was9by1) */
.wh-q--br { grid-column: 3; grid-row: 2; flex-direction: row-reverse; justify-content: flex-end; align-self: end; }
.wh-q__text { margin: 0; max-width: 16ch; font-family: var(--font-body); /* the customers' own words, in the body face (comment cmvjc77ykniol), its real Bold (cmvkfekvw5wbi) */ font-weight: 700; font-size: var(--h5-size); line-height: var(--h5-lh); text-transform: uppercase; text-wrap: balance; }
/* Each question under its answer's mark (comment cmvjeycung2ec), on the words' side. */
.wh-q__icon { display: block; width: var(--space-12); height: var(--space-12); margin-bottom: var(--space-2); color: var(--color-primary); } /* the answers' size (comment cmvkca59na8jz) */
.wh-q__icon :is(g, path, circle) { stroke-width: 1.5; }
:is(.wh-q--tl, .wh-q--bl) .wh-q__icon { margin-left: auto; }
.wh-q__arrow { flex: none; width: calc(var(--space-16) * 2); height: auto; aspect-ratio: 3 / 2; fill: none; stroke: var(--color-primary); stroke-width: 22; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
/* The drawn arrow runs left to right and ends pointing down, mirrored per corner. Every arrow sits between its words and
   the picture with its head on its own question (comments cmvkc9ncwvker, cmvkc9rf8r21t, cmvkdmk2qkex5, cmvkdmx8knahv),
   level with the mark and words (cmvkdn2ytwddg, cmvkdn6e1hm37). The stroke sits 30 of 533 units above the middle of its
   box, so the upright ones drop 4px and the upturned ones rise 4px to centre the line itself, not its box. */
.wh-q--tl .wh-q__arrow { margin-right: calc(var(--space-16) * -1); translate: 0 var(--space-1); transform: scaleX(-1); }
.wh-q--bl .wh-q__arrow { margin-right: calc(var(--space-16) * -1); translate: 0 calc(var(--space-1) * -1); transform: scale(-1, -1); }
.wh-q--tr .wh-q__arrow { margin-left: calc(var(--space-16) * -1); translate: 0 var(--space-1); }
.wh-q--br .wh-q__arrow { margin-left: calc(var(--space-16) * -1); translate: 0 calc(var(--space-1) * -1); transform: scaleY(-1); }

/* ---------- 2b. The answers: About's Our Story rows set off-beat, each under its mark (comment cmvjb8bmypqr7) ---------- */
.wh-struggle { padding-block: var(--space-24); --ab-curtain: var(--surface-cream); background: var(--surface-cream); } /* cream (comment cmvjf04jayci5) */
.wh-answer + .wh-answer { margin-top: var(--space-24); }
.wh-answer__icon { display: block; width: var(--space-12); height: var(--space-12); margin-bottom: var(--space-4); color: var(--color-primary); }
.wh-answer__icon :is(g, path, circle) { stroke-width: 1.5; }
.wh-answer__title { margin: 0; color: inherit; font-family: var(--font-heading); font-weight: 400; font-size: var(--h1-size); line-height: var(--h1-lh); text-transform: uppercase; text-wrap: balance; } /* 56 (comment cmvjez39mo7c4), no gold shape (cmvjez95vhpa7) */
/* Raised a step (comment cmvkdo88bfzq9), then brought back a little for every list in the section (comment cmvkhxlx8b78p):
   20px, 16px from 1024 down. The gold dash sits on the middle of the first line. */
.wh-answer__list { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-6) 0 0; padding: 0; list-style: none; }
.wh-answer__list li { position: relative; padding-left: var(--space-8); font-size: var(--h6-size); line-height: var(--h6-lh); text-wrap: pretty; }
.wh-answer__list li::before { content: ""; position: absolute; left: 0; top: calc(.5lh - 1px); width: var(--space-4); height: 2px; background: var(--color-primary); }
/* Two photos: the scene, and a close look stepping out over its lower corner (towards the words) in People's thin gold frame. */
.wh-pair { position: relative; margin: 0; padding: 0 0 var(--space-16) var(--space-16); }
.wh-pair--flip { padding: 0 var(--space-16) var(--space-16) 0; }
.wh-pair__main { aspect-ratio: var(--ty-le-cau_chuyen); }
.wh-pair__inset { position: absolute; left: 0; bottom: 0; z-index: 1; width: 38%; aspect-ratio: var(--ty-le-khoi_vuong); border: 2px solid var(--primary-300); }
.wh-pair--flip .wh-pair__inset { left: auto; right: 0; }
/* The figures close the dark chapter on the map of where the hair goes (comment cmvjbba28l8ok): About's band, in gold so it
   reads on the dark, laid over the lower 40% of the map so Vietnam, at its middle, stays in view. The overlap is a share
   of the width (the map's height is too, at 7:4), so it holds at every size. */
.wh-reach { display: grid; margin-top: calc(var(--space-16) * 2); }
/* Map and figures share one cell: the block is as tall as the map, the figures sit low on it (no band to hold them). */
.wh-reach > * { grid-area: 1 / 1; }
.wh-reach__map { margin: 0; }
.wh-reach__map img { display: block; width: 100%; height: auto; aspect-ratio: var(--ty-le-ban_do); object-fit: contain; }
/* No band (comment cmvjf0h81e3ku): the figures sit straight on the map, a gold line drops into them from above. */
.ab-stats.wh-stats { align-self: end; margin: 0 var(--space-24) 6%; padding: 0; background: none; color: var(--color-black); }
.wh-stats::before { content: ""; position: absolute; left: 50%; bottom: calc(100% + var(--space-6)); width: 2px; height: var(--space-24); background: var(--color-primary); transform-origin: 50% 0; }
.wh-stats .ab-stat + .ab-stat::before { background: var(--color-primary); }
.wh-stats .ab-stat__label { font-family: var(--font-body); } /* the figures in Bergola, their labels in the body face (comment cmvkdp6wl33q5) */
/* From 1280 the figures stand beside the map, as About's Luxshine Today has its column (comment cmvkcblymxcf0): one figure a
   row, number then label, gold rules between, so the column is about as tall as the map. Narrower, the figures stay over it. */
@media (min-width: 1280px) {
  .wh-reach { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-16); align-items: center; }
  .wh-reach > * { grid-area: auto; }
  .ab-stats.wh-stats { display: grid; grid-template-columns: auto minmax(0, 1fr); align-self: center; margin: 0; }
  .wh-stats::before { content: none; }
  .wh-stats .ab-stat { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; column-gap: var(--space-6); align-items: center; padding: var(--space-4) 0; text-align: left; }
  .wh-stats .ab-stat + .ab-stat::before { top: 0; right: 0; bottom: auto; left: 0; width: auto; height: 1px; }
  .wh-stats .ab-stat__label { max-width: 14ch; margin-top: 0; }
}

/* ---------- 3. Why: About's Come Meet Us layout (comment cmvj8s4c7f17h) ---------- */
/* About's photos and grid as they are; on the right the opening words, then the four reasons, each a Bergola name
   over its sentence, thin rules between them. */
.wh-why { padding-top: var(--space-24); }
.wh-why__list { margin: var(--space-12) 0 0; padding: 0; list-style: none; }
/* Each reason after its gold mark (comment cmvjbfb3t5pga), the mark in a column of its own so names and sentences share one edge. */
.wh-why__item { display: grid; grid-template-columns: var(--space-10) minmax(0, 1fr); column-gap: var(--space-6); padding-block: var(--space-6); }
.wh-why__item > :not(.wh-why__icon) { grid-column: 2; }
.wh-why__icon { grid-column: 1; grid-row: 1 / span 2; width: var(--space-10); height: var(--space-10); color: var(--color-primary); }
.wh-why__icon :is(g, path, circle) { stroke-width: 1.5; }
.wh-why__item + .wh-why__item { border-top: 1px solid var(--border-subtle); }
.wh-why__item:first-child { padding-top: 0; }
.wh-why__name { margin: 0 0 var(--space-2); font-family: var(--font-heading); font-weight: 400; font-size: var(--h4-size); line-height: var(--h4-lh); text-transform: uppercase; }
.wh-why__item p { margin: 0; font-size: var(--h6-size); line-height: var(--h6-lh); text-wrap: pretty; }
/* The photos keep their frame: stretched to the words they cropped badly (comments cmvkho5dxp1hq, cmvkhoxfbijfi). Where the
   column outgrows them the words come a size down instead (comment cmvkhoe77ffyi); at 1800 and up they already match. */
@media (max-width: 1799px) {
  .wh-why .ab-copy { font-size: var(--h6-size); }
  .wh-why__list { margin-top: var(--space-8); }
  .wh-why__item { grid-template-columns: var(--space-8) minmax(0, 1fr); column-gap: var(--space-4); padding-block: var(--space-4); }
  .wh-why__icon { width: var(--space-8); height: var(--space-8); }
  .wh-why__name { margin-bottom: var(--space-1); font-size: var(--h5-size); line-height: var(--h5-lh); }
  .wh-why__item p { font-size: var(--body-size); line-height: var(--body-lh); }
}
@media (max-width: 1439px) {
  .wh-why .ab-copy { font-size: var(--body-size); }
}

/* ---------- 4. The power of quality: centred, on About's white silk (.ab-silk, comment cmvkf3oa8iht5); the same hair before and
   after (comments cmvj8xumd2fcx, cmvja1mkn98n6) ---------- */
.wh-power { padding-block: var(--space-24); }
/* Before under, after over it, clipped from the line to the right (--pos, set by js/wholesale.js). The line moves by
   transform; the clip is a paint change. A native range input lies over the frame, invisible, and does the dragging. */
.wh-compare { position: relative; width: min(100%, 640px); margin: 0 auto; aspect-ratio: var(--ty-le-editorial); overflow: hidden; background: var(--surface-beige); touch-action: pan-y; }
.wh-compare__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.wh-compare__after { clip-path: inset(0 0 0 var(--pos)); }
.wh-compare__label { position: absolute; top: var(--space-4); z-index: 2; padding: var(--space-1) var(--space-3); background: color-mix(in srgb, var(--color-white) 88%, transparent); font-size: var(--body-size); line-height: var(--body-lh); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--color-black); pointer-events: none; }
.wh-compare__label--before { left: var(--space-4); }
.wh-compare__label--after { right: var(--space-4); }
.wh-compare__handle { position: absolute; inset: 0; z-index: 2; transform: translateX(var(--pos)); pointer-events: none; }
.wh-compare__handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--color-white); }
.wh-compare__knob { position: absolute; top: 50%; left: calc(var(--space-6) * -1); display: grid; place-items: center; width: var(--space-12); height: var(--space-12); margin-top: calc(var(--space-6) * -1); border: 2px solid var(--color-white); border-radius: var(--radius-round); background: var(--color-primary); color: var(--color-black); box-shadow: var(--shadow-md); }
.wh-compare__knob svg { width: var(--space-6); height: var(--space-6); }
.wh-compare__range { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.wh-compare:has(.wh-compare__range:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 4px; }

/* ---------- 5. What we offer: a chapter of its own, the homepage's tier cards on dark silk (comment cmvja4gg2t7r2) ---------- */
/* .hm-sub, .hm-tiers, .hm-tier come from the homepage stylesheet as they are; here only what differs: three by two
   (comment cmvjam31es9kp; two a row from 1279px down, one on phones), each card a link, the names a step smaller than
   the tier codes because they are words. */
.wh-offer { padding-block: var(--space-24); }
.wh-offer { --ab-curtain: var(--surface-cream); background: var(--surface-cream); } /* cream (comment cmvjf2blz8v1r) */
.wh-offer .hm-tier { background: var(--color-white); }
.wh-lines { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); margin: var(--space-12) 0 0; padding: 0; list-style: none; }
.wh-lines > li { display: flex; }
.wh-range { width: 100%; text-decoration: none; }
/* The cards of a row come in left to right, 120ms apart (--d, read by the homepage reveal), whatever the column count. */
.wh-lines > li:nth-child(3n + 2) > .wh-range { --d: 1; }
.wh-lines > li:nth-child(3n) > .wh-range { --d: 2; }
/* The words start at the card's top padding, level with its left one: the homepage's margin here makes room for a tier tag
   these cards do not have (comment cmvkdq5bgef9f). */
.wh-range .hm-tier__head { margin-top: 0; }
.wh-range .hm-tier__code { font-size: var(--h4-size); line-height: var(--h4-lh); text-wrap: balance; }
.wh-range .hm-tier__desc { font-size: var(--body-size); line-height: var(--body-lh); }
.wh-range .hm-tier__name { transition: color .2s ease; }
.wh-range:hover .hm-tier__name { color: var(--primary-600); }
.wh-range:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; }
.wh-range .hm-tier__media { background: var(--color-white); }

/* ---------- 6. Real messages, real trust: the partners' own chats (comment cmvjacpxtoh63) ---------- */
/* Eight WhatsApp screenshots from the old wholesale page, four columns, the even ones set lower so the wall reads like a
   running conversation. Each is a button that opens it larger (js/wholesale.js). */
.wh-trust { padding-block: var(--space-24); background: var(--color-white); } /* white (comment cmvjf2kucqpmj) */
/* The wall itself (.wh-chats, .wh-chat, the .wh-zoom dialog) is shared with the OEM page: css/sections.css. */

/* ---------- 7. Three steps on About's Journey line ---------- */
.wh-years .ab-year__shot { aspect-ratio: var(--ty-le-buoc_dat_hang); }
.wh-years .ab-year__body { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-6) var(--space-6) var(--space-8); }
.wh-years .ab-year__title { font-size: var(--h5-size); line-height: var(--h5-lh); }
.wh-years .ab-year__text { margin: 0; font-size: var(--body-size); line-height: var(--body-lh); }
/* Each step's button in About's format (comment cmvkcgnk1g80o): the DS dark button, which shares the About submit's colours
   and gold hover, at that button's size and across the card. */
.wh-years .btn { align-self: stretch; margin-top: auto; padding: var(--space-3); font-size: var(--h5-size); line-height: var(--h5-lh); }
.wh-years .btn:focus-visible { background: var(--color-primary); color: var(--color-black); outline-color: var(--color-black); }
.wh-years .btn:active { transform: scale(.98); }
/* The label steps down a size as its card narrows (24 → 20, About's phone size → 16), so the longest one, "View Wholesale
   Pricing", stays on one line and the three buttons keep one height. The widths are that label's at each size plus padding. */
.wh-years .ab-year__body { container-type: inline-size; }
@container (width < 280px) { .wh-years .btn { font-size: var(--h6-size); line-height: var(--h6-lh); } }
@container (width < 238px) { .wh-years .btn { font-size: var(--body-size); line-height: var(--body-lh); } }
@container (width < 195px) { .wh-years .btn { padding-inline: var(--space-2); } }
@media (min-width: 1025px) {
  .wh-years { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wh-years::before { left: calc((100% - 2 * var(--ab-gap)) / 6); right: calc((100% - 2 * var(--ab-gap)) / 6); }
}

/* ---------- 8. Questions: the site's list (.faq-item) on beige ---------- */
.wh-faq { padding-block: var(--space-24); background: var(--surface-beige); }
.wh-faq .faq__inner { gap: 0; }
.wh-faq .faq__list { max-width: 880px; }
.wh-faq__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); margin-top: var(--space-12); }

/* ---------- 9. Contact: About's Come Meet Us with the three promises and the quote form ---------- */
.wh-usps { display: flex; flex-direction: column; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.wh-usps h3 { margin: 0; font-family: var(--font-heading); font-weight: 400; font-size: var(--h4-size); line-height: var(--h4-lh); text-transform: uppercase; } /* one step up the DS scale (comment cmvkchd5uo8ps) */
.wh-usps p { margin: var(--space-1) 0 0; font-size: var(--body-size); line-height: var(--body-lh); }
/* The promises and the form stay in their column; the photos beside them stick under the header and travel with the words,
   stopping where the column ends (comment cmvkke1tffuah, which rolled back the form spread across the frame). */
@media (min-width: 1025px) {
  .wh-contact .ab-meet__media { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
}
/* Choice fields drawn like About's underlined fields; the browser's own arrow is hidden and the site's chevron sits 8px from the edge. */
.wh-field--select select { width: 100%; padding: var(--space-2) var(--space-8) var(--space-2) 0; border: 0; border-radius: 0; background: transparent; font: inherit; font-size: var(--h6-size); line-height: var(--h6-lh); color: var(--color-black); -webkit-appearance: none; appearance: none; cursor: pointer; }
.wh-field--select select:focus { outline: none; }
.wh-field--select select:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; }
.wh-field__chev { position: absolute; right: var(--space-2); bottom: var(--space-3); width: 16px; height: 16px; pointer-events: none; }
.wh-form .ab-field ::placeholder { color: var(--grey-600); }

/* ============================================================
   Motion, on top of About's (titles, curtains, the cluster, the gold
   line, the figures, the Journey line, the form all come from
   css/about-page.css). Transform and opacity only; off with reduced motion.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* The long titles in narrow columns rise as a whole. */
  .js :is(.wh-trust, .wh-contact) .ab-title[data-reveal] { opacity: 0; transform: translateY(var(--space-6)); transition: opacity .8s var(--wh-ease), transform .9s var(--wh-ease); }
  .js :is(.wh-trust, .wh-contact) .ab-title[data-reveal].is-in { opacity: 1; transform: none; }
  .js :is(.wh-trust, .wh-contact) .ab-title[data-reveal] .ab-title__in { transform: none; }

  /* The heart: the couple at the centre lands first, the photos open out from behind it nearest first, then the
     whole heart beats once. */
  .js .wh-heart[data-reveal] .wh-heart__hub { opacity: 0; scale: .86; transition: opacity .9s var(--wh-ease), scale 1.4s var(--wh-ease); }
  .js .wh-heart[data-reveal] .wh-heart__tile { opacity: 0; translate: calc(var(--fx, 0) * -60%) calc(var(--fy, 0) * -60%); scale: .55; transition: opacity .7s var(--wh-ease) calc(.25s + var(--i, 0) * .06s), translate 1.3s var(--wh-ease) calc(.25s + var(--i, 0) * .06s), scale 1.3s var(--wh-ease) calc(.25s + var(--i, 0) * .06s); }
  .js .wh-heart[data-reveal].is-in :is(.wh-heart__hub, .wh-heart__tile) { opacity: 1; translate: none; scale: none; }
  .js .wh-heart[data-reveal] .wh-heart__cap { transform: translateY(100%); transition: transform .9s var(--wh-ease) .5s; }
  .js .wh-heart[data-reveal].is-in .wh-heart__cap { transform: none; }
  .js .wh-heart[data-reveal].is-in { animation: wh-beat 1.1s var(--wh-ease) 1.9s both; }
  /* Each kind's mark turns in as its block comes up. */
  .js .wh-kind[data-reveal] .wh-kind__icon { transform: scale(.4) rotate(-90deg); transition: transform 1.1s var(--wh-ease) calc(var(--d, 0s) + .2s); }
  .js .wh-kind[data-reveal].is-in .wh-kind__icon { transform: none; }

  /* Questions around the map: the map comes up, each question slides in from its own side, then its arrow draws itself. */
  .js .wh-qs__stage[data-reveal] .wh-qs__map { opacity: 0; scale: .92; transition: opacity 1s var(--wh-ease), scale 1.4s var(--wh-ease); }
  .js .wh-qs__stage[data-reveal] .wh-q__text { opacity: 0; transition: opacity .8s var(--wh-ease) calc(.35s + var(--i, 0) * .15s), translate 1s var(--wh-ease) calc(.35s + var(--i, 0) * .15s); }
  .js .wh-qs__stage[data-reveal] :is(.wh-q--tl, .wh-q--bl) .wh-q__text { translate: calc(var(--space-12) * -1) 0; }
  .js .wh-qs__stage[data-reveal] :is(.wh-q--tr, .wh-q--br) .wh-q__text { translate: var(--space-12) 0; }
  .js .wh-qs__stage[data-reveal] .wh-q__arrow use { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s cubic-bezier(.65, 0, .35, 1) calc(.7s + var(--i, 0) * .15s); }
  .js .wh-qs__stage[data-reveal].is-in .wh-qs__map, .js .wh-qs__stage[data-reveal].is-in .wh-q__text { opacity: 1; scale: none; translate: none; }
  .js .wh-qs__stage[data-reveal].is-in .wh-q__arrow use { stroke-dashoffset: 0; }

  /* Each answer row: the mark turns in, the title and the points come up, the photo uncovers, the close look steps out. */
  .js .wh-answer[data-reveal] .wh-answer__icon { transform: scale(.4) rotate(-90deg); opacity: 0; transition: transform 1.1s var(--wh-ease) .1s, opacity .6s var(--wh-ease) .1s; }
  .js .wh-answer[data-reveal] :is(.wh-answer__title, .wh-answer__list) { opacity: 0; transform: translateY(var(--space-8)); transition: opacity .8s var(--wh-ease) .3s, transform .9s var(--wh-ease) .3s; }
  .js .wh-answer[data-reveal] .wh-answer__list { transition-delay: .45s; }
  .js .wh-answer[data-reveal] .wh-pair__inset { opacity: 0; transform: translate(var(--space-12), calc(var(--space-12) * -1)) scale(.9); transition: opacity .8s var(--wh-ease) .6s, transform 1.2s var(--wh-ease) .6s; }
  .js .wh-answer[data-reveal] .wh-pair--flip .wh-pair__inset { transform: translate(calc(var(--space-12) * -1), calc(var(--space-12) * -1)) scale(.9); }
  .js .wh-answer[data-reveal].is-in :is(.wh-answer__icon, .wh-answer__title, .wh-answer__list, .wh-pair__inset) { opacity: 1; transform: none; }
  /* The gold line draws down into the figures before they open out and count up (js/about.js). */
  .js .wh-stats[data-reveal]::before { transform: scaleY(0); transition: transform 1s cubic-bezier(.65, 0, .35, 1); }
  .js .wh-stats[data-reveal].is-in::before { transform: none; }
  /* Beside the map the rules between the figures run across, so they draw from the left. */
  @media (min-width: 1280px) { .js .wh-stats[data-reveal] .ab-stat::before { transform: scaleX(0); transform-origin: 0 50%; } }
  /* Each question's mark turns in with its words. */
  .js .wh-qs__stage[data-reveal] .wh-q__icon { transform: scale(.4) rotate(-90deg); opacity: 0; transition: transform 1s var(--wh-ease) calc(.3s + var(--i, 0) * .15s), opacity .6s var(--wh-ease) calc(.3s + var(--i, 0) * .15s); }
  .js .wh-qs__stage[data-reveal].is-in .wh-q__icon { transform: none; opacity: 1; }
  /* The map fades up and settles from slightly large; the band then opens over it (About's band motion). */
  .js .wh-reach__map[data-reveal] { opacity: 0; transform: scale(1.06); transition: opacity 1.2s var(--wh-ease), transform 1.8s var(--wh-ease); }
  .js .wh-reach__map[data-reveal].is-in { opacity: 1; transform: none; }
  /* Each reason's mark turns in with its line. */
  .js .wh-why__item[data-reveal] .wh-why__icon { transform: scale(.4) rotate(-90deg); transition: transform 1.1s var(--wh-ease) calc(var(--d, 0s) + .15s); }
  .js .wh-why__item[data-reveal].is-in .wh-why__icon { transform: none; }




}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .wh-pair .ab-shot img { transition: scale 1.8s var(--wh-ease), transform 1s var(--wh-ease); will-change: transform; }
  .wh-pair .ab-shot:hover img { transform: scale(1.06); }
  .wh-heart__tile:hover { z-index: 4; }
  .wh-heart__tile img { transition: transform .8s var(--wh-ease); }
  .wh-heart__tile:hover img { transform: scale(1.08); }
}
/* Scroll scenes (desktop, scroll-linked, no listeners): the banner drifts down behind the page; the three layers
   part a little as they cross the screen; two of the posts float at their own pace. */
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
  }
}
@keyframes wh-beat { 0%, 100% { transform: none; } 30% { transform: scale(1.025); } 55% { transform: scale(.995); } 75% { transform: scale(1.012); } }

/* ============================================================
   Narrower screens (About's own rules carry its pieces down)
   ============================================================ */
/* Small desktops keep the four corners but the side columns are narrow: the bold questions a size down so they do not run to
   six lines, and shorter arrows reaching less far, clear of the bundles the model holds out (comment cmvkfekvw5wbi). */
@media (min-width: 1025px) and (max-width: 1279px) {
  .wh-q__text { font-size: var(--h6-size); line-height: var(--h6-lh); }
  .wh-q__arrow { width: var(--space-24); }
  :is(.wh-q--tl, .wh-q--bl) .wh-q__arrow { margin-right: calc(var(--space-8) * -1); }
  :is(.wh-q--tr, .wh-q--br) .wh-q__arrow { margin-left: calc(var(--space-8) * -1); }
}
/* Three cards a row only while a card keeps the width it has at 1920; below that two (comment cmvkh5xbolaxk: at 1280 three
   left the words a 156px column), the words and photo halving each card as at 1920 instead of the homepage's fixed 240px. */
@media (max-width: 1799px) {
  .wh-lines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wh-lines > li:nth-child(n) > .wh-range { --d: 0; }
  .wh-lines > li:nth-child(2n) > .wh-range { --d: 1; }
}
@media (min-width: 1025px) {
  .wh-lines .wh-range { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1279px) {
  .wh-answer__title { font-size: var(--h2-size); line-height: var(--h2-lh); }
  .wh-heart__cap { font-size: var(--h5-size); line-height: var(--h5-lh); }
  /* Too narrow for the column beside the map: the figures overlap only its foot, as on tablets (the two-row band set at
     6% from the bottom ran into the map's labels at 1194). */
  .wh-reach { display: block; }
  .ab-stats.wh-stats { margin: -12% var(--space-8) 0; }
}
@media (max-width: 1024px) {
  .wh-intro { margin-bottom: var(--space-12); }
  .wh-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); }
  .wh-kind, .wh-kind:nth-child(4) { grid-column: auto; }
  .wh-kind:last-child { grid-column: 1 / -1; }
  .wh-qs { padding-top: var(--space-16); }
  .wh-struggle { padding-block: var(--space-16); }
  .wh-who { padding-bottom: var(--space-16); }
  /* Tablets and phones: the four questions two by two, each arrow pointing down, the CEO under them on the section's foot. */
  .wh-qs__stage { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; gap: var(--space-8) var(--space-6); }
  .wh-qs__map { grid-column: 1 / -1; grid-row: auto; order: 9; }
  .wh-q, .wh-q--tl, .wh-q--bl, .wh-q--tr, .wh-q--br { grid-row: auto; grid-column: auto; align-self: start; align-items: center; justify-content: flex-start; flex-direction: column; margin-bottom: 0; text-align: center; }
  .wh-q__icon, :is(.wh-q--tl, .wh-q--bl) .wh-q__icon { margin-inline: auto; }
  .wh-q__text { max-width: none; }
  .wh-q__arrow, .wh-q--tl .wh-q__arrow, .wh-q--bl .wh-q__arrow, .wh-q--tr .wh-q__arrow, .wh-q--br .wh-q__arrow { width: var(--space-24); margin: 0; translate: none; transform: rotate(60deg); }
  .wh-answer + .wh-answer { margin-top: var(--space-16); }
  .wh-reach { display: block; margin-top: var(--space-16); }
  .ab-stats.wh-stats { margin: -12% var(--space-8) 0; }
  .wh-why { padding-top: var(--space-16); }
  .wh-offer, .wh-trust, .wh-faq, .wh-power { padding-block: var(--space-16); }
  .wh-lines { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .wh-lines > li:nth-child(n) > .wh-range { --d: 0; }
  .wh-years .ab-year__body { align-items: flex-start; }
}
/* Tablets keep the answers' words and photos side by side, still trading sides; stacked, each pair ran a full screen tall. */
@media (min-width: 768px) and (max-width: 1024px) {
  .wh-answer.ab-story__row, .wh-answer.ab-story__row--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-8); }
  .wh-answer.ab-story__row--flip .ab-story__text { grid-column: 2; grid-row: 1; }
  .wh-answer__title { font-size: var(--h3-size); line-height: var(--h3-lh); }
  .wh-answer__list li { font-size: var(--body-size); line-height: var(--body-lh); }
  .wh-answer__icon { width: var(--space-8); height: var(--space-8); }
  .wh-pair { padding: 0 0 var(--space-12) var(--space-12); }
  .wh-pair--flip { padding: 0 var(--space-12) var(--space-12) 0; }
}
@media (max-width: 767px) {
  .wh-intro { margin-bottom: var(--space-8); text-align: left; }
  .wh-who { padding-top: var(--space-12); }
  .wh-heart__tile { border-width: 1px; }
  .wh-heart__cap { padding: var(--space-1) var(--space-2); font-size: var(--body-size); line-height: var(--body-lh); }
  .wh-kind__icon { width: var(--space-8); height: var(--space-8); margin-bottom: var(--space-3); }
  .wh-kinds { grid-template-columns: minmax(0, 1fr); margin-top: var(--space-12); }
  .wh-qs { padding-top: var(--space-12); }
  .wh-struggle { padding-block: var(--space-12); }
  .wh-who { padding-bottom: var(--space-12); }
  .wh-qs__stage { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .wh-q__text { font-size: var(--h6-size); line-height: var(--h6-lh); }
  .wh-q__icon { width: var(--space-8); height: var(--space-8); }
  .wh-usps h3 { font-size: var(--h5-size); line-height: var(--h5-lh); }
  .wh-q__arrow, .wh-q--tl .wh-q__arrow, .wh-q--bl .wh-q__arrow, .wh-q--tr .wh-q__arrow, .wh-q--br .wh-q__arrow { width: var(--space-16); }
  .wh-answer + .wh-answer { margin-top: var(--space-12); }
  .wh-answer__title { font-size: var(--h4-size); line-height: var(--h4-lh); }
  .wh-answer__list li { font-size: var(--body-size); line-height: var(--body-lh); }
  .wh-answer__icon { width: var(--space-8); height: var(--space-8); }
  .wh-pair { padding: 0 0 var(--space-12) var(--space-12); }
  .wh-pair--flip { padding: 0 var(--space-12) var(--space-12) 0; }
  .wh-offer, .wh-trust, .wh-faq, .wh-power { padding-block: var(--space-12); }
  .wh-compare__label { top: var(--space-3); padding: 0 var(--space-2); font-size: var(--caption-size); line-height: var(--caption-lh); }
  .wh-compare__label--before { left: var(--space-3); }
  .wh-compare__label--after { right: var(--space-3); }
  .wh-why__list { margin-top: var(--space-8); }
  .wh-why__item { grid-template-columns: var(--space-8) minmax(0, 1fr); column-gap: var(--space-4); }
  .wh-why__icon { width: var(--space-8); height: var(--space-8); }
  .wh-reach { margin-top: var(--space-12); }
  /* Phones: the figures under the map, not over its foot (comment cmvkfgpqd7kaq); the gold line shortened to the gap. */
  .ab-stats.wh-stats { margin: var(--space-8) 0 0; }
  .wh-stats::before { bottom: calc(100% + var(--space-1)); height: var(--space-6); }
  .wh-why { padding-top: var(--space-12); }
  .wh-why__name { font-size: var(--h5-size); line-height: var(--h5-lh); }
  .wh-why__item p { font-size: var(--body-size); line-height: var(--body-lh); }
  .wh-faq__links { flex-direction: column; align-items: stretch; }
}