/**
 * ConcreteInfo component patterns — mirrors cmd_app__dock-glm/components.css.
 * Loaded after ci-tokens.css; uses CSS variables from there.
 *
 * Conventions:
 *   - .ci-card     — base elevated surface card
 *   - .ci-card-3d  — ConcreteInfo signature card with 3D hover (kept from current site)
 *   - .ci-btn-*    — button variants (primary | secondary | ghost | danger)
 *   - .ci-badge-*  — small pill labels (brand | success | warning | danger | info)
 *   - .ci-input    — themed form control
 *   - .ci-section  — vertical rhythm helpers
 */

/* ────────────────────────────────────────────────────────────────────────
   BASE TYPOGRAPHY — 15px compact scale (cmd_app directive)
   ──────────────────────────────────────────────────────────────────────── */

html {
  font-family: var(--font-family-sans);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-family-sans);
  font-weight: 400;
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* Override Tailwind's hardcoded font-sans to honor our token. */
.font-sans   { font-family: var(--font-family-sans)    !important; }
.font-heading { font-family: var(--font-family-heading) !important; }
.font-display { font-family: var(--font-family-display) !important; }
.font-mono    { font-family: var(--font-family-mono)    !important; }

/* ────────────────────────────────────────────────────────────────────────
   FOCUS RING — WCAG AA visible focus indicator
   ──────────────────────────────────────────────────────────────────────── */

*:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* ────────────────────────────────────────────────────────────────────────
   CARDS
   ──────────────────────────────────────────────────────────────────────── */

.ci-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-normal),
              transform  var(--transition-normal),
              border-color var(--transition-normal);
}

.ci-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--border-default);
}

.ci-card-header {
  padding: 0.875rem 1.25rem;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-subtle);
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
  font-weight: 600;
  color: var(--text-primary);
}

.ci-card-body { padding: 1.5rem; }
.ci-card-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-secondary);
  border-bottom-left-radius: var(--radius-xl);
  border-bottom-right-radius: var(--radius-xl);
}

/* ConcreteInfo signature card — kept from current site for distinctive look.
   Layered on top of ci-card defaults; uses GPU transform-friendly props. */
.ci-card-3d {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  transform-style: preserve-3d;
  transition: transform 400ms cubic-bezier(.17,.67,.32,1.21),
              box-shadow 400ms ease,
              border-color var(--transition-normal);
}
.ci-card-3d:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl),
              0 30px 60px -12px hsla(14, 77%, 51%, 0.20);
  border-color: var(--color-brand-100);
}

.dark .ci-card,
.dark .ci-card-3d {
  background: var(--bg-elevated);
  border-color: var(--border-subtle);
}

/* ────────────────────────────────────────────────────────────────────────
   BUTTONS — primary / secondary / ghost / danger
   ──────────────────────────────────────────────────────────────────────── */

.ci-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  font-family: var(--font-family-heading);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.025em;
  border-radius: 9999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast),
              color      var(--transition-fast),
              box-shadow var(--transition-fast),
              transform  var(--transition-fast);
  white-space: nowrap;
}

.ci-btn:active { transform: translateY(1px); }

.ci-btn-primary {
  background: var(--color-brand);
  color: var(--text-inverse);
}
.ci-btn-primary:hover {
  background: var(--color-brand-dark);
  box-shadow: var(--shadow-primary);
}

.ci-btn-secondary {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-subtle);
}
.ci-btn-secondary:hover {
  background: var(--bg-secondary);
  border-color: var(--border-default);
}

.ci-btn-ghost {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-default);
}
.ci-btn-ghost:hover {
  background: var(--bg-tertiary);
}

.ci-btn-danger {
  background: var(--color-danger);
  color: var(--text-inverse);
}
.ci-btn-danger:hover { filter: brightness(0.92); }

.ci-btn-sm { padding: 0.4rem 0.875rem; font-size: 0.8125rem; }
.ci-btn-lg { padding: 0.875rem 1.75rem; font-size: 0.9375rem; }

