/* beta.34: shared chrome rules now live in assets/css/chrome.css (linked first).
   Only selectors this page overrides keep their local copies, so in-sheet cascade order is preserved. */
/* beta.20: author display must not override the hidden attribute */
/* ── beta.2 additions (documented in VERSION.txt; no rule above is altered) ── */
/* ════════════════════════════════════════════════════════════════
   LUXE x CLASSIC production header v1.0.0
   L1 Signature + L3 grafts (L2 ink stage removed in 1.0.0-beta.3). Namespace: lx-
   ════════════════════════════════════════════════════════════════ */
/* topbar (L1): contact / socials / translation */
/* translation dropdown (L1) */
/* header + nav (L1 metrics) */
/* links: mono caps + Classic underline + L3 tracking graft */
/* tracking-hover graft removed: the layout shift caused hover vibration */
/* mega: anchored to the sticky header, viewport-clamped */
@keyframes lx-rise {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
/* hover bridges: keep the pointer connected across the gap between
   trigger and panel — kills the open/close flicker ("shivering") */
/* slim dropdown with family dots */
/* icon-circle search (expands into a pill) */
/* beta.2 (step 1): valid HTML — the pill is a div; the icon sits on a real
   <button>, the input lives in a <form role="search"> that GETs search.html */
/* theme toggle (L3 graft) */
/* RFQ (L1): gold with sheen sweep */
/* M3 segment divider: catalogue | company */
/* mobile burger + panel (approved pattern) */
@media (max-width: 1024px) {}
/* ===== page scaffolding ===== */
h1 { font-size: clamp(34px, 4.6vw, 54px); font-weight: 700; letter-spacing: -.02em; line-height: 1.04; margin: 14px 0 0; }
/* series cards (category page) */
/* product rows (subcategory page) */
/* spec card (product page) */
/* related row */
/* CTA band */
/* template note */
/* sticky-footer technique (body flex column; main grows) */
/* ===== F1 footer — header-matched hovers (gradient underline, sheen,
   icon circles). WP destination: footer.php partial. ===== */
/* ===== internal page hero ===== */
/* ===== forms ===== */
/* ===== two-col content ===== */
/* ===== blog ===== */
/* ===== single post ===== */
/* ===== faq ===== */
/* ===== tds table ===== */
/* ===== sitemap page ===== */
/* ===== 404 / maintenance ===== */
@keyframes mdot {
0%, 100% { opacity: .25; transform: scale(.85); }
}
/* generic content blocks */
/* ===== homepage: concept sections (scoped) ===== */
.nhk-home .hero *, .nhk-home .section *, .nhk-home .effects *, .nhk-home .band * { margin: 0; padding: 0; box-sizing: border-box; }
.nhk-home .hero img, .nhk-home .section img, .nhk-home .effects img, .nhk-home .band img { max-width: 100%; display: block; }
.nhk-home .hero a:not(.btn), .nhk-home .section a:not(.btn), .nhk-home .effects a:not(.btn), .nhk-home .band a:not(.btn) { color: inherit; text-decoration: none; }
.nhk-home .grid > *, .nhk-home .flex > * { min-width: 0; }
.nhk-home h1 { font-size: clamp(44px, 7vw, 84px); font-weight: 800; line-height: 1.02; letter-spacing: -0.03em; }
.nhk-home h2 { font-size: clamp(30px, 4vw, 46px); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
.nhk-home h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.nhk-home .eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--gold);
  display: flex; align-items: center; gap: 10px;
}
.nhk-home .eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--gold); }
.nhk-home .lead { font-size: clamp(17px, 1.4vw, 20px); color: var(--ink-dim); max-width: 56ch; }
.nhk-home .btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.5px;
  padding: 15px 28px; border-radius: 2px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  cursor: pointer; border: 1px solid transparent;
}
.nhk-home a.btn--primary, .nhk-home button.btn--primary { background: var(--ink); color: var(--bg); }
/* beta.82 — the blanket `a { color: inherit }` reset (specificity 0,2,1) was
   beating .nhk-home .btn--primary (0,2,0), so the hero's primary button rendered
   dark-on-dark and its label vanished. Buttons are now excluded from the reset. */
.nhk-home .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(20,24,31,0.25); }
.nhk-home .btn--ghost { border-color: var(--border-bright); color: var(--ink); background: transparent; }
.nhk-home .btn--ghost:hover { border-color: var(--ink); transform: translateY(-2px); }
.nhk-home .btn .arrow { transition: transform 0.18s ease; }
.nhk-home .btn:hover .arrow { transform: translateX(4px); }
.nhk-home .hero {
  position: relative;
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  /* beta.41: named areas — desktop keeps the two-column layout (a+b stacked
     left, deck right); under 900px the same areas re-flow to a single column
     with the deck directly under the headline. */
  grid-template-areas: "a d" "b d";
  gap: 0 clamp(32px, 5vw, 80px);
  align-items: center;
  padding: clamp(56px, 9vh, 110px) clamp(20px, 5vw, 64px) clamp(64px, 10vh, 120px);
  max-width: 1340px; margin: 0 auto;
  overflow: hidden;
}
.nhk-home .hero::before {
  content: ''; position: absolute; top: -30%; right: -10%; width: 60%; height: 80%;
  background: radial-gradient(ellipse, var(--gold-dim) 0%, transparent 65%);
  pointer-events: none;
}
.nhk-home .hero__a { grid-area: a; }
.nhk-home .hero__b { grid-area: b; }
.nhk-home .hero .deck { grid-area: d; }
.nhk-home .hero h1 { margin: 22px 0 26px; }
.nhk-home .hero .lead { margin-bottom: 38px; }
.nhk-home .hero__actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.nhk-home .hero-search { margin-bottom: 28px; width: 100%; max-width: 620px; position: relative; }
.nhk-home .hero-search__bar {
  display: flex; align-items: center; background: #ffffff;
  border: 1px solid var(--border-bright); border-radius: 999px;
  padding: 4px 6px 4px 20px;
  box-shadow: 0 4px 18px rgba(20,24,31,0.06);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  min-height: 48px;
}
.nhk-home .hero-search__bar:focus-within {
  border-color: var(--gold);
  box-shadow: 0 4px 22px rgba(176,129,43,0.2);
}
.nhk-home .hero-search__icon {
  width: 18px; height: 18px; stroke: var(--gold); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  flex: none; margin-right: 12px;
}
.nhk-home .hero-search input[type="search"] {
  border: 0; outline: none; background: transparent;
  font-family: var(--font-display); font-size: 14px; color: var(--ink);
  flex: 1; min-width: 140px; padding: 8px 4px;
}
.nhk-home .hero-search input[type="search"]::placeholder {
  color: var(--ink-dim); opacity: 0.75; font-size: 13.5px;
}
.nhk-home .hero-search button[type="submit"] {
  background: var(--ink); color: #ffffff; border: 0; outline: none;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.05em;
  text-transform: uppercase; font-weight: 500;
  padding: 10px 22px; border-radius: 999px; cursor: pointer; flex: none;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}
