/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: var(--text-sm);
  border: var(--border-width) solid transparent;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}
.btn--primary:hover { background: var(--color-accent-hover); }

.btn--secondary {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-border);
}
.btn--secondary:hover { border-color: var(--color-ink); }

.btn--on-inverse {
  background: transparent;
  color: var(--color-ink-on-inverse);
  border-color: var(--color-border-on-inverse);
}
.btn--on-inverse:hover { border-color: var(--color-ink-on-inverse); }

.btn--sm { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: 600;
  font-size: var(--text-sm);
}
.text-link .icon { width: 16px; height: 16px; transition: transform var(--duration-fast) var(--ease-standard); }
.text-link:hover .icon { transform: translateX(3px); }

/* ==========================================================================
   Site header / navigation
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: var(--border-width) solid var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-3) 0;
}

.site-logo { display: flex; align-items: center; }
/* Full logo incl. "Server Technologies" tagline, at near-native size
   (source is 172x60) so the tagline text isn't further softened by
   upscaling — the header runs taller than a typical icon-only logo
   would need, by the client's explicit choice to keep the full mark. */
.site-logo img { height: 58px; width: auto; }
.site-logo__text {
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--color-ink);
  letter-spacing: -0.01em;
}

.primary-nav { display: none; }
/* min-width: 0 lets this list shrink inside the header's flex row
   instead of forcing the row wider than the viewport; flex-shrink: 0
   on each item (below) is what actually keeps their own text from
   wrapping — the two work together, not against each other. */
.primary-nav__list { display: flex; align-items: center; gap: var(--space-5); min-width: 0; }
.primary-nav__link {
  color: var(--color-ink);
  font-weight: 500;
  font-size: var(--text-sm);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  white-space: nowrap;
  flex-shrink: 0;
}
.primary-nav__link:hover { color: var(--color-accent); text-decoration: none; }

.site-header__actions { display: flex; align-items: center; gap: var(--space-4); flex-shrink: 0; }
.site-header__login { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-muted); white-space: nowrap; }
.nav-toggle {
  display: inline-flex;
  background: none;
  border: none;
  padding: var(--space-2);
  cursor: pointer;
}

/* 900px isn't wide enough for this header's actual content (full logo
   with tagline + 5 nav items + Client Login + the CTA button) — it
   was cramped enough there to wrap "How We Work" and "Client Login"
   onto multiple lines instead of overflowing or scrolling. Pushed out
   to 1160px, comfortably past where that content needs to sit on one
   line; below it, the mobile hamburger menu carries the same links. */
@media (min-width: 1160px) {
  .primary-nav { display: block; }
  .nav-toggle { display: none; }
}

/* Mega menu */
.mega-menu { position: relative; }
.mega-menu__panel {
  position: absolute;
  top: calc(100% + var(--space-4));
  left: 50%;
  transform: translateX(-50%);
  width: min(680px, 90vw);
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-5);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(4px);
  transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard), visibility var(--duration-base);
}
.mega-menu:hover .mega-menu__panel,
.mega-menu:focus-within .mega-menu__panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.mega-menu__item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
}
.mega-menu__item:hover { background: var(--color-bg-subtle); text-decoration: none; }
.mega-menu__item .icon { color: var(--color-accent); margin-top: 2px; }
.mega-menu__item-title { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); }
.mega-menu__item-desc { font-size: var(--text-xs); color: var(--color-ink-muted); margin-top: 2px; }