/* ────────────────────────────────────────────────────────────────────────
   BADGES — small pill labels
   ──────────────────────────────────────────────────────────────────────── */

.ci-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 9999px;
  letter-spacing: 0.025em;
  white-space: nowrap;
}

.ci-badge-brand   { background: var(--color-brand-100);  color: var(--color-brand-dark); }
.ci-badge-success { background: var(--color-success-light); color: var(--color-success); }
.ci-badge-warning { background: var(--color-warning-light); color: var(--color-warning); }
.ci-badge-danger  { background: var(--color-danger-light);  color: var(--color-danger); }
.ci-badge-info    { background: var(--color-info-light);    color: var(--color-info); }

.dark .ci-badge-brand   { background: hsla(14, 77%, 51%, 0.18);  color: hsl(14, 80%, 70%); }
.dark .ci-badge-success { background: hsla(159, 64%, 30%, 0.25); color: hsl(159, 50%, 70%); }
.dark .ci-badge-warning { background: hsla(45, 93%, 30%, 0.25);  color: hsl(45, 90%, 70%); }
.dark .ci-badge-danger  { background: hsla(0, 84%, 30%, 0.25);   color: hsl(0, 80%, 70%); }
.dark .ci-badge-info    { background: hsla(199, 89%, 30%, 0.25); color: hsl(199, 80%, 70%); }

/* ────────────────────────────────────────────────────────────────────────
   INPUTS — themed form controls
   ──────────────────────────────────────────────────────────────────────── */

.ci-input,
.ci-textarea,
.ci-select {
  width: 100%;
  padding: 0.625rem 0.875rem;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-family-sans);
  font-size: 0.9375rem;
  transition: border-color var(--transition-fast),
              box-shadow   var(--transition-fast);
}

.ci-input:focus,
.ci-textarea:focus,
.ci-select:focus {
  border-color: var(--color-brand);
  box-shadow: var(--focus-ring);
  outline: none;
}

.ci-input::placeholder,
.ci-textarea::placeholder { color: var(--text-tertiary); }

/* ────────────────────────────────────────────────────────────────────────
   SECTION RHYTHM
   ──────────────────────────────────────────────────────────────────────── */

.ci-section { padding: 5rem 0; }
@media (max-width: 768px) {
  .ci-section { padding: 3rem 0; }
}

/* ────────────────────────────────────────────────────────────────────────
   REVEAL ANIMATIONS — kept from current site
   ──────────────────────────────────────────────────────────────────────── */

.ci-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.ci-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.ci-reveal-left  { opacity: 0; transform: translateX(-28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.ci-reveal-right { opacity: 0; transform: translateX( 28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.ci-reveal-left.is-visible,
.ci-reveal-right.is-visible { opacity: 1; transform: translateX(0); }

/* ────────────────────────────────────────────────────────────────────────
   NAV LINK with animated underline (kept from current site)
   ──────────────────────────────────────────────────────────────────────── */

.ci-nav-link {
  position: relative;
  font-family: var(--font-family-heading);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.025em;
  transition: color var(--transition-fast);
}
.ci-nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--color-brand);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--transition-normal);
}
.ci-nav-link:hover::after,
.ci-nav-link.is-active::after { transform: scaleX(1); }

/* ────────────────────────────────────────────────────────────────────────
   GRADIENT TEXT — used in display headings
   ──────────────────────────────────────────────────────────────────────── */

.ci-text-gradient {
  background: linear-gradient(120deg, var(--color-brand) 0%, var(--color-brand-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ────────────────────────────────────────────────────────────────────────
   MARQUEE — kept for brand distinctiveness
   ──────────────────────────────────────────────────────────────────────── */

.ci-marquee {
  display: flex;
  width: max-content;
  animation: ci-marquee 30s linear infinite;
}
.ci-marquee:hover { animation-play-state: paused; }
@keyframes ci-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ────────────────────────────────────────────────────────────────────────
   DARK MODE TOGGLE
   ──────────────────────────────────────────────────────────────────────── */

.ci-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  transition: background var(--transition-fast),
              color var(--transition-fast),
              border-color var(--transition-fast);
  cursor: pointer;
}
.ci-theme-toggle:hover {
  background: var(--bg-secondary);
  color: var(--color-brand);
  border-color: var(--color-brand-100);
}
.ci-theme-toggle .ci-sun { display: none; }
.dark .ci-theme-toggle .ci-sun { display: block; }
.dark .ci-theme-toggle .ci-moon { display: none; }

/* ────────────────────────────────────────────────────────────────────────
   SCROLLBAR — themed
   ──────────────────────────────────────────────────────────────────────── */

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-tertiary); }
::-webkit-scrollbar-thumb {
  background: var(--color-brand);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--color-brand-dark); }

