/* Indexo look v4 (Nov 5, 2026): slate greys + Indexo orange in dark, soft greys in light.
   Minimal: square panels and tiles that touch (1px lines between them, no gaps), pill-shaped buttons and chips only.
   Plus Jakarta Sans. Sits ON TOP of scanner.css / project.css and changes nothing else.
   UNDO: delete this file's <link id="look-v4"> line (+ the small script after it) in index.html, project.html, work.html.
   Compare without deleting: open any page with ?look=old (remembered), back with ?look=new.
   Full backup of the site before this: G:\My Drive\claudeai\indexo_backups\2026-11-05_before_new_look */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap");

:root {
  --v4-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --v4-orange: #FFAB00;
}

/* =====================================================================
   PROJECT + WORK PAGES (project.css tokens), also the base tokens of every other page.
   Dark is the default (like the map); styles.css pages say data-theme="dark"|"light".
   ===================================================================== */
:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #2A2E37; --surface: #323844; --surface-2: #39404C; --line: rgba(255,255,255,.09); --line-2: rgba(255,255,255,.15);
  --ink: #F2F4F7; --ink-2: #C9CFD8; --muted: #8F98A7;
  --amber: #FFAB00; --amber-ink: #FFC24D; --amber-soft: rgba(255,171,0,.14);
  --l1: #FFAB00; --l2: #8FB1F0; --l3: #6FD0A6; --good: #6FD0A6; --conf: #FFC24D;
  --f-d: var(--v4-font); --f-b: var(--v4-font);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #E8E9EB; --surface: #F6F6F7; --surface-2: #EFF0F2; --line: rgba(20,22,26,.09); --line-2: rgba(20,22,26,.15);
  --ink: #18191C; --ink-2: #3D4047; --muted: #7B7F87;
  --amber: #E58A00; --amber-ink: #B86A00; --amber-soft: rgba(229,138,0,.12);
  --l1: #E58A00; --l2: #3E6AD8; --l3: #12946A; --good: #12946A; --conf: #B86A00;
}
/* page background: lighter on the left, darker on the right (like the reference dashboard) */
:root {
  --v4-bg-dark: linear-gradient(100deg, #424856 0%, #343944 38%, #2A2E36 68%, #22252B 100%);
  --v4-bg-light: linear-gradient(100deg, #F6F6F8 0%, #ECEDEF 45%, #E0E1E4 100%);
}
body.pj, :root:not([data-theme="light"]) body:not(.pj):not(.light-mode) { font-family: var(--v4-font); background: var(--v4-bg-dark) fixed; }
:root[data-theme="light"] body { background: var(--v4-bg-light) fixed; }

/* no rounded rectangles anywhere: panels, tiles, cards, photos, inputs */
.pj-top, .pj-hero-photo, .pj-photo-m, .wk-thumbs button, .pj-facts, .pj-facts div, .ax-body, .ax-unit, .ax-co, .ax-pick select, .ax-step,
.pj-stage-wrap, .pj-layerbtn, .pj-chainbtn, .pj-col, .pj-card, .pj-search, .pj-note, .pj-cta, .pj-detail,
.wk-card, .wk-docs a, .wk-orow a, .pj-pdfs a, .wk-docs i, .pj-pdfs i, .ax-fl i { border-radius: 0 !important; }

/* small labels: tracked sans instead of the typewriter mono */
.pj-eyebrow, .pj-facts span, .ax-lhead .t, .ax-uk, .ax-trade > span, .wk-orow small, .pj-ringlabel, .ax-unit .n {
  font-family: var(--v4-font) !important; font-weight: 600 !important; letter-spacing: .12em;
}

/* top bar: flat, full width, one line under it */
.pj-top { background: rgba(42,46,55,.88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
:root[data-theme="light"] .pj-top { background: rgba(246,246,247,.9); }
.pj-mark { font-weight: 800; letter-spacing: .02em; }
.pj-back { padding: 0 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.pj-theme { border-radius: 999px; background: var(--surface); }

/* hero */
.pj-hero h1 { font-weight: 600; letter-spacing: -.04em; }
.pj-hero h1 span { font-weight: 400; color: var(--amber); }
.pj-hero-photo, .pj-photo-m { border-color: var(--line); }

/* buttons + chips: the only round shapes */
.pj-btn { border-radius: 999px; min-height: 44px; padding: 0 20px; background: var(--surface); border-color: var(--line-2); font-weight: 600; }
.pj-btn.primary { background: var(--v4-orange); border-color: var(--v4-orange); color: #17181B; }
:root[data-theme="light"] .pj-btn { background: #fff; border-color: var(--line); }
:root[data-theme="light"] .pj-btn.primary { background: #1D1E21; border-color: #1D1E21; color: #fff; }
.pj-btn.sm { border-radius: 999px; }

/* a grid of touching tiles: the gap is 1px and shows the line colour behind */
.pj-facts { gap: 1px; background: var(--line); border: 1px solid var(--line); }
.pj-facts div, .pj-facts div:first-child, .pj-facts div:nth-child(2n+1) { padding: 20px 22px 22px; border: 0; background: var(--surface); }
.pj-facts b { font-weight: 300; }
.pj-facts div:first-child b { color: var(--amber); }
@media (max-width: 640px) {
  .pj-facts div, .pj-facts div:first-child, .pj-facts div:nth-child(2n+1) { padding: 14px 14px 16px; border: 0; }
}

/* floor-by-floor block: one panel, units and companies stacked edge to edge */
.ax-chip { min-height: 38px; padding: 0 16px; background: var(--surface); border-color: var(--line); font-weight: 600; }
.ax-chip[aria-pressed="true"] { background: var(--v4-orange); border-color: var(--v4-orange); color: #17181B; }
:root[data-theme="light"] .ax-chip { background: #fff; }
:root[data-theme="light"] .ax-chip[aria-pressed="true"] { background: #1D1E21; border-color: #1D1E21; color: #fff; }
.ax-body { border-color: var(--line); }
.ax-unit { margin: 0; border: 0; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.ax-unit + .ax-unit { border-top: 0; }
.ax-co { margin: 0; border-bottom: 1px solid var(--line); }
.ax-trade { padding: 0; }
.ax-grp { margin: 0; padding: 16px 20px 0; }
.ax-grp .ax-co { margin: 0; background: var(--surface-2); border: 1px solid var(--line); border-left: 2px solid var(--c); }
.ax-grp .ax-co + .ax-co { border-top: 0; }
.ax-whole { margin: 0; padding: 4px 20px 20px; }
.ax-list > .ax-grp:last-child { padding-bottom: 20px; }
@media (max-width: 900px) { .ax-grp, .ax-whole { padding-left: 12px; padding-right: 12px; } .ax-unit { margin: 0; } }

/* orbit + team board: three touching columns, cards as rows */
.pj-stage-wrap { border-color: var(--line); background: radial-gradient(ellipse at center, #3A414E 0%, var(--surface) 70%); }
:root[data-theme="light"] .pj-stage-wrap { background: radial-gradient(ellipse at center, #FFFFFF 0%, var(--surface) 75%); }
.pj-layerbtn + .pj-layerbtn { margin-top: -11px; }
.pj-board { gap: 1px; background: var(--line); border: 1px solid var(--line); }
.pj-board { align-items: stretch; }
.pj-col { border: 0; background: var(--surface); }
.pj-card .fl { font-family: var(--v4-font); font-weight: 500; }
.pj-col > header { border-top: 0; box-shadow: inset 0 3px 0 var(--c); }
.pj-card { margin: 0; border: 0; border-bottom: 1px solid var(--line); background: var(--surface); }
.pj-card.flash { border-color: var(--line); }
.pj-col .more { border-radius: 999px; }
.pj-card button { border-color: color-mix(in srgb, var(--amber) 55%, transparent); }
.pj-cta { border-style: solid; border-color: var(--line); background: var(--surface); }
.pj-detail:empty { display: none; }
.pj-st { font-weight: 600; }
@media (max-width: 900px) { .pj-board { gap: 1px; } }

/* work.html: side cards, documents and "also on" as touching rows */
.wk-thumbs { gap: 1px; }
.wk-side { gap: 0; }
.wk-card { border-color: var(--line); }
.wk-card + .wk-card { border-top: 0; }
.wk-docs { gap: 0; }
.wk-docs a { border-color: var(--line); }
.wk-docs a + a { border-top: 0; }
.wk-orow { gap: 0; }
.wk-orow a { border-color: var(--line); }
.wk-orow a + a { border-left: 0; }
.pj-pdfs { gap: 0; }
.pj-pdfs a + a { border-left: 0; }
.wk-scope { font-weight: 400; }
.pj-foot { border-top-color: var(--line); }

/* =====================================================================
   MAP / LANDING PAGE (scanner.css tokens)
   ===================================================================== */
:root {
  --tb-bg: rgba(44,48,57,.9); --tb-ink: #D4D9E1; --tb-ink-strong: #FFFFFF; --tb-muted: #8F98A7;
  --tb-line: rgba(255,255,255,.09); --tb-hover: rgba(255,255,255,.07); --tb-field: #3A404C; --tb-accent: #FFAB00;
  --tb-menu: #323844; --tb-shadow: 0 14px 40px rgba(0,0,0,.3);
  --cd-bg: #2C3039; --cd-surface: #343A46; --cd-ink: #F2F4F7; --cd-muted: #949DAC; --cd-line: rgba(255,255,255,.09);
  --panel-bg: rgba(46,51,61,.94);
}
body.light-mode {
  --tb-bg: rgba(246,246,247,.92); --tb-ink: #3D4047; --tb-ink-strong: #17181B; --tb-muted: #7B7F87;
  --tb-line: rgba(20,22,26,.09); --tb-hover: rgba(20,22,26,.05); --tb-field: #ECEDEF; --tb-accent: #D97F00;
  --tb-menu: #F6F6F7; --tb-shadow: 0 14px 40px rgba(20,22,26,.1);
  --cd-bg: #ECEDEF; --cd-surface: #F8F8F9; --cd-ink: #17181B; --cd-muted: #757A83; --cd-line: rgba(20,22,26,.09); --cd-accent: #D97F00;
  --panel-bg: rgba(246,246,247,.94);
}
body { font-family: var(--v4-font); }

/* no rounded rectangles on the map page either */
.cad-tool, .autocad-bar, .autocad-suggestions, #cadHistory, .cad-context-menu, .cad-suggestion-item, .cad-context-item, .cad-slash-hint,
.intro-panel, .intro-panel.min, .smart-panel, .intro-stats, .intro-stats div, .sp-item, .intro-search, .intro-city,
.project-card-cinematic, .bottom-carousel-container > div:first-child > div,
.credits-drawer, .cd-facts, .cd-facts div, .cd-note, .cd-credit, .cd-layerhead, .cd-open, .cd-search, .cd-cta, .cd-ph,
.leaflet-popup-content-wrapper, #tourBanner, .spot-panel, .spot-open, .spot-act, .spot-save input, .near-toast { border-radius: 0 !important; }

/* dark map: lift the near-black base towards the slate of the UI */
body:not(.light-mode) #map .leaflet-gl-layer { filter: brightness(1.32) saturate(1.15) contrast(.92); }
body:not(.light-mode) #map { background: #2A2E37; }
/* light map: neutral cool grey instead of beige */
body.light-mode #map .leaflet-tile-pane { filter: saturate(.5) brightness(1.03); }
.cd-loc { color: var(--cd-muted); }
.intro-eyebrow { letter-spacing: .04em !important; }

/* top bar and building panel follow the same left-to-right shading */
body:not(.light-mode) .cad-toolbar { background: linear-gradient(100deg, rgba(66,72,86,.94) 0%, rgba(42,46,54,.94) 60%, rgba(34,37,43,.94) 100%) !important; }
body.light-mode .cad-toolbar { background: linear-gradient(100deg, rgba(248,248,250,.94), rgba(226,227,230,.94)) !important; }
body:not(.light-mode) .credits-drawer { background: linear-gradient(100deg, #383D48 0%, #2C3039 55%, #24272E 100%); }
body:not(.light-mode) .cd-teamhead { background: rgba(44,48,57,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
/* top bar */
.cad-toolbar { backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; }
.cad-tool.active, .cad-tool.active-tool { background: rgba(255,171,0,.16) !important; }
.tool-label, .cad-tool::after { font-family: var(--v4-font) !important; }
.cad-supplier-link { font-family: var(--v4-font); border-radius: 999px; background: var(--tb-field); border-color: transparent; letter-spacing: .02em !important; }
body.light-mode .cad-supplier-link { background: #1D1E21; color: #fff !important; }

/* Ask bar */
.autocad-bar { padding: 0 12px 0 14px !important; }
.autocad-prompt { font-family: var(--v4-font) !important; font-weight: 800; color: #17181B !important; background: var(--v4-orange); border-radius: 999px; padding: 4px 9px; font-size: 10.5px !important; }
.autocad-input { font-family: var(--v4-font) !important; font-size: 14.5px !important; font-weight: 500; }
.cad-slash-hint { font-family: var(--v4-font); }
.cad-suggestion-item, #cadHistory { font-family: var(--v4-font) !important; }

/* panels on the map */
.intro-panel, .smart-panel { backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); font-family: var(--v4-font); }
.intro-title, .intro-stats b, .cd-title, .cd-teamhead h3, .spot-panel h2 { font-family: var(--v4-font) !important; letter-spacing: -.02em; }
.intro-title { font-weight: 700; }
.intro-stats { gap: 1px; background: var(--tb-line); border: 1px solid var(--tb-line); }
.intro-stats div { border: 0; background: var(--tb-field); }
.intro-stats b { font-weight: 300; font-size: 24px; }
.intro-eyebrow, .intro-stats span, .intro-city, .sp-k, .cd-eyebrow, .cd-facts span, .vc-code, .vc-credits, .pop-meta { font-family: var(--v4-font) !important; font-weight: 600; }
.intro-search, .sp-chip { font-family: var(--v4-font); }
.sp-list { gap: 0; }
.sp-item + .sp-item { border-top: 0; }

/* bottom: Featured / In view, round buttons, cards touching in one strip */
.bottom-carousel-container > div:first-child > div { padding: 3px !important; background: var(--panel-bg) !important; }
#btnFeatured, #btnVisible { border-radius: 999px !important; font-family: var(--v4-font) !important; padding: 7px 16px !important; }
body.light-mode #btnFeatured:not([style*="transparent"]), body.light-mode #btnVisible:not([style*="transparent"]) { background: #1D1E21 !important; color: #fff !important; }
.near-me-btn { background: var(--panel-bg); border-color: var(--tb-line); color: var(--tb-ink-strong); font-family: var(--v4-font); padding: 6px 14px; }
.near-me-btn:hover { border-color: var(--v4-orange); }
#btnFeatured, #btnVisible, .near-me-btn { white-space: nowrap; }
@media (max-width: 640px) {
  #btnFeatured, #btnVisible { padding: 7px 12px !important; }
  .near-me-btn { padding: 6px 11px; }
  /* phones: photo strip sits lower (was 12px + 10px scrollbar room + full home-bar inset) */
  .bottom-carousel-container { padding-bottom: 0 !important; }
  .carousel-scroll-area { padding-bottom: 0 !important; }
}
.carousel-scroll-area { gap: 0 !important; }
.project-card-cinematic { margin: 0 !important; border-color: var(--tb-line) !important; box-shadow: none !important; }
.project-card-cinematic + .project-card-cinematic { border-left: 0 !important; }
.project-card-cinematic.active-card { box-shadow: inset 0 0 0 2px var(--v4-orange) !important; }
.vc-code { border-radius: 999px; padding: 3px 8px; }
.vc-tag { border-radius: 999px; padding: 2px 9px; }
.vc-name { font-family: var(--v4-font); font-weight: 700; letter-spacing: -.01em; }

/* building panel: facts, the two big buttons and the team list all touching */
.credits-drawer { font-family: var(--v4-font); border-left-color: var(--cd-line); }
.cd-close { border-radius: 999px; }
.cd-facts { gap: 1px; background: var(--cd-line); border: 1px solid var(--cd-line); overflow: hidden; }
.cd-facts div { border: 0; background: var(--cd-surface); padding: 10px 12px; }
.cd-facts b { font-weight: 400; font-size: 20px; }
.cd-open { margin: 10px 0 0; font-family: var(--v4-font); box-shadow: none; }
.cd-open + .cd-open, .cd-open.cd-open2 { margin-top: -14px; }
body.light-mode .cd-open:not(.cd-open2) { background: #1D1E21; color: #fff !important; -webkit-text-fill-color: #fff; }
.cd-layer { gap: 0; }
.cd-layer .cd-role { margin: 10px 0 6px; }
.cd-credit { border-left-width: 3px; }
.cd-credit + .cd-credit { border-top: 0; }
.cd-role { font-family: var(--v4-font) !important; font-weight: 700; }
.cd-layerhead { font-family: var(--v4-font); border-bottom-width: 0; padding: 8px 12px; background: color-mix(in srgb, var(--lc) 12%, transparent); }
.cd-search { font-family: var(--v4-font); padding: 9px 14px; }
.cd-btn, .cd-other { font-family: var(--v4-font); }
.cd-cta { border-style: solid; background: var(--cd-surface); }
.cd-teamhead { background: var(--cd-bg); }
.cd-photos { gap: 1px; }

/* map popup */
.leaflet-popup-content-wrapper { overflow: hidden; }
.pop-title { font-family: var(--v4-font); }

/* phone switch + saved spots */
.ix-switch button, .ix-go, .ix-chip, .ix-apply, .ix-filter-btn { font-family: var(--v4-font) !important; }
@media (max-width: 640px) {
  .ix-switch { background: rgba(46,51,61,.9); border-color: rgba(255,255,255,.1); }
  body.light-mode:not(.ix-inspiring) .ix-switch { background: rgba(246,246,247,.94); border-color: var(--tb-line); }
  body.light-mode:not(.ix-inspiring) .ix-switch button[aria-selected="true"] { background: #1D1E21; color: #fff; -webkit-text-fill-color: #fff; }
}
.spot-panel { background: #2C3039; border-color: rgba(255,255,255,.09); font-family: var(--v4-font); }
.spot-list { gap: 0; }

/* =====================================================================
   EVERY OTHER PAGE: company page, suppliers landing, private edit page, account,
   client confirmation, privacy, Console (styles.css + supplier.css / account.css / admin.css tokens)
   ===================================================================== */
:root, :root[data-theme="dark"] {
  --accent: #FFAB00; --accent-ink: #FFC24D; --accent-soft: rgba(255,171,0,.14);
  --good: #6FD0A6; --good-soft: rgba(111,208,166,.13); --warn: #F2C866; --warn-soft: rgba(242,200,102,.11);
  --bad: #F59A90; --bad-soft: rgba(245,154,144,.12);
  --f-display: var(--v4-font); --f-body: var(--v4-font); --f-mono: var(--v4-font); --radius: 0px;
}
:root[data-theme="light"] {
  --accent: #E58A00; --accent-ink: #B86A00; --accent-soft: rgba(229,138,0,.12);
  --good: #12946A; --good-soft: #E2F1EA; --warn: #8A5A00; --warn-soft: #F5EDDB; --bad: #B42318; --bad-soft: #FAE5E3;
}

/* headings: lighter and tighter, like the project page */
.container h1, .wrap h1, .ac h1, .vf h1, .ad-main h1, .doc h1 { font-weight: 600; letter-spacing: -.04em; }
.container h2, .wrap h2, .ac h2, .vf h2, .ad-main h2, .doc h2 { font-weight: 600; letter-spacing: -.025em; }
.eyebrow, .credit-sample .k, .project dt, .sp-stats span, .dr-step, .iv-sec-head span, .ad-tag { font-weight: 600; letter-spacing: .12em; }
.sp-stats b, .ad-tile b { font-weight: 300; }

/* header bar: flat, frosted */
.site-header { background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.ad-top { background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.dr-top { background: #1D1E21; }
.band { background: var(--surface); }

/* square panels, cards, tiles and fields */
.credit-sample, .find, .status, .project, .claim, .project-check, .sp-logo, .sp-stats, .sp-map, .sp-card, .sp-box, .sp-confirm,
.dr-progress, .dr-card, .dr-list, .dr-box, .sp-cat, .sp-pdfs a, .dr-import-status, .dr-cat, .dr-place, .dr-place-item, .dr-place select,
.iv-sec, .iv-peers, .dr-photo, .dr-materials, .dr-client, .dr-client-fields select, .dr-add-photo, .dr-restore, .sp-mat span,
.ac-card, .ac-result, .ac-member, .ac select, .ad-card, .ad-tile, .ad-table-wrap, .ad-f input, .ad-f select, .ad-f textarea, .ad-search,
.ad-map, .ad-msg, .ad-code, .ad-toast, .vf-card, .vf .choices label, .vf-review, .vf-stars button, .sp-tag,
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"], input[type="number"], textarea, select { border-radius: 0 !important; }

/* buttons: pills; main button = orange in dark, charcoal in light */
.btn, .ad-btn, .ad-nav button, .dr-ph-btn, .dr-place-x { border-radius: 999px; }
.btn { font-weight: 600; }
.btn.primary { background: #FFAB00; border-color: #FFAB00; color: #17181B; }
:root[data-theme="light"] .btn.primary { background: #1D1E21; border-color: #1D1E21; color: #fff; }
.ad-nav button[aria-current="page"] { background: var(--accent); color: #17181B; }
:root[data-theme="light"] .ad-nav button[aria-current="page"] { background: #1D1E21; color: #fff; }
.iv-chip[aria-pressed="true"] { background: #FFAB00; border-color: #FFAB00; color: #17181B; }
:root[data-theme="light"] .iv-chip[aria-pressed="true"] { background: #1D1E21; border-color: #1D1E21; color: #fff; }

/* touching tiles and lists: 1px lines, no gaps */
.sp-grid, .sp-cats, .ad-tiles { gap: 1px; background: var(--line); border: 1px solid var(--line); }
.sp-card, .sp-cat, .ad-tile { border: 0; }
.sp-cat:hover { border: 0; box-shadow: inset 0 0 0 1px var(--accent); }
.sp-boxes { gap: 0; }
.sp-box + .sp-box { margin-left: -1px; }
.projects, .ac-results, .ac-team, .vf .choices, .sp-pdfs { gap: 0; }
.project + .project, .ac-result + .ac-result, .ac-member + .ac-member, .vf .choices label + label { margin-top: -1px; }
.sp-pdfs a + a { margin-left: -1px; }
.dr-col, .dr-side { gap: 0; }
.dr-col > * + *, .dr-side > * + * { margin-top: -1px; }
.sp-map { background: var(--surface-2); }
.dr-progress .bar { border-radius: 0; }

/* supply chain map (opens inside the map page) */
.search-container, .legend { border-radius: 0 !important; background: rgba(46,51,61,.94) !important; border-color: rgba(255,255,255,.09) !important; }

/* =====================================================================
   NO BROWN (Nov 5): orange is only used solid (buttons, pins, selected) or as text/lines.
   Soft orange fills turned brown on the dark grey, so in dark they are neutral greys now.
   ===================================================================== */
:root:not([data-theme="light"]) {
  --amber-soft: rgba(255,255,255,.07); --accent-soft: rgba(255,255,255,.07); --warn-soft: rgba(255,255,255,.06);
}
body:not(.light-mode) { --cd-warn-bg: rgba(255,255,255,.06); }
body:not(.light-mode) .cd-st.supplier_confirmed { background: rgba(255,255,255,.08); }
body:not(.light-mode) .cad-tool.active, body:not(.light-mode) .cad-tool.active-tool { background: rgba(255,255,255,.1) !important; }
body:not(.light-mode) .vc-code { background: rgba(0,0,0,.45); }
body:not(.light-mode) .sp-chip { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
.cd-layerhead { background: rgba(127,127,127,.1); box-shadow: inset 3px 0 0 var(--lc); }
.cd-note { box-shadow: inset 3px 0 0 var(--cd-accent); }
:root:not([data-theme="light"]) .pj-note { background: rgba(255,255,255,.06); border-color: var(--line); box-shadow: inset 3px 0 0 var(--amber); }
:root:not([data-theme="light"]) .wk-docs i, :root:not([data-theme="light"]) .pj-pdfs i { background: rgba(255,255,255,.1); }
:root:not([data-theme="light"]) .pj-layerbtn[aria-pressed="true"] { background: rgba(255,255,255,.07); }
:root:not([data-theme="light"]) .pj-card.flash { background: rgba(255,255,255,.08); }
/* floor bars: grey, brighter = more companies; the selected floor stays solid orange */
:root:not([data-theme="light"]) .ax-fl i { background: color-mix(in srgb, #FFFFFF calc(var(--a, 0) * 32%), var(--surface-2)); }
:root:not([data-theme="light"]) .ax-fl.sel i { background: var(--amber); }
:root:not([data-theme="light"]) .sp-logo { background: var(--surface-2); color: var(--accent); }
:root:not([data-theme="light"]) .ad-t tr.sel td { background: rgba(255,255,255,.07); }

/* =====================================================================
   NO UNDERLINES: links are recognised by colour, weight and the → arrow, never by a line under them.
   ===================================================================== */
a, a:hover, a:focus, a:visited { text-decoration: none !important; }
.pj-eyebrow a { border-bottom: 0; }
.sp-card a, .doc a, .lead a, .status a, .find a, .claim a, .vf a, .ac a, .wk-src a, .cd-more a, .sp-box a { font-weight: 600; color: var(--accent-ink, var(--amber-ink)); }
a { transition: color .15s, opacity .15s; }
a:hover { opacity: .8; }
.btn:hover, .pj-btn:hover, .cd-open:hover, a.btn:hover { opacity: 1; }
.site-footer a:hover, .pj-foot a:hover, .site-header nav a:hover { color: var(--ink); opacity: 1; }

/* =====================================================================
   NO GREEN (Nov 5): "verified / good" and the construction layer are ice blue;
   design & advisory moves to lavender so the three layers stay different.
   ===================================================================== */
:root, :root[data-theme="dark"] {
  --good: #7FD4F2; --good-soft: rgba(127,212,242,.13); --l3: #7FD4F2; --l2: #B3A4F7;
}
:root[data-theme="light"] {
  --good: #1C7FB0; --good-soft: #E3F1F8; --l3: #1C7FB0; --l2: #6A55D8;
}
:root { --cd-good: #7FD4F2; --cd-good-bg: rgba(127,212,242,.14); --st-verified: #5CC8EE; --cd-l3: #7FD4F2; --cd-l2: #B3A4F7; }
body.light-mode { --cd-good: #1C7FB0; --cd-good-bg: #E3F1F8; --st-verified: #1C8FC4; --cd-l3: #1C7FB0; --cd-l2: #6A55D8; }
.pin-main.st-verified { border-color: #0E3A4C; }
.pin-main.st-verified b { color: #0B2330; }
.sp-pin.good { background: #5CC8EE; border-color: #0E3A4C; }
.pj-node .st.verified { box-shadow: 0 0 0 2px rgba(127,212,242,.3); }
.pj-st.verified { border-color: color-mix(in srgb, var(--good) 50%, transparent); }
#cadHistory span[style*="#0f0"], #cadHistory span[style*="rgb(0, 255, 0)"] { color: #7FD4F2 !important; }
body.light-mode #cadHistory span[style*="#0f0"], body.light-mode #cadHistory span[style*="rgb(0, 255, 0)"] { color: #1C7FB0 !important; }

/* triangle arrows: a clear gap between the words and the triangle */
.co-link span[aria-hidden="true"] { margin-left: .2em; }

/* =====================================================================
   PIN POPUP on the map: same square slate panel as the building panel
   ===================================================================== */
.leaflet-popup-content-wrapper { border-radius: 0 !important; padding: 0 !important; overflow: hidden;
  background: linear-gradient(100deg, #3A404C 0%, #2E333C 60%, #282C34 100%) !important; color: #F2F4F7 !important;
  border: 1px solid rgba(255,255,255,.1) !important; box-shadow: 0 18px 44px rgba(0,0,0,.45) !important; backdrop-filter: none !important; }
.leaflet-popup-tip { background: #2C3139 !important; border: 1px solid rgba(255,255,255,.1); box-shadow: none !important; }
.leaflet-container a.leaflet-popup-close-button { top: 6px; right: 6px; width: 26px; height: 26px; line-height: 24px; font-size: 18px; color: #fff; background: rgba(0,0,0,.45); border-radius: 999px; z-index: 3; }
.leaflet-popup-content { margin: 0 !important; }
.pop-photo { height: 140px; border-radius: 0; }
.pop-credit { font-family: var(--v4-font) !important; font-weight: 500; letter-spacing: 0; background: rgba(0,0,0,.45); padding: 2px 6px; }
.pop-photo-none { background: rgba(255,255,255,.04) !important; height: 40px; }
.pop-photo-none span { font-family: var(--v4-font) !important; font-weight: 500; color: #949DAC !important; }
.leaflet-popup-content .micro-trailer-info { padding: 14px 16px 16px !important; background: none !important; }
.micro-trailer-popup .pop-title { font: 700 16px/1.25 var(--v4-font) !important; letter-spacing: -.015em; }
.micro-trailer-popup .pop-meta { font: 600 11.5px var(--v4-font) !important; letter-spacing: .02em; color: #949DAC; opacity: 1; margin-top: 4px; }
.pop-approx { font-family: var(--v4-font); font-weight: 600; color: #FFC24D !important; }
.micro-trailer-info span[onclick] { display: inline-block; background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.16) !important; color: #E8EBF0 !important;
  border-radius: 999px !important; font: 600 11px var(--v4-font) !important; padding: 3px 9px !important; }
.micro-trailer-info button { border-radius: 999px !important; min-height: 40px !important; font: 700 13.5px var(--v4-font) !important; background: #FFAB00 !important; }
/* light mode */
body.light-mode .leaflet-popup-content-wrapper { background: linear-gradient(100deg, #FAFAFB 0%, #F0F1F3 100%) !important; color: #17181B !important; border-color: rgba(20,22,26,.1) !important; box-shadow: 0 16px 40px rgba(20,22,26,.16) !important; }
body.light-mode .leaflet-popup-tip { background: #F2F3F5 !important; border-color: rgba(20,22,26,.1); }
body.light-mode .micro-trailer-popup .pop-meta, body.light-mode .pop-photo-none span { color: #757A83 !important; }
body.light-mode .pop-photo-none { background: rgba(20,22,26,.04) !important; }
body.light-mode .pop-approx { color: #B86A00 !important; }
body.light-mode .micro-trailer-info span[onclick] { background: #fff !important; border-color: rgba(20,22,26,.12) !important; color: #3D4047 !important; }
body.light-mode .micro-trailer-info button { background: #1D1E21 !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }

/* PIN POPUP v2 (Nov 5): a table. Name band (darkest), then label | value rows in alternating greys, then a flush orange bar. */
.leaflet-popup-content-wrapper { background: #2A2E36 !important; }
.leaflet-popup-content .micro-trailer-info.pt { padding: 0 !important; }
.pt-head { padding: 12px 14px 13px; background: #1E2127; }
.pt-kind { display: block; font: 600 10px var(--v4-font); letter-spacing: .14em; text-transform: uppercase; color: #8F98A7; }
.micro-trailer-popup .pt .pop-title { margin-top: 4px; font: 700 17px/1.2 var(--v4-font) !important; letter-spacing: -.02em; color: #FFFFFF; }
.pt-t { width: 100%; border-collapse: collapse; font: 500 13px/1.35 var(--v4-font); }
.pt-t th, .pt-t td { padding: 9px 14px; border-top: 1px solid rgba(255,255,255,.06); vertical-align: top; text-align: left; }
.pt-t th { width: 40%; padding-right: 8px; font: 600 10px/1.9 var(--v4-font); letter-spacing: .12em; text-transform: uppercase; color: #8F98A7; background: #2A2E36; }
.pt-t td { color: #E8EBF0; background: #333844; overflow-wrap: anywhere; }
.pt-t tr:nth-child(even) th { background: #262A31; }
.pt-t tr:nth-child(even) td { background: #2E333D; }
.pt-t td a { color: #FFFFFF; font-weight: 700; }
.pt-t td a:hover { color: #FFC24D; opacity: 1; }
.pt-warn { color: #FFC24D; font-weight: 600; }
.pt-more { color: #8F98A7; }
.micro-trailer-info .pt-go { display: block; width: 100%; min-height: 44px !important; margin: 0; border: 0; border-radius: 0 !important; background: #FFAB00 !important; color: #17181B !important; -webkit-text-fill-color: #17181B; font: 700 14px var(--v4-font) !important; cursor: pointer; }
.micro-trailer-info .pt-go:hover { background: #FFB929 !important; }
/* light mode */
body.light-mode .leaflet-popup-content-wrapper { background: #F7F7F8 !important; }
body.light-mode .pt-head { background: #E2E3E6; }
body.light-mode .pt-kind, body.light-mode .pt-t th, body.light-mode .pt-more { color: #6E727A; }
body.light-mode .micro-trailer-popup .pt .pop-title { color: #17181B; }
body.light-mode .pt-t th, body.light-mode .pt-t td { border-top-color: rgba(20,22,26,.07); }
body.light-mode .pt-t th { background: #ECEDEF; }
body.light-mode .pt-t td { background: #F8F8F9; color: #2A2C31; }
body.light-mode .pt-t tr:nth-child(even) th { background: #E7E8EB; }
body.light-mode .pt-t tr:nth-child(even) td { background: #F1F2F4; }
body.light-mode .pt-t td a { color: #17181B; }
body.light-mode .pt-t td a:hover { color: #B86A00; }
body.light-mode .pt-warn { color: #B86A00; }
body.light-mode .micro-trailer-info .pt-go { background: #1D1E21 !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF; }
/* the little pointer under the popup continues the bottom bar */
.leaflet-popup-tip { background: #FFAB00 !important; border: 0 !important; }
body.light-mode .leaflet-popup-tip { background: #1D1E21 !important; }
.pt-sub { display: block; margin-top: 2px; font: 500 11.5px/1.35 var(--v4-font); color: #8F98A7; }
body.light-mode .pt-sub { color: #6E727A; }
/* a little wider so company names fit on one line */
.leaflet-popup-content { width: 284px !important; }
.pt-t th { width: 34%; }

/* =====================================================================
   TOP BARS: a thin vertical line between every button (Nov 5)
   ===================================================================== */
:root { --v4-divider: rgba(255,255,255,.16); }
:root[data-theme="light"], body.light-mode { --v4-divider: rgba(20,22,26,.16); }
/* map bar: one rule for every item instead of the old scattered separators */
.cad-toolbar .cad-separator { display: none !important; }
.cad-toolbar > .cad-tool, .cad-toolbar > div > .cad-tool, .cad-toolbar > div > .cad-supplier-link { position: relative; margin-left: 13px !important; }
.cad-toolbar > .cad-tool::before, .cad-toolbar > div > .cad-tool::before, .cad-toolbar > div > .cad-supplier-link::before {
  content: ""; position: absolute; left: -7px; top: 50%; width: 1px; height: 22px; margin-top: -11px; background: var(--v4-divider); pointer-events: none; }
/* project / work pages */
.pj-topr { gap: 13px; }
.pj-topr > * + * { position: relative; }
.pj-topr > * + *::before { content: ""; position: absolute; left: -7px; top: 50%; width: 1px; height: 22px; margin-top: -11px; background: var(--v4-divider); }
/* company, suppliers, account, privacy pages */
.site-header nav { gap: 26px; }
.site-header nav > * + * { position: relative; }
.site-header nav > * + *::before { content: ""; position: absolute; left: -13px; top: 50%; width: 1px; height: 18px; margin-top: -9px; background: var(--v4-divider); }
/* Console */
.ad-nav { gap: 13px; }
.ad-nav > * + * { position: relative; }
.ad-nav > * + *::before { content: ""; position: absolute; left: -7px; top: 50%; width: 1px; height: 20px; margin-top: -10px; background: var(--v4-divider); }
@media (max-width: 640px) {
  .cad-toolbar > .cad-tool, .cad-toolbar > div > .cad-tool, .cad-toolbar > div > .cad-supplier-link { margin-left: 9px !important; }
  .cad-toolbar > .cad-tool::before, .cad-toolbar > div > .cad-tool::before, .cad-toolbar > div > .cad-supplier-link::before { left: -5px; height: 18px; margin-top: -9px; }
  .site-header nav { gap: 22px; }
  .site-header nav > * + *::before { left: -11px; }
}
.cad-toolbar > .tb-logo + .cad-separator { display: none !important; }
@media (max-width: 640px) {
  .cad-toolbar > .cad-tool, .cad-toolbar > div > .cad-tool { width: 32px !important; margin-left: 6px !important; }
  .cad-toolbar > .cad-tool::before, .cad-toolbar > div > .cad-tool::before { left: -4px; }
  .cad-toolbar .cad-tool svg { width: 18px; height: 18px; }
}

/* pin popup lifts off the map: drop shadow around the panel AND its pointer */
.leaflet-popup-content-wrapper { box-shadow: none !important; }
.leaflet-popup { filter: drop-shadow(0 22px 34px rgba(0,0,0,.6)) drop-shadow(0 3px 6px rgba(0,0,0,.45)); }
body.light-mode .leaflet-popup { filter: drop-shadow(0 20px 32px rgba(20,22,26,.28)) drop-shadow(0 2px 5px rgba(20,22,26,.18)); }

/* =====================================================================
   LOGO "indexo · the city scanner" (Nov 5): image logo in every top bar,
   white version in dark mode, black version in light mode. The old text
   INDEXO stays in the HTML (for screen readers) but is hidden.
   ===================================================================== */
.tb-logo, .wordmark, .pj-mark {
  display: inline-block !important; flex: none; aspect-ratio: 341 / 160; height: 52px; width: auto; min-height: 0 !important;
  font-size: 0 !important; color: transparent !important; -webkit-text-fill-color: transparent; letter-spacing: 0 !important; overflow: hidden;
  background: url("indexo-logo-dark.png?v=1") left center / contain no-repeat; }
.tb-logo span, .wordmark .x, .pj-mark span { display: none !important; }
:root[data-theme="light"] .wordmark, :root[data-theme="light"] .pj-mark, body.light-mode .tb-logo {
  background-image: url("indexo-logo-light.png?v=1"); }
.tb-logo { height: 50px; margin-right: 14px !important; }   /* map bar is 56px tall */
.ad-top .wordmark { height: 44px; }
/* =====================================================================
   PHOTO ALBUMS (Nov 5): on the company's edit page (draft.html) each project's
   photos are grouped in albums; on its work page (work.html) albums are tabs.
   ===================================================================== */
.dr-album { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; display: grid; gap: 10px; }
.dr-album-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.dr-album-name { font: 700 15px var(--v4-font); color: var(--ink); background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 4px 8px; min-width: 120px; max-width: 260px; }
.dr-album-name:hover, .dr-album-name:focus { border-color: var(--line); background: var(--surface); outline: none; }
.dr-album-head .muted { font-size: 12px; }
.dr-album-acts { margin-left: auto; display: flex; gap: 6px; }
.dr-ph-album { width: 100%; margin-top: 6px; font: 600 12px var(--v4-font); border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; background: var(--surface); color: var(--ink); }
.dr-album-add { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; border: 1px dashed var(--line); border-radius: 12px; padding: 10px 12px; margin-top: 12px; }
.dr-album-add strong { margin-right: 4px; font-size: 13px; }
.dr-chip { border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 12px var(--v4-font); border-radius: 999px; padding: 5px 11px; cursor: pointer; }
.dr-chip:hover { border-color: var(--amber, #FFAB00); }
.dr-album-new { font: 500 13px var(--v4-font); border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; background: var(--surface); color: var(--ink); min-width: 140px; }
/* "Based in": several places as chips (draft.html) */
.dr-bases { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dr-bases input { flex: 1 1 180px; min-width: 160px; }
.dr-base { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 11px; border-radius: 999px; background: var(--surface-2, rgba(255,255,255,.08)); border: 1px solid var(--line); font: 600 13px var(--v4-font); color: var(--ink); }
.dr-base button { width: 22px; height: 22px; border: 0; border-radius: 999px; background: transparent; color: var(--muted, #8F98A7); cursor: pointer; font-size: 11px; }
.dr-base button:hover { background: rgba(255,171,0,.2); color: var(--ink); }
.wk-albums { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.wk-albums button { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font: 700 13px var(--v4-font); border-radius: 999px; padding: 7px 14px; cursor: pointer; }
.wk-albums button span { font-weight: 600; opacity: .65; margin-left: 4px; }
.wk-albums button[aria-selected="true"] { background: #FFAB00; border-color: #FFAB00; color: #17181B; }
:root[data-theme="light"] .wk-albums button[aria-selected="true"] { background: #1D1E21; border-color: #1D1E21; color: #fff; }

/* =====================================================================
   INDY (Nov 5): the Ask bar's assistant. Orange pill with a ✦ that softly
   glows, so the bar reads as "someone to ask", not a plain search field.
   ===================================================================== */
.autocad-prompt.indy-pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px 5px 9px; font-size: 12px !important;
  letter-spacing: .01em; text-transform: none; cursor: help; box-shadow: 0 0 0 3px rgba(255,171,0,.16); }
.indy-pill i { font-style: normal; font-size: 11px; line-height: 1; display: inline-block; animation: indy-glow 2.8s ease-in-out infinite; }
@keyframes indy-glow { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(1.25) rotate(45deg); opacity: .75; } }
.autocad-bar:focus-within .indy-pill i { animation-duration: 1.2s; }
.sp-k .indy-mark { font-style: normal; color: #FFAB00; margin-right: 5px; }
body.light-mode .autocad-prompt.indy-pill { box-shadow: 0 0 0 3px rgba(255,171,0,.22); }
@media (prefers-reduced-motion: reduce) { .indy-pill i { animation: none; } }
/* voice: microphone + EN/ع language switch on the right of the Ask bar */
.indy-mic, .indy-lang { flex: none; border: 0; background: transparent; color: var(--tb-muted); cursor: pointer; display: grid; place-items: center; border-radius: 999px; }
.indy-mic { width: 32px; height: 32px; margin-left: 6px; }
.indy-mic[hidden], .indy-lang[hidden] { display: none; }
.indy-mic:hover { color: var(--tb-ink-strong); background: var(--tb-hover); }
.indy-lang { min-width: 26px; height: 22px; padding: 0 6px; margin: 0 6px 0 2px; font: 700 10.5px var(--v4-font); border: 1px solid var(--tb-line); }
.indy-lang:hover { color: var(--tb-ink-strong); border-color: var(--tb-accent); }
.indy-mic.is-on { color: #17181B; background: #FFAB00; animation: indy-listen 1.3s ease-in-out infinite; }
@keyframes indy-listen { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,171,0,.55); } 50% { box-shadow: 0 0 0 7px rgba(255,171,0,0); } }
.autocad-bar.is-listening { border-color: #FFAB00 !important; }
@media (prefers-reduced-motion: reduce) { .indy-mic.is-on { animation: none; } }
@media (max-width: 640px) { .cad-slash-hint { display: none !important; } .indy-lang { margin-right: 0; } }

/* =====================================================================
   TOP BAR v2 (Nov 5): Trades, Building type and Filters sit together as one
   group (no dividers between them, small gaps); the Ask bar takes all the
   free width up to the right-hand buttons (room for Undo / Save later).
   ===================================================================== */
/* still a thin line between the three, just closer together than before (9px instead of 13px) */
.cad-toolbar > .cad-tool.has-label { margin-left: 9px !important; }
.cad-toolbar > .cad-tool.has-label::before { display: block !important; left: -5px !important; }
.cad-toolbar > .cad-tool.has-label[data-cmd="SUPPLIERS (C)"] { margin-left: 13px !important; }
.cad-toolbar > .cad-tool.has-label[data-cmd="SUPPLIERS (C)"]::before { display: block !important; }
.cad-toolbar > .cad-tool.has-label:not([style*="width: 40px"]) { padding: 0 9px !important; }
/* about 1cm (38px) of air on each side of the Ask bar */
.autocad-bar.docked { max-width: none !important; flex: 1 1 auto; margin: 0 52px 0 54px !important; }
@media (max-width: 640px) {
  .cad-toolbar > .cad-tool.has-label { margin-left: 6px !important; }
  .cad-toolbar > .cad-tool.has-label::before { left: -4px !important; }
  .cad-toolbar > .cad-tool.has-label[data-cmd="SUPPLIERS (C)"] { margin-left: 9px !important; }
}
/* Tablets and phones: the Ask bar drops to its own row under the top bar. The bar's blur made it the
   containing block of that row, which then got clipped (Ask bar invisible on phones), so no blur there. */
@media (max-width: 1020px) {
  .cad-toolbar { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; justify-content: flex-start !important; }
  .cad-toolbar > div[style*="margin-left: auto"] { margin-left: auto !important; }
  .autocad-bar.docked { margin: 0 !important; }
}

/* =====================================================================
   TRADES FILTER (Nov 5): several trades at once, click again to remove,
   chip bar under the top bar with ✕ per trade and Clear.
   ===================================================================== */
.yellow-pin-icon.trade-off, .yellow-pin-icon.search-off { display: none !important; }
#categoriesMenu .cad-context-item[data-trade] { position: relative; padding-right: 30px !important; }
#categoriesMenu .cad-context-item.is-on { background: rgba(255,171,0,.16) !important; color: var(--tb-ink-strong) !important; font-weight: 700; }
#categoriesMenu .cad-context-item.is-on::after { content: "✓"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--tb-accent); font-weight: 800; }
#categoriesMenu .cad-context-item.is-on:hover { color: #111 !important; }
#categoriesMenu .cad-context-item.is-on:hover::after { color: #111; }
#categoriesMenu .cad-context-item[data-trade] { display: flex; align-items: center; gap: 10px; }
#categoriesMenu .trade-n { margin-left: auto; font: 600 11px var(--v4-font); font-style: normal; color: var(--tb-muted); }
#categoriesMenu .cad-context-item:hover .trade-n { color: #111; }
#categoriesMenu .trade-empty { padding: 10px; color: var(--tb-muted); font-size: 12px; }
.trade-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 2px 2px; font: 600 10.5px var(--v4-font); letter-spacing: .02em; color: var(--tb-muted); }
.trade-menu-head button, .trade-chips .tc-clear { border: 1px solid var(--tb-line); background: transparent; color: var(--tb-ink-strong); font: 700 11.5px var(--v4-font); border-radius: 999px; padding: 3px 10px; cursor: pointer; }
.trade-menu-head button:hover, .trade-chips .tc-clear:hover { border-color: var(--tb-accent); color: var(--tb-accent); }
.trade-menu-head button[hidden], .trade-chips[hidden] { display: none; }
.cad-tool.has-trades { color: var(--tb-accent) !important; }
.trade-chips { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 2050; max-width: calc(100vw - 24px);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; padding: 6px 8px;
  background: var(--tb-menu); border: 1px solid var(--tb-line); border-radius: 999px; box-shadow: var(--tb-shadow); font: 600 12.5px var(--v4-font); color: var(--tb-ink); }
.trade-chips .tc-count { padding: 0 6px 0 8px; color: var(--tb-muted); white-space: nowrap; }
.trade-chips .tc-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 11px; border-radius: 999px; background: #FFAB00; color: #17181B; font-weight: 700; white-space: nowrap; }
.trade-chips .tc-chip button { width: 20px; height: 20px; border: 0; border-radius: 999px; background: rgba(0,0,0,.14); color: #17181B; font-size: 10px; line-height: 20px; cursor: pointer; padding: 0; }
.trade-chips .tc-chip button:hover { background: rgba(0,0,0,.3); }
body.light-mode .trade-chips .tc-chip { background: #1D1E21; color: #fff; }
body.light-mode .trade-chips .tc-chip button { background: rgba(255,255,255,.18); color: #fff; }
@media (max-width: 1020px) { .trade-chips { top: 112px; } }
/* ASK BAR answers (Nov 5): plain-language answer, "Did you mean", AI reading line */
.sp-answer { margin: 0 16px 10px; padding: 10px 12px; background: rgba(255,171,0,.08); border-left: 3px solid #FFAB00; display: grid; gap: 6px; }
.sp-answer p { margin: 0; font: 500 12.5px/1.5 var(--v4-font); color: var(--tb-ink); }
.sp-answer b { color: var(--tb-ink-strong); }
.sp-near { border: 1px solid var(--tb-line); background: var(--tb-field); color: var(--tb-ink-strong); font: 700 12px var(--v4-font); border-radius: 999px; padding: 3px 10px; margin: 2px 2px 0 0; cursor: pointer; }
.sp-near:hover { border-color: var(--tb-accent); color: var(--tb-accent); }
.sp-miss { color: #C98A00 !important; font-weight: 600; }
body.light-mode .sp-miss { color: #9A6400 !important; }
.sp-ai { margin: 0 16px 10px; font: 600 12px var(--v4-font); color: var(--tb-muted); display: flex; align-items: center; gap: 8px; }
.sp-ai::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--tb-line); border-top-color: #FFAB00; animation: sp-spin .8s linear infinite; }
@keyframes sp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sp-ai::before { animation: none; } }

/* the dot that marks "the trade you're looking for" in the pin popup and the credits panel */
.trade-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #FFAB00; margin-right: 7px; vertical-align: 1px;
  box-shadow: 0 0 0 3px rgba(255,171,0,.22); flex: none; }
.cd-picked { background: rgba(255,171,0,.06); }
body.light-mode .cd-picked { background: rgba(255,171,0,.08); }
.cd-role-picked { display: flex; align-items: center; color: var(--tb-ink-strong, #fff) !important; font-weight: 700; }

@media (max-width: 640px) {
  .tb-logo { height: 44px; margin-right: 8px !important; }
  .wordmark, .pj-mark { height: 44px; }
}

/* =====================================================================
   INSPIRATION (desktop) — Nov 8, 2026
   The desktop Inspiration feed (playTour in index.html) in look v4:
   slate + orange in dark, frosted greys + charcoal pills in light.
   Square tiles that touch (1px lines); only buttons and chips are pills.
   body.ins-mode is on while the feed is open.
   ===================================================================== */
body.ins-mode {
  --ins-bg: linear-gradient(100deg, #424856 0%, #343944 38%, #2A2E36 68%, #22252B 100%);
  --ins-side: #2F343E; --ins-side-2: #343A45; --ins-ink: #F2F4F7; --ins-ink-2: #C9CFD8; --ins-muted: #8F98A7;
  --ins-line: rgba(255,255,255,.09); --ins-field: #3A404C; --ins-av: rgba(255,255,255,.08);
  --ins-btn-bg: #FFAB00; --ins-btn-ink: #17181B; --ins-accent: #FFAB00;
}
body.ins-mode.light-mode {
  --ins-bg: linear-gradient(100deg, #F6F6F8 0%, #ECEDEF 45%, #E0E1E4 100%);
  --ins-side: #F8F8F9; --ins-side-2: #F1F2F4; --ins-ink: #17181B; --ins-ink-2: #3D4047; --ins-muted: #7B7F87;
  --ins-line: rgba(20,22,26,.1); --ins-field: #ECEDEF; --ins-av: #E2E3E6;
  --ins-btn-bg: #1D1E21; --ins-btn-ink: #FFFFFF; --ins-accent: #B86A00;
}
body.ins-mode #cinematicOverlay { background: var(--ins-bg) fixed !important; box-shadow: none !important; font-family: var(--v4-font); color: var(--ins-ink); }
body.ins-mode #cinematicOverlay::-webkit-scrollbar { width: 8px; }
body.ins-mode #cinematicOverlay::-webkit-scrollbar-thumb { background: var(--ins-line); }

.ins-item { width: 100%; height: 100vh; position: relative; scroll-snap-align: start; display: flex; align-items: center; justify-content: center; }
.ins-card { display: flex; height: 75vh; max-height: 750px; border: 1px solid var(--ins-line); background: var(--ins-side); box-shadow: 0 24px 60px rgba(0,0,0,.22); }
body.light-mode .ins-card { box-shadow: 0 24px 60px rgba(20,22,26,.12); }

/* photo / video tile */
.ins-stage { position: relative; width: 440px; max-width: 46vw; height: 100%; background: #1E2127; overflow: hidden; flex-shrink: 0; }
.ins-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ins-shade { position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(to top, rgba(18,20,24,.92), rgba(18,20,24,0)); pointer-events: none; }
.ins-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 22px 22px; color: #fff; z-index: 2; }
.ins-where { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #FFAB00; margin-bottom: 6px; }
.ins-cap h2 { margin: 0 0 6px; font: 800 1.45rem/1.15 var(--v4-font); color: #fff; letter-spacing: -.01em; }
.ins-cap p { margin: 0 0 14px; font-size: .84rem; color: rgba(255,255,255,.78); }
.ins-cap p b { color: #fff; font-weight: 700; }
.ins-acts { display: flex; gap: 8px; }
.ins-btn { border: 0; border-radius: 999px; padding: 9px 16px; font: 700 .8rem var(--v4-font); background: #FFAB00; color: #17181B; cursor: pointer; }
.ins-btn:hover { filter: brightness(1.06); }

/* right column: square sections divided by 1px lines */
.ins-side { width: 320px; flex-shrink: 0; display: flex; flex-direction: column; border-left: 1px solid var(--ins-line); background: linear-gradient(100deg, var(--ins-side) 0%, var(--ins-side-2) 100%); min-height: 0; }
.ins-sec { padding: 16px 18px; border-bottom: 1px solid var(--ins-line); display: flex; flex-direction: column; gap: 8px; }
.ins-sec:last-child { border-bottom: 0; }
.ins-sec h4 { margin: 0 0 4px; font: 700 .66rem var(--v4-font); letter-spacing: .12em; text-transform: uppercase; color: var(--ins-muted); display: flex; align-items: center; gap: 6px; }
.ins-sec h4 em { font-style: normal; color: var(--ins-ink); background: var(--ins-av); padding: 1px 7px; border-radius: 999px; letter-spacing: 0; }
.ins-team { flex: 1 1 auto; overflow-y: auto; min-height: 0; gap: 0; }
.ins-about { margin-top: auto; }
.ins-about p, .ins-empty { margin: 0; font-size: .8rem; line-height: 1.5; color: var(--ins-ink-2); }

.ins-field { display: flex; align-items: center; width: 100%; box-sizing: border-box; background: var(--ins-field); border: 1px solid var(--ins-line); border-radius: 0; padding: 8px 10px; font: 600 .8rem var(--v4-font); color: var(--ins-ink); outline: none; }
select.ins-field { cursor: pointer; appearance: auto; }
select.ins-field option { background: var(--ins-side); color: var(--ins-ink); }
.ins-field input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font: inherit; color: inherit; }
.ins-field input::placeholder { color: var(--ins-muted); }
.ins-field:focus-within, select.ins-field:focus { border-color: var(--ins-accent); }
.ins-caret { font-size: .55rem; color: var(--ins-muted); cursor: pointer; padding-left: 8px; }
.ins-loc { position: relative; }
.ins-drop { position: absolute; top: calc(100% - 1px); left: 0; width: 100%; max-height: 280px; overflow-y: auto; z-index: 1000; background: var(--ins-side); border: 1px solid var(--ins-line); box-shadow: 0 16px 36px rgba(0,0,0,.28); }
body.light-mode .ins-drop { box-shadow: 0 16px 36px rgba(20,22,26,.14); }
.ins-picked { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--ins-line); min-height: 24px; }
.ins-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font: 600 .7rem var(--v4-font); background: var(--ins-av); color: var(--ins-ink); }
.ins-chip.on { background: var(--ins-btn-bg); color: var(--ins-btn-ink); }
.ins-x { cursor: pointer; opacity: .75; }
.ins-x:hover { opacity: 1; }
.ins-drop .loc-group { padding: 10px 12px 4px; font: 700 .62rem var(--v4-font); letter-spacing: .12em; text-transform: uppercase; color: var(--ins-muted); }
.ins-drop .loc-group + .loc-item { border-top: 0; }
.ins-drop .loc-item { display: flex; align-items: center; gap: 8px; padding: 7px 12px; margin: 0; cursor: pointer; font: 500 .8rem var(--v4-font); color: var(--ins-ink); }
.ins-drop .loc-item:hover { background: var(--ins-av); }
.ins-drop .loc-item input { accent-color: #FFAB00; margin: 0; }
.ins-apply { margin-top: 2px; width: 100%; border: 0; border-radius: 999px; padding: 10px 14px; font: 700 .8rem var(--v4-font); background: var(--ins-btn-bg); color: var(--ins-btn-ink); cursor: pointer; }
.ins-apply:hover { filter: brightness(1.06); }

/* team rows: square initials tile, name + role, orange "View ▶" */
.ins-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 0; border: 0; border-bottom: 1px solid var(--ins-line); background: transparent; text-align: left; cursor: pointer; font-family: var(--v4-font); color: var(--ins-ink); }
.ins-row:last-child { border-bottom: 0; }
.ins-row:hover .ins-who b { color: var(--ins-accent); }
.ins-av { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; background: var(--ins-av); color: var(--ins-ink); font: 800 .72rem var(--v4-font); letter-spacing: .02em; }
.ins-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ins-who b { font-weight: 700; font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ins-who small { font-size: .74rem; color: var(--ins-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ins-view { font: 700 .72rem var(--v4-font); color: var(--ins-accent); white-space: nowrap; }
.ins-more { justify-content: flex-start; font-size: .78rem; font-weight: 700; color: var(--ins-accent); }

/* Ask panel on the left, close + light/dark buttons, map divider */
body.ins-mode #cadBar { background: linear-gradient(100deg, var(--ins-side) 0%, var(--ins-side-2) 100%) !important; border: 1px solid var(--ins-line) !important; box-shadow: 0 24px 60px rgba(0,0,0,.18) !important; }
body.ins-mode #cadBar > :first-child { background: var(--ins-field) !important; border: 1px solid var(--ins-line) !important; }
body.ins-mode #cadBar .autocad-input { color: var(--ins-ink) !important; }
body.ins-mode #cadHistory { color: var(--ins-ink-2) !important; }
body.ins-mode #closeTourBtn { background: var(--ins-side) !important; border: 1px solid var(--ins-line) !important; color: var(--ins-ink) !important; box-shadow: 0 8px 22px rgba(0,0,0,.25) !important; }
body.ins-mode #closeTourBtn:hover { background: var(--ins-btn-bg) !important; color: var(--ins-btn-ink) !important; }
body.ins-mode #mapResizer { background: var(--ins-line) !important; border: 0 !important; width: 4px !important; }
body.ins-mode #mapResizer:hover { background: #FFAB00 !important; }
#tourThemeBtn { display: none; }
body.ins-mode #tourThemeBtn { display: inline-flex; position: fixed; z-index: 999999; top: 26px; left: calc(var(--ins-split, 80%) - 64px - 128px); height: 32px; padding: 0 3px; align-items: center; gap: 0; border-radius: 999px; border: 1px solid var(--ins-line); background: var(--ins-side); cursor: pointer; font: 700 .72rem var(--v4-font); }
#tourThemeBtn span { padding: 4px 10px; border-radius: 999px; color: var(--ins-muted); }
body.ins-mode:not(.light-mode) #tourThemeBtn .tt-d, body.ins-mode.light-mode #tourThemeBtn .tt-l { background: var(--ins-btn-bg); color: var(--ins-btn-ink); }
/* an older inline rule sets #map { width: 100vw !important }, which pushed the map off screen during Inspiration */
body.ins-mode #map { width: calc(100% - var(--ins-split, 80%)) !important; }

/* Nov 8: feed and map are half and half by default, so the card adapts to the feed's width.
   Wide feed: photo | panel side by side. Narrow feed: photo on top, panel underneath. */
body.ins-mode #cinematicOverlay { container-type: inline-size; container-name: insfeed; }
.ins-card { max-width: calc(100% - 32px); }
.ins-stage { flex: 0 1 440px; min-width: 0; max-width: none; }
@container insfeed (max-width: 659px) {
  .ins-item { height: auto; min-height: 100vh; padding: 9vh 0 6vh; box-sizing: border-box; align-items: flex-start; }
  .ins-card { flex-direction: column; height: auto; max-height: none; width: 100%; max-width: 460px; }
  .ins-stage { flex: none; width: 100%; height: 56vh; min-height: 320px; }
  .ins-side { width: 100%; border-left: 0; border-top: 1px solid var(--ins-line); }
  .ins-team { overflow: visible; }
  .ins-about { margin-top: 0; }
}
body.ins-mode.ins-narrow .intro-panel { display: none !important; }

/* Explore inspiration pickers (Nov 8): countries + companies, several of each, counts on the right, picked chips under the field */
.ins-pick { display: flex; flex-direction: column; gap: 5px; }
.ins-lbl { font: 600 .72rem var(--v4-font); color: var(--ins-ink-2); }
.ins-fwrap { position: relative; }
.ins-pick > .ins-picked { padding: 0; border: 0; min-height: 0; }
.ins-pick > .ins-picked:empty { display: none; }
.ins-drop .loc-item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-drop .loc-item em { font-style: normal; font-size: .7rem; font-weight: 700; color: var(--ins-muted); }
.ins-none { padding: 10px 12px; font: 500 .78rem var(--v4-font); color: var(--ins-muted); }
.ins-apply:disabled { opacity: .55; cursor: default; filter: none; }
/* Team rows: companies doing the picked kind of work (Nov 8) */
.ins-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #FFAB00; margin-right: 6px; vertical-align: middle; }
.ins-row.ins-hit .ins-av { box-shadow: inset 0 0 0 2px #FFAB00; }
/* Suppliers' work cards (Nov 8): no-photo tile, photo tag, second button, "Their work here" facts + status */
.ins-nophoto { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(100deg, #3A404C 0%, #2A2E36 100%); color: rgba(255,255,255,.55); }
body.light-mode .ins-nophoto { background: linear-gradient(100deg, #D9DADD 0%, #C9CBD0 100%); color: rgba(20,22,26,.5); }
.ins-nophoto span { width: 84px; height: 84px; display: grid; place-items: center; background: rgba(255,255,255,.08); color: #fff; font: 800 1.6rem var(--v4-font); }
body.light-mode .ins-nophoto span { background: rgba(255,255,255,.55); color: #17181B; }
.ins-nophoto small { font: 600 .74rem var(--v4-font); margin-bottom: 30%; }
.ins-tag { position: absolute; top: 12px; left: 12px; z-index: 2; padding: 4px 10px; border-radius: 999px; background: rgba(18,20,24,.62); color: #fff; font: 600 .68rem var(--v4-font); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
a.ins-btn { text-decoration: none; display: inline-flex; align-items: center; }
.ins-btn2 { background: rgba(255,255,255,.14); color: #fff; }
.ins-acts { flex-wrap: wrap; }
.ins-facts { gap: 0; }
.ins-fact { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--ins-line); font-size: .8rem; }
.ins-fact:last-child { border-bottom: 0; }
.ins-fact span { width: 78px; flex-shrink: 0; color: var(--ins-muted); }
.ins-fact b { font-weight: 600; color: var(--ins-ink); }
.ins-st { margin-left: auto; padding: 2px 8px; border-radius: 999px; letter-spacing: 0; text-transform: none; font-weight: 700; font-size: .66rem; background: var(--ins-av); color: var(--ins-ink-2); }
.ins-st.ok { background: rgba(127,212,242,.16); color: #7FD4F2; }
body.light-mode .ins-st.ok { background: #E3F1F8; color: #1C7FB0; }
.ins-st.mid { background: var(--ins-av); color: #FFC24D; } /* no soft orange fill on dark: it turns brown */
body.light-mode .ins-st.mid { background: rgba(229,138,0,.12); color: #B86A00; }
.ins-cap .ins-where { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; } /* long scopes: full text is in 'Their work here' */

/* Inspiration pins (Nov 8): every pin transparent grey, the project in view orange and a bit bigger */
body.ins-mode .yellow-pin-icon { filter: grayscale(1) brightness(1.15); opacity: .3; transition: opacity .35s ease, filter .35s ease; }
body.ins-mode.light-mode .yellow-pin-icon { filter: grayscale(1) brightness(.9); opacity: .32; }
body.ins-mode .yellow-pin-icon.ins-active { filter: drop-shadow(0 6px 14px rgba(0,0,0,.35)); opacity: 1; z-index: 100000 !important; }
body.ins-mode .yellow-pin-icon .pin-wrap-v32 { transition: transform .35s ease; transform-origin: 50% 100%; }
body.ins-mode .yellow-pin-icon.ins-active .pin-wrap-v32 { transform: scale(1.35); }