/* ==========================================================================
   Wig atelier — wholesale (B2B) brochure site
   Shared stylesheet for the Hebrew (RTL) and English (LTR) editions.
   Logical properties throughout, so one sheet serves both directions.
   ========================================================================== */

/* --- Design tokens ------------------------------------------------------ */
:root {
  /* Sampled directly from the DEBI WIGS logo artwork. --cream is the
     logo's own background, so the mark sits on it seamlessly. */
  --ink:            #20211e;
  --espresso:       #3a3532;
  --mocha:          #6e625c;
  --taupe:          #9c8d86;
  --rose:           #bc8a87;
  --rose-dim:       #d6aba6;
  --sand:           #e8dacf;
  --cream:          #f7efe9;
  --paper:          #fdf8f4;
  --line:           rgba(32, 33, 30, .12);

  --font-display: 'Frank Ruhl Libre', 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Assistant', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --step--1: clamp(.82rem, .78rem + .2vw, .92rem);
  --step-0:  clamp(1rem, .95rem + .25vw, 1.12rem);
  --step-1:  clamp(1.25rem, 1.1rem + .6vw, 1.6rem);
  --step-2:  clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
  --step-3:  clamp(2.1rem, 1.5rem + 2.8vw, 3.6rem);
  --step-4:  clamp(2.6rem, 1.6rem + 4.4vw, 5.2rem);

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 2px;
  --shadow-lift: 0 2px 6px rgba(32,33,30,.06), 0 20px 50px rgba(32,33,30,.12);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
img, svg { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--espresso);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  color: var(--ink);
  letter-spacing: -.01em;
  text-wrap: balance;
}

a { color: inherit; text-decoration-color: var(--rose); text-underline-offset: .25em; }

/* --- Layout primitives -------------------------------------------------- */
.shell { width: min(1240px, 100% - var(--gutter) * 2); margin-inline: auto; }
.section { padding-block: clamp(4.5rem, 10vw, 9rem); }
.section--tint { background: var(--cream); }
.section--dark { background: var(--ink); color: var(--sand); }
.section--dark h2, .section--dark h3 { color: var(--paper); }

.eyebrow {
  font-size: var(--step--1);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--taupe);
  font-weight: 600;
  margin-block-end: 1.1rem;
}
.section--dark .eyebrow { color: var(--rose); }

.section-head { max-width: 62ch; margin-block-end: clamp(2.5rem, 5vw, 4rem); }
.section-head h2 { font-size: var(--step-3); }
.section-head p { margin-block-start: 1.25rem; color: var(--mocha); font-size: var(--step-1); line-height: 1.5; }
.section--dark .section-head p { color: var(--sand); opacity: .8; }

/* Hairline flourish used above major headings */
.rule { inline-size: 56px; block-size: 1px; background: var(--rose); margin-block-end: 1.75rem; }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .95rem 2rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease), transform .35s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: var(--mocha); }
.btn--ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.btn--accent { background: var(--rose); color: var(--ink); }
.btn--accent:hover { background: var(--rose-dim); }
.btn--block { inline-size: 100%; justify-content: center; }

/* --- Header ------------------------------------------------------------- */
.header {
  position: sticky; inset-block-start: 0; z-index: 60;
  background: rgba(253, 248, 244, .85);
  backdrop-filter: blur(14px);
  border-block-end: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.header.is-stuck { border-block-end-color: var(--line); }
.header__inner { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); min-block-size: 84px; }

.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; margin-inline-end: auto; }
.brand__mark { block-size: 42px; inline-size: auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name { font-family: var(--font-display); font-size: 1.35rem; color: var(--ink); letter-spacing: .02em; }
.brand__tag { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--taupe); }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.nav a {
  font-size: var(--step--1); font-weight: 600; letter-spacing: .06em;
  text-decoration: none; color: var(--mocha); padding-block: .35rem;
  border-block-end: 1px solid transparent; transition: color .25s var(--ease), border-color .25s var(--ease);
}
.nav a:hover { color: var(--ink); border-block-end-color: var(--rose); }

