/* ============================================================
   JJ Hairs — Design System v4
   Clean B2B Professional · White Ground · Restrained
   ============================================================ */

:root {
  --black:   #111111;
  --white:   #FFFFFF;
  --bg:      #F6F6F4;
  --line:    #E8E8E8;
  --text:    #444444;
  --muted:   #888888;
  --faint:   #BBBBBB;

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --max:  1240px;
  --px:   clamp(24px, 5vw, 64px);
  --sy:   clamp(64px, 8vw, 96px);   /* section vertical padding */
  --gap:  24px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── RESET ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); font-size: 15px; line-height: 1.65; color: var(--black); background: var(--white); -webkit-font-smoothing: antialiased; overflow-x: hidden; }

/* ScrollSmoother is a progressive enhancement. Fixed interface stays outside
   the transformed content layer and native scroll remains the fallback. */
#smooth-content { min-height: 100vh; }
html.has-scroll-smoother,
html.has-scroll-smoother body { scroll-behavior: auto; }
html.has-scroll-smoother .site-header {
  position: fixed;
  inset: 0 0 auto;
  width: 100%;
}
html.has-scroll-smoother #smooth-content { padding-top: 76px; }

@media (max-width: 860px) {
  html.has-scroll-smoother #smooth-content { padding-top: 68px; }
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul, ol { list-style: none; }
input, textarea, select { font-family: inherit; font-size: inherit; border: none; outline: none; background: none; appearance: none; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: var(--line); }

/* ── TYPE ──────────────────────────────────────── */
h1, h2 { font-family: var(--serif); font-weight: 600; line-height: 1.05; letter-spacing: 0; }
h3, h4 { font-weight: 600; line-height: 1.2; letter-spacing: 0; }
h1 { font-size: clamp(38px, 5vw, 72px); }
h2 { font-size: clamp(28px, 3.5vw, 48px); }
h3 { font-size: clamp(16px, 1.8vw, 20px); }
p  { color: var(--text); }

.label {
  font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
}

/* ── LAYOUT ────────────────────────────────────── */
.wrap  { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--px); }
.sect  { padding-block: var(--sy); }
.sect--bg { background: var(--bg); }
.sect--dark { background: var(--black); color: var(--white); }

/* ── BUTTONS ───────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 28px;
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.09em; text-transform: uppercase;
  white-space: nowrap; border: 1px solid transparent;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
  cursor: pointer;
}
.btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
.btn-fill   { background: var(--black); color: var(--white); border-color: var(--black); }
.btn-fill:hover { background: #333; border-color: #333; }
.btn-out    { background: transparent; color: var(--black); border-color: var(--black); }
.btn-out:hover { background: var(--black); color: var(--white); }
.btn-white  { background: var(--white); color: var(--black); border-color: var(--white); }
.btn-white:hover { background: var(--bg); }
.btn-ghost  { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.3); }
.btn-ghost:hover { border-color: rgba(255,255,255,0.7); }

.text-link {
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  border-bottom: 1px solid currentColor; padding-bottom: 1px;
  transition: opacity 0.18s;
}
.text-link:hover { opacity: 0.5; }

/* ── HEADER ────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--white); border-bottom: 1px solid var(--line);
  transition: box-shadow 0.2s;
}
.site-header.shadow { box-shadow: 0 1px 16px rgba(17,17,17,0.07); }
.header-row {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px; gap: 20px;
}

.logo { display: inline-flex; align-items: center; gap: 0; }
.logo-jj   { font-family: var(--serif); font-size: 26px; font-weight: 700; letter-spacing: 0; line-height: 1; }
.logo-sep  { width: 1px; height: 15px; background: currentColor; margin: 0 8px; opacity: 0.4; vertical-align: middle; display: inline-block; }
.logo-hair { font-size: 9px; font-weight: 500; letter-spacing: 5px; text-transform: uppercase; padding-bottom: 1px; }

.nav-list { display: flex; align-items: center; gap: 28px; }
.nav-list a { font-size: 13px; color: var(--muted); transition: color 0.15s; }
.nav-list a:hover, .nav-list a.is-active { color: var(--black); }

.header-actions { display: flex; align-items: center; gap: 10px; }
.header-btn { padding: 10px 20px; font-size: 11px; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 5px; }
.nav-toggle span { display: block; width: 20px; height: 1.5px; background: var(--black); transition: .2s; }

/* ── TRUST STRIP ───────────────────────────────── */
.trust {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--white);
}
.trust-row {
  display: flex; align-items: stretch;
  max-width: var(--max); margin-inline: auto;
}
.trust-item {
  flex: 1; padding: 20px 28px;
  display: flex; align-items: center; gap: 12px;
  border-right: 1px solid var(--line);
}
.trust-item:last-child { border-right: none; }
.trust-num {
  font-family: var(--serif); font-size: 28px; font-weight: 600;
  letter-spacing: 0; line-height: 1; color: var(--black);
  white-space: nowrap;
}
.trust-label { font-size: 12px; color: var(--muted); line-height: 1.4; }

/* ── SECTION HEAD ──────────────────────────────── */
.sh { margin-bottom: clamp(36px, 4vw, 52px); }
.sh .label { display: block; margin-bottom: 10px; }
.sh-sub { font-size: 15px; color: var(--text); max-width: 50ch; margin-top: 12px; line-height: 1.7; }
.sh--center { text-align: center; }
.sh--center .sh-sub { margin-inline: auto; }
.sh--between { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px; }

/* ── PRODUCT GRID ──────────────────────────────── */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 28px);
  align-items: stretch;
}
.prod-grid--catalog,
.prod-grid--3 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pcard {
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.pcard-img  {
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--bg);
  position: relative;
  margin-bottom: 16px;
  contain: paint;
}
.pcard-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--media-pos, 50% 18%);
  transition: transform 0.55s var(--ease);
}
.pcard:hover .pcard-img img { transform: scale(1.025); }
.pcard-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(17,17,17,0.7) 0%, transparent 50%);
  opacity: 0; transition: opacity 0.3s;
  display: flex; align-items: flex-end; padding: 18px;
}
.pcard:hover .pcard-overlay { opacity: 1; }
.pcard-overlay-label {
  font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--white); transform: translateY(4px); transition: transform 0.3s var(--ease);
}
.pcard:hover .pcard-overlay-label { transform: translateY(0); }

.pcard-cat  { font-size: 10px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); margin-bottom: 5px; }
.pcard-name {
  min-height: 2.35em;
  font-family: var(--serif);
  font-size: clamp(17px, 1.55vw, 21px);
  font-weight: 600;
  line-height: 1.16;
  margin-bottom: 8px;
  letter-spacing: 0;
}
.pcard-desc {
  min-height: 4.8em;
  font-size: 13px;
  color: var(--text);
  line-height: 1.58;
  margin-bottom: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pcard-link { margin-top: auto; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 2px; display: inline-block; transition: color 0.15s, border-color 0.15s; align-self: flex-start; }
.pcard-link:hover { color: var(--black); border-color: var(--black); }

/* ── SERVICE CARDS (Who We Serve) ──────────────── */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.svc-card {
  background: var(--white); padding: clamp(24px, 3.5vw, 40px);
  transition: background 0.2s;
}
.svc-card:hover { background: var(--bg); }
.svc-num  { font-family: var(--serif); font-size: 40px; font-weight: 600; letter-spacing: 0; color: var(--line); line-height: 1; margin-bottom: 18px; }
.svc-title { font-size: clamp(15px, 1.8vw, 18px); font-weight: 600; margin-bottom: 10px; }
.svc-body  { font-size: 13.5px; color: var(--text); line-height: 1.68; margin-bottom: 18px; }
.svc-link  { font-size: 11px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--black); border-bottom: 1px solid var(--line); padding-bottom: 2px; display: inline-block; transition: border-color 0.15s; }
.svc-link:hover { border-color: var(--black); }

/* ── CTA BANNER ────────────────────────────────── */
.cta-band { background: var(--black); padding: clamp(56px, 8vw, 96px) var(--px); position: relative; overflow: hidden; }
.cta-inner { position: relative; z-index: 1; max-width: 640px; }
.cta-inner .label { margin-bottom: 16px; }
.cta-inner h2 { color: var(--white); margin-bottom: 16px; }
.cta-inner p  { color: rgba(255,255,255,0.5); font-size: 16px; max-width: 40ch; margin-bottom: 32px; }
.cta-actions  { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── PRODUCTS PAGE ─────────────────────────────── */
.page-head { padding: clamp(44px, 6vw, 72px) 0; border-bottom: 1px solid var(--line); }
.page-head .label { margin-bottom: 12px; }
.page-head-sub { font-size: 15px; color: var(--text); margin-top: 12px; max-width: 50ch; }

/* ── ABOUT PAGE ────────────────────────────────── */

.about-rows { }
.about-row {
  display: grid; grid-template-columns: 160px 1fr; gap: clamp(20px, 4vw, 56px);
  padding: clamp(40px, 5vw, 64px) 0; border-top: 1px solid var(--line);
  align-items: start;
}
.about-row-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); padding-top: 5px; }
.about-row-body h3 { font-family: var(--serif); font-size: clamp(20px, 2.5vw, 30px); font-weight: 600; margin-bottom: 14px; }
.about-row-body p  { font-size: 15px; line-height: 1.8; color: var(--text); max-width: 54ch; }
.about-row-body p+p { margin-top: 12px; }

/* ── PARTNER PAGE ──────────────────────────────── */
.partner-wrap { display: grid; grid-template-columns: 58% 42%; min-height: calc(100vh - 112px); }
.partner-form  { padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 56px); border-right: 1px solid var(--line); }
.partner-aside { background: var(--black); padding: clamp(40px, 6vw, 72px) clamp(24px, 4vw, 48px); display: flex; flex-direction: column; justify-content: space-between; }

.benefit-row { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.benefit-n   { font-family: var(--serif); font-size: 20px; font-weight: 600; color: rgba(255,255,255,0.12); flex-shrink: 0; line-height: 1; padding-top: 2px; }
.benefit-t   strong { display: block; font-size: 13px; font-weight: 600; color: var(--white); margin-bottom: 3px; }
.benefit-t   p     { font-size: 12.5px; color: rgba(255,255,255,0.35); line-height: 1.55; }
.aside-quote { margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.08); }
.aside-quote blockquote { font-family: var(--serif); font-size: 18px; line-height: 1.5; color: rgba(255,255,255,0.45); margin-bottom: 12px; }
.aside-quote cite { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.5); font-style: normal; }

/* ── FORM ──────────────────────────────────────── */
.form-intro { margin-bottom: 36px; }
.form-intro .label { margin-bottom: 12px; }
.form-intro h1 { margin-bottom: 12px; }
.fgroup { margin-bottom: 24px; }
.flabel { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.flabel .req { color: var(--black); margin-left: 1px; }
.finput, .ftextarea, .fselect {
  width: 100%; padding: 12px 0; display: block;
  border-bottom: 1px solid var(--line); font-size: 14.5px; background: transparent;
  transition: border-color 0.16s; color: var(--black);
}
.finput:focus, .ftextarea:focus, .fselect:focus { border-color: var(--black); }
.ftextarea { resize: vertical; min-height: 90px; }
.fselect { cursor: pointer; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.fsub { margin-top: 36px; }
.fsub .btn { width: 100%; padding: 16px; font-size: 12px; }
.fnote { font-size: 11px; color: var(--faint); text-align: center; margin-top: 10px; }
.fhelp { margin-top: 7px; text-align: left; line-height: 1.45; }

/* ── CONTACT ───────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.ci-item { padding: 22px 0; border-bottom: 1px solid var(--line); }
.ci-item:first-child { border-top: 1px solid var(--line); }
.ci-label { font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
.ci-value { font-size: 16px; color: var(--black); font-weight: 500; }
.ci-value a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── FOOTER ────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--line); padding: 44px var(--px) 26px; }
.footer-body { max-width: var(--max); margin-inline: auto; }
.footer-top  { display: grid; grid-template-columns: 180px 1fr auto; gap: 36px; padding-bottom: 36px; margin-bottom: 20px; border-bottom: 1px solid var(--line); align-items: start; }
.footer-tagline { font-size: 12.5px; color: var(--muted); margin-top: 12px; max-width: 24ch; line-height: 1.6; }
.footer-nav { display: flex; gap: clamp(16px, 2.5vw, 36px); flex-wrap: wrap; padding-top: 4px; }
.footer-nav a { font-size: 13px; color: var(--muted); transition: color 0.15s; }
.footer-nav a:hover { color: var(--black); }
.footer-bot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 11px; color: var(--faint); }

/* ── BANNER CAROUSEL ───────────────────────────── */
.banner {
  position: relative;
  height: clamp(520px, 72vh, 720px);
  height: clamp(520px, 72svh, 720px);
  overflow: hidden;
  background: #111;
}
.banner:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 3px;
}
.banner-track {
  position: absolute;
  inset: 0;
  overflow: hidden;
  contain: paint;
}
.banner-slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transform: scale(1.035);
  transition: opacity 0.9s var(--ease), transform 6.5s var(--ease);
  pointer-events: none;
}
.banner-slide.active { opacity: 1; transform: scale(1); pointer-events: auto; }

.banner-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--media-pos, center);
  display: block;
  filter: saturate(0.92) contrast(1.02);
}
.banner-slide video.banner-media {
  background: #111;
}
.banner-poster {
  transition: opacity 0.45s var(--ease);
}
.banner-video {
  opacity: 0;
  transition: opacity 0.55s var(--ease);
}
.banner-slide.video-ready .banner-video {
  opacity: 1;
}
.banner-slide.video-ready .banner-poster {
  opacity: 0;
}
.banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.06) 0%, transparent 28%, rgba(0,0,0,0.12) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
  pointer-events: none;
  z-index: 1;
}

.banner-dot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

