/* ==============================================================
   iRedyLabs Technologies — Design System
   --------------------------------------------------------------
   PROJECT  iRedyLabs / Web Platform 2026
   SHEET    A-001
   SCALE    1 : 1
   DRAWN    iRedyLabs Engineering
   --------------------------------------------------------------
   Design language: IBM Carbon Design System fused with the
   visual grammar of old architectural drawings —
   drafting grids, dimension lines, hatching, title blocks,
   technical annotations in monospace, section markers.
   ============================================================== */

/* ── Fonts: IBM Plex (Carbon's official typography) ────────── */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Serif:wght@300;400;500;600&display=swap');

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  /* Carbon-inspired neutrals (warmed slightly toward vellum) */
  --irl-bg:            #f4f1ea;   /* drafting paper / vellum */
  --irl-bg-soft:       #ece8df;   /* aged paper */
  --irl-bg-grid:       #e2dccd;   /* grid line on paper */
  --irl-paper:         #fbf8f1;   /* fresh paper for cards */
  --irl-ink:           #161616;   /* Carbon gray-100, used as drafting ink */
  --irl-ink-soft:      #393939;   /* Carbon gray-80 */
  --irl-graphite:      #525252;   /* Carbon gray-70 */
  --irl-pencil:        #8d8d8d;   /* Carbon gray-50 */
  --irl-light-pencil:  #c6c6c6;   /* Carbon gray-30 */

  /* Carbon blue — our blueprint cyan */
  --irl-blueprint:     #0f62fe;   /* Carbon blue-60 */
  --irl-blueprint-d:   #0043ce;   /* Carbon blue-70 */
  --irl-blueprint-l:   #4589ff;   /* Carbon blue-50 */
  --irl-blueprint-bg:  #edf5ff;   /* Carbon blue-10 */

  /* Logo accent set — pulled from the iRedyLabs marque */
  --irl-marque-red:    #e60000;
  --irl-marque-blue:   #0066cc;
  --irl-marque-yellow: #ffb000;

  /* Functional */
  --irl-success:       #198038;
  --irl-warning:       #f1c21b;
  --irl-error:         #da1e28;

  /* Spacing — Carbon's spacing scale (multiples of 8px / 4px) */
  --sp-01: 0.125rem;  /*  2px */
  --sp-02: 0.25rem;   /*  4px */
  --sp-03: 0.5rem;    /*  8px */
  --sp-04: 0.75rem;   /* 12px */
  --sp-05: 1rem;      /* 16px */
  --sp-06: 1.5rem;    /* 24px */
  --sp-07: 2rem;      /* 32px */
  --sp-08: 2.5rem;    /* 40px */
  --sp-09: 3rem;      /* 48px */
  --sp-10: 4rem;      /* 64px */
  --sp-11: 5rem;      /* 80px */
  --sp-12: 6rem;      /* 96px */
  --sp-13: 10rem;     /* 160px */

  /* Type */
  --ff-sans:  'IBM Plex Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --ff-mono:  'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  --ff-serif: 'IBM Plex Serif', Georgia, serif;

  /* Carbon type scale (productive) */
  --fs-helper:    0.75rem;   /* 12 */
  --fs-body-s:    0.875rem;  /* 14 */
  --fs-body:      1rem;      /* 16 */
  --fs-body-l:    1.125rem;  /* 18 */
  --fs-h6:        1rem;      /* 16 */
  --fs-h5:        1.25rem;   /* 20 */
  --fs-h4:        1.75rem;   /* 28 */
  --fs-h3:        2rem;      /* 32 */
  --fs-h2:        2.625rem;  /* 42 */
  --fs-h1:        3.375rem;  /* 54 */
  --fs-display-1: 4.25rem;   /* 68 */
  --fs-display-2: 5.75rem;   /* 92 */

  /* Grid */
  --grid-max:    1584px;
  --grid-gutter: 2rem;
  --grid-line:   rgba(15, 98, 254, 0.05);  /* drafting grid blue */
  --grid-line-2: rgba(22, 22, 22, 0.04);

  /* Borders, drawn-line look */
  --rule-hair:   1px solid var(--irl-light-pencil);
  --rule-thin:   1px solid var(--irl-graphite);
  --rule-bold:   2px solid var(--irl-ink);
  --rule-dash:   1px dashed var(--irl-pencil);

  /* Shadows — flat by default (drawings have no shadow) */
  --shadow-soft: 0 1px 0 0 var(--irl-light-pencil);
  --shadow-mid:  0 2px 0 0 var(--irl-pencil);

  --header-h: 64px;      /* Carbon UI Shell standard */
  --titleblock-h: 28px;
}