.header__actions { display: flex; align-items: center; gap: .75rem; }
.lang {
  font-size: var(--step--1); font-weight: 600; letter-spacing: .1em;
  text-decoration: none; color: var(--taupe); padding: .5rem .7rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.lang:hover { color: var(--ink); border-color: var(--ink); }

.burger { display: none; background: none; border: 0; padding: .6rem; cursor: pointer; }
.burger span { display: block; inline-size: 24px; block-size: 1.5px; background: var(--ink); transition: transform .3s var(--ease), opacity .3s var(--ease); }
.burger span + span { margin-block-start: 6px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 940px) {
  .burger { display: block; order: 3; }
  .nav {
    position: fixed; inset-block-start: 84px; inset-inline: 0; inset-block-end: 0;
    flex-direction: column; align-items: flex-start; justify-content: flex-start;
    gap: .5rem; padding: 2rem var(--gutter);
    background: var(--paper);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: opacity .3s var(--ease), transform .3s var(--ease);
  }
  .nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav a { font-size: var(--step-1); font-family: var(--font-display); font-weight: 500; }
  .header__actions .btn { display: none; }
}

/* --- Hero --------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; background: var(--cream); }
.hero__inner {
  display: grid; gap: clamp(2.5rem, 6vw, 5rem);
  grid-template-columns: 1fr;
  align-items: center;
  padding-block: clamp(4rem, 9vw, 7.5rem);
}
@media (min-width: 900px) { .hero__inner { grid-template-columns: 1.05fr .95fr; } }

.hero h1 { font-size: var(--step-4); }
.hero h1 em { font-style: italic; color: var(--mocha); }
.hero__lead {
  margin-block-start: 1.75rem; font-size: var(--step-1);
  color: var(--mocha); line-height: 1.55; max-width: 46ch;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-block-start: 2.5rem; }
.hero__note { margin-block-start: 1.5rem; font-size: var(--step--1); color: var(--taupe); }

.hero__art { position: relative; aspect-ratio: 4 / 5; }
.hero__art img { inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: var(--radius); }
.hero__art::after {
  content: ''; position: absolute; inset-block-end: -18px; inset-inline-end: -18px;
  inline-size: 60%; block-size: 60%; border: 1px solid var(--rose); z-index: -1;
}

/* Placeholder tile — stands in until real photography arrives */
.ph {
  display: grid; place-items: center; inline-size: 100%; block-size: 100%;
  background:
    linear-gradient(135deg, rgba(188,138,135,.18), rgba(110,98,92,.10) 55%, rgba(232,218,207,.5)),
    var(--sand);
  color: var(--mocha); font-size: var(--step--1); letter-spacing: .18em; text-transform: uppercase;
  border-radius: var(--radius);
}

/* --- Trust strip -------------------------------------------------------- */
.trust { border-block: 1px solid var(--line); background: var(--paper); }
.trust__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  padding-block: clamp(2rem, 4vw, 3rem);
}
.trust__item { padding: .75rem clamp(.5rem, 2vw, 1.5rem); text-align: center; }
.trust__item + .trust__item { border-inline-start: 1px solid var(--line); }
.trust__num { font-family: var(--font-display); font-size: var(--step-2); color: var(--ink); display: block; }
.trust__label { font-size: var(--step--1); color: var(--taupe); letter-spacing: .08em; }
@media (max-width: 620px) {
  .trust__item:nth-child(odd) { border-inline-start: 0; }
  .trust__item:nth-child(n+3) { border-block-start: 1px solid var(--line); }
}

