/*
  Sivaga Technologies — Shared site stylesheet
  Loaded on every page. Component patterns here (tilt, magnetic, marquee,
  accordion, carousel, consent banner) are the site-wide vocabulary from
  blueprint.md Step 5 / architecture Section 9 — reused across templates,
  never redefined per page. Everything references tokens.css custom
  properties; no hardcoded brand hex values below.
*/

@import url('tokens.css');

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

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  max-width: 100vw;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100%;
  width: 100%;
}

img, video, canvas, svg { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  color: var(--color-text);
  overflow-wrap: break-word;
  word-break: normal;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding-inline: var(--space-5);
}
@media (max-width: 768px) {
  .container { padding-inline: var(--space-4); }
}
@media (max-width: 375px) {
  .container { padding-inline: 12px; }
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

/* Visually-hidden but accessible text (skip link target labels, etc.) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--color-ink); color: var(--color-paper);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
}
.skip-link:focus {
  left: var(--space-4); top: var(--space-4);
}

/* -----------------------------------------------------------------
   Focus states — visible everywhere, never suppressed
----------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* -----------------------------------------------------------------
   Buttons
----------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-sm);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  min-height: 48px;
  text-decoration: none;
  transition: background-color var(--duration-hover) var(--ease-out),
              color var(--duration-hover) var(--ease-out),
              transform var(--duration-hover) var(--ease-out);
}
.btn-primary {
  background: var(--color-accent);
  color: #fff;
}
.btn-primary:hover { background: var(--color-accent-hover); }
.btn-secondary {
  background: transparent;
  color: var(--color-text-inverted);
  border: 1px solid rgba(250, 249, 246, 0.28);
}
.btn-secondary:hover { background: rgba(250, 249, 246, 0.08); }
.btn-ghost {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.btn-ghost:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* -----------------------------------------------------------------
   Magnetic buttons/icons — standing pattern (blueprint.md Step 5)
   Outer .magnetic holds layout/hitbox; inner .magnetic-inner translates.
   No-op on touch (Section 9 touch-equivalent rule): JS only binds
   mousemove listeners, so touch devices simply get a normal tap target.
----------------------------------------------------------------- */
.magnetic {
  display: inline-block;
}
.magnetic-inner {
  display: inline-flex;
  will-change: transform;
  transition: transform 200ms var(--ease-out-soft);
}
@media (prefers-reduced-motion: reduce) {
  .magnetic-inner { transition: none; }
}

/* -----------------------------------------------------------------
   Tilt cards — replaces box-in-box flat bordered cards
----------------------------------------------------------------- */
.tilt {
  perspective: 1000px;
}
.tilt-inner {
  transform-style: preserve-3d;
  will-change: transform;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-tilt-rest);
  transition: box-shadow var(--duration-hover) var(--ease-out),
              transform var(--duration-hover) var(--ease-out-soft);
  height: 100%;
}
.tilt:hover .tilt-inner,
.tilt:focus-within .tilt-inner {
  box-shadow: var(--shadow-tilt-hover);
}
@media (prefers-reduced-motion: reduce) {
  .tilt-inner { transition: box-shadow var(--duration-hover) var(--ease-out); }
}
/* Touch devices: no mouse-follow tilt, resting shadow only (Section 9) */
@media (hover: none) {
  .tilt-inner { transform: none !important; }
}

.card-pad { padding: var(--space-6); }

/* -----------------------------------------------------------------
   Industry image cards (Industries Overview section) -- full-bleed
   photo, dark gradient overlay, name + hook overlaid. Reuses the
   .tilt/.tilt-inner mouse-follow depth already established above;
   content stays always-visible (no hover-gated text) so the touch
   equivalent is identical to the mouse/keyboard experience.
----------------------------------------------------------------- */
.industry-card { width: 280px; text-decoration: none; color: inherit; }
.industry-card-inner {
  position: relative;
  overflow: hidden;
  height: 360px;
  background: var(--color-ink);
}
.industry-card-inner img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-out-soft);
}
.industry-card:hover .industry-card-inner img,
.industry-card:focus-within .industry-card-inner img {
  transform: scale(1.06);
}
.industry-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(21, 23, 28, 0) 30%, rgba(21, 23, 28, 0.55) 65%, rgba(21, 23, 28, 0.92) 100%);
  transition: background var(--duration-hover) var(--ease-out);
}
.industry-card:hover .industry-card-overlay,
.industry-card:focus-within .industry-card-overlay {
  background: linear-gradient(180deg, rgba(255, 90, 54, 0.16) 0%, rgba(21, 23, 28, 0.45) 55%, rgba(21, 23, 28, 0.94) 100%);
}
.industry-card-content {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--space-5);
}
.industry-card-content h3 {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-inverted);
}
.industry-card-content h3::after {
  content: "";
  display: block;
  width: 32px; height: 2px;
  margin-top: var(--space-2);
  background: var(--color-accent);
  transform: scaleX(1);
  transform-origin: left;
  transition: width var(--duration-hover) var(--ease-out);
}
.industry-card:hover .industry-card-content h3::after,
.industry-card:focus-within .industry-card-content h3::after {
  width: 56px;
}
.industry-card-content p {
  color: var(--color-text-muted-inverted);
  font-size: var(--text-sm);
  margin-top: var(--space-2);
  line-height: var(--leading-relaxed);
}
@media (prefers-reduced-motion: reduce) {
  .industry-card-inner img,
  .industry-card-overlay,
  .industry-card-content h3::after { transition: none; }
  .industry-card:hover .industry-card-inner img,
  .industry-card:focus-within .industry-card-inner img { transform: none; }
}

