/* ==========================================================================
   pages-local.css · page group "local" (v3f, 2026-09-30): industries hub + industry pages, locations hub + city pages.
   Linked only by those pages (markup: _build/pages/local.py). Loads after d5.css + d5-kit.css; golden tokens only
   (--fs-*, --sp-1..7, --measure, discs 34 / 55 / 89, objects 89 / 144), lane classes for colour, MOTION attributes for
   reveals. Desktop keeps the calm card language; phones (<= 760px) get open rows, big type and 56px+ targets (round 5).
   CLASS MAP
   Hero ........ .lsub (+ --long: a long SEO H1 one sqrt(phi) step down) .lsub__art (--pic --map) .lsub__pic .lscene .lprom
   Map ......... .lmap (--full --gta) .lmap__base .lmap__lake .lmap__river .lmap__routes (grows out of home once)
                 .lmap__pins .lmap__pin (--home, .is-focus, .is-faint, .lab--l/r/b) .lmap__dot .lmap__lab
   Chat ........ .lhear .lhear__grid .lhear__text .lhear__intro .lchat .lchat__list .lchat__b .lchat__r
   Vines ....... .lvine (kit .kvine with an icon in each node) .lsetup (setup vine) .lareas + .lroute (where we work)
                 .lrows .lrow (.lrow__t .lrow__p) .lstop__pic
   Cards/work .. .lcards (link cards in a centred flow) .lwork (--1 --2 --3) .lproj--wide .proj__static
   Duo ......... .lduo .lduo__grid .lduo__col .lduo__h .lduo__p .lduo__go .lstart (green "starting" panel)
                 .lcities .lcity (city links) .linds .lind (industry links, --1 one column)
   Local ....... .llocal .llocal__grid .llocal__side .llocal__h .llocal__k .lprose (--c) .lslot
   Remote ...... .ltrio .ltrio__i .ltrio__line (draws left to right once)
   ========================================================================== */

