/* ═══════════════════════════════════════════════════════════════════════════
   iivpa-sections — page section components
   ═══════════════════════════════════════════════════════════════════════════

   Built on the tokens in iivpa-2026.css. Used by index.html and the pages added
   in this refresh (about / services / work). Nothing here depends on the
   Webflow export — these sections replaced the exported div soup, which is why
   index.html no longer needs jQuery or webflow.js at all.

     01  section header
     02  hero
     03  marquee
     04  services accordion (deep panel)
     05  numbers band
     06  story split
     07  work grid
     08  process timeline
     09  cta panel
     10  page hero (inner pages)
     11  prose (article / long copy)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 01  section header ─────────────────────────────────────────────────── */

.ii-head {
  display: grid;
  gap: clamp(18px, 3vw, 40px);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  margin-bottom: clamp(32px, 4.5vw, 64px);
}
.ii-head-title { margin: 0; max-width: 22ch; }
.ii-head-lede { margin: 16px 0 0; max-width: 56ch; color: var(--ii-ink-3); }
@media (max-width: 800px) {
  .ii-head { grid-template-columns: 1fr; align-items: start; }
}

/* ─── 02  hero ───────────────────────────────────────────────────────────── */

.ii-hero {
  position: relative;
  overflow: clip;
  padding-block: clamp(116px, 14vw, 180px) clamp(56px, 7vw, 104px);
}
.ii-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(36px, 5vw, 72px);
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: center;
}
@media (max-width: 980px) {
  .ii-hero-inner { grid-template-columns: 1fr; }
}

/* A notch below the global display-1: Archivo Black is wide, and the headline is
   nine words — at the full scale and 17ch it ran to five lines, which pushed the
   supporting pills below the fold. 19ch + a slightly smaller cap settles it at
   four. */
.ii-hero-title {
  margin: 0 0 22px;
  max-width: 19ch;
  font-size: clamp(2.2rem, 4.7vw, 3.95rem);
}
.ii-hero-lede {
  margin: 0 0 30px;
  max-width: 46ch;
  font-size: clamp(1.05rem, 1.5vw, 1.24rem);
  line-height: 1.55;
  color: var(--ii-ink-3);
}
.ii-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; }
.ii-hero-pills { display: flex; flex-wrap: wrap; gap: 9px; }

/* ·· the flow diagram ·······································································
   A bespoke visual for an automation consultancy: input → agents → output, with
   the edges drawing themselves. Replaces the Webflow template's stock shapes,
   which said nothing about the business. */
