/* ==========================================================================
   Kreative D-Signs — styles.css
   Apple-inspired visual system: alternating light/dark sections, a single
   system font stack, generous whitespace, restrained motion, and the
   Kreative D-Signs navy + orange brand carried as accent, not background.
   ========================================================================== */

/* ---------- Design Tokens ---------- */
:root {
  /* Brand */
  --color-navy: #0B1E3D;
  --color-navy-light: #16305C;
  --color-ink: #06101F;        /* darkest — footer, deepest dark bands */
  --color-accent: #FF5C00;
  --color-accent-dark: #E04E00;
  --color-accent-light: #FFE4D1;

  /* Light-section surfaces (Apple's off-white system) */
  --color-white: #FFFFFF;
  --color-surface: #F5F5F7;    /* Apple's signature light gray */
  --color-surface-alt: #E8E8ED;

  /* Text */
  --color-text: #1D1D1F;             /* near-black, not pure black */
  --color-text-muted: #6E6E73;
  --color-text-inverse: #F5F5F7;
  --color-text-muted-inverse: #98A2B8;

  /* Borders */
  --color-border: #D2D2D7;
  --color-border-inverse: rgba(255, 255, 255, 0.14);

  --color-success: #1E8E5A;
  --color-error: #D63A2E;

  /* Typography — system stack, Apple-style: one family, weight/size carry
     the hierarchy. No web-font network dependency. */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Spacing */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-2xl: 96px;
  --space-3xl: 84px; /* 2026-09-29: tightened from 120px — owner reported too much dead space between sections site-wide */

  /* Radius — Apple-premium, generously rounded */
  --radius-sm: 12px;
  --radius-md: 22px;
  --radius-lg: 32px;
  --radius-pill: 980px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 1px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 20px 40px -12px rgba(6, 16, 31, 0.18);
  --shadow-lg: 0 30px 60px -15px rgba(6, 16, 31, 0.35);

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 350ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 750ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Containers */
  --container-max: 1280px;
  --container-narrow: 760px;
  --header-height: 52px;
}

/* ---------- Reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* overflow-x: hidden (its previous value here) also forces overflow-y
     to a non-visible computed value per spec, which turns body into its
     own scroll container and breaks position:sticky everywhere on the
     page. overflow-x: clip blocks the same horizontal bleed without
     that side effect, so sticky (used by the pinned process section)
     works correctly. */
  overflow-x: clip;
  overflow-y: visible;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-navy);
  color: #fff;
  padding: 12px 20px;
  z-index: 1000;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

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

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 24px; }

/* ---------- Typography ---------- */
.eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

.section-title {
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--color-text);
  max-width: 820px;
}
.section-dark .section-title,
.section-dark .eyebrow { color: var(--color-text-inverse); }
.section-dark .eyebrow { color: var(--color-accent); }

.section-lede {
  font-size: clamp(17px, 1.6vw, 20px);
  color: var(--color-text-muted);
  max-width: 620px;
  margin-top: var(--space-sm);
  line-height: 1.5;
}
.section-dark .section-lede { color: var(--color-text-muted-inverse); }

/* ---------- Section backgrounds — the light/dark rhythm ---------- */
.section-light { background: var(--color-white); }
.section-surface { background: var(--color-surface); }
.section-dark {
  background: var(--color-navy);
  color: var(--color-text-inverse);
}
.section-ink {
  background: var(--color-ink);
  color: var(--color-text-inverse);
}

section { padding: var(--space-3xl) 0; }
@media (max-width: 900px) { section { padding: var(--space-xl) 0; } }
@media (max-width: 599px) { section { padding: 44px 0; } }

/* ---------- Stats strip — real numbers, not filler ---------- */
.stats-strip { padding: var(--space-xl) 0; border-bottom: 1px solid var(--color-border); }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat-item {
  padding: 0 var(--space-md);
  border-left: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat-item:first-child { border-left: none; padding-left: 0; }
.stat-number {
  font-size: clamp(32px, 4vw, 46px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-navy);
  line-height: 1;
}
.stat-star { color: var(--color-accent); font-size: 0.55em; vertical-align: super; margin-left: 2px; }
.stat-label { font-size: 14px; color: var(--color-text-muted); line-height: 1.4; }
.stats-grid .stat-item:nth-child(1) { transition-delay: 0ms; }
.stats-grid .stat-item:nth-child(2) { transition-delay: 90ms; }
.stats-grid .stat-item:nth-child(3) { transition-delay: 180ms; }
.stats-grid .stat-item:nth-child(4) { transition-delay: 270ms; }
@media (max-width: 760px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-lg); }
  .stat-item:nth-child(2n+1) { border-left: none; padding-left: 0; }
}

/* ---------- Buttons — Apple pill system ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: var(--radius-pill);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast),
    border-color var(--transition-fast), transform var(--transition-fast);
  min-height: 48px;
  border: 1px solid transparent;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--color-accent);
  color: #fff;
}
.btn-primary:hover { background: var(--color-accent-dark); }

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

.btn-secondary-inverse {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}
.btn-secondary-inverse:hover { background: rgba(255, 255, 255, 0.18); border-color: #fff; }

.btn-sm { padding: 9px 20px; font-size: 14px; min-height: 36px; }

/* Two-piece CTA — pill label + a small attached circle carrying the arrow,
   instead of a single flat button. The circle nudges toward "launch"
   (rotates up-right) on hover — a small, deliberate bit of motion instead
   of everything just fading in on scroll. */
.btn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-right: -8px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1), background var(--transition-fast);
}
.btn-arrow svg { width: 13px; height: 13px; }
.btn:has(.btn-arrow) { padding-right: 10px; }
.btn-primary .btn-arrow { background: rgba(255, 255, 255, 0.24); color: #fff; }
.btn-secondary-inverse .btn-arrow { background: rgba(255, 255, 255, 0.2); color: #fff; }
.btn:hover .btn-arrow { transform: rotate(45deg) scale(1.06); }
.btn-primary:hover .btn-arrow { background: rgba(255, 255, 255, 0.32); }
@media (prefers-reduced-motion: reduce) {
  .btn-arrow { transition: none; }
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--color-text);
  transition: background var(--transition-fast);
}
.icon-btn:hover { background: var(--color-surface); }
.icon-btn svg { width: 18px; height: 18px; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-navy);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.text-link:hover { color: var(--color-accent); border-color: currentColor; }
.section-dark .text-link, .section-ink .text-link { color: #fff; }
.section-dark .text-link:hover, .section-ink .text-link:hover { color: var(--color-accent); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
}
.logo {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-navy);
  white-space: nowrap;
}
.logo-accent { color: var(--color-accent); }
.footer-brand .logo { color: #fff; }
.footer-brand .logo-accent { color: var(--color-accent); }

.primary-nav ul {
  display: flex;
  gap: var(--space-lg);
}
.primary-nav a {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  padding: 6px 0;
  position: relative;
  transition: color var(--transition-fast);
}
.primary-nav a:hover { color: var(--color-navy); }
.primary-nav a.is-active,
.primary-nav a[aria-current="page"] { color: var(--color-accent); }

/* Liquid navigation indicator — see effects.js SiteFX.liquidNav().
   A pill glued to the bottom of the nav that glides + briefly stretches
   between links; JS drives left/width via transform, CSS only owns the
   easing so the two never fight over timing. */
.primary-nav { position: relative; }
.nav-liquid-indicator {
  position: absolute;
  left: 0;
  bottom: -7px;
  height: 3px;
  width: 0;
  border-radius: 999px;
  background: var(--color-accent);
  opacity: 0;
  pointer-events: none;
  transform: translateX(0);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              width 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.2s ease;
  will-change: transform, width;
}
.nav-liquid-indicator.is-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .nav-liquid-indicator { transition: opacity 0.2s ease; }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.menu-toggle {
  display: none;
  width: 32px;
  height: 32px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.menu-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-navy);
  border-radius: 2px;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

/* ---------- Mobile menu ---------- */
.mobile-menu {
  position: fixed;
  inset: var(--header-height) 0 0 0;
  background: var(--color-white);
  z-index: 490;
  transform: translateX(100%);
  transition: transform var(--transition-base);
  overflow-y: auto;
  padding: var(--space-lg) var(--space-md);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.mobile-menu.is-open { transform: translateX(0); }
.mobile-menu nav ul { display: flex; flex-direction: column; gap: 4px; }
.mobile-menu nav a {
  display: block;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  padding: 14px 4px;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}
.mobile-menu-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-top: var(--space-lg);
}
.mobile-menu-actions .btn { width: 100%; }

/* 2026-11-07: LED Control added to the menu: 8 links (longer in Spanish) no longer fit below ~1400px, so the menu button takes over there */
.primary-nav a { white-space: nowrap; }
@media (max-width: 1400px) {
  .primary-nav { display: none; }
  .menu-toggle { display: flex; }
}
@media (max-width: 860px) {
  .header-actions .icon-btn { display: none; }
}
@media (max-width: 560px) {
  .header-actions .btn { display: none; }
  .logo { font-size: 15px; }
}
@media (min-width: 1401px) {
  .mobile-menu { display: none; }
}

/* ==========================================================================
   HERO — full-bleed dark section, real photography, scroll parallax.
   Simple, confident, Apple-product-page composition: no scroll-driven
   build sequence, no blueprint illustration — a strong photo, a strong
   headline, two clear actions.
   ========================================================================== */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  background: var(--color-ink);
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-bg picture,
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 20% 24%;
  will-change: transform;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(6, 16, 31, 0.55) 0%, rgba(6, 16, 31, 0.35) 38%, rgba(6, 16, 31, 0.75) 100%),
    linear-gradient(90deg, rgba(6, 16, 31, 0.75) 0%, rgba(6, 16, 31, 0.25) 55%, rgba(6, 16, 31, 0.15) 100%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  /* Vertical only — keeps .container's 24px side padding so the hero copy
     never touches the screen edge on mobile. */
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}
.hero .eyebrow { color: var(--color-accent); }
.hero-headline {
  font-size: clamp(40px, 7vw, 92px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: #fff;
  max-width: 15ch;
}
/* Word-by-word entrance — each word rides in on the same .reveal/.is-visible
   trigger already used elsewhere on the page, just staggered per word so
   the headline reads as it appears instead of popping in as one block. */
.hero-headline .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
  filter: blur(6px);
  transition: opacity 650ms ease, transform 650ms cubic-bezier(0.16, 1, 0.3, 1), filter 650ms ease;
}
.hero-headline.is-visible .word { opacity: 1; transform: translateY(0); filter: blur(0); }
.hero-headline .word:nth-child(1) { transition-delay: 80ms; }
.hero-headline .word:nth-child(2) { transition-delay: 200ms; }
.hero-headline .word:nth-child(4) { transition-delay: 340ms; }
.hero-headline .word:nth-child(5) { transition-delay: 460ms; }
@media (prefers-reduced-motion: reduce) {
  .hero-headline .word { transition: none; opacity: 1; transform: none; filter: none; }
}
.hero-tagline {
  margin-top: var(--space-md);
  font-size: clamp(18px, 2vw, 24px);
  color: var(--color-text-muted-inverse);
  max-width: 40ch;
}
.hero-actions {
  margin-top: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.hero-stats {
  margin-top: var(--space-lg);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.65);
}
@media (max-width: 599px) { .hero-stats { font-size: 12.5px; } }

.scroll-cue {
  position: absolute;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 42px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 14px;
  z-index: 2;
}
.scroll-cue span {
  display: block;
  width: 4px;
  height: 8px;
  background: var(--color-accent);
  border-radius: 2px;
  margin: 6px auto 0;
  animation: scrollcue 1.8s infinite;
}
@keyframes scrollcue {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(14px); opacity: 0; }
  100% { opacity: 0; }
}
@media (max-width: 700px) { .scroll-cue { display: none; } }

/* Hero entrance — a single, short fade/slide on load. */
.hero .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--transition-slow), transform var(--transition-slow); }
.hero .reveal.is-visible { opacity: 1; transform: translateY(0); }
.hero .hero-actions.reveal { transition-delay: 80ms; }
.hero .hero-tagline.reveal { transition-delay: 40ms; }

/* ---------- Generic scroll reveal (used site-wide) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px) scale(0.99);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); }

/* No-JS fallback — every entrance above starts hidden and is only
   revealed by script.js adding .is-visible. Each page's <head> adds .js to
   <html> before first paint; without it (JS disabled), show everything in
   its final state instead of leaving the page blank. */
html:not(.js) .reveal,
html:not(.js) .hero-headline .word,
html:not(.js) .footer-grid.reveal .footer-col,
html:not(.js) .contact-details.reveal .contact-detail,
html:not(.js) .division-media,
html:not(.js) .service-category-media,
html:not(.js) .service-category-body {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* Footer columns — fade up one after another rather than all at once. */
.footer-grid.reveal .footer-col {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.footer-grid.reveal.is-visible .footer-col { opacity: 1; transform: translateY(0); }
.footer-grid.reveal .footer-col:nth-child(1) { transition-delay: 0ms; }
.footer-grid.reveal .footer-col:nth-child(2) { transition-delay: 90ms; }
.footer-grid.reveal .footer-col:nth-child(3) { transition-delay: 180ms; }
.footer-grid.reveal .footer-col:nth-child(4) { transition-delay: 270ms; }

/* Contact detail rows — same idea, each item settles in a beat after the
   one before it. */
.contact-details.reveal .contact-detail {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 550ms ease, transform 550ms cubic-bezier(0.16, 1, 0.3, 1);
}
.contact-details.reveal.is-visible .contact-detail { opacity: 1; transform: translateY(0); }
.contact-details.reveal .contact-detail:nth-child(1) { transition-delay: 0ms; }
.contact-details.reveal .contact-detail:nth-child(2) { transition-delay: 90ms; }
.contact-details.reveal .contact-detail:nth-child(3) { transition-delay: 180ms; }
.contact-details.reveal .contact-detail:nth-child(4) { transition-delay: 270ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .hero .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .footer-grid.reveal .footer-col,
  .contact-details.reveal .contact-detail { opacity: 1 !important; transform: none !important; }
  .scroll-cue span { animation: none; }
  .hero-bg img { transform: none !important; }
}

/* ---------- Divisions ---------- */
.divisions { background: var(--color-surface); }
.divisions-grid {
  margin-top: var(--space-xl);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}
.division-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 0;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.division-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }

/* Photo (or graphic) header — a matted, gallery-style frame rather than a
   flat pasted-on image. The photo itself stays clean (no dark wash, no
   watermark cutting across it) so the eye stays on what's in the shot.
   Entrance: the frame settles into focus (blur + scale) a beat after the
   card's own fade-in. Hover: the whole frame lifts and the photo drifts
   in slightly — not an aggressive crop-zoom. */
.division-media {
  position: relative;
  height: 260px;
  /* Diagonal-cut "plate" shape instead of a plain rounded rectangle — two
     corners rounded, two corners square, echoing a cut metal sign panel. */
  border-radius: 30px 6px 30px 6px;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.95);
  filter: blur(5px);
  transition: opacity 750ms ease, transform 750ms cubic-bezier(0.16, 1, 0.3, 1), filter 750ms ease, box-shadow var(--transition-base);
  transition-delay: 140ms;
}
.division-card.is-visible .division-media { opacity: 1; transform: scale(1); filter: blur(0); }
.division-card:hover .division-media { box-shadow: inset 0 0 0 2px var(--color-accent); }
.division-media:not(.division-media--graphic) {
  padding: 9px;
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-light) 100%);
}
.division-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
  border-radius: 23px 0 23px 0;
  filter: saturate(1.05) contrast(1.02);
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.division-card:hover .division-media img { transform: scale(1.035); }
.division-media--graphic {
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-light) 55%, var(--color-ink) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.division-media--graphic::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 14px);
  z-index: 0;
}
.division-graphic-icon {
  position: relative;
  width: 84px;
  height: 84px;
  color: var(--color-accent);
  z-index: 2;
  transition: transform var(--transition-base);
}
.division-graphic-icon svg { width: 100%; height: 100%; }
.division-card:hover .division-graphic-icon { transform: scale(1.08) rotate(-2deg); }
.division-accent-bar {
  display: block;
  width: 44px;
  height: 4px;
  margin-top: -2px;
  margin-bottom: var(--space-md);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  transform-origin: left;
  transform: scaleX(0.35);
  transition: transform var(--transition-base);
}
.division-card:hover .division-accent-bar { transform: scaleX(1); }

