/* =============================================================================
   Theme: T2 Flagship — Authoritative Regional Service
   Domains: dfwprinter.com, dfwprinter.tech
   Style: Swiss Modernism 2.0 — serif display, structured grid, navy/gold
   Font: Playfair Display (display) + Inter (body)
   Palette: navy primary, bold orange/gold accent, white bg
   ============================================================================= */

/* Flagship font stack */
@import url('https://fonts.bunny.net/css?family=playfair-display:400,700,900|inter:300,400,500,600,700&display=swap');

:root {
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --flagship-border: 3px solid var(--color-primary);
}

body { font-family: var(--font-body); }

/* ── Nav — authoritative serif wordmark ─────────────────────────────────── */
.site-header {
  background: #fff;
  border-bottom: 3px solid var(--color-primary);
  position: sticky; top: 0; z-index: 100;
}
.site-logo-text {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-primary);
}

/* ── Hero — editorial split with large serif headline ─────────────────── */
.hero--split {
  background: #fff;
  padding: 5rem 0 4rem;
  position: relative;
  overflow: hidden;
}
.hero--split::after {
  content: '';
  position: absolute;
  right: 0; top: 0;
  width: 42%;
  height: 100%;
  background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 80%, #000) 100%);
  clip-path: polygon(8% 0%, 100% 0%, 100% 100%, 0% 100%);
  z-index: 0;
}
.hero--split .container { position: relative; z-index: 1; }
.hero--split .hero-inner { gap: 0; }
.hero--split .hero-content { padding-right: 3rem; }
.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  font-weight: 900;
  line-height: 1.1;
  color: var(--color-primary);
  letter-spacing: -0.03em;
  margin-bottom: 1.5rem;
}
.hero-sub {
  font-size: 1.15rem;
  line-height: 1.7;
  color: #4a5263;
  max-width: 480px;
}
.hero--split .hero-graphic {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero--split .hero-graphic svg {
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.25));
}

/* stat bar below hero */
.hero-stat-bar {
  display: flex;
  gap: 2rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid #e2e6ef;
}
.hero-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 900;
  color: var(--color-accent);
  line-height: 1;
}
.hero-stat span {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b7489;
  font-weight: 600;
}

/* ── Accent stripe divider ──────────────────────────────────────────────── */
.flagship-stripe {
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 60%, transparent 100%);
}

/* ── Section titles — serif display ────────────────────────────────────── */
.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-primary);
}

/* ── Value props — left-border card style ──────────────────────────────── */
.prop-card {
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding-left: 1.5rem;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04);
}
.prop-icon { color: var(--color-accent); }
.prop-title { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; }

/* ── Service cards — clean with primary-top accent ─────────────────────── */
.service-card {
  border-top: 3px solid var(--color-primary);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.service-card:hover { border-top-color: var(--color-accent); }
.service-card-title { font-family: var(--font-display); font-weight: 700; }

/* ── Proof band — navy bg with serif numerals ──────────────────────────── */
.proof-section { background: var(--color-primary); }
.proof-stat {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 900;
  color: var(--color-accent);
}
.proof-label { color: rgba(255,255,255,.75); font-size: 0.85rem; }

/* ── CTA band — accent diagonal ─────────────────────────────────────────── */
.cta-band {
  background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 70%, #000) 100%);
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute;
  top: -50%; right: -10%;
  width: 500px; height: 500px;
  background: radial-gradient(circle, var(--color-accent) 0%, transparent 65%);
  opacity: 0.12;
}

/* ── Buttons — chunky primary ───────────────────────────────────────────── */
.btn-accent {
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.9rem;
}