/* -----------------------------------------------------------------
   Why Sivaga differentiator cards — icon + accent index numeral on
   top of the standard .tilt/.tilt-inner shell (Step 5 anti-box-in-box
   pattern). The numeral sits behind the icon/copy as a restrained
   decorative watermark, not competing content (aria-hidden).
----------------------------------------------------------------- */
.why-card { position: relative; overflow: hidden; }
.why-index {
  position: absolute;
  top: var(--space-3);
  right: var(--space-4);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-extrabold);
  font-size: var(--text-4xl);
  line-height: 1;
  color: var(--color-accent-soft);
  z-index: 0;
  pointer-events: none;
}
.why-icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  margin-bottom: var(--space-4);
  transition: background-color var(--duration-hover) var(--ease-out),
              color var(--duration-hover) var(--ease-out);
}
.why-icon svg { width: 24px; height: 24px; }
.why-card h3, .why-card p { position: relative; z-index: 1; }
.tilt:hover .why-icon,
.tilt:focus-within .why-icon {
  background: var(--color-accent);
  color: #fff;
}

/* -----------------------------------------------------------------
   Step / process cards — visually distinct from .why-card so a
   "Process" section next to a "Why choose us" section doesn't read
   as the same card twice (2026-09-11 fix). Same shell/index-numeral
   convention as .why-card, but the icon badge is solid-accent at
   rest (inverse of .why-icon's soft-at-rest/solid-on-hover state)
   and each card carries a numbered connector rule along its top
   edge to read as a sequence, not a parallel list of claims.
----------------------------------------------------------------- */
.step-card { position: relative; overflow: hidden; border-top: 3px solid var(--color-accent); padding-top: var(--space-4); padding-right: var(--space-3); padding-bottom: var(--space-3); }
.step-icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: #fff;
  margin-bottom: var(--space-4);
}
.step-icon svg { width: 22px; height: 22px; }
.step-card .why-index { color: var(--color-accent-soft); }

/* -----------------------------------------------------------------
   Marquee strip — trust logos / tag lists
----------------------------------------------------------------- */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  gap: var(--space-8);
  animation: marquee-scroll var(--duration-marquee) linear infinite;
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track {
  animation-play-state: paused;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* -----------------------------------------------------------------
   Drag-scroll gallery (used by Featured Case Studies)
----------------------------------------------------------------- */
.drag-scroll {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  max-width: 100%;
  width: 100%;
  scroll-snap-type: x proximity;
  padding-bottom: var(--space-4);
  cursor: grab;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}
.drag-scroll.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.drag-scroll > * { scroll-snap-align: start; flex: 0 0 auto; }
.drag-hint {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs); color: var(--color-text-muted);
}
.drag-hint svg { animation: drag-hint-nudge 1.6s ease-in-out infinite; }
@keyframes drag-hint-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .drag-hint svg { animation: none; }
}

/* -----------------------------------------------------------------
   Stat counters
----------------------------------------------------------------- */
.stat-value {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-extrabold);
  font-size: var(--text-4xl);
  color: var(--color-text-inverted);
}

/* -----------------------------------------------------------------
   Two-tone headline treatment (standing pattern)
----------------------------------------------------------------- */
.h1-lead { color: var(--color-text); }
.h1-accent {
  color: var(--color-accent);
  display: inline-block;
  clip-path: inset(0 100% 0 0);
  animation: two-tone-reveal 900ms var(--ease-out-soft) forwards;
  animation-delay: 300ms;
}
@keyframes two-tone-reveal {
  to { clip-path: inset(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) {
  .h1-accent { clip-path: inset(0 0 0 0); animation: none; }
}
/* Dark-surface variant */
.h1-lead-inverted { color: var(--color-text-inverted); }

/* -----------------------------------------------------------------
   Review carousel (Tier 2)
----------------------------------------------------------------- */
.carousel { position: relative; overflow: hidden; }
.carousel-track {
  display: flex;
  gap: var(--space-5);
  transition: transform 500ms var(--ease-out-soft);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .carousel-track { transition: none; }
}
.carousel-slide {
  flex: 0 0 100%;
}
@media (min-width: 768px) {
  .carousel-slide { flex: 0 0 calc(50% - var(--space-5) / 2); }
}
@media (min-width: 1100px) {
  .carousel-slide { flex: 0 0 calc(33.333% - var(--space-5) * 2 / 3); }
}
.carousel-controls {
  display: flex; justify-content: center; gap: var(--space-3);
  margin-top: var(--space-6);
}
.carousel-btn {
  width: 48px; height: 48px; border-radius: var(--radius-full);
  border: 1px solid var(--color-border); background: var(--color-surface);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; min-width: 48px; min-height: 48px;
}
.carousel-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
/* Dots stay visually small (8px) -- WCAG 2.5.8's equivalent-control
   exception applies since the 48px prev/next buttons above reach the same
   result, but padding still gives each dot a real ~32px tap area rather
   than the visible 8px alone. */
.carousel-dots { display: flex; align-items: center; gap: var(--space-1); }
.carousel-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--color-border);
  border: none; cursor: pointer; padding: 12px; background-clip: content-box;
  box-sizing: content-box;
}
.carousel-dot[aria-current="true"] { background: var(--color-accent); width: 22px; border-radius: 999px; transition: width 250ms var(--ease-out); }