.division-body { padding: var(--space-xl) var(--space-lg) var(--space-lg); }
.division-index {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}
.division-card h2 { font-size: 28px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: var(--space-sm); }
.division-card p { color: var(--color-text-muted); font-size: 16px; line-height: 1.55; margin-bottom: var(--space-md); }

@media (max-width: 599px) {
  .division-media { height: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  .division-media, .service-category-media {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}
.division-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--space-md);
}
.division-tags li {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-navy);
  background: var(--color-surface);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
}

@media (max-width: 760px) {
  .divisions-grid { grid-template-columns: 1fr; }
}

/* ---------- Process ---------- */
/* A faint scatter of stars in the process section's navy background — a
   quiet nod to Houston's "Space City" nickname (this is where a project
   goes from idea to a finished, installed sign — a small launch of its
   own). Pure CSS, no image request. */
.process {
  position: relative;
  overflow: hidden;
  background: var(--color-navy);
  color: var(--color-text-inverse);
}
.process::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 15%, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 22% 62%, rgba(255, 255, 255, 0.4), transparent 60%),
    radial-gradient(1px 1px at 38% 28%, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 52% 80%, rgba(255, 255, 255, 0.35), transparent 60%),
    radial-gradient(1px 1px at 64% 12%, rgba(255, 255, 255, 0.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 55%, rgba(255, 255, 255, 0.4), transparent 60%),
    radial-gradient(1px 1px at 91% 30%, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 97% 75%, rgba(255, 255, 255, 0.35), transparent 60%),
    radial-gradient(1px 1px at 14% 88%, rgba(255, 255, 255, 0.4), transparent 60%),
    radial-gradient(1px 1px at 46% 48%, rgba(255, 255, 255, 0.45), transparent 60%);
  pointer-events: none;
}
.process .container { position: relative; z-index: 1; }

/* Small guide line above the process filmstrip — tells touch and mouse
   users alike that the cards drag/swipe, since the cursor:grab affordance
   alone is easy to miss. Decorative icon only; the text carries the
   meaning. */
.process-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 13px;
  color: var(--color-text-muted-inverse);
}
.process-hint-icon { width: 15px; height: 15px; color: var(--color-accent); flex-shrink: 0; }
/* Big, draggable cards instead of a fixed 6-up grid — each step gets real
   room (large ghost number, icon, copy) and the row scrolls/drags like a
   filmstrip rather than sitting still as a plain list. */
.process-sequence {
  margin-top: var(--space-2xl);
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 4px 4px var(--space-sm);
  margin-left: calc(var(--space-lg) * -1);
  margin-right: calc(var(--space-lg) * -1);
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
  position: relative;
  scrollbar-width: none;
  cursor: grab;
}
.process-sequence::-webkit-scrollbar { display: none; }
.process-sequence.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.process-sequence.is-auto-scrolling { scroll-snap-type: none; }

.process-step {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex: 0 0 clamp(220px, 26vw, 280px);
  scroll-snap-align: start;
  padding: var(--space-lg) var(--space-md) var(--space-md);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--color-navy-light) 0%, var(--color-navy) 70%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform var(--transition-base), border-color var(--transition-base);
}
.process-step:hover,
.process-step:focus-within { transform: translateY(-6px); border-color: rgba(255, 92, 0, 0.4); }

/* Large ghost numeral behind the copy — the Orizon-style "big number card"
   treatment, built from type rather than a stock photo we don't have. */
.process-number {
  position: absolute;
  top: -0.12em;
  right: 8px;
  z-index: 0;
  font-size: 96px;
  font-weight: 800;
  line-height: 1;
  color: rgba(255, 255, 255, 0.07);
  pointer-events: none;
}

/* Cursor-following spotlight — a warm glow that tracks the pointer inside
   each step (script.js writes --pointer-x/--pointer-y on mousemove).
   Falls back to a centered glow on touch/no-JS instead of nothing. */
.process-step::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 30%), rgba(255, 92, 0, 0.22), transparent 65%);
  opacity: 0;
  transition: opacity 350ms ease;
  pointer-events: none;
}
.process-step:hover::before,
.process-step:focus-within::before { opacity: 1; }

/* Staggered appearance — steps reveal one after another rather than all
   at once, left to right. */
.process-sequence .process-step:nth-child(1) { transition-delay: 0ms; }
.process-sequence .process-step:nth-child(2) { transition-delay: 100ms; }
.process-sequence .process-step:nth-child(3) { transition-delay: 200ms; }
.process-sequence .process-step:nth-child(4) { transition-delay: 300ms; }
.process-sequence .process-step:nth-child(5) { transition-delay: 400ms; }
.process-sequence .process-step:nth-child(6) { transition-delay: 500ms; }

.process-step h3 {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.process-step p { position: relative; z-index: 1; font-size: 14.5px; color: var(--color-text-muted-inverse); line-height: 1.5; }

.process-cta { margin-top: var(--space-2xl); text-align: center; }

/* Pinned scroll-through — desktop-only enhancement layered on top of the
   filmstrip above. script.js adds .is-pinned-mode (only ≥1024px, only
   without prefers-reduced-motion) and sets the track's height; without
   JS, or below the breakpoint, .process-scroll-track is a transparent
   wrapper and the filmstrip above is exactly what renders — nothing here
   can break the existing drag/auto-scroll experience. */
.process-scroll-track { display: contents; }

@media (min-width: 1024px) {
  /* .process has overflow:hidden (to clip the decorative dot background
     on the filmstrip layout) — but ANY ancestor with overflow other than
     visible breaks position:sticky on a descendant, so pinned mode needs
     it lifted here. The dot background is sized via inset:0 with no
     transform, so it still renders exactly within the section either
     way — nothing visually changes from removing this. */
  .process.is-pinned-mode { overflow: visible; }

  .process.is-pinned-mode .process-scroll-track {
    display: block;
    position: relative;
  }
  .process.is-pinned-mode .process-sequence {
    position: sticky;
    top: calc(var(--header-height) + var(--space-lg));
    height: 62vh;
    max-height: 620px;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    justify-items: center;
    overflow: visible;
    cursor: default;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
  }
  /* Card-deal / fanned-deck effect: each step waits off-stage below,
     then "deals" into its own slot in the stack as scroll reaches it —
     and STAYS there (doesn't fade back out) so by the last step the
     whole deck is assembled on screen, fanned like a hand of cards.
     .is-current highlights whichever card was dealt most recently. */
  .process.is-pinned-mode .process-step {
    grid-area: 1 / 1;
    flex: none;
    width: min(480px, 92%);
    opacity: 0;
    transform: translateY(110px) scale(0.9);
    transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
    pointer-events: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  }
  .process.is-pinned-mode .process-step.is-revealed { opacity: 1; pointer-events: auto; }
  .process.is-pinned-mode .process-step.is-current {
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 92, 0, 0.5);
  }

  /* Each card's final position once dealt — offsets grow with position
     in the sequence so every earlier card still peeks out from behind
     the newest one, fanned rather than stacked dead-center. */
  .process-sequence .process-step:nth-child(1).is-revealed { transform: translate(0, 0) rotate(0deg) scale(1); z-index: 1; }
  .process-sequence .process-step:nth-child(2).is-revealed { transform: translate(18px, 16px) rotate(-3deg) scale(1); z-index: 2; }
  .process-sequence .process-step:nth-child(3).is-revealed { transform: translate(34px, 30px) rotate(2.5deg) scale(1); z-index: 3; }
  .process-sequence .process-step:nth-child(4).is-revealed { transform: translate(50px, 44px) rotate(-2deg) scale(1); z-index: 4; }
  .process-sequence .process-step:nth-child(5).is-revealed { transform: translate(66px, 58px) rotate(2deg) scale(1); z-index: 5; }
  .process-sequence .process-step:nth-child(6).is-revealed { transform: translate(82px, 72px) rotate(-1.5deg) scale(1); z-index: 6; }

  .process.is-pinned-mode .process-number { font-size: 140px; }
  .process.is-pinned-mode .process-step h3 { font-size: 24px; }
  .process.is-pinned-mode .process-step p { font-size: 16.5px; max-width: 46ch; }

  /* Progress rail — one dot per step, filled up to the active one, so
     there's a visible sense of "how far through" without reading numbers. */
  .process-rail {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: absolute;
    right: calc(-1 * var(--space-xl));
    top: 50%;
    transform: translateY(-50%);
  }
  .process-rail-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    transition: background var(--transition-base), transform var(--transition-base);
  }
  .process-rail-dot.is-active { background: var(--color-accent); transform: scale(1.6); }
}
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .process.is-pinned-mode .process-scroll-track { display: contents; }
  .process.is-pinned-mode .process-sequence { position: static; height: auto; display: flex; }
}

@media (max-width: 599px) {
  .process-step { flex-basis: 76vw; }
}

/* ---------- SiteFX (effects.js) support classes ---------- */
/* Loop/Ticker — the track is duplicated once by JS; both copies sit in a
   flex row and scroll left together via one CSS animation, so the loop is
   seamless with no per-frame JS cost. */
.sitefx-loop {
  display: flex;
  overflow: hidden;
  width: 100%;
}
.sitefx-loop-track {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-lg);
  animation: sitefx-marquee var(--sitefx-loop-duration, 20s) linear infinite;
  will-change: transform;
}
.sitefx-loop:hover .sitefx-loop-track,
.sitefx-loop.sitefx-loop-paused .sitefx-loop-track { animation-play-state: paused; }
@keyframes sitefx-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

/* Drag — SiteFX.drag() cursor feedback for a future project's carousel
   (this site's own carousels already set the same states from script.js). */
.sitefx-dragging { cursor: grabbing; scroll-snap-type: none; }

/* ---------- Portfolio grid & cards ---------- */
.portfolio-preview { background: var(--color-white); }
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.portfolio-grid {
  margin-top: var(--space-xl);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

/* Home "Recent work" — a swipeable/draggable carousel instead of a fixed
   grid. The full /portfolio/ page keeps its grid + filters untouched. */
.portfolio-preview--home .portfolio-grid {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  gap: var(--space-lg);
  padding-bottom: var(--space-sm);
  /* Bleed only as far as .container's own 24px side padding — any wider
     and the carousel pushes the page into horizontal scroll on mobile. */
  margin-left: -24px;
  margin-right: -24px;
  padding-left: 24px;
  padding-right: 24px;
  scrollbar-width: none;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
}
.portfolio-preview--home .portfolio-grid::-webkit-scrollbar { display: none; }
.portfolio-preview--home .portfolio-grid.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.portfolio-preview--home .portfolio-card {
  flex: 0 0 clamp(240px, 30vw, 340px);
  scroll-snap-align: start;
}
@media (max-width: 760px) {
  .portfolio-preview--home .portfolio-card { flex-basis: 78vw; }
}
.portfolio-card {
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base);
}
.portfolio-card:hover { box-shadow: var(--shadow-md); }
/* Same diagonal-cut "plate" shape as the division/service photo panels,
   with a small matte margin so the photo reads as a mounted panel rather
   than a flush, edge-to-edge image. */
.portfolio-media {
  display: block;
  margin: 8px 8px 0;
  border-radius: 26px 6px 26px 6px;
}
.portfolio-card .portfolio-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 12%;
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.portfolio-card:hover .portfolio-photo,
.portfolio-card:focus-within .portfolio-photo { transform: scale(1.045); }

/* Full /portfolio/ grid — a light sweep crosses each photo on hover, like
   a sign catching light as you walk past it. Honest alternative to a
   before/after reveal (we don't have duplicate photos per project): it
   adds motion and a sense of "signage" without inventing content. */
.portfolio-preview:not(.portfolio-preview--home) .portfolio-media { position: relative; display: block; overflow: hidden; }
.portfolio-preview:not(.portfolio-preview--home) .portfolio-media::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 35%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.4), rgba(255, 197, 138, 0.15), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  transition: left 850ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2;
}
.portfolio-preview:not(.portfolio-preview--home) .portfolio-card:hover .portfolio-media::after,
.portfolio-preview:not(.portfolio-preview--home) .portfolio-card:focus-within .portfolio-media::after { left: 130%; }
@media (prefers-reduced-motion: reduce) {
  .portfolio-preview:not(.portfolio-preview--home) .portfolio-media::after { transition: none; }
}

/* "Recent work" preview cards only (home page) — black & white by default,
   the sign "turns on" (full color + a warm illumination glow) on
   hover/focus. Scoped to .portfolio-preview--home specifically so the full
   /portfolio/ page (which shares the base .portfolio-preview class) is
   never affected. */