/* --- Collection grid ---------------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: .6rem; margin-block-end: 2.5rem; }
.chip {
  padding: .55rem 1.25rem; border: 1px solid var(--line); background: transparent;
  border-radius: 999px; font-size: var(--step--1); font-weight: 600; color: var(--mocha);
  cursor: pointer; transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.chip:hover { border-color: var(--mocha); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.grid-cards { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: box-shadow .4s var(--ease), transform .4s var(--ease); }
.card:hover { box-shadow: var(--shadow-lift); transform: translateY(-4px); }
.card__media { aspect-ratio: 3 / 4; overflow: hidden; }
.card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.card:hover .card__media img { transform: scale(1.05); }
.card__body { padding: 1.4rem 1.5rem 1.75rem; }
.card__kicker { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--rose); font-weight: 700; }
.card__body h3 { font-size: var(--step-1); margin-block: .5rem .6rem; }
.card__body p { color: var(--mocha); font-size: var(--step--1); line-height: 1.6; }
.card__meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-block-start: 1rem; }
.tag { font-size: .7rem; letter-spacing: .06em; padding: .25rem .6rem; border: 1px solid var(--line); border-radius: 999px; color: var(--taupe); }
.card.is-hidden { display: none; }

/* --- Value propositions ------------------------------------------------- */
.value-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.value { padding-block-start: 1.75rem; border-block-start: 1px solid rgba(232,218,207,.25); }
.section:not(.section--dark) .value { border-block-start-color: var(--line); }
.value__idx { font-family: var(--font-display); font-size: var(--step--1); color: var(--rose); letter-spacing: .1em; }
.value h3 { font-size: var(--step-1); margin-block: .75rem .75rem; }
.value p { font-size: var(--step-0); line-height: 1.65; opacity: .85; }

/* --- Process ------------------------------------------------------------ */
.steps { display: grid; gap: clamp(1.5rem, 3vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); counter-reset: step; }
.step { position: relative; padding: 2rem 1.75rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--font-display); font-size: var(--step-2); color: var(--sand); line-height: 1;
}
.step h3 { font-size: var(--step-1); margin-block: .9rem .6rem; }
.step p { font-size: var(--step--1); color: var(--mocha); }

/* --- FAQ ---------------------------------------------------------------- */
.faq { max-width: 78ch; }
.faq details { border-block-end: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: 1.5rem; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: var(--step-1); color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 1.6rem; color: var(--rose); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-block-end: 1.5rem; color: var(--mocha); max-width: 62ch; }

/* --- Quote form --------------------------------------------------------- */
.quote { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .quote { grid-template-columns: .9fr 1.1fr; } }

.form { display: grid; gap: 1.25rem; }
.form__row { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: .45rem; }
.field label { font-size: var(--step--1); font-weight: 600; color: var(--sand); letter-spacing: .04em; }
.field input, .field select, .field textarea {
  padding: .85rem 1rem; background: rgba(253,248,244,.06);
  border: 1px solid rgba(232,218,207,.28); border-radius: var(--radius);
  color: var(--paper); transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(232,218,207,.45); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--rose); background: rgba(253,248,244,.1); }
.field select option { background: var(--ink); color: var(--paper); }
.field textarea { resize: vertical; min-block-size: 120px; }
.form__note { font-size: var(--step--1); color: var(--taupe); }

.contact-list { display: grid; gap: 1.5rem; margin-block-start: 2rem; }
.contact-item { display: flex; gap: 1rem; align-items: flex-start; }
.contact-item__label { font-size: var(--step--1); letter-spacing: .16em; text-transform: uppercase; color: var(--rose); min-inline-size: 90px; padding-block-start: .3rem; }
.contact-item__value { font-size: var(--step-1); font-family: var(--font-display); color: var(--paper); text-decoration: none; }
.contact-item__value:hover { text-decoration: underline; }

/* --- Footer ------------------------------------------------------------- */
.footer { background: var(--ink); color: var(--taupe); padding-block: clamp(3rem, 6vw, 5rem) 2.5rem; border-block-start: 1px solid rgba(232,218,207,.12); }
.footer__grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.footer h4 { font-size: var(--step--1); letter-spacing: .16em; text-transform: uppercase; color: var(--sand); font-family: var(--font-body); font-weight: 700; margin-block-end: 1rem; }
.footer ul { list-style: none; padding: 0; display: grid; gap: .6rem; }
.footer a { text-decoration: none; font-size: var(--step--1); transition: color .25s var(--ease); }
.footer a:hover { color: var(--rose); }
/* Extra end padding keeps the last line clear of the floating WhatsApp pill */
.footer__bottom { margin-block-start: 3rem; padding-block: 1.75rem 3.5rem; border-block-start: 1px solid rgba(232,218,207,.12); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: var(--step--1); }