.review-card-mark { color: var(--color-accent); }
.review-stars { color: var(--color-accent); letter-spacing: 2px; }

/* -----------------------------------------------------------------
   FAQ accordion (Tier 2)
----------------------------------------------------------------- */
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-trigger {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  background: none; border: none; text-align: left; cursor: pointer;
  padding: var(--space-5) 0;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}
.faq-icon {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--duration-hover) var(--ease-out);
}
.faq-item[data-open="true"] .faq-icon { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) {
  .faq-icon { transition: none; }
}
.faq-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--duration-reveal) var(--ease-out-soft);
}
.faq-item[data-open="true"] .faq-panel { max-height: 480px; }
@media (prefers-reduced-motion: reduce) {
  .faq-panel { transition: none; }
}
.faq-panel-inner { padding-bottom: var(--space-5); color: var(--color-text-muted); line-height: var(--leading-relaxed); }

/* -----------------------------------------------------------------
   Left/right split sections — equal-height balance rule (standing pattern)
----------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: stretch;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-8); }
}
.split > * { height: 100%; }

/* -----------------------------------------------------------------
   Form elements
----------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.field label { font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--color-text); }
.field input, .field select, .field textarea {
  font-family: var(--font-body);
  font-size: var(--text-base); /* 16px floor — prevents iOS Safari auto-zoom */
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  min-height: 48px;
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--color-accent);
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 1px;
}
.field-hint { font-size: var(--text-xs); color: var(--color-text-muted); }
.field-error { font-size: var(--text-xs); color: var(--color-accent); display: none; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--color-accent); }
.field.has-error .field-error { display: block; }

/* Honeypot field — hidden from sighted users AND assistive tech, real bots still fill it */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

.form-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-lg);
}

.form-note { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-3); }
.form-success {
  display: none;
  background: var(--color-accent-soft);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text);
}
.form-success[data-visible="true"] { display: block; }

/* -----------------------------------------------------------------
   Scroll-reveal fallback (used lightly outside GSAP-owned hero)
----------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-reveal) var(--ease-out-soft),
              transform var(--duration-reveal) var(--ease-out-soft);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* -----------------------------------------------------------------
   Diagonal clip-path section divider (Step 4 background-treatment pattern)
----------------------------------------------------------------- */
.divider-diagonal {
  position: relative;
  height: 140px;
  background: linear-gradient(to right, rgba(255,90,54,0.15), transparent, rgba(255,138,92,0.15));
  clip-path: polygon(0 15%, 100% 0, 100% 85%, 0 100%);
  margin-top: -70px;
  pointer-events: none;
}

/* Dual off-axis radial glow, dark sections */
.glow-dark {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.glow-dark::before, .glow-dark::after {
  content: "";
  position: absolute;
  width: 55%;
  height: 70%;
  border-radius: 50%;
  filter: blur(80px);
  z-index: -1;
  opacity: 0.35;
}
.glow-dark::before {
  background: var(--gradient-accent-1);
  top: -10%;
  left: -10%;
}
.glow-dark::after {
  background: var(--gradient-accent-2);
  bottom: -20%;
  right: -8%;
}

/* -----------------------------------------------------------------
   Nav
----------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(21, 23, 28, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border-inverted);
}
.nav-row { display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-4); }
.nav-logo { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-heading); font-weight: var(--font-weight-extrabold); color: var(--color-text-inverted); font-size: var(--text-lg); text-decoration: none; }
.nav-logo img { height: 32px; width: auto; }
/* Breakpoint is 1200px, not 1024px: at 1024-1199px the logo + all 8 nav
   links + CTA button do not fit the container width and would wrap/cram
   (found in 2026-09 responsive audit) -- the hamburger drawer covers that
   range instead, matching the existing tablet pattern. */
.nav-links { display: none; align-items: center; gap: var(--space-5); }
@media (min-width: 1200px) {
  .nav-links { display: flex; }
}
.nav-links a {
  color: var(--color-text-muted-inverted);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  padding: var(--space-2) 0;
}
.nav-links a:hover { color: var(--color-text-inverted); }
.nav-cta-wrap { display: flex; align-items: center; gap: var(--space-4); }
.nav-cta-desktop { display: none; }
@media (min-width: 1200px) {
  .nav-cta-desktop { display: inline-block; }
}
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: var(--radius-sm);
  background: transparent; border: 1px solid var(--color-border-inverted);
  color: var(--color-text-inverted); cursor: pointer;
}
@media (min-width: 1200px) {
  .nav-toggle { display: none; }
}
.mobile-drawer {
  display: none;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) 0 var(--space-6);
  border-top: 1px solid var(--color-border-inverted);
}
.mobile-drawer[data-open="true"] { display: flex; }
@media (min-width: 1200px) {
  .mobile-drawer { display: none !important; }
}
.mobile-drawer a {
  color: var(--color-text-muted-inverted);
  text-decoration: none;
  padding: var(--space-3) 0;
  font-size: var(--text-base);
  border-bottom: 1px solid var(--color-border-inverted);
}
.mobile-drawer a:hover { color: var(--color-text-inverted); }
.mobile-drawer a.btn, .mobile-drawer a.mobile-nav-cta {
  border-bottom: none !important;
  color: #ffffff !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
  padding: 14px 24px !important;
  margin-top: var(--space-4) !important;
  font-weight: var(--font-weight-bold) !important;
  background: var(--color-accent) !important;
  border-radius: var(--radius-full) !important;
}

