/* IDMSI — shared stylesheet (v2)
   Design language: white canvas with #f4f4f4 alternating bands, near-black text,
   one signal-teal accent, square hairline tiles, IBM Plex Sans light for display.
   Plex Mono carries the wordmark, eyebrows and readout figures. No JavaScript. */

:root {
  --bg: #ffffff;
  --bg-alt: #f4f4f4;
  --ink: #161616;
  --text-2: #525252;
  --text-3: #8d8d8d;
  --border: #e0e0e0;
  --border-strong: #161616;
  --accent: #007d8a;
  --accent-hover: #005f6b;
  --accent-soft: #e0f2f4;
  --dark: #161616;
  --dark-text: #f4f4f4;
  --dark-muted: #a8a8a8;
  --dark-line: rgba(255, 255, 255, 0.25);
  --up: #42be65;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0 0 0.5em; font-weight: 300; line-height: 1.15; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); line-height: 1.08; }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: 0; }

p { margin: 0 0 1em; }
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
img { max-width: 100%; }

.mono, .eyebrow, .chip, .readout, .wordmark, .cred, .tile .eyebrow {
  font-family: "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;
}

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

/* ---------- header ---------- */

.site-header { background: var(--bg); border-bottom: 1px solid var(--border); }

.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px 24px; height: auto; padding-top: 14px; padding-bottom: 14px;
}

.wordmark { font-size: 1rem; font-weight: 600; letter-spacing: 0.24em; color: var(--ink); text-decoration: none; white-space: nowrap; }
.wordmark span {
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 300; letter-spacing: 0.02em; color: var(--ink); margin-left: 0.55em;
}

.site-nav { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.site-nav a { color: var(--text-2); text-decoration: none; font-size: 0.9rem; padding: 6px 0; border-bottom: 2px solid transparent; }
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

/* ---------- shared ---------- */

.eyebrow { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin: 0 0 16px; }

section { padding: 80px 0; }
section.alt { background: var(--bg-alt); }
section + section:not(.alt):not(.hero-dark) { border-top: 1px solid var(--border); }

.lede { font-size: 1.2rem; font-weight: 300; color: var(--text-2); max-width: 40em; line-height: 1.5; }
.section-intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 64px; align-items: start; margin-bottom: 40px; }
.section-intro h2 { margin: 0; }
.section-intro > p { margin: 0; color: var(--text-2); }
.section-intro .prose p { margin: 0 0 1em; }
.section-intro .prose p:last-child { margin-bottom: 0; }