/* Mobile nav drawer */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--color-bg);
  padding: var(--space-5);
  overflow-y: auto;
}
.mobile-nav.is-open { display: block; }
.mobile-nav__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-6); }
.mobile-nav__list { display: flex; flex-direction: column; gap: var(--space-1); }
.mobile-nav__link {
  display: block;
  padding: var(--space-3) 0;
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-ink);
  border-bottom: var(--border-width) solid var(--color-border);
}
.mobile-nav__sub { padding-left: var(--space-4); }
.mobile-nav__sub .mobile-nav__link { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-muted); border-bottom: none; padding: var(--space-2) 0; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  padding: var(--space-12) 0 var(--space-10);
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grid-texture);
  background-size: var(--grid-texture-size);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 85%);
  mask-image: linear-gradient(to bottom, black 0%, transparent 85%);
  pointer-events: none;
}
.hero__content { position: relative; max-width: 780px; }
.hero__prompt {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  margin-bottom: var(--space-5);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.hero__prompt .caret {
  display: inline-block;
  width: 8px;
  height: 1.1em;
  background: var(--color-accent);
  animation: hero-blink 1.1s step-end infinite;
}
@keyframes hero-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.hero__title { margin-bottom: var(--space-5); }
.hero__title .loop-stage { color: var(--color-accent); }
/* Staggered reveal (delay assigned per span by main.js); only active
   once .has-js is set, so the headline stays fully visible without JS. */
.has-js .hero__title .loop-stage {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  animation: hero-word-in 0.6s var(--ease-standard) forwards;
}
@keyframes hero-word-in { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero__prompt .caret { animation-duration: 0.001ms !important; }
  .has-js .hero__title .loop-stage { opacity: 1; transform: none; animation: none; }
}
.hero__subhead {
  font-size: var(--text-lg);
  color: var(--color-ink-muted);
  max-width: 620px;
  margin-bottom: var(--space-6);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ==========================================================================
   Lifecycle loop (signature homepage section)
   ========================================================================== */

.lifecycle {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
  counter-reset: stage;
  position: relative;
}
.lifecycle::before {
  content: '';
  position: absolute;
  top: 28px;
  left: 6%;
  right: 6%;
  height: 1px;
  background: repeating-linear-gradient(to right, var(--color-border) 0 6px, transparent 6px 12px);
  z-index: 0;
}
@media (max-width: 900px) {
  .lifecycle { grid-template-columns: 1fr; }
  .lifecycle::before { display: none; }
}

.lifecycle__stage {
  position: relative;
  z-index: 1;
  counter-increment: stage;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.lifecycle__stage-index {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-accent);
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-2);
}
.lifecycle__stage-label {
  font-size: var(--text-lg);
  font-weight: 700;
}
.lifecycle__stage-desc { font-size: var(--text-sm); color: var(--color-ink-muted); margin: 0; }
.lifecycle__stage-link { font-size: var(--text-xs); font-weight: 600; margin-top: auto; }
.lifecycle__stage.is-current .lifecycle__stage-index {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}
.lifecycle__stage.is-current .lifecycle__stage-label { color: var(--color-accent); }

/* ==========================================================================
   Service illustrations (inc/illustrations.php) — hand-built schematic
   diagrams standing in for photography, per the brand direction
   (no stock photos, no flashy AI art). A real featured image
   (single-service.php) takes priority over these when one is set.
   ========================================================================== */

.service-illustration {
  width: 100%;
  height: auto;
  display: block;
  background: var(--color-bg-subtle);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
}
.service-illustration .frame { stroke: var(--color-ink); fill: none; }
.service-illustration .muted { stroke: var(--color-ink-muted); fill: none; }
.service-illustration .accent { stroke: var(--color-accent); fill: none; }
.service-illustration .muted-fill { fill: var(--color-ink-muted); stroke: none; }
.service-illustration .accent-fill { fill: var(--color-accent); stroke: none; }
/* Declared after .frame on purpose: shares an element with class="frame
   accent-subtle-fill" and needs to win the `fill` property while still
   inheriting .frame's ink stroke — CSS applies the later same-specificity
   rule, not attribute order. */
.service-illustration .accent-subtle-fill { fill: var(--color-accent-subtle); }
.service-illustration .muted-text { font-family: var(--font-mono); fill: var(--color-ink-muted); letter-spacing: 0.04em; }
.service-illustration .accent-text { font-family: var(--font-mono); fill: var(--color-accent); font-weight: 700; }

.service-hero-media { margin-top: var(--space-8); }

/* ==========================================================================
   Service page mockups (inc/illustrations.php likeroot_service_mockup()) —
   realistic-looking UI illustrating what working with us looks like in
   practice (a code editor, a CI/CD pipeline, a security dashboard, a
   server monitor, an automation workflow, a DNS panel). Same footing as
   the schematic icons above: illustrative UI, not a claim about a real
   Likeroot-built product.
   ========================================================================== */

.mockup-window { background: var(--color-bg); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-md); }
.mockup-window__bar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: var(--border-width) solid var(--color-border); background: var(--color-bg-subtle); }
.mockup-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-border); }
.mockup-window__tabs { display: flex; gap: var(--space-2); margin-left: var(--space-2); }
.mockup-tab { font-family: var(--font-mono); font-size: var(--text-xs); padding: 2px var(--space-3); border-radius: 5px; color: var(--color-ink-muted); }
.mockup-tab.is-active { background: var(--color-bg); color: var(--color-ink); font-weight: 600; }
.mockup-window__body { display: flex; min-height: 300px; }
.mockup-window__main { flex: 1; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }

/* Code editor (Software & Web Development) */
.mockup-editor { display: flex; flex: 1; min-height: 0; }
.mockup-editor__sidebar { width: 150px; flex-shrink: 0; border-right: var(--border-width) solid var(--color-border); padding: var(--space-4) var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.mockup-file { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-muted); padding: 2px var(--space-2); border-radius: 4px; }
.mockup-file.is-active { background: var(--color-accent-subtle); color: var(--color-accent); font-weight: 600; }
.mockup-editor__code { flex: 1; padding: var(--space-4) var(--space-5); font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.9; overflow: hidden; }
.code-line { white-space: pre; color: var(--color-ink-muted); }
.code-line.indent { padding-left: var(--space-5); }
.code-line.indent2 { padding-left: var(--space-10); }
.tok-kw { color: var(--color-accent); font-weight: 600; }
.tok-fn { color: var(--color-status-positive); }
.tok-tag { color: var(--color-status-warning); }
.mockup-terminal { border-top: var(--border-width) solid var(--color-border); background: var(--color-bg-subtle); padding: var(--space-3) var(--space-5); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-muted); }
.term-prompt { color: var(--color-accent); margin-right: var(--space-2); }
.term-success { color: var(--color-status-positive); margin-top: var(--space-1); }

