/* Opsmarshal homepage v3: modern bohemian craft over a working GTM stack.
   Layout concept: sections alternate ink and paper; each carries one real artefact (flow, plant plate, Gantt, charts)
   and, where it earns its place, one illustrated scene on a plate of the opposite tone. A gold thread runs down the
   left gutter. Radius lock: 10px for controls and small cards, 16px for plates and large cards.
   Everything is scoped under .lp / .lp-* so the shared sub-page stylesheet is untouched. */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500 800;font-display:swap;src:url(/fonts/BricolageGrotesque-latin.85f55a58a3.woff2) format('woff2');}
@font-face{font-family:'Caveat';font-style:normal;font-weight:500 700;font-display:swap;src:url(/fonts/Caveat-subset.a8415c8428.woff2) format('woff2');}

:root {
  --ink: #07080C; --ink-2: #0F1116; --ink-3: #171A22;
  --paper: #F3EADB; --paper-2: #E9DDC6; --paper-3: #EFE4D0;
  --clay: #C65D3B; --clay-d: #9E4326; --clay-l: #E0714D;
  --lp-gold: #C8962A; --lp-gold-b: #E8B84B; --lp-gold-d: #5A3C06;
  --disp: 'Bricolage Grotesque', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hand: 'Caveat', 'Bradley Hand', cursive;
  --r: 10px; --r-lg: 16px;
  --pad: clamp(64px, 9vw, 124px);
}
html { scroll-padding-top: 92px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.lp-body { background: var(--ink); }

/* section tones: children read their colours from these tokens */
.is-dark { --bg: #07080C; --fg: #F5F0E8; --fg2: #A0A4B2; --rule: #2A2D3A; --card: #0F1116; --card2: #171A22; --acc: #E0714D; --gt: #E8B84B; background: var(--bg); color: var(--fg); }
.is-paper { --bg: #F3EADB; --fg: #1B1714; --fg2: #5B4F43; --rule: #CDBE9F; --card: #E9DDC6; --card2: #EFE4D0; --acc: #9E4326; --gt: #5A3C06; background: var(--bg); color: var(--fg); }

.lp { position: relative; }
.lp-wrap { max-width: 1140px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px); }
.lp-sec { position: relative; padding-block: var(--pad); }
.lp-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* skip link */
.lp-skip { position: fixed; left: 16px; top: -64px; z-index: 1200; background: var(--lp-gold-b); color: var(--ink); padding: 10px 16px; border-radius: var(--r); font-weight: 700; }
.lp-skip:focus { top: 12px; }

/* nav stays shared; keep it compact */
.nav { padding-block: 12px; }
.nav .nav-cta .btn, .nav .nav-cta a { padding-block: 10px; }
/* mobile menu: markup and open/close live in the shared main.js; this sets the look and the touch sizes.
   Rows fit one screen from about 640px tall, the close button stays pinned, nothing scrolls sideways. */
.mobile-menu { z-index: 1100; gap: 0; padding: calc(env(safe-area-inset-top, 0px) + 72px) 24px calc(env(safe-area-inset-bottom, 0px) + 28px); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.mobile-menu > * { flex: none; }
.mobile-menu a { display: flex; align-items: center; min-height: clamp(46px, 7.4vh, 56px); padding: 6px 0; font-size: 1.2rem; line-height: 1.25; }
.mobile-menu a.btn-primary { color: var(--ink); }
.mobile-menu .btn { margin-top: 20px; min-height: 56px; padding: 12px 24px; }
.mobile-close { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 10px); right: 14px; z-index: 1; width: 48px; height: 48px; padding: 0; display: grid; place-items: center; line-height: 1; font-size: 2rem; border-radius: 50%; background: var(--black); }
html:has(.mobile-menu.open) { overflow: hidden; }
body:has(.mobile-menu.open) .nav-toggle { visibility: hidden; }
@media (hover: none) {
  .mobile-menu a:hover { padding-left: 0; color: var(--text-secondary); }
  .mobile-menu a.btn-primary:hover { color: var(--ink); }
}
@media (max-height: 520px) and (min-width: 520px) {
  .mobile-menu.open { flex-flow: row wrap; align-content: flex-start; column-gap: 28px; padding-top: calc(env(safe-area-inset-top, 0px) + 64px); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); }
  .mobile-menu a { flex: 0 0 calc(50% - 14px); min-height: 44px; }
  .mobile-menu .btn { flex: 0 0 100%; margin-top: 14px; }
}

/* the continuous thread, in the left gutter on wide screens */
@media (min-width: 1280px) {
  .lp::before { content: ""; position: absolute; inset-block: 0; left: 6px; width: 76px; z-index: 1; pointer-events: none;
    background: url(/art/thread-rail.92c6009202.svg) repeat-y top center / 76px auto; opacity: .85; }
}

/* type */
.lp-eyebrow { font: 700 .72rem/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gt); margin: 0 0 14px; }
.lp-h1 { font: 800 clamp(2.1rem, 5.2vw, 4.3rem)/1.02 var(--disp); letter-spacing: -.028em; margin: 0; text-wrap: balance; }
.lp-gold { color: var(--gt); }
.lp-nw { white-space: nowrap; }
.lp-h2 { font: 700 clamp(1.75rem, 3.3vw, 2.75rem)/1.06 var(--disp); letter-spacing: -.022em; margin: 0; text-wrap: balance; }
.lp-lede { margin: 16px 0 0; max-width: 58ch; color: var(--fg2); font-size: clamp(1rem, 1.15vw, 1.1rem); line-height: 1.66; }
.lp-sub { margin: 0; max-width: 46ch; color: var(--fg2); font-size: clamp(1.02rem, 1.3vw, 1.18rem); line-height: 1.6; }
.lp-small { margin-top: 14px; font-size: .92rem; line-height: 1.6; color: var(--fg2); max-width: 60ch; }
.lp-fact { margin-top: 18px; font-weight: 600; color: var(--fg); max-width: 54ch; line-height: 1.55; }
.lp-note { margin-top: 22px; color: var(--fg2); max-width: 56ch; line-height: 1.6; }
.lp-head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }
.lp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.lp-actions .btn { white-space: nowrap; }

