/* Layout: lever rail | big-picture canvas (flow, pulse line, layer bands, foundations) | sticky detail panel. Colour = layer identity. */
:root{
  --bg:#F3F6F8; --surface:#FFFFFF; --ink:#15202B; --muted:#5A6776; --line:#D8DFE6;
  --accent:#C8325A;
  --pf:#4B52AE; --pon:#6A3FA0; --pj:#2E7D5B; --nw:#C8325A; --pr:#12808A; --tm:#A86F16; --fd:#53637A; --sv:#2F6FB8;
  --display:"Sora", "Segoe UI", system-ui, sans-serif;
  --body:"IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --radius:10px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0E151E; --surface:#16202B; --ink:#E5ECF3; --muted:#98A6B6; --line:#2A3746;
  --accent:#F0668A; --pf:#8E94F2; --pon:#B48CF0; --pj:#5CCB95; --nw:#F0668A; --pr:#43C3CB; --tm:#E8AA4B; --fd:#A2B2C6; --sv:#6AA8F2; color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#0E151E; --surface:#16202B; --ink:#E5ECF3; --muted:#98A6B6; --line:#2A3746;
  --accent:#F0668A; --pf:#8E94F2; --pon:#B48CF0; --pj:#5CCB95; --nw:#F0668A; --pr:#43C3CB; --tm:#E8AA4B; --fd:#A2B2C6; --sv:#6AA8F2; color-scheme:dark }

*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--bg); color:var(--ink); font-family:var(--body); font-size:14px; line-height:1.5}
.wrap{max-width:1480px; margin:0 auto; padding-inline:clamp(16px,3vw,32px); padding-block:24px 48px}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* header */
.top{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px 32px; margin-bottom:20px}
.brand{display:flex; align-items:center; gap:14px}
.brand svg{width:56px; height:32px; flex:none}
.brand h1{font-family:var(--display); font-weight:700; font-size:clamp(26px,3vw,34px); letter-spacing:.01em; margin:0; line-height:1}
.brand p{margin:4px 0 0; color:var(--muted); font-size:13.5px}
.cfg{display:flex; flex-direction:column; gap:6px}
.cfg-label{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.seg{display:flex; flex-wrap:wrap; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:3px; gap:2px}
.seg button{border:0; background:none; padding:6px 14px; border-radius:999px; cursor:pointer; font-weight:500; font-size:13px; color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--ink); color:var(--surface)}

/* grid */
.grid{display:grid; grid-template-columns:200px minmax(0,1fr) 340px; gap:20px; align-items:start}
@media (max-width:1180px){ .grid{grid-template-columns:minmax(0,1fr) 320px} .levers{grid-column:1 / -1} }
@media (max-width:820px){ .grid{grid-template-columns:minmax(0,1fr)} }

/* levers */
.levers{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px}
.levers h2,.card h2{font-family:var(--display); font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; margin:0 0 4px}
.levers .hint{font-size:12px; color:var(--muted); margin:0 0 10px}
.lever-list{display:flex; flex-direction:column; gap:4px}
@media (max-width:1180px){ .lever-list{flex-direction:row; flex-wrap:wrap} }
.lever{display:flex; align-items:center; gap:8px; text-align:left; border:1px solid transparent; background:none; padding:6px 8px; border-radius:8px; cursor:pointer; font-size:13px}
.lever:hover{background:color-mix(in srgb,var(--ink) 5%,transparent)}
.lever[aria-pressed="true"]{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,transparent); font-weight:600}
.lever .dot{width:8px; height:8px; border-radius:50%; background:var(--muted); flex:none}
.lever.scale .dot{background:var(--accent)}
.lever .tag{margin-left:auto; font-family:var(--mono); font-size:10px; color:var(--accent)}
.clear{margin-top:10px; border:1px solid var(--line); background:none; border-radius:8px; padding:5px 10px; font-size:12px; cursor:pointer}

/* canvas */
.canvas{display:flex; flex-direction:column; gap:14px; min-width:0}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px}
.card-head{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 12px; margin-bottom:10px}
.card-head span{font-size:12px; color:var(--muted)}

/* flow */
.flow{display:grid; grid-template-columns:repeat(var(--n,9),minmax(0,1fr)); gap:4px}
@media (max-width:700px){ .flow{grid-template-columns:repeat(3,minmax(0,1fr))} }
.stage{position:relative; border:0; cursor:pointer; background:color-mix(in srgb,var(--ink) 6%,var(--surface)); padding:10px 8px 10px 14px; text-align:left; clip-path:polygon(0 0,calc(100% - 9px) 0,100% 50%,calc(100% - 9px) 100%,0 100%,9px 50%); min-width:0}
.stage:first-child{clip-path:polygon(0 0,calc(100% - 9px) 0,100% 50%,calc(100% - 9px) 100%,0 100%)}
@media (max-width:700px){ .stage,.stage:first-child{clip-path:none; border-radius:8px; padding-left:10px} }
.stage b{display:block; font-size:13px; font-weight:600}
.stage small{display:block; font-size:11px; line-height:1.3; color:var(--muted)}
.stage .n{font-family:var(--mono); font-size:10px; color:var(--muted)}
.stage.assure{background:color-mix(in srgb,var(--accent) 16%,var(--surface))}

/* pulse */
.pulse{cursor:pointer; border:1px solid var(--line); background:var(--surface); border-radius:var(--radius); padding:12px 16px 6px; text-align:left; width:100%}
.pulse:hover{border-color:var(--accent)}
.pulse svg{width:100%; height:auto; display:block}
.pulse .trace{fill:none; stroke:var(--accent); stroke-width:2.2; stroke-linejoin:round; stroke-linecap:round}
.pulse .base{stroke:var(--line); stroke-width:1}
.pulse text{font-family:var(--mono); font-size:11px; fill:var(--muted)}
.pulse text.key{fill:var(--ink); font-family:var(--body); font-weight:600; font-size:11.5px}
.pulse .blip{fill:var(--accent)}
@media (prefers-reduced-motion: reduce){ .pulse .blip{display:none} }

