/* NIN Group · section head, companies panels, governance bento, inside-the-products tabs */
.shead { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.shead h2 { font-size: var(--text-display-s); font-weight: 700; letter-spacing: -0.01em; text-transform: uppercase; line-height: 1.04; }

/* Companies: two panels, the active one widens on desktop (stacked on mobile) */
.panels { display: grid; gap: var(--space-sm); }
.panel { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--color-ink); color: var(--color-on-ink); display: flex; flex-direction: column; }
.panel__art { position: relative; height: 18rem; flex: none; }
.panel__num { position: absolute; top: var(--space-md); left: var(--space-md); z-index: var(--z-raised); width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; background: var(--color-paper); color: var(--color-ink); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.panel.is-active .panel__num { background: var(--color-accent); color: var(--color-on-ink); }
.panel__toggle { position: absolute; inset: 0; z-index: var(--z-raised); background: none; border: 0; cursor: pointer; border-radius: inherit; }
.panel__body { position: relative; z-index: var(--z-raised); padding: var(--space-lg); display: grid; gap: var(--space-sm); }
.panel__body h3 { font-size: var(--text-xl); }
.panel__body p { color: var(--color-on-ink-muted); font-size: var(--text-base); max-width: 38ch; }
.panel__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.panel__go { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-on-ink); font-size: var(--text-sm); white-space: nowrap; text-underline-offset: 0.3em; }
.panel__go svg { width: 1rem; color: var(--color-accent-on-ink); }
.panel--light { background: var(--color-paper); color: var(--color-ink); }
.panel--light .panel__num { background: var(--color-paper-2); }
.panel--light .panel__body p { color: var(--color-muted); }
.panel--light .panel__go { color: var(--color-ink); }
.panel--light .panel__go svg { color: var(--color-accent); }
.panel__mini { display: none; }
@media (min-width: 60rem) {
  .panels { display: flex; height: 32rem; }
  .panel { flex: 1 1 0; min-width: 6rem; transition: flex-grow var(--dur-long) var(--ease-in-out); }
  .panel.is-active { flex-grow: 3; }
  .panel__art { position: absolute; top: 0; right: 0; bottom: 0; height: auto; width: 100%; }
  .panel.is-active .panel__art { width: 52%; }
  .panel__body { position: absolute; left: 0; bottom: 0; right: 48%; transition: opacity var(--dur-short) var(--ease-out); }
  .panel:not(.is-active) .panel__body { opacity: 0; pointer-events: none; }
  .panel.is-active .panel__toggle { pointer-events: none; }
  .panel__mini { position: absolute; right: var(--space-md); bottom: var(--space-md); z-index: var(--z-raised); width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; background: var(--color-ink-2); color: var(--color-on-ink); pointer-events: none; }
  .panel.is-active .panel__mini { display: none; }
}