.nhk-home .hero-search button[type="submit"]:hover {
  background: var(--gold); color: #ffffff;
}
.nhk-home .lx-note {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-dim); opacity: 0.75;
  margin-bottom: 24px; line-height: 1.5;
}
.nhk-home .hero__meta {
  display: flex; gap: 48px; margin-top: 36px; padding-top: 24px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--ink-dim);
}
.nhk-home .hero__meta > div { display: flex; flex-direction: column; justify-content: flex-start; }
.nhk-home .hero__meta strong {
  display: block; font-size: 26px; color: var(--ink);
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 4px;
}
.nhk-home .deck { position: relative; height: clamp(380px, 52vh, 560px); }
.nhk-home .chip {
  position: absolute; top: 0; bottom: 0; width: 13%;
  border-radius: 4px;
  transition: transform 0.35s cubic-bezier(.22,1,.36,1), filter 0.35s ease, opacity 0.45s ease;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(20,24,31,0.18);
  animation: chipDrop 0.7s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--i) * 0.09s);
}
.nhk-home .chip span {
  position: absolute; bottom: 18px; left: 8px; right: 8px; z-index: 2;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.8px;
  text-transform: uppercase; color: rgba(255,255,255,0.95); line-height: 1.4;
  text-shadow: 0 1px 3px rgba(20,24,31,.85); font-weight: 500;
  text-align: center;
}
@keyframes chipDrop {
from { transform: translateY(-40px) rotate(var(--r, -2deg)); opacity: 0; }
to { transform: translateY(0) rotate(var(--r, -2deg)); opacity: 1; }
}
.nhk-home .chip:hover { transform: translateY(-14px) rotate(var(--r, -2deg)); z-index: 5; filter: saturate(1.15); }
.nhk-home .chip--tall { top: -12px; }
.nhk-home .chip--short { bottom: 0; top: 14px; }
@media (max-width: 900px) {
.nhk-home .hero { grid-template-columns: 1fr; grid-template-areas: "a" "d" "b"; }
.nhk-home .hero .deck { margin: 4px 0 30px; }
.nhk-home .deck { height: 200px; }
.nhk-home .chip span { display: none; }
.nhk-home .chip { width: 11%; }
}
.nhk-home .chip::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 44%;
  background: linear-gradient(to top, rgba(20,24,31,.78), rgba(20,24,31,.3) 60%, transparent);
  border-radius: 0 0 4px 4px;
}
.nhk-home .deck.swap .chip { opacity: 0; transform: translateY(18px) rotate(var(--r, -2deg)); }
.nhk-home .rack { position: relative; }
.nhk-home .ocard {
  position: absolute; z-index: 20; left: 4%; top: -6px; right: 4%;
  background: rgba(20,24,31,.92); color: rgba(247,244,239,.85);
  border-radius: 6px; padding: 16px 18px 14px;
  transform: translateY(-10px); opacity: 0; visibility: hidden;
  transition: opacity .3s, transform .35s cubic-bezier(.22,1,.36,1), visibility .3s;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.nhk-home .ocard.on { transform: translateY(0); opacity: 1; visibility: visible; }
.nhk-home .ocard .oc-name { font-weight: 700; font-size: 15px; color: #fff; display: flex; align-items: baseline; gap: 10px; }
.nhk-home .ocard .oc-fam { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.nhk-home .ocard .oc-spec { font-family: var(--font-mono); font-size: 11px; margin-top: 8px; color: rgba(247,244,239,.7); }
.nhk-home .ocard .oc-spec b { color: var(--gold); font-weight: 400; }
.nhk-home .ocard .oc-link { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); text-decoration: none; margin-top: 10px; display: inline-block; }
.nhk-home .ocard .oc-link:hover { color: var(--gold); }
.nhk-home .cure { position: relative; display: inline-block; color: var(--ink); }
.nhk-home .cure .cure__wet { position: absolute; top: 0; left: 0; color: var(--gold); clip-path: inset(-20% 100% -20% 0); animation: coatSweep 1.05s cubic-bezier(.22,1,.36,1) .75s both; }
.nhk-home .cure .cure__sheen { position: absolute; top: -8%; left: -4%; right: -4%; bottom: -8%; background: linear-gradient(100deg, transparent 42%, rgba(255,255,255,.65) 50%, transparent 58%); transform: translateX(-120%); opacity: 0; pointer-events: none; animation: sheenPass .8s cubic-bezier(.22,1,.36,1) 1.85s both; }
@keyframes coatSweep {
from { clip-path: inset(-20% 100% -20% 0); }
to { clip-path: inset(-20% -4% -20% 0); }
}
@keyframes sheenPass {
0% { transform: translateX(-120%); opacity: 0; }
15% { opacity: 1; }
85% { opacity: 1; }
100% { transform: translateX(120%); opacity: 0; }
}
@media (max-width: 900px) {
.nhk-home .ocard { position: static; margin-top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
.nhk-home .cure .cure__wet { clip-path: inset(-20% -4% -20% 0); animation: none; }
.nhk-home .cure .cure__sheen { display: none; }
.nhk-home .chip { animation: none; }
}
.nhk-home .strip {
  background: var(--ink); color: var(--bg);
  overflow: hidden; padding: 0;
  display: flex; white-space: nowrap;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nhk-home .strip__inner {
  display: flex; align-items: center; gap: 64px; padding: 20px 0;
  animation: slide 34s linear infinite;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 2.2px; text-transform: uppercase;
}
.nhk-home .strip__inner span { display: flex; align-items: center; gap: 64px; }
.nhk-home .strip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); display: inline-block; vertical-align: middle; }
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.nhk-home .strip__inner { animation: none; }
}
.nhk-home .section { max-width: 1340px; margin: 0 auto; padding: clamp(72px, 10vh, 128px) clamp(20px, 5vw, 64px); }
.nhk-home .section__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: clamp(36px, 5vh, 56px); flex-wrap: wrap; }
.nhk-home .section__head .lead { font-size: 16px; }
.nhk-home .products { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1199px) {
  .nhk-home .products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
}
@media (max-width: 899px) {
  .nhk-home .products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 559px) {
  .nhk-home .products { grid-template-columns: 1fr; }
}

/* beta.87 — five across instead of three. At 5-up each card is ~230px on a
   1280px viewport, so the body padding, title size and swatch height are
   tightened only at that width; the 3- and 2-up layouts keep the original
   proportions. */
