/* ==========================================================================
   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: 148px;

  /* 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;
}
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-2xl) 0; } }
@media (max-width: 599px) { section { padding: var(--space-xl) 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); }

.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%; }

@media (max-width: 860px) {
  .primary-nav { display: none; }
  .menu-toggle { display: flex; }
  .header-actions .icon-btn { display: none; }
}
@media (max-width: 560px) {
  .header-actions .btn { display: none; }
  .logo { font-size: 15px; }
}
@media (min-width: 861px) {
  .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;
  padding-top: var(--header-height);
}

.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; }
/* 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-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; }

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

/* ---------- 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; }

.builder { margin-top: var(--space-xl); }
.builder-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: var(--space-xl);
}
.builder-tile {
  padding: 12px 26px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-white);
  transition: all var(--transition-fast);
}
.builder-tile:hover { border-color: var(--color-navy); }
.builder-tile.is-active {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: #fff;
}

.builder-panels { position: relative; }
.builder-panel { display: none; }
.builder.is-enhanced .builder-panel { display: none; }
.builder.is-enhanced .builder-panel.is-active { display: block; }
.builder:not(.is-enhanced) .builder-panel { display: block; margin-bottom: var(--space-xl); }

.builder-panel-title { font-size: 22px; font-weight: 600; margin-bottom: var(--space-md); letter-spacing: -0.01em; }
.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/ ---------- */
.page-hero {
  background: var(--color-navy);
  color: #fff;
  padding: calc(var(--space-3xl) + var(--header-height)) 0 var(--space-2xl);
}
.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-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-white); }
.service-category {
  padding: var(--space-xl) 0;
  border-bottom: 1px solid var(--color-border);
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--space-xl);
  align-items: center;
}
.service-category:last-child { border-bottom: none; }
.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; }

/* 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 page details ---------- */
.contact-details {
  margin-top: var(--space-xl);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}
.contact-detail {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-md);
}
.contact-detail h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}
.contact-detail a, .contact-detail p { font-size: 19px; 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; }
@media (max-width: 760px) { .contact-details { grid-template-columns: 1fr; } }

/* ---------- 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 { background: var(--color-navy); color: #fff; padding: calc(var(--space-3xl) + var(--header-height)) 0 var(--space-2xl); text-align: center; }
.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; }
}