/* ==========================================================================
   Click On Screens · Service pages
   Design system extracted from the approved ai-digital-media-management.html.
   Every colour that changes between dark and light sections is a token, so
   the same file powers Version A (all dark) and Versions B/C (dark + light).
   ========================================================================== */

@font-face { font-family: "Geist"; src: url("https://cdn.jsdelivr.net/npm/geist@1.7.2/dist/fonts/geist-sans/Geist-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist"; src: url("https://cdn.jsdelivr.net/npm/geist@1.7.2/dist/fonts/geist-sans/Geist-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }

/* ---------- Tokens (approved values) ---------- */
:root {
  --accent: #dc4f35;
  --accent-deep: #a23c16;
  --gold: #ce9a20;
  --indigo: #30378f;
  --plum: #6b3a73;
  --green: #3ecf8e;
  --ink: #0e0f1e;
  --navy: #0f0f22;
  --surface: #15162b;
  --surface-2: #1c1d36;
  --paper: #ffffff;      /* Version C light sections: clean white, matching the homepage (#fff) */
  --paper-2: #f7f7f8;
  --charcoal: #17181f;

  --gutter: 60px;
  --radius: 12px;
  --section: clamp(64px, 7vw, 104px);   /* tightened from 88–144px: no oversized bands between sections */
  --ease: cubic-bezier(.2,.7,.1,1);
  --fit: calc(100svh - 300px);

  /* contextual tokens: dark by default */
  --bg: var(--ink);
  --fg: #ffffff;
  --fg-2: rgba(255,255,255,.78);
  --fg-3: rgba(255,255,255,.58);
  --fg-4: rgba(255,255,255,.3);
  --line: rgba(255,255,255,.08);
  --line-2: rgba(255,255,255,.14);
  --panel: linear-gradient(180deg, var(--surface) 0%, #121326 100%);
  --panel-line: rgba(255,255,255,.08);
  --panel-shadow: none;
  --hover-bg: rgba(255,255,255,.06);
  --dot-off: rgba(255,255,255,.1);
  --dot-dim: rgba(255,255,255,.3);
  --dot-hub: #ffffff;
  --trace: rgba(255,255,255,.16);
  --accent-text: var(--accent);
  --chip-on: #ffffff;
  color-scheme: dark;
}

/* Light tone. Hardware (screens, kiosks, devices) stays dark on purpose. */
.tone-light {
  --bg: var(--paper);
  --fg: var(--charcoal);
  --fg-2: #3d3f4a;
  --fg-3: #5f616c;
  --fg-4: rgba(23,24,31,.2);
  --line: rgba(23,24,31,.1);
  --line-2: rgba(23,24,31,.18);
  --panel: linear-gradient(180deg, var(--paper-2) 0%, #f2f2f4 100%);   /* cards: light grey so they separate from the white page */
  --panel-line: rgba(23,24,31,.09);
  --panel-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 28px 56px -36px rgba(23,24,31,.28);
  --hover-bg: rgba(23,24,31,.05);
  --dot-off: rgba(23,24,31,.11);
  --dot-dim: rgba(23,24,31,.32);
  --dot-hub: var(--charcoal);
  --trace: rgba(23,24,31,.2);
  --accent-text: #b5391f;
  --chip-on: var(--charcoal);
  background: var(--bg);
  color: var(--fg);
  color-scheme: light;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--ink); color: var(--fg); font-family: "Inter", system-ui, sans-serif; font-size: 16px; line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 200; background: var(--gold); color: var(--ink); padding: 10px 14px; border-radius: 6px; font-weight: 500; }
.skip:focus { top: 12px; }

/* ---------- Type ---------- */
.px { font-family: "Pixelify Sans", "Geist", monospace; font-weight: 500; letter-spacing: 0; }
.dot { color: var(--accent); }
.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); position: relative; }
.h-xl, .h-lg, .h-md, .h-sm { font-family: "Geist", sans-serif; font-weight: 400; letter-spacing: -0.02em; }
.h-xl { font-size: clamp(2.25rem, 1.2rem + 3.1vw, 3.5rem); line-height: 1.14; }
.h-lg { font-size: clamp(2rem, 1.2rem + 2.4vw, 3rem); line-height: 1.18; }
.h-md { font-size: clamp(1.625rem, 1.2rem + 1.1vw, 2.25rem); line-height: 1.22; }
.h-sm { font-size: 22px; line-height: 1.3; letter-spacing: -0.015em; }
.lead { font-size: 16px; line-height: 29px; color: var(--fg-2); }
.eyebrow { font-size: 13px; line-height: 20px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.idx { font-family: "Pixelify Sans", monospace; font-size: 15px; color: var(--accent-text); letter-spacing: .04em; }
.idx span { color: var(--fg-3); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 14px; border-radius: 6px; font-size: 16px; font-weight: 400; line-height: 1.25; text-align: center; transition: filter .2s, background .2s, transform .2s var(--ease), opacity .2s; }
.btn:active { transform: translateY(1px); }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { filter: brightness(1.08); }
.btn-ghost { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.18); }
.btn-white { background: #fff; color: #111; }
.btn-white:hover { background: #f1ece8; }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn .arrow { width: 14px; height: 14px; flex: none; transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.tone-light .btn-ghost { background: rgba(23,24,31,.05); border-color: rgba(23,24,31,.2); color: var(--charcoal); }
.tone-light .btn-ghost:hover { background: rgba(23,24,31,.1); }

/* ---------- Global nav: shared with the homepage, see ../css/nav.css ---------- */
.topline { position: fixed; inset: 0 0 auto 0; height: 2px; background: var(--gold); z-index: 60; }

/* ---------- Hero (approved viewport-fit behaviour, generalised per photo) ----------
   --arh: photo height/width   --st / --sb: screen top / bottom as a fraction of the photo height */
.hero {
  --scene-w: min(100vw, 1920px);
  --arh: .6669; --st: .178; --sb: .40;
  --sh: calc(var(--scene-w) * var(--arh));
  --copy-h: 360px;
  --top: clamp(calc(96px - var(--sh) * var(--st)), calc(100svh - var(--copy-h) - var(--sh) * var(--sb)), 0px);
  position: relative; overflow: hidden; isolation: isolate; color: #fff;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: calc(var(--top) + var(--sh) * (var(--sb) + .01));
  padding-bottom: clamp(28px, 6vh, 72px);
}
.hero::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(0deg, var(--ink) 0, rgba(14,15,30,.9) calc(var(--copy-h) * .6), rgba(14,15,30,.4) var(--copy-h), rgba(14,15,30,0) calc(var(--copy-h) + 140px)); }
.hero .scene { position: absolute; top: var(--top); }
.scene { position: relative; width: var(--scene-w); aspect-ratio: 1 / var(--arh); left: 50%; transform: translateX(-50%); }
.scene > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero .scene::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; background:
    linear-gradient(180deg, rgba(14,15,30,.7) 0%, rgba(14,15,30,0) 14%, rgba(14,15,30,0) 72%, var(--ink) 100%),
    linear-gradient(90deg, rgba(14,15,30,.55) 0%, transparent 22%, transparent 78%, rgba(14,15,30,.55) 100%); }
.hero--subway { --arh: .6669; --st: .2006; --sb: .663; --copy-h: 330px; }
.hero--arena  { --arh: .7279; --st: .2114; --sb: .4796; }
.hero--fuel   { --arh: .5628; --st: .183; --sb: .55; }
.hero--engage { --arh: calc(836 / 1881); --st: .2; --sb: .5; }  /* wide forecourt photo: screens sit in the top half */
.hero--kiosk-photo { --arh: .4445; --st: .11; --sb: .7; }  /* kiosk screen spans 11-70% of the photo height */
.hero--display-photo { --arh: calc(836 / 1882); --st: .074; --sb: .66; }  /* totem top to price board bottom */
.hero--control { --arh: calc(836 / 1881); --st: .16; --sb: .72; }  /* pillar screens from 16%, desk monitor down to 72% of the photo height */
.hero--control .quads { width: 1881px; height: 836px; }
/* Desk monitor (photographed software UI): our thumbnails, selection ring, preview and timeline playhead, mapped onto the
   monitor plane. Local space is 1600 x 900; positions were measured on the un-warped photo. Nothing is drawn where the chair overlaps. */
.mon { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; transform-origin: 0 0; }
.mon-th { position: absolute; width: 124px; height: 123px; border-radius: 7px; background: #1a2030 center / cover no-repeat; filter: blur(1px) brightness(.9) saturate(.92); }
.mon-ring { position: absolute; left: 0; top: 0; width: 138px; height: 137px; border-radius: 11px; box-shadow: 0 0 0 5px #2f80ff, 0 0 24px rgba(47,128,255,.7); transition: transform .55s var(--ease); }   /* the software's own selection blue */
.mon-pv { position: absolute; left: 803px; top: 123px; width: 525px; height: 424px; overflow: hidden; border-radius: 3px; background: #0b1020; }
.mon-pv img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s var(--ease); filter: blur(1.8px) brightness(.95); }   /* portrait creatives are upscaled here: soften to the monitor's photographed sharpness */
.mon-pv img.on { opacity: 1; }
.mon-ph { position: absolute; left: 271px; top: 598px; width: 3px; height: 274px; border-radius: 2px; background: #fff; box-shadow: 0 0 10px rgba(255,255,255,.8); opacity: .85; animation: monph 9s linear infinite; }
@keyframes monph { from { transform: translateX(0); } to { transform: translateX(1074px); } }

/* Live fuel price board: our own LED digits laid over the photo's price column */
.price { position: absolute; left: 0; top: 0; transform-origin: 0 0; display: grid; grid-template-rows: repeat(4, 1fr); background: #04111a; z-index: 2; }
.price span { position: relative; border-top: 4px solid rgba(255,255,255,.06); overflow: hidden; }
.price span:first-child { border-top: 0; }
.price b { position: absolute; left: 50%; top: 50%; white-space: nowrap; font: 600 120px/1 "Inter", sans-serif; letter-spacing: -4px; transform: translate(-50%, -50%) scaleX(.62); color: #34e89e; text-shadow: 0 0 24px rgba(52,232,158,.75), 0 0 64px rgba(52,232,158,.35); font-variant-numeric: tabular-nums; }
.price span.ad-blue { background: radial-gradient(ellipse at 50% 50%, #0a2a7a 0%, #04111a 85%); }
.price span.ad-blue b { color: #3d9bff; text-shadow: 0 0 24px rgba(61,155,255,.8), 0 0 64px rgba(61,155,255,.4); }
.price span.upd b { animation: priceflick .7s steps(1) both; }
@keyframes priceflick { 0% { opacity: 1; } 15% { opacity: .15; } 30% { opacity: 1; } 45% { opacity: .1; } 60%, 100% { opacity: 1; } }
.mullion { position: absolute; z-index: 3; pointer-events: none; }
/* Real screens photographed at this size show no visible pixel grid; the fixed 3px LED mesh read as a coarse dot net on these small screens */
.hero--kiosk-photo .quads .screen::after { display: none; }

/* Screen integration (Display Screens, Engage and Advertising photo heroes). Geometry is edge-detected from the photo;
   these rules make the content read as a lit panel photographed behind its bezel, not an image on top.
   Values are in 4x layout px (see the supersampling note in the README): 4px here = 1 photo px. */
:is(.hero--display-photo, .hero--engage, .hero--fuel, .hero--control) .quads .screen {
  box-shadow: none;               /* no outline or halo: in the photo the bezel meets the panel directly */
  filter: blur(1.5px);            /* ~0.4 photo px: matches the photograph's own softness, so edges don't look cut out */
}
:is(.hero--display-photo, .hero--engage, .hero--fuel, .hero--control) .quads .screen::after {
  display: block; opacity: 1; mix-blend-mode: normal; background: none;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.4), inset 0 0 12px 2px rgba(0,0,0,.26);   /* panel recessed behind the bezel */
}
:is(.hero--display-photo, .hero--engage, .hero--fuel, .hero--control) .quads .screen::before {
  background: linear-gradient(118deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.025) 28%, transparent 46%);   /* cover-glass glare */
}
:is(.hero--display-photo, .hero--engage, .hero--fuel, .hero--control) .cr:not(.ad) .cr-pattern {
  opacity: 1; -webkit-mask: none; mask: none;
  background: radial-gradient(ellipse 85% 75% at 50% 45%, transparent 35%, rgba(0,0,0,.28) 100%);   /* LED panels fall off toward the edges */
}

/* Kiosk touch screen (photo hero): the photo's own home screen plus app pages that slide in on tap */
.kio { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; border-radius: 5px; container-type: size; background: #0e1424; color: #fff; font-family: "Inter", sans-serif; }
.kio-home { position: absolute; inset: 0; background-size: 100% 100%; }
.kio-page { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 3.4cqw; padding: 7cqw 4.5cqw 4.5cqw; background: linear-gradient(180deg, #121a2d 0%, #0b1120 100%); transform: translateX(102%); transition: transform .5s var(--ease); }
.kio-page.on { transform: none; }
.kio-head { display: flex; align-items: center; gap: 3cqw; font-size: 7.4cqw; font-weight: 500; letter-spacing: -0.01em; padding-bottom: 2cqw; }
.kio-head .back { width: 9cqw; height: 9cqw; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.1); font-size: 6cqw; line-height: 1; }
.kio-card { display: flex; align-items: center; gap: 3.6cqw; padding: 2.6cqw; border-radius: 3.4cqw; background: rgba(255,255,255,.07); font-size: 5.4cqw; font-weight: 500; }
.kio-card .t { width: 17cqw; height: 17cqw; border-radius: 2.6cqw; flex: none; background-size: cover; background-position: center; display: grid; place-items: center; }
.kio-card .t svg { width: 9cqw; height: 9cqw; }
.kio-card small { display: block; margin-top: .6cqw; font-size: 4cqw; font-weight: 400; color: rgba(255,255,255,.6); }
.kio-card .chev { margin-left: auto; color: rgba(255,255,255,.6); font-size: 6cqw; }
.kio-big { border-radius: 3.4cqw; padding: 5cqw; background: linear-gradient(135deg, #c62f2f, #e0552d); font-size: 6.6cqw; font-weight: 600; line-height: 1.15; }
.kio-big small { display: block; margin-top: 1.6cqw; font-size: 4.2cqw; font-weight: 400; opacity: .9; }
.kio-map { position: relative; flex: 1; min-height: 0; border-radius: 3.4cqw; background: radial-gradient(circle, rgba(255,255,255,.2) 1px, transparent 1.4px) 0 0 / 5cqw 5cqw, rgba(255,255,255,.05); }
.kio-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.kio-btn { margin-top: auto; height: 12cqw; border-radius: 3cqw; background: var(--accent); display: grid; place-items: center; font-size: 5cqw; font-weight: 500; }
.kio .tap { width: 14cqw; height: 14cqw; }
.quads .screen.soft { filter: blur(var(--soft, 1.6px)); } /* background screens sit in the photo's out-of-focus zone */


/* Forecourt screens: LED surfaces mapped onto the photo's screens in perspective.
   The layer uses the photo's native pixel space (1672x941) and is scaled to the scene by JS. */
.quads { position: absolute; left: 0; top: 0; width: 1672px; height: 941px; transform-origin: 0 0; transform: scale(var(--k, 1)); z-index: 2; pointer-events: none; }
.quads .screen { left: 0; top: 0; transform-origin: 0 0; border-radius: 0; box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 0 40px rgba(var(--glow, 220,79,53), .3); }

/* Ambience: a pre-blurred real environment behind an LED-built hero */
.ambience { position: absolute; inset: 0; background-position: center 40%; background-size: cover; opacity: .6;
  -webkit-mask: radial-gradient(ellipse 80% 75% at 50% 35%, #000 25%, transparent 85%); mask: radial-gradient(ellipse 80% 75% at 50% 35%, #000 25%, transparent 85%); }
.hero-copy { position: relative; z-index: 4; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: end; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: rgba(255,255,255,.58); margin-bottom: 20px; list-style: none; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: rgba(255,255,255,.3); }
.crumbs a:hover { color: #fff; }
.crumbs [aria-current] { color: rgba(255,255,255,.78); }
.hero .eyebrow { color: rgba(255,255,255,.58); }
.hero h1 { max-width: 760px; margin-top: 12px; font-size: min(clamp(2.25rem, 1.2rem + 3.1vw, 3.5rem), max(2rem, 7.2vh)); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-top: clamp(24px, 4.4vh, 40px); }
.hero-aside { text-align: right; justify-self: end; max-width: 460px; }
.hero-aside .statement { font-family: "Geist", sans-serif; font-size: 20px; line-height: 30px; letter-spacing: -0.01em; color: #fff; }
.hero-aside .lead { margin-top: 16px; color: rgba(255,255,255,.78); }
/* Two columns: trim the last line's leading so the description's text, not its line box,
   sits on the bottom edge of the CTA buttons (.hero-grid bottom-aligns the columns) */
@media (min-width: 901px) { .hero-aside .lead { text-box: trim-end cap alphabetic; } }

/* Stage heroes: an LED composition instead of a photo, same copy placement */
.hero--stage { --stage-h: max(380px, calc(100svh - var(--copy-h))); padding-top: var(--stage-h); }
.stage { position: absolute; inset: 0 0 auto 0; height: calc(var(--stage-h) + 120px); z-index: 0; overflow: hidden; }
.stage-inner { position: absolute; left: 0; right: 0; top: 96px; bottom: 120px; display: grid; place-items: center; }

/* ---------- LED screen surface + creatives (approved) ---------- */
.screen { position: absolute; z-index: 2; overflow: hidden; background: #05050c; container-type: size; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 60px rgba(var(--glow, 220,79,53), .35), 0 0 160px rgba(var(--glow, 220,79,53), .18);
  transition: box-shadow .8s var(--ease); }
.screen::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: .55; mix-blend-mode: multiply;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px), radial-gradient(circle, transparent 0 .9px, rgba(0,0,0,.55) 1.5px) 0 0 / 3px 3px; }
.screen::before { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(118deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.04) 26%, transparent 42%); }
.s-subway { left: 39.94%; top: 20.06%; width: 20.12%; height: 46.30%; }
.s-arena  { left: 30.85%; top: 21.14%; width: 37.06%; height: 26.82%; }
.cr { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; gap: 3cqmin; padding: 8cqmin; background: var(--bg-c); color: var(--fg-c, #fff); isolation: isolate; }
.cr.enter { animation: wipe .9s var(--ease) both; z-index: 2; }
.cr.enter::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: #fff; box-shadow: 0 0 18px 4px rgba(255,255,255,.75); animation: scan .9s var(--ease) both; }
@keyframes wipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes scan { from { top: 0; opacity: 1; } 90% { opacity: 1; } to { top: 100%; opacity: 0; } }
.cr-kicker { font-family: "Geist", sans-serif; font-size: max(7px, 5.5cqmin); letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.cr-title { font-family: "Pixelify Sans", monospace; font-weight: 500; font-size: min(22cqmin, calc(150cqw / var(--len, 6))); line-height: 1; letter-spacing: -0.01em; }
.cr-title i { font-style: normal; color: var(--dotc, #0e0f1e); }
.cr-sub { font-family: "Geist", sans-serif; font-size: max(7px, 6cqmin); opacity: .9; }
.cr.ad { padding: 0; } /* photographic ad: the image is the creative */
.cr.ad video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* video creatives fill the panel like images */
.cr-pattern { position: absolute; inset: 0; z-index: -1; opacity: .35; background-image: radial-gradient(circle, rgba(255,255,255,.55) 1px, transparent 1.4px); background-size: 7cqmin 7cqmin;
  -webkit-mask: radial-gradient(ellipse at 50% 120%, #000, transparent 70%); mask: radial-gradient(ellipse at 50% 120%, #000, transparent 70%); }

/* Pixel dissolve curtain (blank screen <-> content) */
.dissolve { position: absolute; inset: 0; z-index: 4; display: grid; pointer-events: none; }
.dissolve i { background: #f4f4f6; opacity: 1; transition: opacity .35s ease; }
.dissolve.open i { opacity: 0; }


/* ---------- Section scaffolding ---------- */
.sec { position: relative; padding-top: var(--section); background: var(--bg); color: var(--fg); }
.sec.to-light, .sec.tone-light, .sec.from-light { padding-bottom: var(--section); }
.sec.flush, .sec.tone-light + .sec.tone-light { padding-top: 0; }   /* two light sections in a row share one gap, not two */
.sec + .sec.tone-light, .sec.from-light { margin-top: 0; }
section[id], article[id] { scroll-margin-top: 100px; }
.feat-head .idx { display: block; margin-bottom: 18px; }
.feat-head .lead { margin-top: 18px; max-width: 460px; }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.split.rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split.rev > :first-child { order: 2; }
.panel { position: relative; background: var(--panel); border: 1px solid var(--panel-line); border-radius: var(--radius); box-shadow: var(--panel-shadow); }
.panel-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.panel-title { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--fg-3); letter-spacing: .02em; }
.live { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(62,207,142,.6); animation: live 2.2s infinite; flex: none; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(62,207,142,.55); } 70%,100% { box-shadow: 0 0 0 8px rgba(62,207,142,0); } }

/* Big-type index (approved intro band) */
.intro-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
.intro-grid .lead { margin-top: 18px; max-width: 380px; }
.verbs { list-style: none; display: flex; flex-wrap: wrap; gap: 0 clamp(16px, 2.4vw, 36px); }
.verbs > li > a, .verbs > li > span { display: inline-flex; align-items: baseline; font-family: "Geist", sans-serif; font-size: clamp(2.25rem, 1rem + 4.2vw, 4.75rem); line-height: 1.08; letter-spacing: -0.03em; color: var(--fg-4); transition: color .35s var(--ease); }
.verbs > li > a:hover, .verbs > li > a:focus-visible, .verbs > li > span:hover, .verbs .is-on { color: var(--fg); }
.verbs.sm > li > a, .verbs.sm > li > span { font-size: clamp(1.75rem, 1rem + 2.6vw, 3.25rem); }
.verbs [aria-current="page"] { color: var(--fg); }

/* ---------- Shared controls (approved) ---------- */
.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--hover-bg); border: 1px solid var(--line); border-radius: 8px; }
.seg button { min-height: 36px; padding: 0 12px; border-radius: 6px; font-size: 13px; color: var(--fg-2); white-space: nowrap; transition: background .25s, color .25s; }
.seg button:hover { color: var(--fg); background: var(--hover-bg); }
.seg button[aria-checked="true"] { background: var(--accent); color: #fff; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 10px; border-radius: 8px; border: 1px solid var(--line-2); font-size: 14px; color: var(--fg-2); text-align: left; transition: border-color .2s, background .2s, color .2s; }
.chip:hover { color: var(--fg); background: var(--hover-bg); }
.chip i { width: 18px; height: 18px; border-radius: 4px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(128,128,128,.35); flex: none; }
.chip[aria-checked="true"] { border-color: var(--chip-on); color: var(--fg); background: var(--hover-bg); }
.status { font-size: 13px; color: var(--fg-3); display: inline-flex; align-items: center; gap: 8px; min-height: 20px; }
.status.ok { color: var(--green); }
.tone-light .status.ok { color: #16804f; }
.spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: spin .7s linear infinite; display: none; }
.btn.loading .spinner { display: inline-block; }
.btn.loading .arrow { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Circuit traces (shared LED wiring) ---------- */
.wired { position: relative; }
.wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }
.wires .w-base { fill: none; stroke: var(--trace); stroke-width: 1.2; }
.wires .w-live { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 2 16; animation: current 1.4s linear infinite; opacity: .95; }
.wires .w-live.gold { stroke: var(--gold); }
.wires .w-node { fill: var(--accent); }
.wires .w-dim .w-live { opacity: 0; }
@keyframes current { to { stroke-dashoffset: -36; } }
.js .wired .wires .w-base { stroke-dasharray: var(--len, 2000); stroke-dashoffset: var(--len, 2000); transition: stroke-dashoffset 1.4s var(--ease); }
.js .wired.in .wires .w-base { stroke-dashoffset: 0; }

/* Pixel glyphs (8x8 LED icons) */
.glyph { display: block; width: 100%; height: auto; overflow: visible; }
.glyph .p { fill: var(--dot-off); transition: fill .3s var(--ease); }
.glyph .p.on { fill: var(--fg); }
.glyph.accent .p.on { fill: var(--accent); }

/* ==========================================================================
   DISPLAY SCREENS
   ========================================================================== */
.touch { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; margin-top: 36px; }
.touch-list { list-style: none; border-top: 1px solid var(--line); }
.touch-item { border-bottom: 1px solid var(--line); }
.touch-item button { width: 100%; display: grid; grid-template-columns: 36px minmax(0, 1fr) 20px; gap: 4px 12px; align-items: baseline; padding: 8px 4px; text-align: left; color: var(--fg-2); transition: color .25s, background .25s; border-radius: 6px; }
.touch-item button:hover { background: var(--hover-bg); color: var(--fg); }
.touch-item .idx { font-size: 13px; color: var(--fg-3); transition: color .25s; }
.touch-item b { font-family: "Geist", sans-serif; font-weight: 400; font-size: 18px; line-height: 1.3; letter-spacing: -0.01em; color: var(--fg); }
.touch-item .desc { grid-column: 2; display: none; font-size: 14px; line-height: 21px; color: var(--fg-3); }   /* accordion: only the selected display type explains itself */
.touch-item .mark { width: 10px; height: 10px; border-radius: 2px; background: var(--dot-off); align-self: center; transition: background .25s, box-shadow .25s; }
.touch-item button[aria-pressed="true"] .idx { color: var(--accent-text); }
.touch-item button[aria-pressed="true"] .mark { background: var(--accent); box-shadow: 0 0 12px rgba(220,79,53,.7); }
.touch-item button[aria-pressed="true"] .desc { display: block; color: var(--fg-2); padding-bottom: 4px; }
.touch-map { position: relative; }
@media (min-width: 901px) {   /* the list runs the full height of the map panel; the eight rows share the space evenly */
  .touch { align-items: stretch; }
  .touch-list { display: flex; flex-direction: column; }
  .touch-item { flex: 1 1 auto; display: flex; }
  .touch-item button { align-content: center; padding: 10px 4px; }
}
.map-frame { padding: clamp(16px, 2vw, 28px); }
.map-svg { display: block; width: 100%; height: auto; max-height: calc(var(--fit) - 100px); }
.map-svg .g { fill: var(--dot-off); }
.map-svg .s { fill: var(--dot-dim); }
.map-svg .z { fill: var(--dot-dim); transition: fill .45s var(--ease), opacity .45s; }
.map-svg .zone.on .z { fill: var(--accent); }
.map-svg .zone.on { filter: url(#zoneGlow); }
.map-svg .lbl { font: 500 11px "Inter", sans-serif; fill: var(--fg-3); letter-spacing: .06em; text-transform: uppercase; }
.map-svg .tag { opacity: 0; transition: opacity .35s; }
.map-svg .zone.on .tag { opacity: 1; }
.map-svg .tag rect { fill: var(--accent); }
.map-svg .tag text { font: 500 12px "Inter", sans-serif; fill: #fff; }
/* the selected display type's photo, popping up beside its name tag */
.map-svg .map-card { pointer-events: none; }
.map-svg .map-card-in { transform-box: fill-box; transform-origin: 50% 100%; filter: drop-shadow(0 10px 16px rgba(0,0,0,.55)); }
.map-svg .map-card-in.pop { animation: mapcard .45s var(--ease) both; }
@keyframes mapcard { from { opacity: 0; transform: translateY(8px) scale(.9); } to { opacity: 1; transform: none; } }
.map-svg .map-card-bg { fill: #15162b; }
.map-svg .map-card-frame { fill: none; stroke: rgba(255,255,255,.9); stroke-width: 1.5; }
.map-svg .map-card-hv { transform-box: fill-box; transform-origin: 50% 50%; transition: transform .45s var(--ease); }
.map-svg .map-card.is-hover .map-card-hv { transform: scale(1.05); }
/* the button laid over the card: opens the large photo */
.map-card-hit { position: absolute; z-index: 2; border-radius: 8px; cursor: zoom-in; }
.map-card-zoom { position: absolute; top: 7px; right: 7px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: rgba(14,15,30,.72); color: #fff; opacity: 0; transform: scale(.7); transition: opacity .25s, transform .45s var(--ease); }
.map-card-zoom svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.map-card-hit:hover .map-card-zoom, .map-card-hit:focus-visible .map-card-zoom { opacity: 1; transform: none; }
@media (hover: none) { .map-card-zoom { opacity: 1; transform: none; } }   /* touch: always show that it opens */

/* ---------- Display Solutions popup: the large photo, its description, and every display type to switch between ---------- */
.dlb { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 32px; border: 0; background: none; color: var(--fg); overflow: hidden; }
.dlb[open] { display: grid; place-items: center; }
.dlb::backdrop { background: none; }
html.dlb-lock { overflow: hidden; }
html.dlb-lock.dlb-gutter { scrollbar-gutter: stable; }   /* only where the page had a classic scrollbar, so nothing shifts */
.dlb-scrim { position: absolute; inset: 0; background: rgba(7,7,16,.74); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.dlb-panel { position: relative; width: min(100%, 1120px); max-height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 28px; border-radius: 16px; background: var(--panel); border: 1px solid var(--panel-line); box-shadow: 0 40px 120px -40px rgba(0,0,0,.8); }
.dlb-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.08); border: 1px solid var(--line-2); color: #fff; transition: background .2s, transform .45s var(--ease); }
.dlb-close:hover { background: rgba(255,255,255,.16); transform: rotate(90deg); }
.dlb-close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
/* the photo takes the larger share, and never grows taller than the window leaves room for */
.dlb-main { display: grid; grid-template-columns: min(58%, max(320px, calc((100vh - 350px) * 4 / 3))) minmax(0, 1fr); gap: clamp(24px, 3.2vw, 48px); align-items: center; }
@supports (height: 100dvh) { .dlb-main { grid-template-columns: min(58%, max(320px, calc((100dvh - 350px) * 4 / 3))) minmax(0, 1fr); } }
.dlb-media { margin: 0; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: #0b0c18; }
.dlb-media img { width: 100%; height: 100%; object-fit: cover; }
.dlb-media.wait { background: none; }
.dlb-media.wait img { opacity: 0; }
.dlb-fly { position: fixed; z-index: 5; overflow: hidden; transform-origin: 0 0; pointer-events: none; will-change: transform; }
.dlb-fly img { width: 100%; height: 100%; object-fit: cover; transform-origin: 0 0; }
.dlb-info { display: grid; justify-items: start; gap: 14px; }
.dlb-info .h-md { margin-bottom: -2px; }
.dlb-info .lead { max-width: 40ch; }
.dlb-info .btn { margin-top: 10px; }
.dlb-more { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.dlb-thumbs { list-style: none; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.dlb-thumbs button { width: 100%; display: grid; align-content: start; gap: 9px; padding: 0; text-align: left; font-size: 12px; line-height: 16px; color: var(--fg-3); transition: color .25s; }
.dlb-thumbs img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; outline: 1px solid var(--line-2); outline-offset: -1px; filter: brightness(.78) saturate(.9); transition: transform .45s var(--ease), filter .25s, outline-color .25s; }
.dlb-thumbs button:hover { color: var(--fg); }
.dlb-thumbs button:hover img { transform: translateY(-3px); filter: none; }
.dlb-thumbs button[aria-current="true"] { color: var(--fg); }
.dlb-thumbs button[aria-current="true"] img { outline: 2px solid var(--accent); outline-offset: 2px; filter: none; }
.dlb-thumbs span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
/* tablets and phones: the photo on top, the text below; the photo stays 4:3 and leaves room for the rest (about 605px) */
@media (max-width: 900px) {
  .dlb-main { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .dlb-media { width: min(100%, max(300px, calc((100vh - 610px) * 4 / 3))); justify-self: center; }
  @supports (height: 100dvh) { .dlb-media { width: min(100%, max(300px, calc((100dvh - 610px) * 4 / 3))); } }
  .dlb-close { background: rgba(14,15,30,.62); border-color: rgba(255,255,255,.2); }   /* over the photo's corner */
  /* the display types become a row to swipe through */
  .dlb-thumbs { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin: 12px -28px 0; padding: 4px 28px 6px; }
  .dlb-thumbs::-webkit-scrollbar { display: none; }
  .dlb-thumbs li { flex: 0 0 120px; scroll-snap-align: center; }
}
@media (max-width: 760px) {
  .dlb { padding: 12px; }
  .dlb-panel { padding: 12px 12px 18px; border-radius: 14px; }
  .dlb-main { gap: 18px; }
  .dlb-media { width: min(100%, max(300px, calc((100vh - 510px) * 4 / 3))); }
  @supports (height: 100dvh) { .dlb-media { width: min(100%, max(300px, calc((100dvh - 510px) * 4 / 3))); } }
  .dlb-info { padding: 0 6px; gap: 10px; }
  .dlb-info .btn { margin-top: 6px; }
  .dlb-close { top: 20px; right: 20px; }
  .dlb-more { margin-top: 22px; padding: 16px 6px 0; }
  .dlb-thumbs { margin: 12px -18px 0; padding: 4px 18px 6px; }
  .dlb-thumbs li { flex-basis: 112px; }
}
.map-legend { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding: 14px 4px 0; font-size: 12px; color: var(--fg-3); }
.map-legend span { display: inline-flex; align-items: center; gap: 8px; }
.map-legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--dot-dim); }
.map-legend i.on { background: var(--accent); }

/* Connected: hub and spoke */
.hubnet { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 1.1fr) minmax(0, 1fr); gap: 24px clamp(40px, 7vw, 120px); align-items: center; margin-top: 40px; }
.hub-col { display: grid; gap: 14px; position: relative; z-index: 1; }
.hub-col.right .node { flex-direction: row-reverse; text-align: right; }
.node { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 10px; background: var(--panel); border: 1px solid var(--panel-line); box-shadow: var(--panel-shadow); transition: border-color .3s, transform .3s var(--ease); }
.node .glyph { width: 34px; flex: none; }
.node span { font-size: 14px; line-height: 1.35; color: var(--fg-2); }
.node.ping { border-color: rgba(220,79,53,.6); }
.node.ping .glyph .p.on { fill: var(--accent); }
.hub { position: relative; z-index: 1; aspect-ratio: 1; width: 100%; max-width: min(300px, var(--fit)); justify-self: center; border-radius: 16px; display: grid; place-items: center; text-align: center; padding: 24px; color: #fff;
  background: radial-gradient(circle at 50% 40%, #23244a 0%, #15162b 60%, #101122 100%); border: 1px solid rgba(220,79,53,.45); box-shadow: 0 0 0 6px rgba(220,79,53,.06), 0 0 80px rgba(220,79,53,.25); }
.hub .glyph { width: 64px; margin: 0 auto 14px; }
.hub .glyph .p { fill: rgba(255,255,255,.1); }
.hub .glyph .p.on { fill: var(--accent); }
.hub b { display: block; font-family: "Geist", sans-serif; font-weight: 400; font-size: 18px; line-height: 1.3; }
.hub small { display: block; margin-top: 6px; font-size: 12px; color: rgba(255,255,255,.58); letter-spacing: .06em; text-transform: uppercase; }
/* Connected: the hub is an open laptop running the platform (the same interface as the AI Digital Media Management hero) */
.hub--laptop { aspect-ratio: auto; max-width: 400px; padding: 0; display: block; place-items: normal; background: none; border: 0; box-shadow: none; border-radius: 0; color: var(--fg); }
.lap { position: relative; }
.lap-lid { position: relative; margin: 0 7%; padding: 3.4% 3.4% 3.8%; border-radius: 14px 14px 5px 5px; background: #191a26; box-shadow: inset 0 0 0 1.5px #343645, 0 34px 50px -34px rgba(23,24,31,.55); }
.lap-lid::before { content: ""; position: absolute; top: 1.2%; left: 50%; width: 5px; height: 5px; border-radius: 50%; background: #34364a; transform: translateX(-50%); }
.lap-scr { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 3px; background: #0e1322; container-type: inline-size; }
.lap-base { position: relative; height: 13px; border-radius: 2px 2px 14px 14px / 2px 2px 9px 9px; background: linear-gradient(180deg, #eceef2 0%, #cfd2d9 55%, #a8acb6 100%); box-shadow: 0 16px 22px -16px rgba(23,24,31,.6); }
.lap-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 15%; height: 5px; border-radius: 0 0 6px 6px; background: #b3b7c0; transform: translateX(-50%); }
.hub--laptop figcaption { margin-top: 18px; text-align: center; }
.hub--laptop b { color: var(--fg); font-size: 17px; }
.hub--laptop small { color: var(--fg-3); }
/* the platform interface, laid out in fractions of the screen */
.pf { position: absolute; inset: 0; display: grid; grid-template-columns: 11% 1fr; grid-template-rows: 8% 1fr; font-size: 1cqw; }
.pf-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 2.2em; padding: 0 3.2em; border-bottom: 1px solid rgba(255,255,255,.06); }
.pf-top i { display: block; height: 1.1em; border-radius: 1em; background: rgba(255,255,255,.14); }
.pf-top i.mark { width: 1.8em; height: 1.8em; border-radius: 50%; background: var(--accent); }
.pf-side { display: grid; align-content: start; gap: 2.4em; padding: 3em 0; border-right: 1px solid rgba(255,255,255,.06); justify-items: center; }
.pf-side i { width: 2.6em; height: 2.6em; border-radius: .7em; background: rgba(255,255,255,.12); }
.pf-side i.on { width: 7em; background: #2f80ff; box-shadow: 0 0 1.4em rgba(47,128,255,.55); }
.pf-main { display: grid; grid-template-columns: 1.05fr 1fr; grid-template-rows: 1fr 34%; gap: 3em; padding: 3.2em; }
.pf-lib { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: center; gap: 1.6em; }
.pf-lib img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: .8em; transition: box-shadow .35s var(--ease), transform .35s var(--ease); }
.pf-lib img.sel { box-shadow: 0 0 0 .45em #2f80ff, 0 0 2em rgba(47,128,255,.7); transform: scale(1.04); }   /* the software's own selection blue */
.pf-pv { position: relative; overflow: hidden; border-radius: .6em; background: #0b1020; box-shadow: 0 0 0 1px rgba(255,255,255,.06); }
.pf-pv img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s var(--ease); }
.pf-pv img.on { opacity: 1; }
.pf-tl { grid-column: 1 / -1; position: relative; display: grid; align-content: space-evenly; padding: 0 1.4em; border-radius: .6em; background: rgba(255,255,255,.035); overflow: hidden; }
.pf-trk { position: relative; height: 2.4em; }
.pf-trk b { position: absolute; top: 0; bottom: 0; border-radius: .5em; opacity: .9; }
.pf-ph { position: absolute; top: 0; bottom: 0; left: 4%; width: 2px; background: #fff; box-shadow: 0 0 .8em rgba(255,255,255,.8); }
.hubnet.in .pf-ph { animation: pfph 8s linear infinite; }   /* the timeline plays once the section is in view */
@keyframes pfph { from { left: 4%; } to { left: 96%; } }


/* ==========================================================================
   SHOWCASE HEROES (Display Screens, Digital Kiosks)
   The visual fills the whole hero and runs behind the copy, like the approved
   photo hero; the approved bottom gradient keeps the copy readable.
   ========================================================================== */
.hero--show .stage { height: 100%; }
.hero--show .stage-inner { top: 92px; bottom: 0; place-items: start center; grid-template-columns: minmax(0, 1fr); } /* full-width track so oversized sets centre on the viewport */
.dotwall { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,.16) 1.1px, transparent 1.6px); background-size: 18px 18px;
  -webkit-mask: radial-gradient(ellipse 70% 60% at 50% 38%, #000 0%, transparent 75%); mask: radial-gradient(ellipse 70% 60% at 50% 38%, #000 0%, transparent 75%); }

/* ---- Display Screens: the display family, synced ---- */
.wall-stage { background: radial-gradient(ellipse 55% 55% at 50% 30%, rgba(48,55,143,.42), transparent 70%), radial-gradient(ellipse 45% 30% at 50% 62%, rgba(220,79,53,.16), transparent 70%); }
.wall-stage .floor { bottom: 0; height: 52%; opacity: .3; }
.set { position: relative; width: min(1280px, 94vw, calc((100svh - 290px) * 2.2)); aspect-ratio: 2.2 / 1; }
.dv { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1%); margin: 0; }
.dv-frame { position: relative; background: linear-gradient(160deg, #24252f, #0b0b10 60%); padding: clamp(3px, .45vw, 7px); border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 30px 50px -24px rgba(0,0,0,.8); }
.dv .screen { position: relative; inset: auto; width: 100%; aspect-ratio: var(--ar); border-radius: 2px; }
.dv figcaption { margin-top: 10px; font-size: 11px; line-height: 14px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); white-space: nowrap; }
.dv--pole .dv-frame::after { content: ""; position: absolute; left: 45%; width: 10%; top: 100%; height: 90%; background: linear-gradient(90deg, #1b1c25, #0a0a0f); }
.dv--pole figcaption { margin-top: calc(112.5% + 12px); } /* pole = 90% of a 4:5 frame's height */
.dv--stand .dv-frame::after { content: ""; position: absolute; left: 40%; width: 20%; top: 100%; height: 22%; background: linear-gradient(90deg, #1b1c25, #0a0a0f); }
.dv--stand figcaption { margin-top: calc(16.5% + 12px); } /* stand = 22% of a 4:3 frame's height */
.dv--fridge .doors { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; height: clamp(40px, 9vw, 130px); margin-top: 10px;
  -webkit-mask: linear-gradient(180deg, #000 0%, transparent 100%); mask: linear-gradient(180deg, #000 0%, transparent 100%); }
.dv--fridge .doors i { border: 1px solid rgba(255,255,255,.12); border-radius: 3px; background: radial-gradient(circle, rgba(255,255,255,.14) 1px, transparent 1.4px) 0 0 / 9px 9px; }
.dv--strip .dv-frame { padding: 2px; border-radius: 3px; }

/* ---- Digital Kiosks: one kiosk, hero-scale ---- */
.kiosk-hero .stage { background: radial-gradient(ellipse 40% 55% at 50% 34%, rgba(48,55,143,.5), transparent 70%), radial-gradient(ellipse 34% 26% at 50% 74%, rgba(220,79,53,.22), transparent 72%); }
.kiosk-hero .stage::before { content: ""; position: absolute; left: 50%; top: -10%; width: 70%; height: 90%; transform: translateX(-50%); pointer-events: none;
  background: conic-gradient(from 180deg at 50% 0%, transparent 162deg, rgba(255,255,255,.05) 172deg, rgba(255,255,255,.09) 180deg, rgba(255,255,255,.05) 188deg, transparent 198deg); }
.kiosk-hero .floor { bottom: 0; height: 50%; opacity: .32; }
.kiosk-xl { position: relative; height: clamp(400px, calc(100svh - 320px), 650px); aspect-ratio: 9 / 16.5; z-index: 1; perspective: 1600px; }
.kiosk-xl .kiosk { height: 100%; width: 100%; aspect-ratio: auto; filter: none; transform: rotateY(-14deg) rotateX(2deg); transform-style: preserve-3d; }
.kiosk-xl .kiosk-body { border-radius: 14px; background: linear-gradient(150deg, #34354a 0%, #15161f 38%, #09090d 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), inset 2px 0 0 rgba(255,255,255,.08), 0 60px 90px -40px rgba(0,0,0,.95), 0 0 120px rgba(72,84,200,.18); }
.kiosk-xl .kiosk-body::after { content: ""; position: absolute; top: 1.2%; bottom: 1.2%; right: -16px; width: 16px; border-radius: 0 10px 10px 0; transform-origin: left center; transform: rotateY(62deg);
  background: linear-gradient(90deg, #1c1d28, #060609); }
.kiosk-xl .kiosk-body .screen { left: 6.5%; right: 6.5%; top: 4.5%; bottom: 15%; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 80px rgba(72,84,200,.35); }
.kiosk-xl .kiosk-base { height: 16px; width: 80%; }
.kiosk-xl .reflect { position: absolute; left: 50%; top: 100%; width: 140%; height: 90px; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 0%, rgba(220,79,53,.32), rgba(72,84,200,.12) 40%, transparent 70%); filter: blur(8px); pointer-events: none; }
.kiosk-xl .sim-screen { padding: 8cqw 8cqw 6cqw; gap: 6cqw; }
.sim-dock { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3cqw; padding-top: 5cqw; border-top: 1px solid rgba(255,255,255,.1); }
.sim-dock span { display: grid; place-items: center; padding: 3.4cqw 0; border-radius: 2.6cqw; background: rgba(255,255,255,.06); transition: background .3s; }
.sim-dock .glyph { width: 10cqw; }
.sim-dock .glyph .p { fill: rgba(255,255,255,.12); }
.sim-dock .glyph .p.on { fill: rgba(255,255,255,.8); }
.sim-dock span.on { background: rgba(220,79,53,.3); }
.sim-dock span.on .glyph .p.on { fill: #fff; }
.tap { position: absolute; width: 14cqw; height: 14cqw; border-radius: 50%; border: 2px solid rgba(255,255,255,.85); transform: translate(-50%, -50%) scale(.3); opacity: 0; pointer-events: none; z-index: 3; animation: tap 1.1s var(--ease) both; }
.tap::after { content: ""; position: absolute; inset: 35%; border-radius: 50%; background: rgba(255,255,255,.9); }
@keyframes tap { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.6); } }

/* ==========================================================================
   DIGITAL KIOSKS
   ========================================================================== */
.floor { position: absolute; left: -20%; right: -20%; bottom: 40px; height: 46%; transform: perspective(600px) rotateX(62deg); transform-origin: 50% 100%;
  background-image: radial-gradient(circle, rgba(255,255,255,.5) 1.2px, transparent 1.7px); background-size: 22px 22px; opacity: .35;
  -webkit-mask: radial-gradient(ellipse 40% 60% at 50% 30%, #000 0%, transparent 70%); mask: radial-gradient(ellipse 40% 60% at 50% 30%, #000 0%, transparent 70%); }
.kiosk { position: relative; height: min(100%, 470px); aspect-ratio: 9 / 18; display: flex; flex-direction: column; align-items: center; z-index: 1; filter: drop-shadow(0 30px 40px rgba(0,0,0,.55)); }
.kiosk-body { position: relative; flex: 1; width: 100%; border-radius: 10px; background: linear-gradient(160deg, #2a2b38 0%, #12131a 55%, #0a0a0f 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.kiosk-body .screen { left: 7%; right: 7%; top: 5%; bottom: 17%; border-radius: 3px; }
.kiosk-body .slot { position: absolute; left: 30%; right: 30%; bottom: 7%; height: 2.2%; border-radius: 3px; background: #050508; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.kiosk-base { width: 74%; height: 12px; margin-top: -2px; border-radius: 3px; background: linear-gradient(#1a1b24, #08080c); }
.kiosk-glow { position: absolute; left: 50%; bottom: -24px; width: 360px; height: 90px; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(220,79,53,.35), transparent 70%); filter: blur(10px); z-index: 0; }

/* Applications simulator */
.apps { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; margin-top: 36px; }
.sim { position: relative; max-width: 360px; width: 100%; justify-self: center; }
.sim .kiosk { height: auto; width: 100%; aspect-ratio: 9 / 16.5; filter: drop-shadow(0 30px 50px rgba(0,0,0,.45)); }
.sim .kiosk-body .screen { bottom: 13%; }
.sim-screen { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 7cqw; gap: 5cqw; background: linear-gradient(180deg, #17183a 0%, #0d0e24 100%); color: #fff; }
.sim-screen.enter { animation: wipe .7s var(--ease) both; }
.sim-top { display: flex; align-items: center; gap: 4cqw; }
.sim-top .glyph { width: 15cqw; }
.sim-top .glyph .p { fill: rgba(255,255,255,.1); }
.sim-top .glyph .p.on { fill: var(--accent); }
.sim-top b { font-family: "Geist", sans-serif; font-weight: 500; font-size: 7cqw; line-height: 1.15; }
.sim-body { flex: 1; display: grid; gap: 3cqw; align-content: start; }
.sk { border-radius: 2cqw; background: rgba(255,255,255,.08); }
.sk.line { height: 3.4cqw; }
.sk.row { height: 13cqw; display: flex; align-items: center; gap: 3cqw; padding: 0 3cqw; }
.sk.row i { width: 7cqw; height: 7cqw; border-radius: 1.6cqw; background: rgba(255,255,255,.18); flex: none; }
.sk.row u { flex: 1; height: 3cqw; border-radius: 2cqw; background: rgba(255,255,255,.14); text-decoration: none; }
.sk.row span { flex: 1; font-size: 4.8cqw; line-height: 1.2; color: rgba(255,255,255,.88); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-cap { font-size: 4.6cqw; line-height: 1.3; color: rgba(255,255,255,.7); }
.sk.acc { background: var(--accent); }
.sk-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3cqw; }
.sk-grid .sk { aspect-ratio: 1; }
.sk-map { position: relative; aspect-ratio: 1; border-radius: 2cqw; background-image: radial-gradient(circle, rgba(255,255,255,.22) 1px, transparent 1.4px); background-size: 6cqw 6cqw; background-color: rgba(255,255,255,.04); }
.sk-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sk-btn { height: 12cqw; border-radius: 2.4cqw; background: var(--accent); display: grid; place-items: center; font-size: 5cqw; font-weight: 500; }
.sk-btn.ghost { color: rgba(255,255,255,.85); }
.sk-btn.ghost { background: rgba(255,255,255,.1); }
.sk-tag { justify-self: start; padding: 2cqw 4cqw; border-radius: 2cqw; background: var(--gold); color: var(--ink); font-family: "Pixelify Sans", monospace; font-size: 8cqw; line-height: 1.1; }
.apps-grid { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.apps-grid button { width: 100%; height: 100%; min-height: 168px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 20px; text-align: left; background: var(--bg); color: var(--fg-2); transition: background .3s, color .3s; }
.apps-grid button:hover { background: color-mix(in srgb, var(--bg) 92%, var(--fg)); color: var(--fg); }
.apps-grid .glyph { width: 40px; }
.apps-grid .glyph .p.on { fill: var(--fg-3); }
.apps-grid button:hover .glyph .p.on { fill: var(--fg); }
.apps-grid button[aria-checked="true"] { color: var(--fg); background: color-mix(in srgb, var(--bg) 88%, var(--accent)); }
.apps-grid button[aria-checked="true"] .glyph .p.on { fill: var(--accent); }
.apps-grid span { font-size: 15px; line-height: 1.35; }
.apps-grid .idx { font-size: 12px; }


/* Journey convergence */
.journey { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px clamp(40px, 8vw, 140px); align-items: center; margin-top: 36px; }
.j-inputs { list-style: none; display: grid; gap: 18px; position: relative; z-index: 1; }
.j-in { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 10px; background: var(--panel); border: 1px solid var(--panel-line); box-shadow: var(--panel-shadow); }
.j-in .idx { font-size: 13px; }
.j-in b { font-family: "Geist", sans-serif; font-weight: 400; font-size: 19px; line-height: 1.3; color: var(--fg); }
.j-core { position: relative; z-index: 1; display: grid; place-items: center; }
.j-matrix { width: 100%; max-width: 320px; max-height: calc(var(--fit) - 30px); }
.j-matrix .p { fill: var(--dot-off); transition: fill .5s var(--ease); }
.j-matrix .p.on { fill: var(--accent); }
.j-matrix .p.k { fill: var(--dot-hub); }
.j-out { position: relative; z-index: 1; padding: 24px; border-radius: var(--radius); border: 1px dashed rgba(220,79,53,.55); }
.j-out b { display: block; font-family: "Geist", sans-serif; font-weight: 400; font-size: 22px; line-height: 1.25; }
.j-out p { margin-top: 8px; font-size: 14px; line-height: 22px; color: var(--fg-3); }

/* ==========================================================================
   ADVERTISING MANAGEMENT & CONTENT CREATION
   ========================================================================== */
.studio-dev { background: #0b0b10; padding: 10px; border-radius: 6px; box-shadow: 0 40px 70px -40px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.06); }
.studio-dev .screen { position: relative; inset: auto; width: 100%; aspect-ratio: 16 / 9; }
.studio-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; font-size: 13px; color: var(--fg-3); }
.duo { display: grid; gap: 28px; margin-top: 32px; }
.duo article { padding-left: 20px; border-left: 2px solid var(--line-2); }
.duo article.on { border-left-color: var(--accent); }
.duo h3 { color: var(--fg); }
.duo p { margin-top: 8px; color: var(--fg-2); font-size: 15px; line-height: 25px; }
.inputs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.inputs-label { width: 100%; font-size: 13px; color: var(--fg-3); margin-bottom: 4px; }

.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(32px, 5vw, 80px); margin-top: 20px; max-width: 920px; }
.two-col h3 { color: var(--fg); }
.two-col p { margin-top: 8px; color: var(--fg-2); }
.matrix-panel { margin-top: 28px; }
.matrix-ctl { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.matrix-ctl .picker { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.matrix-ctl .picker > span { font-size: 13px; color: var(--fg-3); margin-right: 4px; }
.deploy { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.matrix { --cols: 4; display: grid; grid-template-columns: 120px repeat(var(--cols), minmax(0, 1fr)); padding: 4px 20px 12px; }
.matrix .mh { font-size: 12px; color: var(--fg-3); text-align: center; padding: 8px 4px; }
.matrix .ml { font-size: 13px; color: var(--fg-2); display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); }
.matrix .ml i { width: 6px; height: 6px; border-radius: 50%; background: var(--dot-dim); transition: background .3s, box-shadow .3s; }
.matrix .ml.hot i { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.cell { position: relative; border-top: 1px solid var(--line); border-left: 1px solid var(--line); min-height: 50px; display: grid; place-items: center; padding: 8px 6px; transition: background .3s; }
.cell .scr { display: flex; gap: 5px; }
.cell .scr i { width: 18px; height: 12px; border-radius: 2px; background: var(--dot-off); transition: background .35s var(--ease), box-shadow .35s; }
.cell.on .scr i { background: color-mix(in srgb, var(--c) 45%, transparent); }
.cell.is-live .scr i, .cell .scr i.lit { background: var(--c); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 70%, transparent); }
/* deploy sequence */
.cell .scr i.lit { animation: pop .45s var(--ease); }
@keyframes pop { 0% { transform: scale(.4); filter: brightness(2.2); } 60% { transform: scale(1.3); } 100% { transform: scale(1); filter: none; } }
.cell.scan { background: color-mix(in srgb, var(--c) 8%, transparent); }
.matrix .mh { transition: color .3s; }
.matrix .mh.scan { color: var(--fg); }
.cell.ping::after { content: ""; position: absolute; inset: 8px 14%; border-radius: 8px; border: 1.5px solid var(--c); pointer-events: none; animation: cellping .7s var(--ease) forwards; }
@keyframes cellping { from { opacity: .8; transform: scale(.7); } to { opacity: 0; transform: scale(1.25); } }
.deploy-bar { position: relative; height: 2px; background: var(--line); overflow: hidden; }
.deploy-bar i { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(var(--p, 0)); background: var(--c, var(--accent)); box-shadow: 0 0 10px var(--c, var(--accent)); transition: transform .2s linear, opacity .6s; }
.deploy-bar.done i { opacity: 0; transition: opacity .8s .9s; }
.btn-accent.done { background: #1f8a5b; filter: none; }
.chip[disabled] { opacity: .5; cursor: not-allowed; }
/* section icons (LED glyphs, as in Potential Applications) */
.tc-ico { display: block; width: 40px; margin: 0 auto 14px; }
.matrix-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 0 20px 18px; font-size: 12px; color: var(--fg-3); }
.matrix-foot span { display: inline-flex; align-items: center; gap: 8px; }
.matrix-foot i { width: 14px; height: 9px; border-radius: 2px; background: var(--dot-off); }
.matrix-foot i.p { background: color-mix(in srgb, var(--accent) 45%, transparent); }
.matrix-foot i.l { background: var(--accent); }

.multi { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.multi .seg { margin-top: 28px; }
.ms-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.ms-master { position: relative; z-index: 1; }
.ms-master .label, .ms-sites .label { display: block; font-size: 12px; color: var(--fg-3); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; }
.ms-sites { position: relative; z-index: 1; }
.ms-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mini { background: #0b0b10; padding: 4px; border-radius: 4px; box-shadow: 0 16px 28px -18px rgba(0,0,0,.7); }
.mini .screen { position: relative; inset: auto; width: 100%; aspect-ratio: 16 / 10; }
.mini figcaption { font-size: 11px; color: var(--fg-3); padding: 6px 2px 0; }
.ms-cr { position: absolute; inset: 0; display: grid; align-content: space-between; padding: 7cqmin; background: var(--bg-c); color: #fff; transition: background .5s var(--ease); }
.ms-cr b { font-family: "Pixelify Sans", monospace; font-weight: 500; font-size: 17cqmin; line-height: 1; }
.ms-cr small { font-family: "Geist", sans-serif; font-size: max(6px, 7.5cqmin); letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.ms-cr .loc { display: inline-block; justify-self: start; padding: 1cqmin 3cqmin; border-radius: 2cqmin; background: rgba(0,0,0,.28); transition: opacity .4s; }
.mode-same .ms-cr .loc { opacity: 0; }

/* ==========================================================================
   CUSTOMER ANALYTICS
   ========================================================================== */
.aud-stage { background: radial-gradient(ellipse 60% 70% at 50% 18%, rgba(48,55,143,.35), transparent 70%); }
.aud-svg { width: min(1280px, 100%); height: 100%; display: block; }
.aud-svg .scr-frame { fill: #0b0b10; }
.aud-svg .wave { fill: none; stroke: rgba(255,255,255,.35); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; animation: wave 4.8s linear infinite; }
.aud-svg .wave.w2 { animation-delay: 1.6s; } .aud-svg .wave.w3 { animation-delay: 3.2s; }
@keyframes wave { 0% { opacity: .55; transform: scale(.05); } 100% { opacity: 0; transform: scale(1); } }
.aud-svg .a { fill: rgba(255,255,255,.16); animation: engage 4.8s linear infinite; animation-delay: var(--t); }
.aud-svg .a.e { --hi: var(--accent); }
.aud-svg .a.m { --hi: var(--gold); }
@keyframes engage { 0%, 6% { fill: var(--hi, rgba(255,255,255,.55)); } 30%, 100% { fill: rgba(255,255,255,.16); } }
.aud-svg .back { fill: none; stroke: var(--gold); stroke-width: 1; stroke-dasharray: 2 5; opacity: .55; animation: current 1.6s linear infinite; }

/* Spotlights (AI Digital Media Management, Advertising & Content, Customer Analytics) use the Display Solutions pattern:
   the list (.touch-list) picks one item and its visual fills the panel beside it. The visuals share one grid cell, so the
   panel keeps the tallest one's height and never jumps as the selection moves; only the selected one is shown. */
.pane-stage { display: grid; padding: clamp(20px, 2.4vw, 32px); }
.pane-stage > .inst { grid-area: 1 / 1; min-height: 0; padding: 0; gap: 16px; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility 0s linear .45s; }
.pane-stage > .inst.on { opacity: 1; visibility: visible; transition: opacity .45s var(--ease); }
.pane-stage > .inst:hover { transform: none; }
.pane-stage > .inst.reset * { transition: none !important; animation: none !important; }   /* rewinds a visual so its entrance replays */
.pane-stage .viz { margin: 0; }
.pane-stage .viz:not(.fill) > svg { max-height: 340px; }
@media (min-width: 901px) {   /* the panel runs the full height of the list, like the Display Solutions map */
  .spotlight .touch-map { display: flex; flex-direction: column; }
  .spotlight .pane-stage { flex: 1 1 auto; }
}
.inst { padding: clamp(20px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 24px; min-height: 260px; transition: transform .35s var(--ease), border-color .35s; }
.inst:hover { transform: translateY(-3px); border-color: rgba(220,79,53,.45); }
.inst header { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.inst h3 { color: var(--fg); }
.inst .idx { font-size: 13px; }
.inst .viz { margin: auto 0; }   /* chart centred between title and legend; legends line up at the bottom */
.inst .viz.fill { flex: 1 1 auto; position: relative; min-height: 160px; margin: 0; }   /* narrow card: the chart takes the row's height */
.inst .viz.fill > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.inst svg { display: block; width: 100%; height: auto; overflow: visible; }
@media (min-width: 1101px) { .i-content .cp { grid-template-columns: minmax(0, 1fr) minmax(0, 3.3fr); } }   /* poster and chart come out the same height */
.inst .p { fill: var(--dot-off); }
.inst .p.on { fill: var(--dot-dim); }
.inst .p.hi { fill: var(--accent); }
.inst .p.g { fill: var(--gold); }
.js .inst .p.on, .js .inst .p.hi, .js .inst .p.g { opacity: 0; transition: opacity .4s ease; transition-delay: calc(var(--k, 0) * 18ms); }
.js .inst.in .p.on, .js .inst.in .p.hi, .js .inst.in .p.g { opacity: 1; }
.inst .tx { font: 12px "Inter", sans-serif; fill: var(--fg-3); }
.inst .trail { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.js .inst .trail { stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 2s var(--ease) .3s; }
.js .inst.in .trail { stroke-dashoffset: 0; }
.inst .mk { stroke: var(--fg-3); stroke-dasharray: 2 4; }
.dash-intro { max-width: 520px; }
/* Advertising Management: planner */
.inst .pc { fill: var(--hover-bg); stroke: var(--line-2); }
.inst .pc-sel rect { fill: var(--accent); }
.inst .pc-sel rect.pip { fill: rgba(255,255,255,.55); }
/* Campaign Deployment: hub and screens */
.inst .hub-r { fill: #15162b; }
.inst .hub-t { font: 500 13px "Inter", sans-serif; fill: #fff; }
.inst .dp { fill: none; stroke: var(--trace); stroke-width: 1.2; }
.inst .dpp { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 8 92; opacity: 0; }
.inst .scr-b { fill: #1b1c28; }
.inst .scl rect { fill: var(--accent); }
.inst .scl text { font: 500 12px "Pixelify Sans", monospace; fill: #fff; }
/* Creative Content: an asset builds layer by layer */
.cc { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: center; }
.cc-layers { list-style: none; display: grid; gap: 9px; font-size: 13px; color: var(--fg); }
.cc-layers li { display: flex; align-items: center; gap: 8px; }
.cc-layers li::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); flex: none; }
.cc-screen { position: relative; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; background: #0d0e24; box-shadow: 0 0 0 4px #15162b, 0 18px 30px -18px rgba(0,0,0,.6); container-type: size; }
.cc-bg { position: absolute; inset: 0; background: linear-gradient(120deg, #a23c16, #dc4f35); }
.cc-img { position: absolute; right: 0; top: 0; width: 50%; height: 100%; object-fit: cover; -webkit-mask: linear-gradient(90deg, transparent, #000 30%); mask: linear-gradient(90deg, transparent, #000 30%); }
.cc-h { position: absolute; left: 7%; top: 18%; font: 500 15cqh/1 "Pixelify Sans", monospace; color: #fff; }
.cc-h i { font-style: normal; color: #0e0f1e; }
.cc-h small { display: block; margin-top: 4cqh; font: 500 6.5cqh "Inter", sans-serif; letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.cc-cta { position: absolute; left: 7%; bottom: 14%; padding: 3cqh 6cqh; border-radius: 99px; background: #fff; color: #0e0f1e; font: 500 7cqh "Inter", sans-serif; }
.cc-guides { position: absolute; inset: 7%; border: 1px dashed rgba(255,255,255,.4); border-radius: 3px; opacity: 0; pointer-events: none; }
/* Promotional Content: inputs become promotions */
/* Creative Content in the panel: the screen sits left, its layers sit right */
@media (min-width: 761px) {
  .a-creative .cc { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: clamp(24px, 3vw, 40px); }
  .a-creative .cc-screen { order: -1; }
  .a-creative .cc-layers { gap: 0; font-size: 14px; counter-reset: ly; }   /* reads like a design tool's layers panel */
  .a-creative .cc-layers li { gap: 12px; padding: 12px 2px; border-top: 1px solid var(--line); counter-increment: ly; }
  .a-creative .cc-layers li:last-child { border-bottom: 1px solid var(--line); }
  .a-creative .cc-layers li::after { content: "Layer " counter(ly); margin-left: auto; font-size: 12px; color: var(--fg-3); }
  .pane-stage .mu-s { padding: 12px 4px 10px; } .pane-stage .mu-master { padding: 20px 6px; } .pane-stage .mu-t { font-size: 17px; }
}
.pm { display: grid; grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1.15fr); gap: 10px; align-items: center; }
.pm-in { display: grid; gap: 4px; }
.pm-in button { display: flex; align-items: center; gap: 10px; text-align: left; font-size: 13px; line-height: 1.25; padding: 7px 4px; border-radius: 6px; color: var(--fg-3); transition: color .25s; }
.pm-in button:hover { color: var(--fg); }
.pm-in button[aria-checked="true"] { color: var(--fg); font-weight: 500; }
/* Selection indicator: an LED. Off = hollow ring, selected = lit orange LED with a soft glow (no pill, no side bar) */
.pm-in button::before, .ds-pick button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1.5px var(--line-2); transition: background .25s, box-shadow .25s; }
.pm-in button:hover::before, .ds-pick button:hover::before { box-shadow: inset 0 0 0 1.5px var(--fg-3); }
.pm-in button[aria-checked="true"]::before, .ds-pick button[aria-checked="true"]::before { background: var(--accent); box-shadow: 0 0 0 3px rgba(220,79,53,.16), 0 0 10px rgba(220,79,53,.6); }
.pm-arrow { width: 22px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.screen.pm-screen { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 4px; box-shadow: 0 0 0 4px #15162b, 0 0 30px rgba(var(--glow, 220,79,53), .25); }
/* Multi-Site Campaigns */
.mu { position: relative; display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 14px 36px; align-items: center; }
.mu-master, .mu-s { position: relative; z-index: 1; border-radius: 6px; background: #15162b; color: #fff; display: grid; place-items: center; text-align: center; }
.mu-master { padding: 14px 6px; box-shadow: 0 0 0 1px rgba(220,79,53,.5), 0 0 24px rgba(220,79,53,.2); }
.mu-master .mu-t { color: var(--accent); }
.mu-master small, .mu-s small { font-size: 10px; line-height: 1.2; color: rgba(255,255,255,.6); }
.mu-sites { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mu-s { padding: 8px 4px 6px; background: var(--accent); transition: background .6s var(--ease); }
.mu-t { font: 500 15px/1.1 "Pixelify Sans", monospace; }
.mu-t i { font-style: normal; color: #0e0f1e; }
.mu-s .mu-t { grid-area: 1 / 1; transition: opacity .5s; }
.mu-s small { grid-area: 2 / 1; color: rgba(255,255,255,.85); }
.mu-s .mu-t.b { opacity: 0; }
.mu.tailored .mu-s { background: var(--g); }
.mu.tailored .mu-s .mu-t.a { opacity: 0; } .mu.tailored .mu-s .mu-t.b { opacity: 1; }
.mu-mode { grid-column: 1 / -1; justify-self: start; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); }

/* looping motion for the five visuals (only the selected one, while on screen; .playing) */
@keyframes plancell { 0% { opacity: 0; transform: scale(.6); } 8%, 78% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: scale(.92); } }
.inst .pc-sel { transform-box: fill-box; transform-origin: center; }
.inst.playing .pc-sel { animation: plancell 6.4s var(--ease) calc(var(--k, 0) * .3s) infinite both; }
@keyframes dpulse { 0% { stroke-dashoffset: 0; opacity: 1; } 28% { stroke-dashoffset: -92; opacity: 1; } 30%, 100% { stroke-dashoffset: -92; opacity: 0; } }
@keyframes scron { 0%, 27% { opacity: 0; } 32%, 86% { opacity: 1; } 100% { opacity: 0; } }
.inst.playing .dpp { animation: dpulse 4.2s linear calc(var(--k, 0) * .28s) infinite both; }
.inst.playing .scl { animation: scron 4.2s ease calc(var(--k, 0) * .28s) infinite both; }
@keyframes layerin { 0% { opacity: 0; transform: var(--from, none); } 10%, 82% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; } }
@keyframes layertick { 0% { opacity: .25; } 10%, 82% { opacity: 1; } 92%, 100% { opacity: .25; } }
@keyframes guides { 0%, 4% { opacity: .9; } 30%, 100% { opacity: 0; } }
.cc-bg { --from: translateX(-8%); } .cc-img { --from: translateX(10%); } .cc-h { --from: translateY(10%); } .cc-cta { --from: scale(.6); }
.inst.playing .cc-l { animation: layerin 7s var(--ease) calc(var(--k, 0) * .6s) infinite both; }
.inst.playing .cc-layers li { animation: layertick 7s ease calc(var(--k, 0) * .6s) infinite both; }
.inst.playing .cc-guides { animation: guides 7s ease infinite; }

/* ---------- AI Digital Media Management: five platform cards ----------
   Kept light: one idea per card, few labels, pale tiles; red marks what is live. */
/* Manage: a scope selector over three sites of three screens */
.mg { display: grid; gap: 22px; }
.mg-seg { justify-self: start; max-width: 100%; }
.mg-net { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 22px); }
.mg-site { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mg-site i { aspect-ratio: 4 / 3; border-radius: 4px; background: var(--hover-bg); box-shadow: inset 0 0 0 1px var(--line-2); transition: background .35s var(--ease), box-shadow .35s; transition-delay: calc(var(--k, 0) * 22ms); }
.mg-site i.on { background: var(--accent); box-shadow: 0 6px 14px -8px rgba(220,79,53,.8); }
.mg-site span { grid-column: 1 / -1; margin-top: 4px; font-size: 12px; color: var(--fg-3); text-align: center; }
/* Schedule: one campaign per location across the week, lit as the playhead passes */
.sc { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; align-items: center; }
.sc-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); font-size: 11px; letter-spacing: .04em; color: var(--fg-3); text-align: center; }
.sc-loc { font-size: 12px; color: var(--fg-3); white-space: nowrap; }
.sc-trk { position: relative; height: 30px; border-radius: 6px; background: var(--hover-bg); }
.sc-bar { position: absolute; top: 4px; bottom: 4px; left: calc(var(--s) / 7 * 100% + 2px); width: calc((var(--e) - var(--s)) / 7 * 100% - 4px); display: flex; align-items: center; padding: 0 9px; border-radius: 5px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-phw { position: absolute; left: 86px; right: 0; top: 18px; bottom: -4px; pointer-events: none; }   /* tracks area: past the 76px label column + gap */
.sc-ph { position: absolute; left: 0; top: 0; bottom: 0; width: 0; opacity: 0; }   /* zero-width: sweeping it never widens the page */
.sc-ph::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1.5px; background: var(--accent); }
.sc-ph::after { content: ""; position: absolute; left: -3px; top: -3px; width: 7.5px; height: 7.5px; border-radius: 50%; background: var(--accent); }
.inst.playing .sc-ph { opacity: 1; animation: scsweep 9s linear infinite; }
@keyframes scsweep { from { left: 0; } to { left: 100%; } }
.inst.playing .sc-bar { animation: var(--lit) 9s linear infinite; }
/* Distribute: one publish ripples across a 12-screen estate */
.ds { display: grid; gap: 16px; }
.ds-estate { display: grid; gap: 8px; }
.ds-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ds-s { position: relative; aspect-ratio: 16 / 10; border-radius: 5px; overflow: hidden; background: var(--hover-bg); box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow .5s; }
.ds-s.ping { box-shadow: 0 0 0 2px rgba(220,79,53,.45); transition: box-shadow 0s; }
.ds-l { position: absolute; inset: 5px; border-radius: 3px; background: var(--c-bg); opacity: 0; }   /* the campaign sits inside a pale screen frame */
.ds-l.on { opacity: 1; z-index: 2; animation: dswipe .4s var(--ease) both; }   /* new creative wipes over the old one: never a muddy blend of the two */
.ds-l.was { opacity: 1; z-index: 1; }
@keyframes dswipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.ds-pick { display: grid; gap: 2px; }
.ds-pick button { display: flex; align-items: center; gap: 10px; padding: 7px 4px; font-size: 14px; line-height: 1.25; text-align: left; color: var(--fg-3); transition: color .25s; }
.ds-pick button:hover, .ds-pick button[aria-checked="true"] { color: var(--fg); }
.ds-pick button[aria-checked="true"] { font-weight: 500; }
/* each campaign's dot is its colour on the screens */
.ds-pick button::before { background: var(--c); box-shadow: none; opacity: .35; transition: opacity .25s; }
.ds-pick button:hover::before { box-shadow: none; opacity: .6; }
.ds-pick button[aria-checked="true"]::before { background: var(--c); opacity: 1; box-shadow: 0 0 0 3px rgba(23,24,31,.07); }
.ds-msg { padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--fg-3); }
.ds-msg b { font-weight: 500; color: var(--fg); }
@media (min-width: 761px) {   /* in the panel: the estate on the left, the content picker and its status on the right */
  .m-distribute .ds { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); column-gap: clamp(24px, 3vw, 40px); align-items: center; }
  .m-distribute .ds-ctl { display: grid; gap: 12px; }
}
/* Optimise: performance climbs with each insight-driven adjustment */
.inst .op-line { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; }
.inst .op-mk circle { fill: var(--accent); stroke: #f4f4f6; stroke-width: 2; }
.inst .op-mk text { font: 500 13px "Inter", sans-serif; fill: var(--fg-2); }
.inst .op-mk { transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes opdraw { 0% { stroke-dashoffset: 100; opacity: 1; } 55%, 88% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes oparea { 0%, 10% { opacity: 0; } 55%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes opm1 { 0%, 13% { opacity: 0; transform: scale(.6); } 17%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes opm2 { 0%, 31% { opacity: 0; transform: scale(.6); } 35%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes opm3 { 0%, 50% { opacity: 0; transform: scale(.6); } 54%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
.inst.playing .op-line { stroke-dasharray: 100; animation: opdraw 8s var(--ease) infinite both; }
.inst.playing .op-area { animation: oparea 8s ease infinite both; }
.inst.playing .op-mk.m1 { animation: opm1 8s var(--ease) infinite both; }
.inst.playing .op-mk.m2 { animation: opm2 8s var(--ease) infinite both; }
.inst.playing .op-mk.m3 { animation: opm3 8s var(--ease) infinite both; }
/* Scale: the network grows from one site to six */
.inst .sn-hub { fill: var(--accent); }
.inst .sn-hub-t { font: 500 12px "Inter", sans-serif; fill: #fff; }
.inst .sn-bus { fill: none; stroke: var(--trace); stroke-width: 1.2; }
.inst .sn-w { fill: none; stroke: var(--trace); stroke-width: 1.2; stroke-dasharray: 3 4; transition: stroke .4s; }
.inst .sn-ph { fill: none; stroke: var(--line-2); stroke-dasharray: 3 3; }
.inst .sn-live { opacity: 0; transform: scale(.85); transform-box: fill-box; transform-origin: center; transition: opacity .45s var(--ease), transform .45s var(--ease); }
.inst .sn-live rect.b { fill: #fff; stroke: var(--line-2); }
.inst .sn-live rect.s { fill: var(--accent); }
.inst .sn-site.on .sn-live { opacity: 1; transform: none; }
.inst .sn-site.on .sn-w { stroke: var(--accent); stroke-dasharray: none; }
.sn-ctl { display: grid; gap: 8px; margin-top: 14px; }
.sn-out { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--fg-3); }
.sn-out b { font-weight: 500; color: var(--fg); }
.sn-range { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; cursor: pointer; --p: 0%; }
.sn-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--accent) var(--p), var(--line-2) var(--p)); }
.sn-range::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--accent) var(--p), var(--line-2) var(--p)); }
.sn-range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--accent), 0 2px 6px rgba(0,0,0,.2); }
.sn-range::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--accent), 0 2px 6px rgba(0,0,0,.2); }
.sn-range:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
@media (max-width: 760px) {
  .mg-seg { justify-self: stretch; display: flex; }
  .mg-seg button { flex: 1; min-width: 0; padding: 0 4px; font-size: 12px; }
  .mg-net { gap: 10px; }
  .mg-site { gap: 4px; }
  .mg-site span { font-size: 11px; }
  .ds-row { gap: 6px; }
  .sc { grid-template-columns: 64px minmax(0, 1fr); gap: 8px; }
  .sc-phw { left: 72px; }
  .sc-bar { padding: 0 6px; font-size: 11px; }
  .inst .op-mk text { font-size: 19px; }
  .inst .sn-hub-t { font-size: 16px; }
}

/* Customer interaction patterns: each journey as its share, its name and its route in plain text */
.ip { display: grid; list-style: none; container-type: inline-size; }
.ip-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.ip-row:first-child { border-top: 0; padding-top: 4px; }
.ip-pct { display: grid; gap: 6px; }
.ip-pct b { font: 500 22px/1 "Geist", sans-serif; letter-spacing: -0.02em; color: var(--fg); }
.ip-bar { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.ip-bar i { display: block; height: 100%; width: var(--w); background: var(--c); border-radius: 2px; }
.ip-txt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; min-width: 0; }
.ip-name { font-size: 15px; font-weight: 500; color: var(--fg); white-space: nowrap; }
.ip-path { font-size: 13px; color: var(--fg-3); }
.ip-path i { font-style: normal; padding: 0 2px; color: var(--c); }

.inst-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--fg-3); }
.inst-legend span { display: inline-flex; align-items: center; gap: 8px; }
.inst-legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.inst-legend i.dim { background: var(--dot-dim); }
.inst-legend i.gold { background: var(--gold); }
.note { margin-top: 20px; font-size: 12px; color: var(--fg-3); }

.loop { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.loop-ring { position: relative; width: 100%; max-width: 560px; justify-self: center; }
.loop-svg { display: block; width: 100%; height: auto; overflow: visible; }
.loop-svg .r { fill: var(--dot-off); }
.loop-svg .r.lit { fill: var(--accent); }
.loop-svg .node circle:not(.hit) { fill: var(--bg); stroke: var(--dot-dim); stroke-width: 1.5; transition: stroke .35s, fill .35s; }
.loop-svg .node .hit { stroke: none; }
.loop-svg .node text { font: 500 15px "Geist", sans-serif; fill: var(--fg-3); transition: fill .35s; }
.loop-svg .node.on circle:not(.hit) { stroke: var(--accent); fill: var(--accent); }
.loop-svg .node.on text { fill: var(--fg); }
.loop-svg .node { cursor: pointer; }
.loop-svg .node:focus { outline: none; }
.loop-svg .node:focus-visible circle:not(.hit) { stroke: var(--gold); stroke-width: 3; }
.loop-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.loop-center b { font-family: "Pixelify Sans", monospace; font-weight: 500; font-size: clamp(28px, 4vw, 48px); line-height: 1; color: var(--fg); }
.loop-center small { margin-top: 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }

/* ==========================================================================
   CTA + footer (approved)
   ========================================================================== */
.cta { position: relative; padding: var(--section) 0; background: var(--ink); color: #fff; }
.cta-card { position: relative; overflow: hidden; border-radius: 16px; background: var(--accent-deep); padding: clamp(40px, 6vw, 80px) clamp(24px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 32px; isolation: isolate; color: #fff; }
.cta-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
    radial-gradient(ellipse 60% 90% at 100% 100%, rgba(231,169,74,.45), transparent 70%),
    linear-gradient(100deg, rgba(160,58,20,1) 0%, rgba(176,64,26,.95) 45%, rgba(200,90,40,.9) 100%); }
.cta-card::after { content: ""; position: absolute; right: -40px; top: -40px; width: 55%; height: 140%; z-index: -1; opacity: .5;
  background-image: radial-gradient(circle, rgba(255,217,184,.9) 1.4px, transparent 1.9px); background-size: 10px 10px;
  -webkit-mask: radial-gradient(ellipse at 80% 30%, #000 0%, transparent 65%); mask: radial-gradient(ellipse at 80% 30%, #000 0%, transparent 65%); }
.cta-card h2 { max-width: 760px; margin: 0 auto; }
.cta-card h2 .sep { color: #ffd9b8; }
.cta-card p { margin: 20px auto 0; font-size: 18px; line-height: 28px; color: rgba(255,255,255,.92); max-width: 560px; }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }
.cta-actions .btn { width: auto; }
.cta-actions .btn-ghost { background: rgba(14,15,30,.18); border-color: rgba(255,255,255,.35); color: #fff; }

/* ---------- Page header (contact and legal pages, at the site root) ----------
   The inner pages' dark hero, compact: crumbs and an h1 with one Pixelify word, over a dimmed forecourt photo */
.page-hero { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--ink); padding: clamp(150px, 21vh, 220px) 0 clamp(48px, 8vh, 88px); }
.page-hero__bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; opacity: .55; }
.page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(0deg, var(--ink) 0%, rgba(14,15,30,.8) 42%, rgba(14,15,30,.5) 100%), linear-gradient(90deg, rgba(14,15,30,.65) 0%, transparent 62%); }
.page-hero h1 { max-width: 760px; margin-top: 12px; }
.page-hero .updated { margin-top: 16px; color: rgba(255,255,255,.78); }

/* ---------- Contact page (../pages/contact.html) ----------
   A light section with the form in a panel and "what happens next" set like the Display Solutions list.
   Form fields use the light-tone tokens. */
.contact-stack { display: grid; justify-items: center; gap: clamp(56px, 6vw, 96px); }   /* the landscape kiosk, then the three steps side by side beneath it */
.cform-intro { margin-top: 8px; font-size: 14px; color: var(--fg-3); }
.cform-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.cfield { display: grid; gap: 8px; align-content: start; }
.cfield.wide { grid-column: 1 / -1; }
.cfield label { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--fg); }
.cfield .opt { font-weight: 400; color: var(--fg-3); }
.cfield :is(input, select, textarea) { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--field-bg, #fff); color: var(--fg); font: inherit; font-size: 16px; line-height: 1.4; transition: border-color .2s, box-shadow .2s; }
.cfield textarea { min-height: 148px; resize: vertical; }
.cfield select { appearance: none; padding-right: 40px; cursor: pointer;
  background: var(--field-bg, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%235f616c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 15px center / 12px 8px; }
.cfield :is(input, select, textarea):hover { border-color: var(--field-hover, rgba(23,24,31,.32)); }
.cfield :is(input, select, textarea):focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(220,79,53,.16); }
.cfield.invalid :is(input, select, textarea) { border-color: var(--accent-text); }
.cfield .err { font-size: 13px; line-height: 18px; color: var(--accent-text); }
.cfield .err:empty { display: none; }
.cform-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }   /* spam trap: people never see it */
/* Security check (Cloudflare Turnstile): the space is held so the form doesn't jump when the widget appears */
.cform-captcha-label { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--fg); }
.cform-captcha { min-height: 65px; max-width: 100%; }
.cform-captcha iframe { max-width: 100%; }
.cform-noscript { font-size: 13px; line-height: 20px; color: var(--accent-text); }
.cform button[type="submit"][disabled]:not(.loading) { cursor: not-allowed; }   /* waiting for the security check, not busy */
.cform-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.cform-privacy { font-size: 13px; line-height: 20px; color: var(--fg-3); max-width: 340px; text-align: right; }
.cform-foot .btn { order: -1; }   /* Send enquiry on the left, the note on the right */
.cform-privacy a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.cform-status { margin-top: 14px; }
.cform-status:empty { display: none; }
.cform-status.err, .cform-alert { color: var(--accent-text); }
.cform-alert { display: none; margin-top: 16px; padding: 12px 14px; border-radius: 8px; background: rgba(220,79,53,.08); font-size: 14px; line-height: 21px; }
.cform-alert:target { display: block; }   /* without JavaScript, contact.php sends the visitor back to #send-error */
/* sent: the form gives way to a confirmation (JS adds .is-sent; without JS, contact.php sends the visitor to #sent) */
.cform-done { display: none; }
.contact-card.is-sent .cform, .contact-card:has(.cform-done:target) .cform { display: none; }
.contact-card.is-sent .cform-done, .cform-done:target { display: block; }
.cform-done:focus { outline: none; }
.contact-card, .cform-done, .cform-alert { scroll-margin-top: 120px; }   /* clear of the fixed nav when the page jumps to #sent or #send-error */
.cform-check { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--accent); color: #fff; box-shadow: 0 0 0 6px rgba(220,79,53,.12); }
.cform-check svg { width: 22px; height: 22px; }
.cform-done h2 { margin-top: 24px; }
.cform-done p { margin-top: 12px; max-width: 460px; color: var(--fg-2); }
.cform-done-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
/* The kiosk: the Digital Kiosks page's LED kiosk (7px dot-matrix housing, slot, light strip, neck, base), sized up so
   the enquiry form runs on its touchscreen. The strip reports the form's state: dim while it is being filled in, lit
   when every required field is done, pulsing while it sends, green once sent. */
.kform { --led: radial-gradient(circle at 50% 50%, #000 0 2.7px, transparent 3.1px) calc(50% + 3.5px) 0 / 7px 7px;
  display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 1120px; }
.kform-body { position: relative; width: 100%; border-radius: 28px; padding: clamp(16px, 3vw, 34px) clamp(14px, 3vw, 34px) 0; }
.kform-body::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, #262733 0%, #16171e 100%); -webkit-mask: var(--led); mask: var(--led); }
.kform-screen { position: relative; z-index: 1; overflow: hidden; border-radius: 12px; container: kscreen / inline-size;
  background: linear-gradient(180deg, #17183a 0%, #0d0e24 100%); color: #fff; box-shadow: 0 0 0 3px #16171e; transition: box-shadow .35s var(--ease);
  /* the screen is dark: the form's tokens switch to their dark values */
  --fg: #ffffff; --fg-2: rgba(255,255,255,.78); --fg-3: rgba(255,255,255,.6); --line: rgba(255,255,255,.09); --line-2: rgba(255,255,255,.18);
  --hover-bg: rgba(255,255,255,.06); --accent-text: #ff8d75; --field-bg: rgba(255,255,255,.05); --field-hover: rgba(255,255,255,.34); color-scheme: dark; }
.kform-screen:focus-within { box-shadow: 0 0 0 3px #16171e, 0 0 0 4px rgba(220,79,53,.35), 0 0 46px rgba(220,79,53,.22); }   /* the screen lights up while it is in use */
.kform-screen select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23c4c5d0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); }
.kform-screen select option { background: #17183a; color: #fff; }
.kform-screen input:-webkit-autofill, .kform-screen textarea:-webkit-autofill { -webkit-text-fill-color: #fff; box-shadow: 0 0 0 60px #1d1e3f inset; caret-color: #fff; }
.kform-screen .btn-ghost { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); color: #fff; }
.kform-screen .btn-ghost:hover { background: rgba(255,255,255,.18); }
.kform-screen .tap { width: 56px; height: 56px; z-index: 6; }   /* a touch where the visitor taps, like the kiosk hero */
.kform-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; padding: 16px clamp(18px, 3vw, 28px); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.03); }
.kform-top .glyph { width: 30px; flex: none; }
.kform-top .glyph .p { fill: rgba(255,255,255,.1); }
.kform-top .glyph .p.on { fill: var(--accent); }
.kform-h { font-family: "Geist", sans-serif; font-weight: 500; font-size: 19px; line-height: 1.25; letter-spacing: -0.01em; }
.kform-progress { margin-left: auto; display: grid; gap: 6px; justify-items: end; }
.kform-progress small { font-size: 12px; line-height: 16px; color: var(--fg-3); }
.kform-meter { display: block; width: 120px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.12); overflow: hidden; }
.kform-meter i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--accent); transition: width .45s var(--ease), background .3s; }
.kform.is-ready .kform-meter i, .kform.is-sent .kform-meter i { background: var(--green); }
.kform-screen .cform, .kform-screen .cform-done { padding: clamp(20px, 3vw, 30px) clamp(18px, 3vw, 30px) clamp(22px, 3vw, 30px); }
.kform-screen .cform-done { min-height: 360px; }
.kform-chin { position: relative; width: 100%; height: clamp(56px, 6vw, 82px); }
.kform-slot { position: absolute; left: 50%; top: 36%; width: clamp(90px, 20%, 220px); height: 5px; transform: translateX(-50%); border-radius: 3px; background: #08080b; box-shadow: 0 1px 0 rgba(255,255,255,.06); }
.kform-strip { position: absolute; left: 50%; top: 64%; width: clamp(60px, 12%, 140px); height: 5px; transform: translateX(-50%); border-radius: 3px; background: var(--accent); opacity: .5; box-shadow: 0 0 12px rgba(220,79,53,.5); transition: opacity .4s, background .4s, box-shadow .4s; }
.kform.is-ready .kform-strip { opacity: 1; box-shadow: 0 0 22px rgba(220,79,53,.9); }
.kform.is-sending .kform-strip { opacity: 1; animation: kstrip .8s ease-in-out infinite alternate; }
@keyframes kstrip { from { opacity: .3; } to { opacity: 1; } }
.kform.is-sent .kform-strip, .kform:has(.cform-done:target) .kform-strip { opacity: 1; background: var(--green); box-shadow: 0 0 22px rgba(62,207,142,.85); }
.kform-neck { width: clamp(64px, 12%, 140px); height: 56px; background: linear-gradient(90deg, #17181f 0%, #282934 50%, #17181f 100%); -webkit-mask: var(--led); mask: var(--led); }
.kform-base { width: clamp(180px, 36%, 420px); height: 14px; border-radius: 7px 7px 4px 4px; background: linear-gradient(180deg, #2a2b36, #17181f); -webkit-mask: var(--led); mask: var(--led); }
@container kscreen (max-width: 420px) { .kform-progress small { display: none; } .kform-meter { width: 72px; } }
/* what happens next: numbered like the Display Solutions list */
.contact-aside { width: 100%; max-width: 1120px; }
.next-steps { list-style: none; margin-top: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); }
.next-steps li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 6px 12px; align-items: baseline; align-content: start; padding: 20px 4px 0; border-top: 1px solid var(--line); }
.next-steps .idx { font-size: 24px; line-height: 26px; letter-spacing: .02em; }   /* sized like the legal pages' section numbers */
.next-steps b { font-family: "Geist", sans-serif; font-weight: 400; font-size: 18px; line-height: 26px; letter-spacing: -0.01em; color: var(--fg); }
.next-steps p { grid-column: 2; font-size: 14px; line-height: 21px; color: var(--fg-2); }
@media (max-width: 900px) {
  .next-steps { grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line); }
  .next-steps li { padding: 20px 4px; border-top: 0; border-bottom: 1px solid var(--line); }
}
@container kscreen (min-width: 1000px) {   /* the landscape screen: three columns, each wide enough for the full-size security check */
  .cform-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* the message spans the form; the security check sits under it on the left, one column wide (under Full name / Phone) */
.cform-grid .cform-captcha-field { grid-column: 1 / 2; }
@container kscreen (max-width: 540px) { .cform-grid { grid-template-columns: minmax(0, 1fr); } .cform-foot .btn { width: 100%; } .cform-privacy { text-align: left; max-width: none; } }   /* a narrow kiosk screen: one column */

/* ---------- Legal pages (../pages/privacy-policy.html, ../pages/terms-and-conditions.html) ----------
   An "On this page" list numbered like the Display Solutions list (sticky beside the text), and the text set for reading */
.legal-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
/* The list never scrolls on its own. Each row gets an exact height that lets every section fit below the nav:
   (screen height - 161px for the nav offset, the heading and a margin) / --toc-n, the page's section count (set in
   the markup), at most 38px. The Privacy Policy's 16 keep 38px rows; the Terms' 20 tighten a little on laptop screens.
   Below 28px the list would get cramped: .is-static (set by the script) lets it sit at the top of its column instead. */
.toc { position: sticky; top: 112px; --toc-row: clamp(28px, calc((100vh - 161px) / var(--toc-n, 16)), 38px); }
.toc.is-static { position: static; }
.toc .eyebrow { line-height: 20px; }
.toc ol { list-style: none; margin-top: 12px; border-top: 1px solid var(--line); }
.toc a { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: baseline; align-content: center; height: var(--toc-row); padding: 0 4px; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 20px; color: var(--fg-2); transition: color .2s, background .2s; }
.toc a:hover { color: var(--fg); background: var(--hover-bg); }
.toc .idx { font-size: 13px; color: var(--fg-3); transition: color .2s; }
.toc a[aria-current="true"] { color: var(--fg); }
.toc a[aria-current="true"] .idx { color: var(--accent-text); }
.prose { max-width: 760px; color: var(--fg-2); }
.prose > p, .prose section > p { margin-top: 16px; font-size: 16px; line-height: 28px; }
.prose > p:first-child { margin-top: 0; }
.prose section { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--line); scroll-margin-top: 112px; }
.prose h2 { display: flex; align-items: baseline; gap: 16px; font-family: "Geist", sans-serif; font-weight: 400; font-size: clamp(1.375rem, 1.1rem + .7vw, 1.75rem); line-height: 1.25; letter-spacing: -0.015em; color: var(--fg); }
.prose h2 .idx { font-size: .9em; letter-spacing: .02em; flex: none; }   /* the section number, in proportion to its heading */
.prose h3 { margin-top: 24px; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--fg); }
.prose ul { list-style: none; display: grid; gap: 10px; margin-top: 16px; }
.prose li { position: relative; padding-left: 22px; font-size: 16px; line-height: 26px; }   /* plain flowing text: a bold label and the words after it stay on one line */
.prose li::before { content: ""; position: absolute; left: 0; top: 10px; width: 7px; height: 7px; border-radius: 1.5px; background: var(--accent); }   /* a lit pixel, like the site's LED marks */
.prose strong { font-weight: 500; color: var(--fg); }
.prose a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { text-decoration-thickness: 2px; }
.prose .contact-block { margin-top: 20px; padding: 20px 24px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--panel-line); }
.prose .contact-block p { margin: 0; font-size: 16px; line-height: 28px; }
@media (max-width: 900px) { .legal-grid { grid-template-columns: minmax(0, 1fr); } .toc { display: none; } }

/* ---------- About Us (../pages/about-us.html) ----------
   Built from the shared pieces (page hero, section heads, verbs, panels, next steps, CTA card); sections alternate
   white and dark like the product pages. */
.sec-head .eyebrow { margin-bottom: 10px; }
.about-text { display: grid; gap: 18px; font-size: 17px; line-height: 1.7; color: var(--fg-2); }
.about-intro { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 32px clamp(32px, 6vw, 96px); align-items: start; }
.about-intro .h-md { color: var(--fg); text-wrap: pretty; }
.about-tagline { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; margin-top: clamp(48px, 6vw, 80px); padding-top: 28px; border-top: 1px solid var(--line); font-family: "Geist", sans-serif; font-size: clamp(22px, 1rem + 1.3vw, 34px); line-height: 1.2; letter-spacing: -0.02em; color: var(--fg); }
.about-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px clamp(32px, 5vw, 80px); max-width: 1080px; margin: clamp(32px, 4vw, 48px) auto 0; }
.about-cols > div { display: grid; gap: 18px; align-content: start; }   /* a column of its own paragraphs (and label) */
.about-cols .eyebrow { margin-bottom: -8px; }
/* Display. Manage. Advertise. Engage. Analyse. — each lights in turn, like the homepage's Services we offer */
.about-verbs { justify-content: center; margin: clamp(36px, 4.5vw, 64px) auto 0; }
.about-verbs > li > span { animation: verb-on 10s var(--ease) infinite; animation-delay: calc(var(--k) * 2s); }
@keyframes verb-on { 0%, 18% { color: var(--fg); } 24%, 100% { color: var(--fg-4); } }
@media (prefers-reduced-motion: reduce) { .about-verbs > li > span { animation: none; color: var(--fg); } }

/* What We Do: one row per capability, the whole row opens its product page */
.caps { list-style: none; margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); }
/* columns are spaced one by one, so the number sits close to its title */
.cap { position: relative; display: grid; grid-template-columns: 52px minmax(0, 5fr) minmax(0, 6fr) clamp(170px, 17vw, 240px) 44px; grid-template-areas: "idx head body media go"; gap: 8px 0; align-items: start; padding: 28px 0; border-bottom: 1px solid var(--line); }
.cap > .idx { grid-area: idx; padding-top: 2px; font-size: 24px; line-height: 30px; }
.cap__head, .cap__body { padding-right: clamp(20px, 2.6vw, 40px); }
.cap__body { padding-top: 4px; }
.cap__media { margin-right: clamp(16px, 2vw, 28px); }
.cap__go { align-self: center; }
.cap__head { grid-area: head; }
.cap h3 { font-family: "Geist", sans-serif; font-weight: 400; font-size: clamp(22px, 1rem + .8vw, 28px); line-height: 1.2; letter-spacing: -0.015em; color: var(--fg); }
.cap h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
@supports selector(:has(*)) {
  .cap h3 a:focus-visible { outline: none; }
  .cap:has(h3 a:focus-visible) { outline: 2px solid var(--gold); outline-offset: 6px; border-radius: 10px; }
}
.cap__tag { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--accent-text); }
.cap__body { grid-area: body; display: grid; gap: 8px; font-size: 15px; line-height: 1.6; color: var(--fg-2); }
.cap__media { grid-area: media; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 8px; background: var(--surface); }
.cap__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.cap__go { grid-area: go; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--fg); transition: background .25s, border-color .25s, color .25s; }
.cap__go svg { width: 14px; height: 14px; transition: transform .35s var(--ease); }
.cap:hover .cap__media img, .cap:focus-within .cap__media img { transform: scale(1.05); }
.cap:hover .cap__go, .cap:focus-within .cap__go { background: var(--accent); border-color: var(--accent); color: #fff; }
.cap:hover .cap__go svg, .cap:focus-within .cap__go svg { transform: translateX(2px); }
.cap:hover h3 { color: var(--accent-text); }

/* Who We Serve */
.serve { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); margin-top: clamp(40px, 5vw, 64px); }
.serve figure { margin: 0; aspect-ratio: 960 / 604; overflow: hidden; border-radius: var(--radius); background: var(--surface); }
.serve img { width: 100%; height: 100%; object-fit: cover; }
.serve h3 { margin-top: 20px; font-family: "Geist", sans-serif; font-weight: 400; font-size: 22px; line-height: 1.3; letter-spacing: -0.01em; color: var(--fg); }
.serve p { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--fg-2); }
/* From Independent Operators to National Networks: the title on the left, the text and the button on the right */
.serve-scale { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px clamp(32px, 5vw, 80px); margin-top: clamp(48px, 6vw, 80px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--line); }
.serve-scale h3 { font-family: "Geist", sans-serif; font-weight: 400; font-size: clamp(24px, 1rem + 1vw, 32px); line-height: 1.2; letter-spacing: -0.015em; color: var(--fg); text-wrap: balance; }
.serve-scale .about-text { justify-items: start; }
.serve-scale .btn { margin-top: 4px; }

/* Why Click On Screens?: seven reasons and a way to talk to the team, as one grid of tiles */
.why { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: clamp(40px, 5vw, 64px); background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.why > li { display: grid; align-content: start; gap: 10px; min-height: 210px; padding: clamp(22px, 2.2vw, 32px); background: var(--bg); }
.why h3 { font-family: "Geist", sans-serif; font-weight: 400; font-size: 19px; line-height: 1.3; letter-spacing: -0.01em; color: var(--fg); }
.why h3::before { content: ""; display: block; width: 10px; height: 10px; margin-bottom: 18px; border-radius: 2px; background: var(--accent); }   /* the lit square of the Display Solutions list */
.why p { font-size: 14.5px; line-height: 1.6; color: var(--fg-2); }
.why > .why-talk { display: flex; padding: 0; background: var(--accent); }
.why-talk a { flex: 1; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 24px; padding: clamp(22px, 2.2vw, 32px); font-family: "Geist", sans-serif; font-size: 24px; line-height: 1.2; letter-spacing: -0.015em; color: #fff; transition: background .25s; }
.why-talk a:hover { background: var(--accent-deep); }
.why-go { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--accent); }
.why-go svg { width: 14px; height: 14px; transition: transform .35s var(--ease); }
.why-talk a:hover .why-go svg { transform: translateX(2px); }

/* Our Approach: the five steps on one line, like a timeline */
.next-steps.steps-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: clamp(40px, 5vw, 64px); }
.steps-5 li { position: relative; grid-template-columns: minmax(0, 1fr); padding-top: 26px; }
.steps-5 li::before { content: ""; position: absolute; left: 0; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px rgba(220,79,53,.7); }
.steps-5 b { font-size: 22px; }
.steps-5 p { grid-column: 1; font-size: 15px; line-height: 1.6; }

/* Our Vision and Our Mission, and the closing section, use the two text columns of Who We Are (.about-cols) */
.cta-brand { margin-bottom: 14px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.78); }

@media (max-width: 1100px) {
  .cap { grid-template-columns: 48px minmax(0, 1fr) clamp(150px, 24vw, 220px) 44px; grid-template-areas: "idx head media go" "idx body media go"; row-gap: 12px; }
  .why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .next-steps.steps-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; }
}
@media (max-width: 900px) {
  .about-intro, .about-cols, .serve-scale { grid-template-columns: minmax(0, 1fr); }
  .serve { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
  .next-steps.steps-5 { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .steps-5 li { padding-top: 20px; }
  .steps-5 li::before { display: none; }
}
@media (max-width: 700px) {
  .cap { grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "media media" "idx head" "idx body"; }
  .cap__media { margin: 0 0 8px; }
  .cap__head, .cap__body { padding-right: 0; }
  .cap__go { display: none; }
  .about-tagline { flex-direction: column; }
}
@media (max-width: 600px) {
  .why { grid-template-columns: minmax(0, 1fr); }
  .why > li { min-height: 0; }
}

/* ---------- Reveal (approved) ---------- */
.js .rv { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.js .rv.in { opacity: 1; transform: none; }

/* ==========================================================================
   VERSION C ADDITIONS (14 Oct review feedback)
   ========================================================================== */

/* Centred section heads: label, title and description stacked on the page's centre line */
.sec-head { max-width: 1240px; margin: 0 auto; text-align: center; }
.sec-head .idx { display: block; margin-bottom: 12px; }
.sec-head .lead { margin: 12px auto 0; max-width: 1200px; }
.sec-head h2, .sec-head .lead, .intro-center .lead, .cta-card h2, .cta-card p { text-wrap: balance; }   /* no orphan words in centred text */
.intro-center { text-align: center; }
.intro-center .lead { margin: 12px auto 0; max-width: 1000px; }
.intro-center .verbs { justify-content: center; margin-top: 32px; }
.two-col.c { margin-left: auto; margin-right: auto; text-align: center; }

@media (max-width: 600px) { .mu { grid-template-columns: minmax(0, 1fr); gap: 26px 0; } .mu-master { justify-self: center; width: 150px; } .mu-mode { justify-self: center; } }

/* Explore Our Solutions: the big-type index (.intro-grid + .verbs), one solution per line. The current page is
   in ink; every other solution ends in a red arrow circle sized to the type. The arrow sits in the text flow,
   tied to the last word (.nw), so it follows the name when it wraps. */
.verbs--stack { flex-direction: column; align-items: flex-start; }
.verbs--stack > li > a { display: block; }
.verbs .nw { white-space: nowrap; }
.verbs .go { display: inline-grid; place-items: center; vertical-align: middle; width: max(28px, .74em); height: max(28px, .74em); margin-left: .32em; border-radius: 50%; background: var(--accent); transition: transform .35s var(--ease), filter .2s; }
.verbs .go svg { width: max(12px, .3em); height: max(12px, .3em); transition: transform .35s var(--ease); }
.verbs > li > a:hover .go, .verbs > li > a:focus-visible .go { transform: scale(1.08); filter: brightness(1.08); }
.verbs > li > a:hover .go svg, .verbs > li > a:focus-visible .go svg { transform: translateX(2px); }

/* Kiosk illustration (Potential Applications): flat, minimal, with a live screen */
.kvec { position: relative; width: min(100%, 300px, calc((var(--fit) - 74px) / 1.911)); justify-self: center; display: flex; flex-direction: column; align-items: center; }
/* LED kiosk: the housing and stand are drawn as a 7px LED dot matrix with no shadows, centred so the neck's columns
   line up with the housing's; the screen stays sharp (it is the content customers read) with only a fine pixel texture over it */
.kvec.led { --led: radial-gradient(circle at 50% 50%, #000 0 2.7px, transparent 3.1px) calc(50% + 3.5px) 0 / 7px 7px; }
.kvec.led .kvec-body { background: none; box-shadow: none; }
.kvec.led .kvec-body::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, #262733 0%, #16171e 100%); -webkit-mask: var(--led); mask: var(--led); }
.kvec.led .kvec-neck, .kvec.led .kvec-base { -webkit-mask: var(--led); mask: var(--led); }
.kvec.led .kvec-screen { box-shadow: 0 0 0 3px #16171e; }
.kvec.led .kvec-screen::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: radial-gradient(circle, transparent 0 .8px, rgba(0,0,0,.16) 1.2px) 0 0 / 2px 2px; }
.kvec-body { position: relative; width: 100%; aspect-ratio: 9 / 17.2; border-radius: 22px; background: linear-gradient(180deg, #262733 0%, #16171e 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 50px 60px -44px rgba(23,24,31,.6); }
.kvec-screen { position: absolute; left: 6%; right: 6%; top: 4.2%; height: 80%; border-radius: 10px; overflow: hidden; container-type: size; background: #0d0e24; box-shadow: 0 0 0 1px rgba(255,255,255,.06); }
.kvec-slot { position: absolute; left: 50%; bottom: 10.2%; width: 34%; height: 4px; transform: translateX(-50%); border-radius: 2px; background: #08080b; box-shadow: 0 1px 0 rgba(255,255,255,.06); }
.kvec-strip { position: absolute; left: 50%; bottom: 5.4%; width: 22%; height: 4px; transform: translateX(-50%); border-radius: 2px; background: var(--accent); box-shadow: 0 0 14px rgba(220,79,53,.65); }
.kvec-neck { width: 22%; height: 38px; background: linear-gradient(90deg, #17181f 0%, #282934 50%, #17181f 100%); }
.kvec-base { width: 64%; height: 14px; border-radius: 7px 7px 4px 4px; background: linear-gradient(180deg, #2a2b36, #17181f); }

/* Customer traffic: horizontal bars (traffic, with the engaged share inside) */
.tb { display: grid; gap: 12px; }
.tb-row { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 14px; }
.tb-l { font-size: 13px; line-height: 1.2; white-space: nowrap; color: var(--fg-2); }
.tb-track { position: relative; height: 20px; }
.tb-t { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 4px; background: var(--fg-4); transform-origin: left center; transition: transform .8s var(--ease); transition-delay: calc(var(--k, 0) * 70ms); }
.tb-e { position: absolute; left: 0; top: 0; bottom: 0; width: var(--s); border-radius: 4px; background: var(--accent); opacity: .9; }
.js .tb-t { transform: scaleX(0); }
.js .inst.in .tb-t { transform: none; }
.inst-legend i.trf { background: var(--fg-4); border-radius: 2px; }
.inst-legend i.eng { border-radius: 2px; }

/* Campaign effectiveness: solid columns, grey before the campaign, accent after */
.inst .col { fill: var(--fg-4); }
.inst .col.after { fill: var(--accent); }
.inst .base-l { stroke: var(--line-2); }
.js .inst .col { transform: scaleY(0); transform-box: fill-box; transform-origin: bottom; transition: transform .7s var(--ease); transition-delay: calc(var(--k, 0) * 45ms + 200ms); }
.js .inst.in .col { transform: none; }

/* Floor plan: solid walls and pumps */
.inst .wall-l { fill: none; stroke: var(--dot-dim); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* From Data to Decisions: subtle looping motion (class .playing is set only on the selected visual, while it is on screen) */
@keyframes breathe { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.88); } }
@keyframes rise { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.9); } }
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes hours { from { transform: translateX(0); } to { transform: translateX(var(--span)); } }
.tb-e { transform-origin: left center; }
.inst.playing .tb-e { animation: breathe 3.6s ease-in-out infinite; animation-delay: calc(var(--k, 0) * -.5s); }     /* traffic: engaged share breathes */
.inst.playing .col.after { animation: rise 3.2s ease-in-out infinite; animation-delay: calc(var(--k, 0) * .14s); }    /* campaign: live columns ripple */
.inst .walker { opacity: 0; transition: opacity .6s; }
.inst.playing .walker { opacity: 1; }                                                                                /* floor plan: customers walk their routes */
.cp-head { stroke: var(--fg-3); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0; transition: opacity .4s; }
.cp-dot { fill: var(--accent); stroke: var(--bg); stroke-width: 2; opacity: 0; transition: opacity .4s; }
.inst.playing .cp-head, .inst.playing .cp-dot { opacity: 1; }                                                        /* content: playhead follows attention */
.inst.playing .cp-screen img.on { animation: drift 9s ease-in-out infinite alternate; }
.now-band { fill: var(--fg); fill-opacity: .06; stroke: var(--accent); stroke-opacity: .55; stroke-width: 1.2; opacity: 0; transition: opacity .5s; }
.inst.playing .now-band { opacity: 1; animation: hours 13.6s steps(var(--steps), end) infinite; }                     /* heatmap: "now" steps hour by hour */

/* Photo hero focus: dim and soften everything except the kiosk */
.kiosk-focus { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: rgba(6,7,14,.58);
  -webkit-backdrop-filter: blur(2.5px) saturate(.75); backdrop-filter: blur(2.5px) saturate(.75);
  -webkit-mask: radial-gradient(ellipse 11% 44% at 61.6% 41%, transparent 0 62%, #000 100%); mask: radial-gradient(ellipse 11% 44% at 61.6% 41%, transparent 0 62%, #000 100%); }

/* Real images inside the kiosk application screens */
.sim-screen .ph { position: relative; border-radius: 2.6cqw; overflow: hidden; background: rgba(255,255,255,.08); flex: none; }
.sim-screen .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sim-screen .ph .sk-tag { position: absolute; left: 3cqw; top: 3cqw; }
.sk.row img { width: 10cqw; height: 10cqw; border-radius: 1.8cqw; object-fit: cover; flex: none; }
.sk-grid .ph { aspect-ratio: 1; }
.sk-pager { display: flex; gap: 2cqw; justify-content: center; }
.sk-pager i { width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: rgba(255,255,255,.3); }
.sk-pager i:first-child { background: #fff; }
/* inside the kiosk the screen is a fixed 9:16 portrait: stack content and pin the main action to the bottom */
.kvec-screen .sim-body { display: flex; flex-direction: column; gap: 3cqw; }
.kvec-screen .sim-body > .sk-btn:not(.ghost):last-child, .kvec-screen .sim-body > .sk-pager:last-child { margin-top: auto; }
.sk-stars { display: flex; gap: 2.4cqw; justify-content: center; color: var(--gold); font-size: 8cqw; line-height: 1; }
.sk-ico { width: 6cqw; height: 6cqw; flex: none; }

/* Analytics: reworked charts */
.inst .land { fill: var(--dot-off); }
.inst .pin path { fill: var(--dot-dim); }
.inst .pin.top path { fill: var(--accent); }
.inst .pin circle.hole { fill: var(--bg); }
.inst .pin .halo { fill: none; stroke: var(--accent); stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: center; }
.inst.in .pin.top .halo { animation: halo 2.4s var(--ease) 1.4s infinite; }
@keyframes halo { 0% { opacity: .8; transform: scale(.5); } 100% { opacity: 0; transform: scale(2.2); } }
.inst .pin-l { font: 500 12px "Inter", sans-serif; fill: var(--fg-2); }
.inst .pin-l.top { fill: var(--fg); }
.js .inst .pin { opacity: 0; transform: translateY(-14px); transition: opacity .5s, transform .6s var(--ease); transition-delay: calc(var(--k, 0) * 120ms + 300ms); }
.js .inst.in .pin { opacity: 1; transform: none; }
.inst .wall { fill: var(--dot-dim); }
.inst .zone { fill: var(--hover-bg); stroke: var(--line-2); stroke-width: 1; }
.inst .zone-l { font: 500 11px "Inter", sans-serif; fill: var(--fg-3); letter-spacing: .02em; }
.inst .pump { fill: var(--dot-dim); }
.js .inst .trail { stroke-dasharray: 1400; stroke-dashoffset: 1400; transition: stroke-dashoffset 2.4s var(--ease) .3s; }
.js .inst.in .trail { stroke-dashoffset: 0; }
.js .inst .trail.t2 { transition-delay: .7s; } .js .inst .trail.t3 { transition-delay: 1.1s; }
.inst .heat { fill: var(--accent); }
.js .inst .heat { opacity: 0; transition: opacity .4s ease; transition-delay: calc(var(--k, 0) * 22ms); }
.js .inst.in .heat { opacity: var(--a, 1); }
.no-js .inst .heat { opacity: var(--a, 1); }
.inst .ax { font: 11px "Inter", sans-serif; fill: var(--fg-3); }
.heat-legend { display: inline-flex; align-items: center; gap: 6px; }
.heat-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--accent); }
.cp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr); gap: 20px; align-items: end; }
.cp-screen { background: #0b0b10; padding: 5px; border-radius: 6px; box-shadow: 0 18px 30px -18px rgba(0,0,0,.6); }
.cp-screen .scr { position: relative; aspect-ratio: 9 / 14; border-radius: 3px; overflow: hidden; background: #000; }
.cp-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; }
.cp-screen img.on { opacity: 1; }
.cp-chart .area { fill: rgba(220,79,53,.1); transition: d .7s var(--ease); }
.cp-chart .curve { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; transition: d .7s var(--ease); }
.cp-chart .peak { transition: transform .7s var(--ease); }
.cp-chart .peak text { font: 500 12px "Inter", sans-serif; fill: var(--fg-2); }
.cp-chart .peak circle { fill: var(--accent); stroke: var(--bg); stroke-width: 2; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px) {
  .apps-grid button { min-height: 140px; padding: 16px; }
}
@media (max-width: 1100px) {
  :root { --gutter: 32px; }
  .hero { --scene-w: max(100vw, 1100px); --copy-h: 400px; }
  .hero--stage { --copy-h: 420px; }
  .intro-grid, .cta-card { grid-template-columns: minmax(0, 1fr); }
  .hubnet { grid-template-columns: minmax(0, 1fr) minmax(160px, .8fr) minmax(0, 1fr); gap: 20px 36px; }
  .journey { gap: 24px 32px; }
  .i-location .viz.fill { flex: none; min-height: 0; aspect-ratio: var(--ar); }   /* the map keeps its natural proportions */
}
@media (max-width: 900px) {
  .apps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .split.rev, .touch, .apps, .multi, .loop { grid-template-columns: minmax(0, 1fr); }
  .split.rev > :first-child { order: 0; }
  .touch-map { order: -1; }
  .journey { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 40px; }
  .j-core { grid-column: 1 / -1; grid-row: 2; max-width: 280px; justify-self: center; width: 100%; }
  .j-inputs { grid-row: 1; } .j-out { grid-row: 1; grid-column: 2; align-self: center; }
  .hero { --copy-h: 560px; }
  .hero--stage { --copy-h: 560px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hero-aside { text-align: left; justify-self: start; }
  .hubnet { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hub { grid-column: 1 / -1; grid-row: 1; max-width: 260px; justify-self: center; width: 100%; aspect-ratio: auto; }
  .hub--laptop { max-width: 360px; }
  .hub-col.right .node { flex-direction: row; text-align: left; }
  .ms-stage { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ms-master { max-width: 420px; }
}
@media (max-width: 760px) {
  :root { --gutter: 20px; }
  /* Phones: visual at the top, copy flows beneath it (approved behaviour) */
  .hero { --scene-w: var(--scene-w-m, 230vw); --top: 0px; padding-top: calc(var(--sh) * (var(--sb) + .03)); justify-content: flex-start; }
  .hero--subway { --scene-w-m: 190vw; }
  .hero--arena { --scene-w-m: 220vw; }
  .hero--fuel { --scene-w-m: 175vw; }
  .hero--control { --scene-w-m: 167vw; --sb: .86; --top: 40px; padding-top: calc(40px + var(--sh) * .74); }
  .hero--control .scene { left: calc(50% + 25vw); }  /* phones: show 5-65% of the photo: the whole desk monitor plus two pillar screens */
  .hero--engage { --scene-w-m: 205vw; --sb: .74; }
  .hero--display-photo { --scene-w-m: 205vw; --sb: .66; --top: 60px; padding-top: calc(60px + var(--sh) * .66); }
  .hero--display-photo .scene { left: -6vw; transform: none; }  /* phones: frame the price totem and pump screens */
  .hero--kiosk-photo { --scene-w-m: 215vw; --sb: .74; --top: 60px; padding-top: calc(60px + var(--sh) * .74); }  /* drop the photo below the floating nav so the kiosk screen is fully visible */  /* phones: let the pump screens show before the copy starts */
  .hero::after { background: linear-gradient(180deg, transparent 0, transparent calc(var(--sh) * (var(--sb) - .02)), rgba(14,15,30,.88) calc(var(--sh) * (var(--sb) + .1)), var(--ink) calc(var(--sh) * (var(--sb) + .3))); }
  .hero--stage { --stage-h: clamp(340px, 108vw, 520px); padding-top: var(--stage-h); }
  .hero--stage::after { background: linear-gradient(180deg, transparent 0, transparent calc(var(--stage-h) - 120px), var(--ink) calc(var(--stage-h) + 10px)); }
  .stage-inner { top: 88px; bottom: 40px; }
  .hero--show .stage { height: calc(var(--stage-h) + 60px); }
  .hero--show .stage-inner { top: 84px; }
  .set { width: 178vw; justify-self: start; left: 50%; transform: translateX(-50%); } /* centre the LED wall; outer devices crop at the edges */
  .dv figcaption { font-size: 9px; letter-spacing: .06em; margin-top: 6px; }
  .kiosk-xl { height: calc(var(--stage-h) - 110px); }
  .hero h1 { font-size: clamp(2rem, 1.2rem + 3.1vw, 2.5rem); }
  .hero-ctas .btn { width: 100%; }
  .hero-aside .statement { font-size: 18px; line-height: 28px; }
  .hubnet { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hub { margin-bottom: 20px; }
  .hub-col { gap: 10px; }
  .apps-grid button { min-height: 0; padding: 16px; gap: 14px; }
  .apps-grid .glyph { width: 32px; }
  .apps-grid span { font-size: 14px; }
  .sim { max-width: 280px; }
  .journey { grid-template-columns: minmax(0, 1fr); }
  .j-core { grid-row: auto; max-width: 220px; }
  .j-inputs, .j-out { grid-row: auto; grid-column: auto; }
  .two-col { grid-template-columns: minmax(0, 1fr); }
  .matrix { grid-template-columns: 74px repeat(var(--cols), minmax(0, 1fr)); padding: 6px 10px 14px; }
  .matrix .mh { font-size: 11px; padding: 10px 2px; }
  .matrix .ml { font-size: 12px; gap: 6px; }
  .cell { min-height: 56px; padding: 8px 2px; }
  .cell .scr { gap: 3px; }
  .cell .scr i { width: 10px; height: 8px; }
  .matrix-ctl { padding: 14px 16px; }
  .deploy { width: 100%; }
  .deploy .btn { width: 100%; }
  .ms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .multi .seg { width: 100%; }
  .multi .seg button { flex: 1; }
  .inst { min-height: 0; }
  .loop-svg .node text { font-size: 18px; }
  .touch-item b { font-size: 18px; }
}
@media (max-width: 760px) {
  .cta-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .inst .viz.fill { flex: none; min-height: 0; aspect-ratio: var(--ar); }   /* phones: charts keep their natural proportions */
  .tb-row { grid-template-columns: 76px minmax(0, 1fr); gap: 10px; }
  .tb-l { font-size: 12px; }
  .cp { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .cp > div:first-child { width: 140px; margin: 0 auto; }
  /* chart labels are SVG text and shrink with the chart: enlarge them on phones (~11px rendered) */
  .inst .ax, .inst .pin-l, .inst .tx { font-size: 16px; }
  .inst .zone-l { font-size: 13px; }
  .cp-chart .peak text { font-size: 13px; }
  .kiosk-focus { -webkit-mask: radial-gradient(ellipse 14% 46% at 61.6% 41%, transparent 0 60%, #000 100%); mask: radial-gradient(ellipse 14% 46% at 61.6% 41%, transparent 0 60%, #000 100%); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .wires .w-live, .aud-svg .wave, .tap, .cell.ping::after { display: none; }
  .js .inst .pin, .js .inst .heat { opacity: 1; transform: none; }
  .js .inst .col, .js .tb-t, .js .tb-e { transform: none; }
  .walker, .now-band, .cp-head, .cp-dot, .sc-ph, .mon-ph, .pf-ph { display: none; }
  .inst .sn-live { transform: none; }
  .js .inst .heat { opacity: var(--a, 1); }
  .js .inst .trail { stroke-dashoffset: 0; }
}