/* ============================================================================
   PACK: Bold Modern
   Crisp white canvas, near-black ink, ONE electric-blue accent used as flat
   high-contrast COLOR BLOCKS. Heavy Archivo headings, sharp corners (radius 0),
   zero soft glows. Best for roofing, concrete, construction + performance trades
   that want loud, blocky, confident.
   Scoped under body.pack-bold-modern so it only applies when opted in; it
   restyles the shared .x-* kit, so it drops straight into the generator later.
   ============================================================================ */
body.pack-bold-modern {
  --brand-bg: #FFFFFF;
  --brand-bg-alt: #F4F5F7;
  --brand-text: #0E1116;
  --brand-text-muted: #5A626E;
  --brand-primary: #1F49F0;
  --brand-secondary: #0E1116;
  --brand-border: #E6E8EC;
  --radius: 0px;
  --font-heading: 'Archivo', 'Inter', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  background: #FFFFFF;
  color: #0E1116;
}
body.pack-bold-modern { font-family: var(--font-body); }

/* Header — solid white, crisp hairline, ink nav (NO backdrop-filter: it breaks
   the mobile slide-in menu). Heavier link weight than the base. */
body.pack-bold-modern .site-header { background: #FFFFFF; border-bottom: 1px solid #E6E8EC; }
body.pack-bold-modern .nav-logo { color: #0E1116; font-family: var(--font-heading); font-weight: 800; letter-spacing: -.02em; }
body.pack-bold-modern .nav-links > li > a { color: #0E1116; font-weight: 700; letter-spacing: -.01em; }
body.pack-bold-modern .nav-links > li > a:hover { color: #1F49F0; }
body.pack-bold-modern .nav-cta { background: #1F49F0; color: #fff; border-radius: 0; font-weight: 800; }
body.pack-bold-modern .nav-cta:hover { background: #163AD0; color: #fff; }

/* Hero — near-black slab, HUGE white heading, accent word in electric blue.
   .x-hero-art is a FLAT geometric treatment: a big solid blue offset block + a
   diagonal cut + a thick accent rule. No radial glow. */
body.pack-bold-modern .x-hero { background: #0E1116; min-height: 92vh; }
body.pack-bold-modern .x-hero-art {
  position: absolute; inset: 0; z-index: 1; overflow: hidden;
  background: #0E1116;
}
/* Large solid electric-blue block, clipped to a hard diagonal — pure flat color. */
body.pack-bold-modern .x-hero-art::before {
  content: ''; position: absolute; top: -8%; right: -6%; width: 46%; height: 116%;
  background: #1F49F0;
  -webkit-clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%);
}
/* Thick blue rule pinned to the left edge — architectural accent. */
body.pack-bold-modern .x-hero-art::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 10px;
  background: #1F49F0;
}
body.pack-bold-modern .x-hero .container { z-index: 2; }
body.pack-bold-modern .x-hero h1 {
  font-family: var(--font-heading); font-weight: 900; letter-spacing: -.03em;
  line-height: .98; font-size: clamp(2.9rem, 7vw, 5.4rem); max-width: 15ch;
  text-transform: none; text-shadow: none;
}
/* Accent word: NOT italic — electric blue with a hard underline block. */
body.pack-bold-modern .x-hero h1 em {
  font-style: normal; font-weight: 900; color: #5B81FF;
  box-shadow: inset 0 -.12em 0 #1F49F0;
}
body.pack-bold-modern .x-hero .x-sub { color: rgba(255,255,255,.82); font-weight: 500; }
body.pack-bold-modern .x-hero .x-chips { border-top: 1px solid rgba(255,255,255,.18); }
body.pack-bold-modern .x-hero .x-chip { color: rgba(255,255,255,.92); font-weight: 700; }
body.pack-bold-modern .x-hero .x-chip svg { color: #5B81FF; }

/* Eyebrow — SOLID electric-blue rectangular block, sharp corners, white text. */
body.pack-bold-modern .x-eyebrow {
  background: #1F49F0; color: #fff; border: 0; border-radius: 0;
  font-weight: 800; letter-spacing: .18em; text-transform: uppercase; padding: 8px 16px;
}

/* Buttons — square, heavy, hard color swap on hover (no soft transition needed). */
body.pack-bold-modern .x-btn { border-radius: 0; font-weight: 800; letter-spacing: -.01em; box-shadow: none; transition: background .12s, color .12s, transform .12s; }
body.pack-bold-modern .x-btn-primary { background: #1F49F0; color: #fff; box-shadow: none; }
body.pack-bold-modern .x-btn-primary:hover { background: #163AD0; transform: none; color: #fff; }
body.pack-bold-modern .x-btn-ghost { background: transparent; color: #fff; border: 2px solid #fff; }
body.pack-bold-modern .x-btn-ghost:hover { background: #fff; color: #0E1116; }
body.pack-bold-modern .x-btn-white { background: #fff; color: #0E1116; border-radius: 0; }
body.pack-bold-modern .x-btn-white:hover { background: #1F49F0; color: #fff; transform: none; }

/* Stat strip — SOLID electric-blue color block, white heavy numerals + labels. */
body.pack-bold-modern .x-stats { background: #1F49F0; border: 0; }
body.pack-bold-modern .x-stat .num { font-family: var(--font-heading); font-weight: 900; color: #fff; letter-spacing: -.02em; }
body.pack-bold-modern .x-stat .lbl { color: rgba(255,255,255,.82); font-weight: 700; }
/* Keep the mobile spec-sheet dividers readable on the blue band. */
@media (max-width:680px){
  body.pack-bold-modern .x-stat { border-bottom: 1px solid rgba(255,255,255,.22); }
  body.pack-bold-modern .x-stat:last-child { border-bottom: 0; }
}

/* Section headings — heavy oversized ink, tiny blue uppercase kicker. */
body.pack-bold-modern .x-head h2 { font-family: var(--font-heading); font-weight: 900; color: #0E1116; letter-spacing: -.03em; line-height: 1.02; }
body.pack-bold-modern .x-head .k { color: #1F49F0; font-weight: 800; letter-spacing: .18em; }
body.pack-bold-modern .x-head p { color: var(--brand-text-muted); }

/* Service tiles — keep the dark image tiles (white text over the .x-svc-ph
   gradient + scrim), but SHARP-cornered + blocky with a hard blue edge bar that
   slides up on hover (no soft lift/shadow). */
body.pack-bold-modern .x-svc { border-radius: 0; box-shadow: none; border: 0; }
body.pack-bold-modern .x-svc::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  background: #1F49F0; transform: scaleY(0); transform-origin: bottom; z-index: 3;
  transition: transform .18s ease;
}
body.pack-bold-modern .x-svc:hover::before { transform: scaleY(1); }
body.pack-bold-modern .x-svc h3 { font-family: var(--font-heading); font-weight: 900; letter-spacing: -.02em; color: #fff; }
body.pack-bold-modern .x-svc p { color: rgba(255,255,255,.9); }
body.pack-bold-modern .x-svc .x-arrow { color: #fff; font-weight: 800; }
body.pack-bold-modern .x-svc .x-arrow span { color: #5B81FF; }

/* Signature statement — SOLID electric-blue band, large heavy WHITE Archivo
   text, the em accent gets a hard white underline. Overrides showcase default. */
body.pack-bold-modern .x-statement { background: #1F49F0; border: 0; }
body.pack-bold-modern .x-statement p {
  font-family: var(--font-heading); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(1.7rem,3.6vw,2.8rem); line-height: 1.18; color: #fff; max-width: 1000px;
}
body.pack-bold-modern .x-statement em {
  font-style: normal; color: #fff; box-shadow: inset 0 -.1em 0 rgba(255,255,255,.55);
}

/* Why-us — sharp-cornered solid blue-tint square icon chip, heavy ink heading. */
body.pack-bold-modern .x-feat .ic { border-radius: 0; background: rgba(31,73,240,.10); border: 0; }
body.pack-bold-modern .x-feat .ic svg { color: #1F49F0; }
body.pack-bold-modern .x-feat h4 { font-family: var(--font-heading); font-weight: 800; letter-spacing: -.02em; color: #0E1116; }
body.pack-bold-modern .x-feat p { color: var(--brand-text-muted); }

/* Process — oversized heavy Archivo numeral as an outline-tint treatment. */
body.pack-bold-modern .x-step .n {
  font-family: var(--font-heading); font-weight: 900; line-height: 1;
  color: transparent; -webkit-text-stroke: 2px rgba(31,73,240,.35);
}
body.pack-bold-modern .x-step h4 { font-family: var(--font-heading); font-weight: 800; letter-spacing: -.02em; color: #0E1116; }
body.pack-bold-modern .x-step p { color: var(--brand-text-muted); }

/* FAQ — heavy ink summaries, blue +/- marker, crisp light dividers. */
body.pack-bold-modern .x-faq details { border-bottom: 1px solid #E6E8EC; }
body.pack-bold-modern .x-faq summary { font-family: var(--font-heading); font-weight: 800; letter-spacing: -.01em; color: #0E1116; }
body.pack-bold-modern .x-faq summary::after { color: #1F49F0; }
body.pack-bold-modern .x-faq details p { color: var(--brand-text-muted); }

/* Big CTA — full electric-blue color block, white heavy heading, square white
   button that hard-swaps to ink on hover. */
body.pack-bold-modern .x-bigcta { background: #1F49F0; border: 0; }
body.pack-bold-modern .x-bigcta h2 { font-family: var(--font-heading); font-weight: 900; letter-spacing: -.03em; color: #fff; }
body.pack-bold-modern .x-bigcta p { color: rgba(255,255,255,.9); }

/* Footer — near-black slab (matches --brand-secondary). Heavy Archivo headings,
   blue-on-hover links. */
body.pack-bold-modern .site-footer { background: #0E1116; border-top: 4px solid #1F49F0; }
body.pack-bold-modern .site-footer h4 { font-family: var(--font-heading); font-weight: 800; letter-spacing: -.01em; color: #fff; }
body.pack-bold-modern .site-footer .footer-links a:hover { color: #5B81FF; }