/* Express Auto Glass — only what cannot be inline: brand token overrides,
   keyframes, responsive utilities. All component styling is inline. */

:root{
  --color-accent:#1fa24a;
  --color-accent-2:#1fa24a;
  --color-accent-100:#eefaf1;
  --color-accent-200:#d2f2dd;
  --color-accent-300:#a6e5bc;
  --color-accent-400:#5ecb87;
  --color-accent-500:#1fa24a;
  --color-accent-600:#178a3d;
  --color-accent-700:#0d6b2e;
  --color-accent-800:#094d21;
  --color-accent-900:#0a3417;
  --color-accent-2-500:#1fa24a;
  --color-accent-2-600:#178a3d;
  --color-accent-2-700:#0d6b2e;
}

body{margin:0;-webkit-font-smoothing:antialiased;font-size:16px}
a{color:var(--color-accent-700)}
a:hover{color:var(--color-accent-600)}

[data-nav-link][data-active="true"]{box-shadow:inset 0 -3px 0 var(--color-accent)}

/* The header is sticky at 78px, so anchor jumps must clear it.
   :target covers any hash landing; the explicit selectors cover programmatic scrolls. */
main[id], main [id], section[id], :target{scroll-margin-top:96px}
[data-span="2"]{grid-column:span 2}
button[data-active="true"]{background:var(--color-text)!important;color:var(--color-bg)!important}

/* Wide data tables get a horizontal scroll rail rather than overflowing the page. */
[data-table-scroll]{overflow-x:auto;-webkit-overflow-scrolling:touch}
[data-table-scroll] table{min-width:420px}
@media (max-width:640px){[data-span="2"]{grid-column:span 1}}

@keyframes eag-crack{0%{stroke-dashoffset:1}26%{stroke-dashoffset:0}60%{stroke-dashoffset:0}80%{stroke-dashoffset:1}100%{stroke-dashoffset:1}}
@keyframes eag-seal{0%,58%{opacity:0;transform:scale(.3)}72%{opacity:.95;transform:scale(1)}100%{opacity:0;transform:scale(2.2)}}

/* The desktop header row (logo + eight nav links + call button) needs about
   1127px. Collapsing to the menu button any later than that overflows the whole
   document sideways, which reads as the page "expanding" as you resize. */
@media (max-width:1140px){
  [data-nav]{display:none!important}
}
@media (max-width:1000px){
  [data-cols]{grid-template-columns:1fr!important}
  [data-cols3]{grid-template-columns:1fr 1fr!important}
  [data-pad]{padding-left:20px!important;padding-right:20px!important}
  [data-hide-sm]{display:none!important}
  [data-flip]{border-left:0!important;border-top:2px solid var(--color-divider)!important;padding-left:0!important}
  /* A collapsed grid must not keep the vertical rule and gutter that drew its
     columns — otherwise cells sit indented behind an orphaned 2px border.
     [data-cols] is one column here; [data-cols3] is two, so only column 1 heals. */
  [data-cols] > *{border-left:0!important;padding-left:0!important}
  [data-cols3] > *:nth-child(odd){border-left:0!important;padding-left:0!important}
  /* A 4-up goes to 2-up here, not at 640 — four columns in a tablet-width
     viewport leaves about 15 characters of measure per card. */
  [data-cols4]{grid-template-columns:1fr 1fr!important}
  [data-cols4] > *:nth-child(odd){border-left:0!important;padding-left:0!important}
}
@media (max-width:640px){
  [data-cols3]{grid-template-columns:1fr!important}
  [data-cols3] > *{border-left:0!important;padding-left:0!important}
  /* Comfortable tap targets on dense link lists (44px minimum). */
  [data-taplist] a{display:block;padding:11px 0}
  [data-tapfoot] a{padding:8px 0;min-height:44px;display:inline-flex;align-items:center}
}
/* Hero and section photographs are drawn as a fixed-height box with an
   object-fit:cover image, which is right on a wide screen. Below the collapse
   the box keeps its height while the column narrows, so a landscape photo gets
   cropped to a portrait slab that fills most of a phone screen. Let the photo
   scale with its width instead: drop the fixed height and give the image a
   4:3 ratio, static-positioning the cover wrapper so the box collapses to it. */
@media (max-width:1000px){
  /* A grid item's automatic minimum size is its content's min-content width, and
     for an image that is its intrinsic width — which blows the track out past the
     viewport. Every collapsed cell has to be allowed to shrink. */
  [data-cols] > *,[data-cols3] > *,[data-cols4] > *{min-width:0}
  [data-photo],[data-photo] > div{min-width:0!important}
  [data-photo]{min-height:0!important}
  [data-photo] > div{position:static!important}
  [data-photo] img{width:100%!important;height:auto!important;max-width:100%;aspect-ratio:4/3;object-fit:cover}
}
/* Grids whose cells carry a paragraph of copy go to a single full-width column
   on a phone. Two columns at 390px leaves roughly 130px of text measure, which
   wraps body copy every few words and turns each card into a tall thin strip.
   Grids of short items (the stat row) stay 2-up. */
@media (max-width:560px){
  [data-stack-sm]{grid-template-columns:1fr!important}
  [data-stack-sm] > *{border-left:0!important;padding-left:0!important}
  /* Logo + call button + menu button do not fit a phone header at full size,
     and the call action is already pinned to the bottom of every page by the
     fixed bar in the footer. Drop the duplicate and shrink the mark. */
  [data-hdr-call]{display:none!important}
  [data-hdr-logo] img{height:38px!important}
  /* Inline links inside content sit at their text height, which is under the 44px
     minimum for a thumb. Give the ones people actually reach for real height. */
  main a[href^="tel:"],[data-cta]{display:inline-flex;align-items:center;min-height:44px}
}
@media (min-width:1141px){[data-only-sm]{display:none!important}}
@media (prefers-reduced-motion:reduce){[data-anim]{animation:none!important;stroke-dashoffset:0!important;opacity:0!important}}

/* Gallery — photographs keep their own aspect ratio, so the grid is a column
   flow rather than fixed tiles. The 2px column gap and figure margin draw the
   rules; the container background shows through them. */
[data-masonry]{column-count:3;column-gap:2px}
[data-masonry] > figure{break-inside:avoid;-webkit-column-break-inside:avoid}
@media (max-width:1000px){[data-masonry]{column-count:2}}
@media (max-width:640px){[data-masonry]{column-count:1}}