/* ---------- hero ---------- */
.lsub .ksub__grid,.lsub.ksub--art .ksub__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-6)}
.lsub h1{max-width:15ch}
.lsub--long h1{font-size:calc(var(--fs-h1) / 1.272);line-height:1.02;max-width:17ch}
.lsub__art{position:relative;justify-self:center;width:100%;max-width:520px}
.lsub__art--pic{max-width:600px}
.lsub__art--map{max-width:560px}
.lsub__pic{margin:0;border-radius:var(--r-xl);overflow:hidden;background:var(--cream);box-shadow:var(--sh-2),0 0 0 1px rgba(22,26,20,.08)}
.lsub__pic img{width:100%;height:auto}
.lsub__note{margin-top:var(--sp-4)}
.lprom{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-4)}
.lprom li{display:inline-flex;align-items:center;gap:var(--sp-1);font:600 var(--fs-sm)/1.35 var(--font);color:var(--ink-2)}
.lprom .ico{color:var(--green)}
.ksub--run .lprom .ico{color:var(--run-icon)}
/* the example screen (build_index.scene) on a soft white stage */
.lscene .scene{min-height:0;aspect-ratio:5/4;padding:var(--sp-5) var(--sp-4);border-radius:var(--r-xl);box-shadow:var(--sh-1);
  background:radial-gradient(120% 90% at 30% 20%,#fff 0,var(--paper) 62%,#fbf6ea 100%)}
.lscene .scene__card{width:100%;max-width:400px;padding:var(--sp-3) var(--sp-3) var(--sp-2)}
.lscene .scene__brand{font-size:var(--fs-sm);padding-bottom:var(--sp-2)}
.lscene .srows{gap:var(--sp-2);margin-top:var(--sp-2)}
.lscene .srow{font-size:var(--fs-body);gap:var(--sp-2)}
.lscene .srow__disc{width:34px;height:34px}
.lscene .mock__tag{font-size:var(--fs-sm)}

/* ---------- the drawn map ---------- */
.lmap{position:relative;width:100%;margin:0;border-radius:var(--r-xl);overflow:hidden;isolation:isolate;
  background:radial-gradient(90% 80% at 20% 15%,#fff 0,var(--paper) 55%,#faf4e6 100%);box-shadow:var(--sh-2),0 0 0 1px rgba(22,26,20,.08)}
.lmap__base,.lmap__routes{position:absolute;inset:0;width:100%;height:100%;display:block}
.lmap__lake{fill:var(--learn-tint);stroke:rgba(42,106,163,.45);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.lmap__river{fill:none;stroke:rgba(42,106,163,.5);stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-linecap:round}
.lmap__lake-t{fill:var(--learn-ink);opacity:.62;font-family:var(--font);font-style:italic;font-weight:600;letter-spacing:.03em}
.lmap__routes path{fill:none;stroke:var(--green);stroke-width:2.25;stroke-dasharray:1 7;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.7}
.lmap__routes path.is-focus{stroke-width:3;stroke-dasharray:1 8;opacity:1}
/* the routes grow out of home once: a stepped circle from Georgetown (clip-path only) */
html.mo .lmap__routes[data-reveal].mo-go{animation:lmap-grow 1100ms steps(8,end) var(--t,0ms) both}
@keyframes lmap-grow{from{clip-path:circle(0 at var(--hx) var(--hy))}to{clip-path:circle(150% at var(--hx) var(--hy))}}
.lmap__pins{position:absolute;inset:0}
.lmap__pin{position:absolute;width:0;height:0}
.lmap__dot{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 3px var(--green)}
.lmap__pin--home .lmap__dot{left:-17px;top:-17px;display:grid;place-items:center;width:34px;height:34px;background:var(--green);color:#fff;
  box-shadow:0 0 0 6px rgba(45,96,64,.16)}
.lmap__pin--home .lmap__dot .ico{--n:21}
.lmap__pin.is-focus .lmap__dot{left:-11px;top:-11px;width:22px;height:22px;background:var(--green);box-shadow:inset 0 0 0 4px #fff,0 0 0 2px var(--green),0 0 0 8px rgba(45,96,64,.14)}
.lmap__pin.is-faint .lmap__dot{left:-4px;top:-4px;width:8px;height:8px;background:rgba(22,26,20,.26);box-shadow:none}
.lmap__lab{position:absolute;top:calc(-.6em - 3px);white-space:nowrap;padding:2px 8px;border-radius:6px;background:rgba(255,253,247,.9);
  font:700 var(--fs-sm)/1.2 var(--font);color:var(--ink)}
.lab--r .lmap__lab{left:12px}
.lab--l .lmap__lab{right:12px}
.lmap__pin--home .lmap__lab{right:26px;font-weight:800;color:var(--green-ink)}
.lmap__pin.is-focus .lmap__lab{left:18px;font-weight:800;color:var(--green-ink)}

/* ---------- "What we hear from ...": the signs as chat bubbles ---------- */
.lhear__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--sp-6);align-items:start}
.lhear__text{position:sticky;top:calc(var(--hd) + var(--sp-5))}
.lhear__intro{margin-top:var(--sp-3);max-width:46ch;font-size:var(--fs-body);line-height:var(--lh);color:var(--ink-2);text-wrap:pretty}
.lchat{display:grid;gap:var(--sp-3);padding-top:var(--sp-1)}
.lchat__list{display:grid;gap:var(--sp-2);justify-items:start}
.lchat__b{max-width:36ch;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-l) var(--r-l) var(--r-l) 6px;background:#fff;box-shadow:var(--sh-1);
  font:550 var(--fs-body)/1.45 var(--font);color:var(--ink);text-wrap:pretty}
.lchat__b:nth-child(even){margin-left:var(--sp-5)}
.sec--cream .lchat__b{background:#fffaf0}
.lchat__r{justify-self:end;display:flex;align-items:flex-end;gap:var(--sp-1);max-width:40ch;margin-top:var(--sp-2)}
.lchat__r>span{padding:var(--sp-2) var(--sp-3);border-radius:var(--r-l) var(--r-l) 6px var(--r-l);background:var(--green);color:#fff;font:650 var(--fs-body)/1.45 var(--font);text-wrap:pretty}
.lchat__r img{flex:none;width:21px;height:21px;margin-bottom:var(--sp-1);order:2}

/* ---------- vines with icon nodes ---------- */
.lvine .lvine__t{font-size:var(--fs-lead);line-height:1.2}
.lvine__node .ico{color:inherit}
.lroute .lvine__t{font-size:var(--fs-h3)}
.lrows{display:grid;margin-top:var(--sp-2);max-width:560px}
.lrow{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--sp-2);align-items:center;min-height:68px;padding:var(--sp-2) 2px;
  box-shadow:0 1px 0 var(--rule);color:var(--ink);text-decoration:none}
.lrow::after{content:"→";grid-column:2;grid-row:1/3;font-weight:700;color:var(--green);transition:transform .18s var(--ease)}
.lrow__t{grid-column:1;font:800 var(--fs-lead)/1.2 var(--font);letter-spacing:-.01em}
.lrow__p{grid-column:1;margin-top:2px;font-size:var(--fs-body);line-height:1.45;color:var(--ink-3)}
.lrow:hover .lrow__t{color:var(--green-ink)}
.lrow:hover::after{transform:translateX(3px)}
.lstop__pic{display:block;max-width:377px;margin-top:var(--sp-3);border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh-1)}
.lstop__pic img{width:100%;height:auto}

/* ---------- cards in a centred flow, work ---------- */
.lcards{display:flex;flex-wrap:wrap;justify-content:center}
.lcards>li{flex:0 1 calc((100% - 2 * var(--sp-3)) / 3)}
.lwork{margin-top:0}
.lwork--2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:980px}
.lwork--1{grid-template-columns:minmax(0,1fr)}
.lproj--wide>a,.lproj--wide>.proj__static{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--sp-5);align-items:center}
.lproj--wide .proj__cap h3{margin-top:0;font-size:var(--fs-h3)}
.proj__static{display:block;color:var(--ink)}
.lworksec .kquote,.lwork+.kquote{margin-top:var(--sp-6)}

/* ---------- duo: where we work + other industries, starting + nearby ---------- */
.lduo__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-6);align-items:start}
.lduo__h{display:flex;align-items:center;gap:var(--sp-2);font:800 var(--fs-h3)/1.15 var(--font);letter-spacing:-.02em;text-wrap:balance}
.lduo__h .disc{background:var(--c-tint);color:var(--c-icon)}
.lduo__h .disc--solid{background:var(--c);color:var(--c-on)}
.lduo__p{margin-top:var(--sp-2);max-width:46ch;font-size:var(--fs-body);line-height:var(--lh);color:var(--ink-2)}
.lduo__go{margin-top:var(--sp-3)}
.lstart{padding:var(--sp-5);border-radius:var(--r-xl);background:var(--start-tint);color:var(--start-ink)}
.lstart .lduo__p{color:var(--start-ink)}
.lstart .go{color:var(--start-ink)}
.lcities{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-top:var(--sp-3)}
.lcity{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 var(--sp-2) 0 var(--sp-1);border-radius:var(--r-pill);background:#fff;box-shadow:var(--sh-1);
  font:650 var(--fs-body)/1 var(--font);color:var(--ink);text-decoration:none;transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.lcity .ico{color:var(--green)}
.lcity:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.sec--cream .lcity{background:#fffaf0}
.linds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--sp-4);margin-top:var(--sp-3)}
.linds--1{grid-template-columns:minmax(0,1fr);max-width:377px}
.lind{display:flex;align-items:center;gap:var(--sp-2);min-height:55px;padding:6px 2px;box-shadow:0 1px 0 var(--rule);font:650 var(--fs-body)/1.25 var(--font);color:var(--ink);text-decoration:none}
.lind .disc{background:var(--c-tint);color:var(--c-icon);transition:background-color .18s,color .18s}
.lind:hover .disc{background:var(--c);color:var(--c-on)}
.lind:hover span:last-child{color:var(--green-ink)}

