/* ============================================================
   IBEC type system — text & small-type refinement
   Display: IBM Plex Sans (unchanged — large headings keep their
   existing sizes, weights and tracking).
   Text: Inter, optical-size variable build (opsz 14–32). The browser
   selects the text-optimised cut automatically at body sizes, which
   opens letter spacing and apertures for crisper small text.

   Loaded after styles.css and photography.css on every page, so it
   is the single source of truth for body, small and label text.
   ============================================================ */

:root {
  /* Scale */
  --text-lead: clamp(1.1875rem, 0.6vw + 1rem, 1.375rem); /* 19–22px */
  --text-body: 1.0625rem;   /* 17px */
  --text-small: 0.9375rem;  /* 15px — card copy, notes */
  --text-caption: 0.8125rem;/* 13px — captions, meta */
  --text-label: 0.75rem;    /* 12px — uppercase labels (floor) */

  /* Leading */
  --leading-lead: 1.5;
  --leading-body: 1.6;
  --leading-small: 1.55;

  /* Tracking — Inter's dynamic metrics: tighten as size grows,
     open up uppercase so capitals don't clot at small sizes. */
  --track-lead: -0.017em;
  --track-body: -0.011em;
  --track-small: -0.006em;
  --track-label: 0.08em;
  --track-control: 0.06em;
}

@media (max-width: 720px) {
  :root {
    --text-body: 1rem;       /* 16px — also avoids iOS input zoom */
    --text-small: 0.9375rem;
  }
}

/* ------------------------------------------------------------
   Base text
   ------------------------------------------------------------ */
body {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--track-body);
  font-optical-sizing: auto;
  font-kerning: normal;
}

/* Headings keep their own (zero) tracking — only text is retuned. */
h1, h2, h3, h4, .hero-title, .page-title, .section-title, .stat-num,
.brand-mark, .brand-mark-lg { letter-spacing: 0; }

p, li, dd, figcaption, blockquote { text-wrap: pretty; }

/* Lead paragraphs move from the display face to Inter: the display
   face stays reserved for headings, and long leads read cleaner. */
.lead {
  font-family: var(--font-body);
  font-size: var(--text-lead);
  font-weight: 400;
  line-height: var(--leading-lead);
  letter-spacing: var(--track-lead);
}

.page-lede,
.hero-lede {
  font-size: clamp(1.0625rem, 0.3vw + 1rem, 1.1875rem);
  line-height: 1.58;
  letter-spacing: -0.013em;
}

.section-intro,
.experience-note,
.phase-head p,
.about-body p:not(.lead) {
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

/* Card and supporting copy */
.service-card p,
.value-card p,
.team-card p,
.process-step p,
.project-meta p,
.contact-assurance p,
.approach-body {
  font-size: var(--text-small);
  line-height: var(--leading-small);
  letter-spacing: var(--track-small);
}

/* Short statements in the mandate band were body-sized display type;
   they read as text, so they use the text face at a confident weight. */
.band-grid strong {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: var(--track-body);
}

/* Captions and meta */
figcaption,
.gallery-caption,
.form-note,
.image-status,
.image-type {
  font-size: var(--text-caption);
  line-height: 1.5;
  letter-spacing: 0;
}

.footer-col p,
.contact-block p {
  letter-spacing: var(--track-small);
}

.footer-base {
  font-size: var(--text-caption);
  letter-spacing: 0;
}

/* ------------------------------------------------------------
   Uppercase labels — one consistent tier, 12px floor
   ------------------------------------------------------------ */
.eyebrow,
.panel-kicker,
.trust-label,
.stat-label,
.service-index,
.project-card .project-tag,
.project-tag,
.value-num,
.team-role,
.page-crumb,
.footer-col h3,
.footer-note,
.contact-block h2,
.form-row label,
.hero-proof span,
.cta-note,
.panel-matrix span,
.showreel-final,
.pending-label,
.mobile-nav-foot,
.preloader-sub,
.frame-note {
  font-size: var(--text-label);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: var(--track-label);
  font-variant-numeric: tabular-nums;
}

.stat-label,
.footer-col h3 { font-weight: 500; }

/* ------------------------------------------------------------
   Brand lockup
   The wordmark leads at display weight; the descriptor sits beside
   it on two short lines behind a orange rule, so it stays legible
   at every width instead of trailing as one long, tiny line.
   ------------------------------------------------------------ */
.brand {
  flex-direction: row;
  align-items: center;
  gap: 0.9rem;
}

.brand-mark {
  font-size: 2.125rem;
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.015em;
}

.brand-sub {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  margin-top: 0;
  padding: 0.12rem 0 0.12rem 0.9rem;
  border-left: 1px solid var(--accent);
  color: var(--white-body);
  font-size: 0.71875rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.15em;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .brand { gap: 0.7rem; }
  .brand-mark { font-size: 1.875rem; }
  .brand-sub {
    display: flex;
    padding-left: 0.7rem;
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
  }
}

@media (max-width: 359px) {
  .brand-mark { font-size: 1.75rem; }
  .brand-sub { font-size: 0.65625rem; letter-spacing: 0.1em; }
}

/* ------------------------------------------------------------
   Controls
   ------------------------------------------------------------ */
.btn,
.text-link,
.card-link,
.filter-btn {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: var(--track-control);
}

.nav a {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: var(--track-control);
}

.gallery-open {
  font-size: 0.875rem;
  letter-spacing: 0;
}

.service-item .num { font-variant-numeric: tabular-nums; }
.service-item .label { letter-spacing: var(--track-small); }

/* Form controls stay at 16px+ so iOS never zooms on focus. */
.form-row input,
.form-row textarea { font-size: 1rem; letter-spacing: var(--track-body); }