/*
 * IR-webdesign design system
 * =============================
 *
 * Project-owned visual contract.
 *
 * Principles:
 * - v47 is the source of truth for the approved visual language.
 * - Shared values live here once.
 * - Block variants describe a structural contract, not a one-off page hack.
 * - Page CSS may compose shared patterns, but must not redefine the system.
 */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/web/InterVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display/PlayfairDisplay-VariableFont_wght.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}

:root {
  /* Brand */
  --ir-coral: #ff4d4d;
  --ir-coral-deep: #ef4444;
  --ir-ink: #101217;

  /* Surfaces */
  --ir-surface: #ffffff;
  --ir-surface-soft: #faf8f5;
  --ir-surface-dark: #11151b;

  /* Text */
  --ir-text-body: #4e545d;
  --ir-text-secondary: #59606a;
  --ir-text-muted: #737983;
  --ir-text-on-dark: #c8cbd1;

  /* Rich-text defaults; dark sections may override these on the section wrapper. */
  --ir-editor-heading-color: var(--ir-ink);
  --ir-editor-body-color: var(--ir-text-body);
  --ir-editor-link-color: var(--ir-ink);
  --ir-editor-marker-color: var(--ir-coral);

  /* Lines */
  --ir-line-soft: rgba(15, 17, 23, .08);
  --ir-line: rgba(15, 17, 23, .10);

  /* Typography */
  --ir-font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ir-font-display: "Playfair Display", Georgia, serif;

  --ir-display-heading-tracking: .004em;
  --ir-h2-size: clamp(2.625rem, 4.3vw, 3.875rem);
  --ir-h2-size-mobile: clamp(2.375rem, 10vw, 3.125rem);
  --ir-h2-line: 1.05;
  --ir-h2-tracking: var(--ir-display-heading-tracking);

  --ir-body-size: 1.0625rem;
  --ir-body-line: 1.82;
  --ir-body-size-mobile: 1rem;

  /* Widths */
  --ir-container: 86.25rem;
  --ir-width-copy: 47.5rem;
  --ir-width-copy-wide: 56.25rem;
  --ir-width-statement: 67.5rem;

  /* Column gaps */
  --ir-gap-columns-tight: 5.5rem;
  --ir-gap-columns: 5.875rem;
  --ir-gap-columns-wide: 6.125rem;

  /* Vertical rhythm */
  --ir-space-eyebrow-title: 1.4375rem;
  --ir-space-title-body: 1.75rem;
  --ir-space-body-body: 1.375rem;
  --ir-space-body-statement: 2rem;
  --ir-space-statement-action: 1.75rem;

  --ir-section-y: 8.25rem;
  --ir-section-y-tight: 7.875rem;
  --ir-section-y-mobile: 5.75rem;

  /* Shared section tiers. Similar historical values are intentionally normalized. */
  --ir-section-compact: 7.5rem 0 8rem;
  --ir-section-standard: 8rem 0 8.5rem;
  --ir-section-generous: 8.25rem 0 8.75rem;
  --ir-section-spacious: 8.625rem 0 9.125rem;
  --ir-section-closing: 8.375rem 0 9rem;
  --ir-section-mobile: 5.75rem 0 6.25rem;

  /* Shared service-page hero rhythm. Homepage keeps its own composition. */
  --ir-hero-padding: 5.75rem 0 7.5rem;
  --ir-hero-gap: 5rem;
  --ir-hero-title-size: clamp(3.625rem, 6vw, 5.6875rem);
  --ir-hero-title-size-mobile: clamp(3rem, 14vw, 4.25rem);
  --ir-hero-copy-width: 52rem;
  --ir-hero-text-width: 45rem;

  /* Shapes / elevation */
  --ir-radius-card: 1.375rem;

  /* Testimonial */
  --ir-testimonial-surface: #f7f7f5;
  --ir-testimonial-border: #e9e9e6;
  --ir-testimonial-shadow: 0 20px 50px rgba(16, 18, 23, .05);
  --ir-testimonial-radius: 1.25rem;
}

body.site {
  color: var(--ir-ink);
  background: var(--ir-surface);
  font-family: var(--ir-font-body);
}

/* address is contact information, not emphasized prose. */
address {
  font-style: normal;
}

.site-main {
  padding-block: 0;
}

.site-main-inner {
  width: 100%;
  max-width: none;
}

.ir-container {
  width: min(calc(100% - 4rem), var(--ir-container));
  margin-inline: auto;
}

/* Shared section kicker / eyebrow */
.ir-eyebrow {
  margin: 0 0 var(--ir-space-eyebrow-title);
  color: var(--ir-coral-deep);
  font-family: var(--ir-font-body);
  font-size: .8125rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ir-eyebrow::after {
  content: "";
  display: block;
  width: 3rem;
  height: 2px;
  margin-top: .6875rem;
  background: var(--ir-coral);
}

.ir-eyebrow--light {
  color: #ff7274;
}

/* Shared inline text link */
.ir-text-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--ir-ink);
  font-weight: 700;
  text-decoration: none;
}

.ir-text-link:hover {
  color: var(--ir-coral);
}

.ir-text-link--spaced {
  margin-top: var(--ir-space-statement-action);
}

.ir-text-link--on-dark {
  color: #fff;
}

.ir-text-link--on-dark:hover,
.ir-text-link--on-dark:focus-visible {
  color: #ff8081;
}



@media (max-width: 43.75em) {
  .ir-container {
    width: min(calc(100% - 2.25rem), var(--ir-container));
  }
}


/* =========================================================
   Project page + editor semantic contract
   ========================================================= */