.ii-flow {
  position: relative;
  width: 100%;
  max-width: 660px;
  /* On the wide hero canvas the diagram anchors to the right edge of the
     container while the copy holds the left — two poles, void in between. */
  justify-self: end;
  aspect-ratio: 1 / 0.92;
  border-radius: var(--ii-r-xl);
  padding: clamp(16px, 2vw, 26px);
  background: var(--ii-glass);
  border: 1px solid var(--ii-glass-line);
  -webkit-backdrop-filter: var(--ii-glass-blur);
  backdrop-filter: var(--ii-glass-blur);
  box-shadow: var(--ii-glass-shadow);
}
.ii-flow svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* Edges draw on, then a travelling dash suggests work moving through. */
.ii-flow-edge {
  fill: none;
  stroke: var(--ii-hairline-2);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: var(--len, 300);
  stroke-dashoffset: var(--len, 300);
  animation: ii-draw 1.5s var(--ii-ease-out) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes ii-draw { to { stroke-dashoffset: 0; } }

.ii-flow-pulse {
  fill: none;
  stroke: var(--ii-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 5 999;
  opacity: 0;
  animation: ii-travel 3.4s linear infinite;
  animation-delay: var(--d, 0ms);
}
@keyframes ii-travel {
  0%        { stroke-dashoffset: 0;    opacity: 0; }
  8%        {                          opacity: 1; }
  70%, 100% { stroke-dashoffset: -320; opacity: 0; }
}

.ii-flow-node {
  fill: var(--ii-surface);
  stroke: var(--ii-hairline-2);
  stroke-width: 1.5;
}
.ii-flow-node.is-accent { fill: var(--ii-accent); stroke: var(--ii-accent); }
.ii-flow-node.is-ink { fill: var(--ii-ink); stroke: var(--ii-ink); }

.ii-flow-label {
  font: 500 12px/1 var(--ii-font-mono);
  fill: var(--ii-ink-3);
  letter-spacing: 0.02em;
}
.ii-flow-label.is-title { font-family: var(--ii-font); font-size: 13.5px; font-weight: 600; fill: var(--ii-ink); }
/* Sits on an `.is-ink` node, which is filled with --ii-ink — so the label has to
   be the PAGE background, not literal white. Hard-coding #fff made these labels
   invisible in dark mode, where --ii-ink is itself near-white. */
.ii-flow-label.on-dark { fill: var(--ii-bg); }
/* The accent is turquoise in both themes, so this one constant reads in both. */
.ii-flow-label.on-accent { fill: #04231F; }

/* Halo behind the agent cluster. */
.ii-flow-halo { fill: var(--ii-accent); opacity: 0.1; animation: ii-halo 3.2s var(--ii-ease) infinite; }
@keyframes ii-halo {
  0%, 100% { opacity: 0.08; transform: scale(1); }
  50%      { opacity: 0.18; transform: scale(1.06); }
}

/* ─── 03  marquee band ───────────────────────────────────────────────────── */

.ii-band {
  border-block: 1px solid var(--ii-hairline);
  padding-block: clamp(18px, 2.4vw, 30px);
  background: var(--ii-surface);
}

/* ─── 04  services accordion (deep panel / deep band) ────────────────────── */

/* Two shells for the same content: .ii-deep-panel is the original contained
   rounded card (still used by the inner pages); .ii-deep-band is the
   "integrated" register — the dark surface runs edge to edge and only the
   content inside is constrained. */
.ii-deep-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--ii-r-xl);
  background: var(--ii-deep);
  color: var(--ii-on-panel);
  padding: clamp(30px, 5vw, 76px);
}
.ii-deep-band {
  position: relative;
  overflow: hidden;
  background: var(--ii-deep);
  color: var(--ii-on-panel);
  padding-block: clamp(48px, 6.5vw, 104px);
  margin-block: var(--ii-section-y);
}
.ii-deep-panel::before,
.ii-deep-band::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -10%;
  width: 60%;
  height: 120%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(64, 224, 208, 0.16), transparent 70%);
  pointer-events: none;
}
.ii-deep-panel > *,
.ii-deep-band > * { position: relative; }
.ii-2026 .ii-deep-panel .ii-head-title,
.ii-2026 .ii-deep-band .ii-head-title { color: #fff; }
.ii-2026 .ii-deep-panel .ii-head-lede,
.ii-2026 .ii-deep-band .ii-head-lede { color: var(--ii-on-panel-dim); }
.ii-2026 .ii-deep-panel .ii-eyebrow,
.ii-2026 .ii-deep-band .ii-eyebrow { color: var(--ii-on-panel-label); }
.ii-2026 .ii-deep-panel .ii-eyebrow::before,
.ii-2026 .ii-deep-band .ii-eyebrow::before { background: var(--ii-accent-bright); }

/* The light-glass ghost button turns into washed grey on a deep panel; give it
   the same inverted treatment the CTA panel uses. */
.ii-2026 .ii-deep-panel .ii-btn-ghost,
.ii-2026 .ii-deep-band .ii-btn-ghost {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: var(--ii-panel-card-line) !important;
  color: #fff !important;
}
.ii-2026 .ii-deep-panel .ii-btn-ghost:hover,
.ii-2026 .ii-deep-band .ii-btn-ghost:hover {
  border-color: var(--ii-accent-bright) !important;
  background: rgba(255, 255, 255, 0.14) !important;
}

.ii-acc { border-top: 1px solid var(--ii-panel-line); }

.ii-acc-item { border-bottom: 1px solid var(--ii-panel-line); }

/* The row is a button so it is keyboard- and screen-reader-correct; the export
   used Webflow tab links, which are anchors that go nowhere. */
.ii-acc-trigger {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(14px, 2.4vw, 32px);
  width: 100%;
  padding: clamp(20px, 2.6vw, 34px) 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font-family: var(--ii-font);
}
.ii-acc-num {
  font-family: var(--ii-font-display);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ii-on-panel-label);
  font-variant-numeric: tabular-nums;
  transition: color var(--ii-t) var(--ii-ease);
}
.ii-acc-item.is-open .ii-acc-num { color: var(--ii-accent-bright); }