/* Governance bento */
.gov { display: grid; gap: var(--space-md); grid-template-columns: minmax(0, 1fr); }
.gov__card { padding: var(--space-lg); display: grid; gap: var(--space-md); align-content: start; }
.gov__card h3 { font-size: var(--text-lg); }
.gov__card > p { color: var(--color-muted); font-size: var(--text-base); max-width: 44ch; }
.ledger { background: var(--color-paper-2); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); }
.ledger li { list-style: none; display: grid; grid-template-columns: 1fr auto; gap: var(--space-2xs) var(--space-md); padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); }
.ledger li:last-child { border-bottom: 0; }
.ledger ul { margin: 0; padding: 0; }
.ledger b { font-weight: 500; }
.ledger code { font-family: var(--font-body); font-variant-numeric: tabular-nums; color: var(--color-muted); font-size: var(--text-xs); overflow-wrap: anywhere; }
.ledger time { font-size: var(--text-xs); color: var(--color-muted); font-variant-numeric: tabular-nums; text-align: end; }
.ok { display: inline-flex; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--color-accent); color: var(--color-on-ink); align-items: center; justify-content: center; font-size: 0.65rem; margin-inline-end: var(--space-xs); vertical-align: -0.15em; }
.gov__ink { background: var(--color-ink); color: var(--color-on-ink); padding: var(--space-lg); display: grid; align-content: end; min-height: 16rem; }
.gov__ink p { font: 600 var(--text-lg) / 1.25 var(--font-body); letter-spacing: -0.015em; max-width: 22ch; }
.gov__ink mark { background: none; color: var(--color-accent-on-ink); }
.facts { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
@media (min-width: 60rem) {
  .gov { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(15rem, auto); }
  .gov__card--ledger { grid-column: span 6; grid-row: span 2; }
  .gov__phone { grid-column: span 3; }
  .gov__ink { grid-column: span 3; }
  .gov__card--data { grid-column: span 6; }
}

/* Inside the products: sticky tab rail + dark panel */
.inside { display: grid; gap: var(--space-lg); grid-template-columns: minmax(0, 1fr); }
.rail { display: flex; gap: var(--space-xs); overflow-x: auto; padding-bottom: var(--space-2xs); }
.rail button { position: relative; background: none; border: 0; padding: var(--space-xs) var(--space-md); font: 400 var(--text-sm) / 1.4 var(--font-body); color: var(--color-muted); cursor: pointer; white-space: nowrap; text-align: start; border-radius: var(--radius-pill); }
.rail button[aria-selected="true"] { color: var(--color-ink); background: var(--color-paper); }
.deck { background: var(--color-ink); color: var(--color-on-ink); border-radius: var(--radius-lg); padding: var(--space-lg); }
.deck [role="tabpanel"] { display: grid; gap: var(--space-lg); }
.deck [role="tabpanel"][hidden] { display: none; }
.deck__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm); align-items: start; }
.deck__head h3 { font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.01em; text-transform: uppercase; }
.deck__head p { color: var(--color-on-ink-muted); font-size: var(--text-base); margin-top: var(--space-xs); max-width: 48ch; }
.widgets { display: grid; gap: var(--space-sm); grid-template-columns: minmax(0, 1fr); }
.widget { background: var(--color-ink-2); border-radius: var(--radius-md); padding: var(--space-md); display: grid; gap: var(--space-xs); align-content: start; }
.widget small { color: var(--color-on-ink-muted); font-size: var(--text-xs); }
.widget b { font: 600 var(--text-md) / 1.3 var(--font-body); letter-spacing: -0.01em; }
.widget--pic { position: relative; padding: 0; overflow: hidden; min-height: 18rem; }
.widget--pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
@media (min-width: 40rem) { .widgets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) {
  .inside { grid-template-columns: 12rem minmax(0, 1fr); align-items: start; }
  .rail { position: sticky; top: 6rem; flex-direction: column; border-inline-start: var(--rule-hair) solid var(--color-rule); padding: 0; border-radius: 0; }
  .rail button { border-radius: 0; padding-inline-start: var(--space-md); }
  .rail button[aria-selected="true"] { background: none; box-shadow: inset 2px 0 0 var(--color-accent); }
  .deck { padding: var(--space-xl); }
  .widgets { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.9fr); }
  .widget--pic { grid-row: span 2; grid-column: 3; }
}

/* Trust: Vaumu's on-device promise */
.gov__phone { padding: var(--space-lg); display: grid; align-content: space-between; gap: var(--space-md); min-height: 16rem; background: var(--color-accent-soft); }
.gov__phone b { font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; }
.gov__phone p { font-size: var(--text-base); color: var(--color-muted); }

/* Where we work: the country's greeting fills the picture slot */
.widget--hello { background: var(--color-accent); color: var(--color-on-ink); display: grid; place-content: center; text-align: center; gap: var(--space-xs); padding: var(--space-lg); }
.widget--hello span { font-size: clamp(2.4rem, 1.4rem + 3vw, 4rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.widget--hello small { color: var(--color-on-ink); opacity: 0.8; }

/* Work with us: two doors, each with one big mark */
.work { display: grid; gap: var(--space-md); grid-template-columns: minmax(0, 1fr); }
.work__card { display: grid; align-content: space-between; gap: var(--space-md); padding: var(--space-xl) var(--space-lg); min-height: 20rem; color: var(--color-ink); text-decoration: none; transition: transform var(--dur-short) var(--ease-out); }
.work__card:hover { transform: translateY(-3px); }
.work__card p { color: var(--color-muted); max-width: 40ch; }
.work__card .panel__go { color: inherit; text-decoration: underline; text-underline-offset: 0.3em; }
.work__big { font-size: clamp(3rem, 2rem + 4vw, 5.5rem); font-weight: 700; letter-spacing: -0.05em; line-height: 0.9; color: var(--color-accent); }
.work__card--ink { background: var(--color-ink); color: var(--color-on-ink); }
.work__card--ink p { color: var(--color-on-ink-muted); }
.work__card--ink .work__big { color: var(--color-accent-on-ink); }
@media (min-width: 60rem) { .work { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }