/* Blue Ladder Construction — shared styles */
html { scroll-behavior: smooth; }
body {
  font-family: 'Roboto', sans-serif;
  color: #1C2330;
  background: #F0F2F5;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
.font-display { font-family: 'Oswald', sans-serif; letter-spacing: -0.01em; }
.font-mono { font-family: 'JetBrains Mono', monospace; }
.display-xl { font-size: clamp(3rem, 8vw, 7rem); line-height: 0.95; letter-spacing: -0.03em; }
.display-lg { font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1; letter-spacing: -0.02em; }
.display-md { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.05; letter-spacing: -0.01em; }
.eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500; }

/* Blueprint grid */
.blueprint-grid {
  background-image:
    linear-gradient(rgba(91, 127, 181, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91, 127, 181, 0.12) 1px, transparent 1px);
  background-size: 48px 48px;
}
.blueprint-grid-dark {
  background-image:
    linear-gradient(rgba(240, 242, 245, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240, 242, 245, 0.06) 1px, transparent 1px);
  background-size: 64px 64px;
}

/* Ticker */
@keyframes ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.ticker-track { animation: ticker 45s linear infinite; }

/* Buttons */
.btn-primary {
  display: inline-flex; align-items: center; gap: 12px;
  background: #1B2E6B; color: #F0F2F5;
  padding: 18px 32px;
  font-family: 'Oswald', sans-serif; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; font-size: 14px;
  transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1), background 200ms;
  border: 1px solid #1B2E6B;
  cursor: pointer;
}
.btn-primary:hover { background: #0F1F4F; transform: translateY(-2px); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:focus-visible { outline: 2px solid #5B7FB5; outline-offset: 3px; }
.btn-primary .arrow { transition: transform 300ms; }
.btn-primary:hover .arrow { transform: translateX(6px); }

.btn-outline {
  display: inline-flex; align-items: center; gap: 12px;
  background: transparent; color: #1C2330;
  padding: 17px 31px;
  border: 1px solid #1C2330;
  font-family: 'Oswald', sans-serif; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; font-size: 14px;
  transition: all 250ms;
  cursor: pointer;
}
.btn-outline:hover { background: #1C2330; color: #F0F2F5; transform: translateY(-2px); }
.btn-outline:focus-visible { outline: 2px solid #5B7FB5; outline-offset: 3px; }

.btn-light {
  display: inline-flex; align-items: center; gap: 12px;
  background: #F0F2F5; color: #1B2E6B;
  padding: 18px 32px;
  font-family: 'Oswald', sans-serif; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; font-size: 14px;
  transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1), background 200ms;
  border: 1px solid #F0F2F5;
  cursor: pointer;
}
.btn-light:hover { background: #fff; transform: translateY(-2px); }
.btn-light:focus-visible { outline: 2px solid #5B7FB5; outline-offset: 3px; }
.btn-light .arrow { transition: transform 300ms; }
.btn-light:hover .arrow { transform: translateX(6px); }

/* Service card */
.service-card {
  position: relative; overflow: hidden;
  background: #F0F2F5;
  border: 1px solid rgba(28, 35, 48, 0.12);
  transition: all 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
  text-decoration: none; color: inherit;
  display: block;
}
.service-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, #1B2E6B, #2A4A8C);
  opacity: 0; transition: opacity 400ms; z-index: 0;
}
.service-card > * { position: relative; z-index: 1; transition: color 300ms; }
.service-card:hover { transform: translateY(-4px); border-color: #1B2E6B; }
.service-card:hover::after { opacity: 1; }
.service-card:hover .service-num,
.service-card:hover .service-title,
.service-card:hover .service-desc { color: #F0F2F5; }
.service-card:hover .service-icon { stroke: #F0F2F5; }
.service-card:hover .service-arrow { color: #F0F2F5; transform: translate(4px, -4px); }

/* Nav underline */
.nav-link { position: relative; text-decoration: none; }
.nav-link::after {
  content: ''; position: absolute;
  left: 0; bottom: -6px; height: 2px; width: 0;
  background: #1B2E6B;
  transition: width 300ms ease;
}
.nav-link:hover::after, .nav-link[aria-current="page"]::after { width: 100%; }
.nav-link[aria-current="page"] { color: #1B2E6B; }

/* Divider / stat line */
.stat-line { background: linear-gradient(90deg, transparent, #5B7FB5, transparent); height: 1px; }
.divider-line { background: #1C2330; height: 1px; }

/* Project card */
.project-card { position: relative; overflow: hidden; display: block; text-decoration: none; color: inherit; }
.project-card img { transition: transform 800ms cubic-bezier(0.2, 0.8, 0.2, 1); display: block; }
.project-card:hover img { transform: scale(1.06); }
.project-card .overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(27, 46, 107, 0.95) 0%, rgba(27, 46, 107, 0.4) 50%, transparent 90%);
  mix-blend-mode: multiply;
}
.project-card .meta {
  position: absolute; left: 24px; right: 24px; bottom: 24px;
  color: #F0F2F5;
  transform: translateY(8px); opacity: 0.9;
  transition: transform 500ms, opacity 300ms;
}
.project-card:hover .meta { transform: translateY(0); opacity: 1; }

/* Reveal animations */
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.reveal { animation: fadeUp 800ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.d-1 { animation-delay: 100ms; }
.d-2 { animation-delay: 200ms; }
.d-3 { animation-delay: 300ms; }
.d-4 { animation-delay: 400ms; }
.d-5 { animation-delay: 500ms; }
.d-6 { animation-delay: 600ms; }

/* Hero image treatment */
.hero-image-wrap { position: relative; overflow: hidden; }
.hero-image-wrap::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(27, 46, 107, 0.35) 0%, rgba(28, 35, 48, 0.6) 100%);
  mix-blend-mode: multiply;
}
.hero-image-wrap img { filter: grayscale(0.3) contrast(1.05); }

/* Mobile menu */
.mobile-menu { max-height: 0; overflow: hidden; transition: max-height 400ms ease; }
.mobile-menu.open { max-height: 500px; }

/* Form controls */
.form-input, .form-textarea, .form-select {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(28, 35, 48, 0.25);
  padding: 14px 0;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  color: #1C2330;
  transition: border-color 250ms;
  border-radius: 0;
  outline: none;
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-bottom-color: #1B2E6B;
}
.form-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8D9EAB;
  margin-bottom: 6px;
  display: block;
}
.form-textarea { resize: vertical; min-height: 120px; }

/* Page hero */
.page-hero {
  position: relative;
  background: #F0F2F5;
  border-bottom: 1px solid rgba(28, 35, 48, 0.1);
  overflow: hidden;
}

/* Blueprint corner marks */
.corner-marks { position: relative; }
.corner-marks::before, .corner-marks::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid currentColor;
  opacity: 0.4;
}
.corner-marks::before { top: 0; left: 0; border-right: none; border-bottom: none; }
.corner-marks::after { bottom: 0; right: 0; border-left: none; border-top: none; }

/* FAQ accordion */
.faq-item { border-bottom: 1px solid rgba(28, 35, 48, 0.12); }
.faq-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 0;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: #1C2330;
  transition: color 200ms;
}
.faq-trigger:hover { color: #1B2E6B; }
.faq-trigger .plus { transition: transform 300ms; flex-shrink: 0; }
.faq-trigger[aria-expanded="true"] .plus { transform: rotate(45deg); }
.faq-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 400ms ease;
}
.faq-panel-inner { padding-bottom: 28px; color: rgba(28, 35, 48, 0.75); line-height: 1.7; max-width: 720px; }

/* Footer logo brightness — avoids inline style so strict CSP can drop unsafe-inline */
.logo-footer { filter: brightness(1.8) contrast(1.1); }

/* Badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(27, 46, 107, 0.08);
  color: #1B2E6B;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
}