.ii-acc-title {
  margin: 0;
  font-family: var(--ii-font-display);
  font-size: clamp(1.35rem, 3.1vw, 2.35rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: #fff;
  transition: color var(--ii-t) var(--ii-ease);
}
.ii-acc-trigger:hover .ii-acc-title { color: var(--ii-accent-bright); }

/* Plus that becomes a minus — two bars, one rotates away. */
.ii-acc-icon { position: relative; width: 22px; height: 22px; flex: none; }
.ii-acc-icon::before,
.ii-acc-icon::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.8px;
  border-radius: 2px;
  background: var(--ii-accent-bright);
  transition: transform var(--ii-t) var(--ii-ease-spring);
}
.ii-acc-icon::after { transform: rotate(90deg); }
.ii-acc-item.is-open .ii-acc-icon::after { transform: rotate(0deg); }

/* Height animates via grid-template-rows so the panel can size to its content
   instead of relying on a guessed max-height. */
.ii-acc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--ii-t-slow) var(--ii-ease-out);
}
.ii-acc-item.is-open .ii-acc-body { grid-template-rows: 1fr; }
.ii-acc-body > div { overflow: hidden; }
.ii-2026 .ii-acc-body p {
  margin: 0 0 clamp(20px, 2.6vw, 32px);
  max-width: 62ch;
  padding-left: clamp(0px, 4vw, 58px);
  color: var(--ii-on-panel-dim);
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.62;
}
.ii-acc-tags { display: flex; flex-wrap: wrap; gap: 7px; padding-left: clamp(0px, 4vw, 58px); margin-bottom: clamp(20px, 2.6vw, 32px); }
.ii-acc-tag {
  padding: 6px 12px;
  border-radius: var(--ii-r-pill);
  border: 1px solid var(--ii-panel-card-line);
  font: 500 12.5px/1 var(--ii-font-mono);
  color: var(--ii-on-panel-dim);
  white-space: nowrap;
}

/* No-JS: every panel open, so the copy is never hidden from crawlers. */
html:not(.ii-js) .ii-acc-body { grid-template-rows: 1fr; }

/* ─── 05  numbers band ───────────────────────────────────────────────────── */

.ii-numbers {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  background: var(--ii-hairline);
  border: 1px solid var(--ii-hairline);
  border-radius: var(--ii-r-lg);
  overflow: hidden;
}
.ii-number {
  padding: clamp(22px, 3vw, 38px);
  background: var(--ii-surface);
}

/* Full-width register: the strip runs edge to edge like the marquee band, and
   only the figures inside sit on the wide container. The rounded box version
   above stays for inner pages. */
.ii-numbers-band {
  border-block: 1px solid var(--ii-hairline);
  background: var(--ii-surface);
  padding-block: clamp(30px, 4vw, 56px);
  margin-bottom: var(--ii-section-y);
}
.ii-numbers-band .ii-numbers {
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.ii-number-value {
  display: block;
  font-family: var(--ii-font-display);
  font-size: clamp(2.1rem, 4.4vw, 3.35rem);
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--ii-ink);
  font-variant-numeric: tabular-nums;
}
/* The unit reads as a unit, not as part of the figure — at display size a
   same-size suffix ran into the number and wrapped mid-word. */