/* layers */
.layer{--c:var(--fd); position:relative; background:color-mix(in srgb,var(--c) 7%,var(--surface)); border:1px solid color-mix(in srgb,var(--c) 30%,var(--line)); border-radius:var(--radius); padding:14px 16px; transition:opacity .25s}
.layer[data-layer="portfolio"]{--c:var(--pf)} .layer[data-layer="project"]{--c:var(--pj)} .layer[data-layer="network"]{--c:var(--nw)} .layer[data-layer="product"]{--c:var(--pr)} .layer[data-layer="team"]{--c:var(--tm)} .layer[data-layer="foundations"]{--c:var(--fd)}
.layer.off{opacity:.35}
.layer.off::after{content:attr(data-off); position:absolute; top:12px; right:14px; font-size:11px; font-family:var(--mono); color:var(--muted)}
.layer.stacked{box-shadow:6px 6px 0 -1px var(--surface), 6px 6px 0 0 color-mix(in srgb,var(--c) 30%,var(--line)), 12px 12px 0 -1px var(--surface), 12px 12px 0 0 color-mix(in srgb,var(--c) 22%,var(--line)); margin-right:12px; margin-bottom:12px}
.lhead{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; margin-bottom:10px; padding-right:120px}
.lhead h3{font-family:var(--display); font-weight:600; font-size:17px; margin:0; color:var(--c)}
.lhead p{margin:0; color:var(--muted); font-size:13px}
.lbody{display:grid; grid-template-columns:170px minmax(0,1fr); gap:12px}
@media (max-width:620px){ .lbody{grid-template-columns:minmax(0,1fr)} .lhead{padding-right:0} .layer.off::after{position:static; display:block; margin-top:6px} }
.board{align-self:start; border:1px dashed color-mix(in srgb,var(--c) 55%,var(--line)); background:var(--surface); border-radius:8px; padding:10px; cursor:pointer; text-align:left}
.board .cols{display:flex; gap:4px; margin:8px 0 6px}
.board .cols i{flex:1; height:30px; border-radius:3px; background:color-mix(in srgb,var(--c) 14%,var(--surface)); position:relative}
.board .cols i::before,.board .cols i::after{content:""; position:absolute; left:3px; right:3px; height:6px; border-radius:2px; background:color-mix(in srgb,var(--c) 45%,var(--surface))}
.board .cols i::before{top:4px} .board .cols i:nth-child(2n)::after{top:13px}
.board b{font-size:13px} .board small{display:block; color:var(--muted); font-size:11.5px}
.groups{display:flex; flex-direction:column; gap:8px; min-width:0}
.group{display:flex; flex-wrap:wrap; align-items:center; gap:6px}
.glabel{font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); width:64px; flex:none}
@media (max-width:620px){ .glabel{width:100%} }
.chip{display:inline-flex; align-items:center; gap:6px; border:1px solid color-mix(in srgb,var(--c) 35%,var(--line)); background:var(--surface); border-radius:999px; padding:4px 10px 4px 7px; font-size:12.5px; cursor:pointer; transition:opacity .2s, box-shadow .2s}
.chip svg{width:14px; height:14px; flex:none; color:var(--c)}
.chip:hover{border-color:var(--c)}
.chip[aria-current="true"],.stage[aria-current="true"],.board[aria-current="true"],.pulse[aria-current="true"]{box-shadow:0 0 0 2px var(--ink)}
.lbody.solo{grid-template-columns:minmax(0,1fr)}
.note{border-style:dashed}
.note p{margin:0 0 10px; color:var(--muted)}
.note .seg{display:inline-flex}

/* principles */
.principles{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:8px}
.principles div{border-top:2px solid var(--line); padding-top:6px; font-size:12.5px; color:var(--muted)}
.principles b{display:block; color:var(--ink); font-size:13px}
.principles .num{font-family:var(--mono); font-size:10.5px; color:var(--accent)}

/* panel */
.panel{position:sticky; top:calc(env(safe-area-inset-top,0px) + 16px); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px; max-height:calc(100vh - 32px); overflow:auto}
@media (max-width:820px){ .panel{position:static; max-height:none} }
.ptype{display:inline-flex; gap:6px; align-items:center; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--pc,var(--muted))}
.ptype i{width:8px; height:8px; border-radius:50%; background:var(--pc,var(--muted))}
.panel h2{font-family:var(--display); font-size:22px; font-weight:600; margin:6px 0 8px; text-wrap:balance; line-height:1.2}
.panel p{margin:0 0 12px}
.facts{display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 12px; margin:0 0 14px; font-size:13px}
.facts dt{color:var(--muted)} .facts dd{margin:0}
.panel h3{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:16px 0 6px; font-weight:600}
.flowline{display:flex; flex-wrap:wrap; gap:4px; font-size:12px}
.flowline span{background:color-mix(in srgb,var(--pc,var(--ink)) 10%,var(--surface)); border-radius:6px; padding:3px 8px}
.panel ol,.panel ul{margin:0 0 12px; padding-left:18px} .panel li{margin-bottom:4px}
.formula{font-family:var(--mono); font-size:13px; background:color-mix(in srgb,var(--ink) 6%,var(--surface)); padding:10px 12px; border-radius:8px; margin:0 0 12px; overflow-x:auto}
.tags{display:flex; flex-wrap:wrap; gap:6px}
.tags button{border:1px solid var(--line); background:none; border-radius:999px; padding:3px 10px; font-size:12px; cursor:pointer}
.tags button:hover{border-color:var(--accent)}
.jira{border-left:3px solid var(--line); padding:6px 10px; font-size:12.5px; color:var(--muted); margin:0 0 12px}
.mini{width:100%; border-collapse:collapse; font-size:12px; font-variant-numeric:tabular-nums}
.mini td{padding:4px 6px; border-bottom:1px solid var(--line); vertical-align:top}
.mini td:first-child{font-family:var(--mono); color:var(--muted); white-space:nowrap}
.legend{display:flex; flex-wrap:wrap; gap:14px; font-size:12px; color:var(--muted); margin-top:4px}
.legend span{display:inline-flex; gap:5px; align-items:center} .legend svg{width:14px; height:14px}