/* buttons on paper */
.is-paper .btn-ghost { color: var(--fg); border-color: var(--fg); background: transparent; }
.is-paper .btn-ghost:hover { background: var(--fg); color: var(--paper); }
.is-dark .btn-ghost { color: var(--lp-gold-b); }
.btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible, .lp-artscroll:focus-visible { outline: 2px solid var(--lp-gold-b); outline-offset: 3px; }
.is-paper .btn:focus-visible, .is-paper a:focus-visible, .is-paper button:focus-visible, .is-paper summary:focus-visible, .is-paper .lp-artscroll:focus-visible { outline-color: var(--clay-d); }

/* ---- hero ---- */
.lp-hero { padding-top: clamp(96px, 11vw, 128px); padding-bottom: clamp(36px, 5vw, 64px); }
.lp-herotop { padding-bottom: clamp(8px, 1.5vw, 20px); }
.lp-herogrid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 4vw, 56px); align-items: start; }
.lp-herocopy { padding-top: clamp(0px, 3vw, 40px); }
.lp-heroart-svg { overflow: visible; }
.lp-proof { margin-top: clamp(36px, 5vw, 64px); display: grid; gap: 18px; border-top: 1px solid var(--rule); padding-top: 28px; }
.lp-stats { display: flex; flex-wrap: wrap; gap: 18px clamp(28px, 5vw, 64px); margin: 0; }
.lp-stats div { display: grid; gap: 2px; }
.lp-stats dt { font: 800 clamp(1.6rem, 2.6vw, 2.2rem)/1 var(--disp); color: var(--gt); letter-spacing: -.02em; }
.lp-stats dd { margin: 0; color: var(--fg2); font-size: .9rem; }
.lp-tools { margin: 0; color: var(--fg2); font-size: .88rem; line-height: 1.7; max-width: 92ch; }
.lp-tools span { display: block; font: 700 .7rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 4px; color: var(--gt); }

