/* Plumbline Construction (#plumbline). The base rules are the plain list (reduced motion, a short landscape phone, or a page
   whose script never ran): the heading, the contract, the nine links with their sentences, then the last beat. With motion
   allowed and a tall enough screen, plumbline-story.mjs sets data-pin and this stylesheet makes one sticky stage: the
   picture fills the stage, and one caption at a time sits in a column at its left, clear of the scenes. Phones give the picture the
   top half and the caption the bottom half. The track is the stage plus nine units of scroll (the script measures the
   pace from it). Only transforms, opacity and stroke-dashoffset animate. */
.pl-section{--pl-bg:#050607;--pl-ink:#fbf7ff;--pl-soft:#c1b4d0;--pl-deep:#030405;--pl-accent:#ffb020;--pl-rule:#35414a;--pl-x:var(--mish-gutter,20px);--pl-nav:48px;--pl-foot:26px;--pl-stage:calc(100svh - var(--mish-header-h,64px));position:relative;box-sizing:border-box;color:var(--pl-ink);font-family:'JetBrains Mono',ui-monospace,monospace;background:var(--pl-bg)}
.pl-section{padding-bottom:16px} /* links land 16px below the menu bar, so the next section's landing never shows this one's label */
.pl-section .x-nav{position:relative;z-index:3}
.pl-section .pl-label{margin:0;font-size:11px;line-height:1.5;color:var(--pl-soft);letter-spacing:.02em}
.pl-section .pl-intro h2{margin:0;font-family:inherit;font-size:clamp(28px,3.2vw,50px);line-height:1.05;font-weight:800;letter-spacing:-.02em;text-transform:uppercase;text-wrap:balance}
.pl-section .pl-lede{margin:14px 0 0;font-size:clamp(15px,1.4vw,20px);line-height:1.5;max-width:44ch}
.pl-section .pl-step h3{overflow-wrap:anywhere;margin:0;font-size:clamp(22px,2.4vw,40px);line-height:1.1;font-weight:800;letter-spacing:-.01em;text-wrap:balance}
.pl-section .pl-step p{margin:10px 0 0;max-width:52ch;font-size:clamp(15px,1.3vw,20px);line-height:1.5}
.pl-section .pl-contract{margin:18px 0 0;padding:0;list-style:none;font-size:13px;line-height:1.6;color:var(--pl-soft)}
.pl-section .pl-links{list-style:none;margin:0;padding:0}
.pl-section .pl-btn{display:inline-block;margin-top:16px;padding:12px 18px;border:2px solid var(--pl-accent);background:var(--pl-accent);color:var(--pl-bg);font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.pl-section .pl-diag{margin:0 0 22px;background:none!important;background-image:none!important;border:0;padding:0}
.pl-section .cm-field{display:none}
/* The plain list keeps the heading first: the diagnosis follows the last beat, with the same side margins. */
.pl-section:not([data-pin]) .pl-stage{display:flex;flex-direction:column}
.pl-section:not([data-pin]) .pl-cap{order:1}
.pl-section:not([data-pin]) .pl-diag{order:2;margin:0 var(--pl-x) 40px;max-width:none}
.pl-section .pl-diag::before,.pl-section .pl-diag::after{content:none;display:none}
.pl-section .pl-diag .diagnosis{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 26px;max-width:62ch}
.pl-section .pl-diag dt{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--pl-accent)}
.pl-section .pl-diag dd{margin:0;font-size:14px;line-height:1.45}
.pl-section .pl-diag .diagnosis-tag{margin:10px 0 0;font-size:11px;color:var(--pl-soft)}
.pl-section .local-ai{display:block;margin-top:18px;padding:14px 16px;max-width:62ch;font-size:12px;line-height:1.5;background:var(--pl-deep);border:1px solid var(--pl-rule)}
.pl-section .pl-view{display:none}
.pl-section .pl-thread{display:none}
.pl-section .pl-cap{display:grid;gap:28px;padding:clamp(28px,4vw,56px) var(--pl-x)}
.pl-section .pl-step{padding:0}
.pl-section:not([data-pin]) .pl-links{display:grid;gap:24px}
.pl-section .pl-last{margin-top:8px}

/* The picture fills the stage under the nav; the caption has the left-hand column. */
.pl-section[data-pin] .pl-track{height:calc(var(--pl-stage) + 9 * min(300px, max(260px, (3560px - var(--pl-stage)) / 9)))}
.pl-section[data-pin] .pl-stage{position:sticky;top:var(--mish-header-h,64px);height:var(--pl-stage);overflow:hidden;background:var(--pl-bg)}
.pl-section[data-pin] .x-nav{position:absolute;top:0;left:0;right:0;height:var(--pl-nav);min-height:0;box-sizing:border-box;padding-block:0;align-items:center}
.pl-section[data-pin] .pl-view{display:block;position:absolute;left:0;right:0;top:var(--pl-nav);bottom:var(--pl-foot);overflow:hidden;background:var(--pl-bg)}
.pl-section[data-pin] :is(.pl-svg,.pl-canvas){position:absolute;inset:0;width:100%;height:100%;display:block}
.pl-section[data-pin] .pl-cap{display:block;position:absolute;z-index:2;left:var(--pl-x);top:calc(var(--pl-nav) + 40px);bottom:calc(var(--pl-foot) + 22px);width:min(31%,780px)}
.pl-section[data-pin] .pl-step{position:absolute;left:0;right:0;bottom:0;opacity:0;pointer-events:none;padding:0;will-change:opacity,transform}
/* With the whole chain across the top of the stage, the last two captions can run wider beneath it. */
.pl-section[data-pin] .pl-step:is([data-pl-step="8"],[data-pl-step="9"]){right:auto;width:min(760px,62vw)}
/* The caption's column: the grid fades out behind the words, until the pull-back needs the full width. */
.pl-section[data-pin] .pl-view::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--pl-bg),var(--pl-bg) 24%,transparent 38%);opacity:var(--pl-side,1)}
.pl-section[data-pin] .pl-intro{opacity:1}
.pl-section[data-pin] .pl-step p{max-width:62ch}
.pl-section[data-pin] .pl-contract,.pl-section[data-pin] .pl-diag,.pl-section[data-pin] .local-ai{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pl-section[data-pin] .pl-label{position:absolute;left:0;right:0;bottom:0;z-index:3;height:var(--pl-foot);line-height:var(--pl-foot);margin:0;padding:0 var(--pl-x);background:var(--pl-deep);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-section[data-pin] .pl-thread{display:flex;position:absolute;left:var(--pl-x);bottom:calc(var(--pl-foot) + 8px);z-index:2;gap:6px;margin:0;padding:0;list-style:none}
.pl-section[data-pin] .pl-thread li{width:22px;height:4px;border-radius:2px;background:var(--pl-rule);transition:background .3s ease}
.pl-section[data-pin] .pl-thread li.is-on{background:var(--pl-accent)}
.pl-section[data-pin] .pl-intro h2{font-size:clamp(26px,min(3.2vw,5.6svh),72px)}
.pl-section[data-pin] .pl-intro .pl-lede{font-size:clamp(14px,min(1.3vw,2.4svh),26px)}
.pl-section[data-pin] .pl-step h3{font-size:clamp(22px,min(2.3vw,4.2svh),56px)}
.pl-section[data-pin] .pl-step p{font-size:clamp(14px,min(1.3vw,2.4svh),26px)}
.pl-section[data-pin] .pl-last .pl-btn{margin-top:12px}

/* The picture's line work, in the site's own colours: light lines on the dark stage, amber for what the chain has done. */
.pl-svg .ln{fill:none;stroke:#fbf7ff;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.pl-svg .wood{fill:#1a1d21;stroke:#fbf7ff;stroke-width:1}
.pl-svg .road{fill:none;stroke:#89929e;stroke-width:1.1;stroke-dasharray:4 4}
.pl-svg .pin{fill:#ffb020;stroke:#ffb020;stroke-width:1}
.pl-svg .amber{fill:none;stroke:#ffb020;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pl-svg .amber-fill{fill:#ffb020}
.pl-svg .ink{fill:none;stroke:#050607;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pl-svg .scr{fill:#1a1d21}
.pl-svg .glow{fill:#ffb020}
.pl-svg .win{fill:none;stroke:#ffb020;stroke-width:2}
.pl-svg .fuse{fill:none;stroke:#ffb020;stroke-width:5;stroke-linecap:round}
.pl-svg .track{fill:none;stroke:#35414a;stroke-width:5;stroke-linecap:round}
.pl-svg .dot{fill:#050607;stroke:#89929e;stroke-width:2.5}
.pl-svg .dot.on{fill:#ffb020;stroke:#ffb020}
.pl-svg .rl{font:700 15px 'JetBrains Mono',ui-monospace,monospace;fill:#89929e;text-anchor:middle}
.pl-svg .rl.on{fill:#fbf7ff}
.pl-svg .head{fill:#fff4d6;stroke:#ffb020;stroke-width:3}
.pl-svg .tx{font:500 7.5px 'JetBrains Mono',ui-monospace,monospace;fill:#fbf7ff}
.pl-svg .tx.big{font-size:9px;font-weight:800}
.pl-svg .tx.small{font-size:6.5px;font-weight:800;fill:#ffb020}
.pl-svg .tx.lab{font-size:7px;font-weight:800;fill:#ffb020}
.pl-svg .draw{stroke-dasharray:1 1}
/* A scene draws itself as it comes up: --d runs from 1 to 0 on its group. */
.pl-svg .ln:not(.draw),.pl-svg .wood{stroke-dasharray:1 1;stroke-dashoffset:var(--d,0)}
.pl-svg .wood,.pl-svg .scr{fill-opacity:calc(1 - var(--d,0))}
.pl-svg .tx:not([data-k]){opacity:calc(1 - var(--d,0))}
/* Plumbline's picture sits right of the caption column on a plain stage, with no progress dashes (the row of dots is the progress).
   The picture and the firm's nav are not text to select; the captions select as amber words, with no box behind them. */
#plumbline[data-pin] .pl-svg{left:34%;width:61%}
#plumbline[data-pin] .pl-view::after,#plumbline[data-pin] .pl-thread{display:none}
@media (min-width:701px){#plumbline[data-pin] .pl-step:is([data-pl-step="8"],[data-pl-step="9"]){right:0;width:auto}}
#plumbline :is(.pl-view,.x-nav,.pl-label){user-select:none;-webkit-user-select:none}
#plumbline ::selection{background:transparent;color:#ffb020}

@media (max-width:700px){
 .pl-section .x-brand{font-size:13px;letter-spacing:.02em}
 .pl-section .x-links{display:none}
 .pl-section .x-cta{padding:8px 12px;font-size:11px}
 .pl-section[data-pin] .x-nav{height:var(--pl-nav)}
 .pl-section[data-pin] .pl-view{bottom:calc(var(--pl-stage) * .5)}
 .pl-section[data-pin] .pl-cap{left:0;right:0;top:auto;width:auto;bottom:var(--pl-foot);height:calc(var(--pl-stage) * .5 - var(--pl-foot));padding:0 var(--pl-x);box-sizing:border-box}
 .pl-section[data-pin] .pl-view::after{content:none}
 .pl-section[data-pin] .pl-step{top:14px;bottom:auto;left:var(--pl-x);right:var(--pl-x)}
 .pl-section[data-pin] .pl-step:is([data-pl-step="8"],[data-pl-step="9"]){right:var(--pl-x);width:auto}
 .pl-section[data-pin] .pl-label{font-size:11px}
 #plumbline[data-pin] .pl-svg{left:0;width:100%}
 .pl-svg .rl{display:none}
 .pl-section[data-pin] .pl-thread{bottom:calc(var(--pl-stage) * .5 + 8px)}
 .pl-section[data-pin] .pl-intro h2{font-size:clamp(22px,min(7vw,3.4svh),40px)}
 .pl-section[data-pin] .pl-step h3{font-size:clamp(20px,min(6vw,3.2svh),32px)}
 .pl-section[data-pin] .pl-step p{font-size:14px;line-height:1.45}
}
html[data-motion=paused] .pl-section *{transition:none!important;animation:none!important}
@media (prefers-reduced-motion:reduce){.pl-section *{transition:none!important;animation:none!important}}