.hlink{color:inherit; text-decoration:none; border-bottom:1px solid transparent; cursor:pointer}
.hlink::after{content:" \2192"; font-size:.8em; opacity:.45; transition:opacity .15s, margin .15s}
.hlink:hover{border-bottom-color:currentColor} .hlink:hover::after{opacity:1}
.cfg-label.hlink::after{content:""}
.home-link{color:inherit; text-decoration:none}
.pulse{display:block; color:inherit; text-decoration:none}
.golink{color:var(--accent); font-weight:600; text-decoration:none} .golink:hover{text-decoration:underline}
body.on-page .cfg{visibility:hidden}

/* full pages */
.pagewrap{display:grid; grid-template-columns:210px minmax(0,1fr); gap:28px; align-items:start}
@media (max-width:820px){ .pagewrap{grid-template-columns:minmax(0,1fr)} }
.pnav{position:sticky; top:calc(env(safe-area-inset-top,0px) + 16px); display:flex; flex-direction:column; gap:2px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:10px}
@media (max-width:820px){ .pnav{position:static; flex-direction:row; flex-wrap:wrap} }
.pnav a{color:var(--ink); text-decoration:none; font-size:13px; padding:6px 10px; border-radius:7px; display:flex; align-items:center; gap:8px}
.pnav a i{width:8px; height:8px; border-radius:50%; background:var(--c,var(--muted)); flex:none}
.pnav a:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
.pnav a[aria-current="page"]{background:var(--ink); color:var(--surface)}
.pnav .sep{height:1px; background:var(--line); margin:6px 4px}
@media (max-width:820px){ .pnav .sep{display:none} }
.article{min-width:0; max-width:900px}
.phero{--c:var(--accent); border-radius:var(--radius); padding:24px 24px 22px; background:color-mix(in srgb,var(--c) 10%,var(--surface)); border:1px solid color-mix(in srgb,var(--c) 30%,var(--line)); margin-bottom:22px}
.phero .eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--c)}
.phero h1{font-family:var(--display); font-size:clamp(26px,3.4vw,36px); margin:6px 0 10px; line-height:1.15; text-wrap:balance}
.phero .lede{font-size:16px; max-width:65ch; margin:0 0 12px}
.cfgchips{display:flex; flex-wrap:wrap; gap:6px; font-size:12px; color:var(--muted); align-items:center}
.cfgchips b{font-weight:500; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:2px 10px; color:var(--ink)}
.psec{margin:0 0 26px}
.psec h2{font-family:var(--display); font-size:18px; font-weight:600; margin:0 0 10px}
.psec p{max-width:70ch; margin:0 0 10px}
.psec ul,.psec ol{max-width:70ch; margin:0 0 10px; padding-left:20px} .psec li{margin-bottom:5px}
.states{display:flex; flex-wrap:wrap; gap:4px}
.states span{--c2:var(--c,var(--accent)); background:color-mix(in srgb,var(--c2) 14%,var(--surface)); padding:8px 16px 8px 18px; font-size:13px; font-weight:500; clip-path:polygon(0 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,0 100%,8px 50%)}
.states span:first-child{clip-path:polygon(0 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,0 100%); padding-left:12px}
.rcards{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px}
.rcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px}
.rcard h3{font-size:14.5px; margin:0 0 6px; display:flex; gap:8px; align-items:center}
.rcard h3 svg{width:16px; height:16px; color:var(--c,var(--accent)); flex:none}
.rcard p{font-size:13px; margin:0 0 8px}
.rcard small{display:block; font-size:11.5px; color:var(--muted)}
.tblwrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface)}
.tbl{border-collapse:collapse; width:100%; font-size:13px; min-width:560px}
.tbl th{text-align:left; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600; padding:10px 12px; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--c,var(--ink)) 6%,var(--surface))}
.tbl td{padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl td:first-child{font-weight:600}
.io{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px}
.io div{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px}
.io h3{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:0 0 6px}
.io ul{margin:0; padding-left:18px; font-size:13px}
.pager{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:16px; margin-top:8px}
.pager a{color:var(--ink); text-decoration:none; font-size:13px; border:1px solid var(--line); background:var(--surface); border-radius:8px; padding:8px 12px}
.pager a:hover{border-color:var(--accent)}
.pager small{display:block; color:var(--muted); font-size:11px}
.stagecards{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px; counter-reset:none}
.stagecards .rcard .n{font-family:var(--mono); font-size:11px; color:var(--accent)}
.weekgrid td{text-align:center; font-weight:400 !important}
.weekgrid td:first-child{text-align:left; font-weight:600 !important; white-space:nowrap}
.weekgrid .on{color:var(--accent); font-weight:700}
.chiplinks{display:flex; flex-wrap:wrap; gap:5px}
.chiplinks a{font-size:12px; border:1px solid var(--line); border-radius:999px; padding:2px 9px; color:var(--ink); text-decoration:none; background:var(--surface)}
.chiplinks a:hover{border-color:var(--accent)}
footer{margin-top:28px; font-size:12px; color:var(--muted); max-width:80ch}

/* ---------- big picture v2: calm, progressive, phone-first ---------- */
.bp{max-width:1240px; margin:0 auto}
.bp-hero{padding:8px 0 18px}
.bp-eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin:0}
.bp-title{font-family:var(--display); font-size:clamp(30px,5vw,44px); font-weight:700; line-height:1.1; margin:6px 0 10px; letter-spacing:-.01em}
.bp-lede{font-size:clamp(15px,1.8vw,18px); color:var(--muted); max-width:58ch; margin:0 0 18px; text-wrap:pretty}
.bp-controls{display:flex; flex-wrap:wrap; gap:14px 24px; align-items:flex-end}
.bp-control{display:flex; flex-direction:column; gap:6px; min-width:0}
.bp-clabel{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600}
.bp-clabel.hlink::after{content:""}
.bp-select{font:inherit; font-size:13px; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:7px 34px 7px 14px; appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%; background-size:5px 5px; background-repeat:no-repeat; max-width:100%}
.bp-cfgtext{font-size:13px; color:var(--muted); margin:10px 0 0}
@media (max-width:600px){ .bp-controls .seg{overflow-x:auto; flex-wrap:nowrap; max-width:calc(100vw - 32px)} .bp-controls .seg button{white-space:nowrap} .bp-control{width:100%} .bp-select{width:100%} }