.ii-number-value em {
  font-style: normal;
  color: var(--ii-accent);
  font-size: 0.4em;
  letter-spacing: -0.02em;
  margin-left: 0.14em;
  white-space: nowrap;
}
.ii-number-label {
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ii-ink-3);
}

/* ─── 06  story split ────────────────────────────────────────────────────── */

.ii-split {
  display: grid;
  gap: clamp(32px, 5vw, 68px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: center;
}
.ii-split.is-reversed > :first-child { order: 2; }

/* Side-anchored register: the two columns are pushed to opposite edges of the
   wide container, with the void in between doing the composition work. */
.ii-split.is-poles {
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.05fr);
  gap: clamp(40px, 11vw, 220px);
  align-items: start;
}
@media (max-width: 900px) {
  .ii-split,
  .ii-split.is-poles { grid-template-columns: 1fr; gap: clamp(24px, 5vw, 40px); }
  .ii-split.is-reversed > :first-child { order: 0; }
}

/* Integrated register: a split whose media column bleeds through the right
   gutter to the physical viewport edge. The section itself carries the
   container maths (padding-left mirrors a centered wide container), so no
   viewport-unit breakout hacks are needed and no horizontal scroll can appear. */
.ii-edge-split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 84px);
  align-items: center;
  /* Mirrors the border-box wide container's CONTENT edge: (100% − wide)/2 is
     its border edge, + gutter reaches the content line; the max(0px, …) floor
     makes it exactly one gutter on viewports the container fills. */
  padding-left: calc(max(0px, (100% - var(--ii-container-wide)) / 2) + var(--ii-gutter));
  padding-right: 0;
}
.ii-edge-split .ii-media {
  border-radius: var(--ii-r-lg) 0 0 var(--ii-r-lg);
  border-right: 0;
}
@media (max-width: 900px) {
  /* Single column: the copy keeps a right gutter, the media below it still
     runs to the right edge. */
  .ii-edge-split { grid-template-columns: 1fr; }
  .ii-edge-split > :first-child { padding-right: var(--ii-gutter); }
}

/* Glass frame around the CMS-injected video. */
.ii-media {
  position: relative;
  border-radius: var(--ii-r-lg);
  overflow: hidden;
  background: var(--ii-surface-2);
  border: 1px solid var(--ii-hairline);
  box-shadow: var(--ii-e2);
  aspect-ratio: 16 / 10;
}
.ii-media > div,
.ii-media video,
.ii-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Placeholder shown until the CMS video lands, so the frame is never an empty
   grey box. */
.ii-media-empty {
  display: grid;
  place-items: center;
  gap: 10px;
  text-align: center;
  padding: 24px;
  color: var(--ii-ink-4);
  font: 500 13px/1.5 var(--ii-font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ─── 07  work grid ──────────────────────────────────────────────────────── */

.ii-work { display: grid; gap: clamp(16px, 2vw, 26px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }

.ii-case {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--ii-r-lg);
  background: var(--ii-surface);
  border: 1px solid var(--ii-hairline);
  box-shadow: var(--ii-e1);
  text-decoration: none;
  transition: transform var(--ii-t) var(--ii-ease), box-shadow var(--ii-t) var(--ii-ease), border-color var(--ii-t) var(--ii-ease);
}
.ii-case:hover { transform: translateY(-4px); box-shadow: var(--ii-e3); border-color: var(--ii-hairline-2); }

.ii-case-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ii-surface-2);
}
.ii-case-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ii-t-slow) var(--ii-ease-out); }
.ii-case:hover .ii-case-thumb img { transform: scale(1.04); }

