/* ============================================================================
   FLAIG LAW FIRM — THEME "NAVY BRASS"  (CSS-only override)
   ----------------------------------------------------------------------------
   The navy of "Live Colors" with the orange taken out. Navy + saturated orange
   is a team-colours pairing: two loud hues at full strength, which reads sports
   rather than counsel. This keeps the navy dominance exactly and swaps the
   accent to a muted antique brass, desaturated enough that it reads as a metal
   rather than as a second team colour. Brass carries dark text, not white, the
   way a private bank or a chambers plate does.
   Per direction: photos stay FULL COLOR (only Graphite goes black & white).
   Preview: append ?v=6  (or ?theme=brass).
   ========================================================================== */

/* ---- 1. tokens: the Live navy, a brass accent ----------------------------- */
:root{
  --paper:#FFFFFF;          /* white: light sections + text on the navy grounds */
  --paper-2:#EDEFF3;        /* cool light grey — cards / tinted surfaces */
  --line:#DCDFE6;

  --ink:#222938;            /* navy text on the light sections */
  --ink-soft:#4A5260;
  --muted:#656B77;          /* Live's #9FA2A8 fails on the cool tint; this clears 4.5 */

  --forest:#242A36;         /* navy = masthead / hero / dark bands / footer */
  --forest-2:#2F3542;
  --sage:#9FA6B2;

  /* the accent: antique brass. Dark text rides on it, never white. */
  --clay:#B08D57;
  --clay-deep:#7A5E2B;      /* accent text on light grounds + button hover */
  --marigold:#D8BE8E;       /* champagne — the "pops on dark" */
}

/* ---- 2. CTAs: brass fill, NAVY text (white on brass is under bar) --------- */
.pill{color:#1B2230}
.pill:hover{color:#FFFFFF}            /* hover deepens the brass, so flip to white */
.pill.ghost{color:var(--paper)}       /* on navy, unchanged */
.pill.ghost:hover{color:var(--paper)}
.grbox-btn{color:#1B2230}
.grbox-btn:hover{color:#FFFFFF}

/* ---- 3. navy grounds: accent words and eyebrows go champagne -------------- */
.masthead::before{background:radial-gradient(74% 80% at 90% -12%,rgba(216,190,142,.13),transparent 58%)!important}
.huge em,.huge .c,.convert h2 em{color:#D8BE8E}
.sec-dark .sec-eyebrow{color:#D8BE8E;border-bottom-color:rgba(255,255,255,.20)}
.world.biz .tag,.world.biz .go,.rec-quote cite{color:#D8BE8E}

/* ---- 4. hardcoded values repainted by selector ---------------------------- */
.sec-sage{background:#EDEFF3;color:var(--ink)}     /* was the sage-green band */
.drop-inner{background:#FFFFFF}                     /* was warm cream */
.grbox,.svcbox{background:#2F3542}                  /* navy info cards */
.grbox-stars{color:#D8BE8E}                         /* champagne review stars */
.hero-media .vidframe{background-color:#242A36}     /* navy poster fallback */
.site-foot{background:#1C2130}                      /* deepest navy */

/* ---- MOBILE LAYOUT (2026-10-10) ------------------------------------------
   Three defects that let a phone pan the homepage sideways and cut the hero
   off at the left edge. This file loads on every page, after the inline CSS.
   1. `.wrap.hero` (and .art-head, .about-hero on every inner page): the
      section's own padding shorthand zeroed the .wrap side gutter, so below
      1304px the page heading sat flush against the screen edge.
   2. `figure.hero-media` kept the browser's default 40px side margin. At one
      column, width:100% + justify-self:end pushed the photo 40px off the left.
   3. `.conv-grid` used a bare 1fr track, so the contact form's min-content
      (300px Turnstile + padding) forced a column wider than the screen. */
@media(max-width:1304px){
  .site-header .wrap.nav{padding-left:22px;padding-right:22px}   /* same defect; 22px lands the logo art on the 32px line */
  .masthead>section.wrap{padding-left:32px;padding-right:32px}   /* .hero, .art-head, .about-hero: every page */
}
@media(max-width:900px){
  .hero-media{margin-left:0;margin-right:0}
  .wrap.convert-inner{padding-left:32px;padding-right:32px}   /* same shorthand defect on the closing band */
  .conv-grid{grid-template-columns:minmax(0,1fr)}
  .conv-grid>*{min-width:0}
}
@media(max-width:600px){
  /* On a phone the two floating cards covered most of the family photo. Stack
     them under it instead: photo first, then reviews, then services. */
  .hero-media{display:flex;flex-direction:column;gap:24px}
  .hero-media .grbox,.hero-media .svcbox{position:relative;right:auto;top:auto;bottom:auto;
    max-width:none;min-width:0;margin-left:12px;box-shadow:-12px 12px 0 0 var(--clay)}
}
@media(max-width:480px){
  .kicker{white-space:normal;max-width:100%}        /* the hero eyebrow was one unbreakable line */
  .conv-form{padding:24px 12px;margin-left:-12px;margin-right:-12px}   /* room for the 300px Turnstile */
}
@media(max-width:345px){
  .cf-turnstile{transform:scale(.84);transform-origin:left top}
}