:root {
  --bg: #000000;
  --surface: #0d0d0d;
  --line: #222222;
  --grid: #1a1a1a;
  --text: #ffffff;
  --body: #a3a3a3;
  --muted: #6b6b6b;
  --accent: #f5e642;
  --accent-ink: #000000;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --wrap: 1200px;
  --gutter: clamp(20px, 5vw, 48px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--bg);
  /* Sparse dot grid across the whole page. */
  background-image: radial-gradient(var(--grid) 1px, transparent 1.5px);
  background-size: 32px 32px;
  color: var(--body);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
  /* A column whose main fills the spare height, so the footer sits at the bottom of short pages. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body > main { flex: 1 0 auto; }

h1, h2, h3 { color: var(--text); margin: 0; font-weight: 700; letter-spacing: -0.02em; }
p, ul, ol { margin: 0; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

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

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 20;
  background: var(--accent); color: var(--accent-ink);
  padding: 8px 12px; font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

.eyebrow {
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.btn {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
  border-radius: 0;
  padding: 13px 24px;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}
.btn:hover { background: transparent; color: var(--accent); }
.btn-sm { padding: 7px 14px; font-size: 0.8125rem; }

.arrow-link {
  color: var(--accent);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
}
.arrow-link span { display: inline-block; transition: transform 0.15s; }
.arrow-link:hover span { transform: translateX(3px); }
.arrow-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Top bar */
.top {
  position: sticky; top: 0; z-index: 10;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.top-in { display: flex; align-items: center; justify-content: space-between; height: 56px; }

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.mark { width: 22px; height: 22px; flex: none; }
.mark-s { fill: none; stroke: var(--text); stroke-width: 2.5; stroke-linecap: square; }
.mark-dot { fill: var(--accent); }
.brand-name { color: var(--text); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.01em; }

.links { display: flex; align-items: center; }
.links a:not(.btn) {
  color: var(--body);
  font-size: 0.8125rem;
  text-decoration: none;
  padding: 0 18px;
  border-left: 1px solid var(--line);
}
.links a:not(.btn):hover { color: var(--text); }
.links .btn { margin-left: 18px; }

.menu-state { position: absolute; opacity: 0; pointer-events: none; }
.menu-btn { display: none; }

@media (max-width: 720px) {
  .menu-btn {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-right: -8px; cursor: pointer;
  }
  .menu-icon, .menu-icon::before, .menu-icon::after {
    display: block; width: 18px; height: 1.5px; background: var(--text); position: relative;
  }
  .menu-icon::before, .menu-icon::after { content: ""; position: absolute; left: 0; }
  .menu-icon::before { top: -6px; }
  .menu-icon::after { top: 6px; }
  .menu-state:focus-visible + .menu-btn { outline: 2px solid var(--accent); outline-offset: 0; }
  .menu-state:checked + .menu-btn .menu-icon { background: transparent; }
  .menu-state:checked + .menu-btn .menu-icon::before { top: 0; transform: rotate(45deg); }
  .menu-state:checked + .menu-btn .menu-icon::after { top: 0; transform: rotate(-45deg); }

  .links {
    display: none;
    position: absolute; top: 56px; left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter) 20px;
  }
  .menu-state:checked ~ .links { display: flex; }
  .links a:not(.btn) {
    border-left: 0; border-bottom: 1px solid var(--line);
    padding: 14px 0; font-size: 0.9375rem;
  }
  .links .btn { margin: 20px 0 0; text-align: center; padding: 12px 16px; font-size: 0.9375rem; }
}

/* Hero */
.hero { padding-top: clamp(72px, 12vw, 152px); }
.hero h1 {
  font-size: clamp(2.125rem, 5vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  max-width: 24ch;
  text-wrap: balance;
}
.lead {
  max-width: 600px;
  margin-top: 28px;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
}
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; margin-top: 40px; }

.strip {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(80px, 11vw, 136px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.strip li + li { border-left: 1px solid var(--line); }
.strip a {
  display: block; height: 100%;
  padding: 28px 20px 32px;
  text-decoration: none;
  transition: background-color 0.15s;
}
.strip a:hover { background: var(--surface); }
.strip a:hover .strip-name { color: var(--accent); }
.strip-name { display: block; color: var(--text); font-weight: 600; font-size: 1rem; margin-bottom: 6px; }
.strip-line { display: block; font-size: 0.875rem; line-height: 1.5; }

@media (max-width: 900px) {
  .strip { grid-template-columns: repeat(2, 1fr); }
  .strip li + li { border-left: 0; }
  .strip li:nth-child(even) { border-left: 1px solid var(--line); }
  .strip li:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 520px) {
  .strip { grid-template-columns: 1fr; }
  .strip li:nth-child(even) { border-left: 0; }
  .strip li + li { border-top: 1px solid var(--line); }
  .strip a { padding: 20px 0 22px; }
}

/* Sections */
section[id] { scroll-margin-top: 56px; }
.feature { scroll-margin-top: 56px; }

.section-head { max-width: 760px; }
.section-head h2 { font-size: clamp(1.5rem, 3.4vw, 2.5rem); line-height: 1.08; }

/* Services */
.services { padding-top: clamp(112px, 14vw, 184px); }
.features {
  margin-top: clamp(56px, 7vw, 88px);
  border-left: 1px solid var(--line);
}
.feature {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
  min-height: 640px;
  padding: clamp(64px, 8vw, 112px) 0 clamp(64px, 8vw, 112px) clamp(32px, 5vw, 72px);
}

.feature-flip .feature-text { order: 2; }
.feature-flip .feature-art { order: 1; }

.feature-text { max-width: 480px; }
.feature-text h3 { font-size: clamp(1.875rem, 3.4vw, 2.75rem); line-height: 1.08; margin-bottom: 20px; }
.feature-text > p:not(.eyebrow) { font-size: 1.0625rem; }

.tags { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.tags li {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--body);
  border: 1px solid var(--line);
  padding: 5px 9px;
  line-height: 1.3;
}

.feature-art { border: 1px solid var(--line); background: var(--bg); }
.feature-art svg { display: block; width: 100%; height: auto; }
.s-line, .s-faint, .s-accent { fill: none; stroke-width: 1.25; stroke-linecap: square; }
.s-line { stroke: #4a4a4a; }
.s-faint { stroke: #2e2e2e; }
.s-accent { stroke: var(--accent); stroke-width: 1.5; }
.f-accent { fill: var(--accent); }
.feature-art .ai-out { stroke: var(--text); }
/* Loop-only elements; shown by the loop animation blocks below. */
.lp { display: none; }

@media (max-width: 860px) {
  .feature {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 36px;
    padding: 56px 0 56px 24px;
  }
  .feature:last-child { padding-bottom: 0; }
  .feature .feature-art { order: 1; }
  .feature .feature-text { order: 2; }
  .feature-art { max-width: 520px; }
}

/* Contact */
/* The last service row keeps its bottom padding on desktop, so the gap to Contact stays near 184px. */
.contact { margin-top: 72px; }
@media (max-width: 860px) { .contact { margin-top: 112px; } }
.contact-in {
  text-align: center;
  padding-top: clamp(72px, 9vw, 112px);
  padding-bottom: clamp(72px, 9vw, 112px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  max-width: calc(var(--wrap) - 2 * var(--gutter));
  padding-left: 0; padding-right: 0;
}
@media (max-width: 1248px) {
  .contact-in { margin-left: var(--gutter); margin-right: var(--gutter); }
}
.contact h2 { font-size: clamp(2rem, 4.6vw, 3.25rem); line-height: 1.08; }
.contact-line { margin: 18px auto 0; max-width: 520px; }
.contact-in a:not(.btn) { color: var(--text); text-underline-offset: 3px; }
.contact-in a:not(.btn):hover { color: var(--accent); }

.contact-form {
  max-width: 640px;
  margin: 48px auto 0;
  padding: clamp(20px, 4vw, 36px);
  border: 1px solid var(--line);
  background: var(--bg);
  text-align: left;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.field { min-width: 0; margin-bottom: 20px; }
.field label { display: block; margin-bottom: 8px; color: var(--text); font-size: 0.875rem; font-weight: 600; }
.field input, .field textarea {
  display: block; width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--muted); border-radius: 0;
  background: var(--bg); color: var(--text);
  font: inherit; font-size: 1rem; line-height: 1.4;
}
.field textarea { min-height: 160px; resize: vertical; }
.field :is(input, textarea):focus-visible { outline-offset: 0; }
.field [aria-invalid="true"] { border-color: var(--accent); }
.field-error { margin-top: 6px; color: var(--accent); font-size: 0.8125rem; }
.field-error:empty { display: none; }
/* Honeypot: off-screen for people, still present for bots that fill every field. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Cloudflare Turnstile renders here; the script adds .has-check so the space is held before it loads. */
.contact-form.has-check .turnstile { min-height: 65px; margin-bottom: 20px; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
button.btn { font-family: inherit; cursor: pointer; }
.btn:disabled { opacity: 0.55; cursor: default; }
.btn:disabled:hover { background: var(--accent); color: var(--accent-ink); }
.form-status { color: var(--text); font-size: 0.9375rem; }

/* About page: an opening statement, then sections in the services style with their own layouts:
   focus areas in two columns, engagement steps in a row, and outcomes as tags. */
.links a[aria-current="page"] { color: var(--text); }
.about-page { padding-top: clamp(72px, 12vw, 152px); }
.about-page h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; letter-spacing: -0.02em; }
.about-lead { max-width: 680px; margin-top: clamp(24px, 4vw, 40px); color: var(--text); font-size: clamp(1.25rem, 2.2vw, 1.625rem); line-height: 1.45; }
.about-section { padding-top: clamp(96px, 12vw, 160px); }
.about-num { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--accent); }
.about-focus {
  list-style: none; padding: 0; margin: clamp(40px, 5vw, 64px) 0 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(40px, 6vw, 96px);
}
.about-focus > li { padding: 32px 0 40px; border-top: 1px solid var(--line); }
.about-focus h3 { margin: 12px 0 12px; font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.2; }
.about-focus p:not(.about-num) { max-width: 480px; font-size: 1.0625rem; }
.about-focus .tags { margin-top: 20px; }
.about-steps {
  list-style: none; padding: 0; margin: clamp(40px, 5vw, 64px) 0 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px;
}
.about-steps > li { position: relative; padding-top: 28px; border-top: 1px solid var(--line); }
/* The yellow segment marks the start of each step on the shared line. */
.about-steps > li::before { content: ""; position: absolute; left: 0; top: -1px; width: 48px; height: 2px; background: var(--accent); }
.about-steps h3 { margin: 10px 0 8px; font-size: 1.25rem; line-height: 1.25; }
.about-steps p:not(.about-num) { font-size: 0.9375rem; }
.about-record { max-width: 680px; margin-top: 24px; font-size: 1.0625rem; }
.about-outcomes li { color: var(--text); border-color: var(--muted); font-size: 0.75rem; padding: 7px 12px; }
.about-end { padding-bottom: clamp(96px, 12vw, 160px); }
.about-end h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
@media (max-width: 860px) {
  .about-focus { grid-template-columns: 1fr; }
  .about-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
}
@media (max-width: 560px) { .about-steps { grid-template-columns: 1fr; } }

/* Result of a plain form post: the service redirects to one of these fragments. */
.status {
  display: none;
  margin-bottom: 24px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  color: var(--text);
  font-size: 0.9375rem;
  scroll-margin-top: 96px;
}
.status:target { display: block; }

@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; }
  .form-foot .btn { width: 100%; text-align: center; }
}

/* Footer */
.foot { padding: 40px 0 48px; }
.foot-in {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px;
  font-size: 0.8125rem; color: var(--body);
}
.foot-in .brand-name { font-size: 0.9375rem; margin-right: auto; }
.foot-in a { text-decoration: none; }
.foot-in a:hover { color: var(--text); }


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   Animations. Each block is keyed off a class main.js sets on <html> from its
   ANIM switches; deleting a block (and its JS function) removes that animation.
   ========================================================================== */

/* Shared: pause every animation while the tab is hidden. */
.tab-hidden *, .tab-hidden *::before, .tab-hidden *::after { animation-play-state: paused !important; }

/* --- Animation: heroEntrance (.anim-hero-entrance) --- */
.anim-hero-entrance .hero h1 .w { display: inline-block; clip-path: inset(-0.1em -0.15em -0.22em -0.15em); }
.anim-hero-entrance .hero h1 .w > span { display: inline-block; transform: translateY(130%); }
.anim-hero-entrance .hero :is(.eyebrow, .lead, .actions, .strip li) { opacity: 0; }
.anim-hero-entrance.hero-go .hero h1 .w > span {
  animation: he-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--row, 0) * 110ms) both;
}
.anim-hero-entrance.hero-go .hero .eyebrow { animation: he-up 0.5s ease both; }
.anim-hero-entrance.hero-go .hero .lead { animation: he-up 0.6s ease 0.35s both; }
.anim-hero-entrance.hero-go .hero .actions { animation: he-up 0.6s ease 0.45s both; }
.anim-hero-entrance.hero-go .hero .strip li { animation: he-up 0.45s ease 0.55s both; }
.anim-hero-entrance.hero-go .hero .strip li:nth-child(2) { animation-delay: 0.61s; }
.anim-hero-entrance.hero-go .hero .strip li:nth-child(3) { animation-delay: 0.67s; }
.anim-hero-entrance.hero-go .hero .strip li:nth-child(4) { animation-delay: 0.73s; }
@keyframes he-rise { from { transform: translateY(130%); } to { transform: none; } }
@keyframes he-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* --- Animation: servicesHeading (.anim-services-heading) --- */
/* The hero's rise for the services heading, starting at 1.1s as the hero's service strip finishes; main.js sets --row per word and .is-in on load. */
.anim-services-heading .services .section-head h2 .w { display: inline-block; clip-path: inset(-0.1em -0.15em -0.22em -0.15em); }
.anim-services-heading .services .section-head h2 .w > span { display: inline-block; transform: translateY(130%); }
.anim-services-heading .services .section-head .eyebrow { opacity: 0; }
.anim-services-heading .services .section-head.is-in h2 .w > span {
  animation: sh-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) calc(1.1s + var(--row, 0) * 110ms) both;
}
.anim-services-heading .services .section-head.is-in .eyebrow { animation: sh-up 0.5s ease 1.1s both; }
@keyframes sh-rise { from { transform: translateY(130%); } to { transform: none; } }
@keyframes sh-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* --- Animation: sentTrace (.anim-sent-trace) --- */
/* A yellow light runs under "Message sent." and leaves the line lit; main.js sets .is-sent on the status. */
.anim-sent-trace .form-status.is-sent { position: relative; padding-bottom: 8px; }
.anim-sent-trace .form-status.is-sent::after,
.anim-sent-trace .form-status.is-sent::before { content: ""; position: absolute; bottom: 0; height: 2px; }
.anim-sent-trace .form-status.is-sent::after {
  left: 0; width: 100%;
  background: var(--accent);
  transform-origin: left;
  animation: st-line 2.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.anim-sent-trace .form-status.is-sent::before {
  z-index: 1; width: 14px;
  background: #fffbe0;
  box-shadow: 0 0 6px 2px var(--accent), 0 0 14px 4px rgba(245, 230, 66, 0.55);
  opacity: 0;
  animation: st-head 2.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes st-line {
  0% { transform: scaleX(0); box-shadow: 0 0 8px var(--accent), 0 0 16px rgba(245, 230, 66, 0.6); }
  40% { transform: scaleX(1); box-shadow: 0 0 8px var(--accent), 0 0 16px rgba(245, 230, 66, 0.6); }
  100% { transform: scaleX(1); box-shadow: 0 0 3px rgba(245, 230, 66, 0.5); }
}
@keyframes st-head {
  0% { left: 0; opacity: 1; }
  40% { left: calc(100% - 14px); opacity: 1; }
  55%, 100% { left: calc(100% - 14px); opacity: 0; }
}

/* --- Animation: drawOnScroll (.anim-draw-on-scroll) --- */
/* Strokes use pathLength="1"; main.js sets --i per stroke and .is-drawn when the illustration enters view. */
.anim-draw-on-scroll .feature-art :is(.s-line, .s-faint, .s-accent) {
  stroke-dasharray: 1 1; stroke-dashoffset: 1; stroke-opacity: 0;
}
.anim-draw-on-scroll .feature-art .f-accent { opacity: 0; }
.anim-draw-on-scroll .feature-art.is-drawn :is(.s-line, .s-faint, .s-accent) {
  stroke-dashoffset: 0; stroke-opacity: 1;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.4, 0, 0.2, 1) calc(var(--i, 0) * var(--step, 90ms)),
              stroke-opacity 0s linear calc(var(--i, 0) * var(--step, 90ms));
}
.anim-draw-on-scroll .feature-art.is-drawn .f-accent { opacity: 1; transition: opacity 0.4s ease calc(var(--i, 0) * var(--step, 90ms)); }

/* --- Animation: progressLine (.anim-progress-line) --- */
/* main.js sets --progress (0 to 1) from scroll position through the services rows. */
.anim-progress-line .features { position: relative; }
.anim-progress-line .features::before {
  content: "";
  position: absolute; left: -1px; top: 0;
  width: 1px; height: 100%;
  background: var(--accent);
  transform-origin: top;
  transform: scaleY(var(--progress, 0));
}

/* --- Animation: gridDrift and cursorGrid (.anim-grid-drift, .anim-cursor-grid) --- */
/* main.js draws the dot grid on this fixed canvas (drifting dots, yellow near the pointer) and sets
   .grid-field-on, which hides the static CSS grid on body. */
.grid-field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.grid-field-on body { background-image: none; }

/* --- Animation: loopThreat (.anim-loop-threat) --- */
/* Layers lock: each ring's yellow arc turns at its own speed and direction, then all ease into line; the always-yellow shield pulses once. */
.td-pulse { fill: none; stroke: var(--accent); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; transform-box: fill-box; transform-origin: center; }
.anim-loop-threat #cyber-security .is-looping .lp-threat { display: inline; }
.anim-loop-threat .is-looping .td-arc { transform-origin: 200px 160px; animation: 10s cubic-bezier(0.45, 0, 0.2, 1) infinite; }
.anim-loop-threat .is-looping .td-arc-1 { animation-name: td-arc-1; }
.anim-loop-threat .is-looping .td-arc-2 { animation-name: td-arc-2; }
.anim-loop-threat .is-looping .td-arc-3 { animation-name: td-arc-3; }
.anim-loop-threat .is-looping .td-pulse { animation: td-pulse 10s ease-out infinite; }
@keyframes td-arc-1 { 0%, 8% { transform: rotate(0deg); } 66%, 100% { transform: rotate(360deg); } }
@keyframes td-arc-2 { 0%, 5% { transform: rotate(0deg); } 72%, 100% { transform: rotate(-360deg); } }
@keyframes td-arc-3 { 0%, 10% { transform: rotate(0deg); } 80%, 100% { transform: rotate(360deg); } }
@keyframes td-pulse { 0%, 80.9% { opacity: 0; transform: scale(1); } 81% { opacity: 0.9; transform: scale(1); } 89%, 100% { opacity: 0; transform: scale(1.3); } }

/* --- Animation: loopAi (.anim-loop-ai) --- */
/* Messy in, structured out: main.js moves each scattered item through the node and into the next slot, faster as it goes. */
.anim-loop-ai #automation-ai .is-looping .lp-ai { display: inline; }
.ai-node-on { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.ai-proc { fill: none; stroke: #8a8a8a; stroke-width: 1.25; }

/* --- Animation: loopWorkplace (.anim-loop-workplace) --- */
/* A blip travels the connectors; each device it reaches flashes on, then shows its screen. All power down, then repeat. */
.anim-loop-workplace #modern-workplace .is-looping .lp-wp { display: inline; }
/* Every device starts off: the monitor's static screen lines stay hidden until the loop powers it on. */
.anim-loop-workplace #modern-workplace .wp-mon { opacity: 0; }
.wp-dev { fill: none; stroke: #8f8f8f; stroke-width: 1.25; opacity: 0; }
.wp-scr { fill: none; stroke: #6b6b6b; stroke-width: 1.25; opacity: 0; }
.wp-blip { fill: var(--accent); opacity: 0; }
.anim-loop-workplace .is-looping :is(.wp-dev, .wp-scr, .wp-mon, .wp-blip) { animation: 10s linear infinite; }
.anim-loop-workplace .is-looping .wp-blip { animation-name: wp-blip; }
.anim-loop-workplace .is-looping .wp-dev.wp-a { animation-name: wp-dev-a; }
.anim-loop-workplace .is-looping .wp-dev.wp-b { animation-name: wp-dev-b; }
.anim-loop-workplace .is-looping .wp-dev.wp-c { animation-name: wp-dev-c; }
.anim-loop-workplace .is-looping .wp-dev.wp-d { animation-name: wp-dev-d; }
.anim-loop-workplace .is-looping .wp-scr.wp-a { animation-name: wp-scr-a; }
.anim-loop-workplace .is-looping .wp-mon { animation-name: wp-scr-b; }
.anim-loop-workplace .is-looping .wp-scr.wp-c { animation-name: wp-scr-c; }
.anim-loop-workplace .is-looping .wp-scr.wp-d { animation-name: wp-scr-d; }
@keyframes wp-blip {
  0% { transform: translate(44px, 148px); opacity: 0; }
  1% { transform: translate(44px, 148px); opacity: 1; }
  8% { transform: translate(120px, 148px); opacity: 1; }
  8.1% { opacity: 0; }
  10.4% { transform: translate(180px, 96px); opacity: 0; }
  10.5% { transform: translate(180px, 96px); opacity: 1; }
  15% { transform: translate(220px, 96px); opacity: 1; }
  15.1% { opacity: 0; }
  17.4% { transform: translate(280px, 128px); opacity: 0; }
  17.5% { transform: translate(280px, 128px); opacity: 1; }
  20% { transform: translate(280px, 148px); }
  21% { transform: translate(272px, 148px); }
  25.5% { transform: translate(272px, 184px); opacity: 1; }
  25.6% { opacity: 0; }
  27.9% { transform: translate(250px, 228px); opacity: 0; }
  28% { transform: translate(250px, 228px); opacity: 1; }
  37% { transform: translate(156px, 228px); opacity: 1; }
  37.1%, 100% { transform: translate(156px, 228px); opacity: 0; }
}
@keyframes wp-dev-a { 0%, 7.9% { opacity: 0; stroke: var(--accent); } 8% { opacity: 1; stroke: var(--accent); } 12%, 78% { opacity: 1; stroke: #8f8f8f; } 82%, 100% { opacity: 0; stroke: #8f8f8f; } }
@keyframes wp-dev-b { 0%, 14.9% { opacity: 0; stroke: var(--accent); } 15% { opacity: 1; stroke: var(--accent); } 19%, 78% { opacity: 1; stroke: #8f8f8f; } 82%, 100% { opacity: 0; stroke: #8f8f8f; } }
@keyframes wp-dev-c { 0%, 25.4% { opacity: 0; stroke: var(--accent); } 25.5% { opacity: 1; stroke: var(--accent); } 29.5%, 78% { opacity: 1; stroke: #8f8f8f; } 82%, 100% { opacity: 0; stroke: #8f8f8f; } }
@keyframes wp-dev-d { 0%, 36.9% { opacity: 0; stroke: var(--accent); } 37% { opacity: 1; stroke: var(--accent); } 41%, 78% { opacity: 1; stroke: #8f8f8f; } 82%, 100% { opacity: 0; stroke: #8f8f8f; } }
@keyframes wp-scr-a { 0%, 9.5% { opacity: 0; } 10.5%, 78% { opacity: 1; } 82%, 100% { opacity: 0; } }
@keyframes wp-scr-b { 0%, 16.5% { opacity: 0; } 17.5%, 78% { opacity: 1; } 82%, 100% { opacity: 0; } }
@keyframes wp-scr-c { 0%, 27% { opacity: 0; } 28%, 78% { opacity: 1; } 82%, 100% { opacity: 0; } }
@keyframes wp-scr-d { 0%, 38.5% { opacity: 0; } 39.5%, 78% { opacity: 1; } 82%, 100% { opacity: 0; } }

/* --- Animation: loopPolicy (.anim-loop-policy) --- */
/* A scan line moves down the document; each line lights only as the scan passes. The boxes fill with squares, then reset. */
.anim-loop-policy #security-governance .is-looping .lp-pol { display: inline; }
/* With the loop on, from the draw-in onwards: the accent line is a plain grey document line and its marker is hidden. */
.anim-loop-policy #security-governance .pol-accent-line { stroke: #2e2e2e; stroke-width: 1.25; }
.anim-loop-policy #security-governance .pol-accent-marker { opacity: 0; }
.pol-hl { fill: none; stroke: var(--accent); stroke-width: 1.25; opacity: 0; }
.pol-scan { stroke: var(--accent); stroke-width: 1.25; opacity: 0; }
.pol-sq { fill: var(--accent); opacity: 0; }
.anim-loop-policy .is-looping .pol-scan { animation: pol-scan 6s linear infinite; }
.anim-loop-policy .is-looping .pol-hl { animation: pol-hl 6s ease-out infinite; }
.anim-loop-policy .is-looping .pol-hl-1 { animation-delay: 0.5s; }
.anim-loop-policy .is-looping .pol-hl-2 { animation-delay: 1s; }
.anim-loop-policy .is-looping .pol-hl-7 { animation-delay: 1.5s; }
.anim-loop-policy .is-looping .pol-hl-3 { animation-delay: 2s; }
.anim-loop-policy .is-looping .pol-hl-4 { animation-delay: 2.5s; }
.anim-loop-policy .is-looping .pol-hl-5 { animation-delay: 3.5s; }
.anim-loop-policy .is-looping .pol-hl-6 { animation-delay: 4s; }
.anim-loop-policy .is-looping .pol-sq-1 { animation: pol-sq-1 6s linear infinite; }
.anim-loop-policy .is-looping .pol-sq-2 { animation: pol-sq-2 6s linear infinite; }
.anim-loop-policy .is-looping .pol-sq-3 { animation: pol-sq-3 6s linear infinite; }
@keyframes pol-scan {
  0% { transform: translateY(96px); opacity: 0; }
  5% { transform: translateY(96px); opacity: 1; }
  70% { transform: translateY(252px); opacity: 1; }
  74%, 100% { transform: translateY(252px); opacity: 0; }
}
@keyframes pol-hl { 0% { opacity: 0.85; } 7%, 100% { opacity: 0; } }
@keyframes pol-sq-1 { 0%, 24.5% { opacity: 0; } 25.5%, 90% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes pol-sq-2 { 0%, 41% { opacity: 0; } 42%, 90% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes pol-sq-3 { 0%, 57.8% { opacity: 0; } 58.8%, 90% { opacity: 1; } 95%, 100% { opacity: 0; } }