:root {
  --color-primary: #0A192F;
  --color-secondary: #0f172a;
  --color-accent: #C8A24A;
  --color-background: #ffffff;
  --color-text: #111827;
  --color-link: #0A192F;
  --font-body: Inter, system-ui, sans-serif;
  --size-body: 16px;
  --font-h1: Inter, system-ui, sans-serif;
  --size-h1: 48px;
  --font-h2: Inter, system-ui, sans-serif;
  --size-h2: 32px;
  --font-h3: Inter, system-ui, sans-serif;
  --size-h3: 24px;
}
html, body { background: var(--color-background); color: var(--color-text); font-family: var(--font-body); font-size: var(--size-body); line-height: 1.6; margin: 0; }
a { color: var(--color-link); }
h1 { font-family: var(--font-h1); font-size: var(--size-h1); font-weight: 700; color: #0f172a; line-height: 1.1; }
h2 { font-family: var(--font-h2); font-size: var(--size-h2); font-weight: 600; color: #0f172a; line-height: 1.2; }
h3 { font-family: var(--font-h3); font-size: var(--size-h3); font-weight: 600; color: #0f172a; line-height: 1.3; }
/* ----- HEADER CHROME (#hdr) — fixed, transparent-or-solid, dark-on-scroll
   Per docs/CSE-NAV-SPEC.md. Owned by CSE; packages can't override or break
   it. The matching <header id="hdr"> markup lives in buildNavigationHtml()
   and reads per-tenant settings for logo/wordmark/CTA. ---------------- */
/* Load Archivo from Google Fonts so chrome doesn't depend on the package
   shipping a font import. Render-blocking; for chrome that's the right
   tradeoff (avoids FOUC on the brand). */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800&display=swap');

/* Chrome variables — every tenant's #hdr reads from these. Fall back chain:
     1. --hdr-* (set by the package's :root if it wants fine-grained overrides
                  for chrome only, without touching --color-* used by content)
     2. --color-* (this tenant's settings; may itself be overridden by the
                    package's :root after global-theme.css loads)
     3. hardcoded sensible default (last resort if neither is set)
   Per-tenant global-theme.css is served from the tenant's own disk path,
   so there's no cross-tenant leakage of any of these values. */
#hdr {
  --hdr-bg:           var(--hdr-bg-color,        var(--color-secondary, #0f172a));
  --hdr-text:         var(--hdr-text-color,      #ffffff);
  --hdr-text-mute:    var(--hdr-text-mute-color, rgba(255, 255, 255, 0.82));
  --hdr-accent:       var(--hdr-accent-color,    var(--color-accent, #f59e0b));
  --hdr-accent-hover: var(--hdr-accent-hover-color, var(--hdr-accent));
  --hdr-cta-text:     var(--hdr-cta-text-color,  var(--color-secondary, #0f172a));
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; transition: 0.35s;
}
#hdr .bar { display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px; max-width: 1240px; margin: 0 auto; gap: 1rem; }
/* The 0.86 alpha + blur is preserved as the visual treatment, but the
   underlying RGB now derives from the tenant's --hdr-bg (which by default
   is --color-secondary). We use color-mix() to apply alpha to a var; older
   browsers fall back to the bg as-is, which is still readable. */
#hdr.scrolled, #hdr.hdr-solid {
  background: color-mix(in srgb, var(--hdr-bg) 86%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--hdr-accent) 18%, transparent);
}
@supports not (background: color-mix(in srgb, red, blue)) {
  #hdr.scrolled, #hdr.hdr-solid { background: var(--hdr-bg); }
}

#hdr .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
#hdr .brand img { height: 30px; width: auto; display: block; }
#hdr .brand .wm { font-family: 'Archivo', 'Segoe UI', Roboto, sans-serif;
  font-weight: 800; letter-spacing: 0.14em; font-size: 0.92rem;
  color: var(--hdr-text); text-transform: uppercase; line-height: 1; }

#hdr nav.links { display: flex; align-items: center; gap: 34px; }
#hdr nav.links a { font-family: 'Archivo', 'Segoe UI', Roboto, sans-serif;
  font-weight: 600; font-size: 0.82rem; letter-spacing: 0.06em;
  color: var(--hdr-text-mute); text-transform: uppercase;
  transition: 0.2s; text-decoration: none; }
#hdr nav.links a:hover { color: var(--hdr-accent); }

#hdr .btn { font-family: 'Archivo', 'Segoe UI', Roboto, sans-serif;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 0.78rem; padding: 13px 24px; border-radius: 2px;
  display: inline-flex; align-items: center; gap: 9px; transition: 0.25s;
  border: 1px solid transparent; cursor: pointer; }
#hdr .btn-gold { background: var(--hdr-accent); color: var(--hdr-cta-text); }
#hdr .btn-gold:hover { background: var(--hdr-accent-hover); transform: translateY(-2px);
  box-shadow: 0 12px 30px -12px color-mix(in srgb, var(--hdr-accent) 70%, transparent); }
#hdr .btn .arr { transition: 0.25s; display: inline-block; }
#hdr .btn:hover .arr { transform: translateX(4px); }

#hdr .navtoggle { display: none; background: none; border: 0; cursor: pointer;
  flex-direction: column; gap: 5px; padding: 8px; }
#hdr .navtoggle span { width: 26px; height: 2px; background: var(--hdr-text);
  display: block; transition: 0.3s; }

@media (max-width: 680px) {
  #hdr nav.links { position: fixed; inset: 0 0 auto 0; top: 0;
    flex-direction: column;
    background: color-mix(in srgb, var(--hdr-bg) 97%, transparent);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    padding: 90px 26px 36px; gap: 22px; transform: translateY(-100%);
    transition: 0.4s; align-items: flex-start; }
  @supports not (background: color-mix(in srgb, red, blue)) {
    #hdr nav.links { background: var(--hdr-bg); }
  }
  #hdr nav.links.open { transform: none; }
  #hdr nav.links .btn { margin-top: 10px; }
  #hdr .navtoggle { display: flex; z-index: 70; }
  #hdr .bar { padding: 16px 20px; }
}