/* hand-offs: arches rise from one tone into the next */
.lp-handoff { line-height: 0; overflow: hidden; }
.lp-handoff.from-dark { background: var(--ink); }
.lp-handoff.from-paper { background: var(--paper); }
.lp-handoff svg { display: block; width: 100%; height: clamp(52px, 7vw, 96px); }
.lp-handoff svg { --gold: #C8962A; --goldt: #C8962A; --acc: #C65D3B; --acct: #C65D3B; --hatch: #8F6210; --txt: #1B1714; --txt2: #5B4F43; }
.lp-handoff.to-paper svg { --card: #F3EADB; --line: #8F6210; --bg: #07080C; }
.lp-handoff.to-dark svg { --card: #07080C; --line: #C8962A; --bg: #F3EADB; }

/* wide diagrams: whole on desktop, swipeable on phones */
.lp-artscroll { overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; border-radius: var(--r); }
.lp-artscroll > svg { display: block; width: 100%; height: auto; }
.lp-charttitle { margin: 0 0 12px; font: 700 clamp(1.15rem, 1.8vw, 1.45rem)/1.2 var(--disp); }
.lp-hint { display: none; margin: 8px 0 0; font: 700 .7rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg2); }
@media (max-width: 900px) {
  .lp-artscroll > svg { min-width: var(--minw, 720px); }
  .lp-hint { display: block; }
}
/* the wobble filter is a rendering cost with no payoff on small or touch screens, and it re-runs while the hero draws */
@media (max-width: 900px), (hover: none) { .lp svg [filter] { filter: none; } }
.js .lp-hero.run:not(.done) .lp-heroart-svg [filter] { filter: none; }

/* plates: illustrated scenes sit on a card of the opposite tone */
.lp-plate { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--rule); }
.lp-plate.is-dark { background: var(--ink); border-color: #2A2D3A; }
.lp-plate.is-paper { background: var(--paper); border-color: #CDBE9F; }
.lp-plate svg { display: block; width: 100%; height: auto; }
.lp-scene { aspect-ratio: 1000 / 680; }
.lp-lazy:empty { background: repeating-linear-gradient(35deg, transparent 0 6px, color-mix(in srgb, var(--rule) 45%, transparent) 6px 7px); }
.lp-plate-night .lp-scene { aspect-ratio: 1000 / 600; }
.lp-plate-map .lp-scene { aspect-ratio: 1000 / 640; }
.lp-plate-balloon .lp-scene { aspect-ratio: 1000 / 620; }
.lp-plate-loom .lp-scene { aspect-ratio: 1000 / 700; }

/* ---- moments ---- */
.lp-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.lp-sticky { position: sticky; top: 104px; }
.lp-tablist { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-tab { font: 500 .92rem/1.2 var(--font-sans); padding: 11px 15px; border: 1px solid var(--rule); border-radius: var(--r); background: transparent; color: var(--fg2); cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.lp-tab:hover { border-color: var(--fg); color: var(--fg); }
.lp-tab:active { transform: scale(.98); }
.lp-tab[aria-selected="true"] { border-color: var(--clay-d); color: var(--fg); background: color-mix(in srgb, var(--clay) 14%, transparent); }
.lp-panels { margin-top: 20px; }
.lp-panel { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(18px, 3vw, 32px); align-items: center; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--card); }
.lp-panel[hidden] { display: none; }
.lp-panel + .lp-panel { margin-top: 12px; }
.lp-panel .lp-vig { grid-row: 1 / span 2; aspect-ratio: 320 / 240; border-radius: var(--r); overflow: hidden; }
.lp-panel .lp-vig svg { display: block; width: 100%; height: auto; }
.lp-quote { margin: 0; font: 700 clamp(1.15rem, 1.8vw, 1.5rem)/1.28 var(--disp); letter-spacing: -.01em; align-self: end; }
.lp-start { margin: 0; color: var(--fg2); line-height: 1.6; align-self: start; }
.lp-start span { display: block; font: 700 .7rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gt); margin-bottom: 4px; }
.lp-notab { display: none; }
html:not(.js) .lp-tablist { display: none; }
html:not(.js) .lp-notab { display: block; grid-column: 1 / -1; margin: 0; font: 700 .72rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gt); }
.lp-trigfoot { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
@media (min-width: 961px) { .lp-panels { min-height: 330px; } }
.lp-panel:focus-visible { outline: 2px solid var(--clay-d); outline-offset: 3px; }

/* ---- problems ---- */
.lp-problist { list-style: none; margin: clamp(28px, 4vw, 44px) 0 0; padding: 0; display: grid; gap: 18px; }
.lp-prob { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; max-width: 760px; padding-block: 18px; border-top: 1px solid var(--rule); }
.lp-prob:nth-child(2) { margin-left: clamp(0px, 7vw, 96px); }
.lp-prob:nth-child(3) { margin-left: clamp(0px, 14vw, 192px); }
.lp-pnum { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--clay-l); color: var(--clay-l); font: 700 .95rem var(--disp); }
.lp-prob h3 { margin: 0; font: 700 1.25rem/1.2 var(--disp); }
.lp-prob p { margin: 8px 0 0; color: var(--fg2); line-height: 1.65; max-width: 62ch; }

/* ---- model ---- */
.lp-modelgrid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.lp-plant { position: sticky; top: 104px; }
.lp-lwhat { margin: 4px 0 0; color: var(--fg); line-height: 1.5; font-size: .95rem; }
.lp-layerlist { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 0; }
.lp-layer { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 12px; padding-block: 14px; border-top: 1px solid var(--rule); }
.lp-lnum { font: 800 1.4rem/1 var(--disp); color: var(--gt); }
.lp-layer strong { font: 700 1.05rem var(--disp); }
.lp-lbreak { margin: 4px 0 0; color: var(--fg2); line-height: 1.55; font-size: .95rem; }
.lp-lbreak span { font: 700 .7rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--acc); margin-right: 8px; }

/* ---- services ---- */
.lp-svchead { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin-bottom: clamp(32px, 5vw, 56px); }
.lp-svcgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.lp-svc { grid-column: span 12; display: flex; flex-direction: column; gap: 12px; padding: clamp(22px, 3vw, 32px); background: var(--card2); border: 1px solid var(--rule); border-radius: var(--r-lg); }
.lp-svc h3 { margin: 0; font: 700 1.2rem/1.2 var(--disp); }
.lp-svc p { margin: 0; color: var(--fg2); line-height: 1.6; }
.lp-svc ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 7px; color: var(--fg); font-size: .95rem; }
.lp-svc li { position: relative; padding-left: 20px; }
.lp-svc li::before { content: ""; position: absolute; left: 0; top: .6em; width: 10px; height: 2px; background: var(--lp-gold); }
.lp-svc .btn { align-self: flex-start; margin-top: auto; }
.lp-svc-big { border-color: var(--lp-gold); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center; }
.lp-svc-text { display: flex; flex-direction: column; gap: 12px; }
.lp-svc-big h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
.lp-svcart svg { display: block; width: 100%; height: auto; }
@media (min-width: 961px) {
  .lp-svc-big { grid-column: 1 / -1; }
  .lp-svc:not(.lp-svc-big) { grid-column: span 6; }
  .lp-svc:last-child { grid-column: 1 / -1; }
  .lp-svc:last-child ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; }
}
@media (max-width: 960px) {
  .lp-svc-big { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 641px) and (max-width: 960px) {
  .lp-svc:not(.lp-svc-big) { grid-column: span 6; }
  .lp-svc:last-child { grid-column: span 12; }
}
.lp-svcart .lp-artscroll { border-radius: 0; }

/* ---- agents ---- */
.lp-agenthead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin-bottom: clamp(28px, 4vw, 48px); }
.lp-steps { list-style: none; margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px 24px; }
.lp-step { border-top: 2px solid var(--fg); padding-top: 14px; }
.lp-snum { display: block; width: 28px; height: 3px; background: var(--lp-gold); margin-bottom: 12px; border-radius: 2px; }
.lp-step h3 { margin: 0; font: 700 1.02rem/1.25 var(--disp); }
.lp-step p { margin: 8px 0 0; color: var(--fg2); font-size: .92rem; line-height: 1.6; }