.portfolio-preview--home .portfolio-media { position: relative; display: block; overflow: hidden; }
.portfolio-preview--home .portfolio-photo {
  filter: grayscale(1) brightness(0.9) contrast(1.02);
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1), filter 650ms ease;
}
.portfolio-preview--home .portfolio-card:hover .portfolio-photo,
.portfolio-preview--home .portfolio-card:focus-within .portfolio-photo {
  filter: grayscale(0) brightness(1.04) contrast(1.05) saturate(1.15);
}
.portfolio-preview--home .portfolio-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 38%, rgba(255, 150, 70, 0.55), rgba(255, 92, 0, 0.12) 45%, transparent 72%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 650ms ease;
  pointer-events: none;
}
.portfolio-preview--home .portfolio-card:hover .portfolio-media::after,
.portfolio-preview--home .portfolio-card:focus-within .portfolio-media::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .portfolio-preview--home .portfolio-photo { transition: filter 650ms ease; }
}
.portfolio-card-body { padding: var(--space-md) var(--space-md) var(--space-lg); position: relative; }
.portfolio-card-body h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 4px; }
.portfolio-card-body p { font-size: 14px; color: var(--color-text-muted); }
.portfolio-card-tag {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-navy);
  margin-bottom: 2px;
}
.portfolio-card-cue {
  position: absolute;
  right: var(--space-md);
  bottom: var(--space-lg);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-accent);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--transition-base), transform var(--transition-base);
}
.portfolio-card:hover .portfolio-card-cue,
.portfolio-card:focus-within .portfolio-card-cue { opacity: 1; transform: translateX(0); }

@media (max-width: 960px) { .portfolio-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .portfolio-grid { grid-template-columns: 1fr; } }

/* ---------- Capabilities / service builder ---------- */
.capabilities { background: var(--color-surface); }
.capabilities-intro { font-size: 18px; color: var(--color-text-muted); margin-top: var(--space-sm); max-width: 560px; }

/* 2026-09-30: replaced the old tile-row + single-switchable-panel
   picker with a compact card grid — all 4 categories visible at once,
   smaller section footprint, no JS required for the content itself. */
.builder-cards {
  margin-top: var(--space-xl);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}
.builder-card {
  padding: var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-white);
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.builder-card:hover { border-color: var(--color-navy); transform: translateY(-2px); }
.builder-card-icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  color: var(--color-navy);
  margin-bottom: var(--space-sm);
}
.builder-card-icon svg { width: 20px; height: 20px; }
.builder-card-title { font-size: 17px; font-weight: 600; margin-bottom: 6px; letter-spacing: -0.01em; }
.builder-card-services { font-size: 14px; color: var(--color-text-muted); line-height: 1.5; }
@media (max-width: 699px) { .builder-cards { grid-template-columns: 1fr; } }

.builder-services {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 24px;
}
.builder-services li {
  font-size: 15.5px;
  color: var(--color-text);
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
}
@media (max-width: 599px) { .builder-services { grid-template-columns: 1fr; } }

.capabilities-links {
  display: flex;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
  flex-wrap: wrap;
}

/* ---------- Reviews band ---------- */
.reviews-band { padding: var(--space-2xl) 0; }
.reviews-inner { max-width: 560px; margin: 0 auto; text-align: center; }
.reviews-stars {
  font-size: 26px;
  letter-spacing: 4px;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}
.reviews-score {
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-sm);
}
.reviews-score span { font-size: 16px; font-weight: 500; color: var(--color-text-muted-inverse); margin-left: 6px; }
.reviews-copy { color: var(--color-text-muted-inverse); font-size: 16px; line-height: 1.55; }

/* Draggable/swipeable row of real review cards, same filmstrip pattern as
   the home portfolio carousel and the process steps. */
.reviews-carousel {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  margin-top: var(--space-xl);
  padding: 4px var(--space-lg) var(--space-sm);
  scrollbar-width: none;
  cursor: grab;
  /* Center the cards when they all fit; "safe" keeps the start of the
     row reachable instead of getting clipped once it overflows and has
     to scroll (a well-known plain `center` + overflow gotcha). */
  justify-content: safe center;
}
.reviews-carousel::-webkit-scrollbar { display: none; }
.reviews-carousel.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.review-card {
  flex: 0 0 clamp(260px, 30vw, 340px);
  scroll-snap-align: start;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-md);
  display: flex;
  flex-direction: column;
}
.review-card-stars { color: var(--color-accent); letter-spacing: 2px; margin-bottom: var(--space-sm); font-size: 14px; }
.review-card-text { font-size: 15px; line-height: 1.6; color: var(--color-text-muted-inverse); margin-bottom: var(--space-md); flex-grow: 1; }
.review-card-author { font-size: 14px; font-weight: 600; color: #fff; }
.review-card-author span { font-weight: 400; color: var(--color-text-muted-inverse); }
.reviews-cta { margin-top: var(--space-lg); text-align: center; }
@media (max-width: 599px) {
  .review-card { flex-basis: 80vw; }
}

/* ---------- Quote CTA band ---------- */
/* A dim, blurred shop photo behind the CTA instead of flat navy/ink — gives
   the "let's build it" moment a sense of real fabrication work happening,
   without competing with the headline. Image sits on its own layer so it
   can be zoomed/panned independently of the darkening overlay. */
.quote-band {
  position: relative;
  isolation: isolate;
  background: var(--color-ink);
  color: #fff;
  text-align: center;
  overflow: hidden;
}
.quote-band::before {
  content: "";
  position: absolute;
  inset: -20px;
  z-index: -2;
  background-image: url("/assets/images/hero/hero-bg.jpg");
  background-size: cover;
  background-position: center 35%;
  filter: blur(3px) saturate(0.9);
  transform: scale(1.08);
  transition: transform 6s ease;
}
.quote-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(6, 16, 31, 0.93) 0%, rgba(6, 16, 31, 0.86) 45%, rgba(11, 30, 61, 0.93) 100%);
}
.quote-band:hover::before { transform: scale(1.14); }
.quote-band-inner h2 {
  font-size: clamp(30px, 4.5vw, 52px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.quote-band-actions {
  margin-top: var(--space-lg);
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
@media (prefers-reduced-motion: reduce) {
  .quote-band::before { transition: none; transform: scale(1.08) !important; }
}

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--color-ink);
  color: var(--color-text-muted-inverse);
  padding-top: var(--space-2xl);
}
/* A quiet Houston skyline silhouette along the top edge of the footer —
   generic building shapes (not any specific landmark), like the horizon
   in a city postcard. Purely decorative, very low opacity. */
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 84px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 160' preserveAspectRatio='none'%3E%3Cpath d='M0,160 L0,112 L38,112 L38,88 L66,88 L66,120 L104,120 L104,58 L132,58 L132,100 L172,100 L172,38 L190,38 L190,18 L208,18 L208,38 L226,38 L226,100 L264,100 L264,68 L294,68 L294,112 L332,112 L332,48 L346,48 L346,26 L360,26 L360,48 L374,48 L374,112 L408,112 L408,80 L436,80 L436,120 L474,120 L474,58 L494,58 L494,90 L532,90 L532,38 L550,38 L550,8 L568,8 L568,38 L586,38 L586,100 L624,100 L624,68 L652,68 L652,112 L690,112 L690,48 L708,48 L708,90 L746,90 L746,58 L774,58 L774,100 L812,100 L812,28 L830,28 L830,58 L848,58 L848,112 L886,112 L886,80 L914,80 L914,120 L952,120 L952,48 L970,48 L970,18 L988,18 L988,48 L1006,48 L1006,100 L1044,100 L1044,68 L1072,68 L1072,112 L1110,112 L1110,38 L1128,38 L1128,90 L1166,90 L1166,58 L1194,58 L1194,112 L1232,112 L1232,80 L1260,80 L1260,120 L1298,120 L1298,48 L1326,48 L1326,90 L1364,90 L1364,58 L1392,58 L1392,100 L1440,100 L1440,160 Z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: bottom left;
  background-size: 720px 84px;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}
.site-footer .container { position: relative; z-index: 1; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-lg);
  padding-bottom: var(--space-xl);
}
.footer-brand p { margin: var(--space-sm) 0 8px; font-size: 14px; }
/* Houston map coordinates — a quiet "we're really here" detail rather than
   a generic city name-drop. */
.footer-geo {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--color-text-muted-inverse);
  opacity: 0.55;
  margin: -2px 0 10px !important;
}
.footer-social { display: flex; gap: 10px; margin-top: 4px; }
.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-inverse);
  color: var(--color-text-muted-inverse);
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.footer-social-link svg { width: 17px; height: 17px; }
.footer-social-link:hover {
  color: #fff;
  border-color: var(--color-accent);
  background: var(--color-accent);
}
.footer-col h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--space-sm);
}

/* ---------- Reusable title icon badge ----------
   A small accent-colored icon dropped in front of a heading to give it a
   quick visual signifier — used in footer columns, contact details,
   service category titles, etc. */
.title-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--color-accent);
}
.title-icon svg { width: 100%; height: 100%; }
h2 .title-icon, h3 .title-icon {
  width: 26px;
  height: 26px;
  margin-right: 4px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 14px; color: var(--color-text-muted-inverse); transition: color var(--transition-fast); }
.footer-col a:hover { color: #fff; }
.footer-cta { margin-top: var(--space-md); }
.footer-bottom {
  border-top: 1px solid var(--color-border-inverse);
  padding: var(--space-md) 0;
}
.footer-bottom p { font-size: 12.5px; color: var(--color-text-muted-inverse); }

@media (max-width: 860px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
}

/* ---------- Page header — reused across /quote/, /signage/, /printing/,
   /portfolio/, /about/, /contact/. Same blurred-photo + dark-navy-overlay
   treatment as .quote-band lower on the page, so the band reads as the
   actual shop's work rather than a flat, empty navy rectangle. Top padding
   trimmed — it was stacking with .container's own spacing and pushing the
   eyebrow/title down further than the copy needs. */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--color-navy);
  color: #fff;
  padding: calc(var(--space-xl) + var(--header-height)) 0 var(--space-lg);
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: -20px;
  z-index: -2;
  background-image: url("/assets/images/hero/hero-bg.jpg");
  background-size: cover;
  background-position: center 30%;
  filter: blur(4px) saturate(0.85);
  transform: scale(1.1);
  opacity: 0.55;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, rgba(6, 16, 31, 0.94) 0%, rgba(11, 30, 61, 0.9) 45%, rgba(11, 30, 61, 0.72) 100%);
}
.page-hero > .container { position: relative; z-index: 1; }
.page-hero .eyebrow { color: var(--color-accent); }
.page-hero-title {
  font-size: clamp(34px, 5vw, 60px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.06;
  max-width: 18ch;
}
.page-hero-cta { margin-top: var(--space-md); }
.page-hero-sub {
  margin-top: var(--space-md);
  font-size: 18px;
  color: var(--color-text-muted-inverse);
  max-width: 620px;
  line-height: 1.55;
}

/* ---------- Service category blocks (Signage / Printing pages) ---------- */
.service-categories { background: var(--color-surface); padding-top: var(--space-md); padding-bottom: var(--space-lg); }
.service-category {
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-md);
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--space-xl);
  align-items: center;
}
.service-category:nth-child(odd) { background: var(--color-white); }
.service-category:nth-child(even) { background: var(--color-surface-alt); }
.service-category:last-child { margin-bottom: 0; }
@media (max-width: 599px) { .service-category { padding: var(--space-md); } }
.service-category h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-sm);
}
.service-category-desc { font-size: 17px; color: var(--color-text-muted); max-width: 640px; margin-bottom: var(--space-lg); line-height: 1.55; }

/* Service list inside a signage/printing category card: soft rounded
   chips instead of a bordered line-list, so a 6-8 item list reads as one
   grouped shape, not a wall of rows. Background is a translucent navy
   tint rather than a fixed color, so it holds up on both the white and
   the light-gray alternating card backgrounds above. */
.service-category-body .builder-services {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.service-category-body .builder-services li {
  padding: 8px 16px;
  border: none;
  background: rgba(11, 30, 61, 0.05);
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-navy);
}

/* Photo (or graphic) panel — a matted, gallery-style frame, not a flat
   pasted-on image: a slim navy mat around the photo, no dark wash across
   it, so the eye stays on the actual work. Entrance: settles into focus
   (blur + scale) a beat after the section's own fade-in. Hover: the
   whole frame lifts, the photo drifts in gently — not an aggressive
   crop-zoom that would cut into the subject. */
.service-category-media {
  position: relative;
  height: 300px;
  border-radius: 30px 6px 30px 6px;
  overflow: hidden;
  order: 1;
  opacity: 0;
  transform: scale(0.95);
  filter: blur(5px);
  transition: opacity 750ms ease, transform 750ms cubic-bezier(0.16, 1, 0.3, 1), filter 750ms ease, box-shadow var(--transition-base);
  transition-delay: 140ms;
}
.service-category.is-visible .service-category-media { opacity: 1; transform: scale(1); filter: blur(0); }
.service-category:hover .service-category-media { box-shadow: inset 0 0 0 2px var(--color-accent); }
.service-category-body { order: 2; }
.service-category:nth-child(even) .service-category-media { order: 2; }
.service-category:nth-child(even) .service-category-body { order: 1; }

/* Copy block slides in from the side the photo isn't on — reinforces the
   zig-zag layout instead of just fading in place. */
.service-category-body {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 650ms ease, transform 650ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 220ms;
}
.service-category:nth-child(even) .service-category-body { transform: translateX(24px); }
.service-category.is-visible .service-category-body { opacity: 1; transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .service-category-body { opacity: 1 !important; transform: none !important; }
}
.service-category-media:not(.service-category-media--graphic) {
  padding: 9px;
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-light) 100%);
}
.service-category-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
  border-radius: 23px 0 23px 0;
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.service-category:hover .service-category-media img { transform: scale(1.035); }
.service-category-media--graphic {
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-light) 55%, var(--color-ink) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-category-media--graphic::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 14px);
}
.service-category-graphic-icon {
  position: relative;
  width: 72px;
  height: 72px;
  color: var(--color-accent);
  z-index: 1;
  transition: transform var(--transition-base);
}
.service-category-graphic-icon svg { width: 100%; height: 100%; }
.service-category:hover .service-category-graphic-icon { transform: scale(1.08) rotate(-2deg); }

@media (max-width: 860px) {
  .service-category { grid-template-columns: 1fr; }
  .service-category-media,
  .service-category:nth-child(even) .service-category-media { order: -1; }
  .service-category-body,
  .service-category:nth-child(even) .service-category-body { order: 0; }
  .service-category-media { height: 220px; }
  .service-category-body,
  .service-category:nth-child(even) .service-category-body { transform: translateY(16px); }
  .service-category.is-visible .service-category-body { transform: translateY(0); }
}