/* ----- LEGACY .cse-nav ----- Kept styled (NOT display:none) so pages
   published before the nav-chrome migration still have a working header
   until they're re-published. New chrome lives on #hdr; a re-publish
   swaps the markup, no double-nav risk because a given page has either
   .cse-nav OR #hdr, never both. Once every page is migrated, this rule
   can be dropped. */
.cse-nav ul { display: flex; gap: 1.5rem; list-style: none; padding: 1rem 2rem; margin: 0; background: var(--color-secondary); }
.cse-nav a  { color: #fff; text-decoration: none; }

.cse-footer { padding: 2rem; text-align: center; color: #6b7280; }

/* Page layout shapes (CSE-IMPORTER-FIXES Fix 2). These used to live as
   inline styles on <main> in each template, which package CSS couldn't
   override (inline styles win specificity). Now defined here so the
   package's <style id="cse-package"> block (which loads AFTER this file)
   can override anything it needs to via specificity or source order. */
.cse-page { padding: 0; margin: 0; }
.cse-page--home    { /* full-bleed: no max-width, package owns layout */ }
.cse-page--landing { /* full-bleed: no max-width, package owns layout */ }
.cse-page--full    { /* explicit full-bleed marker — same as home */ }
.cse-page--about    { max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem; }
.cse-page--services { max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem; }
.cse-page--generic  { max-width: 880px;  margin: 0 auto; padding: 2rem 1.5rem; }
.cse-page--blog     { max-width: 880px;  margin: 0 auto; padding: 2rem 1.5rem; }
.cse-page--contact  { max-width: 720px;  margin: 0 auto; padding: 2rem 1.5rem; }
.cse-page--post     { max-width: 760px;  margin: 0 auto; padding: 2rem 1.5rem; }

/* Post-template trim (also moved off inline styles for overridability) */
.cse-post__header  { margin-bottom: 1.5rem; }
.cse-post__title   { margin: 0 0 0.4rem; }
.cse-post__byline  { color: #6b7280; font-size: 0.9rem; }

/* settings.custom_css is intentionally NOT emitted here — it is the
   "Site-wide CSS" layer of the cascade (see docs/CONTENT-PACKAGE-CSS-SPEC.md)
   and is emitted as an inline <style id="cse-site-custom"> block by
   buildStyleCascade() in publishPage so it can win over package/base layers. */