/* ==========================================================================
   ابني صرحك — blocks
   Section-level composition. Depends on core.css.
   ========================================================================== */

/* --- Hero ----------------------------------------------------------------
   The hero does not display statistics. It displays the first step of the
   actual job: pick a material, pick a city, get a price.
   ------------------------------------------------------------------------ */

/* Clipping lives on the media, not the hero: the starter bar deliberately
   overhangs the bottom edge and must not be cut off. */
.hero { position: relative; background: var(--nv-950); isolation: isolate; }

.hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-media img {
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  will-change: transform;
}
.hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom, color-mix(in oklch, var(--nv-950) 72%, transparent), transparent 38%),
    linear-gradient(to bottom, transparent 30%, color-mix(in oklch, var(--nv-950) 88%, transparent) 88%, var(--nv-950)),
    linear-gradient(to var(--scrim-dir, right),
      color-mix(in oklch, var(--nv-950) 90%, transparent),
      color-mix(in oklch, var(--nv-950) 55%, transparent) 58%,
      color-mix(in oklch, var(--nv-950) 25%, transparent));
}
html[dir="rtl"] .hero-scrim { --scrim-dir: left; }

.hero-inner {
  position: relative;
  padding-block: clamp(120px, 17vh, 190px) clamp(40px, 6vw, 64px);
  display: grid;
  gap: clamp(1.4rem, 3vw, 2rem);
  /* Explicit, not ch: the headline is measured at 7.98em on its longest line,
     so the column must clear 575px at the 4.5rem ceiling to stay two lines. */
  max-inline-size: min(640px, 100%);
}
/* Held below the global h1 ceiling so both headline lines stay unbroken */
.hero h1 { color: var(--pa-100); font-size: clamp(2.3rem, 5.2vw, 4.5rem); }
.hero .lede { color: var(--nv-200); max-inline-size: 44ch; }

/* Line-by-line mask reveal, once, on load */
.reveal-line { display: block; overflow: hidden; padding-block-end: 0.08em; margin-block-end: -0.08em; }
.reveal-line > span { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .js .hero .reveal-line > span {
    transform: translateY(105%);
    animation: line-in 1s var(--ease-out-quint) forwards;
    animation-delay: calc(var(--i, 0) * 90ms + 120ms);
  }
}
@keyframes line-in { to { transform: none; } }

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }

/* Inline RFQ starter */
.starter {
  position: relative;
  background: var(--nv-800);
  border: 1px solid var(--nv-600);
  border-radius: var(--r-lg);
  padding: clamp(1rem, 2.2vw, 1.5rem);
  margin-block-end: clamp(-60px, -5vw, -40px);
  transform: translateY(clamp(40px, 5vw, 60px));
  display: grid;
  gap: 1rem;
  z-index: 2;
}
@media (min-width: 900px) {
  .starter { grid-template-columns: 1.2fr 1fr 0.8fr auto; align-items: end; }
}
.starter .field { gap: 0.42rem; }
.starter .btn { block-size: 48px; justify-content: center; }

/* --- Specimen tiles ------------------------------------------------------
   The catalogue's core object: macro texture, then the numbers.
   ------------------------------------------------------------------------ */

.specimens {
  display: grid;
  gap: clamp(0.8rem, 1.6vw, 1.2rem);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.specimen {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--nv-800);
  border: 1px solid var(--nv-700);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease-out-quart);
}
.specimen:hover { border-color: var(--gd-600); }
.specimen[hidden] { display: none; }

.specimen-shot { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--nv-850); }
.specimen-shot img {
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform var(--dur-slow) var(--ease-out-quint), filter var(--dur) var(--ease-out-quart);
  filter: saturate(0.82) contrast(1.04);
}
.specimen:hover .specimen-shot img { transform: scale(1.07); filter: saturate(1) contrast(1.06); }

.specimen-stock { position: absolute; inset-block-start: 10px; inset-inline-start: 10px; background: color-mix(in oklch, var(--nv-950) 82%, transparent); }

.specimen-body { padding: 1rem 1.05rem 1.15rem; display: grid; align-content: start; gap: 0.55rem; }
.specimen-body h3 { font-size: var(--t-md); letter-spacing: 0; }
.specimen-spec {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
  font-size: var(--t-xs);
  color: var(--nv-300);
}
.specimen-price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  margin-block-start: 0.25rem;
  padding-block-start: 0.7rem;
  border-block-start: 1px solid var(--nv-700);
}
.specimen-price .figure { font-size: 1.42rem; }
.specimen-lead { font-size: var(--t-xs); color: var(--nv-300); text-align: end; }