/* CI/CD pipeline (Cloud & DevOps) */
.mockup-pipeline { display: flex; align-items: center; flex-wrap: wrap; gap: 0; }
.pipeline-stage { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; padding: var(--space-2) var(--space-4); border-radius: 999px; border: var(--border-width) solid var(--color-border); color: var(--color-ink-muted); }
.pipeline-stage.is-done { border-color: var(--color-status-positive); color: var(--color-status-positive); }
.pipeline-stage.is-active { border-color: var(--color-accent); color: var(--color-accent); }
.pipeline-line { width: 28px; height: 1px; background: var(--color-border); flex-shrink: 0; }
.pipeline-line.is-done { background: var(--color-status-positive); }
.stage-icon { width: 14px; height: 14px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.stage-icon.spin { border: 2px solid var(--color-accent-subtle); border-top-color: var(--color-accent); animation: mockup-spin 0.9s linear infinite; }
@keyframes mockup-spin { to { transform: rotate(360deg); } }

/* Security dashboard (Cybersecurity) */
.mockup-security { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; }
.security-gauge { text-align: center; flex-shrink: 0; }
.security-gauge__value { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; color: var(--color-status-positive); }
.security-gauge__label { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-ink-muted); }
.security-severities { display: flex; flex-direction: column; gap: var(--space-2); flex: 1; min-width: 160px; }
.sev-row { display: flex; align-items: center; justify-content: space-between; font-size: var(--text-sm); }

/* Generic data table (used by pipeline/security/infra/hosting mockups) */
.mockup-table { display: flex; flex-direction: column; border-top: var(--border-width) solid var(--color-border); }
.mockup-row { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: var(--border-width) solid var(--color-border); font-size: var(--text-sm); }
.mockup-row > *:first-child { flex: 1; min-width: 0; }
.mono { font-family: var(--font-mono); }
.muted { color: var(--color-ink-muted); font-size: var(--text-xs); }

.badge { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px var(--space-2); border-radius: 4px; white-space: nowrap; }
.badge--success { background: var(--color-status-positive-subtle); color: var(--color-status-positive); }
.badge--muted { background: var(--color-bg); color: var(--color-ink-muted); border: var(--border-width) solid var(--color-border); }
.badge--critical { background: #FBE3E0; color: #C4351C; }
.badge--high { background: var(--color-status-warning-subtle); color: var(--color-status-warning); }
.badge--medium { background: #FBF1D8; color: #A9790B; }
.badge--low { background: var(--color-accent-subtle); color: var(--color-accent); }

/* Server monitoring (Managed Infrastructure) */
.mockup-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.stat-card { background: var(--color-bg-subtle); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); }
.stat-card--accent { border-color: var(--color-accent); }
.stat-card__label { display: block; font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-ink-muted); margin-bottom: var(--space-1); }
.stat-card__value { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; }
.stat-card--accent .stat-card__value { color: var(--color-accent); }
.mockup-chart { width: 100%; height: 64px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: var(--space-2); }
.status-dot--up { background: var(--color-status-positive); box-shadow: 0 0 0 3px var(--color-status-positive-subtle); }

/* Automation workflow (AI & Automation) */
.mockup-workflow { display: flex; align-items: center; flex-wrap: wrap; gap: 0; }
.workflow-node { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); border: var(--border-width) solid var(--color-border); background: var(--color-bg-subtle); }
.workflow-node.is-active { border-color: var(--color-accent); background: var(--color-accent-subtle); color: var(--color-accent); }
.workflow-node__icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--color-accent); }
.workflow-arrow { width: 26px; height: 1px; background: var(--color-border); flex-shrink: 0; position: relative; }
.workflow-arrow::after { content: ''; position: absolute; right: 0; top: -3px; border: 3px solid transparent; border-left-color: var(--color-border); }
.mockup-log { border-top: var(--border-width) solid var(--color-border); padding-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-muted); }
.log-time { color: var(--color-border); margin-right: var(--space-2); }

/* DNS / hosting panel (Digital & Hosting) */
.mockup-domain-status { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-family: var(--font-mono); font-size: var(--text-base); font-weight: 700; padding-bottom: var(--space-4); border-bottom: var(--border-width) solid var(--color-border); }

.icon--xs { width: 12px; height: 12px; }

/* ==========================================================================
   In-depth writing prose (drop cap + pull quote) — service pages
   ========================================================================== */

.prose > p {
  margin-bottom: var(--space-5);
  font-size: 1.09rem;
  line-height: 1.8;
  color: var(--color-ink-muted);
  letter-spacing: -0.002em;
}
.prose > p:last-child { margin-bottom: 0; }
/* Drop cap on the opening paragraph — a deliberate editorial tone
   instead of body copy at a slightly bigger size. */