.ir-project-page h1,
.ir-project-page h2,
.ir-project-page h3,
.ir-project-page blockquote {
  font-family: var(--ir-font-display);
}

.ir-project-page h1,
.ir-project-page h2,
.ir-project-page h3 {
  text-wrap: pretty;
}

/*
 * Playfair heading tracking is a shared readability rule, not a page-level detail.
 * The stronger selectors intentionally win over historical page-specific tracking.
 */
body.site .ir-project-page :is(h1, h2, h3),
body.site.site-reference .site-main :is(h1, h2, h3) {
  letter-spacing: var(--ir-display-heading-tracking);
}

.ir-project-page h2 {
  margin: 0;
  color: var(--ir-ink);
  font-size: var(--ir-h2-size);
  line-height: var(--ir-h2-line);
  letter-spacing: var(--ir-h2-tracking);
  font-weight: 600;
}

/*
 * Rich-text content is intentionally boring: the same editor markup gets the
 * same typography everywhere. Page CSS may position the whole block, but it
 * must not rebuild layout from paragraph/heading order inside the editor.
 */
.ir-editor-content > h2 {
  color: var(--ir-editor-heading-color);
}

/* A heading owns the gap to following content; split columns need no exception. */
.ir-project-page h2:not(:last-child) {
  margin-block-end: var(--ir-space-title-body);
}

.ir-editor-content > p {
  max-width: var(--ir-width-copy);
  margin: 0;
  color: var(--ir-editor-body-color);
  font-family: var(--ir-font-body);
  font-size: var(--ir-body-size);
  line-height: var(--ir-body-line);
}

.ir-editor-content > p + p {
  margin-top: var(--ir-space-body-body);
}

.ir-editor-content > h3,
.site-reference--detail .page-block > h3 {
  max-width: var(--ir-width-statement);
  margin: var(--ir-space-body-statement) 0 0;
  color: var(--ir-editor-heading-color);
  font-family: var(--ir-font-display);
  font-size: 2rem;
  line-height: 1.38;
  letter-spacing: -.006em;
  font-weight: 600;
}

.ir-editor-content > h3:first-child,
.site-reference--detail .page-block > h3:first-child {
  margin-top: 0;
}

.ir-editor-content > h3:not(:last-child),
.site-reference--detail .page-block > h3:not(:last-child) {
  margin-block-end: 1rem;
}

.ir-editor-content > h3 strong,
.site-reference--detail .page-block > h3 strong {
  color: var(--ir-coral);
  font-weight: 600;
}

.ir-editor-content > ul,
.ir-editor-content > ol {
  max-width: var(--ir-width-copy);
  margin: var(--ir-space-body-body) 0 0;
  padding-left: 1.35em;
  color: var(--ir-editor-body-color);
  font-family: var(--ir-font-body);
  font-size: var(--ir-body-size);
  line-height: var(--ir-body-line);
}

.ir-editor-content > ul:first-child,
.ir-editor-content > ol:first-child {
  margin-top: 0;
}

.ir-editor-content ul {
  list-style: disc;
}

.ir-editor-content ol {
  list-style: decimal;
}

.ir-editor-content li + li {
  margin-top: .5em;
}

.ir-editor-content ul li::marker {
  color: var(--ir-editor-marker-color);
}

.ir-editor-content a {
  color: var(--ir-editor-link-color);
  font-weight: 700;
  text-decoration-thickness: .08em;
  text-underline-offset: .16em;
}

.ir-editor-content a:hover,
.ir-editor-content a:focus-visible {
  color: var(--ir-coral);
}

.ir-editor-content table {
  width: 100%;
  margin: var(--ir-space-body-statement) 0 0;
  border-collapse: collapse;
  color: var(--ir-editor-body-color);
  font-family: var(--ir-font-body);
  font-size: var(--ir-body-size);
  line-height: 1.6;
}

.ir-editor-content table:first-child {
  margin-top: 0;
}

.ir-editor-content th,
.ir-editor-content td {
  padding: .875rem 1rem;
  border-bottom: 1px solid var(--ir-line);
  text-align: left;
  vertical-align: top;
}

.ir-editor-content th {
  color: var(--ir-editor-heading-color);
  font-weight: 700;
}

.ir-testimonial,
.ir-editor-content > blockquote,
.site-reference--detail .page-block > blockquote {
  position: relative;
  max-width: var(--ir-width-statement);
  margin: 0;
  padding: 2.625rem 2.5rem 2.25rem;
  border: 1px solid rgba(15,17,23,.08);
  border-radius: var(--ir-testimonial-radius);
  color: var(--ir-editor-heading-color);
  background: var(--ir-testimonial-surface);
  box-shadow: 0 12px 32px rgba(16,18,23,.045);
}

.ir-testimonial::before,
.ir-editor-content > blockquote::before,
.site-reference--detail .page-block > blockquote::before {
  content: "“";
  position: absolute;
  top: 1.0625rem;
  left: 1.5625rem;
  color: var(--ir-coral);
  font-family: Georgia, serif;
  font-size: 3.25rem;
  line-height: 1;
}

.ir-testimonial > p,
.ir-editor-content > blockquote > p,
.site-reference--detail .page-block > blockquote > p {
  position: relative;
  max-width: none;
  margin: .9375rem 0 1.25rem;
  color: inherit;
  font-family: var(--ir-font-display);
  font-size: clamp(1rem, 1.12vw, 1.1875rem);
  line-height: 1.68;
  font-weight: 500;
}