.specimen-link::after { content: ""; position: absolute; inset: 0; }

/* Feature specimen — one tile spans two columns with the shot bled wide */
@media (min-width: 760px) {
  .specimen-wide { grid-column: span 2; grid-template-rows: none; grid-template-columns: 1.15fr 1fr; }
  .specimen-wide .specimen-shot { aspect-ratio: auto; block-size: 100%; }
  .specimen-wide .specimen-body { align-content: center; padding: clamp(1.2rem, 2.4vw, 2rem); gap: 0.7rem; }
  .specimen-wide h3 { font-size: var(--t-lg); }
}

/* --- Ordered sequence ----------------------------------------------------
   The only numbered thing on the site, because it is genuinely ordered.
   ------------------------------------------------------------------------ */

.sequence { display: grid; gap: 1px; background: var(--nv-700); border: 1px solid var(--nv-700); border-radius: var(--r-md); overflow: hidden; }
@media (min-width: 900px) { .sequence { grid-template-columns: repeat(4, 1fr); } }

.step { background: var(--nv-900); padding: clamp(1.4rem, 2.6vw, 2rem); display: grid; align-content: start; gap: 0.7rem; transition: background-color var(--dur) var(--ease-out-quart); }
.step:hover { background: var(--nv-850); }
.step-n {
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: 0.86rem;
  color: var(--gd-500);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.step-n::after { content: ""; block-size: 1px; flex: 1; background: color-mix(in oklch, var(--gd-500) 42%, transparent); }
.step h3 { font-size: var(--t-md); }
.step p { font-size: var(--t-sm); color: var(--nv-300); }
.step-time { font-size: var(--t-xs); color: var(--gd-400); font-family: var(--font-ui); font-weight: 700; }

/* --- Split feature -------------------------------------------------------- */

.split { display: grid; gap: clamp(1.8rem, 4vw, 3.6rem); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split-wide-media { grid-template-columns: 1.25fr 1fr; }
  .split-flip > :first-child { order: 2; }
}
.split-media { position: relative; border-radius: var(--r-md); overflow: hidden; background: var(--nv-850); }
.split-media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.split-media.is-tall { aspect-ratio: 4 / 5; }
.split-media.is-wide { aspect-ratio: 16 / 10; }

/* A figure pinned to the corner of a photograph */
.media-figure {
  position: absolute;
  inset-block-end: 0; inset-inline-start: 0;
  background: var(--nv-950);
  padding: 1rem 1.3rem 1.1rem;
  border-start-end-radius: var(--r-md);
  display: grid;
  gap: 0.3rem;
}
.media-figure .figure { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.media-figure span:last-child { font-size: var(--t-xs); color: var(--nv-300); }

.bullets { display: grid; gap: 1.1rem; margin-block-start: 0.4rem; }
.bullets li { display: grid; gap: 0.28rem; padding-inline-start: 1.5rem; position: relative; list-style: none; }
.bullets li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.62em;
  inset-inline-start: 0;
  inline-size: 8px; block-size: 1px;
  background: var(--gd-500);
}
.bullets strong { font-family: var(--font-ui); font-weight: 700; color: var(--ink); }
.bullets p { font-size: var(--t-sm); color: var(--ink-quiet); }

/* --- Coverage ------------------------------------------------------------- */

.coverage { display: grid; gap: 1px; background: var(--nv-700); border-block: 1px solid var(--nv-700); }
@media (min-width: 700px) { .coverage { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .coverage { grid-template-columns: repeat(3, 1fr); } }

.city {
  background: var(--nv-900);
  padding: clamp(1.2rem, 2.2vw, 1.6rem);
  display: grid;
  gap: 0.5rem;
  transition: background-color var(--dur) var(--ease-out-quart);
}
.city:hover { background: var(--nv-850); }
.city-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.city h3 { font-size: var(--t-md); }
.city-sla { font-family: var(--font-ui); font-weight: 900; color: var(--gd-500); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.city p { font-size: var(--t-sm); color: var(--nv-300); }

/* --- Document surfaces ---------------------------------------------------
   Beige is reserved for what the customer receives. A perforated top edge
   makes it read as paper rather than as a themed panel.
   ------------------------------------------------------------------------ */

.doc {
  position: relative;
  border-radius: var(--r-md);
  padding: clamp(1.5rem, 3vw, 2.4rem);
  box-shadow: 0 24px 60px -30px oklch(0 0 0 / 0.8);
}
/* Punched top edge — semicircles in the colour of whatever sits behind the
   document, so the beige reads as a torn perforation rather than a border. */
.doc::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: 6px;
  background-image: radial-gradient(circle at 5px 0, var(--doc-punch, var(--nv-900)) 4px, transparent 4.5px);
  background-size: 10px 6px;
}
.doc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem 1.4rem;
  padding-block-end: 0.9rem;
  border-block-end: 1px solid var(--line);
}
.doc-head h3 { font-size: var(--t-md); }
.doc-ref { font-family: var(--font-ui); font-weight: 700; font-size: var(--t-sm); color: var(--pa-500); font-variant-numeric: tabular-nums; }

.doc-rows { display: grid; gap: 0; margin-block: 0.5rem; }
.doc-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.4rem 1rem;
  padding-block: 0.7rem;
  border-block-end: 1px dashed var(--line);
  font-size: var(--t-sm);
}
.doc-row:last-child { border-block-end: 0; }
.doc-row .qty { color: var(--pa-500); font-size: var(--t-xs); display: block; }
.doc-row .amt { font-family: var(--font-ui); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.doc-total {
  display: flex;
  flex-wrap: wrap;          /* narrow summary cards stack rather than squeeze */
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  margin-block-start: 0.9rem;
  padding-block-start: 0.9rem;
  border-block-start: 2px solid var(--nv-900);
}
.doc-total .figure { color: var(--nv-900); font-size: clamp(1.7rem, 3vw, 2.3rem); }
.doc-note { font-size: var(--t-xs); color: var(--pa-500); margin-block-start: 0.9rem; }

/* --- Stats band ----------------------------------------------------------- */

.stats { display: grid; gap: clamp(1.6rem, 3vw, 2.6rem); }
@media (min-width: 640px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { display: grid; gap: 0.55rem; align-content: start; }
.stat .figure { font-size: clamp(2.2rem, 4vw, 3.2rem); }
.stat p { font-size: var(--t-sm); color: var(--nv-300); max-inline-size: 26ch; }
.stat .rule-measure { --tick: 10px; block-size: 8px; opacity: 0.4; }

/* --- Quotes / voices ------------------------------------------------------ */

.voices { display: grid; gap: clamp(1rem, 2vw, 1.4rem); }
@media (min-width: 860px) { .voices { grid-template-columns: repeat(3, 1fr); } }
.voice {
  background: var(--nv-800);
  border: 1px solid var(--nv-700);
  border-radius: var(--r-md);
  padding: clamp(1.3rem, 2.4vw, 1.8rem);
  display: grid;
  gap: 1rem;
  align-content: start;
}
.voice blockquote { font-size: var(--t-md); color: var(--pa-200); line-height: 1.6; }
html[lang="ar"] .voice blockquote { line-height: 1.75; }
.voice figcaption { display: grid; gap: 0.15rem; font-size: var(--t-sm); }
.voice figcaption strong { font-family: var(--font-ui); font-weight: 700; }
.voice figcaption span { color: var(--nv-300); font-size: var(--t-xs); }

/* --- Logo strip ----------------------------------------------------------- */

.marks { display: flex; flex-wrap: wrap; gap: clamp(1.4rem, 4vw, 3.4rem); align-items: center; }
.mark-item {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  color: var(--nv-300);
  letter-spacing: 0.01em;
  transition: color var(--dur) var(--ease-out-quart);
}
.mark-item:hover { color: var(--pa-200); }

/* --- CTA band ------------------------------------------------------------- */

.cta {
  position: relative;
  overflow: hidden;
  background: var(--nv-800);
  border-radius: var(--r-lg);
  padding: clamp(2rem, 5vw, 4rem);
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.4rem);
  align-items: center;
}
@media (min-width: 880px) { .cta { grid-template-columns: 1.4fr auto; } }
.cta h2 { font-size: var(--t-xl); max-inline-size: 20ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.cta-art { position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: min(38%, 420px); opacity: 0.16; pointer-events: none; }
.cta-art img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* --- Page hero (inner pages) ---------------------------------------------- */

.page-hero { position: relative; background: var(--nv-950); overflow: hidden; padding-block: clamp(120px, 15vh, 170px) clamp(40px, 6vw, 70px); }
.page-hero-media { position: absolute; inset: 0; z-index: 0; opacity: 0.4; }
.page-hero-media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.page-hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, color-mix(in oklch, var(--nv-950) 70%, transparent), var(--nv-950));
}
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero .lede { max-inline-size: 52ch; }