/* Dot indicators */
.banner-dots {
  position: absolute;
  bottom: clamp(14px, 2.5vh, 24px);
  right: var(--px);
  display: flex;
  gap: 9px;
  z-index: 10;
  align-items: center;
}
.banner-dot {
  width: 18px; height: 2px;
  border-radius: 0;
  background: rgba(255,255,255,0.28);
  border: none; cursor: pointer;
  transition: background 0.2s, width 0.2s, opacity 0.2s;
  padding: 0;
  opacity: 0.86;
}
.banner-dot.active { background: #fff; width: 34px; opacity: 1; }

/* Progress bar */
.banner-progress {
  position: absolute;
  bottom: 0; left: 0;
  height: 1px;
  background: rgba(255,255,255,0.72);
  z-index: 10;
  width: 0;
  transition: width linear;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .banner-progress { display: none; }
  .banner-video { display: none; }
  .banner-slide.video-ready .banner-poster { opacity: 1; }
}

/* ── RESPONSIVE ────────────────────────────────── */
@media (max-width: 1060px) {
  .prod-grid { grid-template-columns: repeat(2, 1fr); }
  .about-row { grid-template-columns: 120px 1fr; }
}

@media (max-width: 860px) {
  .banner { height: clamp(500px, 74vh, 640px); height: clamp(500px, 74svh, 640px); }
  .svc-grid { grid-template-columns: 1fr; }
  .about-row { grid-template-columns: 1fr; gap: 14px; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 20px; }
  .trust-row { flex-wrap: wrap; }
  .trust-item { min-width: 50%; flex: none; }
  .trust-item:nth-child(2) { border-right: none; }
  .partner-wrap { grid-template-columns: 1fr; }
  .partner-aside { display: none; }
  .partner-form  { border-right: none; }
  .prod-grid--catalog,
  .prod-grid--3  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .nav-list { display: none; }
  .nav-toggle { display: flex; }
  .header-btn { display: none; }
  .nav-list.open {
    display: flex; flex-direction: column; gap: 18px;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--white); padding: 22px var(--px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 8px 24px rgba(17,17,17,0.07);
  }
  .prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .banner { height: clamp(520px, 76vh, 660px); height: clamp(520px, 76svh, 660px); }
  .banner-dots { bottom: 38px; }
  .cta-actions { flex-direction: column; }
  .cta-actions .btn { width: 100%; justify-content: center; }
  .frow { grid-template-columns: 1fr; }
  .trust-item { min-width: 100%; }
}

/* ============================================================
   JJ Hairs — UI/UX Upgrade
   Strand Architectura · Premium B2B · Conversion-focused
   ============================================================ */

:root {
  --ink: #10100f;
  --charcoal: #181715;
  --paper: #fbfaf7;
  --bone: #f1eee8;
  --salt: #ded8cc;
  --mushroom: #6f6659;
  --sage: #79816f;
  --rosewood: #7f5f55;
  --shadow: 0 22px 60px rgba(16, 16, 15, 0.12);
  --soft-shadow: 0 12px 34px rgba(16, 16, 15, 0.08);
  --radius: 2px;
  --hairline: rgba(16, 16, 15, 0.12);

  --black: var(--ink);
  --bg: var(--paper);
  --line: rgba(16, 16, 15, 0.12);
  --text: #4f4b45;
  /* WCAG 2.1 AA cần 4.5:1 cho chữ thường. Đo trên nền --paper (#FBFAF7):
     #766e64 = 4.33:1 (trượt) -> #6b6357 = 5.67:1 (đạt).
     Vẫn nhạt rõ so với --text nên thứ bậc thị giác không đổi. */
  --muted: #6b6357;
  --faint: #6f6659;
}

body {
  background: var(--paper);
}

::selection {
  background: var(--charcoal);
  color: var(--white);
}

.wrap {
  max-width: 1320px;
}

.sect {
  position: relative;
}

.sect--bg {
  background: var(--bone);
}

.label {
  display: inline-flex;
  align-items: center;
  color: var(--mushroom);
}

.btn {
  min-height: 48px;
  border-radius: 2px;
  padding-inline: 26px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.13em;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.btn-fill:hover {
  background: #2f2c28;
  border-color: #2f2c28;
}

.btn-out {
  background: transparent;
  border-color: rgba(16,16,15,0.28);
}

.btn-out:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

.site-header {
  background: rgba(251,250,247,0.9);
  backdrop-filter: blur(16px);
  border-bottom-color: rgba(16,16,15,0.1);
}

.site-header.shadow {
  box-shadow: 0 1px 0 rgba(16,16,15,0.06), 0 12px 28px rgba(16,16,15,0.05);
}

.header-row {
  height: 76px;
}

.logo {
  position: relative;
  min-width: max-content;
}


.nav-list {
  gap: clamp(18px, 2.2vw, 34px);
}

.nav-list a {
  position: relative;
  padding-block: 6px;
  color: #5d554c;
  font-size: 12.5px;
  letter-spacing: 0.03em;
  line-height: 1;
}

.nav-list a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.24s var(--ease);
}

.nav-list a:hover,
.nav-list a.is-active {
  color: var(--ink);
  background: none;
}

.nav-list a:hover::after,
.nav-list a.is-active::after {
  transform: scaleX(1);
}

.nav-toggle {
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(16,16,15,0.14);
  border-radius: 2px;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

.banner {
  min-height: 620px;
  isolation: isolate;
  background: var(--charcoal);
}

/* Hero carries no copy, so it needs no darkening for legibility.
   Only a shallow foot-shade keeps the controls readable. */
.banner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 58%, rgba(16,16,15,0.42) 100%);
}

.banner::after {
  z-index: 3;
  background: none;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.1);
}

.banner-media {
  filter: saturate(0.95) contrast(1.02);
}

.banner-dots {
  bottom: 40px;
}

.trust {
  background: var(--paper);
  border-color: rgba(16,16,15,0.1);
}

.trust-row {
  position: relative;
}

.trust-item {
  padding-block: 24px;
  background: rgba(255,255,255,0.38);
}

.trust-num {
  color: var(--rosewood);
}

.trust-label {
  color: var(--muted);
}

.sh {
  position: relative;
}

.sh h2 {
  text-wrap: balance;
}

.sh-sub,
.page-head-sub {
  color: #5f574d;
}

.prod-grid {
  gap: clamp(18px, 2vw, 30px);
}

/* Editorial card: the image is the object, the type sits under it.
   No frame around a framed image. */
.pcard {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
}

.pcard-img {
  border-radius: 0;
  margin-bottom: 18px;
  background: var(--bone);
}

.pcard:hover .pcard-img img {
  transform: scale(1.035);
}

.pcard-cat {
  color: var(--mushroom);
  font-size: 10px;
  letter-spacing: 0.18em;
}

.pcard-name,
.svc-title,
.about-row-body h3 {
  color: var(--ink);
}

.pcard-desc {
  color: #5f574d;
}

.pcard-link,
.svc-link,
.text-link {
  color: var(--ink);
  border-bottom-color: rgba(16,16,15,0.22);
}

.svc-grid {
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  border-color: rgba(16,16,15,0.12);
  background: rgba(16,16,15,0.12);
}

.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  transition: background 0.24s var(--ease);
}

.svc-card:hover {
  background: var(--white);
}

.svc-link {
  margin-top: auto;
}

.svc-num {
  font-size: 13px;
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--mushroom);
  margin-bottom: 22px;
}

.experience-band {
  padding-block: clamp(58px, 7vw, 88px);
  background: var(--charcoal);
  color: var(--white);
  overflow: hidden;
}

.experience-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
  gap: clamp(32px, 6vw, 78px);
  align-items: center;
}

.experience-visual {
  position: relative;
  min-height: 520px;
  border-radius: var(--radius);
  overflow: hidden;
  background: #0f0e0d;
  box-shadow: 0 30px 80px rgba(0,0,0,0.3);
}

.experience-visual img {
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
  object-position: 52% 18%;
  filter: saturate(0.84) contrast(1.08);
}

.experience-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 62%, rgba(0,0,0,0.6));
}

.experience-note {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: rgba(255,255,255,0.72);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.experience-copy h2 {
  max-width: 9.5em;
  color: var(--white);
}

.experience-copy .sh-sub {
  color: rgba(255,255,255,0.66);
}

.process-list {
  margin-top: 34px;
  border-top: 1px solid rgba(255,255,255,0.13);
}

.process-item {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(255,255,255,0.13);
}

.process-item span {
  font-family: var(--serif);
  font-size: 30px;
  color: rgba(255,255,255,0.24);
  line-height: 1;
}

.process-item strong {
  display: block;
  margin-bottom: 5px;
  color: var(--white);
}

.process-item p {
  color: rgba(255,255,255,0.56);
  font-size: 13.5px;
  line-height: 1.62;
}

.page-head {
  position: relative;
  background: var(--bone);
  border-bottom-color: rgba(16,16,15,0.1);
}

.about-split {
  background: var(--paper);
}

.about-split-text {
  position: relative;
  background: var(--paper);
}

.about-split-img {
  position: relative;
}

.about-row {
  border-top-color: rgba(16,16,15,0.12);
}

.partner-wrap {
  background: var(--paper);
}

.partner-form {
  background: var(--paper);
}

.partner-aside,
.cta-band {
  background: var(--charcoal);
}

.partner-aside {
  color: var(--white);
}

.benefit-row {
  border-bottom-color: rgba(255,255,255,0.12);
}

.benefit-n {
  color: rgba(215,207,195,0.28);
}

.benefit-t p {
  color: rgba(255,255,255,0.54);
}

.aside-quote {
  border-top-color: rgba(255,255,255,0.12);
}

.aside-quote blockquote {
  color: rgba(255,255,255,0.66);
}

.form-intro {
  max-width: 720px;
}

.finput,
.ftextarea,
.fselect {
  padding: 14px 16px;
  border: 1px solid rgba(16,16,15,0.13);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.56);
  box-shadow: 0 1px 0 rgba(255,255,255,0.72) inset;
}

.finput:focus,
.ftextarea:focus,
.fselect:focus {
  border-color: rgba(16,16,15,0.52);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(121,129,111,0.12);
}

.finput[aria-invalid="true"],
.ftextarea[aria-invalid="true"],
.fselect[aria-invalid="true"] {
  border-color: var(--rosewood);
  box-shadow: 0 0 0 4px rgba(127,95,85,0.12);
}

.fselect {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 52%,
    calc(100% - 13px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 38px;
}

.ftextarea {
  line-height: 1.6;
}

.contact-grid {
  gap: clamp(34px, 6vw, 86px);
}

.ci-item {
  border-bottom-color: rgba(16,16,15,0.12);
}

.ci-item:first-child {
  border-top-color: rgba(16,16,15,0.12);
}

.ci-value {
  color: var(--ink);
}

.site-footer {
  background: var(--paper);
  border-top-color: rgba(16,16,15,0.1);
}

.footer-top {
  border-bottom-color: rgba(16,16,15,0.1);
}

.footer-nav a {
  padding-block: 4px;
}

@media (max-width: 1060px) {
  .experience-inner {
    grid-template-columns: 1fr;
  }

  .experience-copy {
    order: -1;
  }
}

@media (max-width: 860px) {
  .header-row {
    height: 68px;
  }

  .nav-list {
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .banner {
    min-height: 560px;
  }

  .banner::before {
    background: linear-gradient(180deg, transparent 62%, rgba(16,16,15,0.5) 100%);
  }

  .experience-visual,
  .experience-visual img {
    min-height: 390px;
  }
}

@media (max-width: 640px) {
  :root {
    --px: clamp(18px, 5vw, 26px);
  }

  .site-header {
    position: sticky;
  }

  .nav-list.open {
    display: grid;
    gap: 6px;
    padding: 14px var(--px) 18px;
    background: rgba(251,250,247,0.97);
    backdrop-filter: blur(18px);
  }

  .nav-list.open a {
    padding: 14px 10px;
    border-radius: 6px;
  }

  .banner {
    min-height: 520px;
  }

  .banner-dots {
    right: var(--px);
    bottom: 30px;
  }

  .prod-grid,
  .prod-grid--catalog,
  .prod-grid--3 {
    grid-template-columns: 1fr;
  }

  .pcard-desc,
  .pcard-name {
    min-height: 0;
  }

  .experience-note {
    flex-direction: column;
    gap: 6px;
  }

  .process-item {
    grid-template-columns: 46px 1fr;
  }

  .page-head::after {
    opacity: 0.65;
    right: -10px;
  }

  .footer-top {
    grid-template-columns: 1fr;
  }

  .footer-top .btn {
    width: 100%;
  }
}

/* ── ORIENTATION BAND ─────────────────────────── */
.orientation {
  padding-block: clamp(52px, 7vw, 92px);
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
}

.orientation-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: clamp(34px, 7vw, 96px);
  align-items: end;
}

.orientation-copy h1 {
  max-width: 10.5em;
  margin-top: 16px;
  font-size: clamp(40px, 5.8vw, 76px);
  text-wrap: balance;
}

.orientation-detail p {
  max-width: 46ch;
  color: #5f574d;
  font-size: 15px;
  line-height: 1.75;
}

.orientation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

/* ── PRODUCT DETAIL ───────────────────────────── */
.product-detail {
  padding-block: clamp(24px, 4vw, 52px) clamp(64px, 8vw, 104px);
  background: var(--paper);
}

.product-breadcrumb {
  display: flex;
  gap: 9px;
  margin-bottom: 24px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product-breadcrumb a:hover {
  color: var(--ink);
}

.product-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr);
  gap: clamp(36px, 7vw, 92px);
  align-items: start;
}

.product-gallery {
  min-width: 0;
}

.product-main-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bone);
}

/* Gallery arrows — a buyer comparing six views shouldn't have to
   travel to the thumbnail strip for every step. */
.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(8px);
  color: var(--ink);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.18s, background 0.18s, border-color 0.18s;
}

.product-main-media:hover .gallery-arrow,
.gallery-arrow:focus-visible {
  opacity: 1;
}

.gallery-arrow:hover {
  background: #fff;
  border-color: rgba(17, 17, 17, 0.3);
}

.gallery-arrow:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.gallery-arrow--prev { left: 14px; }
.gallery-arrow--next { right: 14px; }

.gallery-counter {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 4;
  padding: 5px 10px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(8px);
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.1em;
}

@media (hover: none) {
  .gallery-arrow { opacity: 1; }
}

.product-main-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 16%;
}

.product-thumbs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.product-thumb {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid transparent;
  background: var(--bone);
  opacity: 0.62;
  transition: border-color 0.18s, opacity 0.18s;
}

.product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 16%;
}

.product-thumb:hover,
.product-thumb.is-active,
.product-thumb:focus-visible {
  border-color: var(--ink);
  opacity: 1;
}

.product-summary {
  position: sticky;
  top: 112px;
  padding-top: clamp(10px, 3vw, 44px);
}

.product-summary h1 {
  margin-top: 14px;
  font-size: clamp(44px, 5vw, 68px);
}

.product-lede {
  max-width: 42ch;
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.75;
}

.product-private-note {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  margin-top: 32px;
  padding-block: 22px;
  border-block: 1px solid var(--hairline);
}

.product-private-mark {
  font-family: var(--serif);
  font-size: 28px;
  color: var(--rosewood);
  line-height: 1;
}

.product-private-note strong {
  display: block;
  margin-bottom: 5px;
  color: var(--ink);
  font-size: 13px;
}

.product-private-note p {
  font-size: 13px;
  line-height: 1.65;
}

.product-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 28px;
}

.product-status {
  min-height: 1.5em;
  margin-top: 10px;
  color: var(--sage);
  font-size: 12px;
}

.product-service-list {
  margin-top: 22px;
  border-top: 1px solid var(--hairline);
}