.ir-testimonial > p:last-child:not(:first-child),
.ir-editor-content > blockquote > p:last-child:not(:first-child),
.site-reference--detail .page-block > blockquote > p.ir-reference-quote-author {
  margin: 1.125rem 0 0;
  color: var(--ir-text-muted);
  font-family: var(--ir-font-body);
  font-size: .75rem;
  line-height: 1.5;
  font-weight: 600;
}

@media (max-width: 43.75em) {
  .ir-project-page h2 {
    font-size: var(--ir-h2-size-mobile);
  }

  .ir-editor-content > p,
  .ir-editor-content > ul,
  .ir-editor-content > ol,
  .ir-editor-content table {
    font-size: var(--ir-body-size-mobile);
  }

  .ir-editor-content > h3,
  .site-reference--detail .page-block > h3 {
    font-size: 1.75rem;
  }

  .ir-testimonial,
  .ir-editor-content > blockquote,
  .site-reference--detail .page-block > blockquote {
    padding: 2.125rem 1.5625rem 1.75rem;
  }

  .ir-testimonial::before,
  .ir-editor-content > blockquote::before,
  .site-reference--detail .page-block > blockquote::before {
    top: .8125rem;
    left: 1.3125rem;
    font-size: 2.875rem;
  }

  .ir-testimonial > p,
  .ir-editor-content > blockquote > p,
  .site-reference--detail .page-block > blockquote > p {
    margin-top: .75rem;
    font-size: 1rem;
    line-height: 1.62;
  }
}

/* =========================================================
   Shared project composition primitives
   ========================================================= */

/* Shared dark section environment. Page CSS may still own a bespoke background,
   but editor and common text colors are identical everywhere. */
.ir-section--dark {
  --ir-editor-heading-color: #fff;
  --ir-editor-body-color: var(--ir-text-on-dark);
  --ir-editor-link-color: #fff;
  color: #fff;
  background:
    radial-gradient(circle at 84% 18%, rgba(255,77,87,.12), transparent 28%),
    var(--ir-surface-dark);
}


/* Shared section spacing: page CSS owns surface/visual treatment, not vertical rhythm. */
.ir-section--compact { padding: var(--ir-section-compact); }
.ir-section--standard { padding: var(--ir-section-standard); }
.ir-section--generous { padding: var(--ir-section-generous); }
.ir-section--spacious { padding: var(--ir-section-spacious); }

/* Repeated two-column compositions. These express layout intent, not page identity. */
.ir-split {
  display: grid;
  gap: var(--ir-gap-columns);
}

.ir-split--content {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: start;
}

.ir-split--media {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
}

.ir-split--aside {
  grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
  align-items: center;
}

.ir-split--media-reverse {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
}

.ir-split--media-reverse > .ir-split__content {
  grid-column: 2;
  grid-row: 1;
}

.ir-split--media-reverse > .ir-split__media {
  grid-column: 1;
  grid-row: 1;
}

.ir-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .72fr);
  gap: var(--ir-gap-columns-tight);
  align-items: end;
  margin-bottom: 3.625rem;
}

.ir-section-head > p {
  margin: 0;
  color: var(--ir-text-secondary);
  font-size: 1rem;
  line-height: 1.78;
}

.ir-section-head--start {
  align-items: start;
}


/* Shared emphasis patterns. These are semantic presentation components, not
   page-specific typography overrides. */
.ir-rule-statement {
  grid-column: 1 / -1;
  max-width: 69.375rem;
  margin: 1.125rem 0 0;
  padding-left: 1.375rem;
  border-left: 2px solid var(--ir-coral);
  color: var(--ir-editor-heading-color);
  font-family: var(--ir-font-display);
  font-size: clamp(1.75rem, 2.25vw, 2.5625rem);
  line-height: 1.38;
  font-weight: 600;
}

.ir-rule-statement strong {
  color: var(--ir-coral);
  font-weight: 600;
}

.ir-rule-statement--plain {
  margin-top: 3rem;
  padding-left: 0;
  border-left: 0;
}

.ir-feature-statement {
  margin: 0;
  padding: 2.625rem 0 2.625rem 2.125rem;
  border-left: 2px solid var(--ir-coral);
  color: var(--ir-editor-heading-color);
  font-family: var(--ir-font-display);
  font-size: clamp(1.9375rem, 2.75vw, 3rem);
  line-height: 1.28;
  font-weight: 600;
}

.ir-feature-statement > span,
.ir-feature-statement > strong {
  display: block;
}

.ir-feature-statement > p {
  margin: 0;
  color: inherit;
  font: inherit;
}

.ir-feature-statement > p + p {
  margin-top: .3125rem;
  color: var(--ir-coral);
}

.ir-feature-statement strong {
  color: var(--ir-coral);
  font-weight: 600;
}

.ir-feature-statement > p + p strong {
  color: inherit;
  font: inherit;
}

.ir-supporting-statement {
  margin: 2rem 0 0;
  color: var(--ir-editor-heading-color);
  font-family: var(--ir-font-display);
  font-size: 1.5625rem;
  line-height: 1.45;
  font-weight: 600;
}

.ir-supporting-statement strong {
  color: var(--ir-coral);
  font-weight: 600;
}

.ir-scope-statement {
  padding: 2.625rem;
  border-radius: var(--ir-radius-card);
  background: var(--ir-surface-soft);
}

.ir-scope-statement--raised {
  background: #fff;
  box-shadow: 0 18px 44px rgba(15,17,23,.06);
}

.ir-scope-statement > p {
  margin: 0;
}