/* --- Floating WhatsApp -------------------------------------------------- */
.wa {
  position: fixed; inset-block-end: 24px; inset-inline-end: 24px; z-index: 70;
  display: flex; align-items: center; gap: .6rem;
  padding: .85rem 1.25rem; border-radius: 999px;
  /* Brand rose rather than WhatsApp green: it holds its own against both the
     cream and the charcoal sections, and the glyph carries the recognition. */
  background: var(--rose); color: var(--ink); text-decoration: none; font-weight: 600; font-size: var(--step--1);
  box-shadow: var(--shadow-lift);
  transition: transform .3s var(--ease), background-color .3s var(--ease);
}
.wa:hover { transform: translateY(-3px); background: var(--rose-dim); }
.wa svg { inline-size: 20px; block-size: 20px; fill: currentColor; }

/* --- Scroll reveal ------------------------------------------------------ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* --- Utility ------------------------------------------------------------ */
.visually-hidden {
  position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ==========================================================================
   Motion layer + editorial sections
   ========================================================================== */

/* --- Video hero ---------------------------------------------------------
   The <video> is decorative: muted, looping, inert to assistive tech, and
   never required for the page to make sense. If the file is missing or the
   browser refuses to autoplay, the poster image shows and nothing breaks. */
.hero--video { position: relative; min-block-size: min(92vh, 900px); display: grid; align-items: center; background: var(--ink); }
.hero--video > .shell { position: relative; z-index: 2; }
.hero__media { position: absolute; inset: 0; overflow: hidden; }
.hero__media video,
.hero__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* Scrim: dark enough for AA text contrast, angled so it thins out over the
   side the copy does not occupy. */
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(26,22,20,.55), rgba(26,22,20,.25) 45%, rgba(26,22,20,.72)),
    linear-gradient(to var(--scrim-dir, left), rgba(26,22,20,.65), transparent 65%);
}
.hero--video h1, .hero--video .hero__lead, .hero--video .hero__note { color: var(--paper); }
.hero--video .hero__lead { color: var(--sand); }
.hero--video .eyebrow { color: var(--rose-dim); }
.hero--video h1 em { color: var(--rose-dim); }
.hero--video .btn--ghost { border-color: rgba(253,248,244,.45); color: var(--paper); }
.hero--video .btn--ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* Scroll cue */
.scroll-cue {
  position: absolute; inset-block-end: 2rem; inset-inline-start: 50%;
  translate: -50% 0; z-index: 3;
  inline-size: 1px; block-size: 56px; background: rgba(253,248,244,.35); overflow: hidden;
}
.scroll-cue::after {
  content: ''; position: absolute; inset-inline: 0; block-size: 40%;
  background: var(--rose); animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue { 0% { inset-block-start: -40%; } 100% { inset-block-start: 100%; } }

/* --- Headline rise ------------------------------------------------------ */
.rise { display: inline-block; overflow: hidden; vertical-align: bottom; }
.rise > span {
  display: inline-block;
  translate: 0 105%;
  animation: rise .95s var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 110ms + 150ms);
}
@keyframes rise { to { translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .rise > span { translate: 0 0; animation: none; } }

/* --- Staggered reveal --------------------------------------------------- */
.reveal { transition-delay: calc(var(--d, 0) * 90ms); }

/* --- Marquee ------------------------------------------------------------
   Duplicated track so the loop is seamless; the copy is hidden from screen
   readers on the second pass. */
.marquee { overflow: hidden; border-block: 1px solid var(--line); background: var(--cream); padding-block: 1.4rem; }
.marquee__track { display: flex; inline-size: max-content; animation: slide 38s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; gap: 3.5rem; padding-inline-end: 3.5rem; }
.marquee__item { font-family: var(--font-display); font-size: var(--step-1); color: var(--mocha); white-space: nowrap; }
.marquee__dot { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--rose); flex: none; }
@keyframes slide { to { translate: -50% 0; } }
[dir="rtl"] .marquee__track { animation-name: slide-rtl; }
@keyframes slide-rtl { to { translate: 50% 0; } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* --- Lookbook ----------------------------------------------------------- */
.lookbook {
  display: grid; gap: clamp(.75rem, 1.5vw, 1.25rem);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 760px) { .lookbook { grid-template-columns: repeat(4, 1fr); } }
.look { position: relative; overflow: hidden; aspect-ratio: 3 / 4; background: var(--sand); }
.look--tall { grid-row: span 2; aspect-ratio: 3 / 8; }
@media (max-width: 759px) { .look--tall { grid-row: span 1; aspect-ratio: 3 / 4; } }
.look img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale 1.1s var(--ease); }
.look:hover img { scale: 1.06; }
.look__cap {
  position: absolute; inset-block-end: 0; inset-inline: 0; padding: 1.5rem 1.25rem 1.1rem;
  background: linear-gradient(to top, rgba(26,22,20,.78), transparent);
  color: var(--paper); font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase;
  translate: 0 100%; opacity: 0; transition: translate .5s var(--ease), opacity .5s var(--ease);
}
.look:hover .look__cap, .look:focus-within .look__cap { translate: 0 0; opacity: 1; }