.product-service-list > div {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 14px;
  padding-block: 13px;
  border-bottom: 1px solid var(--hairline);
  font-size: 12px;
}

.product-service-list dt {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.product-service-list dd {
  color: var(--ink);
}

.product-trade-terms {
  margin-top: 30px;
}

.product-trade-terms::before {
  content: "Trade Terms";
  display: block;
  padding-bottom: 12px;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.product-trade-terms > div {
  grid-template-columns: 120px 1fr;
}

.product-next {
  padding-block: clamp(48px, 7vw, 76px);
}

.product-next-inner {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
}

.product-next h2 {
  max-width: 12em;
  margin-top: 12px;
  color: var(--white);
}

/* ── INQUIRY SELECTION ────────────────────────── */
.inquiry-selection {
  margin-bottom: 34px;
  padding: 22px;
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--sage);
  background: rgba(255,255,255,0.52);
}

.inquiry-selection h2 {
  margin-top: 8px;
  font-size: 28px;
}

.inquiry-selection ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block: 18px;
}

.inquiry-selection li {
  padding: 7px 10px;
  border: 1px solid var(--hairline);
  color: var(--ink);
  font-size: 12px;
}

@media (max-width: 900px) {
  .orientation-inner,
  .product-layout {
    grid-template-columns: 1fr;
  }

  .orientation-detail p {
    max-width: 58ch;
  }

  .product-summary {
    position: static;
    padding-top: 0;
  }
}

@media (max-width: 640px) {
  .orientation-actions,
  .product-actions,
  .product-next-inner {
    display: grid;
    grid-template-columns: 1fr;
  }

  .orientation-actions .btn,
  .product-actions .btn,
  .product-next .btn {
    width: 100%;
  }

  .product-thumbs {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 72px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding-bottom: 6px;
    scrollbar-width: none;
  }

  .product-thumbs::-webkit-scrollbar { display: none; }

  .product-next-inner {
    align-items: start;
  }
}

/* ============================================================
   JJ Hairs — v8 Refinement
   Editorial rhythm · functional restraint · flow feedback
   Rule applied throughout: an element earns its place by doing
   a job. Decoration without a job was removed, not restyled.
   ============================================================ */

:root {
  /* Wider vertical cadence — luxury reads as breathing room,
     not as ornament. */
  --sy: clamp(72px, 8.5vw, 124px);
  --sy-tight: clamp(52px, 6vw, 84px);
  --rule: rgba(16, 16, 15, 0.12);
  --rule-soft: rgba(16, 16, 15, 0.07);
}

/* ── TYPE ──────────────────────────────────────── */
h1, h2 {
  letter-spacing: -0.012em;
  text-wrap: balance;
}

h1 { line-height: 1.02; }
h2 { line-height: 1.08; }

h3 {
  letter-spacing: -0.005em;
}

p {
  text-wrap: pretty;
}

.label {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--mushroom);
}

.label--light {
  color: rgba(255, 255, 255, 0.5);
}

.sh-sub,
.page-head-sub,
.orientation-detail p {
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.78;
}

/* ── SECTION HEAD ──────────────────────────────── */
.sh {
  margin-bottom: clamp(40px, 4.5vw, 64px);
  padding-bottom: 22px;
  border-bottom: 1px solid var(--rule-soft);
}

.sh--between {
  align-items: baseline;
}

.sect--dark .sh,
.experience-band .sh {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

/* ── ACCESSIBILITY ─────────────────────────────── */
.skip-link {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 200;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--white);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transform: translateY(-160%);
  transition: transform 0.18s var(--ease);
}

.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--white);
  outline-offset: -4px;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.sect--dark a:focus-visible,
.experience-band a:focus-visible,
.partner-aside a:focus-visible {
  outline-color: var(--white);
}

/* ── HEADER: SHORTLIST FEEDBACK ────────────────── */
/* The shortlist was invisible between adding an item and reaching
   the inquiry form. This closes that loop on every page. */
.shortlist-link {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.shortlist-link.is-visible {
  display: inline-flex;
}

.shortlist-link:hover {
  border-color: var(--ink);
  background: rgba(16, 16, 15, 0.04);
}

.shortlist-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding-inline: 5px;
  background: var(--ink);
  color: var(--white);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* ── ORIENTATION BAND ──────────────────────────── */
.orientation {
  padding-block: clamp(64px, 8vw, 110px);
  border-bottom: 1px solid var(--rule-soft);
}

.orientation-inner {
  align-items: start;
}

.orientation-copy h1 {
  margin-top: 20px;
}

.orientation-detail {
  padding-top: clamp(0px, 2vw, 22px);
  border-top: 1px solid var(--rule);
  margin-top: 4px;
}

.orientation-actions {
  margin-top: 30px;
}

@media (min-width: 901px) {
  .orientation-detail {
    margin-top: 12px;
  }
}

/* ── TRUST STRIP ───────────────────────────────── */
.trust {
  background: var(--paper);
}

.trust-item {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  padding: 30px clamp(20px, 2.6vw, 34px);
  background: none;
  border-right-color: var(--rule-soft);
}

.trust-num {
  font-size: clamp(26px, 2.6vw, 34px);
  color: var(--ink);
  letter-spacing: -0.02em;
}

.trust-num--word {
  font-size: clamp(24px, 2.3vw, 31px);
}

.trust-label {
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--mushroom);
  line-height: 1.5;
}

/* ── PRODUCT CARD ──────────────────────────────── */
.pcard-name {
  min-height: 0;
  margin-bottom: 10px;
  font-size: clamp(19px, 1.7vw, 23px);
}

.pcard-desc {
  min-height: 0;
  margin-bottom: 18px;
  font-size: 13.5px;
  line-height: 1.66;
}

/* Both actions live on one baseline: open the style, or shortlist
   it without leaving the grid. */
.pcard-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--rule-soft);
}

.pcard-link {
  margin-top: 0;
  border-bottom: 0;
  padding-bottom: 0;
  font-size: 11px;
  letter-spacing: 0.13em;
  color: var(--ink);
}

.pcard-link:hover {
  color: var(--mushroom);
}

.pcard-shortlist {
  flex-shrink: 0;
  padding: 6px 0;
  color: var(--mushroom);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  transition: color 0.18s var(--ease);
}

.pcard-shortlist:hover {
  color: var(--ink);
}

.pcard-shortlist[aria-pressed="true"] {
  color: var(--ink);
}

.pcard-shortlist[aria-pressed="true"]::before {
  content: '✓ ';
}

/* ── CURRENT PRODUCT CATEGORIES ───────────────── */
.prod-grid--human {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ── SERVICE CARDS ─────────────────────────────── */
.svc-card {
  padding: clamp(28px, 3.6vw, 46px);
}

.svc-title {
  font-family: var(--serif);
  font-size: clamp(21px, 2.2vw, 27px);
  font-weight: 600;
  margin-bottom: 14px;
}

.svc-body {
  margin-bottom: 26px;
}

/* ── QUALITY BAND ──────────────────────────────── */
.experience-band {
  padding-block: clamp(72px, 8vw, 118px);
}

.experience-note {
  font-size: 10px;
  letter-spacing: 0.18em;
}

.process-item {
  grid-template-columns: 56px 1fr;
  padding: 26px 0;
}

.process-item span {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.56);
  padding-top: 4px;
}

.process-item strong {
  font-size: 14.5px;
  margin-bottom: 7px;
}

/* ── CTA BAND ──────────────────────────────────── */
.cta-band {
  padding-block: clamp(72px, 9vw, 124px);
}

.cta-inner p {
  font-size: 15.5px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.58);
}

/* ── FOOTER ────────────────────────────────────── */
.footer-nav a {
  font-size: 12.5px;
}

/* ── SCROLL REVEAL ─────────────────────────────── */
/* Applied by JS only; without JS everything renders visible. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── RESPONSIVE ────────────────────────────────── */
@media (max-width: 900px) {
  .orientation-detail {
    padding-top: 22px;
  }
}

@media (max-width: 860px) {
  .trust-item {
    padding: 24px var(--px);
  }

  .shortlist-link {
    padding: 9px 12px;
  }
}

@media (max-width: 640px) {
  .sh {
    padding-bottom: 18px;
  }

  .trust-item {
    min-width: 50%;
    border-bottom: 1px solid var(--rule-soft);
  }

  .trust-item:nth-child(2n) {
    border-right: none;
  }

  .prod-grid,
  .prod-grid--catalog,
  .prod-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 14px;
  }

  .pcard-name {
    font-size: 17px;
  }

  .pcard-desc {
    display: none;
  }

  .pcard-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .shortlist-link {
    font-size: 10px;
    letter-spacing: 0.1em;
  }
}

/* Image acts as a redundant link to the detail page; the real,
   focusable link lives in the action row below. */
.pcard-img {
  display: block;
}

/* Mobile menu open: lock the page behind it. */
body.nav-open {
  overflow: hidden;
}

/* The hover label sits over unpredictable photography, so the scrim
   has to guarantee legibility rather than assume a dark image. */
.pcard-overlay {
  background: linear-gradient(to top, rgba(16,16,15,0.9) 0%, rgba(16,16,15,0.3) 40%, transparent 66%);
  padding: 20px;
}

.pcard-overlay-label {
  font-size: 10.5px;
  letter-spacing: 0.16em;
}

/* The link is the last flex item in a stretching column, so the
   underline was spanning the whole card. */
.svc-link,
.pcard-link {
  align-self: flex-start;
}

/* Shortlist reads as the secondary of the two card actions. */
.pcard-shortlist {
  opacity: 0.78;
}

.pcard-shortlist:hover,
.pcard-shortlist:focus-visible,
.pcard-shortlist[aria-pressed="true"] {
  opacity: 1;
}

/* ── TRUST SHELF ───────────────────────────────── */
/* Moved directly under the hero at the stakeholder's request. Because it
   is now the first text on the page — before the visitor has read what
   JJ Hairs sells — it is tuned down to read as a caption shelf under the
   media, not as a headline block competing with the H1 below it. */
.trust--shelf {
  border-top: 0;
  background: var(--paper);
}

.trust--shelf .trust-item {
  padding-block: 22px;
}

.trust--shelf .trust-num {
  font-size: clamp(21px, 2vw, 27px);
}

.trust--shelf .trust-label {
  font-size: 10px;
  letter-spacing: 0.15em;
}

/* The orientation band now opens the reading, so it gets the top air. */
.trust--shelf + .orientation {
  padding-top: clamp(58px, 7vw, 96px);
}

/* ============================================================
   JJ Hairs — v11 Composition
   The page was monotonous because every section shared one
   structure: same container width, same left-aligned head, same
   even grid, five times. The fix is compositional variety, not
   more ornament — ornament is what got rejected.
   ============================================================ */

/* ── SPECIMEN SECTION HEAD ─────────────────────── */
/* Index number and label hang in a left margin gutter; the
   heading and content start on a shared inner axis. This gives
   the whole page one strong vertical spine to read down, and it
   is the design philosophy's own gesture: the specimen number
   written small beside the subject drawn large. */