.ir-scope-statement > p:first-child {
  color: var(--ir-ink);
  font-family: var(--ir-font-display);
  font-size: clamp(1.9375rem, 2.75vw, 3rem);
  line-height: 1.24;
  font-weight: 600;
}

.ir-scope-statement > p:first-child strong {
  color: var(--ir-coral);
  font-weight: 600;
}

.ir-scope-statement > p + p {
  margin-top: 1.625rem;
  color: var(--ir-text-body);
  font-size: .9375rem;
  line-height: 1.72;
}

.ir-emphasis-card {
  padding: 2.5rem;
  border-radius: var(--ir-radius-card);
  background: #fff;
  box-shadow: 0 18px 44px rgba(15,17,23,.06);
}

.ir-emphasis-card--soft {
  background: var(--ir-surface-soft);
  box-shadow: none;
}

.ir-emphasis-card > p {
  margin: 0;
  color: var(--ir-ink);
  font-family: var(--ir-font-display);
  font-size: 1.75rem;
  line-height: 1.35;
  font-weight: 600;
}

.ir-emphasis-card > p + p {
  margin-top: 1rem;
  color: var(--ir-coral);
  font-size: 1.5rem;
  line-height: 1.4;
}

.ir-emphasis-card > p + p strong {
  color: inherit;
  font: inherit;
}

/* Shared frame for layered hero screenshots. Page CSS owns placement and crop. */
.ir-hero-shot {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border-radius: var(--ir-radius-card);
  background: #fff;
  box-shadow: 0 30px 78px rgba(15,17,23,.13);
}

/* Service / process / aftercare hero. Homepage remains intentionally bespoke. */
.ir-hero {
  position: relative;
  overflow: hidden;
  padding: var(--ir-hero-padding);
  background:
    radial-gradient(circle at 79% 24%, rgba(244,229,216,.8), transparent 31%),
    linear-gradient(180deg, #fff 0%, #fdfbf9 100%);
}

.ir-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, .93fr) minmax(0, 1.07fr);
  gap: var(--ir-hero-gap);
  align-items: center;
}

.ir-hero__title {
  max-width: var(--ir-hero-copy-width);
  margin: 0;
  font-family: var(--ir-font-display);
  font-size: var(--ir-hero-title-size);
  line-height: .99;
  letter-spacing: .004em;
  font-weight: 600;
}

.ir-hero__title span {
  color: var(--ir-coral);
}

.ir-hero__lead {
  max-width: var(--ir-hero-text-width);
  margin: 2.125rem 0 0;
  color: var(--ir-text-body);
  font-size: 1.125rem;
  line-height: 1.8;
}

.ir-hero__statement {
  max-width: var(--ir-hero-text-width);
  margin-top: 1.75rem;
}

.ir-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .875rem;
  margin-top: 1.875rem;
}

.ir-hero__visual {
  position: relative;
  min-height: 38.5rem;
}

/* Primary project CTA. One interaction language across the five consolidated pages. */
.ir-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6875rem;
  min-height: 3.375rem;
  padding: 0 1.625rem;
  border: 1px solid #d8dce2;
  border-radius: .75rem;
  color: #22262e;
  background: #fff;
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

.ir-button:hover {
  transform: translateY(-2px);
}

.ir-button:focus-visible {
  outline: 3px solid rgba(255,77,77,.28);
  outline-offset: 3px;
}

.ir-button--primary {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(135deg, #ff5454, #ff3f46);
  box-shadow: 0 12px 26px rgba(255,77,77,.2);
}

.ir-button--primary:hover,
.ir-button--primary:focus-visible {
  color: #fff;
  box-shadow: 0 16px 34px rgba(255,77,77,.28);
}

.ir-button--secondary:hover,
.ir-button--secondary:focus-visible {
  color: #22262e;
  border-color: #d8dce2;
}

/* Shared reference preview used wherever a three-item realization mosaic has the same meaning. */
.ir-showcase-mosaic {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  grid-template-rows: 19.0625rem 19.0625rem;
  column-gap: 2.125rem;
  row-gap: 1.375rem;
}

.ir-showcase-reference {
  position: relative;
  min-width: 0;
  display: block;
  overflow: hidden;
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: 0 18px 46px rgba(15,17,23,.09);
  color: inherit;
  text-decoration: none;
}

.ir-showcase-reference--main {
  grid-row: 1 / span 2;
}

.ir-showcase-reference__figure {
  width: 100%;
  height: 100%;
  margin: 0;
}

.ir-showcase-reference__figure > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform .35s ease;
}

.ir-showcase-reference:hover .ir-showcase-reference__figure > img {
  transform: scale(1.015);
}

.ir-showcase-reference figcaption {
  position: absolute;
  left: 1.125rem;
  bottom: 1.125rem;
  min-width: 10.625rem;
  max-width: calc(100% - 2.25rem);
  padding: .75rem .9375rem;
  border-radius: .75rem;
  background: rgba(255,255,255,.93);
  box-shadow: 0 12px 28px rgba(15,17,23,.1);
  backdrop-filter: blur(.5rem);
}

.ir-showcase-reference figcaption span {
  display: block;
  margin-bottom: .1875rem;
  color: var(--ir-coral);
  font-size: .6875rem;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ir-showcase-reference figcaption strong {
  display: block;
  margin-top: .25rem;
  color: var(--ir-ink);
  font-family: var(--ir-font-display);
  font-size: 1.25rem;
  font-weight: 600;
}

/* Shared final contact / closing statement. */
.ir-closing {
  padding: var(--ir-section-closing);
  background:
    radial-gradient(circle at 90% 25%, rgba(255,77,87,.085), transparent 28%),
    linear-gradient(180deg, #fff 0%, #fbf7f3 100%);
}

.ir-closing__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .76fr);
  gap: var(--ir-gap-columns-wide);
  align-items: start;
}

