/* ==========================================================================
   MERCH TROOP — PREMIUM SUBPAGE SKIN (v69)
   Loaded LAST on every subpage, after styles.css and inline template styles.
   Rethemes all three subpage template families to match the premium homepage:
   Fraunces display serif, IBM Plex Sans/Mono, ink #0a0a0b / bone #f3eee4,
   press-orange #ff4a1c, pill buttons. No markup changes required.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..900;1,9..144,400..900&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");

/* ==========================================================================
   FAMILY A — dark "organic" pages (services/*, blog/*, *-live-event-printing
   locations). These read tokens from styles.css :root — retune the palette.
   ========================================================================== */
/* styles.css remaps its legacy vars from --color-* tokens ON BODY, so the
   override must land on body (and :root for direct consumers). */
:root, body {
  --bg: #0a0a0b;
  --bg-2: #121214;
  --text: #f4f1ea;
  --muted: rgba(244, 241, 234, 0.66);
  --accent: #ff4a1c;
  --accent-2: #ff4a1c;
  --line: rgba(244, 241, 234, 0.14);
  --color-paper: #121214;
  --color-ink: #f4f1ea;
  --color-ink-soft: #d9d4c7;
  --color-muted: rgba(244, 241, 234, 0.66);
  --color-rule: rgba(244, 241, 234, 0.14);
  --color-night: #0a0a0b;
  --color-night-ink: #fdfcf9;
  --color-night-muted: rgba(244, 241, 234, 0.7);
  --color-accent: #ff4a1c;
  --color-heat: #ff4a1c;
  --color-focus: #ff4a1c;
}
/* hardcoded navy section backgrounds in styles.css */
.seo-related { background: #121214; }
.seo-proof-band { background: #121214; }

body {
  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}

h1, h2, h3,
.seo-hero h1,
.seo-page-content h2,
.seo-index-links h2,
.seo-related h2,
.seo-faq h2 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 620;
  letter-spacing: -0.02em;
}
/* Serif title-case heroes everywhere (family A heroes were 900 uppercase) */
.seo-hero h1 { text-transform: none; font-weight: 640; }

/* Buttons → flat orange pills (kill the teal gradient) */
.btn {
  border-radius: 999px;
  font-weight: 600;
  font-family: "IBM Plex Sans", sans-serif;
  text-transform: none;
  letter-spacing: 0.01em;
}
.btn--lg { border-radius: 999px; }
.btn--primary {
  background: #ff4a1c;
  color: #fff;
  box-shadow: none;
}
.btn--primary:hover { background: #e03a0e; box-shadow: none; transform: translateY(-2px); }
.btn--ghost { background: transparent; border: 1.5px solid var(--line); color: var(--text); }
.btn--ghost:hover { border-color: #ff4a1c; color: #ff4a1c; background: transparent; }

/* Header / brand */
.header { background: rgba(10, 10, 11, 0.82); backdrop-filter: blur(18px); }
.brand__logo { height: 44px; width: auto; object-fit: contain; filter: none; }
.nav a { font-weight: 500; text-transform: none; letter-spacing: 0.01em; }
.nav a:hover { color: #ff4a1c; }
.header__phone { font-family: "IBM Plex Mono", monospace; }
.scrollbar__bar { background: #ff4a1c; }

/* Eyebrows / kickers → mono orange */
.hero__eyebrow,
.seo-hero .hero__eyebrow {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ff4a1c;
  font-weight: 500;
}

/* Cards, panels, chips */
.seo-related__card,
.seo-page-content article,
.seo-page-content__side {
  border-radius: 18px;
  border-color: var(--line);
}
.seo-related__card:hover { border-color: rgba(255, 74, 28, 0.5); }
.seo-related__card span { color: #ff4a1c; font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
.seo-related__card strong { font-family: "Fraunces", Georgia, serif; font-weight: 620; letter-spacing: -0.01em; }
.seo-proof-band span { font-family: "IBM Plex Mono", monospace; letter-spacing: 0.05em; }
.seo-index-links a { border-radius: 999px; }
.seo-index-links a:hover { color: #ff4a1c; border-color: rgba(255, 74, 28, 0.5); }

/* FAQ accordions */
.faq__item summary { font-family: "Fraunces", Georgia, serif; font-weight: 600; }
.faq__item summary:hover { color: #ff4a1c; }

/* Organic mini lead form → premium inputs + orange pill submit */
.organic-lead-module h2 { font-family: "Fraunces", Georgia, serif; }
.organic-lead-grid label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.organic-lead-grid input,
.organic-lead-grid textarea {
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: rgba(244, 241, 234, 0.06);
  color: var(--text);
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 16px;
}
.organic-lead-grid input:focus,
.organic-lead-grid textarea:focus {
  outline: none;
  border-color: #ff4a1c;
  box-shadow: 0 0 0 4px rgba(255, 74, 28, 0.16);
}
.organic-lead-grid button[type="submit"],
.organic-lead-form button[type="submit"] {
  border-radius: 999px;
  background: #ff4a1c;
  color: #fff;
  border: 0;
  font-weight: 600;
  padding: 15px 32px;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
}
.organic-lead-grid button[type="submit"]:hover,
.organic-lead-form button[type="submit"]:hover { background: #e03a0e; transform: translateY(-2px); }

/* Footer */
.footer a:hover { color: #ff4a1c; }

/* ==========================================================================
   FAMILY B — answers pages (inline :root --answer-* vars + fixed hex values)
   Light bone theme to match the homepage's light sections.
   ========================================================================== */
:root {
  --answer-bg: #f3eee4;
  --answer-ink: #131313;
  --answer-muted: #4c4a44;
  --answer-card: #fdfcf9;
  --answer-line: rgba(19, 19, 19, 0.14);
  --answer-accent: #ff4a1c;
  --answer-dark: #131313;
}
.answer-nav {
  background: rgba(243, 238, 228, 0.92);
  backdrop-filter: blur(14px);
}
.answer-brand { font-family: "Fraunces", Georgia, serif; font-weight: 640; font-size: 19px; }
.answer-nav-links { font-weight: 600; }
.answer-nav-links a:hover { color: #ff4a1c; }
.answer-hero { background: #0a0a0b; }
.answer-hero h1 { font-family: "Fraunces", Georgia, serif; font-weight: 640; letter-spacing: -0.02em; color: #fdfcf9; }
.answer-kicker {
  font-family: "IBM Plex Mono", monospace;
  color: #ff4a1c;
  border-color: rgba(255, 74, 28, 0.45);
  letter-spacing: 0.18em;
  font-weight: 500;
}
.answer-desc { color: rgba(244, 241, 234, 0.72); }
.answer-box, .answer-card, .hub-tile, .answer-link-block { border-radius: 18px; }
.answer-label {
  color: #ff4a1c;
  font-family: "IBM Plex Mono", monospace;
  letter-spacing: 0.16em;
  font-weight: 500;
}
.answer-lede { font-family: "Fraunces", Georgia, serif; font-weight: 560; color: #131313; letter-spacing: -0.01em; }
.answer-section h2, .answer-card h2, .hub-tile h2 { font-family: "Fraunces", Georgia, serif; font-weight: 620; letter-spacing: -0.015em; }
.answer-section p, .answer-section ul { color: #4c4a44; }
.query-list span { background: rgba(255, 74, 28, 0.1); color: #a03210; font-family: "IBM Plex Mono", monospace; font-weight: 500; font-size: 12px; }
.faq details { border-radius: 14px; }
.faq summary { font-weight: 600; font-family: "IBM Plex Sans", sans-serif; }
.answer-button {
  border-radius: 999px;
  background: #ff4a1c;
  font-weight: 600;
  transition: background 0.3s, transform 0.3s;
}
.answer-button:hover { background: #e03a0e; transform: translateY(-2px); }
.related-links a { border-radius: 12px; font-weight: 600; }
.related-links a:hover { border-color: rgba(255, 74, 28, 0.5); color: #ff4a1c; }
.hub-tile { box-shadow: 0 18px 44px -18px rgba(19, 19, 19, 0.18); }
.hub-tile:hover { border-color: rgba(255, 74, 28, 0.5); }

/* ==========================================================================
   FAMILY C — consolidated organic pages (body.seo-page: newer locations,
   case studies, pricing). Light bone theme, ink asides, orange CTAs.
   ========================================================================== */
body.seo-page { background: #f3eee4; color: #131313; font-family: "IBM Plex Sans", -apple-system, sans-serif; }
.seo-nav { border-bottom-color: rgba(19, 19, 19, 0.14); }
.seo-brand { font-family: "Fraunces", Georgia, serif; font-weight: 640; font-size: 19px; }
.seo-nav nav { font-weight: 600; }
.seo-nav nav a { opacity: 0.72; transition: color 0.3s, opacity 0.3s; }
.seo-nav nav a:hover { color: #ff4a1c; opacity: 1; }
.seo-kicker {
  font-family: "IBM Plex Mono", monospace;
  color: #ff4a1c;
  letter-spacing: 0.2em;
  font-weight: 500;
}
.seo-page .seo-hero h1,
body.seo-page h1 { font-family: "Fraunces", Georgia, serif; font-weight: 640; letter-spacing: -0.025em; color: #131313; }
/* styles.css also defines .seo-hero (family A dark full-bleed) — neutralize its
   bleed into family C's light in-flow hero */
body.seo-page .seo-hero { min-height: 0; padding-top: 70px; padding-bottom: 42px; overflow: visible; background: transparent; }
body.seo-page .seo-hero h1 { text-transform: none; }
body.seo-page .seo-faq summary { color: #131313; }
.seo-lead { color: #4c4a44; }
.seo-card { border-radius: 18px; box-shadow: 0 24px 60px -28px rgba(19, 19, 19, 0.3); }
.seo-main section { border-radius: 18px; border-color: rgba(19, 19, 19, 0.12); background: #fdfcf9; }
.seo-main h2 { font-family: "Fraunces", Georgia, serif; font-weight: 620; letter-spacing: -0.015em; }
.seo-main p, .seo-main ul { color: #4c4a44; }
.seo-faq summary { font-weight: 600; }
.seo-aside .box { background: #0a0a0b; border-radius: 18px; }
.seo-aside .box h2 { font-family: "Fraunces", Georgia, serif; font-weight: 620; color: #f4f1ea; }
.seo-aside .box p { color: rgba(244, 241, 234, 0.7); }
.seo-aside .box.light { background: #fdfcf9; color: #131313; }
.seo-aside .box.light h2 { color: #131313; }
.seo-aside .box.light p { color: #4c4a44; }
.seo-button {
  border-radius: 999px;
  background: #ff4a1c;
  font-weight: 600;
  transition: background 0.3s, transform 0.3s;
}
.seo-button:hover { background: #e03a0e; transform: translateY(-2px); }
.seo-links a:hover { color: #ff4a1c; }
.seo-footer { border-top-color: rgba(19, 19, 19, 0.14); color: #4c4a44; }
.seo-footer strong { font-family: "Fraunces", Georgia, serif; font-weight: 640; color: #131313; }
.seo-cross a:hover { color: #ff4a1c; }

/* Locations hub extras (family C page with its own card classes) */
.seo-link-card, .seo-panel { border-radius: 18px; }
.seo-link-card:hover { border-color: rgba(255, 74, 28, 0.5); }
.seo-link-card strong { font-family: "Fraunces", Georgia, serif; font-weight: 620; }

/* ==========================================================================
   FAMILY D — case-studies hub (bare standalone template: header.shell.nav)
   ========================================================================== */
body:has(> header.shell.nav) {
  background: #f3eee4;
  color: #131313;
  font-family: "IBM Plex Sans", -apple-system, sans-serif;
}
header.shell.nav a { font-weight: 600; }
header.shell.nav a:hover { color: #ff4a1c; }
header.shell.nav a:first-child { font-family: "Fraunces", Georgia, serif; font-weight: 640; font-size: 19px; }
main.shell .hero h1 { font-family: "Fraunces", Georgia, serif; font-weight: 640; letter-spacing: -0.025em; }
main.shell .lead { color: #4c4a44; }
main.shell .card { border-radius: 18px; background: #fdfcf9; border-color: rgba(19, 19, 19, 0.12); transition: border-color 0.3s, transform 0.3s; }
main.shell .card:hover { border-color: rgba(255, 74, 28, 0.5); transform: translateY(-3px); }
main.shell .card strong { font-family: "Fraunces", Georgia, serif; font-weight: 620; letter-spacing: -0.01em; }
main.shell .card span { color: #4c4a44; }

/* ==========================================================================
   Shared polish
   ========================================================================== */
::selection { background: #ff4a1c; color: #fff; }