.sh--specimen {
  display: grid;
  grid-template-columns: var(--gutter, 168px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: start;
}

.sh-gutter {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 6px;
}

.sh-index {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.sh-gutter--light .sh-index {
  color: rgba(255, 255, 255, 0.62);
}

.sh--specimen .sh-gutter .label {
  display: block;
  max-width: 14ch;
  line-height: 1.6;
}

/* Outside the two-column head the gutter runs inline. */
.experience-copy .sh-gutter,
.cta-inner .sh-gutter {
  flex-direction: row;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding-top: 0;
}

.sh-body {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.sh-body h2 {
  margin: 0;
}

.sh-aside {
  flex-shrink: 0;
}

/* ── TYPE CRESCENDO ────────────────────────────── */
/* Five headings at one size means no section leads. */
.h-monumental {
  font-size: clamp(34px, 4.6vw, 66px);
  line-height: 1.02;
}

.h-quiet {
  font-size: clamp(24px, 2.4vw, 34px);
}

/* ── CONTAINER RHYTHM ──────────────────────────── */
/* Width now expands and contracts as you scroll instead of
   holding one measure for the whole page. */
.wrap--bleed {
  max-width: none;
  padding-inline: clamp(24px, 4vw, 72px);
}

.wrap--narrow {
  max-width: 1010px;
}

/* ── LOOKBOOK GRID (homepage only) ─────────────── */
/* products.html keeps the even grid — a buyer comparing styles
   needs equal footing. Here the job is to invite, not compare. */
.prod-grid--lookbook {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(18px, 2vw, 30px);
  row-gap: clamp(30px, 4vw, 54px);
  align-items: start;
}

/* Two rows of two, mirrored: wide-then-tall, tall-then-wide. No
   cell is left empty, and no row repeats the one above it. */
.prod-grid--lookbook > .pcard:nth-child(1) { grid-column: span 7; }
.prod-grid--lookbook > .pcard:nth-child(2) { grid-column: span 5; margin-top: clamp(24px, 4vw, 72px); }
.prod-grid--lookbook > .pcard:nth-child(3) { grid-column: span 5; }
.prod-grid--lookbook > .pcard:nth-child(4) { grid-column: span 7; margin-top: clamp(24px, 4vw, 72px); }

/* Position-based type and crop overrides removed: the grid is three
   equal cards, so card 1 was rendering a 30px name and 14.5px body
   against 23px/13.5px on its neighbours. One card class, one scale. */

/* ── WHO WE SERVE: INDEX LIST ──────────────────── */
/* Three bordered boxes read as stock feature cards. A ruled
   index reads as a masthead. */
.svc-index {
  border-top: 1px solid var(--rule);
}

.svc-row {
  display: grid;
  grid-template-columns: var(--gutter, 168px) minmax(0, 1fr) auto;
  gap: clamp(16px, 3vw, 44px);
  align-items: baseline;
  padding-block: clamp(28px, 3.6vw, 46px);
  border-bottom: 1px solid var(--rule);
  transition: background 0.28s var(--ease);
}

.svc-row:hover {
  background: rgba(255, 255, 255, 0.5);
}

.svc-row-num {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--mushroom);
  font-variant-numeric: tabular-nums;
}

.svc-row-title {
  grid-column: 2;
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.05;
}

.svc-row-body {
  grid-column: 2;
  grid-row: 2;
  max-width: 52ch;
  margin-top: 12px;
  font-size: 14.5px;
  line-height: 1.72;
}

.svc-row-link {
  grid-column: 3;
  grid-row: 1;
  align-self: baseline;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
}

.svc-row-link span {
  display: inline-block;
  transition: transform 0.24s var(--ease);
}

.svc-row:hover .svc-row-link span {
  transform: translateX(5px);
}

/* ── RESPONSIVE ────────────────────────────────── */
@media (max-width: 1100px) {
  :root { --gutter: 116px; }

  .prod-grid--lookbook > .pcard:nth-child(2),
  .prod-grid--lookbook > .pcard:nth-child(4) {
    margin-top: clamp(20px, 3vw, 40px);
  }
}

@media (max-width: 860px) {
  .sh--specimen,
  .svc-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .sh-gutter {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding-top: 0;
  }

  .sh--specimen .sh-gutter .label { max-width: none; }

  .svc-row-title,
  .svc-row-body,
  .svc-row-link {
    grid-column: 1;
  }

  .svc-row-num,
  .svc-row-title,
  .svc-row-body,
  .svc-row-link {
    grid-row: auto;
  }

  .svc-row-link { margin-top: 16px; }

  .prod-grid--lookbook > .pcard { grid-column: span 6 !important; margin-top: 0 !important; }
  .prod-grid--lookbook > .pcard .pcard-img { aspect-ratio: 4 / 5 !important; }
}

@media (max-width: 640px) {
  .prod-grid--lookbook {
    row-gap: 26px;
  }

}

/* ── v11 corrections ───────────────────────────── */
/* The section head rule and the index rule stacked into a
   double line with a dead gap between them. */
.sh:has(+ .svc-index) {
  padding-bottom: 0;
  border-bottom: 0;
  margin-bottom: clamp(30px, 3.5vw, 46px);
}

/* Title and body belong to one another; the grid row gap was
   pushing them apart. */
.svc-row {
  row-gap: 0;
}

.svc-row-body {
  margin-top: 10px;
}

/* A section heading should still outrank the items beneath it. */
.h-quiet {
  font-size: clamp(26px, 2.9vw, 38px);
}

.svc-row-title {
  font-size: clamp(23px, 2.4vw, 31px);
}

/* ── CTA: FINAL BEAT ───────────────────────────── */
/* On a full-bleed dark band a 640px column left most of the
   width dead. The heading now spans the band and the closing
   line and actions sit on one baseline beneath it. */
.cta-band .cta-inner {
  max-width: none;
}

.cta-band .cta-inner h2 {
  max-width: 15ch;
  color: var(--white);
  margin-bottom: clamp(32px, 4vw, 54px);
}

.cta-foot {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 64px);
  padding-top: clamp(24px, 3vw, 38px);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.cta-foot p {
  max-width: 34ch;
  margin: 0;
}

.cta-foot .cta-actions {
  flex-shrink: 0;
}

@media (max-width: 760px) {
  .cta-foot {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ============================================================
   JJ Hairs — v12 Shell
   Measured failure this fixes: at 2560px the page had three
   different left axes — .wrap started at 684px, .wrap--bleed at
   136px, .wrap--narrow at 839px. The vertical spine the specimen
   heads were supposed to create was broken by every bleed section.

   Governing rule from here on:
   BACKGROUNDS MAY BLEED. CONTENT MAY NOT.
   Every content block on every page resolves to one centred
   measure, so section edges line up down the whole scroll.
   ============================================================ */

:root {
  --shell: 1320px;
  /* Distance from the viewport edge to the shell's left axis.
     Split sections use this to land on the same axis as .wrap. */
  --shell-inset: calc(max(0px, (100vw - var(--shell)) / 2) + var(--px));
}

.wrap {
  max-width: var(--shell);
}

/* Was unbounded — the direct cause of the 1596px void in the CTA
   band and 2416px content spans. The section background still
   bleeds; only the content is brought back onto the axis. */
.wrap--bleed {
  max-width: var(--shell);
  padding-inline: var(--px);
}

/* "Narrow" now means fewer columns from the SAME left axis,
   not a differently-centred box. */
.wrap--narrow {
  max-width: var(--shell);
}

.wrap--narrow > * {
  max-width: 1080px;
}

/* ── BAND SPLIT ────────────────────────────────── */
/* The page now opens and closes on the same composition: heading
   left, supporting copy and actions right. Orientation band and
   final CTA rhyme deliberately instead of each inventing a layout. */
.orientation-inner,
.cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: clamp(34px, 6vw, 88px);
  align-items: start;
}

.cta-detail {
  padding-top: clamp(6px, 2vw, 20px);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.cta-detail p {
  max-width: 40ch;
  margin-bottom: 28px;
}

.cta-band .cta-inner h2 {
  max-width: 11ch;
  margin-bottom: 0;
}

/* ── SECTION HEAD LEADER ───────────────────────── */
/* "Our Styles" and "View All" sat 710px apart with nothing between
   them. A leader rule turns that gap into a connection — the same
   device a contents page uses. */
.sh-body {
  align-items: baseline;
  gap: 0;
}

.sh-body::after {
  content: '';
  order: 1;
  flex: 1 1 auto;
  min-width: 40px;
  height: 1px;
  margin: 0 22px 0.34em;
  background: var(--rule);
}

.sh-aside {
  order: 2;
}

.sect--dark .sh-body::after,
.experience-band .sh-body::after {
  background: rgba(255, 255, 255, 0.2);
}

/* ── QUALITY BAND ──────────────────────────────── */
/* The visual column grew with the grid and ran 597px taller than
   the copy beside it, leaving a block of dead black. */
.experience-visual,
.experience-visual img {
  min-height: 0;
}

.experience-visual {
  aspect-ratio: 4 / 5;
  max-height: 760px;
}

.experience-visual img {
  height: 100%;
}

/* ── SPLIT SECTIONS ON THE SHELL AXIS ──────────── */
/* about-split and partner-wrap were 50/50 of the raw viewport and
   never touched .wrap, so their content drifted off the page axis
   by hundreds of pixels on wide screens. */
.about-split-text,
.partner-form {
  padding-left: var(--shell-inset);
  padding-right: clamp(24px, 4vw, 64px);
}

.about-split-text > *,
.partner-form > * {
  max-width: 620px;
}

.about-split-text h1 {
  max-width: 14ch;
}

.partner-aside {
  padding-left: clamp(24px, 4vw, 56px);
  padding-right: var(--shell-inset);
}

.partner-aside > * {
  max-width: 560px;
}

@media (max-width: 900px) {
  .orientation-inner,
  .cta-inner {
    grid-template-columns: 1fr;
  }

  .cta-detail {
    padding-top: 22px;
  }

  .about-split-text,
  .partner-form,
  .partner-aside {
    padding-inline: var(--px);
  }

  .about-split-text > *,
  .partner-form > *,
  .partner-aside > * {
    max-width: none;
  }
}

/* ── v12 corrections ───────────────────────────── */
/* A leader rule has to lead somewhere. Section heads with no aside
   link were drawing a line into empty space. */
.sh-body::after { content: none; }

.sh-body:has(.sh-aside)::after {
  content: '';
  order: 1;
  flex: 1 1 auto;
  min-width: 40px;
  height: 1px;
  margin: 0 22px 0.34em;
  background: var(--rule);
}

/* The aside stretched to the full height of a very long form and
   used space-between, so its five items sat at the top with a
   column of dead black beneath them. Sticky keeps the reasons to
   apply in view while the form is being filled — better composition
   and better UX at the same time. */
.partner-aside {
  justify-content: flex-start;
  gap: clamp(28px, 4vw, 48px);
}

@media (min-width: 901px) {
  .partner-aside {
    position: sticky;
    top: 0;
    align-self: start;
    max-height: 100vh;
    overflow-y: auto;
    scrollbar-width: none;
  }

  .partner-aside::-webkit-scrollbar { display: none; }

  .partner-wrap {
    align-items: start;
  }
}

.aside-quote {
  margin-top: 0;
}

/* Sticky the CONTENT, not the panel. The dark column keeps running
   the full height of the form; only the reasons-to-apply travel. */
@media (min-width: 901px) {
  .partner-aside {
    position: static;
    max-height: none;
    overflow: visible;
    align-self: stretch;
    padding-block: 0;
  }

  .partner-aside-inner {
    position: sticky;
    top: 76px;
    display: flex;
    flex-direction: column;
    gap: clamp(28px, 4vw, 44px);
    padding-block: clamp(40px, 6vw, 72px);
    max-width: 560px;
  }
}

/* ── v13: axis + void fixes found by tools/qa.py ─── */

/* The trust strip was still on the retired --max (1240px) while every
   other block moved to --shell (1320px). Its numbers therefore sat 10px
   right of the H1 beneath them at every viewport, and 24px LEFT of it
   below 1320px. This is the "disconnected" reading in one variable. */
.trust-row {
  max-width: var(--shell);
}

.trust-item {
  padding-inline: clamp(20px, 2.6vw, 34px);
}

.trust-item:first-child {
  padding-left: var(--px);
}

.trust-item:last-child {
  padding-right: var(--px);
}

/* On the lookbook's wide cards, space-between threw the two actions
   514px apart across a 700px card. They read as unrelated controls.
   Left-packed with one gap, the rule above them still carries the
   alignment. */
.pcard-actions {
  justify-content: flex-start;
  gap: clamp(20px, 2.4vw, 36px);
}

/* The CTA band carried padding-inline: var(--px) from the v4 base while
   the .wrap inside it added the same padding again — content landed at
   exactly 2x the page axis. This was the last stray axis on the site. */
.cta-band {
  padding-inline: 0;
}

/* ── Utilities replacing inline style= ─────────── */
/* Inline styles are how a design system rots: a value set in HTML is
   invisible to the token layer and cannot be audited. tools/qa.py
   budgets them. The --media-pos hooks stay inline because they are
   per-image art direction, not styling. */
.mt-label   { margin-top: 12px; }
.mt-block   { margin-top: 32px; }

.form-intro h1 {
  margin-top: 14px;
  font-size: clamp(30px, 4vw, 52px);
}

.form-intro p {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--text);
}

.form-intro i,
.about-split-text h1 i {
  font-style: italic;
  color: var(--mushroom);
}

.flabel .opt {
  color: var(--muted);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.confirm-panel {
  display: none;
  padding-block: clamp(48px, 7vw, 72px);
  text-align: center;
}

.confirm-mark {
  width: 46px;
  height: 46px;
  margin: 0 auto 24px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
}

.confirm-panel p {
  color: var(--text);
  margin-bottom: 28px;
}

.cta-band .label--light,
.page-head .label { margin-bottom: 0; }

.aside-head {
  display: block;
  margin-bottom: 26px;
}

.about-lede {
  margin-top: 20px;
  max-width: 42ch;
  font-size: 16px;
  line-height: 1.78;
  color: var(--text);
}

.contact-panel {
  padding-top: 0;
  margin-bottom: clamp(40px, 5vw, 60px);
}

.ci-head {
  font-family: var(--serif);
  font-size: clamp(22px, 2.5vw, 34px);
  margin-bottom: 24px;
  letter-spacing: -0.012em;
}

.ci-note {
  font-size: 14px;
  color: var(--text);
  margin-bottom: 14px;
}

.ci-item:last-child { border-bottom: none; }
.benefit-row:last-child { border-bottom: none; }

.ftextarea--tall { min-height: 120px; }

/* The about hero's image column had no height, so a portrait photo at
   960px wide drove the row past 1200px. The text beside it was then
   centred in a column it filled less than a third of — the emptiest
   composition on the site. Capping the media caps the row. */



@media (max-width: 860px) {
}

/* ============================================================
   Lookbook v2 — one variable, not three
   The first attempt changed column width, image aspect ratio and
   vertical offset all at once with no rule tying them together.
   Measured result: 72px stagger at the top of row 1, 125px ragged
   at the bottom, four product names on four different baselines.
   Variation without a rule reads as accident.

   The rule now: ROWS ARE LEVEL. ONLY WIDTH ALTERNATES.
   ============================================================ */

.prod-grid--lookbook {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(18px, 2vw, 30px);
  row-gap: clamp(48px, 5vw, 76px);
  align-items: stretch;   /* cards fill the row, so action rows align */
}

/* One height per row. Width is the only thing that changes. */
.prod-grid--lookbook .pcard-img {
  aspect-ratio: auto;
  height: clamp(380px, 33vw, 540px);
}

.prod-grid--lookbook > .pcard:nth-child(1),
.prod-grid--lookbook > .pcard:nth-child(4) { grid-column: span 7; }

.prod-grid--lookbook > .pcard:nth-child(2),
.prod-grid--lookbook > .pcard:nth-child(3) { grid-column: span 5; }

/* No offsets. The stagger was the jagged part. */
.prod-grid--lookbook > .pcard { margin-top: 0; }

/* One type size across the row so the four names share a baseline;
   width carries the hierarchy instead. */
.prod-grid--lookbook .pcard-name {
  font-size: clamp(19px, 1.7vw, 23px);
}

.prod-grid--lookbook .pcard-desc {
  max-width: 46ch;
  font-size: 13.5px;
}

@media (max-width: 860px) {
  .prod-grid--lookbook > .pcard:nth-child(n) { grid-column: span 6; }
  .prod-grid--lookbook .pcard-img { height: clamp(300px, 42vw, 420px); }
}

@media (max-width: 640px) {
  .prod-grid--lookbook { row-gap: 30px; }
  .prod-grid--lookbook .pcard-img { height: clamp(230px, 58vw, 320px); }
  .prod-grid--lookbook .pcard-name { font-size: 17px; }
  .prod-grid--lookbook .pcard-desc { display: none; }
}

/* The offset survived because `:nth-child` outranks a plain `.pcard`.
   Match the specificity that set it. */
.prod-grid--lookbook > .pcard:nth-child(1),
.prod-grid--lookbook > .pcard:nth-child(2),
.prod-grid--lookbook > .pcard:nth-child(3),
.prod-grid--lookbook > .pcard:nth-child(4) {
  margin-top: 0;
}

/* ============================================================
   About hero — sửa ba lỗi đo được
   1. object-position mặc định 50% 50% chỉ hiện 27,3%–72,7% chiều
      cao ảnh gốc. Đầu model nằm ở 6–30%, tóc tới 42% → cắt sạch.
      Trang About của một hãng tóc mà ảnh hero không có tóc.
   2. Cột ảnh tràn hết chiều cao section trong khi nội dung chữ
      thụt vào 101px → không cạnh nào gặp cạnh nào.
   3. Chia 50/50 làm khung ảnh quá ngang (ratio 1,23) so với ảnh
      gốc dọc (0,558) — chênh 2,2 lần nên crop kiểu gì cũng hỏng.
   ============================================================ */

/* Dùng lại đúng tỉ lệ cột của orientation band và CTA band, để
   About không phát minh thêm một lưới thứ tư. */

/* Ảnh là media của hero nên vẫn tràn sát mép phải; chiều cao section
   do một giá trị rõ ràng quyết định chứ không do ảnh đẩy ra. Thử lần
   đầu thụt ảnh vào bằng --shell-inset làm nó teo còn 452px, thành một
   dải dọc mảnh chứ không còn là hero. */



@media (max-width: 900px) {

}

/* ============================================================
   About hero — một khối duy nhất, mọi thuộc tính viết tường minh.

   Ba lỗi đo được trước khi sửa:
   1. object-position mặc định 50% 50% chỉ hiện 27,3%-72,7% chiều cao
      ảnh gốc. Đầu model ở 6-30%, tóc tới 42% -> cắt sạch. Trang About
      của một hãng tóc mà ảnh hero không có sợi tóc nào.
   2. Cột ảnh tràn hết chiều cao section trong khi chữ thụt vào 101px
      -> không cạnh nào gặp cạnh nào.
   3. Chia 50/50 làm khung ảnh ratio 1,23 trong khi ảnh gốc là 0,558
      - chênh 2,2 lần nên crop kiểu gì cũng hỏng.

   Ba lần sửa trước đều chồng thêm một lớp override mới thay vì sửa
   tại chỗ, và mỗi lần hỏng một kiểu khác: ảnh teo còn 452px, rồi
   section vọt lên 1462px. Khối này thay thế toàn bộ chúng.
   ============================================================ */

.about-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: stretch;
  min-height: 0;
  background: var(--paper);
}

.about-split-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(48px, 6vw, 76px);
  padding-left: var(--shell-inset);
  padding-right: clamp(24px, 4vw, 64px);
}

.about-split-text > * { max-width: 620px; }
.about-split-text h1 { max-width: 14ch; }

/* Chiều cao cố định. Dùng % hay auto thì grid row lấy chiều cao tự
   nhiên của ảnh dọc và section vọt lên 1462px. */
.about-split-img {
  height: clamp(540px, 66vh, 760px);
  margin: 0;
  overflow: hidden;
  background: var(--bone);
}

.about-split-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Đo từ ảnh gốc: đầu ở 44% chiều ngang, 6-30% chiều dọc. */
  object-position: 44% 8%;
}

@media (max-width: 900px) {
  .about-split { grid-template-columns: 1fr; }
  .about-split-text { padding-inline: var(--px); }
  .about-split-text > * { max-width: none; }
  .about-split-img { height: clamp(320px, 62vw, 460px); }
}

/* Nút trong cột flex bị stretch hết chiều rộng cột. */
.about-split-text .btn {
  align-self: flex-start;
}

/* Three current lines share one equal visual hierarchy. */
@media (min-width: 861px) {
  .prod-grid--lookbook > .pcard:nth-child(n) {
    grid-column: span 4;
    margin-top: 0;
  }
}

/* ============================================================
   Product card actions — one metric for both labels
   "View Style" and "Add to RFQ" were 0.13em vs 0.11em tracking on
   different line boxes (18px vs 25px), so they read as two sizes
   sitting off a shared baseline. Same box, same tracking; the
   colour difference is what marks primary from secondary.
   ============================================================ */
.pcard-actions {
  align-items: baseline;
}

.pcard-link,
.pcard-shortlist {
  padding: 0;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* ============================================================
   Hero banner — two plates, ratio-locked
   The banner used a fixed height against a full-bleed width, so
   its ratio swung from 0.61:1 on a phone to 3.56:1 on a 2560px
   monitor and object-fit: cover discarded up to 77% of the art.

   House rule (Jon Renau): desktop and mobile are separate hero
   builds, never one file stretched across both. So the container
   carries two ratios and <picture> swaps the plate at the same
   breakpoint. Container ratio == plate ratio, so cover has
   nothing left to crop on either side of the line.
   ============================================================ */
.banner {
  height: auto;
  aspect-ratio: 38 / 15;   /* 1900 x 750 desktop plate, matches hero-desktop.mp4 */
  max-height: 88svh;
  min-height: 0;
}

@media (max-width: 640px) {
  /* No portrait mobile plate has been designed yet, so the phone
     keeps the 38/15 desktop ratio. Cropping a 1900x750 banner —
     three models across, headline spanning the full width — into
     a 4/5 box would throw away two models and half the type.
     Losing the composition is worse than a short hero.

     When hero-*-mobile.webp (1000 x 1250) lands, uncomment the
     ratio below and add the <source media="(max-width: 640px)">
     back into each slide. Everything else is already in place.  */
  /* .banner { aspect-ratio: 4 / 5; max-height: 82svh; } */

  /* Video stays desktop-only regardless: a hero video is the worst
     possible thing to push down a 4G connection. */
  .banner-video { display: none; }
  .banner-slide.video-ready .banner-poster { opacity: 1; }

  .banner-dots { bottom: 14px; gap: 6px; }
  .banner-dot { width: 12px; }
  .banner-dot.active { width: 22px; }
}

/* Art direction lives in the crop of each exported plate, not in
   a per-slide object-position nudge. */
.banner-media {
  object-position: center;
}

/* ============================================================
   Banner controls — legible on light AND dark slides
   The dots were white-on-transparent, tuned for the old dark
   video-only hero. The new campaign plate is near-white, so on
   that slide the dots vanished entirely.

   A dark fill carries the light slide; a white ring carries the
   dark one. Both are present at all times, so no slide-aware
   logic is needed.
   ============================================================ */
.banner-dot {
  background: rgba(16, 16, 15, 0.3);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.banner-dot.active {
  background: rgba(16, 16, 15, 0.88);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7);
}

/* Same problem: a white progress hairline is invisible on the
   light plate. */
.banner-progress {
  background: rgba(16, 16, 15, 0.55);
}

/* The 1.035 -> 1 entry zoom upscales the plate on the way in.
   On a 2x display the banner is already being stretched past its
   native 1900px, so the zoom was adding a second round of
   softening to art that had none to spare. Keep the fade, drop
   the scale. */
.banner-slide {
  transform: none;
}

.banner-slide.active {
  transform: none;
}

/* ============================================================
   Quality System — specimen plate
   Before: an abstract 6 MB strand poster, cropped at 52%/18% so
   only the tangled part showed, with its own baked-in JJ HAIR
   lockup duplicating the header logo — then two lines of
   micro-caption layered on top of art that already carried
   unreadable micro-text. Nothing in it said "quality" to a buyer.

   After: one real product macro, presented as a lab specimen —
   light plate on the dark band, caption set below the frame
   instead of over the image. The claims became four named
   checkpoints, so the section says what it is called.
   ============================================================ */
.experience-band {
  padding-block: clamp(72px, 8vw, 116px);
}

.experience-inner {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 92px);
  align-items: start;
}

.specimen {
  margin: 0;
}

.specimen-plate {
  padding: clamp(20px, 2.6vw, 34px);
  background: var(--paper);
  border-radius: var(--radius);
}

.specimen-plate img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.specimen-caption {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.58);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.specimen-caption span:last-child {
  text-align: right;
  text-transform: none;
  letter-spacing: 0.04em;
}

/* A checklist is a table of facts, not three paragraphs. Name,
   then the evidence, on one baseline. */
.check-list {
  margin: clamp(30px, 3.4vw, 44px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.check-item {
  display: grid;
  grid-template-columns: 54px minmax(0, 8.5em) minmax(0, 1fr);
  gap: clamp(14px, 2vw, 28px);
  align-items: baseline;
  padding-block: clamp(16px, 1.8vw, 22px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.check-num {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1;
  /* 0.3 cho 2.67:1 trên #111. 0.45 cho 4.53:1 — vừa qua ngưỡng AA,
     vẫn lùi hẳn sau chữ trắng đầy đủ bên cạnh. */
  color: rgba(255, 255, 255, 0.45);
}

.check-item strong {
  font-weight: 500;
  font-size: 14.5px;
  color: var(--white);
}

.check-note {
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
  line-height: 1.55;
}

.text-link--light {
  display: inline-block;
  margin-top: clamp(26px, 3vw, 36px);
  color: rgba(255, 255, 255, 0.86);
  border-bottom-color: rgba(255, 255, 255, 0.3);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.text-link--light:hover {
  color: var(--white);
  border-bottom-color: var(--white);
}

@media (max-width: 1060px) {
  .experience-inner {
    grid-template-columns: 1fr;
  }

  .specimen {
    order: 1;
    max-width: 460px;
  }

  .experience-copy {
    order: 0;
  }
}

@media (max-width: 640px) {
  .check-item {
    grid-template-columns: 34px minmax(0, 1fr);
    row-gap: 4px;
  }

  .check-note {
    grid-column: 2;
  }

  .specimen-caption {
    flex-direction: column;
    gap: 4px;
  }

  .specimen-caption span:last-child {
    text-align: left;
  }
}

/* ============================================================
   Vertical rhythm — one cadence for the whole page
   Section padding was drifting: 96/110 on orientation, 124/124
   on the rest, 116 on the band. Four different values across a
   scroll reads as "assembled" rather than "designed".

   One token, applied everywhere. The band keeps a slightly
   larger measure because a colour change needs more air to feel
   deliberate rather than accidental.
   ============================================================ */
:root {
  --band: clamp(48px, 5vw, 72px);
  --band-lg: clamp(56px, 6vw, 84px);
}

.orientation,
.sect,
.cta-band {
  padding-block: var(--band);
}

.experience-band {
  padding-block: var(--band-lg);
}

/* Measure discipline: 50–70 characters is the readable band.
   svc-row-body was running to 66ch while the CTA sat at 50 —
   the same page speaking in two different voices. */
.orientation-detail p,
.svc-row-body,
.cta-detail p {
  max-width: 52ch;
}

/* Two corrections after seeing it rendered:
   1. The 8.5em name column broke "Colour consistency" onto a
      second line while its three siblings held one — a ragged
      column reads as a mistake, not a rhythm.
   2. The plate was --paper (#FBFAF7) behind a photo shot on pure
      white, so a faint rectangle outlined the image. A specimen
      mount should hold the object, not frame it. */
.check-item {
  grid-template-columns: 54px minmax(0, 11em) minmax(0, 1fr);
}

.specimen-plate {
  background: #fff;
}

/* `.trust--shelf + .orientation` (specificity 0,2,0) still owned
   padding-top, so the first section sat 25px shallower than every
   section below it. Match the specificity to hand it back. */
.trust--shelf + .orientation {
  padding-top: var(--band);
}

/* The 11em correction was appended after the 640px block, so at
   phone width the checklist kept three columns and squeezed the
   note into 100px. Re-state the mobile collapse last. */
@media (max-width: 640px) {
  .check-item {
    grid-template-columns: 34px minmax(0, 1fr);
    row-gap: 4px;
  }

  .check-note {
    grid-column: 2;
  }
}

/* ============================================================
   About — facts instead of prose
   The page ran four stacked essays (189 words) of uneven height
   — 353 / 287 / 260 / 401px — with headings like "More Than a
   Supplier" that promised nothing a buyer could act on. A
   supplier's About page is read for capability, not for tone.

   Same structural language as the Quality System checklist so
   the two pages feel authored by one hand.
   ============================================================ */
.about-statement {
  max-width: 58ch;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.7;
  color: var(--text);
}

.fact-list {
  margin: 0;
  border-top: 1px solid var(--rule);
}

.fact-list > div {
  display: grid;
  grid-template-columns: minmax(0, 10em) minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 34px);
  align-items: baseline;
  padding-block: clamp(14px, 1.6vw, 19px);
  border-bottom: 1px solid var(--rule);
}

.fact-list dt {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.fact-list dd {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
}

.step-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.step-list li {
  display: grid;
  grid-template-columns: 54px minmax(0, 11em) minmax(0, 1fr);
  gap: clamp(14px, 2vw, 28px);
  align-items: baseline;
  padding-block: clamp(16px, 1.8vw, 22px);
  border-bottom: 1px solid var(--rule);
}

.step-num {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1;
  color: var(--salt);
}

.step-list strong {
  font-weight: 500;
  font-size: 14.5px;
  color: var(--ink);
}

.step-note {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

/* The About CTA carried an inline style="color:var(--white)" to
   fix a heading that the dark band should have handled. */
.cta-band .h-monumental {
  color: var(--white);
}

@media (max-width: 640px) {
  .fact-list > div {
    grid-template-columns: 1fr;
    row-gap: 4px;
  }

  .step-list li {
    grid-template-columns: 34px minmax(0, 1fr);
    row-gap: 4px;
  }

  .step-note {
    grid-column: 2;
  }
}

/* ============================================================
   Orphans and widows
   A heading that drops one word onto its own line reads as a
   typesetting accident, and the site's serif display sizes make
   it obvious. `balance` evens the line lengths of short blocks
   (headings, ledes, labels); `pretty` only protects the last
   line of longer body copy, which is what it is designed for.

   Both degrade to normal wrapping where unsupported, so there is
   no fallback to maintain.
   ============================================================ */
h1, h2, h3,
.pcard-name,
.svc-row-title,
.trust-label,
.check-item strong,
.step-list strong,
.fact-list dt,
.sh-sub,
.about-lede,
.specimen-caption span {
  text-wrap: balance;
}

p,
.pcard-desc,
.svc-row-body,
.check-note,
.step-note,
.fact-list dd,
.about-statement,
.product-lede {
  text-wrap: pretty;
}

/* Short measures make orphans far more likely; `balance` caps out
   at a handful of lines, so the CTA and section ledes also get a
   hard limit that keeps them to two or three even lines. */
.cta-detail p,
.orientation-detail p {
  max-width: 46ch;
}

/* `pretty` only rescues the final line; on short two-line spec
   values in a narrow column it still leaves a stub. These are
   short enough for `balance`, which evens every line. */
.product-service-list dd,
.fact-list dd,
.form-intro p {
  text-wrap: balance;
}

/* ============================================================
   Page closers — one shape per job, not one shape everywhere
   Four pages ended with the same dark band: label, serif
   heading, paragraph, button. By the fourth the reader has
   stopped seeing it. Each page now closes with whatever that
   page's reader actually needs next.
   ============================================================ */

/* product.html — the two styles the buyer has not opened yet. */
.style-switch {
  padding-block: var(--band);
  border-top: 1px solid var(--rule);
}

.style-switch-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: clamp(22px, 2.6vw, 34px);
}

.style-switch-head h2 {
  font-size: clamp(19px, 1.9vw, 24px);
}

.style-switch-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 32px);
}

.style-switch-card {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.style-switch-card:hover {
  border-color: var(--hairline);
  background: var(--bone);
}

.style-switch-media {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--bone);
}

.style-switch-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 16%;
}

.style-switch-name {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  color: var(--ink);
}

.style-switch-meta {
  grid-column: 2;
  margin-top: -6px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

/* products.html — the state of the RFQ being assembled. */
.rfq-bar {
  padding-block: clamp(26px, 3vw, 38px);
  background: var(--bone);
  border-top: 1px solid var(--rule);
}

.rfq-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(18px, 3vw, 44px);
  flex-wrap: wrap;
}

.rfq-bar-count {
  margin-top: 4px;
  font-family: var(--serif);
  font-size: clamp(19px, 2vw, 25px);
  color: var(--ink);
}

.rfq-bar-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1 1 auto;
}

.rfq-bar-list li {
  padding: 5px 12px;
  border: 1px solid var(--hairline);
  border-radius: 100px;
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--mushroom);
}

/* about.html — a ruled sign-off, not a third dark slab. */
.closing-rule {
  padding-block: var(--band);
  border-top: 1px solid var(--rule);
}

.closing-rule-inner {
  display: grid;
  grid-template-columns: minmax(0, 168px) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 44px);
  align-items: baseline;
}

