/* September 18 editorial direction. Scoped to the three advisory pages. */
.editorial-page .editorial-section { padding-top: 80px; padding-bottom: 80px; }
.editorial-page .editorial-hero { padding-top: 64px; padding-bottom: 64px; }
.editorial-page h1 { font-size: clamp(48px, 5.6vw, 80px); line-height: .98; }
.editorial-page h2 { font-size: clamp(34px, 3.4vw, 48px); line-height: 1.12; }
.editorial-page .eyebrow { margin-bottom: 20px; }
.editorial-hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 80px; }
.editorial-intro { max-width: 480px; justify-self: end; }
.editorial-intro p, .hero-description { font-size: 18px; line-height: 1.7; }
.editorial-intro .text-link, .editorial-page .hero-description + .text-link { margin-top: 24px; }
.service-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; border-top: 1px solid var(--line); margin-top: 52px; padding-top: 28px; }
.service-overview h2 { font-size: 24px; margin-bottom: 10px; font-weight: 600; letter-spacing: -.01em; }   /* titles: the H3 treatment */
.service-overview p { font-size: 15px; line-height: 1.6; }
.service-overview .text-link { font-size: 13px; margin-top: 12px; }
.editorial-section-heading { display: grid; grid-template-columns: 1.15fr 1fr; gap: 80px; align-items: end; margin-bottom: 36px; }
.editorial-section-heading > p, .editorial-section-heading > div:last-child:not(:first-child) { max-width: 460px; justify-self: end; font-size: 16px; line-height: 1.7; }
.editorial-section-heading .text-link { margin-top: 18px; }
.library-nav { display: flex; flex-wrap: wrap; gap: 12px 34px; border-bottom: 1px solid var(--line); margin-bottom: 34px; }
.library-nav a { display: inline-flex; align-items: center; min-height: 48px; padding: 10px 0 14px; font-size: 15px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.library-nav a:hover, .library-nav a[aria-selected="true"] { color: var(--forest); border-color: var(--forest); }
.library-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: start; }
.library-main { min-width: 0; }
/* Each function has its own illustration beside its list (2026-09-23). */
.library-layout > *, .editorial-hero-grid > *, .governance-hero-grid > *, .firm-team-heading > * { min-width: 0; }
.library-panel { scroll-margin-top: 130px; }
.library-panel + .library-panel { border-top: 1px solid var(--line); margin-top: 36px; padding-top: 32px; }
[data-library-enhanced] .library-panel { border-top: 0; margin-top: 0; padding-top: 0; }
.library-panel > h3 { font-size: 28px; margin-bottom: 20px; }
.workflow-list { padding: 0; margin: 0; list-style: none; }
.workflow-list li { padding: 22px 0; border-top: 1px solid var(--line); }
.workflow-list li:first-child { border-top: 0; padding-top: 0; }
.workflow-list p { margin-top: 10px; font-size: 16px; line-height: 1.65; }
.editorial-page .library-item h4 { font-size: 20px; font-weight: 500; letter-spacing: -.025em; }
/* Built / Can build stay visible: the outlined chip from pages.css, compacted for the list. */
.evidence-figure { margin: 0; }
.motion-stage { position: relative; isolation: isolate; background: var(--ivory); border-top: 3px solid var(--forest); overflow: hidden; }
/* Rive will live in this decorative layer. Poster is hidden only after a successful mount. */
.motion-mount { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.motion-mount canvas { display: block; width: 100%; height: 100%; }
.motion-poster { position: relative; height: 112px; margin: 0 28px; overflow: hidden; border-bottom: 1px solid var(--line); }
.motion-poster span { position: absolute; width: 112px; height: 78px; border: 8px solid var(--forest); border-bottom: 0; border-radius: 5px 5px 0 0; left: calc(50% - 100px); bottom: -18px; opacity: .14; transform: skewY(-11deg); }
.motion-poster span:nth-child(2) { left: calc(50% - 52px); bottom: -2px; opacity: .26; }
.motion-poster span:nth-child(3) { left: calc(50% - 4px); bottom: 14px; opacity: .5; }
.motion-stage[data-motion-ready="true"] .motion-poster { visibility: hidden; }
.evidence-content { position: relative; padding: 25px 28px 28px; }
.evidence-content .eyebrow { font-size: 10px; letter-spacing: .12em; margin-bottom: 20px; }
.evidence-content h3, .evidence-content h2 { font-size: 27px; line-height: 1.2; margin-bottom: 22px; }
.evidence-record { margin: 0; }
.evidence-record > div { display: grid; grid-template-columns: .8fr 1.25fr; gap: 18px; padding: 13px 0; border-top: 1px solid var(--line); font-size: 14px; }
.evidence-record dt { color: var(--muted); }
.evidence-record dd { margin: 0; font-weight: 500; }
.evidence-gate { display: flex; gap: 12px; background: var(--soft); margin-top: 14px; padding: 17px; align-items: flex-start; }
.gate-dot { width: 7px; height: 7px; background: var(--forest); border-radius: 50%; flex: none; margin-top: 8px; }
.evidence-gate strong { color: var(--forest); font-size: 15px; font-weight: 500; }
.evidence-gate p { color: var(--forest); font-size: 13px; line-height: 1.55; margin-top: 4px; }
.evidence-figure figcaption { font-size: 12px; color: var(--muted); margin-top: 13px; line-height: 1.6; }
/* Capabilities example: a composed scene. Every card is real text; only the
   connectors are decorative, and they stop at the approval gate. */
/* The record card sits in flow and sets the height; the satellites and the two
   connectors are anchored to it, so nothing depends on a fixed aspect ratio. */
.evidence-scene { --lead: 140px; --tail: 74px; position: relative; padding: var(--lead) 0 var(--tail); }
.evidence-source, .evidence-card, .evidence-target { box-sizing: border-box; background: var(--ivory); border: 1px solid var(--line); border-radius: 14px; }
.evidence-source, .evidence-target, .evidence-paper, .evidence-link { position: absolute; }
.evidence-paper { left: 52%; top: 2px; width: 24%; z-index: 0; }
.evidence-source { left: 0; top: 0; width: 55%; padding: 15px 17px; box-shadow: 0 14px 30px rgba(30, 65, 40, .05); z-index: 2; }
.evidence-card { position: relative; margin-left: 26%; width: 74%; padding: 22px 24px 20px; border-radius: 18px; box-shadow: 0 26px 58px rgba(30, 65, 40, .09); z-index: 3; }
.evidence-target { left: 62%; bottom: 0; width: 38%; padding: 13px 15px; box-shadow: 0 14px 30px rgba(30, 65, 40, .05); z-index: 2; }
.evidence-paper, .evidence-link { display: block; height: auto; }
.evidence-paper { aspect-ratio: 220 / 264; }
.evidence-link { z-index: 1; }
.evidence-link-in { left: 9%; top: 120px; width: 18%; aspect-ratio: 120 / 112; }
.evidence-link-out { left: 46%; bottom: 26px; width: 20%; aspect-ratio: 140 / 100; }
.evidence-head, .evidence-target { display: flex; align-items: center; gap: 11px; margin: 0; }
.evidence-icon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--soft); color: var(--forest); }
.evidence-icon svg { width: 21px; height: 21px; }
.evidence-head strong, .evidence-target strong { display: block; font-size: 15px; font-weight: 500; letter-spacing: -.01em; }
.evidence-head small, .evidence-target small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.evidence-lines { display: block; margin: 14px 0 12px; }
.evidence-lines span { display: block; height: 7px; border-radius: 4px; background: var(--soft); }
.evidence-lines span + span { width: 62%; margin-top: 7px; }
.evidence-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink); background: var(--soft); border-radius: 9px; padding: 7px 11px; }
.evidence-chip svg { width: 15px; height: 15px; color: var(--muted); }
.evidence-card .eyebrow { font-size: 10px; letter-spacing: .12em; margin-bottom: 14px; }
.evidence-card h3 { font-size: clamp(21px, 2.1vw, 26px); line-height: 1.2; margin-bottom: 12px; }
.evidence-deal { display: inline-block; font-size: 12.5px; color: var(--forest); background: var(--soft); border-radius: 8px; padding: 6px 11px; margin-bottom: 16px; }
/* The walkthrough's exception tone, darkened to 5.7:1 on its own tint. */
.evidence-flag { display: inline-block; font-size: 12.5px; color: #785c18; background: #f7f4e9; border-radius: 7px; padding: 4px 9px; }
.evidence-sources { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--forest); border-top: 1px solid var(--line); padding-top: 14px; margin-top: 2px; }
.evidence-sources svg { width: 17px; height: 17px; flex: none; }
.evidence-card .evidence-gate { align-items: center; border-radius: 12px; margin-top: 16px; padding: 14px 16px; }
.evidence-approver { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--ivory); color: var(--forest); }
.evidence-approver svg { width: 20px; height: 20px; }
/* Operations: the drafted reply, shown as text lines inside its own frame. */
.evidence-draft { display: block; margin-top: 14px; padding: 14px 15px; border: 1px solid var(--line); border-radius: 10px; }
.evidence-draft span { display: block; height: 7px; border-radius: 4px; background: var(--soft); }
.evidence-draft span + span { margin-top: 8px; }
.evidence-draft span:nth-child(2) { width: 86%; }
.evidence-draft span:nth-child(3) { width: 52%; }
/* The first light carries materials in; the second stops at the gate.
   Both flow paths declare pathLength="100", so these numbers are percentages. */