/* ────────────────────────────────────────────────────────────────────────
   SIGNATURE STYLES — ConcreteInfo distinctive effects, migrated from
   the previous inline `<style>` block of index.html so every page can
   share them. All values use design tokens (no hardcoded brand colors).
   ──────────────────────────────────────────────────────────────────────── */

/* Gradient accent text (brand).
   Two name variants because the historical pages used both spellings:
     .ci-text-gradient   — canonical (new pages)
     .text-gradient      — index.html (legacy inline)
     .gradient-text      — 4 other pages (legacy) */
.ci-text-gradient,
.text-gradient,
.gradient-text {
  background: linear-gradient(120deg, var(--color-brand) 0%, hsl(14, 90%, 70%) 60%, hsl(14, 85%, 80%) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* Concrete texture overlay (hero section base).
   Fractal-noise SVG inlined as data URI for zero extra requests. */
.ci-concrete-overlay,
.concrete-overlay {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E"),
    linear-gradient(160deg, var(--color-gray-950) 0%, #1c1c1e 50%, #2a2a2a 100%);
}

/* Section diagonal clip — for hero/CTA splits. */
.ci-clip-diagonal,
.clip-diagonal       { clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); }
.ci-clip-diagonal-top,
.clip-diagonal-top   { clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 100%); }

/* Card 3D hover — the signature card lift.
   Avoids `.ci-card-3d` (defined earlier in this file for component
   variants) — distinct name preserved for back-compat. */
.ci-card-3d-hover,
.card-3d {
  transition: transform 0.4s cubic-bezier(.17,.67,.32,1.21),
              box-shadow 0.4s ease;
  transform-style: preserve-3d;
}
.ci-card-3d-hover:hover,
.card-3d:hover {
  transform: translateY(-10px) rotateX(3deg);
  box-shadow: 0 30px 60px -12px hsla(14, 77%, 51%, 0.25);
}

/* Hexagon clip — geometry badge / divider. */
.ci-hexagon,
.hexagon { clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }

/* Orange left border accent — flagged highlight for cards/list items. */
.ci-border-l-accent,
.border-l-accent { border-left: 4px solid var(--color-brand); }

/* Reveal animations (Intersection Observer toggles `.visible`).
   Canonical `.ci-reveal-*` was defined earlier but used the same names —
   these unprefixed variants now supersede (more variants supported). */
.ci-reveal,
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.ci-reveal.is-visible,
.ci-reveal.visible,
.reveal.is-visible,
.reveal.visible { opacity: 1; transform: translateY(0); }

.ci-reveal-left,
.reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.ci-reveal-left.is-visible,
.reveal-left.visible { opacity: 1; transform: translateX(0); }

.ci-reveal-right,
.reveal-right {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.ci-reveal-right.is-visible,
.reveal-right.visible { opacity: 1; transform: translateX(0); }

.ci-reveal-scale,
.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.ci-reveal-scale.is-visible,
.reveal-scale.visible { opacity: 1; transform: scale(1); }

/* Reveal fallbacks — ensure content is always visible to:
   - Users who prefer reduced motion (vestibular disorders, focus)
   - Print engines / link-preview crawlers
   - Browsers with JS disabled
   - Headless browsers / screenshot tools where IntersectionObserver
     never fires while the page is being captured
   Without these, elements would stay opacity:0 forever in those cases.
   The timeout-based reveal is set by the inline `scripts/reveal-fallback.js`
   shim which adds `.js-revealed` on `<html>` ~600ms after DOMContentLoaded. */
@media (prefers-reduced-motion: reduce) {
  .ci-reveal, .ci-reveal-left, .ci-reveal-right, .ci-reveal-scale,
  .reveal,    .reveal-left,    .reveal-right,    .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
/* Belt-and-braces: if the IntersectionObserver never marks a `.reveal*`
   element as `.visible`, the JS fallback adds `.js-revealed` to <html>
   after ~600ms so everything becomes visible. */
.js-revealed .ci-reveal,
.js-revealed .ci-reveal-left,
.js-revealed .ci-reveal-right,
.js-revealed .ci-reveal-scale,
.js-revealed .reveal,
.js-revealed .reveal-left,
.js-revealed .reveal-right,
.js-revealed .reveal-scale {
  opacity: 1 !important;
  transform: none !important;
}
@media print {
  .ci-reveal, .ci-reveal-left, .ci-reveal-right, .ci-reveal-scale,
  .reveal,    .reveal-left,    .reveal-right,    .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
  }
}
/* `.no-js` is added to <html> by an inline script at the top of every page.
   If JS is disabled, the reveal IntersectionObserver never runs, so reveal
   elements would stay opacity:0 forever. Force them visible. */
.no-js .ci-reveal,
.no-js .ci-reveal-left,
.no-js .ci-reveal-right,
.no-js .ci-reveal-scale,
.no-js .reveal,
.no-js .reveal-left,
.no-js .reveal-right,
.no-js .reveal-scale {
  opacity: 1 !important;
  transform: none !important;
}

/* Reveal delays — apply alongside any .reveal* class. */
.ci-delay-100, .delay-100 { transition-delay: 0.1s; }
.ci-delay-200, .delay-200 { transition-delay: 0.2s; }
.ci-delay-300, .delay-300 { transition-delay: 0.3s; }
.ci-delay-400, .delay-400 { transition-delay: 0.4s; }
.ci-delay-500, .delay-500 { transition-delay: 0.5s; }

/* Animated underline nav link (legacy pattern). */
.ci-nav-link-anim,
.nav-link { position: relative; }
.ci-nav-link-anim::after,
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  display: block;
  height: 2px;
  width: 0;
  background: var(--color-brand);
  transition: width 0.3s ease;
}
.ci-nav-link-anim:hover::after,
.nav-link:hover::after { width: 100%; }

/* Stat number glow — used on the four metrics row. */
.ci-stat-glow,
.stat-glow { text-shadow: 0 0 40px hsla(14, 77%, 51%, 0.4); }

/* Service card icon ring (paired with .card-3d). */
.ci-icon-ring,
.icon-ring {
  border: 2px solid hsla(14, 77%, 51%, 0.3);
  transition: all 0.3s ease;
}
.card-3d:hover .icon-ring,
.ci-card-3d-hover:hover .ci-icon-ring,
.ci-card-3d-hover:hover .icon-ring,
.card-3d:hover .ci-icon-ring {
  border-color: var(--color-brand);
  background: hsla(14, 77%, 51%, 0.1);
}

/* Integrity banner pulse — drives the central compass icon. */
@keyframes ci-integrity-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.15); }
  50%      { box-shadow: 0 0 0 12px rgba(255,255,255,0); }
}
.ci-integrity-icon,
.integrity-icon { animation: ci-integrity-pulse 2.5s ease infinite; }