/* ---- terminal ---- */
.lp-termgrid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.lp-ttstats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 36px; margin-top: 26px; max-width: 460px; }
.lp-ttstats div { display: grid; gap: 2px; }
.lp-ttstats strong { font: 800 clamp(1.5rem, 2.6vw, 2.1rem)/1 var(--disp); color: var(--gt); }
.lp-ttstats span { font-size: .85rem; color: var(--fg2); }
.lp-archpic { margin: 0; max-width: 440px; justify-self: center; width: 100%; }
.lp-archpic svg { display: block; width: 100%; height: auto; }
.lp-archpic figcaption:not(.lp-sr) { margin-top: 10px; text-align: center; font: 700 .7rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg2); text-wrap: balance; }

/* ---- process ---- */
.lp-procchead { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin-bottom: clamp(28px, 4vw, 48px); }
.lp-pstepslist { list-style: none; margin: clamp(28px, 4vw, 44px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px 32px; }
.lp-pstep { border-top: 2px solid var(--fg); padding-top: 14px; }
.lp-pstep h3 { margin: 6px 0 0; font: 700 1.2rem var(--disp); }
.lp-pstep p { margin: 8px 0 0; color: var(--fg2); line-height: 1.6; font-size: .95rem; }
.lp-ptag { font: 700 .7rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--acc); }