/* buttons: IBM-style rectangles with an arrow */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 32px;
  min-width: 220px; padding: 14px 16px 14px 20px;
  background: var(--accent); color: #fff; text-decoration: none;
  font-size: 0.95rem; font-weight: 400; border: 1px solid var(--accent);
}
.btn::after { content: "\2192"; font-size: 1.05rem; transition: transform 120ms ease; }
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.btn:hover::after { transform: translateX(4px); }
.btn.secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.secondary:hover { background: var(--ink); color: #fff; }
.hero-dark .btn.secondary { color: #fff; border-color: #fff; }
.hero-dark .btn.secondary:hover { background: #fff; color: var(--ink); }

a:focus-visible, .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ---------- heroes ---------- */

.hero { padding: 88px 0 72px; }
.hero .lede { margin-top: 20px; }

.hero-dark { background: var(--dark); color: var(--dark-text); padding: 96px 0 88px; }
.hero-dark .lede { color: var(--dark-muted); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: center; }

.cred { margin-top: 40px; font-size: 0.78rem; letter-spacing: 0.06em; line-height: 1.9; color: var(--dark-muted); }
.cred b { color: var(--dark-text); font-weight: 600; }

/* ---------- readout: the signature element ---------- */

.readout {
  border: 1px solid var(--dark-line); padding: 24px; font-size: 0.86rem; line-height: 1.5; color: var(--dark-text);
}
.readout .r-title { color: var(--dark-muted); letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.7rem; margin-bottom: 12px; }
.readout .row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--dark-line); }
.readout .row:first-of-type { border-top: 0; }
.readout .label { color: var(--dark-muted); }
.readout .value { text-align: right; white-space: nowrap; }
.readout .value .up { color: var(--up); }
.readout .footnote { margin-top: 14px; color: var(--dark-muted); font-size: 0.7rem; }

.chip { display: inline-block; font-size: 0.68rem; letter-spacing: 0.1em; padding: 2px 8px; background: var(--accent); color: #fff; vertical-align: 1px; }

/* light variant (case studies) */
.readout.light { border-color: var(--border); background: var(--bg); color: var(--ink); }
.readout.light .r-title { color: var(--accent); }
.readout.light .row { border-top-color: var(--border); }
.readout.light .label, .readout.light .footnote { color: var(--text-2); }
.readout.light .value .up { color: var(--accent); }
.tile.readout { border: 0; font-size: 0.84rem; }

/* ---------- tiles ---------- */

.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.tiles.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tiles.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.tile {
  background: var(--bg); padding: 28px 24px 24px; display: flex; flex-direction: column; min-height: 240px;
  color: inherit; text-decoration: none; position: relative;
}
section.alt .tile { background: var(--bg); }
.tile .eyebrow { margin-bottom: 20px; }
.tile h3 { margin-bottom: 10px; }
.tile p { color: var(--text-2); font-size: 0.95rem; margin: 0; }
.tile p + p:not(.deliverable):not(.names) { margin-top: 0.8em; }
.tile .deliverable { margin-top: auto; padding-top: 18px; font-size: 0.86rem; color: var(--ink); }
.tile .deliverable strong { color: var(--accent); font-weight: 600; }
.tile .names { margin-top: auto; padding-top: 18px; font-family: "IBM Plex Mono", Menlo, monospace; font-size: 0.74rem; line-height: 1.7; color: var(--ink); }
.tile .arrow { margin-top: auto; padding-top: 24px; color: var(--accent); font-size: 1.2rem; align-self: flex-end; transition: transform 120ms ease; }
a.tile:hover { outline: 1px solid var(--ink); outline-offset: -1px; z-index: 1; }
a.tile:hover .arrow { transform: translateX(4px); }
.tiles.aligned .tile { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
.tiles.aligned .tile .deliverable { margin-top: 0; }
/* Five-panel coverage strip (home page): label, heading and platform names share row heights
   across all panels, so every heading starts on the same line even when some labels wrap to
   two lines. The names keep their bottom alignment (margin-top: auto within their row).
   Only when panels sit side by side; single-column phones keep the normal panel layout. */
@media (min-width: 861px) {
  .tiles.cols-5 .tile { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
}

/* ---------- prose ---------- */

.prose { max-width: 42em; }
.prose h2 { margin-top: 1.6em; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--text-2); }
.prose p strong { color: var(--ink); }

/* ---------- policy page ---------- */

.policy-meta { margin-top: 24px; font-family: "IBM Plex Mono", Menlo, monospace; font-size: 0.78rem; color: var(--text-2); }
.policy-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 32px 64px; align-items: start; }
.policy-toc { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 6px; }
.policy-toc a { color: var(--text-2); text-decoration: none; font-size: 0.95rem; padding: 4px 0; border-left: 2px solid transparent; padding-left: 12px; margin-left: -14px; }
.policy-toc a:hover { color: var(--ink); border-left-color: var(--accent); }
.policy h2 { margin-top: 0; padding-top: 8px; }
.policy h2 + h3 { margin-top: 1.2em; }
.policy h2:not(:first-child) { margin-top: 2.2em; padding-top: 40px; border-top: 1px solid var(--border); }
.policy h3 { margin-top: 1.6em; font-size: 1.05rem; }
.policy ul { padding-left: 1.2em; color: var(--text-2); }
.policy li { margin-bottom: 0.5em; }
.policy code { font-family: "IBM Plex Mono", Menlo, monospace; font-size: 0.9em; background: var(--bg); padding: 1px 5px; border: 1px solid var(--border); }
.policy em { color: var(--ink); }

/* ---------- insights: article (layout A) and listing ---------- */

.art-hero { padding-bottom: 40px; }
.art-head { max-width: 60rem; }
.art-head .eyebrow a { color: inherit; text-decoration: none; }
.art-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 28px; font-family: "IBM Plex Mono", Menlo, monospace; font-size: 0.78rem; color: var(--text-2); letter-spacing: 0.04em; }
.art-meta b { color: var(--ink); font-weight: 600; }
.standfirst { font-size: 1.25rem; font-weight: 300; color: var(--text-2); line-height: 1.5; max-width: 38em; margin: 0; }
.art-main { padding-top: 0; }
.art-figure { margin: 0; }
.art-figure svg, .art-figure img { display: block; width: 100%; height: auto; }
.art-figure figcaption { font-family: "IBM Plex Mono", Menlo, monospace; font-size: 0.72rem; color: var(--text-2); padding: 10px 0 0; }
.art-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); gap: 48px 80px; align-items: start; margin-top: 56px; }
.art-body { max-width: 66ch; font-size: 1.08rem; line-height: 1.7; }
.art-body p { margin: 0 0 1.3em; }
.art-body h2 { font-size: 1.6rem; margin: 1.8em 0 0.6em; }
.art-body h2:first-child { margin-top: 0; }
.art-body ul { padding-left: 1.2em; }
.art-body li { margin-bottom: 0.5em; }
.pull { margin: 2em 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--accent); font-size: 1.4rem; font-weight: 300; line-height: 1.35; color: var(--ink); }
.takeaways { border: 1px solid var(--border); background: var(--bg); padding: 20px; font-family: "IBM Plex Mono", Menlo, monospace; font-size: 0.86rem; }
.takeaways .r-title { color: var(--accent); letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.7rem; margin-bottom: 12px; }
.takeaways ol { margin: 0; padding-left: 1.4em; }
.takeaways li { margin-bottom: 8px; line-height: 1.5; }
.art-side { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 28px; }
.share { display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; }
.share .eyebrow { margin-bottom: 8px; }
.share a { color: var(--text-2); text-decoration: none; }
.share a:hover { color: var(--accent); }
.author { display: flex; gap: 20px; align-items: flex-start; border-top: 1px solid var(--border); padding-top: 28px; margin-top: 48px; }
.author .avatar { width: 64px; height: 64px; flex: 0 0 64px; background: var(--dark); color: var(--dark-text); font-family: "IBM Plex Mono", Menlo, monospace; font-weight: 600; display: flex; align-items: center; justify-content: center; letter-spacing: 0.1em; }
.author p { margin: 0; color: var(--text-2); font-size: 0.95rem; }
.author b { color: var(--ink); display: block; margin-bottom: 4px; }
.more-tiles .tile { min-height: 200px; }
.tile-art { padding-top: 0; }
.tile-art .thumb { margin: 0 -24px 22px; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--border); }
.tile-art .thumb svg, .tile-art .thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.more-tiles .tile .eyebrow { margin-bottom: 12px; }