.ii-case-body { padding: clamp(18px, 2vw, 26px); display: flex; flex-direction: column; gap: 9px; flex: 1; }
.ii-case-client { font: 500 11.5px/1 var(--ii-font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ii-ink-4); }
.ii-case-title {
  margin: 0;
  font-family: var(--ii-font-display);
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--ii-ink);
}
.ii-case-summary { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ii-ink-3); }
.ii-case-more {
  margin-top: auto;
  padding-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 600 13.5px/1 var(--ii-font);
  color: var(--ii-accent-ink);
}
.ii-case:hover .ii-case-more .ii-arrow { transform: translateX(4px); }

/* Designed empty state — the export shipped a bare "No items found." */
.ii-empty {
  grid-column: 1 / -1;
  display: grid;
  gap: 14px;
  justify-items: center;
  text-align: center;
  padding: clamp(38px, 6vw, 76px) clamp(20px, 4vw, 48px);
  border-radius: var(--ii-r-lg);
  border: 1px dashed var(--ii-hairline-2);
  background: var(--ii-surface);
}
.ii-empty-mark {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: var(--ii-r);
  background: var(--ii-accent-wash);
  color: var(--ii-accent-ink);
}
.ii-empty-mark svg { width: 22px; height: 22px; }
.ii-empty-title { margin: 0; font-family: var(--ii-font-display); font-size: clamp(1.15rem, 2vw, 1.5rem); letter-spacing: -0.03em; color: var(--ii-ink); }
.ii-empty-text { margin: 0; max-width: 46ch; color: var(--ii-ink-3); font-size: 15px; }

/* ─── 08  process timeline ───────────────────────────────────────────────── */

.ii-steps { position: relative; display: grid; gap: clamp(24px, 3vw, 40px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

/* The rail sits behind the row and fills as the section enters view. The column
   count comes from auto-fit, so the rail cannot end exactly on the last dot in
   pure CSS — fading its tail reads as deliberate instead of clipped. */
.ii-steps::before,
.ii-steps::after {
  mask-image: linear-gradient(90deg, #000 0, #000 86%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 86%, transparent 100%);
}
.ii-steps::before {
  content: '';
  position: absolute;
  top: 21px;
  left: 0;
  right: 0;
  height: 1.5px;
  background: var(--ii-hairline);
}
.ii-steps::after {
  content: '';
  position: absolute;
  top: 21px;
  left: 0;
  height: 1.5px;
  width: var(--ii-steps-progress, 0%);
  background: linear-gradient(90deg, var(--ii-accent), var(--ii-warm));
  transition: width 1.4s var(--ii-ease-out);
}
@media (max-width: 700px) {
  .ii-steps::before, .ii-steps::after { display: none; }
}

.ii-step { position: relative; }
.ii-step-dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--ii-surface);
  border: 1.5px solid var(--ii-hairline-2);
  font: 600 14px/1 var(--ii-font-mono);
  color: var(--ii-ink-3);
  transition: border-color var(--ii-t) var(--ii-ease), color var(--ii-t) var(--ii-ease), background var(--ii-t) var(--ii-ease);
}
.ii-step.is-in .ii-step-dot { border-color: var(--ii-accent); color: var(--ii-accent-ink); background: var(--ii-accent-wash); }
.ii-step-title { margin: 0 0 10px; font-size: clamp(1.15rem, 1.9vw, 1.45rem); }
.ii-step-text { margin: 0; color: var(--ii-ink-3); font-size: 15.5px; line-height: 1.6; max-width: 40ch; }

/* ─── 09  cta panel / cta band ───────────────────────────────────────────── */

/* .ii-cta is the contained rounded card (inner pages); .ii-cta-band is the
   homepage's integrated register — the dark surface spans the viewport and the
   centered content sits directly on it. */
.ii-cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--ii-r-xl);
  padding: clamp(34px, 6vw, 88px);
  background: var(--ii-deep);
  color: var(--ii-on-panel);
  text-align: center;
}
.ii-cta-band {
  position: relative;
  overflow: hidden;
  background: var(--ii-deep);
  color: var(--ii-on-panel);
  text-align: center;
  padding-block: clamp(56px, 9vw, 150px);
  /* The footer is a deep band too — keep a breath of page between them. */
  margin-bottom: var(--ii-section-y);
}
.ii-cta::before,
.ii-cta-band::before {
  content: '';
  position: absolute;
  inset: -40% -10% auto;
  height: 160%;
  background:
    radial-gradient(ellipse 40% 40% at 25% 40%, rgba(64, 224, 208, 0.22), transparent 68%),
    radial-gradient(ellipse 40% 40% at 78% 60%, rgba(255, 123, 67, 0.16), transparent 68%);
  pointer-events: none;
}
.ii-cta > *,
.ii-cta-band > * { position: relative; }
.ii-cta-title {
  margin: 0 auto 18px;
  max-width: 20ch;
  font-size: clamp(2rem, 5vw, 3.6rem);
  color: #fff;
}
.ii-cta-text {
  margin: 0 auto 32px;
  max-width: 52ch;
  color: var(--ii-on-panel-dim);
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  line-height: 1.6;
}
.ii-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.ii-cta .ii-btn-ghost,
.ii-cta-band .ii-btn-ghost {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: var(--ii-panel-card-line) !important;
  color: #fff !important;
}
.ii-cta .ii-btn-ghost:hover,
.ii-cta-band .ii-btn-ghost:hover { border-color: var(--ii-accent-bright) !important; background: rgba(255, 255, 255, 0.13) !important; }