.ir-closing__lead {
  max-width: var(--ir-width-copy);
  color: var(--ir-text-body);
  font-size: var(--ir-body-size);
  line-height: var(--ir-body-line);
}

.ir-closing__statement {
  margin: 3.25rem 0 0;
  color: var(--ir-ink);
  font-family: var(--ir-font-display);
  font-size: clamp(1.8125rem, 2.4vw, 2.625rem);
  line-height: 1.35;
  font-weight: 600;
}

.ir-closing__statement strong {
  color: var(--ir-coral);
  font-weight: 600;
}

/* Reused dark technical-media frame and labels. Image crop remains page-owned. */
.ir-tech-visual > figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--ir-radius-card);
  background: #22262d;
  box-shadow: 0 28px 74px rgba(0,0,0,.33);
}

.ir-tech-labels {
  display: grid;
  margin: .875rem 0 0;
  padding: 0;
  list-style: none;
  grid-template-columns: 1fr 1fr;
  gap: .625rem;
}

.ir-tech-labels > li {
  padding: .8125rem .9375rem;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: .6875rem;
  color: #f2f3f4;
  background: rgba(28,32,39,.9);
  font-size: .75rem;
  font-weight: 700;
}

@media (max-width: 66.25em) {
  .ir-hero__grid,
  .ir-closing__grid,
  .ir-split,
  .ir-section-head {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .ir-hero__visual {
    width: 100%;
    max-width: 53.125rem;
    min-height: 35rem;
  }
  .ir-split--media-reverse > .ir-split__content,
  .ir-split--media-reverse > .ir-split__media {
    grid-column: auto;
    grid-row: auto;
  }

  .ir-showcase-mosaic {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 21.875rem 16.25rem;
    gap: 1.25rem 1.75rem;
  }

  .ir-showcase-reference--main {
    grid-column: 1 / -1;
    grid-row: auto;
  }

}

@media (max-width: 43.75em) {
  .ir-section--compact,
  .ir-section--standard,
  .ir-section--generous,
  .ir-section--spacious {
    padding: var(--ir-section-mobile);
  }

  .ir-hero {
    padding: 4rem 0 5.5rem;
  }

  .ir-hero__title {
    font-size: var(--ir-hero-title-size-mobile);
  }

  .ir-hero__lead {
    font-size: 1rem;
  }

  .ir-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .ir-button {
    width: 100%;
  }

  .ir-closing {
    padding: var(--ir-section-mobile);
  }

  .ir-closing__statement {
    margin-top: 0;
  }

  .ir-showcase-mosaic {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 1rem;
  }

  .ir-showcase-reference,
  .ir-showcase-reference--main {
    min-height: 17.5rem;
    grid-row: auto;
  }

  .ir-showcase-reference--main {
    min-height: 23.75rem;
  }

  .ir-tech-labels {
    grid-template-columns: 1fr;
  }
  .ir-feature-statement {
    padding-left: 1.375rem;
  }

  .ir-scope-statement,
  .ir-emphasis-card {
    padding: 1.875rem;
  }

}

@media (prefers-reduced-motion: reduce) {
  .ir-button,
  .ir-showcase-reference__figure > img {
    transition: none;
  }

  .ir-button:hover,
  .ir-showcase-reference:hover .ir-showcase-reference__figure > img {
    transform: none;
  }
}


/* =========================================================
   Shared patterns extended by the remaining fixed pages
   ========================================================= */

.ir-section--soft {
  background:
    radial-gradient(circle at 90% 16%, rgba(255,77,87,.035), transparent 24%),
    var(--ir-surface-soft);
}

/* Ordered project/process rail. Same meaning, same selector across pages. */
.ir-process-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.75rem;
  margin: 0;
  padding: 2rem 0 0;
  list-style: none;
}

.ir-process-rail--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ir-process-rail::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: .25rem;
  height: 1px;
  background: var(--ir-line);
}