/* -----------------------------------------------------------------
   Footer
----------------------------------------------------------------- */
.site-footer { background: var(--color-ink); color: var(--color-text-muted-inverted); }
.footer-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--space-7);
  padding-block: var(--space-9);
}
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}
.footer-grid h4 { color: var(--color-text-inverted); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-wide); margin-bottom: var(--space-4); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.footer-grid a { color: var(--color-text-muted-inverted); text-decoration: none; font-size: var(--text-sm); }
.footer-grid a:hover { color: var(--color-text-inverted); }
.footer-bottom {
  border-top: 1px solid var(--color-border-inverted);
  padding-block: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-muted-inverted);
}
.footer-copyright {
  text-align: center;
  width: 100%;
  order: 1;
}
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-3) var(--space-4);
  width: 100%;
  order: 2;
}
.footer-unit {
  color: var(--color-text-muted-inverted);
  font-size: var(--text-xs);
  text-align: center;
  white-space: nowrap;
  width: 100%;
  order: 3;
}
@media (min-width: 768px) {
  .footer-bottom {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    text-align: left;
    gap: var(--space-4);
  }
  .footer-copyright {
    text-align: left;
    width: auto;
    order: 1;
  }
  .footer-unit {
    text-align: center;
    width: auto;
    order: 2;
  }
  .footer-legal {
    justify-content: flex-end;
    width: auto;
    order: 3;
  }
}
.footer-legal a {
  color: var(--color-text-muted-inverted);
  text-decoration: none;
  font-size: var(--text-xs);
}
.footer-legal a:hover { color: var(--color-text-inverted); }

/* -----------------------------------------------------------------
   Consent banner (Step 8 security baseline)
----------------------------------------------------------------- */
.consent-banner {
  position: fixed; left: var(--space-4); right: var(--space-4); bottom: var(--space-4);
  bottom: max(var(--space-4), env(safe-area-inset-bottom));
  z-index: 200;
  max-width: 560px;
  margin-inline: auto;
  background: var(--color-ink);
  color: var(--color-text-inverted);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-5);
  display: none;
}
@media (max-width: 375px) {
  .consent-banner { left: 12px; right: 12px; padding: var(--space-4); }
}
.consent-banner[data-visible="true"] { display: block; }
.consent-banner p { font-size: var(--text-sm); color: var(--color-text-muted-inverted); margin: 0 0 var(--space-4); }
.consent-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.consent-actions .btn-ghost { color: var(--color-text-inverted); border-color: var(--color-line-dark); }
.consent-actions .btn-ghost:hover { color: var(--color-accent); border-color: var(--color-accent); }

/* -----------------------------------------------------------------
   Sticky mobile bar (used site-wide on long pages; harmless placeholder
   hook on Home if not populated)
----------------------------------------------------------------- */
.section { padding-block: var(--space-8); }
@media (max-width: 768px) {
  .section { padding-block: var(--space-6); }
}

/* -----------------------------------------------------------------
   Responsive card/stat/field grids (fixes 2026-09 responsive-audit bug).
   These previously used a Tailwind CDN utility class (e.g. `md:grid-cols-3`)
   PLUS an inline `style="grid-template-columns:1fr"` fallback on the same
   element. An inline style always wins over a class-selector rule
   regardless of viewport, so the Tailwind responsive class could never
   actually take effect -- every one of these grids was silently stuck at
   its mobile column count (1 or 2 columns) at every breakpoint, including
   1440px/1920px desktop. Replaced with real, breakpoint-driven classes
   here (same fix pattern already applied to .hero-grid below).
----------------------------------------------------------------- */
.grid-cards-2 {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .grid-cards-2 { grid-template-columns: repeat(2, 1fr); }
}
.grid-cards-3 {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .grid-cards-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid-cards-3 { grid-template-columns: repeat(3, 1fr); }
}