/* ─── 10  page hero (inner pages) ────────────────────────────────────────── */

.ii-page-hero {
  position: relative;
  overflow: clip;
  padding-block: clamp(116px, 14vw, 168px) clamp(30px, 4vw, 56px);
}
.ii-page-hero-inner { position: relative; z-index: 1; max-width: 46ch; }
/* Modifier goes on the inner block itself — that is where the pages put it. */
.ii-page-hero-inner.is-wide { max-width: 62ch; }
/* Matched to .ii-hero-title rather than the global display-1 cap (5.25rem), which
   set inner-page headlines visibly larger than the homepage's and ran them to
   five lines. */
.ii-page-title {
  margin: 0 0 20px;
  font-size: clamp(2.2rem, 5vw, 4.1rem);
}
.ii-page-lede {
  margin: 0;
  font-size: clamp(1.08rem, 1.6vw, 1.3rem);
  line-height: 1.55;
  color: var(--ii-ink-3);
}

/* ─── 11  prose ──────────────────────────────────────────────────────────── */

.ii-prose { max-width: 68ch; }
.ii-prose > * + * { margin-top: 1.1em; }
.ii-prose h2 { margin-top: 2em; font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.ii-prose h3 { margin-top: 1.6em; font-size: clamp(1.2rem, 2vw, 1.5rem); }
.ii-prose ul, .ii-prose ol { padding-left: 1.3em; }
.ii-2026 .ii-prose li { margin-top: 0.5em; color: var(--ii-ink-2); line-height: 1.65; }
.ii-prose li::marker { color: var(--ii-accent); }
.ii-prose a { color: var(--ii-accent-ink); text-underline-offset: 3px; }
.ii-prose strong { color: var(--ii-ink); font-weight: 600; }
.ii-prose blockquote {
  margin-inline: 0;
  padding-left: clamp(16px, 2vw, 24px);
  border-left: 2px solid var(--ii-accent);
}
.ii-2026 .ii-prose blockquote p { color: var(--ii-ink); font-size: clamp(1.1rem, 1.8vw, 1.3rem); line-height: 1.5; }

/* A definition-style list used on the services page. */
.ii-deflist { display: grid; gap: clamp(16px, 2vw, 24px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.ii-def { padding: clamp(18px, 2vw, 26px); border-radius: var(--ii-r); border: 1px solid var(--ii-hairline); background: var(--ii-surface); }
.ii-def-title { margin: 0 0 8px; font-size: clamp(1.05rem, 1.5vw, 1.2rem); }
.ii-def-text { margin: 0; color: var(--ii-ink-3); font-size: 14.5px; line-height: 1.6; }