/* Home page — "My Recent Projects" (index.html).
   Loaded after css/topology.css, which supplies the fonts, colours, header (#top), footer (#foot) and CV pop-up.
   Layout: the project brief takes the left 25% of the window, the project animation stage the other 75%. */

body.home {
  --brief-w: 25%;
  --fs: clamp(15px, 0.86vw, 30px);          /* brief text: ~16.5px at 1080p, ~33px cap at 4K */
  --accent: #4ade80;                         /* the site's hover green */
}

/* ---------- header row 2: title + project tabs ---------- */
.page-title { margin: 0; font-size: 26px; line-height: 34px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; }
#ptabs { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 22px; min-width: 0; }
#ptabs button {
  height: 32px; padding: 0 14px; display: flex; align-items: center; gap: 8px; border: 0; border-radius: 16px;
  background: none; color: #c9ced4; font: 600 13px Manrope, sans-serif; white-space: nowrap; cursor: pointer;
}
#ptabs button .yr { font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--muted); }
#ptabs button:hover { color: #fff; }
#ptabs button[aria-current="true"] { background: var(--text); color: var(--bg); }
#ptabs button[aria-current="true"] .yr { color: #4a5058; }
#ptabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- main: 25% brief | 75% stage ---------- */
#projects { position: fixed; left: 0; right: 0; top: var(--top); bottom: var(--bottom); display: flex; }
#brief {
  flex: 0 0 var(--brief-w); max-width: var(--brief-w); min-width: 0;
  display: flex; flex-direction: column; padding: 28px 28px 20px 24px;
  font-size: var(--fs); line-height: 1.55;
}
#show { flex: 1 1 auto; min-width: 0; padding: 12px 24px 16px 4px; }

/* slide number */
.idx { font-family: var(--mono); font-size: 0.8em; color: var(--muted); letter-spacing: 0.04em; margin-bottom: 1.4em; }
.idx #idx-n { color: var(--accent); font-weight: 700; }

/* typed brief */
#typed { flex: 1 1 auto; min-height: 0; overflow: auto; cursor: default; scrollbar-width: thin; }
#typed p { margin: 0; overflow-wrap: anywhere; }
#typed .t-co   { font-size: 1.32em; line-height: 1.3; font-weight: 800; letter-spacing: -0.01em; color: var(--text); }
#typed .t-co .ty { font-weight: 500; color: var(--muted); }
#typed .t-yr   { margin-top: 0.5em; font-family: var(--mono); font-size: 0.86em; color: var(--accent); }
#typed .t-role { margin-top: 1.1em; font-weight: 700; color: var(--ms-t); }
#typed .t-desc { margin-top: 0.6em; color: var(--soft); }
#typed .t-kh   { margin: 1.3em 0 0.45em; font-size: 0.72em; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
#typed .t-li   { position: relative; padding-left: 1.1em; font-size: 0.94em; line-height: 1.5; color: var(--text); }
#typed .t-li + .t-li { margin-top: 0.2em; }
/* a deliverable that opens a diagram on the map */
#typed .has-panel { cursor: pointer; }
#typed .has-panel > span:first-child { text-decoration: underline dotted rgba(74,222,128,0.7); text-underline-offset: 0.22em; text-decoration-thickness: 1.5px; }
#typed .has-panel:hover > span:first-child, #typed .has-panel.open > span:first-child { color: var(--accent); text-decoration-style: solid; }
#typed .has-panel > span:first-child::after { content: ' ›'; color: var(--accent); }
#typed .has-panel > span:first-child:empty::after { content: none; }   /* no arrow until the text starts typing */

