@charset "UTF-8";
/* ============================================================================
   BOLLAM RISHITHEJ — EXECUTIVE DOSSIER & VENTURE MONOGRAPH
   Shares the Monograph design system with styles.css.

   PAGE MODEL
   Pages are printed on light stock. Photography is tipped in on INK PLATES —
   dark panels that carry the full-tone images. This is the editorial-correct
   answer for a monograph, and it is also the technically correct one: the
   source photographs are calibrated with pure-black borders so they dissolve
   into an ink field. Dropping them straight onto cream would expose a hard
   rectangle on every plate.

   CONTENTS
     01  Tokens
     02  Reset & base
     03  Dossier bar
     04  Page shell
     05  Typography & prose
     06  Photographic plates
     07  Cover (page 01)
     08  Body grid & panels
     09  Spec cards & lists
     10  Company pages
     11  Industrial table
     12  Motion
     13  Print
   ========================================================================= */

/* ---------------------------------------------------------------------------
   01  TOKENS
   ------------------------------------------------------------------------ */

:root {
  --paper: #f4f2ec;
  --paper-sunk: #e9e6dd;
  --paper-raised: #fbfaf7;
  --ink: #0b0d11;
  --ink-2: #3f4550;
  --ink-3: #5a616d;
  --rule: rgba(11, 13, 17, 0.16);
  --rule-soft: rgba(11, 13, 17, 0.08);
  --shadow: rgba(11, 13, 17, 0.12);

  --acid: #c6ff35;
  --acid-ink: #46610d;
  --ink-deep: #05070a;
  --plate: #05070a;      /* photographic plate stock */
  --plate-2: #0c1017;

  /* Apple type throughout. SF Pro Display on Apple, Segoe UI Variable
     Display on Windows, Roboto on Android. No webfont is loaded at all
     now, so first paint carries the final type. */
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
    'Segoe UI Variable Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    sans-serif;
  /* Native system stack: SF Pro on Apple, Segoe UI on Windows, Roboto on
     Android. Apple's licence does not permit shipping SF as a webfont, and
     referencing the installed face is both legal and faster — it paints on
     the first frame with no download and no layout shift. */
  --font-text: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display',
    'Segoe UI Variable Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    'Noto Sans', 'Liberation Sans', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, 'Cascadia Mono',
    'Segoe UI Mono', 'Roboto Mono', 'Liberation Mono', 'Courier New', monospace;

  --t-h1: clamp(2.9rem, 10vw, 7.5rem);
  --t-h2: clamp(1.95rem, 5vw, 3.9rem);
  --t-h3: clamp(1.35rem, 2.6vw, 2.1rem);
  --t-h4: clamp(1.02rem, 1.4vw, 1.2rem);
  --t-lead: clamp(1.05rem, 1.7vw, 1.4rem);
  --t-body: clamp(0.975rem, 1vw, 1.0625rem);
  --t-small: 0.9375rem;  /* 15px */
  --t-meta: 0.875rem;    /* 14px — metadata floor; 13px mono uppercase read poorly */

  --gutter: clamp(20px, 5.5vw, 92px);
  --page-y: clamp(64px, 8vw, 128px);
  --bar-h: 64px;
  --tap: 44px;
  --radius: 2px;
  --radius-pill: 999px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 768px) {
  :root { --bar-h: 72px; }
}

/* Ink scope — used by every photographic plate and by the accent pages. */
.tone-dark,
.panel-photo-hero,
.cover-portrait-frame,
.panoramic-header-banner {
  --paper: #05070a;
  --paper-sunk: #0a0d13;
  --paper-raised: #11151d;
  --ink: #f4f2ec;
  --ink-2: #c2c8d2;
  --ink-3: #8d949f;
  --rule: rgba(244, 242, 236, 0.2);
  --rule-soft: rgba(244, 242, 236, 0.1);
  --acid-ink: var(--acid);
}

/* ---------------------------------------------------------------------------
   02  RESET & BASE
   ------------------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bar-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  /* See styles.css — width/height attributes otherwise defeat aspect-ratio. */
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul { list-style: none; }

a:focus-visible,
button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