/* ---------- Simple content page (About / Contact) ---------- */
.content-page { background: var(--color-white); }
.content-page .container { max-width: var(--container-narrow); }
.content-page h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: var(--space-xl) 0 var(--space-sm);
}
.content-page p { font-size: 17px; line-height: 1.65; color: var(--color-text-muted); margin-bottom: var(--space-sm); }
.content-page ul { margin: var(--space-sm) 0 var(--space-md) 0; }
.content-page li { font-size: 16px; line-height: 1.7; color: var(--color-text-muted); padding-left: 20px; position: relative; }
.content-page li::before {
  content: "";
  position: absolute;
  left: 0; top: 11px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}

/* ---------- Contact + Quote — merged page (2026-09-29) ----------
   The Contact and Request-a-Quote pages were merged into one: contact
   info + a heading on the left, the real quote form on the right, and
   the map in its own section below (see /contact/index.html). The
   quote form's own markup/CSS (.quote-form, .quote-field, etc.) is
   completely unchanged — only this split layout and the contact-detail
   card style are new. */
.contact-quote-split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--space-2xl);
  align-items: start;
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}
@media (max-width: 900px) { .contact-quote-split { grid-template-columns: 1fr; gap: var(--space-xl); } }
.contact-quote-info .eyebrow {
  display: inline-flex;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  color: var(--color-accent);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--space-md);
}
.contact-quote-info .section-title { margin-bottom: var(--space-sm); }
.contact-quote-info .section-lede { color: var(--color-text-muted); font-size: 17px; margin-bottom: var(--space-xl); }
.contact-quote-form-wrap {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
}
.contact-quote-form-wrap .quote-form { background: none; border: none; box-shadow: none; padding: 0; }

/* ---------- Contact detail cards — icon + label/value, stacked ---------- */
.contact-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.contact-detail {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
}
.contact-detail .title-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  flex-shrink: 0;
  background: rgba(0, 150, 199, 0.12);
  color: var(--color-navy);
}
.contact-detail h3 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}
.contact-detail a, .contact-detail p { font-size: 17px; font-weight: 600; color: var(--color-text); }
.contact-detail p { line-height: 1.4; }
.contact-detail a:hover { color: var(--color-accent); }
.contact-detail-social { display: flex; gap: var(--space-md); flex-wrap: wrap; }

/* ---------- Contact map ---------- */
.contact-map {
  margin-top: var(--space-lg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
}
.contact-map iframe { display: block; width: 100%; }

/* ---------- Portfolio page — filters & empty state ---------- */
.portfolio-page-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--space-lg);
}
.portfolio-filter {
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-muted);
  background: var(--color-white);
  transition: all var(--transition-fast);
  white-space: nowrap;
}
.portfolio-filter:hover { border-color: var(--color-navy); color: var(--color-text); }
.portfolio-filter.is-active { background: var(--color-navy); border-color: var(--color-navy); color: #fff; }

.portfolio-empty {
  display: none;
  text-align: center;
  padding: var(--space-2xl) 0;
  color: var(--color-text-muted);
  font-size: 16px;
}
.portfolio-empty.is-visible { display: block; }

@media (max-width: 700px) {
  .portfolio-page-filters { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
}

/* ---------- Quote hero ---------- */
.quote-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--color-navy);
  color: #fff;
  padding: calc(var(--space-xl) + var(--header-height)) 0 var(--space-lg);
  text-align: center;
}
.quote-hero::before {
  content: "";
  position: absolute;
  inset: -20px;
  z-index: -2;
  background-image: url("/assets/images/hero/hero-bg.jpg");
  background-size: cover;
  background-position: center 30%;
  filter: blur(4px) saturate(0.85);
  transform: scale(1.1);
  opacity: 0.55;
}
.quote-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, rgba(6, 16, 31, 0.94) 0%, rgba(11, 30, 61, 0.9) 45%, rgba(11, 30, 61, 0.72) 100%);
}
.quote-hero > .container { position: relative; z-index: 1; }
.quote-hero .eyebrow { color: var(--color-accent); }
.quote-hero-title { font-size: clamp(34px, 5vw, 58px); font-weight: 700; letter-spacing: -0.02em; }
.quote-hero-sub { margin: var(--space-md) auto 0; max-width: 560px; font-size: 18px; color: var(--color-text-muted-inverse); line-height: 1.55; }

/* ---------- Quote form ---------- */
.quote-form-section { background: var(--color-surface); }
.quote-form-container { max-width: 760px; margin: 0 auto; }
.quote-form {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
}

.quote-steps {
  display: flex;
  gap: 10px;
  margin-bottom: var(--space-xl);
}
.quote-steps li {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--color-border);
  font-size: 0;
  transition: background var(--transition-base);
}
.quote-steps li.is-current,
.quote-steps li.is-done { background: var(--color-accent); }
.quote-form:not(.is-enhanced) .quote-steps { display: none; }

.quote-step { border: none; }
.quote-form.is-enhanced .quote-step { display: none; }
.quote-form.is-enhanced .quote-step.is-active { display: block; }
.quote-form:not(.is-enhanced) .quote-step { display: block; margin-bottom: var(--space-xl); padding-bottom: var(--space-xl); border-bottom: 1px solid var(--color-border); }

.quote-step-title { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: var(--space-md); display: flex; align-items: center; gap: 10px; }
.quote-step-hint { font-size: 15px; color: var(--color-text-muted); margin-bottom: var(--space-md); margin-top: -8px; }

.quote-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.quote-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: 15.5px;
  font-weight: 500;
}
.quote-choice:has(input:checked) { border-color: var(--color-accent); background: var(--color-accent-light); }
.quote-choice input { accent-color: var(--color-accent); }

.quote-field-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}
.quote-field { display: flex; flex-direction: column; gap: 6px; }
.quote-field-full { grid-column: 1 / -1; margin-bottom: var(--space-md); }
.quote-field label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text);
}
.quote-field input, .quote-field textarea, .quote-field select {
  padding: 12px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  font-family: inherit;
  font-size: 15.5px;
  transition: border-color var(--transition-fast);
}
.quote-field input:focus, .quote-field textarea:focus, .quote-field select:focus {
  border-color: var(--color-accent);
  outline: 2px solid var(--color-accent-light);
  outline-offset: 0;
}
.quote-field textarea { resize: vertical; }
.quote-field input[type="file"] { padding: 10px 0; border: none; }
.quote-field[hidden] { display: none; }

.quote-turnstile { margin-top: var(--space-lg); display: flex; justify-content: flex-end; }
.quote-turnstile[hidden] { display: none; }

.quote-turnstile-error {
  margin-top: var(--space-sm);
  font-size: 14.5px;
  color: var(--color-accent);
  text-align: right;
}
.quote-turnstile-error[hidden] { display: none; }

.quote-nav {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: var(--space-md);
}
.quote-form:not(.is-enhanced) .quote-nav [data-quote-back],
.quote-form:not(.is-enhanced) .quote-nav [data-quote-next] { display: none; }
.quote-form:not(.is-enhanced) .quote-turnstile,
.quote-form:not(.is-enhanced) .quote-turnstile-error { display: none; }

.quote-confirmation { text-align: center; padding: var(--space-xl) 0; }
.quote-confirmation h2 { font-size: 30px; font-weight: 700; margin: var(--space-sm) 0; letter-spacing: -0.01em; }
.quote-confirmation p { color: var(--color-text-muted); margin-bottom: var(--space-lg); font-size: 17px; }

.quote-fallback-note {
  text-align: center;
  margin-top: var(--space-lg);
  font-size: 14.5px;
  color: var(--color-text-muted);
}

@media (max-width: 599px) {
  .quote-form { padding: var(--space-lg) var(--space-md); }
  .quote-field-grid, .quote-choice-grid { grid-template-columns: 1fr; }
  .quote-nav { flex-direction: column-reverse; }
  .quote-nav .btn { width: 100%; }
  .quote-turnstile { justify-content: center; }
  .quote-turnstile-error { text-align: center; }
}

/* ==========================================================================
   Creative accent layer — glow, glass, and gradient treatments
   Added 2026-09-28. Owner reviewed two neon/glass demo reference sites and
   asked for that "alive, creative" energy — but kept in navy + orange, and
   layered onto the existing structure rather than replacing it. Every rule
   below extends or overrides an existing selector at the same specificity
   (last-in-file wins) — nothing here removes the reveal/motion system,
   the pinned process section, or the portfolio tilt effect built earlier.
   ========================================================================== */

/* --- Ambient glow blobs — soft blurred color pools, pure CSS, no images ---
   Subtle by design: this is a sign shop, not a nightclub. Glow supports
   the brand accent, it doesn't take over the page. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(480px circle at 12% 18%, rgba(255, 92, 0, 0.16), transparent 65%),
    radial-gradient(420px circle at 88% 78%, rgba(90, 140, 255, 0.14), transparent 60%);
}

/* Same treatment on every interior page header (/about/, /signage/,
   /printing/, /quote/, /portfolio/, /contact/) — one edit, six pages,
   consistent with the hero. Full background re-declared (same property,
   later in file wins) so the original dark photo + gradient scrim is kept
   exactly, just with a glow layer added on top. */
.page-hero::after {
  background:
    radial-gradient(440px circle at 88% 8%, rgba(255, 92, 0, 0.16), transparent 60%),
    radial-gradient(360px circle at 4% 92%, rgba(90, 140, 255, 0.12), transparent 55%),
    linear-gradient(115deg, rgba(6, 16, 31, 0.94) 0%, rgba(11, 30, 61, 0.9) 45%, rgba(11, 30, 61, 0.72) 100%);
}

/* --- Gradient text — one accent word per headline, not the whole heading,
   so it reads as a highlight rather than a gimmick. --- */
.hero-headline .word:nth-child(2) {
  background: linear-gradient(100deg, var(--color-accent) 0%, #FF8A3D 50%, var(--color-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* --- Eyebrow → glass pill with a live pulse dot, instead of plain text --- */
.hero .eyebrow,
.page-hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px 7px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 92, 0, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero .eyebrow::before,
.page-hero .eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 0 rgba(255, 92, 0, 0.6);
  animation: eyebrow-pulse 2.2s infinite;
}
@keyframes eyebrow-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 92, 0, 0.55); }
  70% { box-shadow: 0 0 0 8px rgba(255, 92, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 92, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero .eyebrow::before, .page-hero .eyebrow::before { animation: none; }
}

/* --- Buttons — soft glow on hover, layered onto the existing color swap --- */
.btn-primary:hover { box-shadow: 0 10px 30px -6px rgba(255, 92, 0, 0.55); }

/* --- Icon chips — upgrades the small accent-colored SVG glyph in front of
   "Sobre Nosotros" and Signage/Printing service headings into a glass
   badge with a glow ring. Scoped to .content-page and .service-category
   only, so the "Idea/Design/Fabrication..." process cards (which already
   have their own giant-number treatment) are untouched. --- */
.content-page h2 .title-icon,
.service-category h2 .title-icon {
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, rgba(255, 92, 0, 0.12), rgba(11, 30, 61, 0.06));
  border: 1px solid rgba(255, 92, 0, 0.25);
  box-shadow: 0 8px 20px -8px rgba(255, 92, 0, 0.35);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  flex-shrink: 0;
}
.content-page h2:hover .title-icon,
.service-category h2:hover .title-icon {
  transform: scale(1.06) rotate(-3deg);
  box-shadow: 0 10px 26px -6px rgba(255, 92, 0, 0.5);
}

/* --- Service & division media — glow ring on hover, layered onto the
   existing inset accent border rather than replacing it --- */
.service-category:hover .service-category-media,
.division-card:hover .division-media {
  box-shadow: inset 0 0 0 2px var(--color-accent), 0 20px 45px -18px rgba(255, 92, 0, 0.4);
}

/* --- Portfolio cards — soft glow ring on hover, layered onto the existing
   tilt/scale effect from earlier this project --- */
.portfolio-card:hover,
.portfolio-card:focus-within {
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(255, 92, 0, 0.22), 0 18px 40px -20px rgba(255, 92, 0, 0.4);
}

/* --- Stat numbers — a soft glow instead of flat navy, small but noticeable --- */
.stat-number { text-shadow: 0 0 24px rgba(255, 92, 0, 0.16); }