#typed .t-sub { padding-left: 2.3em; font-size: 0.88em; line-height: 1.45; color: var(--soft); }
#typed .t-li + .t-sub { margin-top: 0.05em; }
#typed .t-sub + .t-sub { margin-top: 0; }
#typed .t-sub::before { left: 1.25em !important; top: 0.68em !important; width: 0.45em !important; height: 1px !important; background: #6b737d !important; }
#typed .t-li::before { content: ''; position: absolute; left: 0.1em; top: 0.62em; width: 0.42em; height: 0.42em; border-radius: 1px; background: var(--accent); }
.caret { display: inline-block; width: 0.55em; height: 1.05em; margin-left: 2px; vertical-align: -0.17em; background: var(--accent); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* pager: progress segments + previous / next */
.pager { flex: none; padding-top: 18px; }
/* disclaimer, above the progress bar */
.disclaimer {
  margin: 0 0 16px; padding: 10px 12px; display: flex; align-items: flex-start; gap: 10px;
  border: 1px solid rgba(242,193,78,0.35); border-left: 3px solid var(--warn); border-radius: 8px;
  background: rgba(242,193,78,0.07); color: var(--soft); font-size: 13px; line-height: 1.45;
}
.disclaimer svg { flex: none; width: 17px; height: 17px; margin-top: 1px; stroke-width: 1.9; color: var(--warn); }
@media (min-width: 2600px) { .disclaimer { font-size: 16px; padding: 14px 16px; } .disclaimer svg { width: 20px; height: 20px; } }
.progress { display: flex; gap: 6px; margin-bottom: 14px; }
.progress button { flex: 1; height: 14px; padding: 5px 0; border: 0; background: none; cursor: pointer; }
.progress button::before { content: ''; display: block; height: 4px; border-radius: 2px; background: var(--line); transition: background .2s; }
.progress button.done::before { background: #6b737d; }
.progress button[aria-current="true"]::before { background: var(--accent); }
.progress button:hover::before { background: #c9ced4; }
.pager-btns { display: flex; gap: 10px; }
.pg-btn {
  height: 52px; min-width: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid var(--line); border-radius: 26px; background: transparent; color: var(--text);
  font: 600 13px Manrope, sans-serif; cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
.pg-btn svg { width: 22px; height: 22px; flex: none; }
.pg-btn:hover:not(:disabled), .pg-btn:focus-visible { border-color: var(--accent); color: #fff; outline: none; }
.pg-btn:disabled { opacity: .3; cursor: default; }
.pg-next { flex: 1; min-width: 0; height: auto; min-height: 52px; justify-content: space-between; padding: 7px 16px 7px 20px; border: 2px solid var(--accent); box-shadow: 0 0 0 3px rgba(74,222,128,0.15); }
.pg-next:hover:not(:disabled) { background: rgba(74,222,128,0.12); }
.pg-next:disabled { border-color: var(--line); box-shadow: none; }
.pg-lbl { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.25; }
.pg-k { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; max-width: 100%; white-space: nowrap; font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.pg-yr { display: flex; flex-wrap: wrap; column-gap: 0.4em; min-width: 0; text-align: left; font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--accent); }
.pg-v { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }

/* the animation stage (empty for now) */
.show-frame { position: relative; height: 100%; border: 1px solid #30343a; border-radius: 16px; background: rgba(33,36,40,0.55); }
.show-tag { position: absolute; right: 16px; bottom: 12px; font-family: var(--mono); font-size: 11px; color: #5d646d; }

/* world map background (img/world.svg). 1 map unit = 1 degree: x = longitude + 180, y = 90 - latitude.
   Countries are paths with ISO alpha-2 ids (#GB, #CZ …); add class "on" to light one up. */
.map { position: absolute; inset: 20px 20px 34px; opacity: 0; transition: opacity .8s ease-out; }
.map.ready { opacity: 1; }
.map svg { display: block; width: 100%; height: 100%; }
.world .grat { fill: none; stroke: rgba(255,255,255,0.045); stroke-width: 1; vector-effect: non-scaling-stroke; }
.world .countries path { fill: #262a2f; stroke: #3a4047; stroke-width: 0.7; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: fill .3s; }
.world .countries path.on { fill: rgba(74,222,128,0.13); stroke: rgba(74,222,128,0.45); }
.world.tint-blue .countries path.on { fill: rgba(77,160,255,0.16); stroke: rgba(110,180,255,0.5); }   /* Novartis */

/* pins (drawn by js/home.js from PINS); sizes are in map units (degrees), so they scale with the map */
.world .links { opacity: 0; transition: opacity 1s ease-out .3s; }
.world .links.show { opacity: 1; }
.world .link { fill: none; stroke: rgba(74,222,128,0.55); stroke-width: 1.2; stroke-linecap: round; vector-effect: non-scaling-stroke; transition: stroke .2s, stroke-width .2s; }
.world .link-dev { stroke: rgba(77,180,255,0.6); }
.world .link-new { stroke-dasharray: 4 4; }
.world .link-closing { stroke: rgba(160,168,178,0.5); stroke-dasharray: 2 4; }
.world .link.on { stroke: #fff; stroke-width: 2; }
.world .link-hub, .world .link-core { stroke: rgba(242,193,78,0.7); stroke-width: 1.8; }   /* regional hub ↔ global hubs */
.world .pin .hub-halo { fill: rgba(74,222,128,0.15); stroke: var(--accent); stroke-width: 0.35; }
.world .pin.is-core .halo { fill: rgba(242,193,78,0.18); stroke: var(--warn); stroke-width: 0.35; }
.world .pin { cursor: pointer; }
.world .pin .hit { fill: transparent; stroke: none; }
.world .pin-label { display: none; fill: #e8eaed; font-family: Manrope, sans-serif; font-weight: 700; stroke: #1c1e21; stroke-width: 0.55; paint-order: stroke; pointer-events: none; }
.world.close-up .pin-label { display: block; }
.world.close-up .links, .world.close-up .links.show { opacity: 0.3; }
/* pulsing rings round the sites (a deliverable such as "Global AD Forest Build (O)") — colours match the segmentation layers */
.world .pulse { fill: rgba(173,223,190,0.22); stroke: #addfbe; stroke-width: 0.35; pointer-events: none; transform-box: fill-box; transform-origin: center; animation: pulse 2s ease-out infinite; }
.world .pulse-2 { animation-delay: 1s; }
.world .pulse-production { fill: rgba(245,185,212,0.22); stroke: #f5b9d4; }
.world .pulse-control { fill: rgba(255,207,158,0.22); stroke: #ffcf9e; }
.world .pulse-hq { fill: rgba(242,193,78,0.22); stroke: #f2c14e; }
.world .link-users { stroke: rgba(255,255,255,0.5); }
.world .pulse-red { fill: rgba(255,123,114,0.22); stroke: #ff8a80; }
.world .pulse-teal { fill: rgba(126,226,214,0.22); stroke: #7ee2d6; }
@keyframes pulse { from { transform: scale(0.6); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .world .pulse { animation: none !important; transform: scale(1.6); opacity: 0.8; } .world .pulse-2 { display: none; } }
.world .pin.on .dot { stroke: #fff; stroke-width: 0.5; }

/* site pop-up: the topology page's .card / #card, with a few extras */
#card { width: 380px; }
.t-hq { border-color: rgba(242,193,78,0.6); color: var(--warn); }
.t-grey { border-color: rgba(160,168,178,0.5); color: var(--muted); }
.cd-details { margin: 0; padding: 10px 12px; border: 1px solid #4a5058; border-left: 3px solid var(--accent); border-radius: 8px; background: rgba(74,222,128,0.06); color: var(--text); font-size: 12.5px; line-height: 1.5; }
.cd-empty { margin: 0; padding: 10px 12px; border: 1px dashed #4a5058; border-radius: 8px; color: var(--muted); font-size: 12px; }
@media (min-width: 2600px) { #card { width: 480px; font-size: 15px; line-height: 22px; } #card .cd-title { font-size: 22px; line-height: 28px; } }
.world .pin .dot { fill: var(--accent); stroke: #1c1e21; stroke-width: 0.35; }
.world .pin-dev .dot { fill: var(--ms); }
.world .pin-closing .dot { fill: #6b737d; }
.world .pin-office .dot { fill: #d5dae0; }
.world .pin-dr .dot { fill: #ff8a80; }
.world .pin-port .dot { fill: var(--ms); }
.world .pin-survey .dot { fill: #ff5c52; stroke: #1c1e21; }
/* scene layer: a drawing over the map, pinned to a point (js/home.js SCENES) */
.scene-layer { position: absolute; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .8s ease-out; }
.scene-leader { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; opacity: 0; transition: opacity .8s ease-out; }
.scene-layer.show, .scene-leader.show { opacity: 1; }
.scene-leader line { stroke: #ffb36b; stroke-width: 1.5; stroke-dasharray: 3 5; }
.scene-leader circle { fill: none; stroke: #ffb36b; stroke-width: 1.5; }
.world .link-chain { stroke: rgba(143,208,255,0.85); stroke-width: 1.8; stroke-dasharray: 2 5; }   /* voyage legs */
.world .arrowhead { fill: rgba(143,208,255,0.95); stroke: none; }

.world .link-dr { stroke: rgba(255,138,128,0.75); stroke-width: 1.6; stroke-dasharray: 5 4; }   /* DR replication link */
.world .pin-new .dot { fill: #1c1e21; stroke: var(--accent); stroke-width: 0.4; }
.world .pin-hq .dot { fill: #fff; }
.world .pin-hq .halo { fill: rgba(242,193,78,0.18); stroke: var(--warn); stroke-width: 0.35; }
.world .pin:hover .dot { stroke: #fff; stroke-width: 0.5; }
.map-key { position: absolute; left: 16px; bottom: 10px; display: flex; gap: 16px; font-size: 11px; color: var(--muted); }
.map-key[hidden], .map-also[hidden] { display: none; }
/* sites outside the zoomed view */
/* diagram panel over the map: four stacked layers */
/* a level of the map, top right under the view buttons (clear of the "Also" strip); the map stays at full brightness */
.lp-stack { position: absolute; right: 12px; z-index: 5; max-width: calc(100% - 24px); display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
.lp-stack > * { pointer-events: auto; max-width: 100%; }
.lp-stack.pos-top { top: 54px; }
.lp-stack.pos-bottom { bottom: 34px; transition: right .3s ease-out; }
.lp-stack.pos-topleft { top: 38px; left: 12px; right: auto; align-items: flex-start; }
.lp-stack.pos-bottomleft { bottom: 34px; left: 12px; right: auto; align-items: flex-start; }

/* browser mock-up panel (password-management tool) */
/* plain flow (RBC Decommissioning): no coloured boxes, icons twice the size, tinted in the box colour */
.layer-panel.is-plain.is-flow .lp-env { background: none; height: auto; padding: 0 4px; gap: 10px; }
.layer-panel.is-plain.is-flow .lp-env svg { width: 36px; height: 36px; stroke: currentColor; stroke-width: 1.6; }
.layer-panel.is-plain.is-flow .lp-env .lp-name { color: var(--text); }
.layer-panel.is-plain.is-flow .lp-env.lp-red { color: #ffaaa3; } .layer-panel.is-plain.is-flow .lp-env.lp-green { color: #6ed69c; }
.layer-panel.is-plain.is-flow .lp-flow { gap: 12px; }
@media (min-width: 2600px) { .layer-panel.is-plain.is-flow .lp-env { height: auto; } .layer-panel.is-plain.is-flow .lp-env svg { width: 48px; height: 48px; } }
/* RBC: DFS Migration — SAN | 2003 server + DFSR window | Robocopy window + 2012 R2 server; connectors drawn in JS (drawDfs) */
.layer-panel.is-dfs .lp-box { padding: 12px 14px 8px; }
.layer-panel.is-dfs .lp-head { margin-bottom: 10px; }
.lp-dfs { position: relative; display: grid; align-items: center; justify-items: center; column-gap: 44px; row-gap: 30px; padding: 0 2px 20px;
  grid-template-columns: auto auto auto; grid-template-areas: "san s03 rc" "san dfsr s12"; }
.df-san { grid-area: san; } .df-s03 { grid-area: s03; } .df-rc { grid-area: rc; } .df-dfsr { grid-area: dfsr; } .df-s12 { grid-area: s12; }
.df-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.df-links path { fill: none; stroke: #8a929c; stroke-width: 1.6; stroke-linejoin: round; }
.df-links .df-arr { marker-end: url(#df-head); } .df-links .df-two { marker-start: url(#df-head); }
.df-links marker path { fill: none; stroke: #8a929c; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lp-dfs .df-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; }
.lp-dfs .df-node svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lp-dfs .df-node .lp-name { color: var(--text); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.lp-dfs .df-node.lp-red { color: #ffaaa3; } .lp-dfs .df-node.lp-green { color: #6ed69c; } .lp-dfs .df-node.lp-azure { color: #7cc4ff; }
.df-cmd { position: relative; width: 196px; border: 1px solid #4a5058; border-radius: 5px; overflow: hidden; background: #0c0c0c; }
.df-bar { display: flex; align-items: center; gap: 5px; height: 17px; padding: 0 6px; background: #f0f0f0; color: #1c1e21; font-size: 9px; white-space: nowrap; overflow: hidden; }
.df-bar span { display: inline-flex; padding: 0 2px; border-radius: 2px; background: #0c0c0c; color: #ccc; font-family: var(--mono); font-size: 7.5px; line-height: 11px; }
.df-txt { padding: 5px 7px 6px; color: #cccccc; font-family: var(--mono); font-size: 9.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.df-cur { display: inline-block; width: .55em; height: 1em; margin-left: 2px; vertical-align: -2px; background: #cccccc; animation: caret 1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .df-cur { animation: none; } }
@media (max-height: 800px) { .lp-dfs { column-gap: 34px; row-gap: 24px; } .df-cmd { width: 172px; } .df-txt { font-size: 8.5px; } .lp-dfs .df-node svg { width: 24px; height: 24px; } }
@media (min-width: 2600px) { .lp-dfs { column-gap: 60px; row-gap: 40px; padding-bottom: 28px; } .df-cmd { width: 270px; } .df-bar { height: 22px; font-size: 12px; } .df-txt { font-size: 13px; } .lp-dfs .df-node svg { width: 42px; height: 42px; } .lp-dfs .df-node .lp-name { font-size: 15px; } .df-links path { stroke-width: 2.2; } }
/* RBC: P2V — physical server → virtual machine, looping every 7s (compact: icon beside the name) */
.layer-panel.is-p2v .lp-box { padding: 10px 12px 11px; }
.layer-panel.is-p2v .lp-head { margin-bottom: 7px; }
/* the top-left stack sits lower to clear the "Also" strip; RBC has none, so lift the box level with the Reset button */
.lp-stack.pos-topleft > .layer-panel.is-p2v:first-child { margin-top: -24px; }
@media (min-width: 2600px) { .lp-stack.pos-topleft > .layer-panel.is-p2v:first-child { margin-top: -32px; } }
.lp-p2v { display: flex; align-items: center; gap: 10px; }
.pv-node { display: flex; align-items: center; gap: 9px; height: 36px; padding: 0 4px; white-space: nowrap; }
.lp-p2v .pv-node { background: none; } .lp-p2v .pv-node.lp-pink { color: #ffaaa3; } .lp-p2v .pv-node.lp-green { color: #6ed69c; }
.pv-node svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.pv-node .lp-name { font-weight: 700; font-size: 12.5px; color: var(--text); }
.pv-node .lp-code { font-size: 10.5px; opacity: .75; }
.pv-frame { display: inline-flex; padding: 3px; border: 1.5px dashed currentColor; border-radius: 7px; flex: none; }
.pv-frame svg { width: 24px; height: 24px; }
.pv-track { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 84px; }
.pv-pipe { position: relative; width: 100%; height: 8px; border-radius: 4px; background: #3a4048; overflow: hidden; }
.pv-fill { position: absolute; inset: 0; width: 0; background: #6ed69c; animation: pv-fill 7s linear infinite; }
.pv-pipe b { position: absolute; top: 1px; left: -8px; width: 6px; height: 6px; border-radius: 1px; background: #f6b8cf; animation: pv-block 7s linear infinite; }
.pv-pipe b:nth-child(3) { animation-delay: .35s; } .pv-pipe b:nth-child(4) { animation-delay: .7s; }
.pv-st { position: relative; height: 14px; width: 100%; font-size: 10.5px; color: var(--soft); text-align: center; }
.pv-st span { position: absolute; inset: 0; }
.pv-go { animation: pv-go 7s linear infinite; } .pv-ok { color: #6ed69c; opacity: 0; animation: pv-ok 7s linear infinite; }
.pv-phys { animation: pv-phys 7s ease-in-out infinite; }
.pv-virt { animation: pv-virt 7s ease-in-out infinite; }
@keyframes pv-fill  { 0%, 8% { width: 0; } 58% { width: 100%; } 92% { width: 100%; opacity: 1; } 100% { width: 100%; opacity: 0; } }
@keyframes pv-block { 0%, 8% { left: -8px; opacity: 1; } 22% { left: 100%; } 23%, 100% { left: 100%; opacity: 0; } }
@keyframes pv-go    { 0%, 56% { opacity: 1; } 60%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes pv-ok    { 0%, 56% { opacity: 0; } 60%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes pv-phys  { 0%, 60% { opacity: 1; filter: none; } 70%, 92% { opacity: .45; filter: grayscale(1); } 100% { opacity: 1; filter: none; } }
@keyframes pv-virt  { 0%, 52% { opacity: .3; transform: scale(.96); } 62% { opacity: 1; transform: scale(1.04); } 68%, 92% { opacity: 1; transform: none; } 100% { opacity: .3; transform: scale(.96); } }
@media (prefers-reduced-motion: reduce) {
  .pv-fill, .pv-pipe b, .pv-go, .pv-ok, .pv-phys, .pv-virt { animation: none; }
  .pv-fill { width: 100%; } .pv-pipe b, .pv-go { opacity: 0; } .pv-ok { opacity: 1; } .pv-phys { opacity: .45; filter: grayscale(1); }
}
@media (min-width: 2600px) { .pv-node { height: 50px; } .pv-node .lp-name { font-size: 17px; } .pv-st { font-size: 14px; } .pv-node svg { width: 42px; height: 42px; } .pv-frame svg { width: 34px; height: 34px; } .pv-track { width: 120px; } }
/* RBC: Administrator PowerShell window (classic blue console) with a looping, scrolling build script */
.layer-panel.is-console .lp-box { padding: 12px 14px 14px; }
.layer-panel.is-console .lp-head { margin-bottom: 8px; }
.layer-panel.is-console .lp-title { font-size: 13.5px; }
.lp-ps { width: 470px; max-width: 100%; border-radius: 6px; overflow: hidden; border: 1px solid #3b4d6e; background: #012456; }
.ps-bar { display: flex; align-items: center; gap: 7px; height: 26px; padding-left: 9px; background: #f0f0f0; color: #1c1e21; font-size: 11px; }
.ps-icon { display: inline-flex; width: 14px; height: 14px; align-items: center; justify-content: center; border-radius: 2px; background: #012456; }
.ps-icon svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 1.6; }
.ps-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-ctl { display: flex; height: 100%; } .ps-ctl span { display: inline-flex; width: 34px; align-items: center; justify-content: center; }
.ps-ctl svg { width: 9px; height: 9px; fill: none; stroke: #1c1e21; stroke-width: 1; }
.ps-view { height: 250px; overflow: hidden; padding: 0 10px; color: #eeedf0; font-family: var(--mono); font-size: 10.5px; line-height: 1.55;
  -webkit-mask-image: linear-gradient(transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(transparent, #000 8%, #000 92%, transparent); }
.ps-roll { animation: ps-roll var(--dur, 60s) linear infinite; }
.ps-roll > div { white-space: pre-wrap; word-break: break-word; padding-left: 2ch; text-indent: -2ch; }
@keyframes ps-roll { to { transform: translateY(-50%); } }
.pt-k { color: #f9f1a5; } .pt-p { color: #b4b9c0; } .pt-s { color: #61d6d6; } .pt-v { color: #16c60c; } .pt-c { color: #13a10e; } .pt-pr { color: #eeedf0; }
@media (prefers-reduced-motion: reduce) { .ps-roll { animation: none; } }
@media (max-height: 800px) { .lp-ps { width: 420px; } .ps-view { height: 180px; font-size: 10px; } }
@media (min-width: 2600px) { .lp-ps { width: 660px; } .ps-bar { height: 34px; font-size: 14px; } .ps-view { height: 360px; font-size: 14.5px; } .layer-panel.is-console .lp-title { font-size: 16px; } }
.layer-panel.is-browser .lp-box { padding: 12px 14px 14px; }
.layer-panel.is-browser .lp-head { margin-bottom: 8px; }
.layer-panel.is-browser .lp-title { font-size: 13.5px; }
.lp-browser { width: 380px; max-width: 100%; border-radius: 8px; overflow: hidden; border: 1px solid #4a5058; background: #f4f6f8; color: #1c1e21; font-size: 11.5px; }
.lb-bar { display: flex; align-items: center; gap: 10px; height: 28px; padding: 0 10px; background: #dfe3e8; }
.lb-dots { display: flex; gap: 5px; } .lb-dots i { width: 8px; height: 8px; border-radius: 50%; background: #b9c0c8; }
.lb-dots i:first-child { background: #ff8a80; } .lb-dots i:nth-child(2) { background: #f2c14e; } .lb-dots i:nth-child(3) { background: #6ed69c; }
.lb-url { flex: 1; display: flex; align-items: center; gap: 5px; height: 18px; padding: 0 8px; border-radius: 9px; background: #fff; color: #5d646d; font-family: var(--mono); font-size: 10px; }
.lb-url svg, .lb-logo svg, .lb-ico svg { width: 11px; height: 11px; stroke: currentColor; stroke-width: 2.2; flex: none; }
.lb-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 8px; background: #1f3a5f; color: #fff; }
.lb-logo { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; border-radius: 5px; background: #6ed69c; color: #1c1e21; }
.lb-name { font-weight: 800; font-size: 12.5px; }
.lb-search { margin-left: auto; padding: 2px 10px; border-radius: 9px; background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.7); font-size: 10px; }
.lb-tabs { display: flex; gap: 14px; padding: 0 12px; background: #1f3a5f; }
.lb-tabs span { padding: 5px 0 6px; color: rgba(255,255,255,0.65); font-size: 10.5px; font-weight: 600; border-bottom: 2px solid transparent; }
.lb-tabs span.on { color: #fff; border-color: #6ed69c; }
.lb-rows { padding: 6px 10px 8px; }
.lb-row { display: flex; align-items: center; gap: 9px; padding: 6px 4px; border-bottom: 1px solid #e3e7eb; opacity: 0; transform: translateY(4px); transition: opacity .3s ease-out, transform .3s ease-out; transition-delay: calc(0.2s + var(--i) * 0.12s); }
.lb-row:last-child { border-bottom: 0; }
.layer-panel.show .lb-row { opacity: 1; transform: none; }
.lb-ico { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 6px; background: #e3ecf7; color: #1f3a5f; flex: none; }
.lb-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.lb-t b { font-weight: 700; } .lb-t span { color: #6b737d; font-size: 10px; }
.lb-pw { margin-left: auto; font-family: var(--mono); letter-spacing: 1px; color: #6b737d; }
.lb-btn { padding: 3px 9px; border-radius: 10px; background: #1f3a5f; color: #fff; font-size: 10px; font-weight: 700; white-space: nowrap; }
/* shorter windows: compact browser mock-up (3 rows) and the left-middle box a little higher, so the two never meet */
@media (max-height: 900px) {
  .show-frame .lp-stack.pos-midleft { top: auto; bottom: calc(34px + var(--bl-h, 0px) + 8px); transform: none; }
  .lp-browser { width: 330px; font-size: 10.5px; }
  .lb-head { padding: 7px 10px 6px; } .lb-tabs span { padding: 3px 0 4px; }
  .lb-row { padding: 4px 3px; } .lb-row:nth-child(n+4) { display: none; }
  .layer-panel.is-browser .lp-box { padding: 10px 12px 12px; }
}

@media (min-width: 2600px) { .lp-browser { width: 520px; font-size: 15px; } .lb-name { font-size: 16px; } .lb-tabs span, .lb-btn, .lb-t span, .lb-url, .lb-search { font-size: 13px; } }
.lp-stack.pos-midright { top: 50%; transform: translateY(-50%); }
.layer-panel.is-flow .lp-arrow2 { width: 44px; }
.lp-stack.pos-midleft { top: 50%; left: 12px; right: auto; align-items: flex-start; transform: translateY(-50%); }
/* note box: layer colour, info icon */
.lp-box.lp-note { display: flex; align-items: center; gap: 10px; max-width: 320px; padding: 10px 14px; border: 0; color: #1c1e21; font-size: 13px; font-weight: 600; line-height: 1.35; }
.lp-note svg { flex: none; width: 18px; height: 18px; stroke: #1c1e21; stroke-width: 2; }
.lp-box.lp-note-office { background: #addfbe; }
.lp-box.lp-note-production { background: #f5b9d4; }
.lp-box.lp-note-control { background: #ffcf9e; }
.lp-box.lp-note-red { background: #ffaaa3; }
.lp-box.lp-note-teal { background: #9fe8df; }
.layer-panel[hidden] { display: none; }
.lp-box { padding: 18px 18px 20px; background: #25292e; border: 1px solid #4a5058; border-radius: 14px; box-shadow: 0 24px 64px rgba(0,0,0,0.55); transform: translateY(8px); opacity: 0; transition: transform .3s ease-out, opacity .3s; }
.layer-panel.show .lp-box { transform: none; opacity: 1; }
.lp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.lp-title { font-size: 15px; font-weight: 800; }
.lp-layers { display: flex; flex-direction: column; gap: 8px; }
.lp-layer { display: flex; align-items: center; gap: 14px; height: 64px; padding: 0 18px; border-radius: 10px; color: #1c1e21; opacity: 0; transform: translateX(-10px); transition: opacity .35s ease-out, transform .35s ease-out; transition-delay: calc(0.15s + var(--i) * 0.12s); }
.layer-panel.show .lp-layer { opacity: 1; transform: none; }
.lp-layer svg { width: 28px; height: 28px; flex: none; stroke: #1c1e21; stroke-width: 1.7; }
.lp-name { font-size: 17px; font-weight: 800; }
.lp-sub { margin-left: auto; padding-left: 20px; font-size: 12px; font-weight: 600; opacity: 0.7; }
.lp-azure  { background: #a9d4f5; }   /* pastel Azure */
.lp-green  { background: #addfbe; }
.lp-pink   { background: #f5b9d4; }
.lp-orange { background: #ffcf9e; }
.lp-blue   { background: #b3c3f2; }
.lp-lilac  { background: #cfc6f5; }
.lp-yellow { background: #fbe4a2; }
.lp-red    { background: #ffaaa3; }

/* tree panel (e.g. PKI): root box, connector, child boxes side by side */
.layer-panel.is-tree .lp-box { padding: 12px 14px 14px; }
.layer-panel.is-tree .lp-head { margin-bottom: 10px; }
.layer-panel.is-tree .lp-title { font-size: 13.5px; }
.lp-tree { display: flex; flex-direction: column; align-items: center; }
.lp-node { display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 12px; border-radius: 8px; color: #1c1e21; white-space: nowrap;
  opacity: 0; transform: translateY(-6px); transition: opacity .35s ease-out, transform .35s ease-out; transition-delay: .15s; }
.lp-node svg { width: 18px; height: 18px; flex: none; stroke: #1c1e21; stroke-width: 1.7; }
.lp-node .lp-name { font-size: 13.5px; font-weight: 800; }
.lp-node .lp-code { font-family: Manrope, sans-serif; font-size: 10.5px; font-weight: 600; opacity: 0.7; }
.lp-kids { position: relative; display: flex; gap: 12px; padding-top: 22px; }
.lp-kids::before { content: ''; position: absolute; top: 0; left: 50%; height: 11px; border-left: 1.5px solid #8a929c; }                 /* down from the root */
.lp-kids::after { content: ''; position: absolute; top: 11px; left: 25%; right: 25%; border-top: 1.5px solid #8a929c; }                   /* across */
.lp-kid { position: relative; flex: 1; display: flex; justify-content: center; }
.lp-kid::before { content: ''; position: absolute; top: -11px; left: 50%; height: 11px; border-left: 1.5px solid #8a929c; }             /* down to each child */
.lp-kid .lp-node { transition-delay: calc(0.15s + var(--i) * 0.18s); }
.layer-panel.show .lp-node { opacity: 1; transform: none; }
@media (min-width: 2600px) { .lp-node { height: 56px; } .lp-node .lp-name { font-size: 17px; } .lp-node .lp-code { font-size: 13px; } .lp-node svg { width: 24px; height: 24px; } }

/* graph panel (Integral AWS): boxes on a grid joined by lines drawn behind them */
.lp-graph { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 30px; row-gap: 16px; justify-items: stretch; align-items: center; }
.lp-gcell { position: relative; z-index: 1; display: flex; justify-content: center; }
.lp-graph .lp-gcell .lp-node { width: 100%; justify-content: center; height: 38px; }
.lp-graph .lp-node.lp-orange { background: #ff9900; }   /* same colours as the map's cloud icons */
.lp-graph .lp-node.lp-azure { background: #3ea8ff; }
.lp-graph .lp-node { transition-delay: calc(0.15s + var(--i) * 0.15s); }
/* links between two ring: true boxes (the identity path): white, dotted and flowing */
.lp-links line.is-ring { stroke: #ffffff; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 0.1 6; animation: lp-ring-flow 0.9s linear infinite; }
@keyframes lp-ring-flow { to { stroke-dashoffset: -6.1; } }
@media (prefers-reduced-motion: reduce) { .lp-links line.is-ring { animation: none; } }
.lp-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 0; opacity: 0; transition: opacity .4s .5s; }
.lp-links line { stroke: #8a929c; stroke-width: 1.5; }
.layer-panel.show .lp-links { opacity: 1; }
.lp-node.lp-user { background: #2a2d31; border: 1.5px solid #fff; color: #fff; }
.lp-node.lp-user .lp-name { color: #fff; }
.lp-user-ico { width: 22px !important; height: 22px !important; fill: #fff; stroke: none !important; }
@media (min-width: 2600px) { .lp-graph { column-gap: 40px; row-gap: 34px; } .lp-user-ico { width: 28px !important; height: 28px !important; } }
/* flow panel (AD Architecture): DEV → TEST → LIVE — compact */
.layer-panel.is-flow .lp-box { padding: 12px 14px; }
.layer-panel.is-flow .lp-head { margin-bottom: 8px; }
.layer-panel.is-flow .lp-title { font-size: 13.5px; }
.layer-panel.is-flow .lp-flow { gap: 4px; padding: 0; }
.layer-panel.is-flow .lp-env { flex: none; height: 46px; gap: 9px; padding: 0 12px; border-radius: 8px; }
.layer-panel.is-flow .lp-env svg { width: 18px; height: 18px; }
.layer-panel.is-flow .lp-env .lp-name { font-size: 13.5px; }
.layer-panel.is-flow .lp-code { font-size: 10.5px; }
.layer-panel.is-flow .lp-arrow { width: 26px; height: 18px; }
.layer-panel.is-flow .lp-caption { margin-top: 8px; font-size: 12px; }
.lp-flow { display: flex; align-items: center; gap: 6px; padding: 6px 0 2px; }
.lp-env { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 12px; height: 76px; padding: 0 16px; border-radius: 10px; color: #1c1e21;
  opacity: 0; transform: translateX(-10px); transition: opacity .35s ease-out, transform .35s ease-out; transition-delay: calc(0.15s + var(--i) * 0.22s); }
.lp-env svg { width: 26px; height: 26px; flex: none; fill: none; stroke: #1c1e21; stroke-width: 1.7; }
.lp-env svg[data-icon="domain"] { fill: rgba(28,30,33,0.12); }
.lp-env-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.lp-env .lp-name { font-size: 16px; }
.lp-code { font-family: var(--mono); font-size: 12px; font-weight: 700; opacity: 0.7; }
.lp-arrow { flex: none; width: 40px; height: 24px; stroke: var(--soft); stroke-width: 2; opacity: 0; transition: opacity .35s; transition-delay: calc(0.15s + var(--i) * 0.22s); }
.layer-panel.show .lp-env { opacity: 1; transform: none; }
.layer-panel.show .lp-arrow { opacity: 1; }
.lp-caption { margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--soft); opacity: 0; transition: opacity .4s .9s; }
.layer-panel.show .lp-caption { opacity: 1; }
@media (min-width: 2600px) { .lp-stack.pos-topleft { top: 46px; } .lp-stack.pos-top { top: 70px; } .lp-stack.pos-bottom { bottom: 44px; } .lp-box.lp-note { max-width: 440px; font-size: 17px; } .lp-note svg { width: 24px; height: 24px; } .layer-panel.is-flow .lp-env { height: 64px; padding: 0 16px; } .layer-panel.is-flow .lp-env .lp-name { font-size: 18px; } .layer-panel.is-flow .lp-code { font-size: 13px; } .layer-panel.is-flow .lp-env svg { width: 24px; height: 24px; } .layer-panel.is-flow .lp-arrow { width: 36px; height: 24px; } .layer-panel.is-flow .lp-caption, .layer-panel.is-flow .lp-title { font-size: 16px; } }
/* layer stack: compact (half-height rows), at the top of the map */
.layer-panel.is-stack .lp-box { padding: 12px 14px 14px; }
.layer-panel.is-stack .lp-head { margin-bottom: 8px; }
.layer-panel.is-stack .lp-title { font-size: 13.5px; }
.layer-panel.is-stack .lp-layers { gap: 5px; }
.layer-panel.is-stack .lp-layer { height: 32px; gap: 10px; padding: 0 14px; border-radius: 7px; }
.layer-panel.is-stack .lp-layer svg { width: 18px; height: 18px; }
.layer-panel.is-stack .lp-name { font-size: 14px; }
.layer-panel.is-stack .lp-sub { font-size: 11px; }
@media (min-width: 2600px) { .layer-panel.is-stack .lp-layer { height: 44px !important; } .layer-panel.is-stack .lp-name { font-size: 18px !important; } .layer-panel.is-stack .lp-title { font-size: 17px; } }
@media (min-width: 2600px) { .lp-box { padding: 26px; } .lp-title { font-size: 20px; } .lp-layer { height: 88px; } .lp-name { font-size: 23px; } .lp-sub { font-size: 15px; } .lp-layer svg { width: 36px; height: 36px; } }

/* view buttons, top right of the map */
.map-views { position: absolute; top: 10px; right: 12px; z-index: 2; display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 18px; background: rgba(28,30,33,0.85); }
.map-views[hidden] { display: none; }
.map-views button { height: 28px; padding: 0 12px; border: 0; border-radius: 14px; background: none; color: #c9ced4; font: 600 12.5px Manrope, sans-serif; cursor: pointer; }
.map-views button:hover { color: #fff; }
.map-views button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.map-views .mv-reset { display: inline-flex; align-items: center; gap: 6px; color: var(--warn); }
.map-views .mv-reset[hidden], .map-views button[hidden] { display: none; }
.map-views .mv-reset svg { width: 13px; height: 13px; stroke-width: 2.2; }
.map-views .mv-reset:hover { color: #fff; }
.map-views button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.map-also { opacity: 0; transition: opacity .5s; }
.map-also.show { opacity: 1; }
.map-also { position: absolute; left: 16px; top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; max-width: calc(100% - 32px); font-size: 11.5px; color: var(--soft); }
.map-also .also-k { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.map-also .also-i { display: inline-flex; align-items: center; gap: 6px; }
.map-also .also-i::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.map-also .k-closing::before { background: #6b737d; }
.map-also .k-dev::before { background: var(--ms); }
.map-key .k { display: inline-flex; align-items: center; gap: 6px; }
.map-key .k::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.map-key .k-dev::before { background: var(--ms); }
.map-key .k-closing::before { background: #6b737d; }
.map-key .k-office::before, .map-also .k-office::before { background: #d5dae0; }
.map-key .k-dr::before { background: #ff8a80; }
.t-dr { border-color: rgba(255,138,128,0.6); color: #ffaaa3; }
.map-key .k-new::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--accent); }
.map-key .k-hq::before { background: #fff; box-shadow: 0 0 0 2px #1c1e21, 0 0 0 3px var(--warn); }
#show.swap .show-frame { animation: swap .45s ease-out; }
@keyframes swap { from { opacity: .35; } to { opacity: 1; } }

/* ---------- footer ---------- */
#foot .keys { color: var(--muted); }
#foot kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; margin-right: 4px; padding: 0 4px; border: 1px solid var(--line); border-radius: 4px; font: 600 11px 'Segoe UI Symbol', system-ui, sans-serif; color: var(--soft); }
#foot .foot-btn { flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; color: #c9ced4; }
#foot .keys + .foot-btn { margin-left: auto; }
#foot .foot-btn:hover, #foot .foot-btn:focus-visible { color: var(--accent); outline: none; }
#foot .foot-btn svg { width: 18px; height: 18px; stroke-width: 1.8; }
#foot { gap: 10px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- short windows (laptops: 768–900 px tall): tighten the brief so the deliverables fit ---------- */
@media (max-height: 900px) and (min-width: 901px) {
  body.home { --fs: 14px; }
  #brief { padding-top: 18px; padding-bottom: 14px; }
  .idx { margin-bottom: 0.9em; }
  #typed .t-role { margin-top: 0.8em; }
  #typed .t-kh { margin-top: 1em; }
  .disclaimer { margin-bottom: 10px; padding: 7px 10px; font-size: 11.5px; line-height: 1.4; }
  .progress { margin-bottom: 10px; }
  .pg-btn { height: 46px; min-width: 46px; }
  .pg-next { min-height: 46px; padding-top: 5px; padding-bottom: 5px; }
}

/* ---------- smaller windows ---------- */
@media (max-width: 1750px) { #ptabs button .yr { display: none; } }   /* six tabs: drop the years before they crowd the title */
@media (max-width: 1180px) { body.home { --brief-w: 33%; } }   /* a quarter is too narrow to read below this */
@media (max-width: 900px) {
  body.home { --top: 96px; --fs: 16px; }
  html, body.home { overflow: auto; }
  #top { position: relative; height: auto; padding-bottom: 10px; background: none; }   /* scrolls with the page */
  #top .top-row:last-child { flex-direction: column; align-items: flex-start; gap: 10px; }
  .center-link { display: none; }
  .site-nav .pill-btn:not(.round) { display: inline-flex; }
  #ptabs { max-width: 100%; overflow-x: auto; }
  #projects { position: static; flex-direction: column; padding-top: 0; padding-bottom: var(--bottom); min-height: 100vh; }
  #brief { flex: none; max-width: none; padding: 16px; }
  #typed { min-height: 14em; }
  #show { height: 50vh; padding: 0 16px 16px; }
  #foot .keys { display: none; }
  #foot .foot-btn:first-of-type { margin-left: auto; }
}

/* 4K: give the header controls room to breathe */
@media (min-width: 2600px) {
  #brief { padding: 48px 48px 32px 40px; }
  .pg-btn { height: 64px; min-width: 64px; border-radius: 32px; }
  .pg-v { font-size: 17px; }
}

/* laptops (≤ 800 px tall): tighten the PKI tree and the flow boxes so the left-hand column fits (kept last so it wins) */
@media (max-height: 800px) {
  .show-frame .layer-panel.is-tree .lp-box, .show-frame .layer-panel.is-flow .lp-box { padding: 9px 12px 11px; }
  .show-frame .layer-panel.is-tree .lp-head, .show-frame .layer-panel.is-flow .lp-head { margin-bottom: 7px; }
  .show-frame .lp-node { height: 36px; }
  .show-frame .lp-kids { padding-top: 18px; }
  .show-frame .lp-kids::before { height: 9px; } .show-frame .lp-kids::after { top: 9px; } .show-frame .lp-kid::before { top: -9px; height: 9px; }
  .show-frame .layer-panel.is-flow .lp-env { height: 40px; }
}
.map-key .k.k-port::before, .map-also .also-i.k-port::before { background: var(--ms); }   /* ports (Ocean Infinity) */
.map-key .k.k-survey::before { background: #ff5c52; }
#card .cd-facts dd { white-space: pre-line; }   /* line breaks in pop-up facts */
/* two-column layer box (Ocean Infinity technologies) */
.layer-panel.is-stack .lp-layers.lp-cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; width: 470px; }
.lp-cols2 .lp-layer { height: 30px !important; padding: 0 10px !important; gap: 8px !important; transition-delay: calc(0.1s + var(--i) * 0.04s); }
.lp-cols2 .lp-name { font-size: 12.5px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-cols2 .lp-sub { display: none; }
.lp-cols2 .lp-layer svg { width: 16px !important; height: 16px !important; }
@media (min-width: 2600px) { .layer-panel.is-stack .lp-layers.lp-cols2 { width: 640px; } .lp-cols2 .lp-layer { height: 42px !important; } .lp-cols2 .lp-name { font-size: 16px !important; } }
@media (max-height: 800px) { .layer-panel.is-stack .lp-layers.lp-cols2 { width: 445px; gap: 4px; } .lp-cols2 .lp-layer { height: 25px !important; } .lp-cols2 .lp-name { font-size: 11.5px !important; } }
/* photo panel (Ocean Infinity UAVs): two photos stacked, caption underneath */
.layer-panel.is-photos .lp-box { padding: 12px 12px 12px; }
.layer-panel.is-photos .lp-head { margin-bottom: 8px; }
.layer-panel.is-photos .lp-title { font-size: 13.5px; }
/* photo widths follow the window: a share of its width, but never taller than the map allows, within a min / max */
.layer-panel.is-photos { --ph-w: clamp(150px, min(13.5vw, calc((100vh - 330px) / 1.45)), 380px); }
.lp-stack.pos-midright .layer-panel.is-photos { --ph-w: clamp(190px, min(20.3vw, calc((100vh - 300px) / 0.75)), 570px); }
.lp-photos { display: flex; flex-direction: column; gap: 6px; width: var(--ph-w); }
.lp-photos img { display: block; width: 100%; height: auto; border-radius: 6px; opacity: 0; transform: translateY(6px); transition: opacity .4s ease-out, transform .4s ease-out; transition-delay: calc(.15s + var(--i) * .2s); }
.layer-panel.show .lp-photos img { opacity: 1; transform: none; }
.layer-panel.is-photos .lp-caption { margin: 8px 0 0; max-width: var(--ph-w); font-size: clamp(11px, 0.63vw, 15px); line-height: 1.4; transition-delay: .6s; }
/* left, vertically centred on the map at every screen size (Ocean Infinity UAV photos) */
.show-frame .lp-stack.pos-centerleft { top: 50%; left: 12px; right: auto; align-items: flex-start; transform: translateY(-50%); }
/* Seabed Constructor photo (right middle): 50% larger than the other photo boxes */
/* user markers (Integral Research): yellow person + number of users in that country */
.world .pin-users .u-head, .world .pin-users .u-body { fill: #fff; stroke: #1c1e21; stroke-width: .2; }
.world .pin-users .u-n { font: 800 2.5px Manrope, sans-serif; fill: #fff; stroke: #1c1e21; stroke-width: .5; paint-order: stroke; }
.world .pin-users.on .u-head, .world .pin-users.on .u-body { fill: #f2c14e; }
.map-key .k.k-users::before { background: #fff; }
/* cloud regions: cloud icons — AWS orange, Azure blue */
/* RBC: bank building pins (offices blue, the HQ gold) */
.world .b-ico { fill: #5aa9ff; stroke: #1c1e21; stroke-width: 1.1; vector-effect: none; }
.world .pin-hq .b-ico { fill: #f2c14e; }
.world .pin.on .b-ico { fill: #9fcbff; } .world .pin-hq.on .b-ico { fill: #ffe08a; }
.map-key .k.k-bank::before { background: #5aa9ff; border-radius: 2px; }
.world .pin-aws .c-ico, .world .pin-azure .c-ico { stroke: #1c1e21; stroke-width: 1.1; vector-effect: none; }
.world .pin-aws .c-ico { fill: #ff9900; }
.world .pin-azure .c-ico { fill: #3ea8ff; }
.world .pin-aws.on .c-ico { fill: #ffc266; } .world .pin-azure.on .c-ico { fill: #8fd0ff; }
.map-key .k.k-aws::before { background: #ff9900; } .map-key .k.k-azure::before { background: #3ea8ff; }
.map-also .k-users::before { background: #fff; }