/* ---------- the city's own words ---------- */
.llocal__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--sp-6);align-items:start}
.llocal__side{position:sticky;top:calc(var(--hd) + var(--sp-5))}
.llocal__h{font-size:var(--fs-h3l);line-height:1.08}
.llocal__h em{font-style:italic;font-weight:700;color:var(--green)}
.llocal__k{margin-top:var(--sp-5);font:750 var(--fs-sm)/1.3 var(--font);color:var(--ink-3)}
.llocal__k+.linds{margin-top:var(--sp-1)}
.lprose{max-width:var(--measure);font-size:var(--fs-body);line-height:var(--lh);color:var(--ink-2)}
.lprose p{text-wrap:pretty}
.lprose p+p{margin-top:var(--sp-3)}
.llocal .lprose p:first-of-type{font-size:var(--fs-lead);line-height:1.5;color:var(--ink)}
.lprose--c{margin:0 auto}
.lslot{padding:var(--sp-4);border-radius:var(--r-l);background:var(--cream);box-shadow:inset 0 0 0 2px var(--rule)}
.lslot p{font-size:var(--fs-body);color:var(--ink-2)}

/* ---------- near or far: calls, shared screens, a client portal ---------- */
.ltrio__wrap{position:relative;max-width:760px;margin:0 auto var(--sp-6);--dz:89px}
.ltrio{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3)}
.ltrio__i{display:grid;justify-items:center;gap:var(--sp-2);text-align:center;font:750 var(--fs-lead)/1.2 var(--font);color:var(--ink)}
.ltrio .disc{background:var(--start-tint);color:var(--start-icon);box-shadow:0 0 0 10px var(--cream)}
.ltrio__line{position:absolute;z-index:0;left:16.7%;right:16.7%;top:calc(var(--dz) / 2 - 1px);border-top:2px dotted rgba(45,96,64,.5)}