@media (max-width: 700px) {
  .hero::before {
    background: radial-gradient(360px circle at 20% 15%, rgba(255, 92, 0, 0.15), transparent 65%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .content-page h2:hover .title-icon,
  .service-category h2:hover .title-icon { transform: none; }
}

/* ==========================================================================
   "Creative" theme — Home, Signage, Printing, Quote only
   Approved 2026-09-28: owner reviewed a neon-CMYK/glassmorphism reference
   demo a second time and asked to adopt its structure AND colors — not
   just accents — on these four pages. Scoped entirely under
   body.theme-creative (added only to index.html, signage/index.html,
   printing/index.html, quote/index.html) so About, Portfolio, Contact,
   Privacy, and 404 keep the original navy+orange/light look untouched,
   per the phased rollout the owner chose. Portfolio ingestion pipeline
   and the /quote/ → Cloudflare Function → Resend/CRM lead pipeline are
   not touched by any rule below — only presentation.
   ========================================================================== */

body.theme-creative {
  --tc-bg: #06101F;
  --tc-card: #0B1E3D;
  --tc-card-alt: #16305C;
  --tc-border: rgba(255, 255, 255, 0.10);
  --tc-text: #F3F6FC;
  --tc-muted: #B7C1D4;
  --tc-cyan: #FF8A3D;
  --tc-magenta: #FF5C00;
  --tc-gold: #FF8A3D;
  background: var(--tc-bg);
  color: var(--tc-text);
}
/* 2026-09-29: contrast audit round 2 — .section-title (the big bold
   section headline used on the home page's "Everything your brand needs
   to stand out", "Not just a sign shop...", "Our Recent Projects", "What
   are you building?" and on /contact/'s "Let's start your project today"
   / "Our shop in Houston, TX") had NO theme-creative override at all, so
   it was still rendering in the light-mode near-black color on the dark
   background — nearly invisible. Fixed here, plus a body-level color
   fallback above for any other untouched inherited text. */
body.theme-creative .section-title { color: var(--tc-text); }

/* --- Header --- */
body.theme-creative .site-header {
  background: rgba(6, 16, 31, 0.72);
  border-bottom-color: var(--tc-border);
}
body.theme-creative .logo,
body.theme-creative .primary-nav a,
body.theme-creative .icon-btn { color: var(--tc-text); }
body.theme-creative .logo-accent { color: var(--tc-cyan); }
body.theme-creative .primary-nav a:hover { color: var(--tc-cyan); }
body.theme-creative .primary-nav a.is-active,
body.theme-creative .primary-nav a[aria-current="page"] { color: var(--tc-magenta); }
body.theme-creative .icon-btn:hover { background: rgba(255, 255, 255, 0.08); }
body.theme-creative .menu-toggle span { background: var(--tc-text); }
body.theme-creative .mobile-menu { background: var(--tc-bg); }
body.theme-creative .mobile-menu nav a { color: var(--tc-text); }
body.theme-creative .nav-liquid-indicator { background: rgba(255, 138, 61, 0.14); }

/* --- Buttons --- */
body.theme-creative .btn-primary {
  background: linear-gradient(120deg, var(--tc-cyan) 0%, var(--tc-magenta) 100%);
  color: #08101C;
  font-weight: 700;
}
body.theme-creative .btn-primary:hover {
  background: linear-gradient(120deg, var(--tc-magenta) 0%, var(--tc-cyan) 100%);
  box-shadow: 0 12px 34px -8px rgba(255, 138, 61, 0.45), 0 8px 26px -10px rgba(255, 92, 0, 0.4);
}
body.theme-creative .btn-secondary,
body.theme-creative .btn-secondary-inverse {
  border-color: var(--tc-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--tc-text);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body.theme-creative .btn-secondary:hover,
body.theme-creative .btn-secondary-inverse:hover {
  border-color: var(--tc-cyan);
  background: rgba(255, 138, 61, 0.08);
}

/* --- Generic text link + icon accent, used across cards on every
   in-scope page --- */
body.theme-creative .text-link { color: var(--tc-cyan); }
body.theme-creative .text-link:hover { color: var(--tc-magenta); border-color: currentColor; }
body.theme-creative .title-icon { color: var(--tc-cyan); }

/* --- Hero --- */
body.theme-creative .hero { background: var(--tc-bg); }
body.theme-creative .hero::before {
  background:
    radial-gradient(520px circle at 10% 15%, rgba(255, 138, 61, 0.20), transparent 65%),
    radial-gradient(460px circle at 90% 80%, rgba(255, 92, 0, 0.18), transparent 60%);
}
body.theme-creative .hero-scrim {
  background:
    linear-gradient(180deg, rgba(6, 10, 18, 0.6) 0%, rgba(6, 10, 18, 0.4) 38%, rgba(6, 10, 18, 0.85) 100%),
    linear-gradient(90deg, rgba(6, 10, 18, 0.8) 0%, rgba(6, 10, 18, 0.3) 55%, rgba(6, 10, 18, 0.15) 100%);
}
body.theme-creative .hero-headline .word:nth-child(2) {
  background: linear-gradient(100deg, var(--tc-cyan) 0%, var(--tc-magenta) 50%, var(--tc-gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
body.theme-creative .hero .eyebrow,
body.theme-creative .page-hero .eyebrow,
body.theme-creative .quote-hero .eyebrow {
  border-color: rgba(255, 138, 61, 0.35);
  color: var(--tc-cyan);
}
body.theme-creative .hero .eyebrow::before,
body.theme-creative .page-hero .eyebrow::before {
  background: var(--tc-cyan);
  box-shadow: 0 0 0 0 rgba(255, 138, 61, 0.6);
}
body.theme-creative .scroll-cue span { background: var(--tc-cyan); }

/* --- Page header (Signage / Printing / Quote share .page-hero;
   the Quote page's own .quote-hero gets the same glow separately below) --- */
body.theme-creative .page-hero::after {
  background:
    radial-gradient(460px circle at 88% 8%, rgba(255, 138, 61, 0.20), transparent 60%),
    radial-gradient(380px circle at 6% 92%, rgba(255, 92, 0, 0.18), transparent 55%),
    linear-gradient(115deg, rgba(6, 9, 16, 0.95) 0%, rgba(6, 16, 31, 0.92) 45%, rgba(6, 16, 31, 0.78) 100%);
}

/* --- Stats strip --- */
body.theme-creative .stats-strip { background: var(--tc-card); border-bottom-color: var(--tc-border); }
body.theme-creative .stat-item { border-left-color: var(--tc-border); }
body.theme-creative .stat-number { color: var(--tc-cyan); text-shadow: 0 0 28px rgba(255, 138, 61, 0.4); }
body.theme-creative .stat-label { color: var(--tc-muted); }
body.theme-creative .stat-star { color: var(--tc-gold); }

/* --- Divisions (Signage / Printing overview cards, home page) --- */
body.theme-creative .divisions { background: var(--tc-bg); }
body.theme-creative .division-card {
  background: var(--tc-card);
  border-color: var(--tc-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body.theme-creative .division-card:hover { box-shadow: 0 26px 60px -20px rgba(255, 138, 61, 0.3); }
body.theme-creative .division-card:hover .division-media {
  box-shadow: inset 0 0 0 2px var(--tc-cyan), 0 20px 45px -18px rgba(255, 138, 61, 0.4);
}
body.theme-creative .division-media:not(.division-media--graphic) {
  background: linear-gradient(135deg, var(--tc-card-alt) 0%, var(--tc-bg) 100%);
}
body.theme-creative .division-media--graphic {
  background: linear-gradient(135deg, var(--tc-card-alt) 0%, var(--tc-card) 55%, var(--tc-bg) 100%);
}
body.theme-creative .division-graphic-icon { color: var(--tc-cyan); }
body.theme-creative .division-accent-bar { background: linear-gradient(90deg, var(--tc-cyan), var(--tc-magenta)); }
body.theme-creative .division-index { color: var(--tc-magenta); }
body.theme-creative .division-card h2 { color: var(--tc-text); }
body.theme-creative .division-card p { color: var(--tc-muted); }
body.theme-creative .division-tags li {
  color: var(--tc-cyan);
  background: rgba(255, 138, 61, 0.08);
  border: 1px solid rgba(255, 138, 61, 0.18);
}

/* --- Process (already dark navy — recolor the two orange accents so the
   spotlight/hover glow matches the new palette; everything else in this
   section, including the card-deal fan effect, is untouched) --- */
body.theme-creative .process-step:hover,
body.theme-creative .process-step:focus-within { border-color: rgba(255, 138, 61, 0.4); }
body.theme-creative .process-step::before {
  background: radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 30%), rgba(255, 138, 61, 0.22), transparent 65%);
}
body.theme-creative .process-hint-icon { color: var(--tc-cyan); }
body.theme-creative .process-rail-dot.is-active { background: var(--tc-cyan); }

/* --- Portfolio preview (home "Recent work" carousel) --- */
body.theme-creative .portfolio-preview { background: var(--tc-bg); }
body.theme-creative .portfolio-card { background: var(--tc-card); }
body.theme-creative .portfolio-card-body p { color: var(--tc-muted); }
body.theme-creative .portfolio-preview--home .portfolio-media::after {
  background: radial-gradient(circle at 50% 38%, rgba(255, 138, 61, 0.5), rgba(255, 92, 0, 0.18) 45%, transparent 72%);
}
body.theme-creative .portfolio-card:hover,
body.theme-creative .portfolio-card:focus-within {
  box-shadow: 0 0 0 1px rgba(255, 138, 61, 0.25), 0 18px 40px -20px rgba(255, 138, 61, 0.45);
}

/* --- Capabilities cards (home page "What are you building?") --- */
body.theme-creative .capabilities { background: var(--tc-bg); }
body.theme-creative .capabilities-intro { color: var(--tc-muted); }
body.theme-creative .builder-card {
  background: var(--tc-card);
  border-color: var(--tc-border);
}
body.theme-creative .builder-card:hover { border-color: var(--tc-cyan); }
body.theme-creative .builder-card-title { color: var(--tc-text); }
body.theme-creative .builder-card-services { color: var(--tc-muted); }
body.theme-creative .builder-services li { color: var(--tc-text); border-bottom-color: var(--tc-border); }

/* --- Reviews band is already dark-styled site-wide (section-dark), just
   swap the star/accent color to gold to match the new palette --- */
body.theme-creative .review-card-stars { color: var(--tc-gold); }

/* --- Service category blocks (Signage / Printing) --- */
body.theme-creative .service-categories { background: var(--tc-bg); }
body.theme-creative .service-category { background: var(--tc-card) !important; }
body.theme-creative .service-category:nth-child(even) { background: var(--tc-card-alt) !important; }
body.theme-creative .service-category-desc { color: var(--tc-muted); }
body.theme-creative .service-category h2,
body.theme-creative .service-category-body .builder-services li { color: var(--tc-text); }
body.theme-creative .service-category-body .builder-services li { border-bottom-color: var(--tc-border); }
body.theme-creative .service-category:hover .service-category-media {
  box-shadow: inset 0 0 0 2px var(--tc-cyan), 0 20px 45px -18px rgba(255, 138, 61, 0.4);
}
body.theme-creative .service-category-media:not(.service-category-media--graphic) {
  background: linear-gradient(135deg, var(--tc-card-alt) 0%, var(--tc-bg) 100%);
}
body.theme-creative .service-category-media--graphic {
  background: linear-gradient(135deg, var(--tc-card-alt) 0%, var(--tc-card) 55%, var(--tc-bg) 100%);
}
body.theme-creative .service-category-graphic-icon { color: var(--tc-cyan); }
body.theme-creative .content-page h2 .title-icon,
body.theme-creative .service-category h2 .title-icon {
  background: linear-gradient(145deg, rgba(255, 138, 61, 0.16), rgba(255, 92, 0, 0.08));
  border-color: rgba(255, 138, 61, 0.3);
  box-shadow: 0 8px 20px -8px rgba(255, 138, 61, 0.35);
}
body.theme-creative .content-page h2:hover .title-icon,
body.theme-creative .service-category h2:hover .title-icon {
  box-shadow: 0 10px 26px -6px rgba(255, 138, 61, 0.5);
}

/* --- Quote page --- */
body.theme-creative .quote-hero::after {
  background:
    radial-gradient(460px circle at 88% 8%, rgba(255, 138, 61, 0.20), transparent 60%),
    radial-gradient(380px circle at 6% 92%, rgba(255, 92, 0, 0.18), transparent 55%),
    linear-gradient(115deg, rgba(6, 9, 16, 0.95) 0%, rgba(6, 16, 31, 0.92) 45%, rgba(6, 16, 31, 0.78) 100%);
}
body.theme-creative .quote-form-section { background: var(--tc-bg); }
body.theme-creative .quote-steps li { background: var(--tc-border); }
body.theme-creative .quote-steps li.is-current,
body.theme-creative .quote-steps li.is-done {
  background: linear-gradient(90deg, var(--tc-cyan), var(--tc-magenta));
}
body.theme-creative .quote-step-title { color: var(--tc-text); }
body.theme-creative .quote-step-hint { color: var(--tc-muted); }
body.theme-creative .quote-choice {
  border-color: var(--tc-border);
  background: var(--tc-card);
  color: var(--tc-text);
}
body.theme-creative .quote-choice:has(input:checked) {
  border-color: var(--tc-cyan);
  background: rgba(255, 138, 61, 0.10);
}
body.theme-creative .quote-choice input { accent-color: var(--tc-cyan); }
body.theme-creative .quote-field label { color: var(--tc-text); }
body.theme-creative .quote-field input,
body.theme-creative .quote-field textarea,
body.theme-creative .quote-field select {
  background: var(--tc-card);
  border-color: var(--tc-border);
  color: var(--tc-text);
}
body.theme-creative .quote-field input::placeholder,
body.theme-creative .quote-field textarea::placeholder { color: rgba(155, 168, 199, 0.6); }
body.theme-creative .quote-field input:focus,
body.theme-creative .quote-field textarea:focus,
body.theme-creative .quote-field select:focus {
  border-color: var(--tc-cyan);
  outline-color: rgba(255, 138, 61, 0.25);
}
body.theme-creative .quote-turnstile-error { color: var(--tc-magenta); }
body.theme-creative .quote-confirmation h2 { color: var(--tc-text); }
body.theme-creative .quote-confirmation p,
body.theme-creative .quote-fallback-note { color: var(--tc-muted); }

@media (prefers-reduced-motion: reduce) {
  body.theme-creative .hero .eyebrow::before,
  body.theme-creative .page-hero .eyebrow::before { animation: none; }
}

/* ==========================================================================
   "Creative" theme — rollout to the remaining pages
   Approved 2026-09-28: owner decided to go all-in — the whole site now
   adopts the demo's dark/glass/cyan-magenta-gold look, in every page,
   in English, with all existing content/SEO/structured data untouched.
   The two things explicitly protected either way: the quote/contact lead
   pipeline (Cloudflare Function → Turnstile → Resend → CRM) and the
   portfolio photo pipeline (ingestion script + "Recent work" home
   section) — neither is touched by this or any earlier CSS-only pass.
   This block extends body.theme-creative to cover the selectors unique
   to About, Portfolio, Contact, Privacy, and 404 — everything shared
   (header, buttons, page-hero, division/service cards, etc.) is already
   covered by the earlier theme-creative rules above.
   ========================================================================== */

/* --- Generic content page (About, Privacy, and part of Contact) --- */
body.theme-creative .content-page { background: var(--tc-bg); }
body.theme-creative .content-page h2 { color: var(--tc-text); }
body.theme-creative .content-page p,
body.theme-creative .content-page li { color: var(--tc-muted); }
body.theme-creative .content-page li::before { color: var(--tc-cyan); }

/* --- Full /portfolio/ grid page --- */
body.theme-creative .portfolio-filter {
  background: var(--tc-card);
  border-color: var(--tc-border);
  color: var(--tc-muted);
}
body.theme-creative .portfolio-filter:hover { border-color: var(--tc-cyan); color: var(--tc-text); }
body.theme-creative .portfolio-filter.is-active {
  background: linear-gradient(120deg, var(--tc-cyan), var(--tc-magenta));
  border-color: transparent;
  color: #08101C;
}
body.theme-creative .portfolio-card-tag { color: var(--tc-cyan); }
body.theme-creative .portfolio-card-cue { color: var(--tc-magenta); }
body.theme-creative .portfolio-empty { color: var(--tc-muted); }

/* --- Contact page --- */
body.theme-creative .contact-detail { background: var(--tc-card); border: 1px solid var(--tc-border); }
body.theme-creative .contact-detail h3 { color: var(--tc-muted); }
body.theme-creative .contact-detail a,
body.theme-creative .contact-detail p { color: var(--tc-text); }
body.theme-creative .contact-detail a:hover { color: var(--tc-cyan); }
body.theme-creative .contact-map { border-color: var(--tc-border); position: relative; }
body.theme-creative .contact-map::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(6, 16, 31, 0.32);
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* --- 404 page --- */
body.theme-creative .section-light { background: var(--tc-bg); color: var(--tc-text); }
body.theme-creative .section-lede { color: var(--tc-muted); }

/* ==========================================================================
   Hero — split two-column layout (demo-cloned structure)
   Added 2026-09-28. Same photo, same headline/copy/CTAs/stats as the
   original single-column hero — nothing here changes hero content, only
   adds a second column on desktop with a framed showcase photo + two
   floating badges (project name/category, and the real "650+ projects"
   stat), matching the "Pixel & Sign Studio" demo's hero structure. Below
   1024px the showcase card is hidden and the hero renders exactly as
   before (full-bleed photo + centered copy) to keep mobile short.
   ========================================================================== */
.hero-showcase { display: none; position: relative; }
@media (min-width: 1024px) {
  .hero-inner--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    align-items: center;
    gap: var(--space-2xl);
  }
  .hero-copy { max-width: 620px; }
  .hero-showcase { display: block; }
}
.hero-showcase-frame {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.55);
  animation: heroShowcaseFloat 7s ease-in-out infinite;
}
.hero-showcase-frame img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 20%;
}
.hero-showcase-badge {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: rgba(11, 16, 28, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 34px -14px rgba(0, 0, 0, 0.5);
}
.hero-showcase-badge-title { font-size: 14px; font-weight: 600; color: #fff; }
.hero-showcase-badge-sub { font-size: 12px; color: rgba(255, 255, 255, 0.65); }
.hero-showcase-badge--bottom { left: -18px; bottom: -18px; max-width: 240px; }
.hero-showcase-badge--stat {
  right: -16px;
  top: -16px;
  align-items: center;
  text-align: center;
}
.hero-showcase-badge--stat .stat-count {
  font-size: 22px;
  font-weight: 800;
  color: var(--color-accent);
  line-height: 1;
}
/* 2026-09-29: continuous, gentle "float" motion loop on the hero
   showcase photo card and its two floating badges — replaces the static
   1.5deg tilt with a slow, looping up/down drift (the tilt is preserved
   as part of the keyframes so the card still reads as a tilted photo,
   just alive). Each element runs its own duration/delay so the motion
   doesn't look synchronized/mechanical. Disabled entirely under
   prefers-reduced-motion. */
@keyframes heroShowcaseFloat {
  0%, 100% { transform: rotate(1.5deg) translateY(0); }
  50% { transform: rotate(1.5deg) translateY(-14px); }
}
@keyframes heroShowcaseBadgeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.hero-showcase-badge--bottom {
  animation: heroShowcaseBadgeFloat 6s ease-in-out infinite;
  animation-delay: 0.4s;
}
.hero-showcase-badge--stat {
  animation: heroShowcaseBadgeFloat 8s ease-in-out infinite;
  animation-delay: 1.1s;
}
@media (prefers-reduced-motion: reduce) {
  .hero-showcase-frame,
  .hero-showcase-badge--bottom,
  .hero-showcase-badge--stat {
    animation: none;
    transform: none;
  }
}

/* theme-creative palette for the new hero showcase card */
body.theme-creative .hero-showcase-frame { border-color: var(--tc-border); }
body.theme-creative .hero-showcase-badge {
  background: rgba(6, 16, 31, 0.78);
  border-color: var(--tc-border);
}
body.theme-creative .hero-showcase-badge--stat .stat-count { color: var(--tc-cyan); }

/* ==========================================================================
   "Our projects" home section — cloned from static-grid structure
   Added 2026-09-28. The home "Recent work" preview used a swipeable
   carousel; the demo's projects section is a static grid identical to
   our own full /portfolio/ page. This resets the home preview back to
   the same .portfolio-grid grid layout (no behavior change needed in
   script.js — the drag-scroll code simply has nothing to scroll once
   the grid no longer overflows). The AUTO-RECENTWORK markers and every
   photo/link inside them are untouched.
   ========================================================================== */
.portfolio-preview--home .portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: visible;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  cursor: default;
}
.portfolio-preview--home .portfolio-card {
  flex: none;
}
@media (max-width: 960px) { .portfolio-preview--home .portfolio-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .portfolio-preview--home .portfolio-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Division cards (home "Signage" / "Printing" overview) — demo card treatment
   Added 2026-09-28. Only theme-creative visual polish (glass border, glow
   ring, gradient index badge) — the two cards' photos, copy, tag lists
   and links are unchanged.
   ========================================================================== */
body.theme-creative .division-card {
  background: var(--tc-card);
  border: 1px solid var(--tc-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body.theme-creative .division-index {
  background: linear-gradient(120deg, var(--tc-cyan), var(--tc-magenta));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
body.theme-creative .division-accent-bar { background: linear-gradient(90deg, var(--tc-cyan), var(--tc-magenta)); }
body.theme-creative .division-card p { color: var(--tc-muted); }
body.theme-creative .division-tags li {
  background: var(--tc-card-alt);
  border-color: var(--tc-border);
  color: var(--tc-text);
}

/* ==========================================================================
   Process section — shortened footprint
   Added 2026-09-28. Owner has repeated across this whole redesign arc
   that the process section "covers the whole page" — shortens its own
   top/bottom padding (was inheriting the generic 120px/96px `section`
   padding) independent of every other section, which keeps their sizing
   untouched. The pinned scroll-through's per-step scroll distance is
   also reduced in script.js (70vh -> 46vh per step). The card-deal reveal
   logic itself (all cards end up visible once the effect finishes) is
   unchanged — that already happens: script.js's setActiveStep marks
   every step i <= index as .is-revealed, and .is-revealed never clears
   except by scrolling back up past that step, so scrolling forward to
   the end of the section always leaves the full fanned deck visible.
   ========================================================================== */
.process { padding: var(--space-xl) 0; }
@media (max-width: 900px) { .process { padding: var(--space-lg) 0; } }
@media (min-width: 1024px) {
  .process.is-pinned-mode .process-sequence { top: calc(var(--header-height) + var(--space-md)); }
}

/* ==========================================================================
   Service category cards — icon-card grid (demo-cloned structure)
   Added 2026-09-28. Applies only inside `.service-categories--grid`
   (Signage + Printing pages) via `.service-categories-grid`, a wrapper
   div added around the existing <article class="service-category">
   blocks — every photo, heading, description and builder-services chip
   list is exactly the content that was already there; only the layout
   changes, from an alternating photo/text row to a vertical card in a
   responsive grid, matching the demo's service-card structure.
   ========================================================================== */
.service-categories--grid { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
.service-categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-lg);
  align-items: stretch;
}
.service-categories--grid .service-category {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  padding: 0;
  margin-bottom: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.service-categories--grid .service-category:nth-child(odd),
.service-categories--grid .service-category:nth-child(even) { background: var(--color-white); }
.service-categories--grid .service-category:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.service-categories--grid .service-category-media,
.service-categories--grid .service-category:nth-child(even) .service-category-media {
  order: 0;
  height: 200px;
  border-radius: 0;
  padding: 0;
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-light) 100%);
}
.service-categories--grid .service-category-media img { border-radius: 0; object-position: center 25%; }
.service-categories--grid .service-category-body,
.service-categories--grid .service-category:nth-child(even) .service-category-body {
  order: 1;
  transform: none;
  padding: var(--space-lg);
}
.service-categories--grid .service-category-desc { max-width: none; margin-bottom: var(--space-md); font-size: 15.5px; }
.service-categories--grid .service-category h2 { font-size: 21px; }
.service-categories--grid .service-category-body .builder-services li { font-size: 13px; padding: 6px 13px; }

/* theme-creative polish for the new cards */
body.theme-creative .service-categories--grid,
body.theme-creative .service-categories--grid .service-category {
  background: var(--tc-card);
  border: 1px solid var(--tc-border);
}
body.theme-creative .service-categories--grid .service-category:hover { border-color: var(--tc-cyan); }
body.theme-creative .service-categories--grid .service-category-desc { color: var(--tc-muted); }
body.theme-creative .service-categories--grid .service-category-body .builder-services li {
  background: var(--tc-card-alt);
  color: var(--tc-text);
}

@media (max-width: 599px) {
  .service-categories-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Services overview — icon-card grid (replaces the old 2-photo Divisions
   section on the home page)
   Added 2026-09-28. Owner asked for the section between the hero and the
   process/portfolio to become a full grid of service cards, no photos,
   one per real service category (same titles/descriptions/links already
   used on /signage/ and /printing/ — nothing invented). Colors cycle
   cyan -> magenta -> gold every 3 cards, matching the reference image.
   ========================================================================== */
.services-overview { background: var(--color-surface); }
.section-head-center { text-align: center; max-width: 640px; margin: 0 auto var(--space-xl); }
.section-head-center .eyebrow {
  display: inline-flex;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  color: var(--color-accent);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--space-md);
}
.section-head-center .section-title { margin-bottom: var(--space-sm); }
.section-head-center .section-lede { color: var(--color-text-muted); font-size: 17px; }

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
@media (max-width: 960px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .services-grid { grid-template-columns: 1fr; } }

.service-tile {
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.service-tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.service-tile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
}
.service-tile-icon svg { width: 24px; height: 24px; }
.service-tile h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 8px; }
.service-tile p { font-size: 14.5px; color: var(--color-text-muted); line-height: 1.55; margin-bottom: var(--space-md); }
.service-tile-link { font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.service-tile-link .btn-arrow,
.service-tile-link span { transition: transform var(--transition-base); }
.service-tile-link:hover span { transform: translateX(3px); }

.services-overview-links {
  margin-top: var(--space-2xl);
  display: flex;
  justify-content: center;
  gap: var(--space-xl);
  flex-wrap: wrap;
}

/* Color cycle — cyan / magenta / gold every 3 cards (base theme: accent/navy) */
.service-tile-link { color: var(--color-accent); }
.service-tile:nth-child(3n+1) .service-tile-icon { background: rgba(0, 150, 199, 0.12); color: var(--color-navy); }
.service-tile:nth-child(3n+2) .service-tile-icon { background: rgba(255, 92, 0, 0.10); color: var(--color-accent); }
.service-tile:nth-child(3n) .service-tile-icon { background: rgba(255, 138, 61, 0.14); color: #b8860b; }

/* theme-creative palette */
body.theme-creative .service-tile { background: var(--tc-card); border-color: var(--tc-border); }
body.theme-creative .service-tile h3 { color: var(--tc-text); }
body.theme-creative .service-tile p { color: var(--tc-muted); }
body.theme-creative .section-head-center .eyebrow { border-color: var(--tc-border); color: var(--tc-cyan); background: rgba(255, 138, 61, 0.06); }
body.theme-creative .section-head-center .section-lede { color: var(--tc-muted); }
body.theme-creative .service-tile:nth-child(3n+1) .service-tile-icon { background: rgba(255, 138, 61, 0.14); color: var(--tc-cyan); }
body.theme-creative .service-tile:nth-child(3n+2) .service-tile-icon { background: rgba(255, 92, 0, 0.14); color: var(--tc-magenta); }
body.theme-creative .service-tile:nth-child(3n) .service-tile-icon { background: rgba(255, 138, 61, 0.16); color: var(--tc-gold); }
body.theme-creative .service-tile:nth-child(3n+1) .service-tile-link { color: var(--tc-cyan); }
body.theme-creative .service-tile:nth-child(3n+2) .service-tile-link { color: var(--tc-magenta); }
body.theme-creative .service-tile:nth-child(3n) .service-tile-link { color: var(--tc-gold); }
body.theme-creative .service-tile:hover { border-color: var(--tc-cyan); }

/* ==========================================================================
   Contrast audit pass — 2026-09-28
   Owner reported the "Our Services" section still showing a light
   background under the dark theme, and asked for a full sweep of the
   remaining light backgrounds site-wide plus text-color contrast fixes.
   Found and fixed here (previous theme-creative passes missed these):
   - .services-overview section wrapper (the reported bug — its own
     `.services-overview` rule was written AFTER the generic
     `.section-surface` override in the cascade, so it kept winning
     with the light gray color even though the cards inside were
     already dark).
   - .quote-form — the actual white card panel on /quote/ (only its
     surrounding `.quote-form-section` and its fields were covered).
   - .portfolio-card-body h3 — project name text had no color override,
     so it was rendering as dark navy text on the now-dark card
     background (illegible).
   ========================================================================== */
body.theme-creative .services-overview { background: var(--tc-bg); }
body.theme-creative .quote-form {
  background: var(--tc-card);
  border: 1px solid var(--tc-border);
  box-shadow: none;
}
body.theme-creative .portfolio-card-body h3 { color: var(--tc-text); }

/* ==========================================================================
   Process cards — restyled to match the "Our Services" card look
   Added 2026-09-28. Owner asked for the Process section's cards to look
   like the Services icon-cards, kept as a carousel. The section is
   ALREADY a carousel (filmstrip drag/auto-scroll on all screens, plus
   the pinned card-deal scroll-through on desktop) — nothing about that
   scroll/drag/pin mechanism changes here, only the card FACE: same dark
   card background as a service-tile, the step's existing icon (already
   in every step's <h3>) blown up into a colored icon box that cycles
   cyan/magenta/gold exactly like the Services grid, and the oversized
   ghost step-number retired (services cards don't show one either).
   ========================================================================== */
body.theme-creative .process-step {
  background: var(--tc-card);
  border: 1px solid var(--tc-border);
}
body.theme-creative .process-number { opacity: 0; }
body.theme-creative .process-step h3 {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
body.theme-creative .process-step h3 .title-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
  flex-shrink: 0;
}
body.theme-creative .process-step h3 .title-icon svg { width: 24px; height: 24px; }
body.theme-creative .process-sequence .process-step:nth-child(3n+1) h3 .title-icon { background: rgba(255, 138, 61, 0.14); color: var(--tc-cyan); }
body.theme-creative .process-sequence .process-step:nth-child(3n+2) h3 .title-icon { background: rgba(255, 92, 0, 0.14); color: var(--tc-magenta); }
body.theme-creative .process-sequence .process-step:nth-child(3n) h3 .title-icon { background: rgba(255, 138, 61, 0.16); color: var(--tc-gold); }
body.theme-creative .process-step p { color: var(--tc-muted); }

/* ==========================================================================
   Contact + Quote merged page — theme-creative palette
   Added 2026-09-29.
   ========================================================================== */
body.theme-creative .contact-quote-info .eyebrow { border-color: var(--tc-border); color: var(--tc-cyan); background: rgba(255, 138, 61, 0.06); }
body.theme-creative .contact-quote-info .section-lede { color: var(--tc-muted); }
body.theme-creative .contact-quote-form-wrap {
  background: var(--tc-card);
  border-color: var(--tc-border);
  box-shadow: none;
}
body.theme-creative .contact-detail { background: var(--tc-card); border: 1px solid var(--tc-border); }
body.theme-creative .contact-detail .title-icon { background: rgba(255, 138, 61, 0.14); color: var(--tc-cyan); }
body.theme-creative .contact-detail:nth-child(2) .title-icon { background: rgba(255, 92, 0, 0.14); color: var(--tc-magenta); }
body.theme-creative .contact-detail:nth-child(3) .title-icon { background: rgba(255, 138, 61, 0.16); color: var(--tc-gold); }
body.theme-creative .contact-detail h3 { color: var(--tc-muted); }
body.theme-creative .contact-detail a,
body.theme-creative .contact-detail p { color: var(--tc-text); }
body.theme-creative .contact-detail a:hover { color: var(--tc-cyan); }

/* ==========================================================================
   Icon micro-animations (2026-09-29) — owner asked to animate icons
   wherever reasonable. Applied as tasteful hover/reveal motion rather
   than constant looping distraction: the colored icon boxes (Our
   Services cards, Process step cards, Signage/Printing category
   builder tiles) pop with a slight scale + rotate when their parent
   card is hovered, small inline title-icons (footer columns, contact
   detail cards) get the same treatment, and footer social icons get a
   quick bounce. All are plain CSS transitions (no JS), and every one is
   neutralized under prefers-reduced-motion.
   ========================================================================== */
.service-tile-icon,
.title-icon,
.footer-social-link svg,
.icon-btn svg {
  transition: transform var(--transition-base);
}
.service-tile:hover .service-tile-icon,
.process-step:hover h3 .title-icon,
.contact-detail:hover .title-icon,
.builder-card:hover .builder-card-icon,
.division-card:hover .title-icon {
  transform: rotate(-8deg) scale(1.1);
}
.footer-social-link:hover svg { transform: scale(1.18) rotate(8deg); }
.icon-btn:hover svg { transform: scale(1.12); }

/* Process-step icons already sit in a filmstrip the visitor drags/reads
   left-to-right; give the currently-focused/current card's icon a soft
   continuous pulse so the row itself feels alive, not just on hover. */
@keyframes iconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.process-step.is-current h3 .title-icon,
.process-step:focus-within h3 .title-icon {
  animation: iconPulse 2.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .service-tile-icon,
  .title-icon,
  .footer-social-link svg,
  .icon-btn svg {
    transition: none;
  }
  .process-step.is-current h3 .title-icon,
  .process-step:focus-within h3 .title-icon {
    animation: none;
  }
}

/* ===========================================================
   CLIENTS MARQUEE — continuous logo carousel ("Trusted by
   Houston businesses"). Pure CSS: a track holding the logo
   list twice, animated with translateX(0 -> -50%) so the loop
   is seamless regardless of how many logos there are. The
   whole section is only emitted by scripts/build-clients.js
   when clients/clients.json has at least one logo.
   =========================================================== */
.clients-band { padding: var(--space-xl) 0; overflow: hidden; }
.clients-eyebrow {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
}

.clients-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.clients-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: clientsMarquee var(--clients-duration, 30s) linear infinite;
}

.clients-marquee:hover .clients-track { animation-play-state: paused; }

.clients-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 var(--space-xl);
  filter: grayscale(1) opacity(0.55);
  transition: filter var(--transition-base);
}
.clients-logo:hover { filter: grayscale(0) opacity(1); }

.clients-logo img {
  max-height: 56px;
  max-width: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
}

@keyframes clientsMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .clients-track { animation: none; overflow-x: auto; scrollbar-width: none; }
  .clients-track::-webkit-scrollbar { display: none; }
}

@media (max-width: 599px) {
  .clients-logo { height: 44px; padding: 0 var(--space-lg); }
  .clients-logo img { max-height: 44px; max-width: 120px; }
}

/* ===========================================================
   MID-PAGE CTA BANNER — a lighter second ask, roughly midway
   through the homepage scroll, distinct from .quote-band at
   the bottom (different copy, single action, compact height).
   =========================================================== */
.mid-cta-band {
  padding: var(--space-lg) 0;
  background: var(--color-accent);
}
.mid-cta-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
  text-align: center;
}
.mid-cta-text {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-white);
  margin: 0;
}
.mid-cta-band .btn-primary {
  background: var(--color-navy);
  border-color: var(--color-navy);
}
.mid-cta-band .btn-primary:hover { background: var(--color-ink); border-color: var(--color-ink); }

@media (max-width: 599px) {
  .mid-cta-inner { flex-direction: column; gap: var(--space-md); }
  .mid-cta-text { font-size: 1.05rem; }
}

/* ===========================================================
   FAQ — native <details>/<summary>, so it works with zero JS.
   Styled to look like a proper accordion (custom marker,
   smooth open/close via the browser's built-in toggle).
   =========================================================== */
.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-white);
  transition: border-color var(--transition-base);
}
.faq-item[open] { border-color: var(--color-accent); }