@media (min-width: 1200px) {
  .nhk-home .products .pcard__body { padding: 20px 18px 22px; }
  .nhk-home .products .pcard__title { font-size: 17.5px; margin-bottom: 9px; }
  .nhk-home .products .pcard__desc { font-size: 12.5px; line-height: 1.6; }
  .nhk-home .products .pcard__label { font-size: 9.5px; margin-bottom: 8px; }
  .nhk-home .products .pcard__swatch { height: 84px; }
  .nhk-home .products .pcard:hover .pcard__swatch { height: 92px; }
}
.nhk-home .pcard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  display: flex; flex-direction: column;
  height: 100%;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.2s ease;
  animation: fadeUp 0.55s ease-out both;
  animation-delay: calc(var(--i) * 0.07s);
}
.nhk-home .pcard:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(20,24,31,0.1);
  border-color: var(--gold);
}
.nhk-home .pcard__swatch { height: 104px; position: relative; overflow: hidden; }
.nhk-home .pcard__swatch::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(to top, rgba(20,24,31,0.30), transparent 55%); transition: opacity .3s ease; }
.nhk-home .pcard__swatch::before { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%); transform: translateX(-130%); transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.nhk-home .pcard:hover .pcard__swatch::before { transform: translateX(130%); }
.nhk-home .pcard:hover .pcard__swatch { height: 112px; transition: height .3s cubic-bezier(.2,.7,.2,1); }
.nhk-home .pcard__body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.nhk-home .marker { display: none; }
.nhk-home .pcard__label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--ink-dim); margin-bottom: 10px; }
.nhk-home .pcard__title { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 12px; }
.nhk-home .pcard__desc { font-size: 13.5px; color: var(--ink-dim); line-height: 1.65; flex: 1; }
.nhk-home .pcard__specs { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--border); display: flex; gap: 8px; flex-wrap: wrap; }
.nhk-home .spec-tag {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.5px;
  padding: 5px 10px; border-radius: 2px;
  background: var(--gold-dim); color: var(--gold);
}
.nhk-home .effects { background: #171310; color: #f2ede4; }
@media (prefers-color-scheme: dark) {
.nhk-home .effects { background: #0b0908; }
}
.nhk-home .effects .eyebrow { color: #d3a54c; }
.nhk-home .effects .eyebrow::before { background: #d3a54c; }
.nhk-home .effects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px;
  overflow: hidden;
}
@media (max-width: 900px) {
  .nhk-home .effects-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .nhk-home .effects-grid { grid-template-columns: 1fr; }
}
.nhk-home .effect {
  background: #171310; padding: 40px 32px 36px; position: relative; min-height: 210px;
  display: flex; flex-direction: column; justify-content: flex-end;
  transition: transform 0.25s ease;
}
@media (prefers-color-scheme: dark) {
.nhk-home .effect { background: #0b0908; }
}
.nhk-home .effect:hover { transform: scale(1.02); z-index: 2; }
.nhk-home .effect__name { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
.nhk-home .effect__desc { font-size: 13.5px; color: rgba(242,237,228,0.66); margin-top: 6px; max-width: 40ch; }
.nhk-home .effect__no { position: absolute; top: 24px; left: 32px; font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.45); letter-spacing: 2px; }
.nhk-home .effect--gold {
  background: linear-gradient(135deg, #6b4e12 0%, #a47d25 45%, #d6ad45 100%);
  color: #120e03;
}
.nhk-home .effect--gold .effect__name {
  color: #120e03;
  text-shadow: 0 1px 0 rgba(255,255,255,0.25);
}
.nhk-home .effect--gold .effect__desc {
  color: #1f1807;
  font-weight: 500;
  text-shadow: 0 1px 0 rgba(255,255,255,0.2);
}
.nhk-home .effect--gold .effect__no {
  color: #3d2e0a;
  font-weight: 600;
  opacity: 0.85;
}
.nhk-home .effect--patina { background: linear-gradient(145deg, #5e7a5a 0%, #8fa383 50%, #b8c4a8 100%); color: #1d271b; }
.nhk-home .effect--patina .effect__desc { color: rgba(29,39,27,0.85); font-weight: 500; }
.nhk-home .effect--patina .effect__no { color: rgba(29,39,27,0.7); }
.nhk-home .effect--pvd { background: radial-gradient(circle at 30% 25%, #e8ecf2 0%, #9aa8bd 40%, #3d4a63 100%); color: #171d29; }
.nhk-home .effect--pvd .effect__desc { color: rgba(23,29,41,0.8); }
.nhk-home .effect--pvd .effect__no { color: rgba(23,29,41,0.65); }
.nhk-home .effect--crackle {
  background:
    radial-gradient(circle at 18% 30%, rgba(0,0,0,0.65) 0 8%, transparent 9%),
    radial-gradient(circle at 62% 55%, rgba(0,0,0,0.6) 0 6%, transparent 7%),
    radial-gradient(circle at 80% 20%, rgba(0,0,0,0.65) 0 5%, transparent 6%),
    radial-gradient(circle at 40% 78%, rgba(0,0,0,0.55) 0 7%, transparent 8%),
    linear-gradient(135deg, #45101b 0%, #731e2d 50%, #380d15 100%);
  color: #ffffff;
}
.nhk-home .effect--crackle .effect__name {
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}
.nhk-home .effect--crackle .effect__desc {
  color: rgba(255,255,255,0.88);
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
.nhk-home .effect--crackle .effect__no {
  color: #e5a7b2;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.nhk-home .effect--leather { background: repeating-linear-gradient(70deg, #4a3226 0 6px, #55392b 6px 13px, #402b20 13px 19px); color: #eadfce; }
.nhk-home .numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.nhk-home .numb { background: var(--surface); padding: 34px 28px; animation: fadeScale 0.5s ease-out both; animation-delay: calc(var(--i) * 0.07s); display: flex; flex-direction: column; justify-content: space-between; }
.nhk-home .numb__value { font-size: clamp(38px, 4.5vw, 54px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; }
.nhk-home .numb__value sup { font-size: 0.45em; color: var(--gold); font-weight: 700; margin-left: 2px; }
.nhk-home .numb__label { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--ink-dim); margin-top: 14px; line-height: 1.6; }
.nhk-home .tds { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 64px); align-items: center; }
@media (max-width: 900px) {
  .nhk-home .tds { grid-template-columns: 1fr; }
}
.nhk-home .tds__card {
  position: relative; background: var(--surface);
  border: 1px solid var(--border); border-radius: 6px;
  overflow: hidden; box-shadow: 0 12px 32px rgba(20,24,31,0.06);
}
.nhk-home .tds__headbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 20px; background: #faf8f5; border-bottom: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px;
}
.nhk-home .tds__badge { color: var(--gold); font-weight: 600; text-transform: uppercase; }
.nhk-home .tds__code { color: var(--ink-dim); }
.nhk-home .tds table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.nhk-home .tds th, .nhk-home .tds td { padding: 13px 20px; text-align: left; border-bottom: 1px solid var(--border); }
.nhk-home .tds th { font-family: var(--font-mono); font-size: 10.5px; font-weight: 400; text-transform: uppercase; letter-spacing: 1.2px; color: var(--ink-dim); background: #fdfcfb; width: 50%; }
.nhk-home .tds td { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.nhk-home .tds tr:last-child th, .nhk-home .tds tr:last-child td { border-bottom: none; }
.nhk-home .tds tr:hover { background: rgba(176,129,43,0.03); }
.nhk-home .sustain { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.nhk-home .sustain .scard { border: 1px solid var(--border); padding: 0 0 24px; background: var(--surface); border-radius: 4px; overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.nhk-home .sustain .scard:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(20,24,31,0.08); border-color: var(--gold); }
.nhk-home .sustain .scard__media { margin: 0 0 18px; aspect-ratio: 3 / 2; border: 0; border-radius: 0; border-bottom: 1px solid var(--border); overflow: hidden; }
.nhk-home .sustain .scard__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.nhk-home .sustain .scard h3 { padding: 0 20px; margin: 0 0 8px; font-size: 17.5px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.nhk-home .sustain .scard p { padding: 0 20px; margin: 0; font-size: 13.5px; color: var(--ink-dim); line-height: 1.65; flex: 1; }
@media (max-width: 900px) {
.nhk-home .sustain { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
.nhk-home .sustain { grid-template-columns: 1fr; }
}
.nhk-home .band { background: var(--ink); color: var(--bg); position: relative; overflow: hidden; }
.nhk-home .band::before { content:''; position:absolute; right:-8%; top:-40%; width:45%; height:180%;
  background: radial-gradient(ellipse, rgba(211,165,76,0.22) 0%, transparent 65%); }
.nhk-home .band .inner { max-width: 1340px; margin: 0 auto; padding: clamp(72px, 11vh, 130px) clamp(20px, 5vw, 64px);
  display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 48px; align-items: center; position: relative; }
@media (max-width: 900px) {
.nhk-home .band .inner { grid-template-columns: 1fr; }
}
.nhk-home .band h2 { color: #f4f1ea; }
.nhk-home .band .lead { color: #9aa0a8; }
.nhk-home .band .btn--primary { background: var(--gold); color: #171310; border: none; }
.nhk-home .band .btn--primary:hover { box-shadow: 0 6px 22px rgba(211,165,76,0.4); }
.nhk-home .band__contact {
  font-family: var(--font-mono); font-size: 13px; color: #b8bdc4;
  border-left: 1px solid rgba(255,255,255,0.14); padding-left: 48px;
  display: flex; flex-direction: column; gap: 28px;
}
.nhk-home .band__item { display: flex; flex-direction: column; gap: 6px; }
.nhk-home .band__lbl { font-size: 10px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); }
.nhk-home .band__contact a { color: #f4f1ea; text-decoration: none; transition: color 0.18s ease; display: inline-block; }
.nhk-home .band__contact a:hover { color: var(--gold); }
.nhk-home .band__item p { margin: 0; font-size: 12.5px; color: #a4abb5; line-height: 1.6; }
.nhk-home .band__item p strong { color: #e2ded6; font-weight: 600; }
@media (max-width: 900px) {
  .nhk-home .band__contact { border-left: none; padding-left: 0; border-top: 1px solid rgba(255,255,255,0.14); padding-top: 32px; }
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeScale {
from { opacity: 0; transform: scale(0.94); }
to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.nhk-home .hero *, .nhk-home .hero *::before, .nhk-home .hero *::after, .nhk-home .section *, .nhk-home .section *::before, .nhk-home .section *::after, .nhk-home .effects *, .nhk-home .effects *::before, .nhk-home .effects *::after, .nhk-home .band *, .nhk-home .band *::before, .nhk-home .band *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
.nhk-home .ind-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.nhk-home .ind-card { border: 1px solid var(--border); background: var(--surface); border-radius: 4px; padding: 0; display: flex; flex-direction: column; height: 100%; overflow: hidden; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.ind-card img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; border-bottom: 1px solid var(--border); }
.ind-card .ind-body { display: flex; flex-direction: column; flex: 1; padding: 20px 18px 22px; }
.nhk-home .ind-card:hover { border-color: var(--gold); transform: translateY(-4px); box-shadow: 0 10px 28px rgba(20,24,31,.08); }
.nhk-home .ind-no { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; color: var(--gold); }
.nhk-home .ind-name { font-family: var(--font-display); font-size: 21px; font-weight: 700; margin: 8px 0 8px; letter-spacing: -.01em; color: var(--ink); }
.nhk-home .ind-series { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-dim); line-height: 1.65; margin-top: auto; }
.nhk-home .ind-foot { font-family: var(--font-mono); font-size: 11px; color: var(--ink-dim); margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); }
@media (max-width: 1000px) {
.nhk-home .ind-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 560px) {
.nhk-home .ind-grid { grid-template-columns: 1fr; }
}
.nhk-home section[id], .nhk-home h1, .nhk-home h2 { scroll-margin-top: 110px; }
section[id], h1, h2 { scroll-margin-top: 96px; }
/* sustainability column images (beta.13) */
.scard__media { margin: 0 0 16px; overflow: hidden; border-radius: 4px; border: 1px solid var(--border); }
.scard__media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .5s cubic-bezier(.22,1,.36,1); }
.scard:hover .scard__media img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
.scard__media img { transition: none; }
.scard:hover .scard__media img { transform: none; }
}
/* muted-to-colour reveal on thumbnails (beta.15): rest desaturated, colour on hover/focus */
@media (hover: hover) {
.ind-card img { filter: saturate(.4); transition: filter .45s ease; }
.scard__media img { filter: saturate(.4); transition: transform .5s cubic-bezier(.22,1,.36,1), filter .45s ease; }
.ind-card:hover img, .ind-card:focus-visible img { filter: saturate(1.08); }
.scard:hover .scard__media img { filter: saturate(1.08); }
}
@media (prefers-reduced-motion: reduce) {
.ind-card img, .scard__media img { transition: none; }
}
/* quote-list engine (beta.16) */


/* beta.17: industries cards. .nhk-home * zeros padding, and it beats
   .ind-card .ind-body, so the series text sat on the image edge and the
   short cards (Concrete) did not share a baseline with the long ones. */
.nhk-home .ind-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  align-items: stretch;
}
.nhk-home .ind-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.nhk-home .ind-card img {
  width: 100%;
  height: 168px;
  margin: 0;
  padding: 0;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid var(--border);
}
.nhk-home .ind-card .ind-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
  margin: 0;
  padding: 18px 18px 20px;
}
.nhk-home .ind-no { margin: 0; }
.nhk-home .ind-name { margin: 0; }
.nhk-home .ind-series {
  margin: auto 0 0;
  min-height: 3.4em;
  overflow-wrap: anywhere;
}
.nhk-home #industries .section__head { align-items: flex-end; }
.nhk-home #industries .section__head h2 { margin: 16px 0 0; }
.nhk-home #industries .section__head .lead { margin: 0; }
@media (max-width: 1000px) {
  .nhk-home .ind-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .nhk-home .ind-card img { height: 190px; }
}
@media (max-width: 560px) {
  .nhk-home .ind-grid { grid-template-columns: 1fr; }
  .nhk-home .ind-card img { height: 200px; }
  .nhk-home .ind-series { min-height: 0; }
}

/* beta.75 — the homepage layout rules were scoped under `#main .nhk-home`. On the
   live site <main id="main"> is not matching, so every scoped rule was dropped
   while the unscoped ones still applied — which is why the Industries, Effects
   and Sustainability sections rendered as raw stacked images and plain text.
   Scoping to `.nhk-home` alone (the wrapper front-page.php actually emits) removes
   that dependency. */

/* beta.76 — CORRECTION to beta.75.
   Scoping to bare `.home` was wrong: WordPress puts `home` on <body> for the
   front page, so `.home a` / `.home img` matched every link and image on the
   site — including the header nav and the footer — which distorted both.
   `.nhk-home` matches only the wrapper div front-page.php emits. */

/* ── beta.77 — LAYOUT GUARANTEE ───────────────────────────────────────────
   The homepage grids were declared only under a wrapper scope
   (#main .home, then .nhk-home). On the live site that scope is not
   matching, so the grids collapsed and the cards stacked full-width.
   .ind-grid / .effects-grid / .sustain appear ONLY on the front page, so the
   essential layout is declared unscoped here. The scoped rules above still
   supply all the styling; these guarantee the arrangement regardless of what
   wrapper classes the page happens to emit. */

.ind-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.effects-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.sustain { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: stretch; }

.ind-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.ind-card img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; }

.scard { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.scard__media { aspect-ratio: 3 / 2; overflow: hidden; }
.scard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 1000px) {
  .ind-grid, .sustain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .effects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ind-grid, .sustain, .effects-grid { grid-template-columns: 1fr; }
}

/* beta.78 — scope moved from a wrapper class to `body.nhk-home`, added by the
   theme in functions.php. The wrapper class the page emits could not be relied
   on, and `.home` alone matched <body> and broke the nav. The generic resets
   above are confined to the section elements so they can never reach the
   header or footer. */

/* beta.93 — the long card was shortened to match its neighbours, so the
   `align-items: start` workaround from beta.84 is no longer needed; the grid
   returns to equal-height cards with aligned bottoms. */

/* beta.88 — industries: gradient band replaces the placeholder artwork, with the
   industry number moved onto the band. Same family as the catalogue swatches but
   a different arrangement, so the two sections don't read as duplicates. */
.nhk-home .ind-card__band {
  display: block; height: 104px; position: relative; overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.nhk-home .ind-card__band::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,24,31,.32), transparent 55%);
}
.nhk-home .ind-card__band::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.30) 50%, transparent 65%);
  transform: translateX(-130%);
  transition: transform .7s cubic-bezier(.2,.7,.2,1);
}
.nhk-home .ind-card:hover .ind-card__band::before { transform: translateX(130%); }

/* the number now sits on the band, so it needs a light tone, not gold */
.nhk-home .ind-card__band .ind-no {
  position: absolute; left: 16px; top: 14px; z-index: 2;
  color: rgba(255,255,255,.92); letter-spacing: .16em;
  text-shadow: 0 1px 3px rgba(0,0,0,.35);
}
/* no number above the name any more */
.nhk-home .ind-card .ind-name { margin: 0 0 8px; }

@media (prefers-reduced-motion: reduce) {
  .nhk-home .ind-card__band::before { transition: none; }
}

/* beta.89 — an icon per industry, sitting with the name in the card body. */
.nhk-home .ind-head { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.nhk-home .ind-head .ind-name { margin: 0; }
.nhk-home .ind-ico { flex: none; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; }
.nhk-home .ind-ico svg { width: 22px; height: 22px; display: block; }
.nhk-home .ind-ico svg path, .nhk-home .ind-ico svg circle, .nhk-home .ind-ico svg rect {
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
@media (max-width: 899px) { .nhk-home .ind-ico { width: 22px; height: 22px; } .nhk-home .ind-ico svg { width: 20px; height: 20px; } }

/* ── beta.94 — sustainability media areas lead with a statement, not artwork.
      Typographic on purpose: no invented specification numbers. ────────── */
.nhk-home .sustain .scard__fig {
  display: flex; flex-direction: column; justify-content: flex-end;
  align-items: flex-start; gap: 7px;
  width: 100%; height: 100%; padding: 20px 20px 18px;
  position: relative; overflow: hidden;
}
.nhk-home .sustain .scard__fig::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,24,31,.45), transparent 62%);
}
.nhk-home .sustain .scard__fig::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%);
  transform: translateX(-130%); transition: transform .7s cubic-bezier(.2,.7,.2,1);
}
.nhk-home .scard:hover .scard__fig::before { transform: translateX(130%); }
.nhk-home .sustain .scard__fig > * { position: relative; z-index: 1; }
.nhk-home .sustain .scard__fig b {
  font-family: var(--font-display); font-size: 27px; font-weight: 700;
  letter-spacing: -.015em; line-height: 1.02; color: #fff;
}
.nhk-home .sustain .scard__fig i {
  font-family: var(--font-mono); font-style: normal; font-size: 9.5px;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.74);
}

/* ── beta.95/96 — a technical icon per metric in the "Every number here is a
      test result" block. Each carries the brand's own palette colour, held at
      half opacity at rest so the block still reads as a data table. ────── */
.nhk-home .numb { position: relative; transition: background .25s ease; }
.nhk-home .numb__ico {
  position: absolute; top: 30px; right: 28px;
  width: 28px; height: 28px; display: block;
  opacity: .5;
  transition: opacity .25s ease, transform .25s cubic-bezier(.2,.7,.2,1);
}
.nhk-home .numb__ico svg { width: 28px; height: 28px; display: block; }
.nhk-home .numb__ico svg path, .nhk-home .numb__ico svg circle, .nhk-home .numb__ico svg rect {
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.nhk-home .numb:hover { background: #fdfbf6; }
.nhk-home .numb:hover .numb__ico { opacity: 1; transform: translateY(-3px); }

@media (max-width: 1000px) {
  .nhk-home .sustain .scard__fig b { font-size: 23px; }
}
@media (max-width: 900px) {
  .nhk-home .numb__ico { top: 22px; right: 20px; width: 24px; height: 24px; }
  .nhk-home .numb__ico svg { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .nhk-home .numb, .nhk-home .numb__ico { transition: none; }
  .nhk-home .sustain .scard__fig::before { transition: none; }
}

/* ── beta.97 — hero column reorder ────────────────────────────────────────
   Spacing used to be baked into each block's own margin-bottom, which only
   worked while the order was fixed. The column is now a flex stack with a
   single gap, so the order can change without the rhythm breaking. */

/* (beta.97 flex stack retired in beta.98 — .hero__b is now a band) */

.nhk-home .hero__b > .lead,
.nhk-home .hero__b > .lx-note,
.nhk-home .hero__b > .hero__actions,
.nhk-home .hero__b > .hero-search,
.nhk-home .hero__b > .hero__meta { margin-top: 0; margin-bottom: 0; }

/* the industry explorer: label, pills and the current selection as one unit */
@media (max-width: 900px) {
  .nhk-home .hero__b { gap: 22px; }
}

/* ── beta.98 — hero: full-width band ─────────────────────────────────────
   The deck spans both grid rows but is a fixed clamp(380px,52vh,560px) tall,
   while the left column stacked seven blocks — so everything below the deck was
   empty. The lower content is now a full-width band under the headline/lead,
   which also lets the eight pills and the CTAs sit on single rows. */

.nhk-home .hero { grid-template-areas: "a d" "l d" "b b"; align-items: start; }
.nhk-home .hero__l { grid-area: l; }
.nhk-home .hero__b { grid-area: b; }

.nhk-home .hero__b {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) auto;
  gap: 26px clamp(28px, 4vw, 56px);
  align-items: start;
  border-top: 1px solid var(--border);
  margin-top: clamp(30px, 4.5vh, 48px);
  padding-top: clamp(26px, 4vh, 36px);
}
.nhk-home .hero__b > .hero__actions { grid-column: 1; grid-row: 1; }
.nhk-home .hero__b > .hero-search  { grid-column: 1; grid-row: 2; margin: 0; }
.nhk-home .hero__b > .hero__meta    { grid-column: 3; grid-row: 1 / span 2; }

/* the left column keeps its own rhythm now that it holds only the lead */
.nhk-home .hero__l .lead { margin-bottom: 14px; }

@media (max-width: 1100px) {
  .nhk-home .hero__b { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .nhk-home .hero__b > .hero__search  { grid-column: 1; grid-row: 2; }
  .nhk-home .hero__b > .hero__meta    { grid-column: 2; grid-row: 2; }
}
@media (max-width: 900px) {
  .nhk-home .hero { grid-template-areas: "a" "d" "l" "b"; }
  .nhk-home .hero__b { display: flex; flex-direction: column; gap: 24px; }
  .nhk-home .hero__b > * { grid-column: auto !important; grid-row: auto !important; }
}

/* ── beta.99 — right column rebuilt ──────────────────────────────────────
   Stats above the deck (a credential strip before the product visual), the
   search below it, and "Explore by industry" given a wide slot in the band.
   The deck flexes to absorb whatever height is left, so the two columns end
   level instead of the right one running short. Chips are position:absolute
   with top:0/bottom:0, so they follow any deck height. */

.nhk-home .hero { grid-template-areas: "a r" "l r" "b b"; align-items: start; }
.nhk-home .hero__r { grid-area: r; display: flex; flex-direction: column; gap: 20px; }

/* credential strip above the deck */
.nhk-home .hero__r .hero__meta {
  margin: 0; padding: 0 0 18px;
  border-top: 0; border-bottom: 1px solid var(--border);
  gap: clamp(16px, 2.4vw, 34px); justify-content: space-between;
}
/* the deck absorbs the leftover height */
/* beta.100 — beta.99 set height:auto + min-height:300px, which shrank the deck's
   stage from clamp(380px,52vh,560px) to a flat 300px. The chips are
   position:absolute with top:0/bottom:0, so they had no room to animate in.
   Restored to the original stage size as a MINIMUM, so the deck can still grow
   to balance the column but can never be shorter than before. */
.nhk-home .hero__r .deck {
  grid-area: auto; flex: 0 0 auto;
  height: clamp(380px, 52vh, 560px); min-height: 0; margin: 0;
}
/* search below the deck */
.nhk-home .hero__r .hero-search { margin: 0; max-width: none; }

/* band: buttons on the left, the industry explorer given the room */
.nhk-home .hero__b {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 2.15fr);
  gap: 26px clamp(28px, 4vw, 56px);
  align-items: start;
  border-top: 1px solid var(--border);
  margin-top: clamp(30px, 4.5vh, 48px);
  padding-top: clamp(26px, 4vh, 36px);
}
.nhk-home .hero__b > .hero__actions { grid-column: 1; }
@media (max-width: 1100px) {
  .nhk-home .hero__b { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
}
@media (max-width: 900px) {
  .nhk-home .hero { grid-template-areas: "a" "r" "l" "b"; }
  .nhk-home .hero__r { display: block; }
  .nhk-home .hero__r .hero__meta { margin-bottom: 6px; }
  .nhk-home .hero__r .deck { height: 220px; min-height: 0; margin: 20px 0; }
  .nhk-home .hero__b { display: flex; flex-direction: column; gap: 24px; }
  .nhk-home .hero__b > * { grid-column: auto !important; grid-row: auto !important; }
}

/* ── beta.100 — ambient life in the hero ─────────────────────────────────
   Two very slow, very low-contrast glows drift behind the content: a warm gold
   one (the existing ::before, now animated) and a cool teal one added below.
   Both sit well under the text so they read as atmosphere, not decoration. */

.nhk-home .hero::before {
  animation: heroGlowA 20s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
@keyframes heroGlowA {
  from { transform: translate3d(0, 0, 0) scale(1);      opacity: .85; }
  to   { transform: translate3d(-4%, 4%, 0) scale(1.14); opacity: 1; }
}

.nhk-home .hero::after {
  content: ''; position: absolute; bottom: -22%; left: -12%;
  width: 46%; height: 62%;
  background: radial-gradient(ellipse, rgba(38,121,151,.11) 0%, transparent 66%);
  pointer-events: none;
  animation: heroGlowB 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes heroGlowB {
  from { transform: translate3d(0, 0, 0) scale(1);     }
  to   { transform: translate3d(6%, -5%, 0) scale(1.16); }
}

/* the deck sits above both glows */
.nhk-home .hero__a, .nhk-home .hero__l, .nhk-home .hero__r, .nhk-home .hero__b { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .nhk-home .hero::before, .nhk-home .hero::after { animation: none; }
}

/* ── beta.101 — single-line hero headline ────────────────────────────────
   The H1 carried explicit <br>s, so it was three lines by construction.
   Removing them lets it flow. Measured against the theme's own bundled font
   (Bricolage Grotesque, wght 800, -0.025em tracking), the string is:
       84px -> 911px    72px -> 780px    66px -> 715px    60px -> 650px
   The left column is ~685-724px depending on viewport, so 66px is the largest
   that fits and 60px is the safe cap. 4.2vw keeps it inside the column as the
   viewport narrows. Below ~900px the hero is single-column and it wraps again,
   as it should. */

.nhk-home .hero h1 { font-size: clamp(30px, 4.2vw, 60px); letter-spacing: -0.025em; }

/* ── beta.102 — fixes found by rendering the hero ────────────────────────
   1. The headline and the lead were separate grid rows, while the deck spanned
      both. The deck's min-height forced BOTH rows tall, so the headline sat at
      the top of row 1 and the lead at the top of row 2 — leaving a large empty
      gap between them. They are now one block in a single area.
   2. The one-line headline wrapped: the left column measures ~655px at a 1440
      viewport (not the 685-724px assumed), and 60px renders 650px — too tight.
      Re-measured against the bundled font, 56px gives 607px, ~7% headroom. */

.nhk-home .hero { grid-template-areas: "a r" "b b"; align-items: start; }
.nhk-home .hero h1 { font-size: clamp(30px, 4vw, 56px); letter-spacing: -0.025em; }
.nhk-home .hero__a .lead { margin-bottom: 14px; }
.nhk-home .hero__a .lx-note { margin-bottom: 0; }

/* ══ beta.103 — hero final ══════════════════════════════════════════════
   Layout: Swap A. Headline spans the full width on one line; the left column
   carries the stats, lead, scale note, industry explorer and the three CTAs;
   the deck sits right; the search is a full-width band underneath.

   Headline: 108px, measured against the bundled font at wght 800 —
   899px at 84px, 1156px at 108px, against 1212px of hero content width.
   112px (1199px) is the hard ceiling; 108px keeps 55px of headroom.
   ══════════════════════════════════════════════════════════════════════ */

.nhk-home .hero { grid-template-columns: 1.15fr 0.85fr; grid-template-areas: "a a" "l r" "b b"; align-items: start; }
.nhk-home .hero__a { grid-area: a; }
.nhk-home .hero__l { grid-area: l; display: flex; flex-direction: column; }
.nhk-home .hero__r { grid-area: r; }
.nhk-home .hero__b { grid-area: b; }

/* headline — one line, full width, one continuous gradient */
.nhk-home .hero h1 { font-size: clamp(44px, 7.5vw, 108px); letter-spacing: -0.03em; }
.nhk-home .hero h1,
.nhk-home .hero h1 .cure,
.nhk-home .hero h1 .cure__base {
  background: linear-gradient(96deg, #d9a92e 0%, #c0503f 38%, #3a8f85 72%, #20344a 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.nhk-home .hero h1 .cure__wet, .nhk-home .hero h1 .cure__sheen { display: none; }

/* left column rhythm */
.nhk-home .hero__l .hero__meta {
  margin: 0 0 22px; padding: 0 0 18px;
  border-top: 0; border-bottom: 1px solid var(--border);
  gap: clamp(16px, 2.4vw, 34px); justify-content: flex-start;
}
.nhk-home .hero__l .lead { margin: 0 0 14px; }
.nhk-home .hero__l .lx-note { margin: 0 0 26px; }
.nhk-home .hero__l .hero__actions { margin: 0; }

/* industry pills — circular icon badge, 4x2 grid so eight sit tidily */
/* three CTAs on one row — 11px type, 18px padding (measured fit ~583px of 631px) */
.nhk-home .hero__l .hero__actions { flex-wrap: nowrap; gap: 12px; }
.nhk-home .hero__l .hero__actions .btn { font-size: 11px; padding: 11px 18px; gap: 8px; white-space: nowrap; }

/* search band */
.nhk-home .hero__b { grid-template-columns: 1fr; border-top: 1px solid var(--border);
  margin-top: clamp(28px, 4vh, 44px); padding-top: clamp(24px, 3.6vh, 34px); }
.nhk-home .hero__b > .hero-search { grid-column: 1; grid-row: 1; margin: 0; max-width: none; }

/* the hero's primary CTA takes the same gold as the header's "Request a quote" */
.nhk-home .hero .btn--primary {
  background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold-mid) 58%, var(--gold-deep) 100%);
  color: #14181f;
}

@media (max-width: 1100px) {
}
@media (max-width: 900px) {
  .nhk-home .hero { grid-template-areas: "a" "r" "l" "b"; }
  .nhk-home .hero__r .deck { height: 220px; min-height: 0; margin: 20px 0; }
  .nhk-home .hero__l .hero__actions { flex-wrap: wrap; }
}

/* ── beta.104 — search moved below the animation ─────────────────────────
   The search now sits in the right column under the deck instead of in a
   full-width band. NOTE: the deck's own sizing is deliberately NOT touched —
   `.nhk-home .hero__r .deck` (beta.100) still sets
   `flex: 1 1 auto; height: auto; min-height: clamp(380px, 52vh, 560px)`,
   which is what gives the chips their stage. Only the search is adjusted. */

.nhk-home .hero { grid-template-areas: "a a" "l r"; }
.nhk-home .hero__b { display: none; }          /* band retired */

.nhk-home .hero__r .hero-search { margin: 0; max-width: none; }
/* the search has to work in a ~440px column rather than 1212px */
.nhk-home .hero__r .hero-search__bar { padding-left: 16px; }
.nhk-home .hero__r .hero-search input[type="search"] { min-width: 0; font-size: 12px; }
.nhk-home .hero__r .hero-search input[type="search"]::placeholder { font-size: 11.5px; }
.nhk-home .hero__r .hero-search button[type="submit"] {
  padding: 0 14px; font-size: 10px; letter-spacing: .06em; white-space: nowrap;
}

@media (max-width: 900px) {
  .nhk-home .hero { grid-template-areas: "a" "r" "l"; }
}

/* ── beta.105 — CTAs and search on one shared grid row ───────────────────
   The CTAs ended the left column and the search ended the right column, but
   the columns run to different heights, so the search sat ~45px below the
   buttons. Both are now direct children of the hero on a single row, so their
   tops line up by construction rather than by coincidence.
   The deck's own rules remain untouched. */

.nhk-home .hero { grid-template-areas: "a a" "l r" "ba bs"; }
.nhk-home .hero > .hero__actions { grid-area: ba; margin: 0; flex-wrap: nowrap; gap: 12px; }
.nhk-home .hero > .hero-search  { grid-area: bs; margin: 0; max-width: none; }

/* button sizing follows them out of the left column */
.nhk-home .hero > .hero__actions .btn { font-size: 11px; padding: 11px 18px; gap: 8px; white-space: nowrap; }

/* the search field matches the button row's height so the two read as one line */
.nhk-home .hero > .hero-search .hero-search__bar { min-height: 42px; padding: 3px 5px 3px 16px; }
.nhk-home .hero > .hero-search input[type="search"] { min-width: 0; font-size: 12px; }
.nhk-home .hero > .hero-search button[type="submit"] { padding: 0 14px; font-size: 10px; letter-spacing: .06em; white-space: nowrap; }

@media (max-width: 900px) {
  .nhk-home .hero { grid-template-areas: "a" "r" "l" "ba" "bs"; }
  .nhk-home .hero > .hero__actions { flex-wrap: wrap; }
}

/* ── beta.105 (cont.) ────────────────────────────────────────────────────
   `flex: 1 1 auto` let the deck grow to fill the row, which stretched the chips
   into ribbons. It is back to its original fixed stage — the same
   clamp(380px,52vh,560px) the design started with — so the chips keep their
   proportions and the animation is unaffected.

   The search box is also given a firmer edge: at 440px wide and 42px tall it
   was reading as a washed-out hairline next to the buttons. */

.nhk-home .hero > .hero-search .hero-search__bar {
  min-height: 42px; padding: 3px 5px 3px 16px;
  border: 1px solid rgba(20,24,31,.26);
  box-shadow: 0 2px 10px rgba(20,24,31,.07);
  background: #fff;
}
.nhk-home .hero > .hero-search .hero-search__bar:focus-within {
  border-color: var(--gold); box-shadow: 0 0 0 3px rgba(224,169,46,.18);
}
.nhk-home .hero > .hero-search button[type="submit"] {
  padding: 0 16px; height: 32px; font-size: 10px; letter-spacing: .06em; white-space: nowrap;
}

/* ══ beta.106 — icons across the remaining sections ════════════════════
   One stroke style throughout, matching the industries and numbers icons:
   24px viewBox, 1.7 stroke, round caps, currentColor. */

.bi svg, .scard__ico svg, .pcard__ico svg, .tds__ico svg, .effect__ico svg { display: block; width: 100%; height: 100%; }
.bi svg *, .scard__ico svg *, .pcard__ico svg *, .tds__ico svg *, .effect__ico svg * {
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* --- CTA band: email / phone / address --- */
.nhk-home .band__item a { display: inline-flex; align-items: center; gap: 9px; }
.nhk-home .band__item .bi { width: 16px; height: 16px; flex: none; color: var(--gold); }
.nhk-home .band__item p { display: flex; align-items: flex-start; gap: 9px; }
.nhk-home .band__item p .bi { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--gold); }

/* --- sustainability cards: icon locked up with the panel keyword --- */
.nhk-home .scard__fig b { display: flex; align-items: center; gap: 10px; }
.nhk-home .scard__fig b .scard__ico { width: 24px; height: 24px; flex: none; color: rgba(255,255,255,.9); margin: 0; }

/* --- catalogue cards --- */
.nhk-home .pcard__ico { width: 22px; height: 22px; color: var(--gold); margin: 0 0 10px; display: block; }

/* --- TDS badge --- */
.nhk-home .tds__ico { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; margin-right: 7px; }

/* --- effects tiles: a quiet corner mark --- */
.nhk-home .effect__ico { position: absolute; top: 20px; right: 22px; width: 24px; height: 24px; opacity: .45; pointer-events: none; }

/* --- numbers: five cells were resolving to four columns and leaving an
       empty grey block; all five now sit on one row --- */
.nhk-home .numbers { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.nhk-home .numbers .numb { padding: 30px 22px; }
@media (max-width: 1100px) { .nhk-home .numbers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .nhk-home .numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ══ beta.159 — Variant A: labels on the strip ══════════════════════════
   The floating info card is gone. Each strip now carries its own labels:
   the product family as a tag at the top, the colour name and the industry
   at the bottom. Nothing hovers and nothing covers a neighbour.

   The chip is absolutely positioned rather than flex, so all three labels
   are placed absolutely too. The scrim is deepened from 44% to 54% because
   two lines of text now sit over gradients that run light at the bottom. */

.nhk-home .chip__tag {
  position: absolute; top: 12px; left: 7px; right: 7px; z-index: 2;
  font-family: var(--font-mono); font-size: 7.4px; letter-spacing: .13em;
  text-transform: uppercase; font-weight: 500;
  background: rgba(255,253,248,.96); color: #14181f;
  padding: 4px 5px; border-radius: 2px; text-align: center; line-height: 1.3;
  box-shadow: 0 1px 4px rgba(20,24,31,.28);
}

/* the colour name sits above the industry line */
.nhk-home .chip__name,
.nhk-home .chip span {
  bottom: 32px;
}

.nhk-home .chip__ind {
  position: absolute; bottom: 15px; left: 6px; right: 6px; z-index: 2;
  font-family: var(--font-mono); font-size: 6.6px; letter-spacing: .16em;
  text-transform: uppercase; font-style: normal; text-align: center;
  color: rgba(255,255,255,.66); text-shadow: 0 1px 3px rgba(20,24,31,.9);
  line-height: 1.2;
}

.nhk-home .chip::after {
  height: 54%;
  background: linear-gradient(to top, rgba(20,24,31,.84), rgba(20,24,31,.38) 55%, transparent);
}

@media (max-width: 900px) {
  .nhk-home .chip__tag,
  .nhk-home .chip__ind { display: none; }
}

/* ══ beta.160 — ten strips from table_rh.xlsx ═══════════════════════════
   The deck now carries all ten product families, one strip each, with the
   family on the tag and the industry beneath. Ten strips need less width than
   six, and the three liquid families get their own pale treatment.

   The pills no longer hide strips — with one strip per industry, hiding left a
   single chip on stage. They dim the others instead, so the deck always shows
   the full range. */

.nhk-home .chip { width: 9%; }
@media (max-width: 900px) { .nhk-home .chip { width: 9%; } }

/* a strip the selected pill doesn't match */
.nhk-home .chip.is-dim { opacity: .32; filter: grayscale(.35); }
.nhk-home .chip.is-dim:hover { opacity: 1; filter: none; }

/* the three liquid families: pale ground, glass sheen, dark labels, no scrim */
.nhk-home .chip--clear { box-shadow: 0 10px 30px rgba(20,24,31,.14), inset 0 0 0 1px rgba(20,24,31,.1); }
.nhk-home .chip--clear::after { display: none; }
.nhk-home .chip--clear::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(118deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 62%, rgba(255,255,255,.42) 100%);
  pointer-events: none;
}
.nhk-home .chip--clear .chip__tag { background: rgba(20,24,31,.9); color: #fffdf8; box-shadow: none; }
.nhk-home .chip--clear .chip__ind { color: rgba(20,24,31,.62); text-shadow: none; }

/* ══ beta.161 — V3 top label: a gold rule, no solid fill ════════════════
   The white pill read like a website tooltip next to the bottom label, which
   is plain text over a fade. The tag is now text too — held by a text shadow
   and anchored by a 16px gold hairline — so the strip reads as a printed chip
   rather than a UI badge. No background anywhere on the strip. */

.nhk-home .chip__tag {
  position: absolute; top: 14px; left: 5px; right: 5px; z-index: 2;
  font-family: var(--font-mono); font-size: 7.4px; letter-spacing: .15em;
  text-transform: uppercase; font-weight: 400;
  background: none; color: #fffdf8;
  padding: 9px 0 0; text-align: center; line-height: 1.3;
  text-shadow: 0 1px 3px rgba(20,24,31,.9);
  box-shadow: none; border-radius: 0;
}

/* the gold hairline that anchors the name */
.nhk-home .chip__tag::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 16px; height: 1.5px; background: #f2c552;
}

/* on a pale liquid strip the tag goes dark — the rule stays gold */
.nhk-home .chip--clear .chip__tag {
  background: none; color: #14181f; text-shadow: none; box-shadow: none;
}

/* ══ beta.162 — the deck becomes two rows of five ═══════════════════════
   Ten strips in the hero's 0.85fr column is about 510px, so each strip got
   46–69px. No label fits in that: the family names wrapped to three lines and
   spilled outside the strip, and the industry labels were clipped at the
   bottom edge.

   Two rows of five doubles the width per strip to ~100px, which is what the
   labels need. The chips become grid items instead of absolutely positioned
   ones — their inline `left` is ignored, so no markup change is required and
   the drop animation still runs off --i. */

.nhk-home .deck {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: 1fr 1fr;
  gap: 9px 7px;
  height: clamp(440px, 60vh, 640px);
  align-items: stretch;
}

.nhk-home .chip {
  position: static;
  width: auto;
  height: 100%;
}

/* keep a little height variation so it still reads as a rack, not a table */
.nhk-home .chip--tall { top: auto; margin-top: -6px; }
.nhk-home .chip--short { top: auto; bottom: auto; margin-top: 8px; }

/* labels get room and are allowed two lines */
.nhk-home .chip__tag {
  font-size: 6.9px; letter-spacing: .1em;
  top: 12px; left: 4px; right: 4px;
  padding-top: 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.nhk-home .chip__ind {
  font-size: 6.3px; letter-spacing: .1em;
  bottom: 12px; left: 3px; right: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.nhk-home .chip__name, .nhk-home .chip span { bottom: 30px; }

@media (max-width: 900px) {
  .nhk-home .deck { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, 1fr); height: 620px; }
}

/* ══ beta.163 — back to one row, with labels short enough to fit ═════════
   Two rows were wrong: the deck reads as a rack of long vertical strips, and
   splitting it destroyed that. So it goes back to a single row of ten.

   The labels that spilled were too long for a ~60px strip, not too big. They
   are now shortened to the word a buyer actually uses — Maintenance, Top
   coats, Crackle, Designer, Additives — and the type drops to 6.2px. That is
   what makes ten strips fit a single row, not a wider deck. */

.nhk-home .deck {
  display: block;
  height: clamp(400px, 56vh, 600px);
  position: relative;
}

.nhk-home .chip {
  position: absolute;
  top: 0; bottom: 0;
  width: 9.2%;
  height: auto;
}
.nhk-home .chip--tall { top: -12px; margin-top: 0; }
.nhk-home .chip--short { bottom: 0; top: 14px; margin-top: 0; }

.nhk-home .chip__tag {
  font-size: 6.2px; letter-spacing: .05em;
  top: 12px; left: 2px; right: 2px;
  padding-top: 8px; line-height: 1.25;
}
.nhk-home .chip__tag::before { width: 13px; height: 1.2px; }

.nhk-home .chip__ind {
  font-size: 5.7px; letter-spacing: .04em;
  bottom: 12px; left: 2px; right: 2px;
  line-height: 1.25;
}

@media (max-width: 900px) {
  .nhk-home .deck { height: 220px; }
  .nhk-home .chip { width: 9.2%; }
}

/* ══ beta.164 — the six effect cards in a single row ════════════════════
   The grid was three across, so six cards made two rows. Six across fits them
   all on one line; the gap and the tile height come down to suit the narrower
   cards, and the icon and label scale with them. */

.nhk-home .effects-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.nhk-home .effects-grid .effect {
  min-height: 190px;
  padding: 16px 13px;
}
.nhk-home .effects-grid .effect__ico { width: 30px; height: 30px; }
.nhk-home .effects-grid .effect__ico svg { width: 17px; height: 17px; }
.nhk-home .effects-grid .effect__name { font-size: 15px; letter-spacing: -.005em; }
.nhk-home .effects-grid .effect__desc { font-size: 10.5px; line-height: 1.45; max-width: none; margin-top: 5px; }
.nhk-home .effects-grid .effect__no { top: 14px; left: 14px; font-size: 9px; letter-spacing: 1.4px; }

@media (max-width: 1100px) {
  .nhk-home .effects-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 700px) {
  .nhk-home .effects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ══ beta.165 — the deck on a phone ═════════════════════════════════════
   Ten strips at 9.2% of a 390px screen is 36px each. Every label was clipped:
   ADDITI, CRACKL, AUTOMOT. Two rows were already rejected, so the deck scrolls
   sideways instead — it keeps the single row of long strips and gives each one
   enough width for its label.

   The deck is given a fixed width wider than the viewport and scrolls; the
   chips stay absolutely positioned against it, so their percentage `left`
   values scale with it and the layout is unchanged. */

@media (max-width: 900px) {
  .nhk-home .deck {
    width: 660px;
    max-width: none;
    height: 320px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    margin-right: -18px;
    padding-right: 18px;
  }
  .nhk-home .chip { width: 60px; }
  /* a horizontal scroll container clips vertical overflow, so the tall strips
     cannot overhang the top on mobile — the variation moves inside instead */
  .nhk-home .chip--tall { top: 0; }
  .nhk-home .chip--short { top: 10px; bottom: 0; }

  /* a touch more room for the labels now that each strip is 60px */
  .nhk-home .chip__tag { font-size: 6.6px; left: 2px; right: 2px; }
  .nhk-home .chip__ind { font-size: 6px; left: 2px; right: 2px; }

  .nhk-home .deck { padding-top: 0; }
}

/* a small cue that the deck scrolls */
@media (max-width: 900px) {
  .nhk-home .deck::after {
    content: '';
    position: sticky;
    left: 0;
    display: block;
    height: 0;
  }
}

/* ══ beta.167 — clearance between the deck and the search box ═══════════
   The search form sits INSIDE .hero__r, the deck's own column, and an earlier
   rule forces margin:0 on it there. So a margin on the search does nothing —
   the separation has to come from the column's flex gap, which was 20px. */

.nhk-home .hero__r { gap: 40px; }

@media (max-width: 900px) {
  .nhk-home .hero__r { gap: 30px; }
}