.prose > p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.6em;
  line-height: 0.78;
  color: var(--color-accent);
  float: left;
  padding: 0.04em 0.09em 0 0;
}
/* A line pulled from the surrounding paragraphs (word-for-word or
   lightly trimmed, never new copy), set large in the display face, to
   break up the column instead of one unbroken block of text.
   ".prose > p.pull-quote" (not just ".pull-quote"): the pull quote is
   itself a <p> inside .prose, and ".prose > p" above (class + type
   selector) is more specific than ".pull-quote" alone (one class) —
   without matching that specificity here, the base paragraph
   font-size/line-height/color/margin would win for every property
   they share. */
.prose > p.pull-quote {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.6vw + 1rem, 1.7rem);
  font-weight: 600;
  line-height: 1.32;
  color: var(--color-accent);
  letter-spacing: -0.005em;
  max-width: 46ch;
  margin: var(--space-8) 0;
  padding: var(--space-5) 0;
  border-top: var(--border-width) solid var(--color-border);
  border-bottom: var(--border-width) solid var(--color-border);
}

/* ==========================================================================
   Service card grid
   ========================================================================== */

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 900px) { .service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .service-grid { grid-template-columns: 1fr; } }

.service-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  transition: border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}
.service-card:hover { border-color: var(--color-accent); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.service-card__body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
/* .service-card--plain (related-services.php): no __art thumbnail, so
   __body needs its own top padding instead of sitting flush under one. */
.service-card--plain .service-card__body { padding-top: var(--space-6); }
.service-card__stage-tag,
.service-card__tag {
  display: inline-flex;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-accent);
  background: var(--color-accent-subtle);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}
.service-card__icon { color: var(--color-accent); margin-bottom: var(--space-3); }
.service-card__title { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.service-card__desc { font-size: var(--text-sm); margin-bottom: var(--space-4); }
.service-card__link { margin-top: auto; padding-top: var(--space-2); }
.service-card__heading { font-size: var(--text-lg); margin-bottom: 0; }
.service-card__text { font-size: var(--text-sm); margin-bottom: 0; }

/* ---- Service card art: six small ambient animations, one per card,
   deliberately distinct from the realistic mockups on single-service.php
   (see template-parts/service-card-grid.php for the rationale). ---- */
.service-card__art {
  aspect-ratio: 16 / 10;
  background: var(--color-bg-subtle);
  border-bottom: var(--border-width) solid var(--color-border);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.service-card__art::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, var(--color-accent-subtle), transparent 65%);
  opacity: 0.7;
}
.service-card__art svg, .service-card__art .art-build { position: relative; }

/* 1. Build — lines "typing" in and out, staggered */
.art-build { display: flex; flex-direction: column; gap: 11px; width: 62%; }
.art-build__line { height: 7px; border-radius: 4px; background: var(--color-accent); width: var(--w); transform: scaleX(0); transform-origin: left; opacity: 0.9; animation: build-type 4s var(--ease-standard) infinite; animation-delay: var(--delay, 0s); }
.art-build__line:nth-child(even) { background: var(--color-ink-muted); opacity: 0.35; }
@keyframes build-type { 0% { transform: scaleX(0); } 20%, 70% { transform: scaleX(1); } 90%, 100% { transform: scaleX(0); } }

/* 2. Deploy — a cloud that breathes, with particles rising into it */
.art-cloud__shape { fill: var(--color-accent-subtle); stroke: var(--color-ink); stroke-width: 0.55; transform-box: fill-box; transform-origin: center; animation: cloud-breathe 4.5s ease-in-out infinite; }
@keyframes cloud-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
.art-cloud__particle { fill: var(--color-accent); opacity: 0; animation: cloud-rise 3.2s ease-in infinite; animation-delay: var(--delay, 0s); transform-box: fill-box; }
@keyframes cloud-rise {
  0%   { transform: translateY(0) scale(0.7); opacity: 0; }
  12%  { opacity: 1; }
  75%  { opacity: 0.85; }
  100% { transform: translateY(-88px) scale(1); opacity: 0; }
}

/* 3. Secure — radar pings, a rotating dashed perimeter, a checkmark
   that draws itself in and fades — "continuously verified." */