/* ---- results ---- */
.lp-resgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.lp-res { --fg: #1B1714; --fg2: #5B4F43; --gt: #5A3C06; --acc: #9E4326; background: var(--paper); color: var(--fg); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; }
.lp-resfeat { grid-column: span 6; flex-direction: row; }
.lp-resitem { grid-column: span 3; }
.lp-resitem:last-of-type { grid-column: span 6; flex-direction: row; }
.lp-resitem:last-of-type .lp-chart { flex: 1.1 1 0; min-width: 0; }
.lp-chart { background: var(--paper-2); padding: 12px; }
.lp-resfeat .lp-chart { flex: 1.2 1 0; min-width: 0; }
.lp-chart svg { display: block; width: 100%; height: auto; }
.lp-restext { padding: clamp(18px, 2.4vw, 28px); flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.lp-ctx { margin: 0; font: 700 .7rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--acc); }
.lp-restext h3 { margin: 8px 0 0; font: 700 1.2rem/1.2 var(--disp); }
.lp-restext p:not(.lp-ctx) { margin: 8px 0 0; color: var(--fg2); line-height: 1.6; font-size: .95rem; }
.lp-balloon { margin-top: clamp(28px, 4vw, 48px); }
.lp-results .btn { margin-top: 28px; }

/* ---- about ---- */
.lp-aboutgrid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.lp-aboutcopy p { color: var(--fg2); line-height: 1.7; max-width: 60ch; }
.lp-aboutcopy .lp-h2 { margin-bottom: 18px; }
.lp-bq { margin: 26px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--lp-gold); }
.lp-bq p { margin: 0; font: 600 clamp(1.1rem, 1.6vw, 1.35rem)/1.45 var(--disp); color: var(--fg); }
.lp-bq footer { margin-top: 10px; font-size: .88rem; color: var(--fg2); }
.lp-workbench { margin-top: clamp(40px, 6vw, 72px); }

/* ---- FAQ ---- */
.lp-qs { display: grid; gap: 0; }
.lp-q { border-top: 1px solid var(--rule); }
.lp-q:last-child { border-bottom: 1px solid var(--rule); }
.lp-q summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 4px; cursor: pointer; font: 600 1.05rem/1.35 var(--disp); }
.lp-q summary::-webkit-details-marker { display: none; }
.lp-plus, .lp-plus.faq-toggle { position: relative; flex: none; width: 16px; height: 16px; }
.lp-plus::before, .lp-plus::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--gt); transition: transform .25s; }
.lp-plus::after { transform: rotate(90deg); }
.lp-q[open] .lp-plus::after { transform: rotate(0); }
.lp-q p { margin: 0 0 20px; padding: 0 4px; color: var(--fg2); line-height: 1.7; max-width: 64ch; }

/* ---- close ---- */
.lp-cta { padding-bottom: clamp(40px, 6vw, 72px); }
.lp-ctagrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: center; }
.lp-ctaart svg { display: block; width: 100%; height: auto; }