.closing-rule-label {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.closing-rule h2 {
  grid-column: 2;
  font-size: clamp(24px, 3vw, 38px);
}

.closing-rule-note {
  grid-column: 2;
  max-width: 44ch;
  margin-top: 10px;
  color: var(--text);
}

.closing-rule .text-link {
  grid-column: 2;
  justify-self: start;
  margin-top: 22px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .style-switch-grid {
    grid-template-columns: 1fr;
  }

  .rfq-bar-inner {
    align-items: flex-start;
  }

  .closing-rule-inner {
    grid-template-columns: 1fr;
  }

  .closing-rule h2,
  .closing-rule-note,
  .closing-rule .text-link {
    grid-column: 1;
  }
}

/* At tablet width the product summary column narrows but the two
   action buttons kept `1fr 1fr`; "Request Pricing & MOQ" is wide
   enough that the pair pushed 72px past the viewport. The grid
   columns now yield rather than the page. */
.product-actions {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}

.product-actions .btn {
  min-width: 0;
  text-align: center;
}

/* The closing note sat between `balance`'s comfortable range and
   the column width, stranding "that fit." at tablet sizes. A
   narrower measure resolves it at every width. */
.closing-rule-note {
  max-width: 38ch;
  text-wrap: balance;
}

/* ============================================================
   About hero — the proportions were inverted
   The text column measured 867px against a 641px image, so the
   photograph — the only visual on the page — was the smaller
   half. The copy itself is capped at 14ch for the heading and
   ~52ch for the lede, so 867px could never be filled: 248px of
   the column, 42% of its height, was empty.

   The image now takes the larger share and the copy is centred
   in its own column rather than floating in a void.
   ============================================================ */
.about-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  align-items: center;
  min-height: min(78svh, 720px);
}