.ir-process-rail > li { position: relative; }
.ir-process-rail > li::before {
  content: "";
  position: absolute;
  top: -2.125rem;
  left: 0;
  width: .5625rem;
  height: .5625rem;
  border-radius: 50%;
  background: var(--ir-coral);
  box-shadow: 0 0 0 .3125rem var(--ir-surface-soft);
}
.ir-process-rail > li > span,
.ir-numbered-grid > li > span,
.ir-side-steps > li > span {
  display: block;
  color: var(--ir-coral);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.ir-process-rail h3,
.ir-numbered-grid h3,
.ir-side-steps h3 {
  margin: .875rem 0 0;
  font-family: var(--ir-font-display);
  font-size: 1.4375rem;
  line-height: 1.28;
  font-weight: 600;
}
.ir-process-rail p,
.ir-numbered-grid p,
.ir-side-steps p {
  margin: .75rem 0 0;
  color: var(--ir-text-secondary);
  font-size: .875rem;
  line-height: 1.7;
}

.ir-numbered-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ir-numbered-grid > li {
  padding: 1.375rem 0 0;
  border-top: 1px solid var(--ir-line);
}
.ir-numbered-grid--dark > li { border-color: rgba(255,255,255,.12); }
.ir-numbered-grid--dark h3 { color: #fff; }
.ir-numbered-grid--dark p { color: var(--ir-text-on-dark); }

.ir-side-steps {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ir-line);
  list-style: none;
}
.ir-side-steps > li {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 1.25rem;
  padding: 1.375rem 0;
  border-bottom: 1px solid var(--ir-line);
}
.ir-side-steps h3 { margin-top: 0; }
.ir-side-steps p { margin-top: .4375rem; }
.ir-side-steps--dark { border-color: rgba(255,255,255,.12); }
.ir-side-steps--dark > li { border-color: rgba(255,255,255,.12); }
.ir-side-steps--dark h3 { color: #fff; }
.ir-side-steps--dark p { color: var(--ir-text-on-dark); }

.ir-side-steps--circles > li {
  grid-template-columns: 3rem 1fr;
  align-items: start;
}
.ir-side-steps--circles > li > span {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  color: #fff;
  background: var(--ir-coral);
  letter-spacing: 0;
}
.ir-side-steps--circles h3 { font-size: 1.3125rem; }
.ir-side-steps--circles p { font-size: .9375rem; line-height: 1.68; }

.ir-definition-list { margin: 0; }
.ir-definition-list > div {
  display: grid;
  grid-template-columns: minmax(7rem, .34fr) 1fr;
  gap: 1.75rem;
  padding: 1.15rem 0;
  border-top: 1px solid var(--ir-line);
}
.ir-definition-list > div:last-child { border-bottom: 1px solid var(--ir-line); }
.ir-definition-list dt {
  color: var(--ir-coral);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ir-definition-list dd {
  margin: 0;
  color: var(--ir-ink);
  font-size: .9375rem;
  line-height: 1.65;
}

.ir-stack-cards { display: grid; gap: .75rem; }
.ir-stack-cards > article,
.ir-two-card-grid > article,
.ir-audit-cards > article {
  padding: 1.75rem;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 16px 38px rgba(15,17,23,.06);
}
.ir-section--dark .ir-stack-cards > article {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.055);
  box-shadow: none;
}
.ir-stack-cards span,
.ir-two-card-grid > article > span,
.ir-audit-cards > article > span {
  display: block;
  margin-bottom: .75rem;
  color: var(--ir-coral);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ir-stack-cards h3,
.ir-two-card-grid h3 {
  margin: 0;
  font-family: var(--ir-font-display);
  font-size: 1.35rem;
  line-height: 1.3;
  font-weight: 600;
}
.ir-stack-cards p,
.ir-two-card-grid p,
.ir-audit-cards p {
  margin: .625rem 0 0;
  color: var(--ir-text-secondary);
  font-size: .875rem;
  line-height: 1.65;
}
.ir-section--dark .ir-stack-cards h3 { color: #fff; }
.ir-section--dark .ir-stack-cards p { color: var(--ir-text-on-dark); }

.ir-two-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.ir-two-card-grid--compact > article { padding: 1.5rem; }
.ir-two-card-grid--comparison > article:nth-child(2) {
  border-top: 3px solid var(--ir-coral);
  padding-top: calc(1.75rem - 3px);
}
.ir-two-card-grid ul { margin: 0; padding: 0; list-style: none; }
.ir-two-card-grid li { padding: 1rem 0; border-top: 1px solid var(--ir-line); }
.ir-two-card-grid li:first-child { border-top: 0; }
.ir-two-card-grid li > strong { font-size: .9375rem; }
.ir-two-card-grid li > p { margin-top: .35rem; font-size: .8125rem; }

.ir-question-list {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ir-line);
  list-style: none;
}
.ir-question-list > li {
  position: relative;
  padding: 1.25rem 0 1.25rem 2.25rem;
  border-bottom: 1px solid var(--ir-line);
  color: var(--ir-ink);
  font-family: var(--ir-font-display);
  font-size: 1.15rem;
  font-weight: 600;
}
.ir-question-list > li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--ir-coral);
}

.ir-audit-cards { display: grid; gap: .75rem; }

.ir-related-panel {
  display: grid;
  gap: .75rem;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 1.125rem;
  background: rgba(255,255,255,.035);
}
.ir-related-panel a {
  position: relative;
  display: block;
  padding: 1.125rem 3rem 1.125rem 1.25rem;
  border-radius: .75rem;
  color: #fff;
  background: rgba(255,255,255,.045);
  text-decoration: none;
}
.ir-related-panel a::after {
  content: "↗";
  position: absolute;
  right: 1.25rem;
  top: 50%;
  color: var(--ir-coral);
  font-size: .875rem;
  transform: translateY(-50%);
}
.ir-related-panel a:hover { background: rgba(255,255,255,.075); }
.ir-related-panel span {
  display: block;
  color: var(--ir-coral);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ir-related-panel strong { display: block; margin-top: .375rem; font-family: var(--ir-font-display); font-size: 1.125rem; }

.ir-code-panel figure {
  margin: 0;
  overflow: hidden;
  border-radius: 1rem;
  background: #24272d;
  box-shadow: 0 24px 60px rgba(0,0,0,.24);
}
.ir-code-panel img { display: block; width: 100%; height: auto; }
.ir-code-panel > div { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .875rem; }
.ir-code-panel > div span { padding: .5rem .7rem; border: 1px solid rgba(255,255,255,.1); border-radius: .55rem; color: #d3d6db; font-size: .7rem; }

.ir-distribution-visual,
.ir-transition-visual {
  padding: 1.75rem;
  border-radius: 1.125rem;
  background: var(--ir-surface-soft);
}
.ir-distribution-visual__source,
.ir-transition-visual > div {
  padding: 1.125rem;
  border-radius: .8rem;
  background: #fff;
}
.ir-distribution-visual__source span,
.ir-transition-visual span {
  color: var(--ir-coral);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ir-distribution-visual__source strong,
.ir-transition-visual strong {
  display: block;
  margin-top: .4rem;
  font-family: var(--ir-font-display);
  font-size: 1.25rem;
  line-height: 1.3;
}
.ir-distribution-visual__lines {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  width: 100%;
  height: 2.25rem;
  margin: 0 auto;
}
.ir-distribution-visual__lines i { position: relative; }
.ir-distribution-visual__lines i::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(15,17,23,.15);
}
.ir-distribution-visual__lines i::after { content: ""; position: absolute; left: calc(50% - .2rem); bottom: 0; width: .4rem; height: .4rem; border-radius: 50%; background: var(--ir-coral); }
.ir-distribution-visual__targets { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.ir-distribution-visual__targets > span { padding: .8rem .7rem; border-radius: .65rem; background: #fff; color: var(--ir-ink); font-size: .72rem; font-weight: 700; text-align: center; }
.ir-distribution-visual > p { margin: .9rem 0 0; color: var(--ir-text-secondary); font-size: .75rem; line-height: 1.55; }
.ir-distribution-visual__source--dark { color: #fff; background: var(--ir-surface-dark); }
.ir-distribution-visual__source--dark strong { color: #fff; }
.ir-distribution-visual__targets--cards > article {
  padding: 1rem .8125rem;
  border: 1px solid var(--ir-line-soft);
  border-radius: .75rem;
  background: #fff;
}
.ir-distribution-visual__targets--cards span {
  display: block;
  color: var(--ir-coral);
  font-size: .5625rem;
  font-weight: 700;
}
.ir-distribution-visual__targets--cards strong {
  display: block;
  margin-top: .375rem;
  color: var(--ir-ink);
  font-family: var(--ir-font-display);
  font-size: 1.0625rem;
  line-height: 1.3;
}
.ir-distribution-visual__targets--cards small {
  display: block;
  margin-top: .375rem;
  color: var(--ir-text-muted);
  font-size: .5625rem;
  line-height: 1.45;
}
.ir-distribution-visual--dark { border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.035); }
.ir-distribution-visual--dark .ir-distribution-visual__source,
.ir-distribution-visual--dark .ir-distribution-visual__targets > span { background: rgba(255,255,255,.07); color: #fff; }
.ir-distribution-visual--dark .ir-distribution-visual__lines i::before { background: rgba(255,255,255,.18); }
.ir-distribution-visual--dark > p { color: var(--ir-text-on-dark); }

.ir-transition-visual { display: grid; grid-template-columns: 1fr auto 1fr; gap: .75rem; align-items: center; }
.ir-transition-visual > b { color: var(--ir-coral); font-size: 1.5rem; }
.ir-transition-visual small { display: block; margin-top: .35rem; color: var(--ir-text-muted); font-size: .7rem; line-height: 1.45; }
.ir-transition-visual--dark { border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.035); }
.ir-transition-visual--dark > div { background: rgba(255,255,255,.06); }
.ir-transition-visual--dark strong { color: #fff; }
.ir-transition-visual--dark small { color: var(--ir-text-on-dark); }

.ir-reference-proof { position: relative; margin: 0; }
.ir-reference-proof img { display: block; width: 100%; max-height: 31rem; object-fit: cover; object-position: top; border-radius: 1.125rem; box-shadow: 0 24px 60px rgba(15,17,23,.12); }
.ir-reference-proof figcaption { position: absolute; right: -1rem; bottom: -1rem; padding: 1rem 1.25rem; border-radius: .8rem; background: #fff; box-shadow: 0 16px 38px rgba(15,17,23,.1); font-family: var(--ir-font-display); font-size: 1.05rem; font-weight: 600; }
.ir-reference-proof figcaption span { color: var(--ir-coral); font-size: 1.7rem; }

.ir-note-card { display: grid; gap: .625rem; padding: 1.5rem; border-radius: 1rem; background: #fff; box-shadow: 0 18px 44px rgba(15,17,23,.08); }
.ir-note-card span { padding: .75rem 0; border-bottom: 1px solid var(--ir-line); font-family: var(--ir-font-display); font-size: 1.05rem; font-weight: 600; }
.ir-note-card span:last-child { border-bottom: 0; }

.ir-process-line { display: flex; flex-wrap: wrap; gap: .75rem; margin: 3.5rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid var(--ir-line); list-style: none; }
.ir-process-line li { color: var(--ir-ink); font-family: var(--ir-font-display); font-size: 1rem; }
.ir-process-line li + li::before { content: "→"; margin-right: .75rem; color: var(--ir-coral); }

.ir-discipline-grid { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ir-line); border-bottom: 1px solid var(--ir-line); }
.ir-discipline-grid > li { padding: 1.5rem 1.25rem; border-left: 1px solid var(--ir-line); }
.ir-discipline-grid > li:first-child { border-left: 0; }
.ir-discipline-grid h3 { margin: 0; font-family: var(--ir-font-display); font-size: 1.15rem; line-height: 1.35; }
.ir-discipline-grid p { margin: .65rem 0 0; color: var(--ir-text-secondary); font-size: .78rem; line-height: 1.6; }

.ir-award-visual { margin: 0; }
.ir-award-visual img { display: block; width: 100%; border-radius: 1.125rem; }
.ir-award-visual figcaption { margin-top: .75rem; color: var(--ir-text-muted); font-size: .75rem; line-height: 1.55; }

.ir-creative-mosaic { position: relative; min-height: 28rem; }
.ir-creative-mosaic figure { position: absolute; margin: 0; overflow: hidden; border-radius: 1rem; background: #fff; box-shadow: 0 20px 50px rgba(15,17,23,.11); }
.ir-creative-mosaic figure:first-child { left: 0; top: 1rem; width: 61%; height: 18rem; }
.ir-creative-mosaic figure:nth-child(2) { right: 0; bottom: 0; width: 55%; height: 17rem; }
.ir-creative-mosaic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ir-creative-mosaic > div { position: absolute; right: 3%; top: 0; display: grid; place-items: center; width: 5rem; height: 5rem; border-radius: 50%; background: var(--ir-coral); color: #fff; font-family: var(--ir-font-display); font-size: 1.6rem; font-weight: 700; }

.ir-topic-chips { display: flex; flex-wrap: wrap; gap: .55rem; margin: 2.75rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid var(--ir-line); list-style: none; }
.ir-topic-chips li { padding: .55rem .75rem; border-radius: 999px; background: var(--ir-surface-soft); color: var(--ir-ink); font-size: .78rem; }

@media (max-width: 70em) {
  .ir-process-rail,
  .ir-process-rail--four,
  .ir-numbered-grid,
  .ir-discipline-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ir-process-rail { gap: 2.125rem 2.75rem; padding-top: 0; }
  .ir-process-rail::before,
  .ir-process-rail > li::before { display: none; }
  .ir-process-rail > li { padding-top: 1.375rem; border-top: 1px solid var(--ir-line); }
  .ir-discipline-grid > li:nth-child(odd) { border-left: 0; }
  .ir-discipline-grid > li:nth-child(n+3) { border-top: 1px solid var(--ir-line); }
}

@media (max-width: 43.75em) {
  .ir-process-rail,
  .ir-process-rail--four,
  .ir-numbered-grid,
  .ir-two-card-grid,
  .ir-discipline-grid { grid-template-columns: 1fr; }
  .ir-discipline-grid > li,
  .ir-discipline-grid > li:nth-child(odd) { border-left: 0; border-top: 1px solid var(--ir-line); }
  .ir-discipline-grid > li:first-child { border-top: 0; }
  .ir-side-steps > li { grid-template-columns: 2rem 1fr; }
  .ir-side-steps--circles > li { grid-template-columns: 2.75rem 1fr; }
  .ir-distribution-visual__targets { grid-template-columns: 1fr; }
  .ir-distribution-visual__lines { display: none; }
  .ir-transition-visual { grid-template-columns: 1fr; }
  .ir-transition-visual > b { transform: rotate(90deg); justify-self: center; }
  .ir-creative-mosaic { min-height: 24rem; }
  .ir-reference-proof figcaption { right: .5rem; bottom: .5rem; }
}

/* Dark hero is a shared surface variant, not an Ecosystem-specific hero. */
.ir-hero--dark {
  --ir-editor-heading-color: #fff;
  --ir-editor-body-color: var(--ir-text-on-dark);
  --ir-editor-link-color: #fff;
  color: #fff;
  background:
    radial-gradient(circle at 82% 20%, rgba(255,77,87,.15), transparent 29%),
    radial-gradient(circle at 22% 80%, rgba(255,255,255,.035), transparent 28%),
    var(--ir-surface-dark);
}

.ir-hero--dark .ir-hero__title,
.ir-section--dark h2 {
  color: #fff;
}

.ir-hero--dark .ir-hero__lead,
.ir-section--dark .ir-section-head > p {
  color: var(--ir-text-on-dark);
}


/* =========================================================
   Preservation modifiers shared by fixed-page presentations
   ========================================================= */

/* Two editorial comparison cards: same v47 motif used by Price and Ecosystem. */
.ir-two-card-grid--comparison > article {
  padding: 2rem 2.125rem;
}

.ir-two-card-grid--comparison > article:nth-child(2) {
  border-top: 3px solid var(--ir-coral);
  padding-top: calc(2rem - 3px);
}

.ir-two-card-grid--comparison li:first-child {
  border-top: 1px solid var(--ir-line);
}

.ir-two-card-grid--numbered > article {
  counter-reset: ir-two-card-row;
}

.ir-two-card-grid--numbered li {
  display: grid;
  grid-template-columns: 2.375rem 1fr;
  gap: 0 .9375rem;
  align-items: start;
  counter-increment: ir-two-card-row;
}

.ir-two-card-grid--numbered li::before {
  content: counter(ir-two-card-row, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1 / span 2;
  color: var(--ir-coral);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .08em;
}

.ir-two-card-grid--bulleted li {
  position: relative;
  padding-left: 1.35rem;
}

.ir-two-card-grid--bulleted li::before {
  content: "•";
  position: absolute;
  left: .125rem;
  color: var(--ir-coral);
}

/* Numbered editorial question list: no historical arrows. */
.ir-question-list--numbered {
  counter-reset: ir-question-row;
}

.ir-question-list--numbered > li {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: .9375rem;
  align-items: center;
  padding: 1.375rem 0;
  counter-increment: ir-question-row;
}

.ir-question-list--numbered > li::before {
  content: counter(ir-question-row, decimal-leading-zero);
  position: static;
  color: var(--ir-coral);
  font-family: var(--ir-font-body);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .08em;
}

/* Shared schematic hero balance: v47 gives the diagram less width than the copy.
   Applied explicitly only to pages whose hero contains a technical diagram. */
.ir-hero__grid--diagram {
  grid-template-columns: minmax(0, 1.04fr) minmax(27rem, .86fr);
  gap: 5.625rem;
}

@media (max-width: 66.25em) {
  .ir-hero__grid--diagram {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}