.bp-grid{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:24px; align-items:start}
.bp-main{display:flex; flex-direction:column; gap:22px; min-width:0}
@media (max-width:900px){ .bp-grid{grid-template-columns:minmax(0,1fr)} }

/* two journeys */
.bp-journeys{display:flex; flex-direction:column; gap:0}
.bp-lane{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px 16px 12px; border-top:3px solid var(--c)}
.bp-lanehead{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; margin-bottom:12px}
.bp-lanehead h2{font-family:var(--display); font-size:17px; font-weight:600; margin:0}
.bp-lanehead p{margin:0; font-size:13px; color:var(--muted); flex-basis:100%}
.bp-tag{font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--c); background:color-mix(in srgb,var(--c) 12%,var(--surface)); border-radius:999px; padding:2px 8px}
.bp-steps{list-style:none; margin:0; padding:0 0 4px; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(92px,1fr); gap:0; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:thin}
.bp-steps li{scroll-snap-align:start; position:relative}
.bp-steps li::before{content:""; position:absolute; top:15px; left:0; right:0; height:2px; background:color-mix(in srgb,var(--c) 30%,var(--line))}
.bp-steps li:first-child::before{left:50%} .bp-steps li:last-child::before{right:50%}
.bp-step{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:3px; width:100%; border:0; background:none; padding:0 6px 6px; cursor:pointer; color:var(--ink); border-radius:10px}
.bp-dot{width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font-family:var(--mono); font-size:12px; font-weight:600; background:var(--surface); border:2px solid var(--c); color:var(--c); margin-bottom:4px; transition:transform .15s}
.bp-step.key .bp-dot{background:var(--c); color:var(--surface)}
.bp-step b{font-size:12.5px; font-weight:600; line-height:1.25}
.bp-step small{font-size:11px; color:var(--muted); line-height:1.25}
.bp-step:hover .bp-dot{transform:scale(1.08)}
.bp-step[aria-current="true"] .bp-dot{box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 30%,transparent)}
.bp-join{display:flex; justify-content:center; padding:0; position:relative; height:44px; align-items:center}
.bp-join::before{content:""; position:absolute; top:0; bottom:0; left:50%; border-left:2px dashed var(--line)}
.bp-join span{position:relative; background:var(--bg); font-size:12px; color:var(--muted); padding:2px 10px; text-align:center; max-width:90%}

/* sections */
.bp-sechead{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:2px 12px; margin-bottom:10px}
.bp-sechead h2{font-family:var(--display); font-size:17px; font-weight:600; margin:0}
.bp-sechead p{margin:0; font-size:13px; color:var(--muted)}

/* layers as rows that open one at a time */
.bp-layers{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden}
.bp-layer{border-top:1px solid var(--line)}
.bp-layer:first-child{border-top:0}
.bp-lrow{display:grid; grid-template-columns:minmax(0,1fr) auto 18px; align-items:center; gap:12px; width:100%; border:0; background:none; text-align:left; cursor:pointer; padding:14px 16px 14px 20px; position:relative; color:var(--ink)}
.bp-lrow::before{content:""; position:absolute; left:0; top:12px; bottom:12px; width:4px; border-radius:0 4px 4px 0; background:var(--c)}
.bp-lrow:hover{background:color-mix(in srgb,var(--c) 5%,transparent)}
.bp-lname b{display:block; font-family:var(--display); font-size:15.5px; font-weight:600}
.bp-lname small{display:block; font-size:12.5px; color:var(--muted)}
.bp-counts{font-size:12px; color:var(--muted); white-space:nowrap}
.bp-chev{width:9px; height:9px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg); transition:transform .2s; justify-self:center; margin-top:-4px}
.bp-layer.open .bp-chev{transform:rotate(-135deg); margin-top:4px}
.bp-layer.open .bp-lrow{background:color-mix(in srgb,var(--c) 6%,transparent)}
@media (max-width:600px){ .bp-lrow{grid-template-columns:minmax(0,1fr) 18px} .bp-counts{grid-column:1; grid-row:2; white-space:normal} .bp-chev{grid-row:1 / span 2; grid-column:2} }
.bp-ldetail{padding:6px 16px 16px 20px; display:flex; flex-direction:column; gap:14px}
.bp-board{display:flex; align-items:center; gap:12px; text-align:left; border:1px dashed color-mix(in srgb,var(--c) 50%,var(--line)); background:color-mix(in srgb,var(--c) 4%,var(--surface)); border-radius:10px; padding:10px 12px; cursor:pointer; color:var(--ink)}
.bp-board b{display:block; font-size:13px} .bp-board small{display:block; font-size:11.5px; color:var(--muted)}
.bp-cols{display:flex; gap:3px; flex:none}
.bp-cols i{width:8px; height:26px; border-radius:2px; background:color-mix(in srgb,var(--c) 22%,var(--surface))}
.bp-cols i:nth-child(2n){background:color-mix(in srgb,var(--c) 40%,var(--surface))}
.bp-cols3{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px 20px}
.bp-col h4{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 4px; font-weight:600}
.bp-col ul{list-style:none; margin:0; padding:0}
.bp-item{display:block; width:100%; text-align:left; border:0; background:none; padding:6px 8px; margin:0 -8px; border-radius:7px; font-size:13.5px; color:var(--ink); cursor:pointer; line-height:1.3}
.bp-item:hover{background:color-mix(in srgb,var(--c) 10%,transparent)}
.bp-item[aria-current="true"],.bp-board[aria-current="true"]{background:color-mix(in srgb,var(--c) 16%,transparent); font-weight:600}
.bp-note{border:1px dashed var(--line); border-radius:12px; padding:12px 14px; margin-top:10px; font-size:13px; color:var(--muted)}
.bp-note p{margin:0 0 8px}