/* Client marquee — KEY FIX: define `marquee` keyframe name in addition
   to `ci-marquee`; index.html's old animation reference was animation:
   marquee 30s linear infinite, which was silently falling back to no
   animation. Both names now resolve to the same timeline. */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.ci-marquee-track,
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
}
.ci-marquee-track:hover,
.marquee-track:hover { animation-play-state: paused; }

/* Process step connector line (between numbered steps). */
.ci-step-line,
.step-line {
  background: linear-gradient(90deg, var(--color-brand), hsla(14, 77%, 51%, 0.15));
}

/* WhatsApp floating CTA button — gradient green. */
.ci-whatsapp-btn,
.whatsapp-btn {
  background: linear-gradient(135deg, #25d366, #128c7e);
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
}

/* Quality-factor card — slide-right on hover with brand left-border. */
.ci-q-factor,
.q-factor {
  transition: all 0.35s ease;
  border-left: 3px solid transparent;
}
.ci-q-factor:hover,
.q-factor:hover {
  border-left-color: var(--color-brand);
  transform: translateX(6px);
}

/* Timeline vertical connector line (about page). */
.ci-timeline-line,
.timeline-line {
  background: linear-gradient(to bottom, var(--color-brand), hsla(14, 77%, 51%, 0.15));
}

/* Value card hover (about page — mirrors q-factor). */
.ci-value-item,
.value-item {
  border-left: 3px solid transparent;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.ci-value-item:hover,
.value-item:hover {
  border-left-color: var(--color-brand);
  transform: translateX(6px);
}

/* Recognition row — solid brand top border. */
.ci-recognition-item,
.recognition-item { border-top: 3px solid var(--color-brand); }

/* Team card — gray underline, flips to brand on hover. */
.ci-team-card,
.team-card {
  border-bottom: 2px solid var(--bg-tertiary);
  transition: border-color 0.3s ease;
}
.ci-team-card:hover,
.team-card:hover { border-bottom-color: var(--color-brand); }

/* Nav link with permanent underline (active state). */
.ci-nav-link-active::after,
.nav-link-active::after {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-brand);
}

/* Form range slider — themed for the calculators page.
   Track uses bg-tertiary for the resting rail; thumb is the brand orange. */
input[type="range"] {
  -webkit-appearance: none;
  height: 8px;
  border-radius: 4px;
  background: var(--bg-tertiary);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-brand);
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-brand);
  cursor: pointer;
  border: none;
}