/* -----------------------------------------------------------------
   Multi-card row internal alignment (heading-height parity). Equal
   overall card height alone (grid stretch + .tilt-inner height:100%)
   is not enough when headings in the same row wrap to a different
   number of lines -- the paragraph below a 1-line heading then starts
   higher than the paragraph below a 2-line heading, and an optional
   trailing link (present on some cards, absent on others) makes the
   row look inconsistent even though every card is the same height.
   Reusable on any .tilt-inner (or other card body) whose row mixes
   heading lengths and/or optional bottom links -- not proof-specific.
----------------------------------------------------------------- */
.card-flex-body {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.card-heading-2l {
  min-height: calc(var(--text-lg) * var(--leading-tight) * 2);
  display: flex;
  align-items: flex-start;
}
.card-link-bottom {
  margin-top: auto;
  padding-top: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-accent);
  font-weight: 600;
  font-size: var(--text-sm);
  text-decoration: none;
}

.grid-stats-4 {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(2, 1fr);
  text-align: center;
}
@media (min-width: 768px) {
  .grid-stats-4 { grid-template-columns: repeat(4, 1fr); }
}
.grid-fields-2 {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 560px) {
  .grid-fields-2 { grid-template-columns: repeat(2, 1fr); }
}

/* -----------------------------------------------------------------
   Breadcrumb (standing project pattern -- semantic <ol> + aria-current,
   used on every page not in primary nav: Service/Industry/Location
   pages, Case Studies, Blog posts).
----------------------------------------------------------------- */
.breadcrumb { margin: var(--space-5) 0 0; }
.breadcrumb ol {
  list-style: none;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  margin: 0; padding: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.breadcrumb li { display: flex; align-items: center; gap: var(--space-2); }
.breadcrumb li:not(:last-child)::after { content: "/"; color: var(--color-border); }
.breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-accent); }
.breadcrumb [aria-current="page"] { color: var(--color-text); font-weight: var(--font-weight-medium); }
/* Dark-surface variant -- the breadcrumb's default muted color (--color-
   text-muted, tuned for light surfaces) fails WCAG AA contrast when the
   breadcrumb sits inside a dark hero (found live at 3.36:1, needs 4.5:1).
   Reusing the pattern from Home's consent-banner button fix: check a
   shared component's color against every new surface it's dropped into,
   don't assume the shared class is surface-agnostic. */
.hero-section .breadcrumb ol,
.glow-dark .breadcrumb ol { color: var(--color-text-muted-inverted); }
.hero-section .breadcrumb a,
.glow-dark .breadcrumb a { color: var(--color-text-muted-inverted); }
.hero-section .breadcrumb a:hover,
.glow-dark .breadcrumb a:hover { color: var(--color-accent); }
.hero-section .breadcrumb [aria-current="page"],
.glow-dark .breadcrumb [aria-current="page"] { color: var(--color-text-inverted); }
.hero-section .breadcrumb li:not(:last-child)::after,
.glow-dark .breadcrumb li:not(:last-child)::after { color: var(--color-line-dark); }

/* -----------------------------------------------------------------
   Services Hub -- category filter tabs (Tier 2)
----------------------------------------------------------------- */
.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  width: 100%;
}
.filter-tab {
  flex: 0 0 auto;
  min-height: 44px;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background-color var(--duration-hover) var(--ease-out),
              color var(--duration-hover) var(--ease-out),
              border-color var(--duration-hover) var(--ease-out);
}
.filter-tab:hover { border-color: var(--color-accent); color: var(--color-accent); }
.filter-tab[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

/* 2-Column Mobile Grid for Category Filters */
@media (max-width: 768px) {
  .filter-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
    width: 100%;
    margin-bottom: var(--space-5);
  }
  .filter-tab {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
    white-space: normal;
    line-height: var(--leading-tight);
    min-height: 44px;
    box-sizing: border-box;
    border-radius: var(--radius-md);
  }
}

/* Capped 3-column variant of .grid-services, for small curated
   subsets (Recommended Services on Industry/Location templates,
   typically 4-6 cards) where the full 4-column desktop breakpoint
   below produces an unbalanced trailing row (e.g. 5 cards -> 4+1).
   Reuses all .service-card/.tilt markup and styling as-is -- only
   the column count differs. Scoped as its own class rather than
   changing .grid-services itself, since that class's 4-column
   desktop layout is correct for the Services Hub's full 35-card
   catalog and must not regress. */