/* nv-500 measures 3.18:1 at this size on nv-950; nv-300 clears 4.5:1 */
.crumbs { display: flex; gap: 0.5rem; align-items: center; font-size: var(--t-xs); color: var(--nv-300); margin-block-end: 1.2rem; }
.crumbs a:hover { color: var(--gd-400); }
.crumbs span[aria-hidden] { opacity: 0.6; }

/* --- Catalogue ------------------------------------------------------------ */

.catalog { display: grid; gap: clamp(1.6rem, 3vw, 2.6rem); align-items: start; }
@media (min-width: 1000px) { .catalog { grid-template-columns: 250px minmax(0, 1fr); } }

.filters { display: grid; gap: 1.6rem; align-content: start; }
@media (min-width: 1000px) { .filters { position: sticky; inset-block-start: 100px; } }
.filter-group { display: grid; gap: 0.7rem; }
.filter-group h3 { font-size: 0.86rem; color: var(--gd-500); letter-spacing: 0; }
.filter-list { display: grid; gap: 0.5rem; }
.filter-list label { display: flex; align-items: center; gap: 0.6rem; font-size: var(--t-sm); color: var(--nv-200); cursor: pointer; }
.filter-list input { accent-color: var(--gd-500); inline-size: 1rem; block-size: 1rem; }
.filter-count { margin-inline-start: auto; font-size: var(--t-xs); color: var(--nv-300); font-variant-numeric: tabular-nums; }