.art-radar__shield { fill: var(--color-accent-subtle); stroke: var(--color-ink); stroke-width: 1.5; }
.art-radar__ring { fill: none; stroke: var(--color-accent); stroke-width: 1.5; opacity: 0; animation: radar-ping 2.6s var(--ease-standard) infinite; animation-delay: var(--delay, 0s); transform-box: fill-box; transform-origin: center; }
@keyframes radar-ping { 0% { transform: scale(0.4); opacity: 0.7; } 100% { transform: scale(2.1); opacity: 0; } }
.art-shield__perimeter { fill: none; stroke: var(--color-accent); stroke-width: 1.5; stroke-dasharray: 4 7; opacity: 0.55; transform-box: fill-box; transform-origin: center; animation: shield-rotate 14s linear infinite; }
@keyframes shield-rotate { to { transform: rotate(360deg); } }
.art-shield__check { fill: none; stroke: var(--color-status-positive); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 54; animation: check-draw 3.4s ease-in-out infinite; }
@keyframes check-draw {
  0%       { stroke-dashoffset: 54; opacity: 1; }
  35%, 62% { stroke-dashoffset: 0; opacity: 1; }
  82%      { opacity: 0; }
  100%     { stroke-dashoffset: 54; opacity: 0; }
}

/* 4. Operate — equalizer-style bars at independent speeds */
.art-eq__baseline { stroke: var(--color-border); stroke-width: 1; }
.art-eq__bar { fill: var(--color-status-positive); opacity: 0.9; transform-box: fill-box; transform-origin: bottom; animation: eq-bounce var(--dur, 1.1s) ease-in-out infinite; animation-delay: var(--delay, 0s); }
.art-eq__bar:nth-child(3n+1) { fill: var(--color-accent); }
@keyframes eq-bounce { 0%, 100% { transform: scaleY(0.22); } 50% { transform: scaleY(1); } }

/* 5. Automate — nodes gently floating, like a calm constellation */
.art-const__line { stroke: var(--color-border); stroke-width: 1.5; }
.art-const__node { fill: var(--color-bg); stroke: var(--color-accent); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: node-float 3.6s ease-in-out infinite; animation-delay: var(--delay, 0s); }
.art-const__node.is-center { fill: var(--color-accent); stroke: none; }
@keyframes node-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* 6. Hosting — a globe wireframe with a rotating meridian */
.art-globe__ring, .art-globe__meridian { fill: none; stroke: var(--color-ink-muted); stroke-width: 1.3; opacity: 0.55; }
.art-globe__meridian--spin { stroke: var(--color-accent); opacity: 0.9; transform-box: fill-box; transform-origin: center; animation: globe-spin 4.5s ease-in-out infinite; }
@keyframes globe-spin { 0%, 100% { rx: 34; } 50% { rx: 4; } }
.art-globe__dot { fill: var(--color-accent); animation: node-float 3s ease-in-out infinite; animation-delay: var(--delay, 0s); transform-box: fill-box; transform-origin: center; }

/* These are infinite ambient loops, not one-shot entrance reveals, so
   simply stopping the animation (rather than the near-zero-duration
   trick used elsewhere for `forwards`-fill entrances) is the right
   call here — most of these keyframes animate away from a visible
   base state, so disabling the animation alone leaves a sensible
   static frame. The one exception is .art-build__line, whose base
   transform (scaleX(0)) *is* the hidden state — animation:none alone
   would leave it invisible, so its static value is overridden too. */
@media (prefers-reduced-motion: reduce) {
  .art-build__line, .art-cloud__shape, .art-cloud__particle, .art-radar__ring,
  .art-shield__perimeter, .art-shield__check, .art-eq__bar, .art-const__node,
  .art-globe__meridian--spin, .art-globe__dot {
    animation: none !important;
  }
  .art-build__line { transform: scaleX(1) !important; }
}

/* Capability chip list */
.chip-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: 999px;
  color: var(--color-ink-muted);
}

/* ==========================================================================
   Engagement steps (How We Work)
   ========================================================================== */

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

.step {
  padding-top: var(--space-4);
  border-top: 2px solid var(--color-accent);
}
.step__index { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-accent); margin-bottom: var(--space-2); }
.step__title { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.step__desc { font-size: var(--text-sm); margin: 0; }

/* Approach steps (service page variant — vertical) */
.approach-list { display: flex; flex-direction: column; gap: var(--space-6); }
.approach-item { display: flex; gap: var(--space-5); }
.approach-item__index {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: var(--border-width) solid var(--color-accent);
  color: var(--color-accent);
  font-family: var(--font-mono);
  display: flex; align-items: center; justify-content: center;
}
.approach-item__title { margin-bottom: var(--space-1); font-size: var(--text-lg); }
.approach-item__desc { margin: 0; }

/* ==========================================================================
   CTA band
   ========================================================================== */

.cta-band {
  background: var(--color-bg-inverse);
  color: var(--color-ink-on-inverse);
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.cta-band__title { color: var(--color-ink-on-inverse); margin-bottom: var(--space-2); }
.cta-band__desc { color: var(--color-ink-muted-on-inverse); margin: 0; max-width: 480px; }
.cta-band__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* ==========================================================================
   Contact modal — the site-wide "Talk to an Engineer" destination.
   Submits via fetch() to inc/contact-form.php; see assets/js/main.js.
   ========================================================================== */

.contact-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
}
.contact-modal-overlay.is-open { display: flex; }
.contact-modal {
  width: 100%;
  max-width: 620px;
  max-height: min(88vh, 720px);
  overflow-y: auto;
  background: var(--color-bg-inverse);
  border: var(--border-width) solid var(--color-border-on-inverse);
  border-radius: var(--radius-md);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  animation: contact-modal-in 0.28s var(--ease-standard);
}
@keyframes contact-modal-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .contact-modal { animation: none; } }
.contact-modal__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-bottom: var(--border-width) solid var(--color-border-on-inverse);
  position: sticky;
  top: 0;
  background: var(--color-bg-inverse);
}
.contact-modal__dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.contact-modal__dot--a { background: #E0684D; }
.contact-modal__dot--b { background: #E0B84D; }
.contact-modal__dot--c { background: var(--color-status-positive); }
.contact-modal__path { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-muted-on-inverse); margin-left: var(--space-1); }
.contact-modal__close {
  margin-left: auto;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--color-ink-muted-on-inverse);
  background: none; border: none; cursor: pointer;
}
.contact-modal__close .icon { width: 15px; height: 15px; }
.contact-modal__close:hover { color: var(--color-ink-on-inverse); background: var(--color-border-on-inverse); }
.contact-modal__body { padding: var(--space-6) var(--space-6) var(--space-8); }
.contact-modal__body h2 { font-size: var(--text-xl); color: var(--color-ink-on-inverse); margin-bottom: var(--space-2); }
.contact-modal__body > p { color: var(--color-ink-muted-on-inverse); font-size: var(--text-sm); margin: 0 0 var(--space-6); }