.grid-services-compact {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .grid-services-compact { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid-services-compact { grid-template-columns: repeat(3, 1fr); }
}

/* Services Hub -- full catalog grid + card content */
.grid-services {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .grid-services { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid-services { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1440px) {
  .grid-services { grid-template-columns: repeat(4, 1fr); }
}
.service-card { text-decoration: none; color: inherit; }
.service-card-desc { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: var(--space-2); line-height: var(--leading-normal); }
.service-card-cta {
  display: inline-flex; align-items: center; gap: var(--space-1);
  color: var(--color-accent); font-size: var(--text-sm); font-weight: 600;
  margin-top: var(--space-4);
}
.service-card[hidden] { display: none; }

/* -----------------------------------------------------------------
   Services Hub catalog -- per-category grouping (visual-richness
   pass, 2026-09-10). The 35-service grid reads as five distinct,
   icon-labeled groups instead of one flat list, with one flagship
   card per category (reuses the .why-icon accent-soft roundel
   pattern already established for Why Sivaga/Why Bundle sections).
   Category filter tabs (package-builder.js) now also hide whole
   .catalog-category blocks via data-category-block, not just
   individual cards, so a filtered category never leaves an empty
   header floating above nothing.
----------------------------------------------------------------- */
.catalog-categories { display: flex; flex-direction: column; gap: var(--space-9); }
.catalog-category[hidden] { display: none; }
.catalog-category-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.catalog-category-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--color-accent-soft);
  color: var(--color-accent);
}
.catalog-category-icon svg { width: 24px; height: 24px; }
.catalog-category-title { font-size: var(--text-xl); font-weight: var(--font-weight-bold); }
.catalog-category-count { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: var(--space-1); }

/* Flagship card, one per category -- replaces the earlier one-off
   inline border on Local SEO Monthly with a reusable class. */
.service-card-featured { position: relative; }
.service-card-featured .tilt-inner { border: 2px solid var(--color-accent); background: var(--color-accent-soft); }
.service-card-featured-badge {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 4px;
  background: var(--color-accent);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-2);
}

/* -----------------------------------------------------------------
   Industry cross-link chips -- lightweight secondary-section
   treatment (a short cross-link list doesn't need full tilt-card
   showcase weight; reuses the .why-icon roundel proportions at a
   smaller scale instead of a new visual language).
----------------------------------------------------------------- */
.industry-chip-row { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.industry-chip {
  flex: 1 1 260px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--duration-hover) var(--ease-out),
              box-shadow var(--duration-hover) var(--ease-out);
}
.industry-chip:hover, .industry-chip:focus-visible {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-tilt-hover);
}
.industry-chip-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-accent-soft);
  color: var(--color-accent);
}
.industry-chip-icon svg { width: 20px; height: 20px; }
.industry-chip-text strong { display: block; font-size: var(--text-sm); font-weight: var(--font-weight-semibold); color: var(--color-text); }
.industry-chip-text small { display: block; font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; line-height: var(--leading-normal); }

/* Industry chip panel wrapper -- gives the chip row a contained, intentional
   "module" feel at secondary-section scale (2026-09-10 richness pass).
   Uses --color-bg (paper) against a --color-surface (white) section so the
   panel reads as a distinct grouped block, not full primary-section weight. */
.industry-chip-panel {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.industry-chip-panel-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.industry-chip-panel-count {
  flex: 0 0 auto;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  /* --color-accent text on --color-accent-soft measures ~2.6:1 here (checked
     via computed luminance, not eyeballed) -- fails WCAG AA's 4.5:1 floor
     for normal-size text, same recurring "check a reused color combo
     against its actual surface" bug already documented above for the
     breadcrumb and consent-banner fixes. Using --color-text instead, which
     measures 15:1+ against this light panel background. */
  color: var(--color-text);
  background: var(--color-accent-soft);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.industry-chip-panel-footer {
  margin-top: var(--space-5);
  display: flex;
  justify-content: flex-end;
}
.industry-chip-panel-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}
.industry-chip-panel-link:hover { text-decoration: underline; }

/* -----------------------------------------------------------------
   Trust list -- "what we touch / what we deliberately don't" style
   contrast lists (Healthcare/Legal Trust & Compliance sections and
   similar). Icon color reuses --color-accent on --color-surface,
   the same combination already used for the Industry Challenges
   card icons on this page, so no new contrast pairing is introduced.
----------------------------------------------------------------- */
.trust-list { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.trust-list li { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--color-text-muted); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.trust-list li svg { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; color: var(--color-accent); }

/* -----------------------------------------------------------------
   Industries Hub -- 8-card responsive grid (distinct from Home's
   drag-scroll gallery: the Hub is the primary browse surface for
   all 8 industries, so every card should be visible without
   dragging). Reuses .industry-card/.industry-card-inner as-is,
   just swaps the fixed 280px drag-scroll card width for a grid track.
----------------------------------------------------------------- */
.grid-industries {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .grid-industries { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid-industries { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1440px) {
  .grid-industries { grid-template-columns: repeat(4, 1fr); }
}
.grid-industries .industry-card { width: 100%; }
.grid-industries .industry-card-inner { height: 320px; }

/* "Live" badge for the one industry page that actually exists at
   launch (Healthcare) -- same flagship-card language as
   .service-card-featured-badge, adapted to sit over a photo card.
   .industry-card-inner is already position:relative/overflow:hidden. */
.industry-card-badge {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--color-accent);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 2px var(--space-3);
  border-radius: var(--radius-full);
}

/* -----------------------------------------------------------------
   Package Builder (Services Hub flagship component -- Tier 2
   checkbox selection feeding a Tier 3 consolidated-quote submission).
   State persistence: deliberately NOT persisted across reload
   (localStorage/URL) -- this is a quick pre-submission tool, not a
   saved cart, per architecture Section 9's state-persistence rule.
----------------------------------------------------------------- */
.builder-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}
@media (min-width: 1024px) {
  .builder-layout { grid-template-columns: 1fr 320px; gap: var(--space-8); }
}
.builder-category { margin-bottom: var(--space-6); }
.builder-category:last-child { margin-bottom: 0; }
.builder-category h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.builder-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}
.builder-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  min-height: 48px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color var(--duration-hover) var(--ease-out),
              background-color var(--duration-hover) var(--ease-out);
}
.builder-item:hover { border-color: var(--color-accent); }
.builder-item:focus-within { border-color: var(--color-accent); outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.builder-item input[type="checkbox"] {
  width: 20px; height: 20px; margin-top: 2px;
  accent-color: var(--color-accent);
  flex: 0 0 auto;
}
.builder-item.is-checked { border-color: var(--color-accent); background: var(--color-accent-soft); }
.builder-item span { font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--color-text); }