.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--color-navy);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--color-accent);
  transition: transform var(--transition-base);
  line-height: 1;
}
.faq-item[open] summary::after { transform: rotate(45deg); }

.faq-item p {
  margin: var(--space-sm) 0 0;
  color: var(--color-text-muted);
  line-height: 1.6;
}
.faq-item a { color: var(--color-accent); }

/* ==========================================================================
   LED Sign Simulator — homepage, section#led-simulator.
   Added 2026-09-30. No-JS fallback: renders in its default state (Day /
   Warm White), fully readable without script.js. The three LED colors
   (Warm White, Cool White, RGB / Color-Changing) are real options
   Kreative D-Signs installs on channel letters — not decorative demo
   colors, so this doubles as an honest sales tool.
   ========================================================================== */
.led-sim-panel {
  margin-top: var(--space-xl);
  background: var(--color-navy-light);
  border: 1px solid var(--color-border-inverse);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.led-sim-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border-inverse);
}
.led-sim-control-group { display: flex; align-items: center; gap: var(--space-sm); }
.led-sim-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted-inverse);
}

.led-sim-toggle {
  display: inline-flex;
  align-items: center;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: rgba(6, 16, 31, 0.4);
  border: 1px solid var(--color-border-inverse);
}
.led-sim-toggle-btn {
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-muted-inverse);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.led-sim-toggle-btn.is-active { background: rgba(255, 255, 255, 0.12); color: #fff; }

.led-sim-swatches { display: flex; align-items: center; gap: var(--space-xs); }
.led-sim-swatch {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted-inverse);
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}
.led-sim-swatch svg { width: 16px; height: 16px; }
.led-sim-swatch:hover { transform: scale(1.08); }
.led-sim-swatch.is-active { border-color: #fff; }
.led-sim-swatch--warm-white { background: #FFE3A3; box-shadow: 0 0 14px rgba(255, 210, 130, 0.5); }
.led-sim-swatch--cool-white { background: #E7F5FF; box-shadow: 0 0 14px rgba(180, 225, 255, 0.5); }
.led-sim-swatch--rgb {
  background: conic-gradient(from 0deg, #FF5C5C, #FFD84D, #4DFF88, #4DD2FF, #B04DFF, #FF5C5C);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.35);
}
.led-sim-swatch--off { background: rgba(255, 255, 255, 0.06); }

/* Photo storefront scene (2026-10-04, pass 3). Replaces the pure-CSS strip
   mall: a real shopping-center photo with 3 blank sign boards. All overlay
   positions are percentages of the 1408x768 photo, so they stay glued to
   the photo at any size. The scene is cropped (top sky / bottom ground)
   on desktop and zoomed onto the center sign on phones. */
.led-sim-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1408 / 614;
  container-type: inline-size;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border-inverse);
  background: #0B1424;
}
.led-sim-scene {
  position: absolute;
  left: 0;
  top: -15%;
  width: 100%;
  aspect-ratio: 1408 / 768;
  container-type: inline-size;
}
.led-sim-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter var(--transition-slow);
}
.led-sim-stage.is-night .led-sim-photo { filter: brightness(0.42) saturate(0.7) hue-rotate(8deg); }
.led-sim-night-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(5, 10, 28, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-slow);
}
.led-sim-stage.is-night .led-sim-night-overlay { opacity: 1; }