.contact-form { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-5); }
.contact-form__field { display: flex; flex-direction: column; gap: var(--space-2); }
.contact-form__field--full { grid-column: 1 / -1; }
.contact-form label { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-ink-muted-on-inverse); }
.contact-form input,
.contact-form select,
.contact-form textarea {
  background: color-mix(in srgb, var(--color-bg-inverse) 55%, var(--color-border-on-inverse) 45%);
  border: var(--border-width) solid var(--color-border-on-inverse);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-3);
  color: var(--color-ink-on-inverse);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--color-ink-muted-on-inverse); opacity: 0.75; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: 2px solid var(--color-accent-light); outline-offset: 1px; border-color: var(--color-accent-light); }
.contact-form input:invalid[data-touched], .contact-form textarea:invalid[data-touched] { border-color: var(--color-status-warning); }
.contact-form textarea { resize: vertical; min-height: 108px; font-family: var(--font-sans); }
.contact-form select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239AA1AD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-3) center; padding-right: var(--space-8); }
.contact-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form__error { font-size: var(--text-xs); color: var(--color-status-warning); min-height: 1.1em; }
.contact-form__submit-row { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-1); }
.contact-form__note { font-size: var(--text-xs); color: var(--color-ink-muted-on-inverse); }
.contact-form__server-error { grid-column: 1 / -1; font-size: var(--text-xs); color: var(--color-status-warning); margin: 0; }
@media (max-width: 640px) { .contact-form { grid-template-columns: 1fr; } }

.contact-success {
  position: relative;
  display: none;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: color-mix(in srgb, var(--color-status-positive) 14%, var(--color-bg-inverse));
  border: var(--border-width) solid var(--color-status-positive);
  border-radius: var(--radius-sm);
}
.contact-success.is-visible { display: flex; }
.contact-success__icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--color-status-positive); }
.contact-success h3 { font-size: var(--text-sm); color: var(--color-ink-on-inverse); margin-bottom: 2px; }
.contact-success p { font-size: var(--text-xs); margin: 0; color: var(--color-ink-muted-on-inverse); }

/* ==========================================================================
   FAQ accordion
   ========================================================================== */

.faq-list { border-top: var(--border-width) solid var(--color-border); }
.faq-item { border-bottom: var(--border-width) solid var(--color-border); }
.faq-item__question { list-style: none; }
.faq-item__question::-webkit-details-marker,
.faq-item__question::marker { display: none; content: ''; }
.faq-item__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  background: none;
  border: none;
  text-align: left;
  font-size: var(--text-lg);
  font-weight: 600;
  cursor: pointer;
  color: var(--color-ink);
}
.faq-item__question .icon { color: var(--color-accent); transition: transform var(--duration-base) var(--ease-standard); flex-shrink: 0; }
.faq-item[open] .faq-item__question .icon { transform: rotate(180deg); }
.faq-item__answer { padding: 0 0 var(--space-5); margin: 0; max-width: 680px; }