.builder-summary { position: sticky; top: calc(var(--space-8) + 16px); }
.builder-summary-inner {
  background: var(--color-ink);
  color: var(--color-text-inverted);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-lg);
}
.builder-summary-inner h3 { color: var(--color-text-inverted); font-size: var(--text-lg); }
.builder-summary-inner ul {
  list-style: none; margin: var(--space-4) 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--space-2);
  max-height: 280px; overflow-y: auto;
}
.builder-summary-inner li {
  font-size: var(--text-sm); color: var(--color-text-muted-inverted);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
}
.builder-empty { font-style: italic; }
.builder-remove {
  background: none; border: none; color: var(--color-text-muted-inverted);
  cursor: pointer; font-size: var(--text-lg); line-height: 1; padding: var(--space-1);
  min-width: 24px; min-height: 24px;
}
.builder-remove:hover { color: var(--color-accent); }

/* Mobile sticky summary bar -- Section 11 mobile UX note. Hidden by
   default and on desktop (the sidebar summary is always visible there);
   shown via JS once at least one service is selected on small viewports. */
.builder-sticky-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  align-items: center; justify-content: space-between; gap: var(--space-4);
  background: var(--color-ink); color: var(--color-text-inverted);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
}
.builder-sticky-bar[data-visible="true"] { display: flex; }
@media (min-width: 1024px) {
  .builder-sticky-bar { display: none !important; }
}

.builder-quote-form { margin-top: var(--space-8); scroll-margin-top: 96px; }
.builder-quote-form[hidden] { display: none; }

/* -----------------------------------------------------------------
   3-stat variant of the counter band (used on Service/Industry/
   Location templates, a slimmer row than Home's .grid-stats-4)
----------------------------------------------------------------- */
.grid-stats-3 {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(1, 1fr);
  text-align: center;
}
@media (min-width: 640px) {
  .grid-stats-3 { grid-template-columns: repeat(3, 1fr); }
}

/* -----------------------------------------------------------------
   Hero grid (Home hero -- fixes 2026-09 mobile cramping bug).
   Previously built entirely from Tailwind CDN utility classes
   (`grid md:grid-cols-2 gap-[var(--space-8)]`) with no site.css
   fallback; moved into a real class here so the hero's two-column
   layout and gutter don't depend on the Tailwind Play CDN having
   parsed an arbitrary-value class correctly before first paint.
   Mirrors the existing `.split` convention (single column under
   900px, stretch-aligned two columns above it).
----------------------------------------------------------------- */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
}
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-8); }
}
.hero-section {
  padding-block: var(--space-9) var(--space-8);
}
@media (max-width: 768px) {
  .hero-section { padding-block: var(--space-7) var(--space-6); }
}