::selection {
  background: var(--ink);
  color: var(--paper);
}

/* Paper fibre, not video noise. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.03;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------
   03  DOSSIER BAR
   ------------------------------------------------------------------------ */

.dossier-bar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-inline: var(--gutter);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  border-bottom: 1px solid var(--rule);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.bar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: var(--tap);
  min-height: var(--tap);
}

.bar-mark {
  flex: 0 0 auto;
  font: 700 clamp(1.1rem, 2vw, 1.4rem) / 1 var(--font-display);
}

.bar-tag {
  font: 400 var(--t-meta) / 1.3 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  /* On a phone the volume line is noise next to the return action. */
  display: none;
}

@media (min-width: 560px) {
  .bar-tag {
    display: block;
    padding-left: 12px;
    border-left: 1px solid var(--rule);
  }
}

.bar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-dossier {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 11px 18px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  font: 500 var(--t-meta) / 1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.35s var(--ease-soft), color 0.35s var(--ease-soft);
}

.btn-dossier:hover {
  background: transparent;
  color: var(--ink);
}

/* ---------------------------------------------------------------------------
   04  PAGE SHELL
   ------------------------------------------------------------------------ */

.dossier-main { margin-top: var(--bar-h); }

.dossier-page {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Deliberately smaller than the page padding. The two body columns rarely
     end level, so a large gap here compounds with that imbalance into a dead
     band above the folio. */
  gap: clamp(32px, 4vw, 60px);
  padding: var(--page-y) var(--gutter);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

/* Alternating stock, the way a printed signature alternates. */
.dossier-page:nth-child(even) { background: var(--paper-sunk); }

/* Running heads and folios. */
.page-meta-header,
.page-meta-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 22px;
  font: 400 var(--t-meta) / 1.5 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.page-meta-header {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}

.page-meta-footer {
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}

.page-serial { color: var(--ink); }

.page-classification { font-size: var(--t-meta); }

/* ---------------------------------------------------------------------------
   05  TYPOGRAPHY & PROSE
   ------------------------------------------------------------------------ */

h1, h2 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h3, h4 {
  font-family: var(--font-text);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); }

h1 em,
h2 em {
  font-style: normal;
  font-weight: 300;
  color: var(--ink-3);
}

.page-primary-content h2 {
  margin-bottom: clamp(18px, 2.4vw, 32px);
  font-size: var(--t-h2);
  color: var(--ink);
}

.prose-block {
  margin-bottom: clamp(14px, 1.8vw, 22px);
  max-width: 68ch;
  font-size: var(--t-body);
  line-height: 1.75;
  color: var(--ink-2);
}

.prose-block strong {
  font-weight: 600;
  color: var(--ink);
}

/* Contact addresses. Previously inline `color:#fff` from the dark theme, which
   on the light stock measured 1.04:1 — invisible. */
.channel-address {
  display: inline-block;
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--ink);
  overflow-wrap: break-word;
}

.lead-thesis {
  margin-bottom: clamp(20px, 2.6vw, 34px);
  padding-bottom: clamp(16px, 2vw, 26px);
  border-bottom: 1px solid var(--rule);
  max-width: 60ch;
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--ink);
}

/* Pull-quote — display italic against a hairline, no coloured box. */
.profile-overview-quote {
  margin-bottom: clamp(20px, 2.6vw, 34px);
  padding-left: clamp(16px, 2.2vw, 28px);
  border-left: 2px solid var(--ink);
  font-family: var(--font-display);
  font-size: var(--t-lead);
  font-style: italic;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
}

.dossier-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(20px, 2.6vw, 34px);
}