/* ==========================================================================
   Related services
   ========================================================================== */

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 720px) { .related-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Technology / platform strip
   ========================================================================== */

.tech-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6) 0;
  border-top: var(--border-width) solid var(--color-border);
  border-bottom: var(--border-width) solid var(--color-border);
}
.tech-strip__item {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.tech-strip__item::before { content: '▪'; color: var(--color-accent); }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--color-bg-inverse);
  color: var(--color-ink-on-inverse);
  padding: var(--space-12) 0 var(--space-6);
  margin-top: var(--space-12);
}
.site-footer a { color: var(--color-ink-on-inverse); }
.site-footer a:hover { color: var(--color-accent); }
/* Brand on the left, Services + Company grouped and pushed to the far
   right (matching preview/homepage.html) — deliberately NOT an even
   split across the full width, so there's real empty space in the
   middle on wide screens instead of the link columns drifting toward
   center.

   History, because this took three attempts to get right:
   1. Plain flexbox + flex-wrap: safe from overflow, but wrapped to a
      second row (Services/Company below the logo) more eagerly than
      there was actually a need to.
   2. flex-shrink: 0 on both sides: stopped that, but also stopped
      either side from ever shrinking — when it didn't fit, the row
      overflowed and visibly clipped "Terms of Service" instead.
   3. Grid with minmax(0, max-content) for the second track: max-content
      on a *wrapping* flex child is ambiguous — browsers don't size it
      as "both columns side by side," so it wrapped Company under
      Services even with plenty of room to spare.
   This version: minmax(0, 340px) 1fr for the outer grid — 1fr always
   resolves to whatever room is actually left, no ambiguous intrinsic
   sizing involved — and the links group aligns itself to the right
   edge of that space, so it still sits flush right with empty space
   before it, exactly like the flex version did when it worked. */
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 340px) 1fr;
  align-items: start;
  gap: var(--space-8);
  padding-bottom: var(--space-8);
  border-bottom: var(--border-width) solid var(--color-border-on-inverse);
}
.footer-brand { min-width: 0; }
/* flex-wrap here is still the fallback for genuinely narrow space —
   Services/Company wrap onto their own two lines within this column,
   never below the brand column and never clipped — but with 1fr above
   giving this its actual available width instead of an ambiguous
   guess, that fallback should only matter at real mobile widths. */
.footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-8) var(--space-10); min-width: 0; }
@media (max-width: 720px) {
  .footer-top { grid-template-columns: 1fr; }
  .footer-links { justify-content: flex-start; gap: var(--space-6); }
}

.footer-col__title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink-muted-on-inverse);
  margin-bottom: var(--space-4);
}
.footer-col__list { display: flex; flex-direction: column; gap: var(--space-2); }
.footer-col__list a { font-size: var(--text-sm); }

.footer-brand__logo { height: 48px; width: auto; display: block; filter: brightness(0) invert(1); opacity: 0.94; margin-bottom: var(--space-3); }
.footer-brand p { color: var(--color-ink-muted-on-inverse); max-width: 320px; }
.footer-contact { font-size: var(--text-sm); color: var(--color-ink-muted-on-inverse); margin-top: var(--space-4); }
.footer-contact a { display: block; margin-bottom: var(--space-1); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-6);
  font-size: var(--text-xs);
  color: var(--color-ink-muted-on-inverse);
}
.footer-social { display: flex; gap: var(--space-4); }

.footer-tech-strip { border-color: var(--color-border-on-inverse); }
.footer-tech-strip .tech-strip__item { color: var(--color-ink-muted-on-inverse); }

/* ==========================================================================
   Breadcrumb
   ========================================================================== */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  margin-bottom: var(--space-6);
}
.breadcrumb a { color: var(--color-ink-muted); }
.breadcrumb__sep { color: var(--color-border); }

/* ==========================================================================
   Pricing
   ========================================================================== */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; } }

.pricing-card {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
}
.pricing-card--featured { border-color: var(--color-accent); box-shadow: var(--shadow-sm); }
.pricing-card__name { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.pricing-card__price { font-size: var(--text-3xl); font-weight: 700; margin-bottom: var(--space-1); }
.pricing-card__price span { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-muted); }
.pricing-card__note { font-size: var(--text-xs); color: var(--color-ink-muted); margin-bottom: var(--space-5); }
.pricing-card__features { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-6); flex-grow: 1; }
.pricing-card__feature { display: flex; gap: var(--space-2); font-size: var(--text-sm); align-items: flex-start; }
.pricing-card__feature .icon { color: var(--color-status-positive); margin-top: 2px; }

/* ==========================================================================
   Contact form
   ========================================================================== */

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  align-items: start;
}
@media (max-width: 800px) { .contact-layout { grid-template-columns: 1fr; } }

.form-field { margin-bottom: var(--space-4); }
.form-field label { display: block; font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-2); }
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
}
.form-field textarea { min-height: 120px; resize: vertical; }

.contact-info { font-size: var(--text-sm); color: var(--color-ink-muted); }
.contact-info a { color: var(--color-ink); font-weight: 600; }
.contact-info__row { margin-bottom: var(--space-4); }
.contact-info__label { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-accent); display: block; margin-bottom: var(--space-1); }

/* ==========================================================================
   Blog list / single
   ========================================================================== */

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
@media (max-width: 900px) { .post-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .post-grid { grid-template-columns: 1fr; } }

.post-card { display: flex; flex-direction: column; }
.post-card__thumb { border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-3); background: var(--color-bg-subtle); aspect-ratio: 16/10; }
/* Fallback shown when a post has no featured image (likeroot_post_card_art()
   in inc/helpers.php) — a schematic icon on the same blueprint-grid
   texture as the hero, not a stock photo. */