.featured { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0; border: 1px solid var(--border); background: var(--bg); color: inherit; text-decoration: none; }
.featured-img svg, .featured-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.featured-text { padding: 40px 40px 32px; display: flex; flex-direction: column; }
.featured-text h2 { margin-bottom: 14px; }
.featured-text .art-meta { margin-top: 20px; }
.featured-text .arrow { margin-top: auto; padding-top: 24px; color: var(--accent); font-size: 1.2rem; align-self: flex-end; transition: transform 120ms ease; }
.featured:hover { outline: 1px solid var(--ink); outline-offset: -1px; }
.featured:hover .arrow { transform: translateX(4px); }

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

.cta-band { background: var(--bg-alt); }
.cta-band .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.cta-band h2 { margin: 0; }

/* ---------- contact ---------- */

.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
.contact-list { list-style: none; padding: 0; margin: 0 0 32px; }
.contact-list li { padding: 14px 0; border-bottom: 1px solid var(--border); }
.contact-list .k { display: block; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); margin-bottom: 2px; }

form label { display: block; font-weight: 600; margin: 18px 0 6px; font-size: 0.9rem; }
form input, form textarea { width: 100%; padding: 12px; border: 0; border-bottom: 1px solid var(--ink); background: var(--bg-alt); font: inherit; color: var(--ink); }
form input:focus, form textarea:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
form button { margin-top: 20px; cursor: pointer; }

/* ---------- footer ---------- */

.site-footer { border-top: 1px solid var(--border); padding: 40px 0 56px; color: var(--text-2); font-size: 0.85rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; }
.site-footer .locations { font-size: 0.78rem; letter-spacing: 0.06em; color: var(--text-2); }
.site-footer .footer-links { display: flex; gap: 20px; }

/* ---------- responsive ---------- */

@media (max-width: 1024px) {
  .tiles.cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .wrap { padding: 0 20px; }
  section { padding: 56px 0; }
  .hero { padding: 56px 0 48px; }
  .hero-dark { padding: 64px 0 56px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .section-intro { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .tiles, .tiles.cols-2, .tiles.cols-5 { grid-template-columns: minmax(0, 1fr); }
  .tile { min-height: 0; }
  .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .policy-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .policy-toc { position: static; }
  .art-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 32px; }
  .art-side { position: static; }
  .pull { font-size: 1.2rem; }
  .featured { grid-template-columns: minmax(0, 1fr); }
  .featured-text { padding: 24px 20px; }
  .readout .row { flex-wrap: wrap; }
  .readout .value { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .btn::after, .tile .arrow { transition: none; }
}