/* --- Spec table --------------------------------------------------------- */
.spec-wrap { overflow-x: auto; }
.spec { inline-size: 100%; border-collapse: collapse; min-inline-size: 640px; }
.spec caption { text-align: start; color: var(--taupe); font-size: var(--step--1); padding-block-end: 1rem; }
.spec th, .spec td { padding: 1rem 1.1rem; text-align: start; border-block-end: 1px solid var(--line); }
.spec thead th {
  font-family: var(--font-body); font-size: var(--step--1); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--taupe);
  border-block-end-color: var(--ink);
}
.spec tbody th { font-family: var(--font-display); font-weight: 500; font-size: var(--step-1); color: var(--ink); }
.spec td { color: var(--mocha); font-size: var(--step--1); }
.spec tbody tr:hover { background: var(--cream); }

/* --- Terms grid --------------------------------------------------------- */
.terms { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 700px) { .terms { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .terms { grid-template-columns: repeat(4, 1fr); } }
.term { background: var(--paper); padding: 2rem 1.75rem; }
.term__k { font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; color: var(--rose); font-weight: 700; }
.term__v { font-family: var(--font-display); font-size: var(--step-2); color: var(--ink); margin-block: .6rem .5rem; line-height: 1.1; }
.term p { font-size: var(--step--1); color: var(--mocha); }

/* --- QC checklist ------------------------------------------------------- */
.checks { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); list-style: none; padding: 0; }
.checks li { display: flex; gap: .85rem; align-items: flex-start; font-size: var(--step-0); }
.checks svg { inline-size: 20px; block-size: 20px; flex: none; margin-block-start: .3rem; stroke: var(--rose); fill: none; stroke-width: 2; }

/* Hero media children stack on top of each other: placeholder underneath,
   video over it, scrim over both. */
.hero__media > * { position: absolute; inset: 0; }

/* Language switch is a globe icon, not a text label — it reads the same in
   both directions and never needs translating. */
.lang { display: inline-grid; place-items: center; inline-size: 42px; block-size: 42px; padding: 0; }
.lang svg { inline-size: 20px; block-size: 20px; stroke: currentColor; fill: none; stroke-width: 1.4; }
.hero--video ~ * .lang { color: inherit; }

/* On phones the hero video is dropped entirely: it is the single heaviest
   asset on the page and mobile buyers are often on cellular data. The poster
   image carries the hero instead. */
@media (max-width: 700px) {
  .hero__media video { display: none; }
  .hero--video { min-block-size: 88vh; }
  .scroll-cue { block-size: 40px; }
}

/* The header is sticky and overlaps the hero, so reserve its height. */
.hero--video { padding-block-start: 84px; }