.link-flow { stroke-dasharray: 17 200; stroke-dashoffset: 17; opacity: 0; }
.badge-ring { opacity: 0; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .link-flow { animation: evidence-flow 9s cubic-bezier(.45, 0, .55, 1) infinite; }
  .link-flow-held { animation-name: evidence-flow-held; }
  .link-flow-log { animation-name: evidence-flow-log; }
  .badge-ring { animation: evidence-hold 9s ease-out infinite; }
  .evidence-badge-ai { transform-box: fill-box; transform-origin: center; animation: evidence-spark 9s ease-out infinite; }
}
/* 2026-10-02: the site's Pause motion control (html[data-motion="paused"], kept current by
   site.js) stops the loop the way reduced motion does: the lights rest in their base state. */
html[data-motion="paused"] .link-flow, html[data-motion="paused"] .badge-ring, html[data-motion="paused"] .evidence-badge-ai { animation: none; }
@keyframes evidence-flow {
  0%, 5% { stroke-dashoffset: 17; opacity: 0; }
  9% { opacity: 1; }
  26% { stroke-dashoffset: -100; opacity: 1; }
  30%, 100% { stroke-dashoffset: -100; opacity: 0; }
}
@keyframes evidence-flow-log {
  0%, 38% { stroke-dashoffset: 17; opacity: 0; }
  42% { opacity: 1; }
  58% { stroke-dashoffset: -100; opacity: 1; }
  63%, 100% { stroke-dashoffset: -100; opacity: 0; }
}
@keyframes evidence-flow-held {
  0%, 44% { stroke-dashoffset: 17; opacity: 0; }
  48% { opacity: 1; }
  64%, 72% { stroke-dashoffset: -84; opacity: 1; }
  78%, 100% { stroke-dashoffset: -84; opacity: 0; }
}
@keyframes evidence-hold {
  0%, 66% { opacity: 0; transform: scale(1); }
  70% { opacity: .85; transform: scale(1); }
  88%, 100% { opacity: 0; transform: scale(1.7); }
}
@keyframes evidence-spark {
  0%, 22% { transform: scale(1); }
  27% { transform: scale(1.18); }
  34%, 100% { transform: scale(1); }
}
.example-links { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 15px; }
.example-links .text-link { font-size: 14px; }
.lifecycle-sequence { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; padding: 24px 0 0; margin: 0; border-top: 1px solid var(--line); }
.lifecycle-sequence li { font-size: 21px; font-weight: 500; }
.lifecycle-sequence span { display: block; color: var(--forest); font-size: 12px; font-weight: 400; margin-bottom: 14px; }
/* Lifecycle scene: a decorative Rive stage over its still poster. The numbered
   list stays the content and its five columns sit under the five stations. */