/* ── Reset & base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--ff-sans);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--irl-ink);
  background: var(--irl-bg);
  /* Drafting grid background — graph paper feel, but very subtle */
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    linear-gradient(var(--grid-line-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-2) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 16px 16px, 16px 16px;
  background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--irl-blueprint); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 4px; }
button { font: inherit; cursor: pointer; }

/* selection — drafting blue */
::selection { background: var(--irl-blueprint); color: #fff; }

/* ── Typography classes ────────────────────────────────────── */
.t-mono   { font-family: var(--ff-mono); font-feature-settings: "ss01"; letter-spacing: 0.02em; }
.t-serif  { font-family: var(--ff-serif); }
.t-helper { font-family: var(--ff-mono); font-size: var(--fs-helper); letter-spacing: 0.06em; text-transform: uppercase; color: var(--irl-graphite); }
.t-eyebrow {
  font-family: var(--ff-mono); font-size: var(--fs-helper);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--irl-blueprint);
  display: inline-flex; align-items: center; gap: var(--sp-03);
}
.t-eyebrow::before {
  content: ""; width: 24px; height: 1px; background: var(--irl-blueprint); display: inline-block;
}

h1, h2, h3, h4, h5, h6 { font-weight: 400; line-height: 1.15; margin: 0; letter-spacing: -0.02em; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-weight: 500; }
h5 { font-size: var(--fs-h5); font-weight: 500; }
h6 { font-size: var(--fs-h6); font-weight: 500; }

p { margin: 0 0 var(--sp-05); }
p.lede { font-size: var(--fs-body-l); color: var(--irl-ink-soft); max-width: 60ch; }

