/* dmv-capital-junk — SITE-ONLY visual rules.
   Never a fleet-shared file: this is linked from THIS site's pages only, after
   base.css and the trades skin, so it wins ties without editing either one.
   Same pattern aph-athletic-fashion uses. Client changes 2026-09-02 — see
   SITE-CLAUDE.md for the reasoning and the measurements behind each block. */

/* ---- 1. Bigger logo, header + footer ----------------------------------- */
/* Fleet default is 48px header / 40px mobile / 32px footer (base.css). The
   client asked for "much bigger". This mark is a shield — a tall, compact
   silhouette rather than a wide wordmark — so it carries extra height without
   crowding the bar. Header height was measured after this change, not assumed:
   see SITE-CLAUDE.md. */
.brand img{height:76px}
.foot-logo{height:64px;margin-bottom:.8rem}
@media (max-width:860px){ .brand img{height:56px} }

/* ---- 2. FIVE top-level nav items ---------------------------------------- */
/* Adding the explicit Home tab takes the top level to Home · Services ·
   Service Areas · About · Contact. The fleet's "4 items fit comfortably down to
   860px" measurement does NOT stretch to five — blue-heron-laundry and
   studio-sb-coaching both hit this, and site-factory/CLAUDE.md says to treat
   five as needing the fix by default rather than rediscovering it per site.
   Same two rules those skins used: never let a label wrap inside itself, and
   stand the mini phone number down in the tight band. The number is still in
   the header CTA's reach, the mobile menu, the footer and every page CTA. */
.main-nav a{white-space:nowrap}
@media (max-width:1050px){ .tel-mini{display:none} }

/* ---- 3. Hero brand lockup (homepage) ------------------------------------ */
/* The business name now appears full-size on the homepage rather than only in
   the <title> and the header mark. Grid, not flex, so the name and the eyebrow
   stack tightly beside the logo and stay aligned to its optical centre. */
.brand-hero{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:1.1rem;
  margin-bottom:1.4rem;
}
.brand-hero img{
  height:132px;
  width:auto;
  /* The hero uses the LIGHT variant of the mark (logo-footer.png) — see the
     comment in index.php. This shadow is separation against a bright patch in
     the photo, not the contrast fix; the file swap is the contrast fix. A
     drop-shadow filter follows the shield's silhouette, where box-shadow would
     draw a rectangle around a transparent PNG. */
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.5));
}
.brand-hero-name{
  display:block;
  font-family:var(--display);
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.015em;
  text-transform:uppercase;
  font-size:clamp(1.45rem,3.1vw,2.15rem);
  color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.7);
}
/* Keeps "Washington DC ·" / "Maryland ·" / "Northern Virginia" as unbreakable
   groups, so a wrapped area line never begins with a dangling separator. */
.brand-hero .eyebrow .nb{white-space:nowrap}

@media (max-width:560px){
  .brand-hero{gap:.85rem}
  .brand-hero img{height:92px}
  /* base.css gives .eyebrow .14em tracking, which is right for a short label and
     too wide for three place names in a ~225px column beside a 92px logo — it
     pushed the area line to three rows. Tightened here only. Measured at 375px. */
  .brand-hero .eyebrow{font-size:.68rem;letter-spacing:.05em}
}

/* ---- 4. Inline brand mark for inner pages ------------------------------- */
/* Puts the logo somewhere prominent on About, Contact and Thank-you without
   inventing a new layout on each. Sits on the light paper background, so no
   shadow is needed here — only the hero version composites onto a photo. */
.brand-block{
  display:flex;
  align-items:center;
  gap:1.15rem;
  margin-bottom:1.5rem;
  flex-wrap:wrap;
}
.brand-block img{height:110px;width:auto}
.brand-block-name{
  font-family:var(--display);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:-.01em;
  line-height:1.05;
  font-size:clamp(1.2rem,2.4vw,1.6rem);
  color:var(--dark);
}
@media (max-width:560px){ .brand-block img{height:84px} }

/* NOTE on the footer: no name line is added there. footer.php is a fleet-shared
   partial and must not be forked for one client, and the business name already
   appears in its legal line ("© 2026 DMV Capital Junk Removal"). The bigger
   .foot-logo above is the whole footer change. */