/* ────────────────────────────────────────────────────────────────────────
   LEGACY ALIASES — back-compat for older ad-hoc class names used in
   the current site so internal pages keep working while migrating.
   ──────────────────────────────────────────────────────────────────────── */

.font-display { font-family: var(--font-family-display) !important; }

/* ────────────────────────────────────────────────────────────────────────
   SERVICE DETAIL — Industrial blueprint / engineering datasheet system
   ────────────────────────────────────────────────────────────────────────
   Built for /services/*.html pages. The aesthetic commitment for service
   detail is "drawing-board technical": monochrome blueprint background,
   monospace section numbering (§ 01), isometric technical drawings,
   dimension-line callouts, monospace labelled crosshairs.
   Tonal: dark-mode native. Looks correct on dark; in light mode the
   blueprint grid stays dark by overlaying a section background.
*/

/* Blueprint background — fine + coarse grid in brand orange over ink. */
.ci-blueprint {
  position: relative;
  background-color: #0a0e16;
  background-image:
    /* fine grid */
    repeating-linear-gradient(0deg,  hsla(14, 77%, 51%, 0.07) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, hsla(14, 77%, 51%, 0.07) 0 1px, transparent 1px 32px),
    /* coarse grid */
    repeating-linear-gradient(0deg,  hsla(14, 77%, 51%, 0.13) 0 1px, transparent 1px 128px),
    repeating-linear-gradient(90deg, hsla(14, 77%, 51%, 0.13) 0 1px, transparent 1px 128px),
    /* base radial vignette */
    radial-gradient(ellipse at center, #131825 0%, #0a0e16 70%);
}
.ci-blueprint::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at center, hsla(14, 77%, 51%, 0.4) 0 1px, transparent 1.5px);
  background-size: 128px 128px;
  opacity: 0.6;
  pointer-events: none;
}
.ci-blueprint > * { position: relative; z-index: 1; }