/* ── Layout primitives ─────────────────────────────────────── */
.container { max-width: var(--grid-max); padding: 0 var(--sp-06); margin: 0 auto; }
.section { padding: var(--sp-12) 0; position: relative; }
.section--tight { padding: var(--sp-09) 0; }
.section--paper { background: var(--irl-paper); border-top: var(--rule-hair); border-bottom: var(--rule-hair); }
.section--ink { background: var(--irl-ink); color: #fff; }
.section--ink h1, .section--ink h2, .section--ink h3 { color: #fff; }
.section--ink p.lede { color: #c6c6c6; }
.section--blueprint { background: var(--irl-blueprint); color: #fff; }
.section--blueprint h1, .section--blueprint h2 { color: #fff; }

/* 16-column Carbon grid (responsive) */
.grid {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: var(--grid-gutter);
}
@media (max-width: 1056px) { .grid { grid-template-columns: repeat(8, 1fr); } }
@media (max-width: 672px)  { .grid { grid-template-columns: repeat(4, 1fr); gap: var(--sp-05); } }

.col-16 { grid-column: span 16; }
.col-12 { grid-column: span 12; }
.col-10 { grid-column: span 10; }
.col-8  { grid-column: span 8;  }
.col-6  { grid-column: span 6;  }
.col-5  { grid-column: span 5;  }
.col-4  { grid-column: span 4;  }
.col-3  { grid-column: span 3;  }
@media (max-width: 1056px) { [class^="col-"] { grid-column: span 8; } }
@media (max-width: 672px)  { [class^="col-"] { grid-column: span 4; } }

/* ── Drafting Title Block (top of every page header) ───────── */
.titleblock {
  height: var(--titleblock-h);
  display: flex; align-items: stretch;
  background: var(--irl-ink);
  color: #c6c6c6;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  border-bottom: 1px solid #393939;
}
.titleblock__cell {
  padding: 0 var(--sp-04);
  display: flex; align-items: center; gap: var(--sp-03);
  border-right: 1px solid #393939;
  white-space: nowrap;
}
.titleblock__cell:last-child { border-right: 0; margin-left: auto; }
.titleblock__label { color: #6f6f6f; text-transform: uppercase; }
.titleblock__value { color: #f4f4f4; }

/* ── UI Shell Header (Carbon-style) ────────────────────────── */
.irl-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--irl-ink);
  color: #fff;
  border-bottom: 1px solid #393939;
}
.irl-header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  padding: 0 var(--sp-05);
}
.irl-brand {
  display: flex; align-items: center; gap: var(--sp-03);
  color: #fff; text-decoration: none;
  padding-right: var(--sp-05);
  border-right: 1px solid #393939;
  height: 100%;
  margin-right: var(--sp-04);
}
.irl-brand:hover { text-decoration: none; background: #262626; }
.irl-brand__mark {
  width: 32px; height: 32px;
  background: #fff; border-radius: 4px; padding: 3px;
  flex-shrink: 0;
}
.irl-brand__mark img { width: 100%; height: 100%; object-fit: contain; }
.irl-brand__name {
  font-family: var(--ff-sans);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 14px;
}
.irl-brand__sub {
  display: block;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #8d8d8d;
  text-transform: uppercase;
  font-weight: 400;
  margin-top: 1px;
}

.irl-nav { display: flex; align-items: stretch; height: 100%; flex: 1; }
.irl-nav__link {
  display: flex; align-items: center;
  padding: 0 var(--sp-05);
  color: #c6c6c6; text-decoration: none;
  font-size: 14px;
  border-bottom: 3px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
  height: 100%;
}
.irl-nav__link:hover {
  background: #262626; color: #fff; text-decoration: none;
}
.irl-nav__link--active {
  color: #fff;
  background: #262626;
  border-bottom-color: var(--irl-blueprint);
}
.irl-header__actions {
  display: flex; align-items: stretch; height: 100%; gap: 0;
  margin-left: auto;
}
.irl-header__action {
  display: flex; align-items: center; gap: var(--sp-03);
  padding: 0 var(--sp-05);
  background: transparent; color: #fff;
  border: 0; border-left: 1px solid #393939;
  text-decoration: none;
  font-size: 14px;
  font-family: var(--ff-sans);
}
.irl-header__action:hover { background: #262626; text-decoration: none; }
.irl-header__action--primary { background: var(--irl-blueprint); }
.irl-header__action--primary:hover { background: var(--irl-blueprint-d); }

.irl-menu-toggle {
  display: none;
  background: transparent; color: #fff; border: 0;
  height: 100%; width: 48px;
  align-items: center; justify-content: center;
  border-right: 1px solid #393939;
}

@media (max-width: 1056px) {
  .irl-menu-toggle { display: flex; }
  .irl-nav {
    position: fixed; top: calc(var(--header-h) + var(--titleblock-h));
    left: 0; right: 0; bottom: 0;
    background: var(--irl-ink);
    flex-direction: column;
    padding: var(--sp-05);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .3s;
  }
  .irl-nav--open { transform: translateX(0); }
  .irl-nav__link { width: 100%; padding: var(--sp-05); border-bottom: 1px solid #262626; }
  .irl-header__action--ghost { display: none; }
}

/* ── Section header pattern (every section gets a numbered "drawing reference") ── */
.section-marker {
  display: flex; align-items: flex-start; gap: var(--sp-05);
  padding-bottom: var(--sp-07);
  border-bottom: var(--rule-thin);
  margin-bottom: var(--sp-08);
  position: relative;
}
.section-marker__num {
  font-family: var(--ff-mono);
  font-size: 11px; letter-spacing: 0.1em;
  color: var(--irl-graphite);
  text-transform: uppercase;
  border: var(--rule-thin);
  padding: 4px 10px;
  white-space: nowrap;
  align-self: flex-start;
  margin-top: 6px;
}
.section-marker__body { flex: 1; }
.section-marker__title {
  font-size: var(--fs-h2);
  margin-bottom: var(--sp-04);
  letter-spacing: -0.025em;
}
.section-marker__desc {
  color: var(--irl-graphite);
  max-width: 60ch;
  font-size: var(--fs-body-l);
}

/* ── Hero ──────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: var(--sp-13) 0 var(--sp-12);
  border-bottom: var(--rule-thin);
  overflow: hidden;
}
.hero::before {
  /* big drafting blueprint diagram on right side */
  content: "";
  position: absolute;
  right: -10%; top: 0; bottom: 0;
  width: 60%;
  background-image: url("/assets/img/patterns/blueprint.svg");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
.hero__inner { position: relative; z-index: 1; }
.hero__eyebrow {
  font-family: var(--ff-mono);
  font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--irl-blueprint);
  margin-bottom: var(--sp-05);
  display: inline-flex; align-items: center; gap: var(--sp-04);
}
.hero__eyebrow::before {
  content: "Φ"; font-family: var(--ff-mono); font-weight: 500;
  border: 1px solid var(--irl-blueprint);
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px;
}
.hero__h1 {
  font-size: clamp(2.5rem, 5vw + 1rem, var(--fs-display-2));
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 300;
  margin-bottom: var(--sp-06);
  max-width: 18ch;
}
.hero__h1 strong { font-weight: 600; color: var(--irl-blueprint); }
.hero__lede {
  font-size: var(--fs-body-l);
  color: var(--irl-ink-soft);
  max-width: 56ch;
  margin-bottom: var(--sp-08);
}

/* "Drawing No." annotation in hero */
.hero__annotation {
  position: absolute;
  top: var(--sp-08); right: var(--sp-08);
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--irl-graphite);
  text-align: right;
  border-left: 2px solid var(--irl-blueprint);
  padding-left: var(--sp-04);
  z-index: 2;
}
.hero__annotation strong { display: block; color: var(--irl-ink); font-weight: 500; }
@media (max-width: 1056px) { .hero__annotation { display: none; } }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: var(--sp-08);
  font-family: var(--ff-sans); font-size: var(--fs-body); font-weight: 400;
  padding: 14px 16px 14px 16px;
  min-width: 200px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
  border-radius: 0; /* Carbon: no rounded corners on buttons */
  line-height: 1.3;
}
.btn:hover { text-decoration: none; }
.btn__icon { width: 16px; height: 16px; flex-shrink: 0; }
.btn--primary {
  background: var(--irl-blueprint); color: #fff;
}
.btn--primary:hover { background: var(--irl-blueprint-d); color: #fff; }
.btn--secondary {
  background: var(--irl-ink); color: #fff;
}
.btn--secondary:hover { background: var(--irl-graphite); color: #fff; }
.btn--tertiary {
  background: transparent; color: var(--irl-blueprint);
  border-color: var(--irl-blueprint);
}
.btn--tertiary:hover { background: var(--irl-blueprint); color: #fff; }
.btn--ghost {
  background: transparent; color: var(--irl-blueprint);
  padding: 14px 0; min-width: auto; gap: var(--sp-04);
}
.btn--ghost:hover { background: var(--irl-blueprint-bg); padding-left: var(--sp-04); padding-right: var(--sp-04); }

.btn-group { display: flex; flex-wrap: wrap; gap: 0; }
.btn-group .btn:not(:first-child) { margin-left: -1px; }

/* ── Card patterns ─────────────────────────────────────────── */
.card {
  background: var(--irl-paper);
  border: var(--rule-thin);
  padding: var(--sp-07);
  position: relative;
  transition: border-color .15s, transform .15s;
}
.card:hover { border-color: var(--irl-blueprint); }
.card__num {
  font-family: var(--ff-mono);
  font-size: 11px; letter-spacing: 0.1em;
  color: var(--irl-graphite);
  text-transform: uppercase;
  margin-bottom: var(--sp-05);
}
.card__title {
  font-size: var(--fs-h4);
  font-weight: 500;
  margin-bottom: var(--sp-04);
  letter-spacing: -0.02em;
}
.card__desc { color: var(--irl-graphite); margin-bottom: var(--sp-05); }
.card__list { list-style: none; padding: 0; margin: 0; font-size: var(--fs-body-s); }
.card__list li {
  padding: var(--sp-03) 0;
  border-bottom: 1px dashed var(--irl-light-pencil);
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--irl-ink-soft);
  display: flex; gap: var(--sp-03);
}
.card__list li::before {
  content: "·"; color: var(--irl-blueprint); font-weight: 700;
}
.card__link {
  margin-top: var(--sp-05);
  font-family: var(--ff-mono); font-size: 12px;
  letter-spacing: 0.05em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: var(--sp-03);
  color: var(--irl-blueprint);
}
.card__link::after { content: "→"; transition: transform .15s; }
.card__link:hover::after { transform: translateX(4px); }

/* corner ticks (registration marks) */
.card--ticked::before, .card--ticked::after {
  content: ""; position: absolute; width: 12px; height: 12px;
  border: 1px solid var(--irl-blueprint);
}
.card--ticked::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.card--ticked::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* dimension card — has measurements drawn on it */
.card--dim {
  position: relative;
}
.card--dim .dim-h, .card--dim .dim-v {
  position: absolute;
  font-family: var(--ff-mono);
  font-size: 10px; color: var(--irl-blueprint);
}

/* ── Trust strip ───────────────────────────────────────────── */
.trust-strip {
  padding: var(--sp-07) 0;
  border-top: var(--rule-thin);
  border-bottom: var(--rule-thin);
  background: var(--irl-paper);
}
.trust-strip__label {
  text-align: center;
  font-family: var(--ff-mono);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--irl-graphite);
  margin-bottom: var(--sp-06);
}
.trust-strip__logos {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--sp-06);
  align-items: center;
}
@media (max-width: 1056px) { .trust-strip__logos { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 672px)  { .trust-strip__logos { grid-template-columns: repeat(2, 1fr); } }
.trust-strip__logo {
  height: 36px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-mono);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--irl-pencil);
  border: 1px dashed var(--irl-light-pencil);
  padding: var(--sp-04) var(--sp-03);
  background: var(--irl-bg);
}

/* ── Stat row ──────────────────────────────────────────────── */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: var(--rule-thin);
  background: var(--irl-paper);
}
@media (max-width: 1056px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat {
  padding: var(--sp-08) var(--sp-06);
  border-right: var(--rule-thin);
  border-bottom: var(--rule-thin);
  position: relative;
}
.stat:nth-child(4n) { border-right: 0; }
.stat:nth-last-child(-n+4) { border-bottom: 0; }
@media (max-width: 1056px) {
  .stat { border-right: var(--rule-thin); border-bottom: var(--rule-thin); }
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-last-child(-n+2) { border-bottom: 0; }
}
.stat__num {
  font-family: var(--ff-sans);
  font-size: clamp(2rem, 4vw, var(--fs-h1));
  font-weight: 300;
  letter-spacing: -0.03em;
  color: var(--irl-blueprint);
  line-height: 1;
  display: flex; align-items: baseline; gap: 4px;
}
.stat__num sup { font-size: 0.5em; font-weight: 400; color: var(--irl-graphite); }
.stat__label {
  margin-top: var(--sp-04);
  font-family: var(--ff-mono);
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--irl-graphite);
}
.stat__sub { font-size: var(--fs-body-s); color: var(--irl-ink-soft); margin-top: var(--sp-03); font-family: var(--ff-sans); }

/* ── Process / steps ───────────────────────────────────────── */
.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: var(--rule-thin);
  border-bottom: var(--rule-thin);
}
@media (max-width: 1056px) { .process { grid-template-columns: 1fr; } }
.process__step {
  padding: var(--sp-07);
  border-right: var(--rule-thin);
  background: var(--irl-paper);
}
.process__step:last-child { border-right: 0; }
.process__num {
  font-family: var(--ff-mono);
  font-size: 11px; letter-spacing: 0.1em;
  color: var(--irl-blueprint);
  margin-bottom: var(--sp-05);
}
.process__title { font-size: var(--fs-h5); font-weight: 500; margin-bottom: var(--sp-04); }
.process__desc { font-size: var(--fs-body-s); color: var(--irl-graphite); }

/* ── Footer ────────────────────────────────────────────────── */
.irl-footer {
  background: var(--irl-ink);
  color: #c6c6c6;
  padding: var(--sp-12) 0 var(--sp-06);
  border-top: 4px solid var(--irl-blueprint);
}
.irl-footer h5, .irl-footer h6 { color: #fff; }
.irl-footer__brand h5 {
  font-family: var(--ff-mono);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: #6f6f6f; font-weight: 400; margin-bottom: var(--sp-05);
}
.irl-footer__brand .irl-brand__mark { background: #fff; }
.irl-footer__brand p { color: #8d8d8d; font-size: var(--fs-body-s); margin-top: var(--sp-04); max-width: 30ch; }

.irl-footer__col h6 {
  font-family: var(--ff-mono);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: #6f6f6f; font-weight: 400; margin-bottom: var(--sp-05);
}
.irl-footer__col ul { list-style: none; padding: 0; margin: 0; }
.irl-footer__col li { padding: var(--sp-02) 0; }
.irl-footer__col a { color: #c6c6c6; font-size: var(--fs-body-s); }
.irl-footer__col a:hover { color: #fff; text-decoration: none; }

.irl-footer__bottom {
  margin-top: var(--sp-09); padding-top: var(--sp-05);
  border-top: 1px solid #393939;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-04);
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.04em;
  color: #6f6f6f;
}
.irl-footer__bottom a { color: #c6c6c6; }

/* ── Forms (Carbon) ───────────────────────────────────────── */
.field { display: block; margin-bottom: var(--sp-05); }
.field__label {
  display: block;
  font-family: var(--ff-mono);
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--irl-graphite);
  margin-bottom: var(--sp-03);
}
.field__input, .field__select, .field__textarea {
  width: 100%;
  padding: 11px var(--sp-04);
  background: var(--irl-paper);
  border: 0; border-bottom: 1px solid var(--irl-pencil);
  font: inherit; color: var(--irl-ink);
  border-radius: 0;
  transition: border-color .15s, background-color .15s;
}
.field__input:focus, .field__select:focus, .field__textarea:focus {
  outline: 2px solid var(--irl-blueprint);
  outline-offset: -2px;
  border-bottom-color: transparent;
  background: #fff;
}
.field__textarea { min-height: 144px; resize: vertical; }
.field__hint { display: block; font-size: 12px; color: var(--irl-graphite); margin-top: var(--sp-03); }

/* ── Notifications ────────────────────────────────────────── */
.note {
  border-left: 3px solid var(--irl-blueprint);
  background: var(--irl-blueprint-bg);
  padding: var(--sp-05);
  margin-bottom: var(--sp-06);
  font-size: var(--fs-body-s);
}
.note--success { border-color: var(--irl-success); background: #defbe6; }
.note--error   { border-color: var(--irl-error);   background: #fff1f1; color: #750e13; }

/* ── Drafting line ornament ───────────────────────────────── */
.dim-line {
  display: flex; align-items: center; gap: var(--sp-03);
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--irl-blueprint);
  margin: var(--sp-05) 0;
}
.dim-line::before, .dim-line::after {
  content: ""; flex: 1; height: 1px; background: var(--irl-blueprint); position: relative;
}
.dim-line::before::after, .dim-line::after::before { content: "▸"; }

/* breadcrumb crumb */
.crumbs {
  font-family: var(--ff-mono);
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--irl-graphite);
  padding: var(--sp-04) 0;
  border-bottom: var(--rule-hair);
}
.crumbs a { color: var(--irl-graphite); }
.crumbs a:hover { color: var(--irl-blueprint); }
.crumbs span + span::before { content: " / "; color: var(--irl-light-pencil); margin: 0 var(--sp-02); }

/* ── Tabs (Carbon) ────────────────────────────────────────── */
.tabs { display: flex; border-bottom: var(--rule-thin); margin-bottom: var(--sp-07); flex-wrap: wrap; }
.tab {
  padding: var(--sp-04) var(--sp-06);
  font-family: var(--ff-sans); font-size: var(--fs-body-s);
  background: transparent; border: 0; cursor: pointer;
  color: var(--irl-graphite);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
.tab:hover { color: var(--irl-ink); background: var(--irl-paper); }
.tab--active {
  color: var(--irl-ink); border-bottom-color: var(--irl-blueprint);
}

/* ── Industry tile grid ───────────────────────────────────── */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: var(--rule-thin);
}
@media (max-width: 1056px) { .tile-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .tile-grid { grid-template-columns: 1fr; } }
.tile {
  padding: var(--sp-07) var(--sp-06);
  background: var(--irl-paper);
  border-right: var(--rule-thin);
  border-bottom: var(--rule-thin);
  position: relative;
  text-decoration: none; color: inherit;
  display: block;
  transition: background-color .15s;
}
.tile:hover { background: var(--irl-blueprint-bg); text-decoration: none; }
.tile__icon { width: 32px; height: 32px; margin-bottom: var(--sp-05); color: var(--irl-blueprint); }
.tile__title { font-size: var(--fs-body-l); font-weight: 500; margin-bottom: var(--sp-03); }
.tile__desc { font-size: var(--fs-body-s); color: var(--irl-graphite); }

/* ── Case study list (IBM-style) ──────────────────────────── */
.case {
  padding: var(--sp-09) 0;
  border-bottom: var(--rule-thin);
}
.case:last-child { border-bottom: 0; }
.case__num {
  font-family: var(--ff-mono);
  font-size: 11px; letter-spacing: 0.1em;
  color: var(--irl-blueprint);
  margin-bottom: var(--sp-04);
}
.case__title {
  font-size: clamp(1.6rem, 2.2vw, var(--fs-h2));
  font-weight: 400;
  letter-spacing: -0.025em;
  margin-bottom: var(--sp-05);
  max-width: 28ch;
}
.case__metric {
  display: inline-flex; align-items: baseline; gap: var(--sp-03);
  font-family: var(--ff-sans);
  font-size: clamp(2rem, 4vw, 4rem);
  font-weight: 300;
  color: var(--irl-blueprint);
  letter-spacing: -0.03em;
  margin-top: var(--sp-04);
}
.case__metric span { font-size: 0.4em; color: var(--irl-graphite); font-weight: 400; }

.case__list { list-style: none; padding: 0; margin: var(--sp-05) 0; }
.case__list li {
  padding: var(--sp-03) 0;
  border-top: 1px dashed var(--irl-light-pencil);
  font-size: var(--fs-body-s);
  display: flex; gap: var(--sp-04);
}
.case__list li::before { content: "—"; color: var(--irl-blueprint); }

/* ── Blog list ────────────────────────────────────────────── */
.post {
  padding: var(--sp-06) 0;
  border-bottom: var(--rule-thin);
  display: grid; grid-template-columns: 200px 1fr; gap: var(--sp-07);
  text-decoration: none; color: inherit;
}
.post:hover { background: var(--irl-paper); text-decoration: none; }
@media (max-width: 672px) { .post { grid-template-columns: 1fr; } }
.post__meta { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--irl-graphite); }
.post__title { font-size: var(--fs-h4); font-weight: 500; margin: var(--sp-03) 0; }
.post__excerpt { color: var(--irl-graphite); }

/* ── Accordion (FAQ) ──────────────────────────────────────── */
.acc { border-top: var(--rule-thin); }
.acc__item { border-bottom: var(--rule-thin); }
.acc__btn {
  width: 100%; text-align: left;
  background: transparent; border: 0;
  padding: var(--sp-06) 0;
  display: flex; justify-content: space-between; align-items: center;
  font-size: var(--fs-h5); font-weight: 500;
  color: var(--irl-ink);
  font-family: var(--ff-sans);
}
.acc__btn::after {
  content: "+"; font-family: var(--ff-mono);
  font-size: 24px; color: var(--irl-blueprint); transition: transform .2s;
}
.acc__item--open .acc__btn::after { content: "−"; }
.acc__panel {
  padding: 0 0 var(--sp-06);
  color: var(--irl-graphite);
  display: none;
  font-size: var(--fs-body);
}
.acc__item--open .acc__panel { display: block; }

/* ── 404 ──────────────────────────────────────────────────── */
.notfound {
  text-align: center;
  padding: var(--sp-13) 0;
}
.notfound__code {
  font-family: var(--ff-mono);
  font-size: clamp(6rem, 18vw, 14rem);
  color: var(--irl-blueprint);
  font-weight: 300; letter-spacing: -0.05em;
  line-height: 1;
}

/* ── Utility ──────────────────────────────────────────────── */
.u-mt-0 { margin-top: 0 !important; }
.u-mb-0 { margin-bottom: 0 !important; }
.u-mt-5 { margin-top: var(--sp-05); }
.u-mb-5 { margin-bottom: var(--sp-05); }
.u-mt-8 { margin-top: var(--sp-08); }
.u-mb-8 { margin-bottom: var(--sp-08); }
.u-mt-9 { margin-top: var(--sp-09); }
.u-text-center { text-align: center; }
.u-blue { color: var(--irl-blueprint); }
.u-mono { font-family: var(--ff-mono); }
.u-divider { border-top: var(--rule-thin); margin: var(--sp-09) 0; }

/* ── Print ────────────────────────────────────────────────── */
@media print {
  .irl-header, .irl-footer, .titleblock { display: none; }
  body { background: #fff; }
}

/* ── Additions for forms, flashes, hero variants, dark sections ───────────── */

/* Flash messages */
.flash {
  padding: var(--sp-04) var(--sp-05);
  margin-bottom: var(--sp-06);
  border-left: 4px solid var(--irl-graphite);
  background: var(--irl-paper);
  font-size: 14px;
  line-height: 1.5;
}
.flash--success { border-left-color: #198038; background: #defbe6; color: #044317; }
.flash--error   { border-left-color: #da1e28; background: #fff1f1; color: #750e13; }
.flash--info    { border-left-color: var(--irl-blueprint); background: var(--irl-blueprint-bg); color: #002d9c; }

/* Form block — adds top rule + spacing for a "drawing schedule" feel */
.form-block {
  border-top: var(--rule-thin);
  padding-top: var(--sp-06);
  margin-top: var(--sp-04);
}

/* Grid gap — horizontal gutter for fields/cards */
.grid--gap {
  column-gap: var(--sp-05);
  row-gap: var(--sp-05);
}

/* Hero — small variant for inner pages */
.hero--small { padding: var(--sp-09) 0 var(--sp-08); }
.hero--small .hero__h1 { font-size: clamp(28px, 4.4vw, 52px); }

/* Section — dark */
.section--dark {
  background: var(--irl-ink);
  color: #f4f4f4;
  border-top: 4px solid var(--irl-blueprint);
}
.section--dark a { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.section--dark .section-marker__num { background: var(--irl-blueprint); color: #fff; }
.section--dark .section-marker__title { color: #fff; }
.section--dark .section-marker__desc { color: #c6c6c6; }

/* 404 number alias to match templates that use --num */
.notfound__num {
  font-family: var(--ff-mono);
  font-size: clamp(6rem, 18vw, 14rem);
  color: var(--irl-blueprint);
  font-weight: 300; letter-spacing: -0.05em;
  line-height: 1;
  margin-bottom: var(--sp-05);
}

/* Article body typography */
.article-body h2 {
  font-size: 26px; font-weight: 500;
  margin: var(--sp-08) 0 var(--sp-04);
  padding-top: var(--sp-04);
  border-top: var(--rule-hair);
  font-family: var(--ff-sans);
}
.article-body h3 {
  font-size: 20px; font-weight: 500;
  margin: var(--sp-06) 0 var(--sp-03);
}
.article-body p { margin: 0 0 var(--sp-05); }
.article-body ul, .article-body ol { margin: 0 0 var(--sp-05) 18px; padding: 0; }
.article-body li { margin-bottom: var(--sp-02); }
.article-body a { color: var(--irl-blueprint); text-decoration: underline; text-underline-offset: 3px; }

/* Field — file & select consistency */
.field__input[type="file"] { padding: 8px 0; font-family: var(--ff-mono); font-size: 13px; }
.field__select {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--irl-pencil);
  padding: 12px 0;
  font: inherit;
  font-size: 16px;
  width: 100%;
  color: var(--irl-ink);
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0l5 6 5-6z' fill='%23525252'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 28px;
}
.field__select:focus {
  outline: 2px solid var(--irl-blueprint);
  outline-offset: 2px;
}

/* Suppress heavy blueprint SVG on inner-page small heroes — annotation in corner suffices */
.hero--small::before { display: none; }
.hero--small { background: transparent; }
.hero--small .hero__annotation { background: rgba(244,241,234,0.92); padding: var(--sp-04); border-left: 3px solid var(--irl-blueprint); }