/* pulse and principles */
.bp-pulse{border-radius:14px; padding:14px 16px 8px}
.bp-principles{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:0 16px}
.bp-principles summary{cursor:pointer; list-style:none; padding:14px 0; display:flex; justify-content:space-between; align-items:center; gap:12px}
.bp-principles summary::-webkit-details-marker{display:none}
.bp-principles summary::after{content:""; width:9px; height:9px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg); flex:none}
.bp-principles[open] summary::after{transform:rotate(-135deg)}
.bp-principles summary b{display:block; font-family:var(--display); font-size:15.5px; font-weight:600}
.bp-principles summary small{display:block; font-size:12.5px; color:var(--muted)}
.bp-principles .principles{padding-bottom:12px}

/* details: side panel on wide screens, bottom sheet on phones */
.bp-panel{border-radius:14px}
.bp-close{position:sticky; top:0; float:right; width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:var(--surface); font-size:22px; line-height:1; cursor:pointer; color:var(--ink); margin:-6px -6px 0 8px; z-index:1}
.bp-scrim{position:fixed; inset:0; background:color-mix(in srgb,#000 38%,transparent); z-index:60}
@media (min-width:901px){ .bp-close,.bp-scrim{display:none!important} }
@media (max-width:900px){
  .bp-panel{position:fixed; left:0; right:0; bottom:0; top:auto; z-index:61; max-height:78vh; overflow:auto; border-radius:18px 18px 0 0; border-bottom:0; padding:22px 18px calc(22px + env(safe-area-inset-bottom,0px)); transform:translateY(105%); transition:transform .25s ease; box-shadow:0 -12px 40px rgba(0,0,0,.18); visibility:hidden}
  .bp-panel.open{transform:none; visibility:visible}
  .bp-panel::before{content:""; display:block; width:40px; height:4px; border-radius:2px; background:var(--line); margin:-10px auto 12px}
  body.bp-locked{overflow:hidden}
}
@media (prefers-reduced-motion: reduce){ .bp-panel{transition:none} }
@media (max-width:600px){ .bp-pulse{overflow-x:auto} .bp-pulse svg{min-width:620px} .bp-steps{grid-auto-columns:104px} }

/* ---------- The DelPulse Map (home) ---------- */
.pm{max-width:1480px; margin:0 auto}
.pm-hero{padding:4px 0 18px}
.pm-eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin:0}
.pm-title{font-family:var(--display); font-size:clamp(28px,4.6vw,48px); font-weight:700; line-height:1.08; letter-spacing:-.015em; margin:8px 0 10px; text-wrap:balance}
.pm-lede{font-size:clamp(15px,1.7vw,18px); color:var(--muted); max-width:62ch; margin:0 0 18px; text-wrap:pretty}
.pm-controls{display:flex; flex-wrap:wrap; gap:14px 24px; align-items:flex-end}
.pm-control{display:flex; flex-direction:column; gap:6px; min-width:0}
.pm-clabel{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600}
.pm-clabel.hlink::after{content:""}
.pm-select{font:inherit; font-size:13px; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:7px 34px 7px 14px; appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%; background-size:5px 5px; background-repeat:no-repeat; max-width:100%}
.pm-cfgtext{font-size:13px; color:var(--muted); margin:10px 0 0}
@media (max-width:600px){ .pm-controls .seg{overflow-x:auto; flex-wrap:nowrap; max-width:calc(100vw - 32px)} .pm-controls .seg button{white-space:nowrap} .pm-control{width:100%} .pm-select{width:100%} }

/* the poster: dark in every theme, like a printed map */
.pm-poster{--bg:#0E151E; --pn:#16202B; --tx:#E9EFF5; --mt:#A3B0BF; --ln:#2A3746;
  --m-pf:#9EA3F5; --m-pon:#B48CF0; --m-pj:#5CCB95; --m-nw:#F0668A; --m-pr:#43C3CB; --m-tm:#E8AA4B; --m-fd:#A2B2C6; --m-hr:#FF6B8B;
  color-scheme:dark; background-color:var(--bg); background-image:radial-gradient(circle at 1px 1px, color-mix(in srgb,var(--tx) 9%,transparent) 1px, transparent 0); background-size:24px 24px;
  color:var(--tx); border-radius:22px; padding:18px; min-width:0}
.pm-legend{display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:flex-end; font-size:12.5px; color:var(--mt); margin:0 4px 12px}
.pm-legend span{display:inline-flex; align-items:center; gap:6px}
.pm-legend svg{width:15px; height:15px; fill:none; stroke:var(--mt); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.pm-live-key i{width:8px; height:8px; border-radius:50%; background:var(--m-hr); box-shadow:0 0 8px var(--m-hr)}

.pm-map{display:grid; gap:14px; grid-template-columns:190px minmax(0,1fr) minmax(0,1fr) 176px;
  grid-template-areas:"side port port heart" "side proj net heart" "side prod prod heart" "side team team heart" "spine spine spine spine" "fnd fnd fnd fnd"}
.pm-span{grid-area:side} .pm-port{grid-area:port} .pm-proj{grid-area:proj} .pm-net{grid-area:net} .pm-prod{grid-area:prod} .pm-team{grid-area:team} .pm-heart{grid-area:heart} .pm-spine{grid-area:spine} .pm-fnd{grid-area:fnd}
@media (max-width:1180px){ .pm-map{grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-areas:"port port" "proj net" "prod prod" "team team" "side heart" "fnd fnd"} .pm-spine{display:none} }
@media (max-width:760px){ .pm-map{grid-template-columns:minmax(0,1fr); grid-template-areas:"port" "proj" "net" "prod" "team" "heart" "span" "fnd"} .pm-poster{padding:12px; border-radius:18px; margin-inline:-4px} .pm-legend{justify-content:flex-start} }

.pm-layer{position:relative; background:color-mix(in srgb,var(--c) 9%,var(--pn)); border:1px solid color-mix(in srgb,var(--c) 38%,var(--pn)); border-radius:18px; padding:16px 18px; display:flex; flex-direction:column; gap:12px; min-width:0; transition:opacity .25s}
.pm-layer.off{opacity:.3}
.pm-layer.off::after{content:attr(data-off); position:absolute; top:14px; right:16px; font-family:var(--mono); font-size:11px; color:var(--mt)}
.pm-prod{box-shadow:8px 8px 0 -1px var(--bg), 8px 8px 0 0 color-mix(in srgb,var(--c) 38%,var(--pn)), 16px 16px 0 -1px var(--bg), 16px 16px 0 0 color-mix(in srgb,var(--c) 24%,var(--pn)); margin:0 16px 16px 0}
.pm-row{display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px}
.pm-head{min-width:0}
.pm-port .pm-head,.pm-prod .pm-head,.pm-team .pm-head{width:190px}
.pm-head h2{font-family:var(--display); font-size:20px; line-height:1.25; font-weight:700; margin:0}
.pm-head h2 a{color:var(--c); text-decoration:none}
.pm-head h2 a:hover{text-decoration:underline; text-underline-offset:3px}
.pm-head p{margin:2px 0 0; font-size:13px; color:var(--mt)}
.pm-tag{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--c); border:1px solid color-mix(in srgb,var(--c) 45%,transparent); border-radius:999px; padding:2px 10px}
.pm-body{flex:1 1 320px; display:flex; flex-direction:column; gap:8px; min-width:0}
.pm-note{margin:0; font-size:13px; color:var(--mt); display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center}
.pm-live{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--tx); text-decoration:none; border-bottom:1px solid transparent}
.pm-live::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--m-hr,var(--accent)); box-shadow:0 0 8px var(--m-hr,var(--accent)); flex:none}
.pm-live::after{content:"\2192"; opacity:.6}
.pm-live:hover{border-bottom-color:currentColor}
.bp-panel .pm-live{color:var(--ink)}