.about-split-text {
  padding-block: clamp(48px, 6vw, 88px);
}

.about-split-img {
  align-self: stretch;
  overflow: hidden;
}

.about-split-img picture,
.about-split-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
}

/* The heading was clamped to 14ch — tight enough to force three
   lines and a ragged edge. Let it breathe with the wider column. */
.about-split-text h1 {
  max-width: 16ch;
}

.about-lede {
  max-width: 46ch;
}

@media (max-width: 900px) {
  .about-split {
    /* `1fr` is `minmax(auto, 1fr)`, so the column inherited the
       image's min-content width — 427px inside a 390px phone.
       `minmax(0, 1fr)` lets the track shrink below its content. */
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .about-split-img {
    /* An earlier rule still sets height: clamp(320px, 62vw, 460px)
       here. With aspect-ratio also declared, the browser derives
       WIDTH from that height — 320 x 4/3 = 427px inside a 390px
       phone. Height must be released for the ratio to drive. */
    height: auto;
    aspect-ratio: 4 / 3;
    min-width: 0;
  }
}

/* Contact page — direct lines and outcome list share the aside. */
.contact-lines {
  margin: 0;
}

.contact-lines > div {
  display: grid;
  grid-template-columns: minmax(0, 6.5em) minmax(0, 1fr);
  gap: 16px;
  padding-block: 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.contact-lines dt {
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.contact-lines dd {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
}

.contact-lines a {
  color: inherit;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.contact-lines a:hover {
  border-bottom-color: #fff;
}

.aside-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.aside-list li {
  padding-block: 11px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.72);
  font-size: 13.5px;
}

.aside-list li::before {
  content: '• ';
  color: rgba(255, 255, 255, 0.35);
}

/* ============================================================
   About — editorial rebuild
   The old hero was a 720px section holding 346px of content:
   374px, over half its height, was padding. The image column
   stopped 93px short of the section floor, so the two halves
   ended on different lines — that was the visible tilt.

   A band solves both. The image spans the full width at a fixed
   ratio, so there is no column to fill and nothing to align
   against. Copy sits beneath it on the page axis.
   ============================================================ */
.ab-masthead-media {
  overflow: hidden;
  /* No aspect-ratio here. Paired with max-height the browser
     derives WIDTH from the clamped height, and the band stopped
     315px short of the viewport edge — the same trap that bit the
     old split hero. An explicit height keeps the width at 100%. */
  width: 100%;
  height: clamp(380px, 50vw, 700px);
  background: var(--bone);
}

.ab-masthead-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 26%;
}

.ab-masthead-copy {
  padding-block: clamp(40px, 5vw, 72px) clamp(36px, 4.5vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: end;
}

.ab-masthead-copy .label {
  grid-column: 1 / -1;
}

.ab-masthead-copy h1 {
  font-size: clamp(34px, 5vw, 62px);
  line-height: 1.02;
  max-width: 15ch;
}

.ab-lede {
  max-width: 46ch;
  color: var(--text);
  font-size: clamp(14.5px, 1.4vw, 16px);
  line-height: 1.72;
}

/* Facts — a rule of numbers, not four boxed cards. */
.ab-facts {
  border-block: 1px solid var(--rule);
  background: var(--bone);
}

.ab-facts-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-block: clamp(26px, 3vw, 40px);
  gap: clamp(18px, 3vw, 44px);
}

.ab-fact {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-left: clamp(14px, 2vw, 28px);
  border-left: 1px solid var(--hairline);
}

.ab-facts-grid .ab-fact:first-child {
  padding-left: 0;
  border-left: 0;
}

.ab-fact-n {
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
}

.ab-fact-l {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  max-width: 14ch;
}

/* Editorial blocks — image and copy trade sides so the scroll has
   a rhythm rather than a repeat. */
.ab-block {
  padding-block: clamp(52px, 5vw, 76px);
}

.ab-block + .ab-block {
  border-top: 1px solid var(--rule);
}

.ab-block-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
}

.ab-block--mirror .ab-block-media {
  order: 2;
}

.ab-block-media {
  margin: 0;
}

.ab-block-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.ab-block-media figcaption {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ab-block-copy {
  position: relative;
}

.ab-block-index {
  display: block;
  margin-bottom: 14px;
  font-family: var(--serif);
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1;
  color: var(--salt);
}

.ab-block-copy h2 {
  margin-top: 10px;
  font-size: clamp(23px, 2.6vw, 36px);
  max-width: 20ch;
}

.ab-block-copy > p {
  margin-top: 16px;
  max-width: 50ch;
  color: var(--text);
  line-height: 1.72;
}

.ab-block-copy .check-list,
.ab-block-copy .fact-list {
  margin-top: clamp(26px, 3vw, 38px);
}

/* The checklist was authored for the dark band; on paper it needs
   the ink palette rather than white-on-transparent. */
.check-list--light {
  border-top-color: var(--rule);
}

.check-list--light .check-item { border-bottom-color: var(--rule); }
.check-list--light .check-num  { color: var(--salt); }
.check-list--light .check-item strong { color: var(--ink); }
.check-list--light .check-note { color: var(--muted); }

/* Process — the one dark moment on the page, so it reads as a
   change of register instead of a fourth identical slab. */
.ab-process {
  padding-block: clamp(52px, 5vw, 76px);
  background: var(--charcoal);
  color: var(--white);
}

.ab-process-head h2 {
  margin-top: 12px;
  color: var(--white);
  font-size: clamp(26px, 3.2vw, 44px);
  max-width: 22ch;
}

.ab-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 46px);
  margin: clamp(28px, 3vw, 40px) 0 0;
  padding: 0;
  list-style: none;
}

.ab-steps li {
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.ab-step-n {
  font-family: var(--serif);
  font-size: 15px;
  /* 0.4 cho 3.82:1 trên nền tối; 0.5 cho 5.33:1. */
  color: rgba(255, 255, 255, 0.5);
}

.ab-steps h3 {
  margin: 12px 0 8px;
  color: var(--white);
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 500;
}

.ab-steps p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  line-height: 1.62;
}

@media (max-width: 1024px) {
  .ab-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .ab-masthead-copy,
  .ab-block-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .ab-block--mirror .ab-block-media {
    order: 0;
  }

  .ab-block-media {
    max-width: 420px;
  }

  .ab-facts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 26px;
  }

  .ab-facts-grid .ab-fact:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 560px) {
  .ab-facts-grid { grid-template-columns: minmax(0, 1fr); }
  .ab-facts-grid .ab-fact { padding-left: 0; border-left: 0; }
  .ab-steps { grid-template-columns: minmax(0, 1fr); }
  .ab-masthead-media { height: clamp(260px, 72vw, 420px); }
}

/* Two ledes still stranded a short last line at desktop width; the
   measure sat just past where `balance` gives up. */
.ab-lede,
.ab-block-copy > p {
  max-width: 44ch;
  text-wrap: balance;
}

/* ============================================================
   BS Catalog — JJ Hairs theme
   The plugin ships every value as a --bsc-* token, so re-skinning
   is a token override rather than a fork. Loaded after catalog.css
   so these win; nothing in the component's own selectors is
   touched, which keeps it upgradeable.
   ============================================================ */
:root {
  --bsc-ink:        #10100f;
  --bsc-ink-60:     rgba(16, 16, 15, 0.60);
  --bsc-ink-15:     rgba(16, 16, 15, 0.14);
  --bsc-ink-08:     rgba(16, 16, 15, 0.07);
  --bsc-accent:     #7f5f55;          /* rosewood, the site's only warm accent */
  --bsc-accent-rgb: 127, 95, 85;
  --bsc-surface:    #f1eee8;          /* bone — the shelf reads as a shelf */
  --bsc-cover-bg:   #181715;

  --bsc-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Square corners. The site has no rounded shape anywhere; 14px
     would have made the shelf the one soft element on the page. */
  --bsc-radius-md: 2px;

  --bsc-cols:      3;                 /* three catalogues, one row */
  --bsc-gap:       clamp(22px, 2.6vw, 40px);
  --bsc-max-width: 1320px;            /* matches --shell */
  --bsc-pad-x:     clamp(24px, 5vw, 64px);
  --bsc-modal-bg:  rgba(16, 16, 15, 0.94);
}

/* The shelf sits between two paper sections, so it needs its own
   ground and a hairline to sit on. */
.bsc-shelf-section {
  background: var(--bsc-surface);
  border-block: 1px solid var(--rule);
  padding-block: var(--band);
}

/* The plugin's display face is the host's sans by default. JJ Hairs
   sets titles in the serif everywhere else — carry that through so
   the shelf does not read as a bolt-on. */
.bsc-shelf-section h2,
.bsc-shelf-title,
.bsc-cover-title {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: 0;
}

/* The plugin's cover well is dark by default so a page render reads
   as film. These plates are paper — a dark well would frame them in
   a black border. */
:root { --bsc-cover-bg: #f1eee8; }

/* Between 641px and 860px the header carried both the Quote Request
   pill and the Request Pricing button, and the pair overflowed the
   viewport by 36px. The pill wins: it carries live state, and the
   same action sits in the footer and on every page body. */
@media (max-width: 900px) {
  .header-btn { display: none; }
}

/* ============================================================
   v64 — Unified editorial hero system
   One visual grammar for every top-level page: a numbered rail,
   a restrained display title, one supporting paragraph, and one
   shared paper/rule palette. Homepage media remains the deliberate
   campaign exception; product detail remains the commerce exception.
   ============================================================ */
.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.page-hero::after {
  content: '';
  position: absolute;
  right: max(var(--px), calc((100vw - var(--shell)) / 2 + var(--px)));
  bottom: 0;
  width: clamp(72px, 9vw, 132px);
  height: 1px;
  background: var(--rosewood);
  opacity: 0.72;
}

.page-hero-grid {
  display: grid;
  grid-template-columns: var(--gutter, 168px) minmax(0, 1fr);
  gap: clamp(22px, 3vw, 48px);
  align-items: stretch;
  min-height: clamp(165px, 18vw, 240px);
  padding-block: clamp(22px, 2.4vw, 32px);
}

.page-hero-rail {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding-block: 8px 10px;
  border-right: 1px solid var(--rule);
}

.page-hero-index {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--mushroom);
  font-variant-numeric: tabular-nums;
}

.page-hero-rail .label {
  max-width: 14ch;
  line-height: 1.6;
}

.page-hero-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.48fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: end;
}

.page-hero h1 {
  max-width: 12ch;
  color: var(--ink);
  font-size: clamp(40px, 4.2vw, 58px);
  font-weight: 600;
  line-height: 0.91;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.page-hero h1 i {
  color: var(--mushroom);
  font-weight: 500;
}

.page-hero-lede {
  max-width: 42ch;
  padding-bottom: 8px;
  color: var(--text);
  font-size: clamp(14px, 1.3vw, 16px);
  line-height: 1.76;
  text-wrap: pretty;
}

.page-hero-media {
  width: 100%;
  height: clamp(200px, 21vw, 300px);
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
  background: var(--bone);
}

.page-hero-media picture,
.page-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
}

.page-hero-media img {
  object-fit: cover;
  object-position: 50% 28%;
}

/* The contact body now follows the shared masthead instead of
   impersonating another page hero inside the form column. */
.form-intro h2 {
  max-width: 12ch;
  margin-top: 14px;
  font-size: clamp(32px, 3.5vw, 46px);
  line-height: 0.98;
}

.form-intro h2 i {
  color: var(--mushroom);
  font-weight: 500;
}

/* Product detail shares the same paper, rules and display voice,
   while preserving the gallery-first hierarchy buyers need. */
.product-detail {
  border-bottom: 1px solid var(--rule);
}

.product-breadcrumb {
  margin-bottom: clamp(28px, 3vw, 42px);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}

.product-summary h1 {
  color: var(--ink);
  font-size: clamp(44px, 5vw, 68px);
  line-height: 0.94;
  letter-spacing: -0.02em;
}

.gallery-arrow {
  border-radius: 2px;
}

@media (max-width: 980px) {
  .page-hero-body {
    grid-template-columns: minmax(0, 1fr);
    align-content: end;
    gap: 18px;
  }

  .page-hero-lede {
    padding-bottom: 0;
  }
}

@media (max-width: 700px) {
  .page-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    min-height: 0;
    padding-block: clamp(22px, 6vw, 32px);
  }

  .page-hero-rail {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    padding: 0 0 12px;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }

  .page-hero-rail .label {
    max-width: none;
  }

  .page-hero h1 {
    font-size: clamp(36px, 9vw, 44px);
    line-height: 0.94;
  }

  .page-hero-media {
    height: clamp(180px, 48vw, 240px);
  }

  .page-hero::after {
    right: var(--px);
  }
}