.dossier-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 14px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  font: 400 var(--t-meta) / 1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.dossier-pill.highlight {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* ---------------------------------------------------------------------------
   06  PHOTOGRAPHIC PLATES
   Each plate is an ink field. The source images carry pure-black borders, so
   they dissolve into it exactly as calibrated.
   ------------------------------------------------------------------------ */

.panel-photo-hero,
.panoramic-header-banner,
.cover-portrait-frame {
  position: relative;
  overflow: hidden;
  background: var(--plate);
  border-radius: var(--radius);
}

.panel-photo-hero img,
.cover-portrait-frame img {
  width: 100%;
  object-fit: cover;
  background: var(--plate);
}

/* The cover carries portrait-navy, whose borders are calibrated to absolute
   zero rgb(0,0,0). Against --plate (#05070a) that is a delta of 22 and the
   portrait reads as a rectangle; matching the image's own ground removes it.
   The other plates hold busy-edged frames and feather via their blend masks. */
.cover-portrait-frame,
.cover-portrait-frame img {
  background: #000;
}

.panel-photo-hero.portrait-h img,
.cover-portrait-frame img { aspect-ratio: 4 / 5; }

/* Tablet band: the panel is still full width, so an uncapped portrait plate
   runs to ~900px tall. Cap and centre it. */
@media (min-width: 620px) and (max-width: 1023px) {
  .panel-photo-hero,
  .cover-portrait-frame {
    max-width: 460px;
    margin-inline: auto;
  }
}

@media (min-width: 1024px) {
  .panel-photo-hero.portrait-h img,
  .cover-portrait-frame img { aspect-ratio: 3 / 4; }
}

/* --- Face anchors. Calibrated per asset; do not retune casually. --- */
.photo-ceremonial img    { object-position: center 15%; }
.photo-hero-half img     { object-position: 88% 15%; }
.photo-casual-chair img  { object-position: center 16%; }
.photo-ml-crest img      { object-position: 65% 20%; }
.photo-grey img          { object-position: center 18%; }
.photo-blue img          { object-position: center 18%; }
.photo-office-close img  { object-position: center 35%; }

/* --- Edge treatments. Masks fade to the plate, never to the page. --- */
.blend-vignette img {
  -webkit-mask-image: linear-gradient(to bottom, black 72%, transparent 100%),
    linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, black 72%, transparent 100%),
    linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-composite: intersect;
}

.blend-radial img {
  -webkit-mask-image: radial-gradient(ellipse 90% 88% at 50% 48%, black 52%, transparent 100%);
  mask-image: radial-gradient(ellipse 90% 88% at 50% 48%, black 52%, transparent 100%);
}

.blend-pure-black img { filter: none; }

/* Caption rides under the plate, on the page, where it belongs. */
.photo-caption-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 10px 12px;
  background: var(--plate);
  border-top: 1px solid rgba(244, 242, 236, 0.12);
  font: 400 var(--t-meta) / 1.4 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(244, 242, 236, 0.66);
}

.photo-caption-bar span:last-child { color: var(--acid); }

.panoramic-header-banner {
  margin-bottom: clamp(22px, 3vw, 40px);
}

.panoramic-header-banner img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: brightness(0.88) contrast(1.06);
}

@media (min-width: 768px) {
  .panoramic-header-banner img { aspect-ratio: 21 / 7; }
}

.panoramic-overlay-badge,
.cover-portrait-badge {
  position: absolute;
  left: clamp(12px, 2vw, 20px);
  bottom: clamp(12px, 2vw, 20px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 24px);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: rgba(5, 7, 10, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font: 400 var(--t-meta) / 1.3 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f4f2ec;
}

.badge-dot-green {
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--acid);
}

/* The one frame that is genuinely paper: a scanned document reproduced on the
   page stock, multiplied so its white ground disappears. */