/* Shops' windows glow from inside at night */
.led-sim-window {
  position: absolute;
  z-index: 2;
  top: 55.4%;
  height: 28.9%;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  background: linear-gradient(180deg, rgba(255, 214, 150, 0.8) 0%, rgba(255, 170, 80, 0.55) 100%);
  transition: opacity var(--transition-slow);
}
.led-sim-window--left { left: 15.1%; width: 19.9%; }
.led-sim-window--main { left: 40.1%; width: 20.4%; }
.led-sim-window--right { left: 65.5%; width: 20.1%; }
.led-sim-stage.is-night .led-sim-window { opacity: 0.38; }
.led-sim-stage.is-night .led-sim-window--main { opacity: 0.7; }

/* Dark sign panels laid over the three blank boards in the photo */
.led-sim-board {
  position: absolute;
  z-index: 3;
  top: 37%;
  height: 12.9%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: linear-gradient(180deg, #14213A 0%, #0C1526 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.07), inset 0 6px 14px rgba(0, 0, 0, 0.45);
}
.led-sim-board--left { left: 15.3%; width: 19%; }
.led-sim-board--main { left: 40.7%; width: 19.2%; padding: 0 1%; }
.led-sim-board--right { left: 66.2%; width: 18.8%; }
.led-sim-board > span { display: block; width: 62%; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.24); }
.led-sim-board > span + span { width: 38%; }
.led-sim-sign-frame { width: 100%; text-align: center; overflow: hidden; }

@property --led-glow {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(255, 179, 71, 0.5);
}
/* LED light spill on the wall/glass below the sign — night only; color
   follows the selected LED via data-led-color on the stage (script.js). */
.led-sim-spill {
  position: absolute;
  left: 50%;
  top: 22%;
  width: 58%;
  height: 70%;
  z-index: 4;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  --led-glow: rgba(255, 179, 71, 0.5);
  background: radial-gradient(ellipse 60% 62% at 50% 30%, var(--led-glow) 0%, transparent 100%);
  transition: opacity var(--transition-slow);
}
.led-sim-stage.is-night .led-sim-spill { opacity: 1; }
.led-sim-stage[data-led-color="cool-white"] .led-sim-spill { --led-glow: rgba(127, 212, 255, 0.5); }
.led-sim-stage[data-led-color="off"] .led-sim-spill { --led-glow: rgba(0, 0, 0, 0); }
.led-sim-stage[data-led-color="rgb"] .led-sim-spill { animation: ledSimSpillCycle 6s linear infinite; }
@keyframes ledSimSpillCycle {
  0%, 100% { --led-glow: rgba(255, 92, 92, 0.5); }
  25%      { --led-glow: rgba(255, 216, 77, 0.5); }
  50%      { --led-glow: rgba(77, 255, 136, 0.5); }
  75%      { --led-glow: rgba(77, 210, 255, 0.5); }
}
@media (prefers-reduced-motion: reduce) {
  .led-sim-stage[data-led-color="rgb"] .led-sim-spill { animation: none; --led-glow: rgba(77, 210, 255, 0.5); }
}