/* chips */
.pm-chips{display:flex; flex-wrap:wrap; gap:6px}
.pm-col{flex-direction:column; align-items:flex-start}
.pm-chip{display:inline-flex; align-items:center; gap:6px; padding:5px 11px 5px 8px; border-radius:999px; background:color-mix(in srgb,var(--c) 14%,var(--pn)); border:1px solid color-mix(in srgb,var(--c) 40%,var(--pn)); font:inherit; font-size:13px; line-height:16px; color:var(--tx); cursor:pointer; text-align:left; transition:border-color .15s, background .15s, opacity .2s}
.pm-chip svg{width:14px; height:14px; flex:none; fill:none; stroke:var(--c); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.pm-chip:hover{border-color:var(--c); background:color-mix(in srgb,var(--c) 22%,var(--pn))}
.pm-map [aria-current="true"]{outline:2px solid var(--tx); outline-offset:2px}
.pm-map .dim{opacity:.28}
.pm-map .hit{box-shadow:0 0 0 2px var(--c,var(--m-hr)), 0 0 18px color-mix(in srgb,var(--c,var(--m-hr)) 60%,transparent)}

/* mini boards */
.pm-kanban{display:flex; flex-direction:column; gap:4px; align-items:flex-start; padding:0; border:0; background:none; cursor:pointer; color:var(--tx); font:inherit}
.pm-kcols{display:flex; gap:4px; padding:6px; border-radius:9px; background:color-mix(in srgb,var(--c) 10%,var(--pn)); border:1px solid color-mix(in srgb,var(--c) 45%,var(--pn)); height:58px; box-sizing:border-box}
.pm-kcol{display:flex; flex-direction:column; gap:3px; width:16px}
.pm-kcol i{display:block; height:10px; border-radius:2.5px; background:var(--c); opacity:.5}
.pm-kcol i.h{height:3px; opacity:.9}
.pm-kname{font-size:11.5px; color:var(--mt)}
.pm-kanban:hover .pm-kcols{border-color:var(--c)}

/* chevrons: build and run journeys */
.pm-chev{list-style:none; margin:0; padding:0; display:flex; min-width:0; overflow-x:auto; scrollbar-width:thin; flex:1 1 auto}
.pm-chev li{flex:1 0 96px; min-width:0}
.pm-chev li + li{margin-left:-6px}
.pm-step{width:100%; height:60px; border:0; cursor:pointer; font:inherit; color:var(--tx); background:color-mix(in srgb,var(--c) 20%,var(--pn)); clip-path:polygon(0 0,calc(100% - 13px) 0,100% 50%,calc(100% - 13px) 100%,0 100%,13px 50%); padding:0 16px 0 22px; display:flex; flex-direction:column; justify-content:center; text-align:left; transition:background .15s}
.pm-chev li:first-child .pm-step{clip-path:polygon(0 0,calc(100% - 13px) 0,100% 50%,calc(100% - 13px) 100%,0 100%); padding-left:12px}
.pm-chev li:nth-child(2n) .pm-step{background:color-mix(in srgb,var(--c) 14%,var(--pn))}
.pm-step:hover{background:color-mix(in srgb,var(--c) 34%,var(--pn))!important}
.pm-step b{font-size:13px; line-height:16px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pm-step small{font-size:11px; line-height:14px; color:var(--mt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pm-step.key{background:var(--c)!important; color:var(--bg)} .pm-step.key small{color:var(--bg)}
.pm-step.dim,.pm-step.hit{box-shadow:none}
.pm-step.hit{background:color-mix(in srgb,var(--c) 60%,var(--pn))!important}
.pm-buildline{display:flex; align-items:center; gap:10px; min-width:0}
.pm-handover{flex:none; width:88px; height:88px; border:0; cursor:pointer; background:var(--c); color:var(--bg); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); font:inherit; font-size:12px; line-height:14px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; filter:drop-shadow(0 0 12px color-mix(in srgb,var(--c) 70%,transparent)); transition:transform .15s}
.pm-handover:hover{transform:scale(1.06)}

/* pulse cycle */
.pm-cycle{display:block; width:100%; padding:4px 0 0; border:0; background:none; cursor:pointer; color:var(--tx)}
.pm-cycle svg{width:100%; height:auto; display:block; overflow:visible}
.pm-cycle .trace{fill:none; stroke:var(--m-nw); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; filter:drop-shadow(0 0 6px var(--m-nw))}
.pm-cycle text{font-family:var(--body); fill:var(--tx)} .pm-cycle text.key{font-size:12px; font-weight:600} .pm-cycle text.s{font-family:var(--mono); font-size:11px; fill:var(--mt)}
.pm-cycle .blip{fill:#fff}
.pm-cycle:hover .trace{stroke-width:3.2}
@media (prefers-reduced-motion: reduce){ .pm-cycle .blip{display:none} }

.pm-sprints{display:flex; gap:12px; flex-wrap:wrap}
.pm-sprints span{display:flex; flex-direction:column; align-items:center; gap:2px; font-family:var(--mono); font-size:11px; color:var(--mt)}
.pm-sprints svg{width:24px; height:24px; fill:none; stroke:var(--c); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* span column and gate card */
.pm-gatecard{margin-top:auto; display:flex; gap:10px; align-items:center; padding:12px; border-radius:12px; border:1px solid color-mix(in srgb,var(--c) 30%,var(--pn)); background:color-mix(in srgb,var(--c) 14%,var(--pn)); color:var(--tx); font:inherit; text-align:left; cursor:pointer}
.pm-gatecard svg{width:28px; height:28px; flex:none; fill:none; stroke:var(--c); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.pm-gatecard b{display:block; font-size:13.5px} .pm-gatecard small{display:block; font-size:12px; color:var(--mt)}
@media (max-width:1180px){ .pm-col{flex-direction:row; flex-wrap:wrap} }

/* customers */
.pm-heart{border-radius:18px; padding:20px 14px; background:color-mix(in srgb,var(--m-hr) 8%,var(--pn)); border:1px solid color-mix(in srgb,var(--m-hr) 38%,var(--pn)); display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; justify-content:center}
.pm-heartbeat{width:104px; height:104px; border-radius:50%; display:grid; place-items:center; background:color-mix(in srgb,var(--m-hr) 18%,var(--pn)); box-shadow:0 0 0 10px color-mix(in srgb,var(--m-hr) 8%,var(--pn)), 0 0 48px color-mix(in srgb,var(--m-hr) 45%,transparent); animation:pm-beat 1.6s ease-in-out infinite}
.pm-heartbeat svg{width:52px; height:52px; fill:none; stroke:var(--m-hr); stroke-width:1.8; stroke-linejoin:round}
@keyframes pm-beat{0%,40%,100%{transform:scale(1)} 12%{transform:scale(1.08)} 24%{transform:scale(1.02)} 32%{transform:scale(1.06)}}
@media (prefers-reduced-motion: reduce){ .pm-heartbeat{animation:none} }
.pm-heart h2{font-family:var(--display); font-size:20px; line-height:1.25; margin:0}
.pm-heart p{margin:0; font-size:13px; color:var(--mt)}
.pm-outcomes{display:flex; flex-direction:column; gap:6px; width:100%}
.pm-outcomes button{font:inherit; font-size:13px; color:var(--tx); background:color-mix(in srgb,var(--m-hr) 10%,var(--pn)); border:1px solid transparent; border-radius:10px; padding:8px 10px; cursor:pointer}
.pm-outcomes button:hover{border-color:var(--m-hr)}
@media (max-width:1180px){ .pm-outcomes{flex-direction:row; flex-wrap:wrap; justify-content:center} .pm-outcomes button{width:auto} }

/* spine and foundations */
.pm-spine svg{width:100%; height:24px; display:block}
.pm-spine path{fill:none; stroke:var(--m-hr); stroke-width:2; stroke-linejoin:round; filter:drop-shadow(0 0 6px var(--m-hr)); vector-effect:non-scaling-stroke}
.pm-fnd{flex-direction:row; flex-wrap:wrap; align-items:center; gap:12px 20px}
.pm-fnd .pm-head{width:190px}
.pm-bricks{flex:1 1 600px; display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:8px}
.pm-bricks > *{display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:10px; background:color-mix(in srgb,var(--c) 12%,var(--pn)); border:1px solid color-mix(in srgb,var(--c) 30%,var(--pn)); font:inherit; color:var(--tx); text-align:left; cursor:pointer; text-decoration:none}
.pm-bricks b{font-size:13px} .pm-bricks small{font-size:12px; color:var(--mt)}
.pm-bricks > *:hover{border-color:var(--c)}
.pm-brick-live b::after{content:" \2192"; color:var(--m-hr)}
.pm-note-off{margin-top:12px; border:1px dashed var(--ln); border-radius:12px; padding:10px 14px; font-size:13px; color:var(--mt); display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between}
.pm-note-off p{margin:0} .pm-note-off b{color:var(--tx)}
.pm-note-off .btn{color:var(--tx); border-color:var(--ln)}

/* explore */
.pm-explore{margin-top:28px}
.pm-explore h2{font-family:var(--display); font-size:22px; margin:0 0 4px}
.pm-explore-lede{color:var(--muted); margin:0 0 14px; font-size:14px}
.pm-sub{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:22px 0 10px}
.pm-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px}
.pm-card{display:flex; flex-direction:column; gap:4px; padding:14px 16px; border-radius:12px; background:var(--surface); border:1px solid var(--line); color:var(--ink); text-decoration:none; transition:border-color .15s, transform .15s}
.pm-card b{font-size:14.5px} .pm-card small{font-size:12.5px; color:var(--muted)}
.pm-card:hover{border-color:var(--accent); transform:translateY(-1px)}
.pm-ext .pm-card b::after{content:" \2197"; color:var(--muted); font-weight:400}

/* details drawer on every screen size */
.pm-grid{position:relative}
.pm-grid .bp-panel{position:fixed; z-index:61; overflow:auto; visibility:hidden; transition:transform .25s ease, visibility .25s; box-shadow:0 12px 40px rgba(0,0,0,.22)}
@media (min-width:901px){ .pm-grid .bp-panel{top:16px; right:16px; bottom:16px; left:auto; width:400px; max-height:none; border-radius:16px; transform:translateX(calc(100% + 24px))} .pm-grid .bp-panel.open{transform:none; visibility:visible} .pm-grid .bp-close{display:block!important} .pm-grid .bp-scrim{display:block!important; background:transparent} .pm-grid .bp-scrim[hidden]{display:none!important} }
/* stacked layout: every journey gets the full width */
.pm-map{grid-template-columns:190px minmax(0,1fr) 176px; grid-template-areas:"port port heart" "side net heart" "side proj heart" "side prod heart" "side team heart" "spine spine spine" "fnd fnd fnd"}
.pm-net{display:grid; grid-template-columns:minmax(0,560px) minmax(0,1fr); gap:12px 24px; align-items:center}
.pm-net > .pm-row,.pm-net > .pm-note{grid-column:1 / -1}
.pm-span{align-self:start}
@media (max-width:1180px){ .pm-map{grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-areas:"port port" "net net" "proj proj" "prod prod" "team team" "side heart" "fnd fnd"} }
@media (max-width:760px){ .pm-map{grid-template-columns:minmax(0,1fr); grid-template-areas:"port" "net" "proj" "prod" "team" "heart" "span" "fnd"} .pm-net{grid-template-columns:minmax(0,1fr)} }
@media (min-width:1181px){ .pm-map{grid-template-areas:"port port heart" "side net heart" "side proj heart" "prod prod heart" "team team heart" "spine spine spine" "fnd fnd fnd"} .pm-span{align-self:stretch} }
.pm-col{flex-direction:row; flex-wrap:wrap}
@media (min-width:1181px){ .pm-span{contain:size; overflow:auto; scrollbar-width:thin} .pm-span .pm-chip{padding:4px 10px 4px 7px; font-size:12.5px} .pm-span .pm-gatecard{padding:9px 10px} }

/* map: tablet and phone */
@media (max-width:1180px){ .pm-map{grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-areas:"port port" "net net" "proj proj" "prod prod" "team team" "side heart" "fnd fnd"} .pm-spine{display:none} }
@media (max-width:760px){
  .pm-map{grid-template-columns:minmax(0,1fr); grid-template-areas:"port" "net" "proj" "prod" "team" "heart" "side" "fnd"}
  .pm-net{grid-template-columns:minmax(0,1fr)}
  .pm-chev{overflow-x:auto; scrollbar-width:thin; padding-bottom:4px}
  .pm-chev li{flex:0 0 112px}
  .pm-cycle{overflow-x:auto} .pm-cycle svg{min-width:520px}
}
.pm-heart .pm-live{display:inline-flex; align-items:center; gap:6px; justify-content:center}

/* the optional Portfolio of Networks band sits above everything, dashed to show it is optional */
.pm-pon{grid-area:pon; border-style:dashed!important}
.pm-pon .pm-head{width:190px}
.pm-map{grid-template-areas:"pon pon heart" "port port heart" "side net heart" "side proj heart" "side prod heart" "side team heart" "spine spine spine" "fnd fnd fnd"}
@media (min-width:1181px){ .pm-map{grid-template-areas:"pon pon heart" "port port heart" "side net heart" "side proj heart" "prod prod heart" "team team heart" "spine spine spine" "fnd fnd fnd"} }
@media (max-width:1180px){ .pm-map{grid-template-areas:"pon pon" "port port" "net net" "proj proj" "prod prod" "team team" "side heart" "fnd fnd"} }
@media (max-width:760px){ .pm-map{grid-template-areas:"pon" "port" "net" "proj" "prod" "team" "heart" "side" "fnd"} .pm-pon .pm-head{width:auto} }

/* layer order, top to bottom: Portfolio of Networks (optional), Network, the organisation's Portfolio, then its projects and products */
.pm-map{grid-template-areas:"pon pon heart" "net net heart" "port port heart" "side proj heart" "side prod heart" "team team heart" "spine spine spine" "fnd fnd fnd"}
@media (min-width:1181px){ .pm-map{grid-template-areas:"pon pon heart" "net net heart" "port port heart" "side proj heart" "side prod heart" "team team heart" "spine spine spine" "fnd fnd fnd"} }
@media (max-width:1180px){ .pm-map{grid-template-areas:"pon pon" "net net" "port port" "proj proj" "prod prod" "team team" "side heart" "fnd fnd"} }
@media (max-width:760px){ .pm-map{grid-template-areas:"pon" "net" "port" "proj" "prod" "team" "heart" "side" "fnd"} }

/* the Service band: keeping live services running */
.pm-poster{--m-sv:#6AA8F2}
.pm-svc{grid-area:svc} .pm-svc .pm-head{width:190px}
.pm-map{grid-template-areas:"pon pon heart" "net net heart" "port port heart" "side proj heart" "side prod heart" "team team heart" "svc svc heart" "spine spine spine" "fnd fnd fnd"}
@media (min-width:1181px){ .pm-map{grid-template-areas:"pon pon heart" "net net heart" "port port heart" "side proj heart" "side prod heart" "team team heart" "svc svc heart" "spine spine spine" "fnd fnd fnd"} }
@media (max-width:1180px){ .pm-map{grid-template-areas:"pon pon" "net net" "port port" "proj proj" "prod prod" "team team" "svc svc" "side heart" "fnd fnd"} }
@media (max-width:760px){ .pm-map{grid-template-areas:"pon" "net" "port" "proj" "prod" "team" "svc" "heart" "side" "fnd"} .pm-svc .pm-head{width:auto} }