.editorial-paper-frame {
  display: flex;
  flex-direction: column;
  padding: clamp(16px, 2vw, 26px);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.editorial-paper-frame img {
  width: 100%;
  max-height: 440px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.editorial-paper-frame .paper-caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  font: 400 var(--t-meta) / 1.4 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------------------------------------------------------------------------
   07  COVER (PAGE 01)
   ------------------------------------------------------------------------ */

.cover-hero {
  display: grid;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.cover-title-wrap { min-width: 0; }

.cover-hero h1 {
  margin-bottom: clamp(20px, 2.6vw, 34px);
  line-height: 0.88;
  letter-spacing: -0.035em;
}

.cover-subtitle {
  max-width: 54ch;
  margin-bottom: clamp(22px, 3vw, 38px);
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--ink-2);
}

.cover-callout-box {
  padding: clamp(18px, 2.4vw, 30px);
  background: var(--ink);
  border-radius: var(--radius);
  color: var(--paper);
}

.cover-callout-box p {
  max-width: 44ch;
  font-family: var(--font-display);
  font-size: var(--t-lead);
  font-style: italic;
  font-weight: 500;
  line-height: 1.35;
}

.cover-callout-box span {
  display: block;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(244, 242, 236, 0.2);
  font: 400 var(--t-meta) / 1.4 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acid);
}

.cover-portrait-wrap { min-width: 0; }

@media (min-width: 900px) {
  .cover-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}

/* ---------------------------------------------------------------------------
   08  BODY GRID & PANELS
   ------------------------------------------------------------------------ */

.page-body-grid {
  display: grid;
  gap: clamp(32px, 4.5vw, 72px);
  align-items: start;
}

.page-primary-content { min-width: 0; }

.institutional-panel {
  min-width: 0;
  padding: clamp(20px, 2.4vw, 32px);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.institutional-panel h4 {
  margin: clamp(20px, 2.4vw, 30px) 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
  font: 500 var(--t-meta) / 1.4 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

.institutional-panel > *:first-child { margin-top: 0; }

.panel-highlight-box {
  margin-top: clamp(18px, 2.2vw, 26px);
  padding: clamp(16px, 2vw, 22px);
  background: var(--paper-sunk);
  border-left: 2px solid var(--ink);
  border-radius: var(--radius);
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--ink-2);
}

/* Statutory basis note — reads as a footnote in the register, not a callout. */
.governance-note {
  background: transparent;
  border-left-color: var(--ink-3);
}

.governance-note strong {
  display: block;
  margin-bottom: 6px;
  font: 500 var(--t-meta) / 1.4 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.governance-note p {
  font-size: var(--t-meta);
  line-height: 1.65;
  color: var(--ink-3);
}

@media (min-width: 1024px) {
  .page-body-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}

/* ---------------------------------------------------------------------------
   09  SPEC CARDS & LISTS
   ------------------------------------------------------------------------ */

.spec-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: clamp(14px, 1.8vw, 22px);
  margin-top: clamp(24px, 3vw, 40px);
}

.spec-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(18px, 2.2vw, 28px);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.spec-card-num {
  font: 500 var(--t-meta) / 1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.spec-card p {
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--ink-2);
}

.meta-spec-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: var(--t-small);
}

.meta-spec-list li:last-child { border-bottom: none; }

.meta-spec-list .spec-label {
  flex: 0 0 auto;
  font: 400 var(--t-meta) / 1.4 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.meta-spec-list .spec-value {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  text-align: right;
  overflow-wrap: break-word;
  color: var(--ink);
}

/* Inline links inside prose and spec lists. Resolves through --acid-ink, so it
   is a legible deep green on paper and full acid inside an ink plate. Raw
   #c6ff35 on cream is roughly 1.5:1 and unreadable. */
.dossier-inline-link {
  color: var(--acid-ink);
  border-bottom: 1px solid color-mix(in srgb, var(--acid-ink) 40%, transparent);
  overflow-wrap: break-word;
  transition: border-color 0.3s;
}

.dossier-inline-link:hover { border-bottom-color: var(--acid-ink); }

/* In a spec row the link is the row's only control, so it needs a real target.
   Links inside running prose stay inline — WCAG exempts those, and boxing them
   would break the line rhythm. */
.meta-spec-list .dossier-inline-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
}

.dossier-inline-link.mono {
  font-family: var(--font-mono);
  font-size: var(--t-small);
}

/* ---------------------------------------------------------------------------
   10  COMPANY PAGES
   ------------------------------------------------------------------------ */

.company-brand-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin-bottom: clamp(20px, 2.6vw, 32px);
  padding-bottom: clamp(16px, 2vw, 24px);
  border-bottom: 1px solid var(--rule);
}

.company-emblem {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(56px, 7vw, 76px);
  height: clamp(56px, 7vw, 76px);
  padding: 10px;
  background: var(--plate);
  border-radius: var(--radius);
}

.company-emblem.wide {
  width: auto;
  min-width: clamp(90px, 12vw, 132px);
  padding-inline: 16px;
}