/* § Section-number label — small, monospace, brand orange, letter-spaced. */
.ci-section-no {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-family-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-brand);
}
.ci-section-no::before {
  content: '';
  display: inline-block;
  width: 1.5rem; height: 1px;
  background: var(--color-brand);
  vertical-align: middle;
}

/* Section title — display font, condensed, strong vertical rhythm. */
.ci-section-title {
  font-family: var(--font-family-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 0.75rem 0 1rem;
}

/* Crosshair marker — section divider / map-pin style. */
.ci-crosshair {
  display: inline-block;
  width: 14px; height: 14px;
  position: relative;
  vertical-align: middle;
  color: var(--color-brand);
}
.ci-crosshair::before,
.ci-crosshair::after {
  content: '';
  position: absolute;
  background: currentColor;
}
.ci-crosshair::before {
  left: 50%; top: 0;
  width: 1px; height: 100%;
  transform: translateX(-50%);
}
.ci-crosshair::after {
  top: 50%; left: 0;
  height: 1px; width: 100%;
  transform: translateY(-50%);
}
.ci-crosshair > span {
  position: absolute;
  inset: 3px;
  border: 1px solid currentColor;
  border-radius: 50%;
}

/* Dimension line — horizontal "drawing" with monospace measurement label. */
.ci-dim {
  position: relative;
  display: inline-block;
  font-family: var(--font-family-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--color-brand);
  padding: 0 0.5rem;
}
.ci-dim::before,
.ci-dim::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 6px; height: 6px;
  border-left: 1px solid var(--color-brand);
  border-top: 1px solid var(--color-brand);
  transform: translateY(-50%) rotate(-45deg);
}
.ci-dim::before { left: -8px; }
.ci-dim::after  { right: -8px; transform: translateY(-50%) rotate(135deg); }

/* Big numerical stat for service-page metric strips. */
.ci-stat-big {
  font-family: var(--font-family-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.ci-stat-big em {
  font-style: normal;
  color: var(--color-brand);
  font-size: 0.5em;
  margin-left: 0.25rem;
  vertical-align: top;
}
.ci-stat-label {
  font-family: var(--font-family-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-top: 0.5rem;
}

/* Process step — numbered card with vertical rail. */
.ci-process-step {
  position: relative;
  padding: 1.5rem 1.5rem 1.5rem 5rem;
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-normal),
              transform  var(--transition-normal);
}
.ci-process-step:hover {
  border-color: var(--color-brand-100);
  transform: translateY(-2px);
}
.ci-process-step .ci-step-num {
  position: absolute;
  left: 1.25rem; top: 1.25rem;
  width: 2.75rem; height: 2.75rem;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-family-display);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--text-primary);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-default);
  border-radius: 50%;
}
.ci-process-step:hover .ci-step-num {
  color: var(--color-brand);
  border-color: var(--color-brand);
}

/* Vertical connector rail between process steps on desktop. */
@media (min-width: 768px) {
  .ci-process-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: calc(1.25rem + 1.375rem - 1px);
    top: 100%;
    width: 2px; height: 1rem;
    background: linear-gradient(180deg, var(--color-brand) 0%, hsla(14, 77%, 51%, 0.15) 100%);
  }
}