/* ============================================================
   v103 — Short-form enquiry rhythm
   ============================================================ */
.partner-form .frow {
  gap: 18px;
}

.partner-form .fgroup {
  margin-bottom: 18px;
}

.partner-form .finput,
.partner-form .fselect,
.partner-form .ftextarea {
  padding: 12px 14px;
}

.partner-form .ftextarea {
  min-height: 118px;
}

.partner-form .fsub {
  margin-top: 24px;
}

/* ============================================================
   v101 — Contact form with a content-sized information card
   ============================================================ */
.partner-wrap {
  width: 100%;
  max-width: var(--shell);
  min-height: 0;
  margin-inline: auto;
  padding: clamp(44px, 5.5vw, 76px) var(--px) clamp(64px, 7vw, 96px);
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
  background: var(--paper);
}

.partner-form {
  min-width: 0;
  padding: 0;
  border-right: 0;
  background: transparent;
}

.partner-form > * {
  width: 100%;
  max-width: none;
}

.partner-aside {
  position: sticky;
  top: 96px;
  display: block;
  align-self: start;
  min-height: 0;
  max-height: none;
  padding: clamp(30px, 3vw, 42px);
  overflow: visible;
  background: var(--charcoal);
}

.partner-aside > * {
  max-width: none;
}

.partner-aside-inner {
  position: static;
  display: flex;
  flex-direction: column;
  gap: clamp(30px, 3vw, 42px);
  max-width: none;
  padding: 0;
}

.partner-aside .aside-head {
  margin-bottom: 10px;
}

@media (max-width: 1024px) and (min-width: 901px) {
  .partner-wrap {
    grid-template-columns: minmax(0, 1fr) minmax(286px, 34%);
    gap: 34px;
  }

  .partner-aside { padding: 28px; }

  .contact-lines > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
}

@media (max-width: 900px) {
  .partner-wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    padding-inline: var(--px);
  }

  .partner-aside {
    position: static;
    width: 100%;
    padding: clamp(28px, 7vw, 40px);
  }
}

/* ============================================================
   v98 — Connected process flow and restrained site motion
   ============================================================ */
.ab-steps {
  --step-gap: clamp(34px, 4vw, 64px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--step-gap);
}

.ab-steps li {
  position: relative;
  padding-top: 0;
  border-top: 0;
}

.ab-step-n {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, .52);
  border-radius: 50%;
  background: var(--charcoal);
  color: rgba(255, 255, 255, .92);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .08em;
}

.ab-steps li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 22px;
  left: 58px;
  right: calc(10px - var(--step-gap));
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .18));
}

.ab-steps li:not(:last-child)::before {
  content: '';
  position: absolute;
  top: 19px;
  right: calc(7px - var(--step-gap));
  width: 6px;
  height: 6px;
  border-top: 1px solid rgba(255, 255, 255, .42);
  border-right: 1px solid rgba(255, 255, 255, .42);
  transform: rotate(45deg);
}

.ab-steps h3 {
  margin: 18px 0 9px;
  font-size: clamp(16px, 1.3vw, 18px);
  font-weight: 600;
}

.ab-steps p {
  max-width: 38ch;
  color: rgba(255, 255, 255, .72);
  font-size: 14.5px;
  line-height: 1.65;
}

/* Sections arrive as a single calm gesture. Repeated items then follow
   with a short, capped stagger so long grids never feel theatrical. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity .62s cubic-bezier(.22, 1, .36, 1),
    transform .62s cubic-bezier(.22, 1, .36, 1);
}

.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

.js [data-reveal] [data-reveal-group] > * {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity .5s cubic-bezier(.22, 1, .36, 1),
    transform .5s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--reveal-order, 0) * 70ms + 80ms);
}

.js [data-reveal].is-revealed [data-reveal-group] > * {
  opacity: 1;
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  .pcard-img img,
  .ab-block-media img,
  .style-switch-media img {
    transition: transform .7s cubic-bezier(.22, 1, .36, 1);
  }

  .pcard:hover .pcard-img img,
  .ab-block-media:hover img,
  .style-switch-card:hover .style-switch-media img {
    transform: scale(1.025);
  }

  .btn {
    transition:
      color .2s var(--ease),
      background .2s var(--ease),
      border-color .2s var(--ease),
      transform .2s var(--ease);
  }

  .btn:hover { transform: translateY(-1px); }
}

@media (max-width: 760px) {
  .ab-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  .ab-steps li {
    min-height: 74px;
    padding-left: 66px;
  }

  .ab-step-n {
    position: absolute;
    top: 0;
    left: 0;
  }

  .ab-steps li:not(:last-child)::after {
    top: 54px;
    bottom: -22px;
    left: 22px;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .18));
  }

  .ab-steps li:not(:last-child)::before {
    top: auto;
    right: auto;
    bottom: -23px;
    left: 19px;
    transform: rotate(135deg);
  }

  .ab-steps h3 { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js [data-reveal].is-revealed,
  .js [data-reveal] [data-reveal-group] > *,
  .js [data-reveal].is-revealed [data-reveal-group] > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .pcard-img img,
  .ab-block-media img,
  .style-switch-media img,
  .btn {
    transition: none;
  }
}

/* ============================================================
   v97 — Discreet manual controls for the hero
   ============================================================ */
.banner-nav {
  position: absolute;
  right: var(--px);
  bottom: clamp(14px, 2.5vh, 24px);
  z-index: 11;
  display: flex;
  align-items: center;
  height: 44px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, .34);
  background: rgba(17, 17, 17, .36);
  color: #fff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.banner-nav-button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background .2s var(--ease);
}

.banner-nav-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.banner-nav-button:hover { background: rgba(255, 255, 255, .14); }

.banner-nav-button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
}

.banner-nav-count {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-inline: 4px;
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}

.banner-nav-count i {
  display: block;
  width: 18px;
  height: 1px;
  background: rgba(255, 255, 255, .52);
}

.banner-dots {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}

@media (max-width: 640px) {
  .banner-nav {
    right: 10px;
    bottom: 10px;
    height: 40px;
  }

  .banner-nav-button {
    width: 32px;
    height: 32px;
  }

  .banner-nav-count { display: none; }

  .banner-dots { bottom: 16px; }
}

/* ============================================================
   v92 — Slightly smaller, ratio-safe hero plate
   Reducing height alone would crop the 1900x750 video. Insetting
   the whole plate scales both axes together and preserves 38:15.
   The native 1900px width also prevents pointless upscaling on
   ultrawide displays.
   ============================================================ */
.banner {
  width: calc(100% - clamp(24px, 6vw, 112px));
  max-width: 1900px;
  margin-inline: auto;
}

/* ============================================================
   v93 — Collection specification rail
   The former four tall KPI cards made catalogue references look
   like dashboard analytics. This compact ledger keeps each value
   and its meaning together, while matching the inset hero plate.
   ============================================================ */
.trust--shelf {
  width: calc(100% - clamp(24px, 6vw, 112px));
  max-width: 1900px;
  margin-inline: auto;
  padding-inline: var(--px);
  border-block: 0;
  background: transparent;
}

.trust--shelf .trust-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: var(--shell);
  border-bottom: 1px solid var(--rule);
}

.trust--shelf .trust-item {
  min-width: 0;
  padding: clamp(17px, 1.5vw, 23px) clamp(16px, 2vw, 28px);
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-start;
  gap: clamp(10px, 1.2vw, 16px);
  border-right: 1px solid var(--rule-soft);
  background: transparent;
}

.trust--shelf .trust-item:first-child {
  padding-left: 0;
}

.trust--shelf .trust-item:last-child {
  padding-right: 0;
  border-right: 0;
}

.trust--shelf .trust-num,
.trust--shelf .trust-num--word {
  flex: 0 0 auto;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1;
}

.trust--shelf .trust-num small {
  font-family: var(--sans);
  font-size: 0.34em;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.trust--shelf .trust-label {
  max-width: none;
  font-size: 9px;
  line-height: 1.35;
  letter-spacing: 0.14em;
  text-wrap: pretty;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .trust--shelf {
    padding-inline: 0;
  }

  .trust--shelf .trust-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trust--shelf .trust-item,
  .trust--shelf .trust-item:first-child,
  .trust--shelf .trust-item:last-child {
    min-width: 0;
    padding: 16px clamp(12px, 4vw, 20px);
    border-right: 0;
    border-bottom: 1px solid var(--rule-soft);
  }

  .trust--shelf .trust-item:nth-child(odd) {
    border-right: 1px solid var(--rule-soft);
  }

  .trust--shelf .trust-item:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .trust--shelf .trust-label {
    font-size: 8px;
    white-space: normal;
  }
}

.page-hero + .sect {
  padding-top: clamp(38px, 4.5vw, 60px);
}

/* ============================================================
   v67 — Catalogue shelf alignment
   The plugin previously padded the section first and centred a
   second max-width container inside the remaining width. That put
   its content exactly one page gutter left of the site axis.
   The section now bleeds; the inner uses the same shell and gutter
   as every .wrap on the site.
   ============================================================ */
.bsc-shelf-section {
  padding: clamp(42px, 5vw, 68px) 0;
}

.bsc-inner {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--px);
}

.bsc-head {
  margin-bottom: 0;
}

.bsc-head-meta {
  margin-bottom: 12px;
}

.bsc-title {
  max-width: 16ch;
  font-size: clamp(30px, 3.5vw, 46px);
  line-height: 1;
}

.bsc-shelf {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  gap: clamp(18px, 2vw, 28px);
  margin: clamp(26px, 3vw, 38px) 0 18px;
}

.bsc-cover {
  gap: 12px;
}

.bsc-cover-art {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 14px 30px -16px rgba(16, 16, 15, 0.28),
    0 3px 8px -4px rgba(16, 16, 15, 0.16);
}

