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

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

.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;
  padding: var(--space-2xl) 0;
}
.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;
}
.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);
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .hero .reveal { opacity: 1 !important; transform: none !important; transition: 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;
  border-radius: var(--radius-lg);
  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: calc(var(--radius-lg) - 7px);
  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 ---------- */
.process { background: var(--color-navy); color: var(--color-text-inverse); }
.process-sequence {
  margin-top: var(--space-2xl);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-md);
  position: relative;
}
.process-sequence::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 4%;
  right: 4%;
  height: 1px;
  background: var(--color-border-inverse);
}
.process-step {
  position: relative;
  isolation: isolate;
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  transition: transform var(--transition-base);
}
.process-step:hover,
.process-step:focus-within { transform: translateY(-4px); }

/* 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: -1;
  border-radius: inherit;
  background: radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 30%), rgba(255, 92, 0, 0.24), 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-number {
  display: inline-flex;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: var(--space-md);
  position: relative;
  z-index: 1;
}
.process-step h3 { display: flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 600; margin-bottom: 8px; letter-spacing: -0.01em; }
.process-step p { 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: 960px) {
  .process-sequence { grid-template-columns: repeat(3, 1fr); row-gap: var(--space-xl); }
  .process-sequence::before { display: none; }
}
@media (max-width: 599px) {
  .process-sequence { grid-template-columns: repeat(2, 1fr); }
}

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

/* "Recent work" preview cards only — black & white by default, the sign
   "turns on" (full color + a warm illumination glow) on hover/focus. The
   full /portfolio/ page is untouched. */
.portfolio-preview .portfolio-media { position: relative; display: block; overflow: hidden; }
.portfolio-preview .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 .portfolio-card:hover .portfolio-photo,
.portfolio-preview .portfolio-card:focus-within .portfolio-photo {
  filter: grayscale(0) brightness(1.04) contrast(1.05) saturate(1.15);
}
.portfolio-preview .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 .portfolio-card:hover .portfolio-media::after,
.portfolio-preview .portfolio-card:focus-within .portfolio-media::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .portfolio-preview .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;
}

/* ---------- Quote CTA band ---------- */
.quote-band { background: var(--color-ink); color: #fff; text-align: center; }
.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;
}

/* ---------- Footer ---------- */
.site-footer { background: var(--color-ink); color: var(--color-text-muted-inverse); padding-top: var(--space-2xl); }
.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; }
.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: var(--radius-lg);
  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; }
.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: calc(var(--radius-lg) - 7px);
  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; }
}

/* ---------- 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-nav {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: var(--space-lg);
}
.quote-form:not(.is-enhanced) .quote-nav [data-quote-back],
.quote-form:not(.is-enhanced) .quote-nav [data-quote-next] { 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%; }
}