.has-scene .lifecycle-stage { position: relative; aspect-ratio: 1600 / 330; margin: 0 0 6px; }
.lifecycle-stage img, .lifecycle-stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.lifecycle-stage canvas { pointer-events: none; opacity: 0; transition: opacity .4s ease; }
.lifecycle-stage[data-motion-ready="true"] canvas { opacity: 1; }
.lifecycle-stage[data-motion-ready="true"] img { visibility: hidden; transition: visibility 0s .4s; }
.has-scene .lifecycle-sequence { gap: 0; padding: 0; border-top: 0; text-align: center; }
.has-scene .lifecycle-sequence li { transition: opacity .26s ease, color .26s ease; }
.has-scene .lifecycle-sequence span { margin-bottom: 8px; }
.lifecycle-sequence.is-focusing li:not(.is-active) { opacity: .5; }
.lifecycle-sequence li.is-active { color: var(--forest); }
.lifecycle-step { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 6px 4px; cursor: pointer; }
.lifecycle-step:focus-visible { outline: 3px solid var(--forest); outline-offset: 3px; }
.editorial-page #engagement .section-heading { margin-bottom: 34px; }
.editorial-page .engagement-grid h3 { font-size: 21px; line-height: 1.3; }
.editorial-page .engagement-grid p { font-size: 16px; }
/* Engagement steps: a small illustration above each step. The art is decorative
   (aria-hidden); the number, heading and paragraph carry the meaning. Sizes are
   em-based off the art's own font size, which tracks the column width. */