.catalog-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.2rem;
  align-items: center;
  justify-content: space-between;
  padding-block-end: 1rem;
  margin-block-end: 1.4rem;
  border-block-end: 1px solid var(--nv-700);
}
.catalog-count { font-size: var(--t-sm); color: var(--nv-300); }
.catalog-count strong { font-family: var(--font-ui); color: var(--pa-200); }

.empty {
  border: 1px dashed var(--nv-600);
  border-radius: var(--r-md);
  padding: clamp(2rem, 5vw, 3.4rem);
  text-align: center;
  display: grid;
  gap: 0.9rem;
  justify-items: center;
}
.empty h3 { font-size: var(--t-md); }
.empty p { color: var(--nv-300); font-size: var(--t-sm); max-inline-size: 42ch; }

/* --- Spec table ----------------------------------------------------------- */

.table-scroll { overflow-x: auto; border: 1px solid var(--nv-700); border-radius: var(--r-md); }
table.spec { inline-size: 100%; border-collapse: collapse; font-size: var(--t-sm); min-inline-size: 560px; }
table.spec th, table.spec td { padding: 0.85rem 1.1rem; text-align: start; border-block-end: 1px solid var(--nv-700); }
table.spec thead th {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--t-xs);
  color: var(--gd-500);
  background: var(--nv-850);
  white-space: nowrap;
}
table.spec tbody tr:last-child :is(td, th) { border-block-end: 0; }
table.spec tbody tr { transition: background-color var(--dur-fast) var(--ease-out-quart); }
table.spec tbody tr:hover { background: var(--nv-850); }
table.spec td.n { font-family: var(--font-ui); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --- Accordion ------------------------------------------------------------ */

.faq { display: grid; border-block-start: 1px solid var(--nv-700); }
.faq details { border-block-end: 1px solid var(--nv-700); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding-block: 1.2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--t-md);
  color: var(--pa-200);
  transition: color var(--dur-fast) var(--ease-out-quart);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--gd-400); }
.faq summary::after {
  content: "";
  margin-inline-start: auto;
  inline-size: 12px; block-size: 12px;
  flex: 0 0 auto;
  /* Physical borders on purpose: a disclosure caret is a chevron pointing
     down, not directional content, so it must not mirror in RTL. */
  border-right: 2px solid var(--gd-500);
  border-bottom: 2px solid var(--gd-500);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease-out-quint);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq .faq-body { padding-block-end: 1.4rem; color: var(--nv-300); font-size: var(--t-sm); }
.faq .faq-body p { max-inline-size: 70ch; }

/* --- Quote builder -------------------------------------------------------- */

.builder { display: grid; gap: clamp(1.6rem, 3vw, 2.6rem); align-items: start; }
@media (min-width: 1020px) { .builder { grid-template-columns: minmax(0, 1fr) 380px; } }

