/* Pro Pipes Plumbing: Bryce's own logo (his business card lockup, received 7 Oct 2026).
   Header and footer sizing only. Loads after site.css on every page.
   Palette C (Alex, 7 Oct): the header is steel blue, so the header carries the reversed lockup (type and rule white, the
   drop and stripes white), the same file the footer uses. 8 Oct (Alex: "change the left logo of bryces logo to the bronze
   color"): the square is bright copper #C8742B in propipes-logo-reversed-copper.svg (3.28 to 1 on the steel blue header,
   4.21 on the footer, white details 3.51 to 1 on it); his gray original stays in propipes-logo-reversed.svg. The lockup is a
   hairline geometric face over a solid mark, so it needs room. Width based with height:auto so it can never distort. The SVG viewBox is the exact ink
   bounds, 4.113 to 1, so 252px wide is 61px tall, 280px is 68px, 200px is 49px, 172px is 42px and 176px is 43px.
   The header is 92px tall on desktop and 74px on phones (site.css --header-h), which leaves about 15px of air above and
   below the 61px square on desktop and 12px around the 49px square on phones, at least a quarter of the square's width
   on every side (the brand sheet's clear space rule), so the copper square reads as its own clean element and is never
   crowded by the nav, the phone pill or the Menu button. Under 380px the header has 328px inside its gutters and the
   phone and menu buttons take 156px, so 172px is the most the logo can have at 360px; under 360px the Menu button goes
   icon only (44px wide, the word leaves the screen, the aria-label stays) so the lockup keeps 176px at 320px: the brand
   sheet says the lockup is never under 160px. Width check at 320: 176 + 8 + 44 + 8 + 44 = 280px of the 288px inside the gutters. */
.brand-logo{display:block;width:252px;max-width:100%;height:auto}
.foot-logo{display:block;width:280px;max-width:100%;height:auto}
@media (max-width:720px){
  .brand-logo{width:200px;height:auto}
  .foot-logo{width:220px;height:auto}
}
@media (max-width:380px){
  .brand-logo{width:172px;height:auto}
}
@media (max-width:359px){
  .brand-logo{width:176px;height:auto}
  .header-in{gap:8px}
  .menu summary{width:44px;padding:0;gap:0;justify-content:center;font-size:0}
}