.post-card__thumb-art {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background-image: var(--grid-texture);
  background-size: var(--grid-texture-size);
  background-color: var(--color-accent-subtle);
}
.post-card__thumb-art .icon { width: 44px; height: 44px; color: var(--color-accent); }

/* Post card art — three animations of its own, deliberately distinct
   from the homepage service-card grid's (.art-eq__* / .art-const__* /
   .art-radar__*, .art-shield__*) so the two sections don't repeat the
   same visual motifs. See likeroot_post_card_art() in inc/helpers.php. */

/* cPanel vs. Plesk vs. DirectAdmin — three options, one spotlighted at a time */
.art-compare__baseline { stroke: var(--color-border); stroke-width: 1; }
.art-compare__bar { fill: var(--color-ink-muted); opacity: 0.45; animation: compare-highlight 3.6s ease-in-out infinite; animation-delay: var(--delay, 0s); }
@keyframes compare-highlight {
  0%, 92%, 100% { fill: var(--color-ink-muted); opacity: 0.45; }
  8%, 25%       { fill: var(--color-accent); opacity: 1; }
}

/* Kubernetes migration checklist — items ticking off one at a time */
.art-check__box { fill: none; stroke: var(--color-border); stroke-width: 1.5; }
.art-check__line { stroke: var(--color-border); stroke-width: 2; opacity: 0.5; }
.art-check__mark {
  fill: none; stroke: var(--color-status-positive); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22;
  animation: check-tick 4s ease-in-out infinite; animation-delay: var(--delay, 0s);
}
@keyframes check-tick {
  0%       { stroke-dashoffset: 22; opacity: 0; }
  10%      { opacity: 1; }
  25%, 85% { stroke-dashoffset: 0; opacity: 1; }
  95%      { opacity: 0; }
  100%     { stroke-dashoffset: 22; opacity: 0; }
}

/* What a security assessment covers — a beam sweeping across findings */
.art-scan__dot {
  fill: var(--color-ink-muted); opacity: 0.5; transform-box: fill-box; transform-origin: center;
  animation: scan-flash 3.2s ease-in-out infinite; animation-delay: var(--delay, 0s);
}
@keyframes scan-flash {
  0%, 88%, 100% { fill: var(--color-ink-muted); opacity: 0.5; transform: scale(1); }
  6%            { fill: var(--color-status-warning); opacity: 1; transform: scale(1.3); }
}
.art-scan__beam { stroke: var(--color-accent); stroke-width: 2; opacity: 0.6; animation: scan-sweep 3.2s ease-in-out infinite; }
@keyframes scan-sweep { 0% { transform: translateX(6px); } 100% { transform: translateX(194px); } }

@media (prefers-reduced-motion: reduce) {
  .art-compare__bar, .art-check__mark, .art-scan__dot, .art-scan__beam {
    animation: none !important;
  }
  /* .art-compare__bar and .art-scan__dot both animate away from a
     visible base state (muted fill, opacity 0.45/0.5) — animation:none
     alone leaves them in that base state, which is fine. .art-check__mark's
     base (outside the animation) has no stroke-dashoffset declared, so
     it defaults to 0 — fully drawn — which is also a good static state.
     None need an explicit override. */
}

.post-card__meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-muted); margin-bottom: var(--space-2); }
.post-card__title { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.post-card__title a { color: var(--color-ink); }

.single-post { max-width: var(--container-narrow); margin: 0 auto; }
.single-post__meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-muted); margin-bottom: var(--space-3); }

/* Generic WP editor content — used by single posts and by the Legal
   page template (page-templates/template-legal.php), which has no
   .single-post wrapper of its own. */
.entry-content > * + * { margin-top: var(--space-4); }
.entry-content h2 { margin-top: var(--space-8); }
.entry-content ul, .entry-content ol { list-style: disc; padding-left: var(--space-6); }
.entry-content ol { list-style-type: decimal; }
.entry-content li { margin-bottom: var(--space-2); color: var(--color-ink-muted); }
.entry-content li:last-child { margin-bottom: 0; }
.entry-content strong { color: var(--color-ink); }

/* ==========================================================================
   Origin story / about panels
   ========================================================================== */

.panel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
@media (max-width: 720px) { .panel-grid { grid-template-columns: 1fr; } }
.panel {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}
.panel__title { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.panel__desc { margin: 0; font-size: var(--text-sm); }

.pillars-list { display: flex; flex-direction: column; gap: var(--space-5); }
.pillar-row { display: flex; gap: var(--space-4); padding-bottom: var(--space-5); border-bottom: var(--border-width) solid var(--color-border); }
.pillar-row:last-child { border-bottom: none; padding-bottom: 0; }
.pillar-row__index { font-family: var(--font-mono); color: var(--color-accent); flex-shrink: 0; width: 28px; }