@media (max-width: 900px) {
  .bsc-shelf {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.bsc-cover-meta {
  padding-inline: 0;
}

.bsc-foot {
  max-width: 72ch;
}

@media (max-width: 720px) {
  .bsc-shelf-section {
    padding-block: 34px 42px;
  }

  .bsc-head-meta {
    align-items: flex-start;
    margin-bottom: 10px;
  }

  .bsc-counter {
    display: none;
  }

  .bsc-shelf {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 24px;
  }

  .bsc-cover {
    width: min(100%, 520px);
    margin-inline: auto;
  }
}

/* ============================================================
   v68 — Compact footer
   Conversion already happens in the header and page body. The
   footer closes the page quietly: identity, navigation, legal and
   a direct email address — no repeated CTA.
   ============================================================ */
.site-footer {
  padding: 0;
  background: var(--paper);
  border-top: 1px solid var(--rule);
}

.footer-body {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--px);
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(28px, 5vw, 80px);
  align-items: end;
  margin: 0;
  padding-block: clamp(26px, 3vw, 38px) 22px;
  border-bottom: 1px solid var(--rule);
}

.footer-top > div:first-child {
  display: flex;
  align-items: flex-end;
  gap: clamp(20px, 3vw, 42px);
  min-width: 0;
}

.footer-tagline {
  max-width: 34ch;
  margin: 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.55;
}

.footer-nav {
  display: flex;
  justify-content: flex-end;
  gap: clamp(18px, 2.4vw, 34px);
  padding: 0;
}

.footer-nav a {
  padding: 0;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer-nav a:hover,
.footer-nav a:focus-visible,
.footer-bot a:hover,
.footer-bot a:focus-visible {
  color: var(--ink);
}

.footer-bot {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding-block: 14px 18px;
  color: var(--faint);
  font-size: 10.5px;
  letter-spacing: 0.025em;
}

.footer-bot a {
  color: var(--muted);
  transition: color 0.18s var(--ease);
}

@media (max-width: 760px) {
  .footer-top {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    align-items: start;
    padding-block: 26px 20px;
  }

  .footer-top > div:first-child {
    align-items: flex-start;
    justify-content: space-between;
  }

  .footer-nav {
    justify-content: flex-start;
    gap: 12px 24px;
  }
}

@media (max-width: 480px) {
  .footer-top > div:first-child {
    display: grid;
    gap: 12px;
  }

  .footer-tagline {
    max-width: 30ch;
  }

  .footer-bot {
    flex-direction: column;
    gap: 5px;
  }
}

/* ============================================================
   v69 — Layout measure, Quality plate and WhatsApp contact
   ============================================================ */
@media (min-width: 861px) {
  .sh--specimen {
    grid-template-columns: minmax(230px, .24fr) minmax(0, 1fr);
  }

  .sh--specimen .sh-gutter .label {
    max-width: none;
    white-space: nowrap;
  }
}

.specimen-plate img {
  object-fit: contain;
  object-position: center;
}

@media (min-width: 901px) {
  .cta-band .cta-inner {
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  }

  .cta-band .cta-inner h2 {
    max-width: 17ch;
    font-size: clamp(34px, 4vw, 60px);
  }
}

.whatsapp-fab {
  position: fixed;
  right: clamp(16px, 2vw, 28px);
  bottom: clamp(16px, 2vw, 28px);
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 7px 16px 7px 7px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  /* Chữ trắng trên #1f8f5f chỉ đạt 4.08:1, mà nhãn là 10.5px nên cần
     4.5:1. #1a7a51 cho 5.32:1 và vẫn là xanh WhatsApp. */
  background: #1a7a51;
  color: #fff;
  box-shadow: 0 10px 28px rgba(16, 16, 15, .18);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  animation: whatsapp-float 5s ease-in-out infinite;
  transition: background .2s var(--ease), box-shadow .2s var(--ease);
}

.whatsapp-fab-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  font-size: 9px;
  letter-spacing: .06em;
}

.whatsapp-fab-mark img {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
}

.whatsapp-fab:hover,
.whatsapp-fab:focus-visible {
  background: #17784e;
  box-shadow: 0 14px 34px rgba(16, 16, 15, .24);
  animation-play-state: paused;
}

.whatsapp-fab:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

@keyframes whatsapp-float {
  0%, 88%, 100% { transform: translateY(0); }
  93% { transform: translateY(-3px); }
}

@media (max-width: 520px) {
  .whatsapp-fab {
    width: 48px;
    height: 48px;
    min-height: 0;
    padding: 7px;
  }

  .whatsapp-fab-label { display: none; }
  .whatsapp-fab-mark { width: 32px; height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-fab { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════
   BRAND LOCKUP
   ------------------------------------------------------------------
   The header used to be a text-only wordmark. The monogram now sits
   in front of it, so the logo carries a shape as well as a name — a
   name alone gives a first-time buyer nothing to recognise later.

   The wordmark stays as live text rather than becoming part of the
   image: it stays selectable, it scales with the user's font size,
   and it keeps matching the Cormorant on the rest of the page.
   ══════════════════════════════════════════════════════════════════ */

.logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}

.logo-mark {
  /* Aspect is 1000 × 872.4. Height is what needs to be stable next to
     the wordmark, so width follows from it. Both are declared so the
     header never reflows while the SVG is still loading.
     Sized larger than a decorative icon would be: it is carrying the
     brand's initials now, so it has to be read, not just seen. */
  display: block;
  width: 36px;
  height: 31px;
  flex: 0 0 auto;
}

/* The wordmark: the two text spans, held together so the gap above
   separates mark from name and not the letters from each other. */
.logo-type {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

/* The mark IS the JJ. Setting "JJ" in type beside it prints the same
   two letters twice — the monogram, then the letters again. So the
   wordmark carries only what the mark cannot say: HAIR. Read together
   the lockup is still JJ HAIRS, once. */
.logo-type .logo-jj,
.logo-type .logo-sep {
  display: none;
}

.logo-mark + .logo-type .logo-hair {
  /* Promoted from a 9px kicker to the wordmark itself, so it can hold
     its own weight next to the mark rather than trailing it. */
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 7px;
  color: var(--black);
  padding-bottom: 0;
}

@media (max-width: 900px) {
  .logo { gap: 9px; }
  .logo-mark { width: 31px; height: 27px; }
  .logo-mark + .logo-type .logo-hair { font-size: 13.5px; letter-spacing: 5.5px; }
}

@media (max-width: 420px) {
  /* The tracking is what goes first here. Letter-spacing is styling;
     the letters themselves are the name. */
  .logo { gap: 8px; }
  .logo-mark { width: 27px; height: 23px; }
  .logo-mark + .logo-type .logo-hair { font-size: 12px; letter-spacing: 4px; }
}

/* On the dark bands and anywhere the header inverts, swap in the white
   file. A CSS filter would do it in the browser but not in email, and
   two files that are both real artwork beat one that is a rendering
   trick. */
.sect--dark .logo-mark,
.site-footer--dark .logo-mark {
  content: url("/assets/images/brand/logo-mark-light.svg");
}

@media print {
  .logo-mark { width: 30px; height: 26px; }
}

/* ══════════════════════════════════════════════════════════════════
   LEGAL DOCUMENT
   ------------------------------------------------------------------
   A privacy policy is read by two very different people: a buyer
   skimming for "do they sell my data", and a lawyer checking clauses.
   Long measure and generous leading serve the first; real tables and
   anchored headings serve the second.
   ══════════════════════════════════════════════════════════════════ */

.legal-doc { max-width: 72ch; }

.legal-doc h2 {
  font-family: var(--serif);
  font-size: clamp(21px, 2.2vw, 26px);
  font-weight: 600;
  line-height: 1.25;
  margin: 52px 0 14px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  scroll-margin-top: 96px;
}

.legal-doc h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 34px; }

.legal-doc h3 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 28px 0 10px;
  color: var(--black);
}

.legal-doc p { margin: 0 0 15px; line-height: 1.75; }

.legal-meta {
  font-size: 12.5px;
  color: var(--muted);
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

/* The summary a reader deserves before four screens of clauses. */
.legal-callout {
  background: var(--bg);
  border-left: 2px solid var(--black);
  padding: 20px 24px;
  margin: 26px 0 8px;
}
.legal-callout p { margin: 0; font-size: 14.5px; }
.legal-callout--warn { border-left-color: #a8622a; margin-top: 44px; }

.legal-bullets { margin: 0 0 16px; padding-left: 20px; }
.legal-bullets li { margin-bottom: 9px; line-height: 1.7; color: var(--text); }

.legal-list { margin: 0 0 18px; }
.legal-list > div {
  display: grid;
  grid-template-columns: minmax(140px, 32%) 1fr;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.legal-list dt { font-size: 12.5px; color: var(--muted); }
.legal-list dd { margin: 0; font-size: 14px; }

/* Tables carry the retention periods and the processor list — the two
   things a reader most often comes here to check. They stay tables. */
.legal-table-wrap { overflow-x: auto; margin: 0 0 22px; }
.legal-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 460px; }
.legal-table th,
.legal-table td { text-align: left; padding: 11px 14px 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.6; }
.legal-table thead th {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom-color: var(--black);
  white-space: nowrap;
}
.legal-table td:first-child { padding-right: 20px; }

/* Placeholders that must not survive to production. Deliberately loud:
   a bracket in a live privacy policy is worse than an ugly highlight. */
.legal-todo {
  background: #ffe9c7;
  color: #6b4310;
  padding: 1px 6px;
  border-radius: 2px;
  font-weight: 600;
  font-size: 0.95em;
}

.legal-back { margin-top: 40px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 640px) {
  .legal-list > div { grid-template-columns: 1fr; gap: 2px; }
  .legal-doc h2 { margin-top: 40px; }
}

/* The privacy line under the submit button. Quieter than the promise
   above it, but not hidden — it is the notice, not fine print. */
.fnote--privacy {
  max-width: 46ch;
  margin-inline: auto;
  line-height: 1.6;
  color: var(--muted);
}
.fnote--privacy a { color: var(--black); text-decoration: underline; text-underline-offset: 2px; }

.footer-bot a[href="/privacy"] { color: inherit; }
.footer-bot a[href="/privacy"]:hover { color: var(--black); }

/* ============================================================
   v84 — Editorial page mastheads
   Concise hierarchy without forcing photography into the header.
   ============================================================ */
.page-hero--editorial {
  background: var(--paper);
  border-bottom: 1px solid var(--rule-soft);
}

.editorial-masthead {
  padding-block: clamp(36px, 3.5vw, 52px);
}

.editorial-masthead > .label {
  display: block;
  margin-bottom: clamp(20px, 2vw, 28px);
}

.editorial-masthead-row {
  max-width: 880px;
}

.editorial-masthead h1 {
  max-width: 15ch;
  font-size: clamp(46px, 4.8vw, 68px);
  font-weight: 600;
  line-height: 0.94;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.editorial-masthead p {
  max-width: 38ch;
  margin-top: 14px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
}

.page-hero--legal .editorial-masthead {
  padding-block: clamp(36px, 4vw, 52px);
}

.orientation {
  padding-block: clamp(44px, 4.5vw, 64px);
}

.orientation-inner {
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  align-items: center;
}

.orientation-copy h1 {
  max-width: 12ch;
  font-size: clamp(46px, 4.7vw, 66px);
  line-height: 0.96;
  text-wrap: balance;
}

.orientation-copy h1 > span {
  display: block;
  white-space: normal;
}

.orientation-copy h1 i {
  color: var(--mushroom);
  font-weight: 500;
}

.orientation-detail {
  display: block;
  justify-content: flex-end;
  padding-top: 0;
  border-top: 0;
}

.orientation-detail p {
  max-width: 42ch;
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
}

.orientation-actions {
  margin-top: 22px;
}

.rfq-bar[hidden] {
  display: none;
}

@media (max-width: 700px) {
  .editorial-masthead {
    padding-block: 34px 38px;
  }

  .editorial-masthead > .label {
    margin-bottom: 18px;
  }

  .editorial-masthead-row {
    max-width: none;
  }

  .editorial-masthead h1 {
    max-width: 11ch;
    font-size: clamp(43px, 12vw, 54px);
  }

  .editorial-masthead p {
    margin-top: 12px;
  }

  .ab-facts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 18px;
  }

  .ab-facts-grid .ab-fact {
    padding-left: 18px;
    border-left: 1px solid var(--hairline);
  }

  .ab-facts-grid .ab-fact:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .prod-grid,
  .prod-grid--human,
  .prod-grid--catalog,
  .prod-grid--3,
  .prod-grid--lookbook {
    grid-template-columns: minmax(0, 1fr);
  }

  .prod-grid--lookbook > .pcard:nth-child(n) {
    grid-column: auto;
  }

  .orientation-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .orientation-copy h1 {
    font-size: clamp(44px, 12vw, 56px);
  }

  .orientation-detail {
    justify-content: flex-start;
  }
}

/* ============================================================
   v87 — Compact audience band
   One section CTA and three concise buyer groups replace the long,
   repeated index rows.
   ============================================================ */
.audience-band {
  padding-block: clamp(46px, 4vw, 60px);
  border-block: 1px solid var(--rule-soft);
}

.audience-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}

.audience-head .label {
  display: block;
  margin-bottom: 14px;
}

.audience-head h2 {
  font-size: clamp(34px, 3.6vw, 48px);
  line-height: 0.98;
}

.audience-head .text-link {
  flex: none;
  margin-bottom: 5px;
}

.audience-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(24px, 2.4vw, 32px);
  border-block: 1px solid var(--rule);
}

.audience-grid li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  min-width: 0;
  padding: clamp(24px, 2.2vw, 30px);
  border-left: 1px solid var(--rule);
}

.audience-grid li:first-child {
  padding-left: 0;
  border-left: 0;
}

.audience-index {
  padding-top: 7px;
  color: var(--mushroom);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  font-variant-numeric: tabular-nums;
}

.audience-grid h3 {
  font-family: var(--serif);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 600;
  line-height: 1;
}

.audience-grid p {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .audience-band {
    padding-block: 44px;
  }

  .audience-head {
    align-items: flex-start;
  }

  .audience-head h2 {
    max-width: 9ch;
    font-size: 38px;
  }

  .audience-head .text-link {
    margin-top: 28px;
  }

  .audience-grid {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 28px;
  }

  .audience-grid li,
  .audience-grid li:first-child {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 14px;
    padding: 22px 0;
    border-left: 0;
    border-top: 1px solid var(--rule-soft);
  }

  .audience-grid li:first-child {
    border-top: 0;
  }

  .audience-index {
    padding-top: 5px;
  }
}

/* Collection proof rail: verified specifications, kept dense and scannable. */
.collection-specs {
  padding-block: clamp(44px, 4.5vw, 64px);
  border-block: 1px solid var(--rule);
  background: var(--bone);
}

.collection-specs-inner {
  display: grid;
  grid-template-columns: minmax(240px, .75fr) minmax(0, 1.25fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: end;
}

.collection-specs h2 {
  max-width: 12ch;
  margin-top: 12px;
  font-size: clamp(32px, 3.4vw, 46px);
  line-height: 1;
}

.collection-specs-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-block: 1px solid var(--rule);
}

.collection-specs-grid > div {
  min-width: 0;
  padding: 18px 14px;
  border-left: 1px solid var(--rule);
}

.collection-specs-grid > div:first-child {
  padding-left: 0;
  border-left: 0;
}

.collection-specs-grid dt {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.collection-specs-grid dd {
  margin-top: 8px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(18px, 1.7vw, 23px);
  line-height: 1.08;
}

.collection-specs-note {
  grid-column: 2;
  max-width: 74ch;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .collection-specs-inner { grid-template-columns: 1fr; }
  .collection-specs h2 { max-width: 15ch; }
  .collection-specs-note { grid-column: 1; }
}

@media (max-width: 640px) {
  .collection-specs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .collection-specs-grid > div,
  .collection-specs-grid > div:first-child { padding: 16px 12px; border-left: 0; border-top: 1px solid var(--rule-soft); }
  .collection-specs-grid > div:nth-child(odd) { padding-left: 0; }
  .collection-specs-grid > div:nth-child(even) { border-left: 1px solid var(--rule); }
}

/* ============================================================
   v91 — Display-copy measure and tablet reflow
   Cormorant's zero glyph is unusually narrow, so `ch` produced a
   much smaller reading measure than the copy needed. Display type
   uses `em`; tablet split bands reflow before either column becomes
   a stack of isolated words.
   ============================================================ */
.orientation-copy h1 {
  max-width: 10em;
  text-wrap: balance;
}

.cta-band .cta-inner h2 {
  max-width: 12em;
  text-wrap: balance;
}

.collection-specs h2 {
  max-width: 10em;
  text-wrap: balance;
}

@media (max-width: 980px) {
  .orientation-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }

  .orientation-copy h1 {
    max-width: 10.5em;
  }

  .orientation-detail {
    max-width: 680px;
    padding-top: 22px;
    border-top: 1px solid var(--rule);
  }
}

@media (max-width: 700px) {
  .orientation-copy h1 {
    max-width: 9.5em;
    font-size: clamp(40px, 10.8vw, 48px);
    line-height: .98;
  }

  .cta-band .cta-inner h2 {
    max-width: 10em;
  }
}

/* ============================================================
   v94 — Compact text-only mastheads
   These heroes contain no media, so a narrow, stacked copy block
   left most of the plate visually empty. Desktop now uses the
   available second column for the lede; small screens keep the
   natural reading order with tighter vertical rhythm.
   ============================================================ */
.editorial-masthead {
  padding-block: clamp(28px, 2.8vw, 40px);
}

.editorial-masthead > .label {
  margin-bottom: clamp(16px, 1.5vw, 22px);
}

.editorial-masthead-row {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(250px, 0.55fr);
  gap: clamp(32px, 5vw, 76px);
  align-items: end;
  max-width: none;
}

.editorial-masthead h1 {
  max-width: 9em;
}

.editorial-masthead p {
  margin-top: 0;
  padding-bottom: 0.3em;
}

@media (max-width: 760px) {
  .editorial-masthead {
    padding-block: 26px 30px;
  }

  .editorial-masthead > .label {
    margin-bottom: 15px;
  }

  .editorial-masthead-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .editorial-masthead h1 {
    max-width: 9em;
    font-size: clamp(40px, 11vw, 50px);
  }

  .editorial-masthead p {
    max-width: 42ch;
    margin-top: 0;
    padding-bottom: 0;
  }
}

/* ============================================================
   v96 — One shell axis and one internal rhythm for the proof rail
   The rail previously inherited the hero inset and then added the
   page gutter again. Its content therefore started on a second axis.
   Each metric now uses the same compact two-row structure, so labels
   no longer drift or collide with values of different widths.
   ============================================================ */
.trust--shelf {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

.trust--shelf .trust-row {
  --trust-cell-pad: clamp(18px, 2vw, 28px);
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: calc(var(--px) - var(--trust-cell-pad));
}

.trust--shelf .trust-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  align-items: start;
  padding-inline: var(--trust-cell-pad);
}

.trust--shelf .trust-item:first-child {
  padding-left: var(--trust-cell-pad);
}

.trust--shelf .trust-item:last-child {
  padding-right: var(--trust-cell-pad);
}

.trust--shelf .trust-num,
.trust--shelf .trust-num--word {
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0;
}

@media (max-width: 700px) {
  .trust--shelf .trust-row {
    padding-inline: 0;
  }

  .trust--shelf .trust-item,
  .trust--shelf .trust-item:first-child,
  .trust--shelf .trust-item:last-child {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    align-items: start;
    padding: 15px var(--px);
  }
}