.led-sim-sign-text {
  display: block;
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: 0.02em;
  font-size: 20px;
  font-size: 2.1cqw;
  text-transform: uppercase;
  color: #4A5568;
  /* Metal "returns" (the sides of channel letters): stacked hard shadows */
  --led-depth: 1px 1px 0 #6B7280, 2px 2px 0 #4B515B, 3px 3px 0 #2F343C;
  text-shadow: var(--led-depth);
  transition: color 0.5s ease, text-shadow 0.5s ease;
  white-space: nowrap;
}
.led-sim-sign-text.lit-warm-white {
  color: #FFF3D6;
  text-shadow: var(--led-depth), 0 0 6px #fff, 0 0 16px #FFC966, 0 0 32px #FFB347, 0 0 60px rgba(255, 179, 71, 0.6);
}
.led-sim-sign-text.lit-cool-white {
  color: #F2FBFF;
  text-shadow: var(--led-depth), 0 0 6px #fff, 0 0 16px #BFE9FF, 0 0 32px #7FD4FF, 0 0 60px rgba(127, 212, 255, 0.6);
}
.led-sim-sign-text.lit-rgb {
  color: #fff;
  animation: ledSimRgbCycle 6s linear infinite;
}
.led-sim-sign-text.off { color: #3A4356; text-shadow: var(--led-depth); }

@keyframes ledSimRgbCycle {
  0%   { text-shadow: var(--led-depth), 0 0 6px #fff, 0 0 16px #FF5C5C, 0 0 32px #FF5C5C, 0 0 60px rgba(255, 92, 92, 0.6); }
  25%  { text-shadow: var(--led-depth), 0 0 6px #fff, 0 0 16px #FFD84D, 0 0 32px #FFD84D, 0 0 60px rgba(255, 216, 77, 0.6); }
  50%  { text-shadow: var(--led-depth), 0 0 6px #fff, 0 0 16px #4DFF88, 0 0 32px #4DFF88, 0 0 60px rgba(77, 255, 136, 0.6); }
  75%  { text-shadow: var(--led-depth), 0 0 6px #fff, 0 0 16px #4DD2FF, 0 0 32px #4DD2FF, 0 0 60px rgba(77, 210, 255, 0.6); }
  100% { text-shadow: var(--led-depth), 0 0 6px #fff, 0 0 16px #FF5C5C, 0 0 32px #FF5C5C, 0 0 60px rgba(255, 92, 92, 0.6); }
}

@media (max-width: 640px) {
  .led-sim-controls { flex-direction: column; align-items: flex-start; }
  /* Phones: zoom the photo onto the center sign instead of shrinking it */
  .led-sim-stage { aspect-ratio: auto; height: 290px; }
  .led-sim-scene { width: 300%; left: -100.9%; top: calc(95px - 71.17cqw); }
}

@media (prefers-reduced-motion: reduce) {
  .led-sim-sign-text.lit-rgb {
    animation: none;
    text-shadow: var(--led-depth), 0 0 6px #fff, 0 0 16px #4DD2FF, 0 0 32px #4DD2FF, 0 0 60px rgba(77, 210, 255, 0.6);
  }
}

/* ---------- LED Sign Simulator — business name input, letter styles,
   and CTA. Added 2026-09-30, follow-up to the 2026-09-30 LED simulator
   above. Font stacks are system-only (no webfont network dependency,
   matching the rest of the site). ---------- */
.led-sim-control-group--name { flex: 1 1 220px; flex-direction: column; align-items: flex-start; gap: 6px; }
.led-sim-name-input {
  width: 100%;
  max-width: 320px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-inverse);
  background: rgba(6, 16, 31, 0.4);
  color: #fff;
  font-size: 14px;
  font-family: var(--font-sans);
}
.led-sim-name-input::placeholder { color: var(--color-text-muted-inverse); }
.led-sim-name-input:focus { outline: none; border-color: var(--color-accent); }

.led-sim-fonts { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.led-sim-font-btn {
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-inverse);
  background: rgba(6, 16, 31, 0.4);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted-inverse);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.led-sim-font-btn.is-active { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.3); color: #fff; }

/* Letter styles — system font stacks only */
.led-sim-sign-text.font-sans { font-family: var(--font-sans); font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; }
.led-sim-sign-text.font-condensed {
  font-family: var(--font-sans);
  font-weight: 800;
  font-stretch: condensed;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.led-sim-sign-text.font-script {
  font-family: "Brush Script MT", "Segoe Script", "Bradley Hand", cursive;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.led-sim-sign-text.font-serif {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.led-sim-cta {
  margin-top: var(--space-xl);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  text-align: center;
}
.led-sim-cta-text { font-size: 16px; color: var(--color-text-muted-inverse); margin: 0; }

@media (max-width: 640px) {
  .led-sim-control-group--name { flex-basis: 100%; }
  .led-sim-name-input { max-width: 100%; }
}

/* ---------- Floating WhatsApp button — injected by script.js, site-wide.
   Added 2026-10-02. Uses WhatsApp's own brand green (universally
   recognized), not the site's navy/orange — this is an external-service
   icon, not a brand element. ---------- */
.whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 400;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.35);
  transition: transform var(--transition-fast), bottom var(--transition-base);
}
.whatsapp-float:hover { transform: scale(1.06); }
.whatsapp-float svg { width: 30px; height: 30px; }
.whatsapp-float--raised { bottom: 104px; }

@media (max-width: 480px) {
  .whatsapp-float { width: 50px; height: 50px; right: 16px; bottom: 16px; }
  .whatsapp-float svg { width: 26px; height: 26px; }
  .whatsapp-float--raised { bottom: 170px; }
  /* Keep the last lines of every page clear of the floating button. */
  body.theme-creative { padding-bottom: 72px; }
}


/* ==========================================================================
   Paleta corporativa (2026-10-04) — naranja, azul marino, grises, blanco, negro
   El tema "creative" ahora usa estos tokens (ver body.theme-creative arriba:
   --tc-cyan = naranja claro #FF8A3D, --tc-magenta = naranja #FF5C00).
   REGLA DE CONTRASTE: nunca texto blanco sobre naranja (3.1:1). Sobre naranja
   va texto marino-negro #06101F (6.2:1). Naranja claro #FF8A3D sobre marino
   da 7:1.
   ========================================================================== */
body.theme-creative { background: linear-gradient(180deg, #06101F 0%, #0B1E3D 100%); background-color: #06101F; }

/* Menú principal: Start a Project */
body.theme-creative .primary-nav a.nav-start {
  color: var(--tc-cyan); font-weight: 700;
  border: 1px solid rgba(255, 138, 61, 0.55); border-radius: 99px; padding: 6px 14px;
}
body.theme-creative .primary-nav a.nav-start:hover { background: rgba(255, 138, 61, 0.16); color: #fff; }
body.theme-creative .primary-nav a.nav-start[aria-current="page"] { background: var(--tc-cyan); color: #06101F; }

/* Home: enlace bajo los botones del hero */
.hero-start-link { margin-top: 14px; font-size: 15px; color: var(--tc-muted, #B7C1D4); }
.hero-start-link a { color: var(--tc-cyan, #FF8A3D); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.hero-start-link a:hover { color: #fff; }

/* Marca de agua: plano de rótulo. Se coloca como <div class="bp-mark"> dentro de la sección. */
.bp-watermark { position: relative; isolation: isolate; overflow: hidden; }
.bp-mark {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .09;
  background: url("/assets/images/start-project/blueprint-dark.svg") no-repeat right -140px center / 980px auto;
}
.bp-mark--light { opacity: .16; background-image: url("/assets/images/start-project/blueprint-light.svg"); }
@media (max-width: 700px) { .bp-mark { background-size: 720px auto; background-position: right -260px bottom -20px; } }

/* Secciones claras (gris/blanco): se redefinen los tokens del tema SOLO dentro de la sección,
   así todo lo que ya usa var(--tc-*) cambia a texto marino sobre fondo claro.
   Contraste: marino #0B1E3D sobre blanco 16:1, gris #4A5568 sobre blanco 7.5:1,
   naranja oscuro #B84000 (texto) sobre blanco 5.6:1. */
body.theme-creative .sec-light {
  --tc-bg: #F4F5F7; --tc-card: #FFFFFF; --tc-card-alt: #EEF1F6; --tc-border: rgba(11, 30, 61, 0.14);
  --tc-text: #0B1E3D; --tc-muted: #4A5568; --tc-cyan: #B84000; --tc-magenta: #C23F00; --tc-gold: #B84000;
  background: linear-gradient(180deg, #FFFFFF 0%, #F4F5F7 100%); color: #0B1E3D;
}
body.theme-creative .sec-light.section-surface, body.theme-creative .capabilities.sec-light { background: linear-gradient(180deg, #F4F5F7 0%, #FFFFFF 100%); }
body.theme-creative .sec-light .btn-primary { background: linear-gradient(135deg, #FF7A1F, #FF5C00); color: #06101F; }
body.theme-creative .sec-light .btn-secondary { background: transparent; color: #0B1E3D; border: 2px solid #0B1E3D; backdrop-filter: none; }
body.theme-creative .sec-light .btn-secondary:hover { background: #0B1E3D; color: #fff; }

/* Home: banda "Start Your Project" (clara) */
.start-band { padding: var(--space-xl) 0; border-top: 1px solid rgba(11, 30, 61, .1); border-bottom: 1px solid rgba(11, 30, 61, .1); }
.start-band-inner { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-lg); align-items: center; }
body.theme-creative .start-band .eyebrow { color: #B84000; }
body.theme-creative .start-band .section-title { color: #0B1E3D; max-width: 18ch; }
.start-band-lede { margin: var(--space-sm) 0 var(--space-md); color: #4A5568; max-width: 46ch; }
.start-band .bp-mark--light { opacity: .09; }
.start-band-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.start-band-chips a {
  display: inline-block; padding: 10px 18px; border-radius: 99px; font-weight: 700; font-size: 15px; text-decoration: none;
  color: #0B1E3D; background: #fff; border: 2px solid #0B1E3D; transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.start-band-chips a:hover, .start-band-chips a:focus-visible { background: linear-gradient(135deg, #FF7A1F, #FF5C00); color: #06101F; border-color: transparent; }
@media (max-width: 800px) { .start-band-inner { grid-template-columns: 1fr; } .start-band { padding: var(--space-lg) 0; } }

/* Banda naranja de mitad de página: texto oscuro (blanco sobre naranja no pasa AA) */
.mid-cta-band { background: linear-gradient(120deg, #FF7A1F 0%, #FF5C00 100%); }
.mid-cta-text { color: #06101F; }
body.theme-creative .mid-cta-band .btn-primary { background: #06101F; color: #fff; border-color: #06101F; }
body.theme-creative .mid-cta-band .btn-primary:hover { background: #0B1E3D; }
body.theme-creative .mid-cta-band .btn-secondary { background: transparent; color: #06101F; border: 2px solid #06101F; }
body.theme-creative .mid-cta-band .btn-secondary:hover { background: #06101F; color: #fff; }
.mid-cta-inner { gap: var(--space-md); }

/* Fotos: encuadre en el PRODUCTO (rótulo, letras, vehículo), no en el entorno */
.portfolio-card[data-category="channel-letters"] .portfolio-photo { object-position: 50% 28%; }
.portfolio-card[data-category="storefront"] .portfolio-photo { object-position: 50% 30%; }
.portfolio-card[data-category="interior"] .portfolio-photo { object-position: 50% 40%; }
.portfolio-card[data-category="vehicle"] .portfolio-photo { object-position: 50% 55%; }
.portfolio-card[data-category="print"] .portfolio-photo { object-position: 50% 58%; }
body.theme-creative .sec-light .eyebrow { color: #B84000; }
body.theme-creative .sec-light .text-link, body.theme-creative .sec-light .capabilities-links a { color: #B84000; }


/* ---------- Hero video (2026-10-07) ----------
   Sits on top of the hero photo and fades in once it is really playing,
   so the photo is the first frame and the fallback. */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}
.hero-video.is-playing { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
}

/* ---------- Hero fits the first screen (2026-10-07) ----------
   The hero used to be taller than the window on laptops: a 4-line headline
   pushed the buttons below the fold and left a big empty band under the
   menu. Now the hero is exactly one screen tall (minus nothing: the fixed
   menu overlays the top), content is centered, the headline is smaller and
   sized by BOTH width and height so it always fits. */
.hero {
  min-height: 100vh;
  min-height: 100svh;
}
.hero-inner {
  padding-top: calc(var(--header-height) + var(--space-lg));
  padding-bottom: var(--space-lg);
}
@media (min-width: 1024px) {
  .hero-headline {
    font-size: clamp(40px, min(5.2vw, 8.6vh), 76px);
    max-width: none;
  }
  .hero-copy { max-width: 680px; }
  .hero-tagline { margin-top: var(--space-sm); }
  .hero-actions { margin-top: var(--space-md); }
  .hero-showcase-frame img { aspect-ratio: 4 / 4.6; max-height: 66svh; }
}

/* Anchor the hero copy near the top, right under the menu, instead of
   floating in the middle (2026-10-07, second pass). */
.hero { align-items: flex-start; }
.hero-inner { padding-top: calc(var(--header-height) + clamp(24px, 7vh, 72px)); }
@media (min-width: 1024px) {
  .hero-inner--split { align-items: flex-start; }
  .hero-showcase { margin-top: clamp(0px, 1vh, 12px); }
}

/* Third pass: the menu is NOT fixed (the hero starts right below it) and the
   hero had its own 84px top/bottom padding, so the copy sat ~190px under the
   menu. Remove that padding; the hero is exactly the rest of the screen. */
.hero {
  padding-top: 0;
  padding-bottom: 0;
  min-height: calc(100vh - var(--header-height));
  min-height: calc(100svh - var(--header-height));
}
.hero-inner { padding-top: clamp(28px, 7vh, 72px); padding-bottom: var(--space-xl); }

/* Fourth pass: balance. Slightly larger headline on tall screens and a bit
   more room under the menu so the block sits visually centered. */
.hero-inner { padding-top: clamp(32px, 9vh, 96px); }
@media (min-width: 1024px) {
  .hero-headline { font-size: clamp(40px, min(5.8vw, 10vh), 88px); }
  .hero-actions { margin-top: var(--space-md); }
  .hero-stats { margin-top: var(--space-md); }
}

/* ---------- Language switch (EN | ES) and suggestion bar (2026-10-11) ---------- */
.lang-switch {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 36px; padding: 0 10px; border-radius: 99px;
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-decoration: none;
  color: var(--tc-text, #fff); border: 1px solid rgba(255, 255, 255, .35);
}
.lang-switch:hover { background: #fff; color: #06101F; border-color: #fff; }
.lang-switch:focus-visible { outline: 3px solid #FF8A3D; outline-offset: 2px; }
.lang-switch--mobile { width: 100%; height: 48px; font-size: 15px; grid-column: 1 / -1; }
.header-actions .lang-switch { margin-right: 4px; }
.lang-banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px;
  padding: 10px 16px; background: #0B1E3D; color: #fff; border-bottom: 2px solid #FF5C00; font-size: 15px;
}
.lang-banner p { margin: 0; }
.lang-banner-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.lang-banner-yes, .lang-banner-no {
  min-height: 40px; padding: 0 14px; border-radius: 99px; font: inherit; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; text-decoration: none;
}
.lang-banner-yes { background: #FF8A3D; color: #06101F; border: 0; }
.lang-banner-no { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .5); }
@media (max-width: 860px) { .header-actions .lang-switch { display: none; } }

/* Aviso de idioma: se oculta mientras el menú móvil está abierto (evita encimarse con el header) */
body:has(.mobile-menu.is-open) .lang-banner { display: none; }

/* Botón "Design yours online with AI" dentro de la tarjeta de impresión: separado de las etiquetas */
.service-category-body .service-category-cta { margin: 20px 0 0; position: relative; clear: both; }
.service-category-body .builder-services { margin-bottom: 0; }
.hero-ai-link { margin-top: 6px; }
.page-hero-cta { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Consentimiento en formularios (2026-10-15) ---------- */
.consent-block { display: grid; gap: 12px; margin: 18px 0 10px; }
.consent-check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 15px; line-height: 1.45; }
.consent-check input[type="checkbox"] { flex: none; width: 24px; height: 24px; margin: 1px 0 0; accent-color: #FF6A00; cursor: pointer; }
.consent-check input[type="checkbox"]:focus-visible { outline: 3px solid #FF6A00; outline-offset: 2px; }
.consent-check a { text-decoration: underline; font-weight: 700; }
.consent-sub { display: block; font-size: 13.5px; line-height: 1.45; opacity: .85; margin-top: 3px; }
.consent-sub-main { margin-top: 0; font-size: 14px; }
.consent-block .sp-req { color: #FF6A00; font-weight: 700; }
.consent-error { margin: 0; font-weight: 700; color: #B33A00; }
body.theme-creative .quote-form-section .consent-error { color: #FFB27A; }
body.theme-creative .quote-form-section .consent-check { color: inherit; }
body.theme-creative .quote-form-section .consent-check a { color: #FF8A3D; }

/* ---- Home service cards: illustration that pops out of the card ---- */
.services-grid--pop { row-gap: 84px; margin-top: 56px; }
.service-tile--pop { position: relative; overflow: visible; }
.service-tile--pop .service-tile-pop { position: absolute; z-index: 3; top: -64px; right: 14px; width: 62%; max-width: 250px; height: auto; pointer-events: none; filter: drop-shadow(0 16px 16px rgba(0,0,0,.45)); transform-origin: 50% 85%; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.service-tile--pop:hover .service-tile-pop { transform: translateY(-10px) scale(1.06) rotate(-1.5deg); }
@media (max-width: 599px) {
  .services-grid--pop { row-gap: 62px; margin-top: 44px; }
  .service-tile--pop .service-tile-pop { top: -42px; width: 52%; max-width: 190px; right: 8px; }
}
@media (prefers-reduced-motion: reduce) { .service-tile--pop .service-tile-pop { transition: none; } .service-tile--pop:hover .service-tile-pop { transform: none; } }