/* Deliverable card — code-style label + title + description. */
.ci-deliverable {
  position: relative;
  padding: 1.25rem 1.25rem 1.25rem 1.5rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  transition: border-color var(--transition-normal);
}
.ci-deliverable::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--color-brand);
  border-radius: 3px 0 0 3px;
}
.ci-deliverable:hover { border-color: var(--border-default); }
.ci-deliverable-code {
  display: inline-block;
  font-family: var(--font-family-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--color-brand);
  background: hsla(14, 77%, 51%, 0.08);
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}
.ci-deliverable-title {
  font-family: var(--font-family-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}
.ci-deliverable-desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Spec sheet row — two-column key/value with monospace key. */
.ci-spec-row {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 1rem;
  padding: 0.625rem 0;
  border-bottom: 1px dashed var(--border-subtle);
}
.ci-spec-row:last-child { border-bottom: 0; }
.ci-spec-key {
  font-family: var(--font-family-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.ci-spec-val { color: var(--text-primary); font-size: 0.875rem; }

/* Hexagon detail badge — service-page chapter tag. */
.ci-hex-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.375rem 0.75rem 0.375rem 0.5rem;
  background: hsla(14, 77%, 51%, 0.12);
  color: var(--color-brand);
  border: 1px solid hsla(14, 77%, 51%, 0.3);
  border-radius: 9999px;
  font-family: var(--font-family-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.ci-hex-badge .ci-hex-dot {
  width: 8px; height: 8px;
  background: var(--color-brand);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

/* ═══════════════════════════════════════════════════════════════════
   Tiered Hero System — Tier 1 (Showcase) + Tier 3 (Functional)
   Added: 2026-07-04 — design sweep spec
   ═══════════════════════════════════════════════════════════════════ */

/* Tier 3 — Compact blueprint strip.
   Sits above the page's primary content on services.html / contact.html /
   calculators.html. Establishes the blueprint language without a full-bleed hero. */
.ci-hero-compact {
  position: relative;
  background-color: #0a0e16;
  background-image:
    repeating-linear-gradient(0deg,  hsla(14, 77%, 51%, 0.07) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, hsla(14, 77%, 51%, 0.07) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(0deg,  hsla(14, 77%, 51%, 0.13) 0 1px, transparent 1px 128px),
    repeating-linear-gradient(90deg, hsla(14, 77%, 51%, 0.13) 0 1px, transparent 1px 128px),
    radial-gradient(ellipse at center, #131825 0%, #0a0e16 70%);
  padding: 3rem 0;
  overflow: hidden;
}
.ci-hero-compact::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at center, hsla(14, 77%, 51%, 0.4) 0 1px, transparent 1.5px);
  background-size: 128px 128px;
  opacity: 0.5;
  pointer-events: none;
}
.ci-hero-compact > * { position: relative; z-index: 1; }

/* Tier 1 — Showcase grid (Home page).
   Three-column layout for the 3-up isometric SVG. */
.ci-tier1-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .ci-tier1-grid { grid-template-columns: 1fr; }
}

/* Tier 1 — Spec tile (larger than .ci-dim).
   Used for the 3 dimension-callout tiles in the Home hero. */
.ci-tier1-spec {
  font-family: var(--font-family-mono, 'SF Mono', 'Fira Code', monospace);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-brand, #e5461f);
}

/* ────────────────────────────────────────────────────────────────────────
   SITE SEARCH — overlay, results, highlight
   ──────────────────────────────────────────────────────────────────────── */

/* Match highlight inside result titles and summaries. */
.ci-search-hl {
  background: hsl(14, 77%, 51%, 0.18);  /* brand-tinted */
  color: var(--color-brand, #e5461f);
  padding: 0 2px;
  border-radius: 3px;
  font-weight: 600;
}

/* Suggestion chip in the "no results" empty state. */
.ci-search-suggest {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  border-radius: 9999px;
  border: 1px solid var(--border-subtle, #e3e3e3);
  background: var(--bg-secondary, #ffffff);
  color: var(--text-primary, #464646);
  font-size: 0.75rem;
  font-weight: 500;
  transition: all 150ms ease;
}
.ci-search-suggest:hover {
  border-color: var(--color-brand, #e5461f);
  color: var(--color-brand, #e5461f);
  background: hsl(14, 77%, 51%, 0.05);
}

/* The currently-focused result (keyboard ↑/↓ navigation) gets a
   visible ring so users can see where they are. The hover state is
   already handled by Tailwind; this is the *keyboard* fallback. */
.ci-search-result[data-active="true"] {
  border-color: var(--color-brand, #e5461f) !important;
  background: hsl(14, 77%, 51%, 0.06);
  outline: none;
}