/* ---------- phones: one column, open rows, big type, 56px+ targets ---------- */
@media (max-width:980px){
  .lhear__grid,.llocal__grid{grid-template-columns:minmax(0,1fr);gap:var(--sp-4)}
  .lhear__text,.llocal__side{position:static}
  .lduo__grid{gap:var(--sp-5)}
  .lproj--wide>a,.lproj--wide>.proj__static{grid-template-columns:minmax(0,1fr);gap:var(--sp-3)}
}
@media (max-width:760px){
  .lsub .ksub__grid,.lsub.ksub--art .ksub__grid{grid-template-columns:minmax(0,1fr);gap:var(--sp-4)}
  .lsub h1,.lsub--long h1{max-width:none}
  .lsub--long h1{font-size:calc(var(--fs-h1) / 1.13)}
  .lsub__art,.lsub__art--pic,.lsub__art--map{max-width:none}
  .lprom{flex-direction:column;gap:var(--sp-1)}
  .lprom li{align-items:flex-start}
  .lprom .ico{margin-top:2px}
  .lscene .scene{aspect-ratio:auto;padding:var(--sp-4) var(--sp-3)}
  .lscene .scene__card{max-width:100%}
  /* map: on the hub only the home label stays (the route list below names every city in big type) */
  .lmap--full .lmap__pin:not(.lmap__pin--home) .lmap__lab{display:none}
  .lmap__pin--home .lmap__lab{right:auto;left:-2.6em;top:22px}
  .lmap__lake-t{display:none}
  .lmap--gta .lmap__pin--home .lmap__lab{left:-2.6em}
  .lchat__b{max-width:none}
  .lchat__b:nth-child(even){margin-left:var(--sp-4)}
  .lchat__r{max-width:none;margin-left:var(--sp-4)}
  .lvine .lvine__t,.lroute .lvine__t{font-size:var(--fs-lead)}
  .lrow{min-height:4rem}
  .lrow__t{font-size:var(--fs-lead)}
  .lstop__pic{max-width:none}
  .lcards{display:grid}
  .lcards>li{flex:none}
  .lwork--2{grid-template-columns:minmax(0,1fr)}
  .lduo__grid{grid-template-columns:minmax(0,1fr);gap:var(--sp-5)}
  .lduo__h{font-size:var(--fs-lead)}
  .lstart{padding:var(--sp-4) var(--sp-3);border-radius:var(--r-l)}
  /* city links: an open two-column list (no pills on phones) */
  .lcities{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,8em),1fr));column-gap:var(--sp-3);row-gap:0}
  .lcity{min-height:3.5rem;padding:0 2px;border-radius:0;background:none;box-shadow:0 1px 0 var(--rule)}
  .sec--cream .lcity{background:none}
  .lcity:hover{transform:none;box-shadow:0 1px 0 var(--rule)}
  .linds{grid-template-columns:minmax(0,1fr)}
  .linds--1{max-width:none}
  .lind{min-height:3.75rem}
  .llocal__h{font-size:var(--fs-h2)}
  .llocal .lprose p:first-of-type{font-size:var(--fs-lead)}
  /* phones: the three ways become a short vertical chain (disc, label), joined by a dotted line */
  .ltrio__wrap{--dz:55px;width:max-content;max-width:100%;margin:0 auto var(--sp-5)}
  .ltrio{grid-template-columns:minmax(0,1fr);gap:var(--sp-3)}
  .ltrio .disc--xl{--d:55}
  .ltrio .disc--xl .ico{--n:28}
  .ltrio .disc{box-shadow:0 0 0 8px var(--cream)}
  .ltrio__i{grid-template-columns:auto minmax(0,1fr);justify-items:start;align-items:center;gap:var(--sp-3);text-align:left;font-size:var(--fs-lead)}
  .ltrio__line{left:calc(var(--dz) / 2 - 1px);right:auto;top:calc(var(--dz) / 2);bottom:calc(var(--dz) / 2);border-top:0;border-left:2px dotted rgba(45,96,64,.5)}
  .lprose--c{text-align:left}
  .llocal__h,.lrow__t,.lduo__h,.lchat__b{overflow-wrap:anywhere}
}
@media (prefers-reduced-motion:reduce){
  .lrow:hover::after,.lcity:hover{transform:none}
}
.lcards--2{max-width:860px;margin:0 auto}
.lcards--2>li{flex-basis:calc((100% - var(--sp-3)) / 2)}
@media (max-width:760px){.lcards--2{max-width:none}}
/* 200% text and 320px: long words wrap inside rows instead of pushing the page sideways (WCAG 1.4.4 / 1.4.10) */
.lind>span:last-child,.lcity>span,.lprom li>span,.lrow__t,.lrow__p,.lduo__h>span,.ltrio__i>span{min-width:0;overflow-wrap:anywhere}
.sec--cream .lwork .ptags li{background:var(--paper)}
/* the city's story: a thin straight stem beside the paragraphs, drawn by scroll (vine engine), one dot per paragraph */
.lstory{position:relative;padding-left:var(--sp-5)}
.lstory .path__stem-line{stroke-width:2.5}
.lstory__p{position:relative;z-index:1}
.lstory__dot{position:absolute;left:calc(-1 * var(--sp-5) + 1px);top:.62em;width:13px;height:13px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 5px var(--paper);transition:background-color .3s steps(3,end),box-shadow .3s steps(3,end)}
.js .lstory.has-stem .lstory__dot:not(.is-lit){background:var(--paper);box-shadow:inset 0 0 0 2px var(--rule-2),0 0 0 5px var(--paper)}
@media (max-width:760px){.lstory{padding-left:var(--sp-4)}.lstory__dot{left:calc(-1 * var(--sp-4) + 1px)}}
.lprose p,.lhear__intro,.lchat__b,.lchat__r>span,.lvine .kvine__p,.lduo__p,.lscene .srow{overflow-wrap:break-word;min-width:0}
/* kit cards and open lists on these pages: long words wrap at 200% text (kit gap, see notes) */
.pg-local :is(.kcard__t,.kcard__p,.klist__lab,.kvine__p,.kvine__t){overflow-wrap:break-word;min-width:0}
.pg-local .kvine__t>span{min-width:0;overflow-wrap:break-word}