.company-emblem img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.company-title-meta { min-width: 0; }

/* The company name is the primary identifier on a dossier page, so it carries
   the display face — matching the register on the portfolio. */
.company-title-meta h3 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.company-title-meta span {
  display: block;
  margin-top: 8px;
  /* Designation line — reading face, title case. Mono uppercase is reserved
     for serials, folios and reference codes. */
  font: 500 var(--t-small) / 1.5 var(--font-text);
  letter-spacing: 0;
  color: var(--ink-2);
}

/* ---------------------------------------------------------------------------
   11  INDUSTRIAL TABLE
   Collapses to stacked records below the breakpoint — a data table cannot be
   squeezed into 320px and stay readable.
   ------------------------------------------------------------------------ */

.industrial-table {
  width: 100%;
  margin-top: clamp(24px, 3vw, 40px);
  border-collapse: collapse;
  text-align: left;
}

.industrial-table th {
  padding: 14px 16px;
  border-bottom: 1px solid var(--ink);
  background: var(--paper-sunk);
  font: 500 var(--t-meta) / 1.4 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

.industrial-table td {
  padding: 18px 16px;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
  font-size: var(--t-small);
  color: var(--ink-2);
}

.industrial-table tr:hover td { background: var(--paper-raised); }

.table-brand-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  font-weight: 600;
  color: var(--ink);
}

.table-brand-logo {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  padding: 3px;
  background: var(--plate);
  border-radius: var(--radius);
  object-fit: contain;
}

@media (max-width: 767px) {
  .industrial-table,
  .industrial-table tbody,
  .industrial-table tr,
  .industrial-table td { display: block; width: 100%; }

  .industrial-table thead { display: none; }

  .industrial-table tr {
    margin-bottom: 14px;
    background: var(--paper-raised);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
  }

  .industrial-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--rule-soft);
  }

  .industrial-table td:last-child { border-bottom: none; }

  /* Each cell announces its own column, taken from the header via data-label. */
  .industrial-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 5px;
    font: 400 var(--t-meta) / 1.4 var(--font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
}

/* ---------------------------------------------------------------------------
   12  MOTION
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------------------------------------------------------------------------
   13  PRINT
   Light stock prints as light stock. Plates stay ink and are forced to render
   their colour.
   ------------------------------------------------------------------------ */

@media print {
  @page {
    size: A4 portrait;
    margin: 14mm;
  }

  html,
  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 10.5pt;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .dossier-bar,
  .grain,
  .no-print { display: none !important; }

  .dossier-main { margin-top: 0 !important; }

  .dossier-page {
    min-height: 0 !important;
    padding: 0 0 12mm !important;
    background: #fff !important;
    border-bottom: none !important;
    break-after: page !important;
    page-break-after: always !important;
  }

  .dossier-page:last-child {
    break-after: auto !important;
    page-break-after: auto !important;
  }

  .dossier-page:nth-child(even) { background: #fff !important; }

  .page-body-grid { grid-template-columns: 1.15fr 0.85fr !important; }
  .cover-hero { grid-template-columns: 1.15fr 0.85fr !important; }

  .panel-photo-hero,
  .cover-portrait-frame,
  .panoramic-header-banner,
  .company-emblem,
  .table-brand-logo,
  .cover-callout-box {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .spec-card,
  .institutional-panel,
  .panel-photo-hero,
  .cover-portrait-frame,
  .industrial-table tr { break-inside: avoid; }

  a { color: #000 !important; }
}

/* ---------------------------------------------------------------------------
   14  DISPLAY TYPE
   The optical-size pins here were for Bodoni's hairlines and are no longer
   needed. A grotesque tightens as it grows instead.
   ------------------------------------------------------------------------ */

.company-title-meta h3,
.cover-callout-box p,
.profile-overview-quote,
.bar-mark,
.cover-hero h1,
.page-primary-content h2 {
  font-variation-settings: normal;
  font-optical-sizing: auto;
}

.cover-hero h1 { letter-spacing: -0.04em; }
.company-title-meta h3 { letter-spacing: -0.03em; }