.steps-bar { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin-block-end: 1.8rem; }
.step-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--t-sm);
  color: var(--nv-300);
}
.step-chip b {
  inline-size: 24px; block-size: 24px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}
.step-chip[data-state="active"] { color: var(--gd-400); }
.step-chip[data-state="done"] { color: var(--ok); }

.picker { display: grid; gap: 0.6rem; }
.pick {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  background: var(--nv-800);
  border: 1px solid var(--nv-700);
  border-radius: var(--r-md);
  padding: 0.75rem;
  transition: border-color var(--dur-fast) var(--ease-out-quart), background-color var(--dur-fast) var(--ease-out-quart);
}
.pick:hover { border-color: var(--nv-500); }
.pick[data-selected="true"] { border-color: var(--gd-500); background: var(--nv-700); }
.pick-thumb { inline-size: 64px; block-size: 64px; border-radius: var(--r-sm); object-fit: cover; }
.pick-info { display: grid; gap: 0.2rem; min-inline-size: 0; }
.pick-info strong { font-family: var(--font-ui); font-weight: 700; font-size: var(--t-base); }
.pick-info span { font-size: var(--t-xs); color: var(--nv-300); }
.pick-qty { display: flex; align-items: center; gap: 0.35rem; }
.qty-btn {
  inline-size: 34px; block-size: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--nv-600);
  border-radius: var(--r-sm);
  color: var(--pa-200);
  font-family: var(--font-ui);
  font-weight: 700;
  transition: border-color var(--dur-fast) var(--ease-out-quart), color var(--dur-fast) var(--ease-out-quart);
}
.qty-btn:hover { border-color: var(--gd-500); color: var(--gd-400); }
.qty-input {
  inline-size: 66px;
  text-align: center;
  background: var(--nv-850);
  border: 1px solid var(--nv-600);
  border-radius: var(--r-sm);
  padding: 0.45rem 0.3rem;
  font-family: var(--font-ui);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button { appearance: none; margin: 0; }

.summary-card { position: sticky; inset-block-start: 100px; }

.panel { display: grid; gap: 1.2rem; }
.panel[hidden] { display: none; }

.form-grid { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .form-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } }

.builder-nav { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: space-between; margin-block-start: 1.6rem; padding-block-start: 1.4rem; border-block-start: 1px solid var(--nv-700); }

.sent {
  display: grid;
  gap: 1rem;
  justify-items: center;
  text-align: center;
  padding-block: clamp(1.5rem, 4vw, 2.6rem);
}
.sent-tick { inline-size: 54px; block-size: 54px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in oklch, var(--ok) 20%, transparent); color: var(--ok); }
.sent-tick svg { inline-size: 26px; block-size: 26px; }

/* --- Misc ----------------------------------------------------------------- */

.note-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.2rem;
  padding: 0.9rem 1.2rem;
  border: 1px solid var(--nv-700);
  border-radius: var(--r-md);
  background: var(--nv-850);
  font-size: var(--t-sm);
  color: var(--nv-300);
}
.note-band strong { color: var(--gd-400); font-family: var(--font-ui); font-weight: 700; }

.contact-grid { display: grid; gap: clamp(1.6rem, 3vw, 2.8rem); align-items: start; }
@media (min-width: 940px) { .contact-grid { grid-template-columns: 1fr 1fr; } }

.contact-lines { display: grid; gap: 1.3rem; }
.contact-line { display: grid; gap: 0.2rem; }
.contact-line dt { font-family: var(--font-ui); font-weight: 700; font-size: var(--t-xs); color: var(--gd-500); }
.contact-line dd { font-size: var(--t-base); color: var(--pa-200); }
.contact-line dd a:hover { color: var(--gd-400); }

.team { display: grid; gap: clamp(1rem, 2vw, 1.6rem); }
@media (min-width: 700px) { .team { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .team { grid-template-columns: repeat(4, 1fr); } }
.team-member { display: grid; gap: 0.6rem; }
.team-member .ph { aspect-ratio: 1; border-radius: var(--r-md); background: var(--nv-800); display: grid; place-items: center; font-family: var(--font-display); font-weight: 900; font-size: 2.4rem; color: var(--nv-600); }
.team-member strong { font-family: var(--font-ui); font-weight: 700; }
.team-member span { font-size: var(--t-sm); color: var(--nv-300); }