.engagement-grid.has-art > div { container-type: inline-size; position: relative; border-top: 0; padding-top: 0; }
.engagement-grid.has-art .small-index { display: block; border-top: 1px solid var(--line); padding-top: 18px; }
.engagement-grid .small-index { font-family: var(--brand); font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.engage-art { position: relative; aspect-ratio: 300 / 232; max-width: 360px; margin-bottom: 4px; font-size: 13px; font-size: clamp(11.5px, 4.15cqw, 15px); line-height: 1.35; color: var(--ink); }
.engage-art p { font-size: inherit; margin: 0; }
/* Illustration labels are secondary text: they stay muted now that body text is --prose (2026-10-12). Zero
   specificity, so any label that sets its own colour keeps it. */
:where(.engage-art) p { color: var(--muted); }
.engage-art .art-card { position: absolute; box-sizing: border-box; background: var(--ivory); border: 1px solid var(--line); border-radius: .85em; box-shadow: 0 .7em 1.7em rgba(30, 65, 40, .07); }
.engage-art .art-title { display: flex; align-items: center; gap: .6em; margin-bottom: .8em; font-size: 1.02em; font-weight: 500; letter-spacing: -.015em; }
.engage-art svg { flex: none; }
.art-row { display: flex; align-items: center; gap: .6em; }
.art-row > svg { width: 1.3em; height: 1.3em; color: var(--forest); }
.art-bar { display: block; height: .5em; border-radius: .25em; background: var(--soft); }
.art-bar.is-short { width: 62%; }
.engage-arrow { position: absolute; top: 50%; right: calc(-16px - 1.05em); width: 2.1em; height: 2.1em; margin-top: -1.05em; display: grid; place-items: center; border-radius: 50%; background: var(--ivory); border: 1px solid var(--line); color: var(--forest); }
.engage-arrow svg { width: 1.1em; height: 1.1em; }
/* 01 Pick one workflow */
.art-paper { position: absolute; right: -5%; top: -1%; width: 50%; height: auto; transform: rotate(4deg); }
.art-list { left: 0; top: 11%; width: 84%; padding: .9em; }
.art-list .art-row { border: 1px solid var(--line); border-radius: .55em; padding: .5em .6em; font-size: .92em; }
.art-list .art-row + .art-row { margin-top: .45em; }
.art-list .is-chosen { background: var(--soft); border-color: #cddbcf; }
.art-list .art-row span { flex: 1; }
.art-pick-check { display: grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: 50%; background: var(--forest); color: var(--ivory); }
.art-pick-check svg { width: .85em; height: .85em; }
.art-radio { width: 1.35em; height: 1.35em; border-radius: 50%; border: 1.5px solid var(--line); }
/* 02 Build inside your stack */
.art-env { position: absolute; inset: 6% 2% 4%; border: 1.6px dashed #c3d3c6; border-radius: 1.1em; }
.art-env-label { position: absolute; top: -.85em; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: .4em; white-space: nowrap; padding: 0 .5em; background: var(--soft); font-size: .82em; color: var(--muted); }
.art-env-label svg { width: 1.15em; height: 1.15em; color: var(--forest); }
.art-wires { position: absolute; inset: 0; width: 100%; height: 100%; }
.art-tile { position: absolute; display: flex; flex-direction: column; align-items: center; gap: .2em; width: 33%; padding: .5em .3em; box-sizing: border-box; background: var(--ivory); border: 1px solid var(--line); border-radius: .7em; font-size: .8em; box-shadow: 0 .5em 1.1em rgba(30, 65, 40, .05); }
.art-tile svg { width: 1.7em; height: 1.7em; color: var(--forest); }
.art-tile-mail { left: 5%; top: 14%; }
.art-tile-crm { right: 5%; top: 14%; }
.art-tile-files { left: 33.5%; bottom: 7%; }
.art-hub { position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 2.9em; height: 2.9em; border-radius: .8em; background: var(--forest); color: var(--ivory); }
.art-hub svg { width: 1.6em; height: 1.6em; }
/* 03 Human approval on every write */
.art-approve { left: 0; top: 2%; width: 86%; padding: .9em; }
.art-approve .art-avatar { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--soft); color: var(--forest); }
.art-approve .art-avatar svg { width: 1.1em; height: 1.1em; }
.art-approve > .art-bar { margin-bottom: .4em; }
.art-exception { display: flex; align-items: center; gap: .55em; background: #f7f4e9; border-radius: .55em; padding: .55em .6em; margin: .7em 0 0; }
.art-exception > svg { width: 1.25em; height: 1.25em; color: #785c18; }
.art-exception > span { flex: 1; display: grid; gap: .35em; }
.art-exception .art-bar { background: #e6dcc0; }
.art-actions { display: flex; gap: .5em; margin-top: .8em; }
.art-btn { flex: 1; text-align: center; font-size: .85em; padding: .55em .4em; border-radius: .5em; border: 1px solid var(--line); color: var(--muted); }
.art-btn.is-primary { background: var(--forest); border-color: var(--forest); color: var(--ivory); }
.art-logged { position: absolute; right: 5%; bottom: 5%; width: 62%; box-sizing: border-box; display: flex; align-items: center; gap: .5em; padding: .6em .7em; background: var(--ivory); border: 1px solid var(--line); border-radius: .7em; font-size: .84em; transform: rotate(3deg); box-shadow: 0 .6em 1.4em rgba(30, 65, 40, .07); }
.art-logged svg { width: 1.3em; height: 1.3em; color: var(--forest); }
/* 04 Ungate as trust is earned */
.art-controls { left: 3%; top: 6%; width: 94%; padding: .95em; }
.art-controls .art-row { padding: .5em 0; font-size: .92em; }
.art-controls .art-row span { flex: 1; }
.art-controls .art-row em { font-style: normal; font-size: .92em; color: var(--muted); }
.art-toggle { position: relative; width: 2.3em; height: 1.25em; border-radius: .65em; background: var(--forest); }
.art-toggle::after { content: ""; position: absolute; top: .17em; left: 1.22em; width: .9em; height: .9em; border-radius: 50%; background: var(--ivory); }
.art-proof { display: flex; align-items: flex-end; gap: .7em; border-top: 1px solid var(--line); margin-top: .5em; padding-top: .85em; }
.art-bars { display: flex; align-items: flex-end; gap: .24em; height: 2.6em; }
.art-bars i { width: .66em; border-radius: .15em; background: #cddbcf; }
.art-bars i:nth-child(1) { height: 42%; }
.art-bars i:nth-child(2) { height: 68%; }
.art-bars i:nth-child(3) { height: 100%; background: var(--forest); }
.art-proof-copy { flex: 1; display: grid; gap: .5em; font-size: .85em; }
@media (max-width: 1150px) {
  .engage-arrow { display: none; }
}
/* One 12s sequence runs left to right: the choice is ticked, the systems
   connect, the exception is flagged, then the proven step is switched on. */
.wire-flow { stroke-dasharray: 22 200; stroke-dashoffset: 22; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .engage-arrow { animation: engage-arrow-on 12s ease-in-out infinite; }
  .engagement-grid.has-art > div:nth-child(2) .engage-arrow { animation-delay: 3s; }
  .engagement-grid.has-art > div:nth-child(3) .engage-arrow { animation-delay: 6s; }
  .art-pick-check { animation: engage-pop 12s ease-out infinite; }
  .wire-flow { animation: engage-wire 12s ease-in-out infinite; }
  .wire-flow-2 { animation-delay: .18s; }
  .wire-flow-3 { animation-delay: .36s; }
  .art-exception > svg { animation: engage-flag 12s ease-in-out infinite; }
  .art-toggle { animation: engage-toggle-track 12s ease-in-out infinite; }
  .art-toggle::after { animation: engage-toggle-knob 12s ease-in-out infinite; }
  .art-bars i { transform-origin: bottom; animation: engage-bar 12s ease-out infinite; }
  .art-bars i:nth-child(2) { animation-delay: .12s; }
  .art-bars i:nth-child(3) { animation-delay: .24s; }
}
html[data-motion="paused"] .engage-arrow, html[data-motion="paused"] .art-pick-check, html[data-motion="paused"] .wire-flow,
html[data-motion="paused"] .art-exception > svg, html[data-motion="paused"] .art-toggle, html[data-motion="paused"] .art-toggle::after,
html[data-motion="paused"] .art-bars i { animation: none; }
@keyframes engage-pop {
  0%, 6% { transform: scale(1); }
  10% { transform: scale(1.22); }
  15%, 100% { transform: scale(1); }
}
@keyframes engage-wire {
  0%, 28% { stroke-dashoffset: 22; opacity: 0; }
  31% { opacity: 1; }
  42% { stroke-dashoffset: -100; opacity: 1; }
  46%, 100% { stroke-dashoffset: -100; opacity: 0; }
}
@keyframes engage-arrow-on {
  0%, 16% { background: var(--ivory); border-color: var(--line); color: var(--forest); }
  20%, 26% { background: var(--forest); border-color: var(--forest); color: var(--ivory); }
  32%, 100% { background: var(--ivory); border-color: var(--line); color: var(--forest); }
}
@keyframes engage-flag {
  0%, 54% { transform: scale(1); opacity: 1; }
  57% { transform: scale(1.2); opacity: .7; }
  62%, 100% { transform: scale(1); opacity: 1; }
}
@keyframes engage-toggle-track {
  0% { background: var(--forest); }
  4%, 78% { background: #d3ddd2; }
  84%, 100% { background: var(--forest); }
}
@keyframes engage-toggle-knob {
  0% { left: 1.22em; }
  4%, 78% { left: .17em; }
  84%, 100% { left: 1.22em; }
}
@keyframes engage-bar {
  0% { transform: scaleY(1); }
  4%, 80% { transform: scaleY(.2); }
  90%, 100% { transform: scaleY(1); }
}
.editorial-page .closing-cta h2 { font-size: clamp(36px, 4vw, 54px); }
.governance-hero-grid { display: grid; grid-template-columns: 1.12fr 1fr; gap: 70px; align-items: center; }
.governance-opening h1 { font-size: clamp(46px, 4.8vw, 68px); }
.hero-description { margin-top: 26px; max-width: 46ch; }
.governance-opening .motion-stage { background: var(--soft); }
/* Team profiles are the Firm page's primary content. Portraits swap without layout changes. */
.editorial-page .firm-team-section { padding-top: 64px; padding-bottom: 80px; }
.firm-team-heading { display: grid; grid-template-columns: 1fr; gap: 24px; text-align: center; margin-bottom: 48px; }
.firm-team-heading > p { justify-self: center; max-width: 760px; font-size: 17px; line-height: 1.7; }
/* Five profile cards and a firm statement form two complete rows. Each card gives the portrait,
   identity and bio one shared content width. DOM order is also the tablet and phone reading order. */
.firm-team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; align-items: stretch; }
.firm-team-grid .team-profile { padding: 24px; border: 1px solid var(--card-line); border-radius: 16px; background: var(--card); box-shadow: 0 2px 6px rgba(18, 43, 34, .06); }
.team-portrait { position: relative; overflow: hidden; width: 100%; border-radius: 10px; background: var(--soft); aspect-ratio: 4 / 5; }
.firm-team-grid .team-portrait img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 0; }
.editorial-page .firm-team-grid .profile-name { font-size: 26px; line-height: 1.2; margin-bottom: 8px; }
.firm-team-grid .profile-role { grid-column: 1 / -1; color: var(--forest); font-size: 13px; line-height: 1.5; min-height: 39px; }
/* Portrait, identity and bio share both edges inside the card;
   reserve two role lines in multi-column layouts so bios still start together. */
.firm-team-grid .team-profile, .firm-team-grid figcaption { display: flex; flex-direction: column; }
.firm-team-grid figcaption { flex: 1; padding-top: 24px; }
.profile-heading { display: grid; grid-template-columns: minmax(0, 1fr) 44px; column-gap: 12px; width: 100%; margin-bottom: 16px; }
.firm-team-grid .profile-bio { border-top: 1px solid var(--line); padding-top: 18px; margin: 0; color: var(--prose); font-size: 16px; line-height: 1.65; }
/* Beside the name, above the bio: the glyph aligns with the portrait's right edge while the
   44px hit target extends into the card padding. Its focus ring stays inside the card. */
.firm-team-grid .profile-linkedin { display: inline-flex; grid-column: 2; grid-row: 1; justify-self: end; align-self: start; margin: -6px -12px 0 0; padding: 12px; color: var(--ink); }
.firm-team-grid .profile-linkedin svg { display: block; width: 20px; height: 20px; fill: currentColor; }
.firm-team-grid .profile-linkedin:hover { color: var(--forest); }
/* Only LinkedIn is a link. A quiet hover gives the whole profile definition without adding
   a pointer cursor or another keyboard stop. Touch and motion preferences keep the card still. */
.firm-team-grid .team-profile:focus-within { border-color: var(--tile-line); box-shadow: var(--card-shadow); }
@media (hover: hover) and (pointer: fine) {
  .firm-team-grid .team-profile:hover { border-color: var(--tile-line); box-shadow: var(--card-shadow); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html:not([data-motion="paused"]):not([data-motion="reduced"]) .firm-team-grid .team-profile { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
  html:not([data-motion="paused"]):not([data-motion="reduced"]) .firm-team-grid .team-profile:hover { transform: translateY(-3px); }
}
/* A bridge to the engagement section, using its existing partnership and ownership copy. */
.firm-statement { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-width: 0; padding: 40px 36px; border-radius: 16px; background: var(--pine); color: var(--ivory); }
.firm-statement-copy { position: relative; margin-block: auto; padding-block: 40px; }
.editorial-page .firm-statement h2 { max-width: 14ch; color: var(--ivory); font-size: clamp(32px, 3vw, 42px); line-height: 1.12; text-wrap: balance; }
.firm-statement p { max-width: 28ch; margin-top: 28px; padding-top: 24px; border-top: 1px solid rgb(250 249 245 / 28%); color: var(--ivory); font-size: 16px; line-height: 1.65; }
.firm-statement .text-link { position: relative; align-self: flex-start; max-width: 100%; min-height: 44px; color: var(--ivory); border-color: rgb(250 249 245 / 55%); gap: 12px; }
.firm-statement :focus-visible { outline-color: var(--ivory); }
.firm-statement-lines { position: absolute; z-index: -1; right: 0; bottom: 0; width: 100%; height: auto; color: var(--ivory); opacity: .18; pointer-events: none; }
.firm-engineering { position: relative; }
.firm-engineering .editorial-section-heading { grid-template-columns: 1.3fr 1fr; }
.firm-engineering .editorial-section-heading h2 { font-size: clamp(32px, 3.2vw, 45px); }
.firm-engineering .partnership-commitments { margin-top: 48px; }
.partnership-commitments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.partnership-commitments article { min-width: 0; padding: 28px; border: 1px solid var(--card-line); border-radius: 16px; background: var(--card); box-shadow: var(--card-shadow); }
.partnership-commitments .eyebrow { display: flex; align-items: baseline; gap: 12px; font-size: 11.5px; letter-spacing: .2em; margin-bottom: 22px; }
.partnership-commitments .control-number { color: var(--pine); font-weight: 500; letter-spacing: .1em; }
.partnership-commitments h3 { font-size: 23px; line-height: 1.3; margin-bottom: 14px; text-wrap: balance; }
.partnership-commitments p { font-size: 16px; line-height: 1.7; }
@media (max-width: 1100px) {
  .editorial-hero-grid, .editorial-section-heading, .governance-hero-grid { gap: 42px; }
  .library-layout { gap: 38px; }
  .service-overview { gap: 24px; }
}
@media (max-width: 1023px) {
  .firm-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
  .firm-statement { padding: 32px 28px; }
}
@media (max-width: 850px) {
  .editorial-page .editorial-section { padding-top: 60px; padding-bottom: 60px; }
  .editorial-page .editorial-hero { padding-top: 48px; padding-bottom: 48px; }
  .service-overview { grid-template-columns: 1fr 1fr; gap: 28px 40px; margin-top: 38px; }
  .editorial-section-heading { grid-template-columns: 1fr; gap: 24px; }
  .editorial-section-heading > p, .editorial-section-heading > div:last-child:not(:first-child) { justify-self: start; max-width: 620px; }
  .library-layout { grid-template-columns: 1fr; gap: 32px; }
  .library-evidence { max-width: 620px; width: 100%; }
  .governance-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .governance-opening .evidence-figure { max-width: 620px; width: 100%; }
  .firm-engineering .editorial-section-heading { grid-template-columns: 1fr; }
  .partnership-commitments { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 700px) {
  /* Switch before card padding squeezes the names and bios into narrow columns. */
  .firm-team-grid { grid-template-columns: 1fr; gap: 24px; }
  .firm-team-grid > * { width: 100%; max-width: 460px; justify-self: center; }
  .firm-team-grid .profile-role { min-height: 0; }
}
@media (max-width: 600px) {
  .editorial-page .editorial-section { padding-top: 48px; padding-bottom: 48px; }
  .editorial-page .editorial-hero { padding-top: 34px; padding-bottom: 44px; }
  .editorial-page h1 { font-size: clamp(42px, 11vw, 54px); }
  .editorial-page h2 { font-size: clamp(32px, 8.5vw, 40px); }
  .editorial-page .eyebrow { margin-bottom: 18px; }
  .editorial-hero-grid { grid-template-columns: 1fr; gap: 26px; }
  .editorial-intro { justify-self: start; }
  .editorial-intro p, .hero-description { font-size: 16px; }
  .service-overview { gap: 26px 24px; }
  .service-overview h2 { font-size: 23px; }
  .service-overview p { font-size: 15px; }
  .service-overview .text-link { font-size: 13px; gap: 7px; }
  .service-overview .text-link svg { width: 16px; }
  .library-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .library-nav a { font-size: 14px; min-height: 46px; }
  .library-panel > h3 { font-size: 26px; }
  .editorial-page .library-item h4 { font-size: 19px; }
  .motion-poster { margin: 0 20px; height: 90px; }
  .evidence-content { padding: 22px 20px; }
  .evidence-content h3, .evidence-content h2 { font-size: 25px; }
  .evidence-record > div { grid-template-columns: .8fr 1.2fr; gap: 15px; }
  .evidence-content .eyebrow { font-size: 10px; }
  .evidence-gate { padding: 14px; }
  .evidence-gate strong { font-size: 14px; }
  .lifecycle-sequence { grid-template-columns: 1fr; gap: 0; padding: 0; }
  .lifecycle-sequence li { display: flex; gap: 22px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 19px; }
  .lifecycle-sequence span { margin: 0; }
  .has-scene .lifecycle-sequence { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .has-scene .lifecycle-sequence li { display: block; padding: 0; border-bottom: 0; font-size: 14px; }
  .has-scene .lifecycle-sequence span { margin: 0 0 4px; font-size: 11px; }
  .has-scene .lifecycle-step { padding: 4px 0; }
  .editorial-page .firm-team-section { padding-top: 34px; padding-bottom: 48px; }
  .firm-team-heading { gap: 18px; margin-bottom: 32px; }
  .firm-team-heading > p { max-width: 36ch; font-size: 16px; }
  .firm-statement { padding: 32px 28px; }
  .firm-statement-copy { margin: 0; padding: 0 0 28px; }
  .firm-statement-lines { width: 75%; }
  .firm-engineering .partnership-commitments { margin-top: 32px; }
  .partnership-commitments article { padding: 24px; }
}
@media (max-width: 520px) {
  /* Too narrow to compose: the same cards stack and the connectors drop out. */
  .evidence-scene { padding: 0; display: grid; gap: 12px; }
  .evidence-paper, .evidence-link { display: none; }
  .evidence-source, .evidence-target { position: static; width: 100%; }
  .evidence-card { margin-left: 0; width: 100%; }
}
@media (max-width: 360px) {
  .has-scene .lifecycle-sequence li { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .editorial-page .motion-mount { display: none; }
  .editorial-page .motion-stage[data-motion-ready="true"] .motion-poster { visibility: visible; }
  .lifecycle-stage canvas { display: none; }
  .lifecycle-stage[data-motion-ready="true"] img { visibility: visible; }
  .has-scene .lifecycle-sequence li { transition: none; }
}
@media print {
  .editorial-page .library-panel[hidden], .evidence-slot[hidden] { display: block !important; }
  .library-nav, .motion-mount, .lifecycle-stage canvas { display: none !important; }
  .motion-poster, .lifecycle-stage img { visibility: visible !important; }
}
/* 2026-09-23: the engagement paper art must not widen the page at phone widths. */
.engagement-grid.has-art { overflow-x: clip; }