/* -----------------------------------------------------------------
   Blog Listing / Blog Post -- post card grid, shared across the
   Blog Listing and any "related posts" module on a single post.
----------------------------------------------------------------- */
.grid-posts {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .grid-posts { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid-posts { grid-template-columns: repeat(3, 1fr); }
}
.post-card { text-decoration: none; color: inherit; display: block; }
.post-card[hidden] { display: none; }
.post-card-image {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 16/10;
  margin-bottom: var(--space-4);
}
.post-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.post-card:hover .post-card-image img, .post-card:focus-visible .post-card-image img { transform: scale(1.04); }
.post-card-category { color: var(--color-accent); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.post-card h3 { margin-top: var(--space-2); font-size: var(--text-lg); }
.post-card-excerpt { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: var(--space-2); line-height: var(--leading-normal); }
.post-card-meta { color: var(--color-text-muted); font-size: var(--text-xs); margin-top: var(--space-3); display: flex; gap: var(--space-2); align-items: center; }

.post-byline { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-5); }
.post-byline-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--color-surface); border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; overflow: hidden; padding: 4px; }
.post-byline-avatar img { width: 100%; height: 100%; object-fit: contain; display: block; }
.post-byline-name { font-weight: 600; font-size: var(--text-sm); line-height: 1.2; }
.post-byline-meta { color: var(--color-text-muted); font-size: var(--text-xs); margin-top: 2px; }
.post-featured-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); align-items: center; }
@media (min-width: 768px) {
  .post-featured-grid { grid-template-columns: 45% 1fr; }
}
.post-featured-image { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 16/11; }
.post-featured-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.post-article { max-width: 720px; margin-inline: auto; }
/* scroll-margin-top clears the sticky .site-header (~88px) when a TOC or
   internal anchor link jumps to a heading, so the heading is not hidden
   underneath the fixed nav bar. */
.post-article h2 { font-size: var(--text-2xl); font-weight: var(--font-weight-bold); margin-top: var(--space-8); margin-bottom: var(--space-3); scroll-margin-top: 100px; }
.post-article h3 { font-size: var(--text-xl); font-weight: var(--font-weight-bold); margin-top: var(--space-6); margin-bottom: var(--space-2); scroll-margin-top: 100px; }
/* Short-paragraph rhythm: 1-2 sentence paragraphs read best with a tighter
   gap than a traditional long-form block, so this is intentionally less
   than --space-4 used elsewhere on the site for prose blocks. */
.post-article p { color: var(--color-text-muted); font-size: var(--text-base); line-height: var(--leading-relaxed); margin-bottom: var(--space-3); }
.post-article strong { color: var(--color-text); }
.post-article ul, .post-article ol { margin: 0 0 var(--space-5); padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.post-article li { color: var(--color-text-muted); line-height: var(--leading-relaxed); }
.post-article li strong { color: var(--color-text); }
.post-article table { margin-bottom: var(--space-5); }

/* Table of contents -- a bordered jump-nav box placed near the top of a
   post, generated automatically from the post's own H2 headings (see
   blog/show.blade.php). Matches the pattern used by Semrush/Ahrefs-style
   long-form posts so a reader can scan and jump to the section they need. */
.post-toc {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-7);
}
.post-toc-title {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.post-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); counter-reset: toc; }
.post-toc li { counter-increment: toc; }
.post-toc li::before { content: counter(toc) "."; color: var(--color-accent); font-weight: 700; margin-right: var(--space-2); }
.post-toc a { color: var(--color-text); font-size: var(--text-sm); font-weight: 600; text-decoration: none; }
.post-toc a:hover { color: var(--color-accent); text-decoration: underline; }

/* Pull-quote / standout-stat block -- a native <blockquote> inside post
   content renders as a large, visually distinct statement, the same role
   a "sidenote" or highlighted stat plays on Ahrefs/Semrush long-form posts.
   Used sparingly: one or two per article, for a genuinely quotable line. */
.post-article blockquote {
  border-left: 3px solid var(--color-accent);
  margin: var(--space-6) 0;
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
  color: var(--color-text);
}
.post-article blockquote p { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; }
.post-key-takeaways {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  margin-bottom: var(--space-7);
}
.post-key-takeaways h4 {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  margin-top: 0;
  margin-bottom: var(--space-4) !important;
  color: var(--color-text);
}
.post-key-takeaways ul {
  margin: 0;
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.post-key-takeaways li {
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

.post-article a:not(.btn) { color: var(--color-accent); text-decoration: underline; }
.post-article .btn-primary,
.post-callout .btn-primary,
a.btn-primary {
  color: #ffffff !important;
  background-color: var(--color-accent) !important;
  text-decoration: none !important;
}
.post-article .btn-primary:hover,
.post-callout .btn-primary:hover,
a.btn-primary:hover {
  background-color: var(--color-accent-hover) !important;
  color: #ffffff !important;
}
.post-article .btn-secondary,
.post-callout .btn-secondary,
a.btn-secondary {
  color: var(--color-accent) !important;
  border: 1px solid var(--color-accent) !important;
  background-color: transparent !important;
  text-decoration: none !important;
}
.post-article .btn-secondary:hover,
.post-callout .btn-secondary:hover,
a.btn-secondary:hover {
  background-color: var(--color-accent-soft) !important;
  color: var(--color-accent) !important;
}

/* Mid-article callout -- a lighter-weight inline CTA distinct from
   the heavier dark card at the bottom of a post, so a longer article
   gets a conversion prompt partway through without CTA fatigue. */
.post-callout {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  background: var(--color-accent-soft);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin: var(--space-7) 0;
}
.post-callout-icon {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--color-accent);
  margin-top: 2px;
}
.post-callout-icon svg { width: 22px; height: 22px; }
.post-callout p { margin: 0; color: var(--color-text); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.post-callout a { font-weight: 600; }