/* ---- shared footer on this page ---- */
.lp-body .footer { --text-muted: #8A8FA3; }
@media (hover: none), (max-width: 640px) {
  .lp-body .nav-toggle { min-width: 44px; min-height: 44px; }
  .lp-tab, .lp-svc .btn, .lp-trigfoot .btn { min-height: 44px; }
  .lp-body .footer-links a, .lp-body .footer-legal a, .lp-body .footer-email, .lp-body .nav-logo { display: inline-flex; align-items: center; min-height: 44px; }
  .lp-body .footer-links a, .lp-body .footer-legal a { min-width: 44px; }
  .lp-body .social-link { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* ---- motion: reveal once, draw the lead's path once ---- */
@media (prefers-reduced-motion: no-preference) {
  .js .lp-rv { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
  .js .lp-rv.in { opacity: 1; transform: none; }
  .js .lp-panel { animation: lp-fade .4s var(--ease-out); }
  .js .hero-run { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .lp-hero.run .hero-run { animation: lp-draw 1.2s var(--ease-out) forwards; animation-delay: calc(var(--i, 1) * .28s); }
  @keyframes lp-draw { to { stroke-dashoffset: 0; } }
  @keyframes lp-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

/* ---- responsive ---- */
@media (max-width: 960px) {
  .lp-herogrid, .lp-split, .lp-modelgrid, .lp-svchead, .lp-agenthead, .lp-termgrid, .lp-procchead, .lp-aboutgrid, .lp-ctagrid { grid-template-columns: minmax(0, 1fr); }
  .lp-sticky, .lp-plant { position: static; }
  .lp-modelcopy { order: -1; }
  .lp-panel { grid-template-columns: minmax(0, 1fr); }
  .lp-panel .lp-vig { grid-row: auto; }
  .lp-resfeat { flex-direction: column; }
  .lp-resitem, .lp-resitem:nth-last-child(-n+2) { grid-column: span 6; }
  .lp-prob:nth-child(2), .lp-prob:nth-child(3) { margin-left: 0; }
  .lp-archpic { max-width: 320px; }
}
@media (min-width: 640px) and (max-width: 960px) {
  .lp-resitem, .lp-resitem:nth-last-child(-n+2) { grid-column: span 3; }
  .lp-resitem:last-child { grid-column: span 6; }
}
@media (max-width: 480px) {
  .lp-h2 { font-size: 1.6rem; }
  .lp-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .lp-actions .btn { flex: none; justify-content: center; min-height: 52px; white-space: normal; text-align: center; }
}

/* ---- phones and small tablets: readability pass ----
   Rule: nothing renders below 11px. Pictorial art keeps only the picture; text-heavy diagrams give way to the HTML text
   that already carries the same content (plus a few compact lines, shown only here, for what lived only in a diagram).
   Everything below is gated to 900px and under, so wide screens render exactly as before. */
.lp-lab { display: block; margin: 0 0 6px; font: 700 .7rem/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gt); }
.lp-ph, .lp-herocap { display: none; }
@media (max-width: 900px) {
  /* hero art fits the column instead of scrolling; its labels are in the agent section below */
  .lp-heroart .lp-artscroll { overflow: visible; border-radius: 0; }
  .lp-heroart .lp-artscroll > svg { min-width: 0; }
  .lp-heroart .lp-hint { display: none; }
  .lp-herocap { display: block; margin: 12px 0 0; font-size: .88rem; line-height: 1.5; color: var(--fg2); }
  /* pictures only: no text inside hero art, scenes, vignettes or the doorway */
  .lp-heroart svg text, .lp-scene svg text, .lp-vig svg text, .lp-ctaart svg text { display: none; }
  /* result charts: keep the question, the big numbers and the hand notes; drop the small mono labels */
  .lp-chart svg text.mono { display: none; }
  /* boxes and icons that belonged to a hidden label go with it, and the chart drops the empty band under them */
  .lp-chart svg .lp-pill, .lp-heroart svg .lp-pill, .lp-scene svg .lp-pill { display: none; }
  .lp-chart svg { margin-bottom: -7%; }
  /* migration chart: unit words stay readable and clear of the pipe */
  .lp-chart svg text.sans { font-size: 22px; transform: translateY(-3px); }
  .lp-chart svg text.sans + text.sans { transform: translateY(2px); }
  .lp-chart svg text.sans.ta { transform: translateX(-5px); }
}
@media (max-width: 900px) {
  /* the shared nav and footer gutters (18px under 481px) line up with the page gutters */
  .lp-body .container { padding-inline: clamp(20px, 4vw, 40px); }
  .lp-body .footer-col-title { font-size: .75rem; }
}
@media (max-width: 380px) { .lp-chart { padding: 8px; } }
@media (max-width: 640px) {
  .lp-dx, .lp-hint { display: none; }
  .lp-ph { display: block; }

  .lp-flow, .lp-stackline { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--rule); color: var(--fg2); font-size: .98rem; line-height: 1.6; }
  .lp-stackline { margin-top: 4px; font-size: .95rem; }
  .lp-guard { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--rule); display: grid; gap: 24px; }
  .lp-guard ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
  .lp-guard li { position: relative; padding-left: 20px; color: var(--fg2); line-height: 1.5; }
  .lp-guard li::before { content: ""; position: absolute; left: 0; top: .7em; width: 10px; height: 2px; background: var(--lp-gold); }
  .lp-guard strong { color: var(--fg); font-weight: 600; }
  .lp-pstep .lp-ms { margin: 14px 0 0; padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--card2); color: var(--fg); font-size: .92rem; line-height: 1.5; }
  .lp-pstep .lp-ms .lp-lab { margin-bottom: 2px; }

  /* one column, calm rhythm */
  .lp-h1 { font-size: clamp(1.4rem, 8.2vw, 2.1rem); }
  .lp-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
  .lp-stats dd { font-size: .88rem; line-height: 1.4; }
  .lp-resitem:last-of-type { flex-direction: column; }
  .lp-resitem:last-of-type .lp-chart { flex: none; }
}

@media print { .js .lp-rv { opacity: 1 !important; transform: none !important; } .lp::before { display: none; } .lp-artscroll { overflow: visible; } .lp-artscroll > svg { min-width: 0; } }