/* Sections added for Website Copy v1 structure */

/* Capability bar */
.cap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 14px; }
.cap-card {
  --mx: 50%; --my: 50%;
  position: relative; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.cap-card::before {
  content: ""; position: absolute; inset: 0; opacity: 0; z-index: 2;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(252, 199, 36, 0.08), transparent 65%);
  transition: opacity 0.35s ease; pointer-events: none;
}
.cap-card:hover { border-color: rgba(252, 199, 36, 0.4); transform: translateY(-3px); }
body[data-motion="off"] .cap-card:hover { transform: none; }
.cap-card:hover::before { opacity: 1; }
.cap-card image-slot { width: 100%; height: 360px; }  /* Dylan 9/1: bigger, they are good pictures */
/* Cards sit directly under the hero with no heading, so the section's top padding
   tightens from 110px so they read as attached to it (Dylan 9/1) */
#capabilities.section-pad { padding-top: 60px; padding-bottom: 60px; }  /* 9/3 Dylan: bottom matches the top */
@media (max-width: 700px) { .cap-card image-slot { height: 260px; } }
/* 9/3: cards stretch to one height, so the body is a column and the link pins to the bottom;
   every card ends with the same 26px below its link instead of pooling leftover space (Dylan) */
.cap-card { display: flex; flex-direction: column; }
.cap-card image-slot { flex: 0 0 auto; }
.cap-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 26px; }
.cap-body .cap-go { margin-top: auto; padding-top: 18px; }
.cap-num { font-family: var(--font-display); font-size: 14px; letter-spacing: 0.1em; color: var(--red); margin-bottom: 14px; }
.cap-card h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 26px; line-height: 1.05; margin-bottom: 10px; color: var(--cream); }
.cap-card p { color: var(--muted); font-size: 15.5px; line-height: 1.55; }

/* Why the work matters — big statement */
.why { background: var(--paper); color: var(--ink); }
.why .sec-eyebrow { color: var(--red-deep); }
.why-statement {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(32px, 3.8vw, 52px); line-height: 1.06; color: var(--ink);
  max-width: 16em;
}
.why-statement .red { color: var(--red); }
.why-body { max-width: 640px; margin-top: 36px; font-size: 19px; line-height: 1.65; color: #4a4336; }
.why-body strong { color: var(--ink); }

/* How we work */
.how-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.how-block { padding: 38px 32px 34px; border-right: 1px solid var(--line); background: var(--panel); position: relative; transition: background 0.3s ease; }
.how-block:last-child { border-right: 0; }
.how-block:hover { background: #2a241a; }
.how-block .how-bar { width: 34px; height: 3px; background: var(--gold); margin-bottom: 26px; transition: width 0.35s cubic-bezier(0.2, 0.7, 0, 1); }
.how-block:hover .how-bar { width: 60px; background: var(--red); }
.how-block h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 24px; line-height: 1.1; margin-bottom: 12px; color: var(--cream); }
.how-block p { color: var(--muted); font-size: 15.5px; line-height: 1.6; }

/* Testimonial slot */
.quote-band { padding: 100px max(28px, 5vw); border-top: 1px solid var(--line); }
.quote-mark { font-family: var(--font-display); font-size: 80px; line-height: 0.5; color: var(--red); margin-bottom: 26px; }
.quote-band blockquote {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(24px, 2.8vw, 40px); line-height: 1.14; color: var(--muted);
  max-width: 20em; border: 0;
}
.quote-band cite { display: block; margin-top: 26px; font-style: normal; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
/* Homepage testimonial rotator (8/25, register 1.10 slideshow). Grid-stacked
   slides crossfade; body[data-motion="off"] (incl. prefers-reduced-motion via
   woods-app) lays every slide out stacked and hides the dots. */
.vo-slides { display: grid; }
.vo-slide { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(min(280px, 100%), 0.9fr) 1.3fr; gap: 56px;
  align-items: center; opacity: 0; transition: opacity 0.6s ease; pointer-events: none; }
.vo-slide.on { opacity: 1; pointer-events: auto; }
.vo-slide .quote-photo { margin: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); }
.vo-slide .quote-photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.vo-slide blockquote { max-width: none; }
.vo-dots { display: flex; gap: 2px; justify-content: center; margin-top: 30px; }
/* 9/3 stress audit: the button is a 24px tap target; the visible dot is drawn inside it */
.vo-dot { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: transparent; position: relative; }
.vo-dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--line); transition: background 0.2s ease, transform 0.2s ease; }
.vo-dot.on::before { background: var(--gold); transform: scale(1.25); }
.vo-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; display: none;
  align-items: center; justify-content: center; width: 52px; height: 72px; padding: 0;
  background: none; border: none; cursor: pointer; color: var(--muted); border-radius: 8px;
  transition: color 0.15s ease, background 0.15s ease; }
.vo-arrow:hover, .vo-arrow:focus-visible { color: var(--gold); background: rgba(242, 237, 225, 0.05); }
html[data-theme="light"] .vo-arrow:hover, html[data-theme="light"] .vo-arrow:focus-visible { background: rgba(24, 20, 16, 0.05); }
.vo-arrow-prev { left: max(6px, 1vw); }
.vo-arrow-next { right: max(6px, 1vw); }
.vo-arrow-next svg { transform: scaleX(-1); }
@media (min-width: 901px) { .vo-arrow { display: flex; } }
body[data-motion="off"] .vo-slides { display: block; }
body[data-motion="off"] .vo-slide { opacity: 1; pointer-events: auto; margin-bottom: 48px; }
body[data-motion="off"] .vo-dots { display: none; }
@media (max-width: 900px) { .vo-slide { grid-template-columns: 1fr; gap: 26px; } }

/* client logo under a quote (8/20: every testimonial carries its client's mark); monochrome per theme */
.quote-logo { display: block; margin-top: 18px; width: 240px; height: 58px; object-fit: contain; object-position: left center;
  filter: brightness(0) invert(1); opacity: 0.7; }
html[data-theme="light"] .quote-logo { filter: brightness(0); opacity: 0.55; }
.quote-logo.full-color, html[data-theme="light"] .quote-logo.full-color { filter: none; opacity: 1; height: 120px; }
.quote-pending { display: inline-block; margin-top: 14px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bg); background: var(--gold); border-radius: 3px; padding: 4px 10px; font-weight: 700; }

/* Closing CTA band */
.cta-band { background: var(--bg-2); border-top: 1px solid var(--line); }
.cta-band .inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: end; }
.cta-band h2 {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(30px, 3.4vw, 46px); line-height: 1.02; color: var(--cream);
}
.cta-band h2 .red { color: var(--red); }
.cta-band .cta-copy { color: var(--muted); font-size: 18px; max-width: 420px; }
.cta-band .cta-col { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.phone-xl {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(34px, 4.4vw, 64px); line-height: 1;
  color: var(--cream); text-decoration: none; transition: color 0.25s ease;
}
.phone-xl:hover { color: var(--gold); }
.phone-xl .ext { display: block; font-family: var(--font-body); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }

/* Footer per copy doc */
.footer-meta { display: flex; flex-direction: column; gap: 4px; }
.footer-services { color: var(--gold); font-size: 13px; letter-spacing: 0.06em; }

@media (max-width: 900px) {
  .cta-band .inner { grid-template-columns: 1fr; }
  .how-block { border-right: 0; border-bottom: 1px solid var(--line); }
  .how-block:last-child { border-bottom: 0; }
}

/* Selected work — recognizable jobs, competency proof (facts per 7/10 interview) */
.proj-feature {
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  padding: 34px 32px; display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: start;
}
.proj-feature .proj-year { font-family: var(--font-display); font-size: clamp(40px, 5vw, 64px); line-height: 1; color: var(--red); }
.proj-feature h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.08; color: var(--cream); margin-bottom: 10px; }
.proj-feature p { color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 640px; }
.proj-list { list-style: none; margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 14px; }
.proj-list li { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 22px 24px; }
.proj-list h4 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 19px; line-height: 1.12; color: var(--cream); margin-bottom: 6px; }
.proj-list p { color: var(--muted); font-size: 14.5px; line-height: 1.55; }

/* Locations — office + pits, no radius (per 7/10 interview decision) */
.loc-list { display: grid; gap: 26px; font-size: 15.5px; }
.loc-list h5 { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.loc-list p { color: var(--muted); }
.loc-list p strong { color: var(--cream); font-weight: 600; }

/* About page */
.about-head { padding: 150px max(28px, 5vw) 30px; }
.about-lede { max-width: 860px; color: var(--cream); font-size: 18px; line-height: 1.6; margin-top: 26px; }  /* 9/3: was 640px; Dylan: ledes read squished */
/* Job-page header bands: one full-scope paragraph per page (Dylan 9/1), and it
   runs the full width of the band inside the padding, no column cap */
.wwd-headband .about-lede { max-width: none; }
.about-lede strong { color: var(--cream); }
.history-band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-2); }
.history-band .inner { padding: 70px max(28px, 5vw); display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: baseline; }
.history-band .hist-years { font-family: var(--font-display); font-size: clamp(44px, 5.4vw, 72px); line-height: 1; color: var(--red); white-space: nowrap; }
.history-band p { color: var(--muted); font-size: 17.5px; line-height: 1.65; max-width: 620px; }
.history-band p strong { color: var(--cream); }
.people-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 14px; }
.person-card { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); overflow: hidden; }
.person-card image-slot { width: 100%; height: 240px; }
.person-body { padding: 24px 24px 22px; }
.person-body .person-path { font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.person-body h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 22px; color: var(--cream); margin-bottom: 8px; }
.person-body p { color: var(--muted); font-size: 14.5px; line-height: 1.55; }

@media (max-width: 900px) {
  .proj-feature { grid-template-columns: 1fr; gap: 10px; }
  .history-band .inner { grid-template-columns: 1fr; gap: 14px; }
}

/* Services page — alternating photo/text rows */
.svc-rows { display: grid; gap: 14px; }
.service-row {
  display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel); overflow: hidden;
}
.service-row:nth-child(even) { grid-template-columns: 1fr 1.05fr; }
.service-row:nth-child(even) .svc-media { order: 2; }
.service-row .svc-media image-slot { width: 100%; height: 100%; min-height: 280px; }
.service-row .svc-text { padding: 36px 34px 32px; display: flex; flex-direction: column; justify-content: center; }
.service-row .svc-no { font-family: var(--font-display); font-size: 14px; letter-spacing: 0.1em; color: var(--red); margin-bottom: 14px; }
.service-row h2 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(24px, 2.8vw, 34px); line-height: 1.08; color: var(--cream); margin-bottom: 12px; }
.service-row p { color: var(--muted); font-size: 15.5px; line-height: 1.6; max-width: 560px; }
@media (max-width: 900px) {
  .service-row, .service-row:nth-child(even) { grid-template-columns: 1fr; }
  .service-row:nth-child(even) .svc-media { order: 0; }
  .service-row .svc-media image-slot { min-height: 220px; }
}

/* Materials page — pit cards side by side */
.pit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pit-card .pit-line { font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-top: 14px; }
@media (max-width: 900px) { .pit-grid { grid-template-columns: 1fr; } }

/* Accessibility: skip link + hero video pause control (WCAG 2.4.1, 2.2.2) */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--red); color: #ffffff; padding: 12px 20px;
  font-weight: 700; font-size: 14px; letter-spacing: 0.04em;
  border-radius: 0 0 6px 0; text-decoration: none;
}
.skip-link:focus { left: 0; }
.video-toggle {
  position: absolute; bottom: 26px; left: max(28px, 5vw); z-index: 3;
  display: none; align-items: center; gap: 8px;
  background: rgba(19, 16, 9, 0.55); color: #f2ede1;
  border: 1px solid rgba(242, 237, 225, 0.3); border-radius: 99px;
  padding: 9px 16px; font-family: var(--font-body); font-size: 11.5px;
  font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
body[data-hero="video"] .video-toggle, .video-toggle.always { display: inline-flex; }
.video-toggle:hover, .video-toggle:focus-visible { border-color: #f2ede1; }

/* Full-width mega menu (2026-08-17): hovering a top-level item drops one bar
   across the whole header showing that branch's entire link tree plus a CTA,
   instead of making the user walk nested flyouts. Hover + keyboard
   (focus-within); pinned dark in both themes like the nav itself. */
.nav-drop { position: static; display: flex; align-items: center; }
/* 8/31: caret rides a flex line instead of inflating the text box, so plain
   tabs (Home, Careers) and dropdown tabs sit on one baseline */
.nav-drop > a { display: inline-flex; align-items: center; }
.nav-drop > a .caret { display: inline-flex; opacity: 0.7; margin-left: 5px; transition: transform 0.25s ease; }
.nav-drop:hover > a .caret, .nav-drop:focus-within > a .caret { transform: rotate(180deg); }
.mega-panel {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 120;
  visibility: hidden; opacity: 0; transform: translateY(-6px);
  background: #14110b;
  border-top: 1px solid #322b1f; border-bottom: 1px solid #322b1f;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.45);
  /* fade+rise on open; the 120ms delay on the way out forgives a diagonal
     cursor path from tab to panel (the flicker that read as clunky) */
  transition: opacity 0.14s ease 0.12s, transform 0.14s ease 0.12s, visibility 0s linear 0.26s;
  pointer-events: none;
}
.nav-drop:hover > .mega-panel,
.nav-drop:focus-within > .mega-panel,
.nav-drop.open > .mega-panel {
  visibility: visible; opacity: 1; transform: translateY(0);
  transition: opacity 0.16s cubic-bezier(0.2, 0.7, 0, 1), transform 0.16s cubic-bezier(0.2, 0.7, 0, 1), visibility 0s;
  pointer-events: auto;
}
/* cursor anywhere in the nav bar outside this drop (another tab, a plain
   link like Careers, the toggle): the old panel closes near-instantly so
   two panels never overlap. The slow forgiving close only applies when the
   cursor leaves the bar entirely. */
.nav-links:hover .nav-drop:not(:hover):not(:focus-within) > .mega-panel {
  transition: opacity 0.07s ease, transform 0.07s ease, visibility 0s linear 0.07s;
}
body[data-motion="off"] .mega-panel { transition: none; transform: none; }
/* slim dropdown: content-width panel under its own tab (Contact). The
   full-width mega stays for What We Do / Our Company. */
.nav-drop.slim { position: relative; }
.nav-drop.slim .mega-panel {
  left: auto; right: 0; width: max-content; min-width: 230px;
  border: 1px solid #322b1f; border-top: none; border-radius: 0 0 10px 10px;
}
.nav-drop.slim .mega-inner {
  display: flex; flex-direction: column;
  padding: 18px 24px 20px; max-width: none; margin: 0;
}
.nav-drop.slim .mega-col a.mega-head { padding-bottom: 4px; margin-bottom: 4px; }
/* slim panel that hangs under a mid-bar tab (Materials & Equipment): anchor left */
.nav-drop.slim.slim-left .mega-panel { left: 0; right: auto; }
.mega-inner {
  display: grid;
  /* tile floor 250px (8/31): wide enough that Start a Project holds one line
     in BOTH megas at every width - the 4-col menu's tile was wrapping */
  grid-template-columns: repeat(var(--mega-cols, 3), minmax(0, 1fr)) minmax(250px, 0.85fr);
  gap: 0 40px; align-items: start;
  padding: 32px max(28px, 5vw) 34px;
  max-width: 1560px; margin: 0 auto;
}
.mega-col { display: flex; flex-direction: column; min-width: 0; }
.nav-links .mega-col a {
  padding: 7px 0; border-radius: 0; color: #e9e2d3;
  font-size: 14px; font-weight: 500; letter-spacing: 0.02em;
  text-transform: none; white-space: normal;
}
.nav-links .mega-col a::after { display: none; }
.nav-links .mega-col a:hover, .nav-links .mega-col a:focus-visible { color: #fcc724; }
.nav-links .mega-col .mega-head {
  display: block; font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: 18px; letter-spacing: 0.05em; color: #ffffff;
  padding: 0 0 14px; margin-bottom: 10px;
}
/* brand pinstripe marks each column head, same bar used on stats and form headings */
.mega-col .mega-head::before {
  content: ""; display: block; width: 34px; height: 6px; margin-bottom: 12px;
  background: linear-gradient(to bottom,
    var(--red) 0, var(--red) 2px,
    #fcc724 2px, #fcc724 4px,
    var(--stripe-white) 4px, var(--stripe-white) 6px);
  transition: width 0.35s cubic-bezier(0.2, 0.7, 0, 1);
}
.mega-col:hover .mega-head::before { width: 62px; }
.mega-cta {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 16px;
  min-height: 240px; padding: 26px 24px; border-radius: 8px; border: 1px solid #322b1f;
  background: var(--tile, none) var(--tile-pos, center 72%) / cover no-repeat, #1c1812;
}
.mega-cta::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(19, 16, 9, 0.94) 0%, rgba(19, 16, 9, 0.72) 55%, rgba(205, 20, 43, 0.35) 100%); }
.mega-cta p { color: #f2ede1; font-size: 13.5px; line-height: 1.55; text-shadow: 0 1px 8px rgba(0,0,0,0.6); }
/* 8/31 Dylan: the button was clipping at the tile's 220px floor — tighter
   type + wrap-not-clip so it can never cut off */
.nav-links .mega-cta a.btn-chev {
  padding: 6px 0; font-size: 13px; letter-spacing: 0.08em; gap: 10px;
  color: #f2ede1; white-space: normal; text-align: left; line-height: 1.3;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}
.nav-links .mega-cta a.btn-chev .chev { width: 12px; height: 14px; }
.nav-links .mega-cta a.btn::after { display: none; }
.nav-links .mega-cta a.mega-phone {
  font-family: var(--font-display); font-weight: 400; font-size: 26px;
  letter-spacing: 0.02em; text-transform: none; color: #f2ede1; padding: 0;
}
.nav-links .mega-cta a.mega-phone::after { display: none; }
.nav-links .mega-cta a.mega-phone:hover { color: #fcc724; }
@media (max-width: 1150px) {
  .mega-inner { grid-template-columns: repeat(var(--mega-cols, 3), minmax(0, 1fr)); }
  .mega-cta { grid-column: 1 / -1; min-height: 0; margin-top: 26px; }
}

/* PDF modal viewer (materials price list) */
.pdf-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 3vh 3vw; }
.pdf-modal[hidden] { display: none; }
.pdf-scrim { position: absolute; inset: 0; background: rgba(19, 16, 9, 0.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: 0; cursor: pointer; }
.pdf-panel { position: relative; width: min(920px, 100%); height: 90vh; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
.pdf-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 18px; border-bottom: 1px solid var(--line); }
.pdf-bar .pdf-title { font-family: var(--font-display); text-transform: uppercase; font-size: 16px; letter-spacing: 0.04em; color: var(--cream); }
.pdf-bar .pdf-actions { display: flex; gap: 8px; }
.pdf-bar .btn { padding: 10px 16px; font-size: 12.5px; }
.pdf-pages { flex: 1; overflow: auto; background: #525659; padding: 16px; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.pdf-pages img { width: 100%; max-width: 860px; height: auto; background: #ffffff; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4); }

/* Address links → Google Maps: keep the text's own color, hint on hover */
a.addr-link { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
a.addr-link:hover, a.addr-link:focus-visible { border-bottom-style: solid; }

/* Structured footer (overrides the original single-row footer) */
.footer { display: block; padding: 52px max(28px, 5vw) 26px; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1.2fr 1.1fr 1.35fr; gap: 40px 44px; padding-bottom: 38px; }
.footer-col h5 { font-size: 11.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 16px; }
.footer-brand img { height: 34px; width: auto; opacity: 0.95; }
.footer-brand p { margin-top: 14px; font-size: 13.5px; line-height: 1.65; max-width: 290px; }
.footer-links { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; align-content: start; }
.footer-links h5 { grid-column: 1 / -1; }
.footer-links a { display: block; padding: 4.5px 0; font-size: 13.5px; white-space: nowrap; }
.footer-col .f-item { margin-bottom: 13px; font-size: 13.5px; line-height: 1.55; }
.footer-col .f-item:last-child { margin-bottom: 0; }
.footer-col .f-item strong { color: var(--cream); font-weight: 600; display: block; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 2px; }
.footer-bottom { border-top: 1px solid var(--line); padding-top: 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 26px; font-size: 12.5px; }
.footer-bottom .footer-services { font-size: 12.5px; }
@media (max-width: 1000px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } }

/* About history roadmap: a road with mile-marker points */
.timeline { position: relative; max-width: 840px; margin-top: 10px; }
.timeline::before {
  content: ""; position: absolute; left: 11px; top: 10px; bottom: 26px; width: 10px;
  background: #181410;
  border-radius: 5px;
}
.timeline::after {
  content: ""; position: absolute; left: 15px; top: 10px; bottom: 26px; width: 2px;
  background: repeating-linear-gradient(to bottom, #fcc724 0, #fcc724 12px, transparent 12px, transparent 26px);
}
.tl-item { position: relative; padding: 0 0 40px 62px; }
.tl-item:last-child { padding-bottom: 6px; }
.tl-item .tl-dot {
  position: absolute; left: 4px; top: 8px; z-index: 2;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--red); border: 4px solid var(--bg);
  box-shadow: 0 0 0 1px var(--line);
}
.tl-item:last-child .tl-dot { background: var(--gold); }
.tl-year { font-family: var(--font-display); font-size: clamp(30px, 4vw, 44px); line-height: 1; color: var(--red); margin-bottom: 8px; }
.tl-item:last-child .tl-year { color: var(--gold); }
.tl-item p { color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 620px; }
.tl-item p strong { color: var(--cream); }

/* Timeline motion: road paves in, dashes crawl, markers pop on scroll */
.timeline::before { transform: scaleY(0); transform-origin: top; transition: transform 1.6s cubic-bezier(0.22, 0.8, 0.3, 1); }
.timeline.road-in::before { transform: scaleY(1); }
.timeline::after { opacity: 0; transition: opacity 0.8s ease 0.9s; }
.timeline.road-in::after { opacity: 1; animation: tl-drive 1.4s linear infinite; }
@keyframes tl-drive { to { background-position: 0 26px; } }
.tl-item { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.8, 0.3, 1); }
.tl-item.tl-in { opacity: 1; transform: none; }
.tl-item .tl-dot { transform: scale(0); transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s; }
.tl-item.tl-in .tl-dot { transform: scale(1); }
.tl-dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--gold); opacity: 0; }
.tl-item.tl-in .tl-dot::after { animation: tl-ring 0.9s ease-out 0.45s; }
@keyframes tl-ring { 0% { opacity: 0.9; transform: scale(0.5); } 100% { opacity: 0; transform: scale(2); } }
/* stillness when motion is off */
body[data-motion="off"] .timeline::before { transform: scaleY(1); transition: none; }
body[data-motion="off"] .timeline::after { opacity: 1; animation: none; transition: none; }
body[data-motion="off"] .tl-item { opacity: 1; transform: none; transition: none; }
body[data-motion="off"] .tl-item .tl-dot { transform: scale(1); transition: none; }
body[data-motion="off"] .tl-item.tl-in .tl-dot::after { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .timeline::before { transform: scaleY(1) !important; transition: none !important; }
  .timeline::after { opacity: 1 !important; animation: none !important; }
  .tl-item { opacity: 1 !important; transform: none !important; transition: none !important; }
  .tl-item .tl-dot { transform: scale(1) !important; transition: none !important; }
  .tl-dot::after { animation: none !important; }
}

/* Steel tread-plate texture: procedural SVG emboss on industrial surfaces */
.why, .pit-card, .cta-band, .quote-band { position: relative; isolation: isolate; }
.why::before, .pit-card::before, .cta-band::before, .quote-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg stroke-width='7' stroke-linecap='round' fill='none'%3E%3Cg stroke='%23000000' stroke-opacity='0.55'%3E%3Cpath d='M10 25 L24 11'/%3E%3Cpath d='M42 57 L56 43'/%3E%3C/g%3E%3Cg stroke='%23ffffff' stroke-opacity='0.55'%3E%3Cpath d='M8 23 L22 9'/%3E%3Cpath d='M40 55 L54 41'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 46px 46px;
  opacity: 0.05;
}
.pit-card::before { opacity: 0.07; border-radius: 8px; }
.quote-band::before { opacity: 0.035; }
html[data-theme="light"] .cta-band::before, html[data-theme="light"] .quote-band::before { opacity: 0.03; }

/* CTA band, decorated: a high-res machinery frame under the copy (Dylan, 8/27).
   Overrides the tread texture on pages that opt in via .cta-photo. */
.cta-photo::before { background-image: var(--cta-img, url("assets/work/woods-driver-cab.jpg")); background-size: cover; background-position: var(--cta-pos, 50% 42%); filter: grayscale(1); opacity: 0.07; }  /* 9/3 team feedback: photo fought the quote text; was 0.13 */
html[data-theme="light"] .cta-photo::before { opacity: 0.055; }  /* was 0.10 */

/* Card depth: machined-edge 3D. A hairline top highlight (light catching the
   edge), a tight contact shadow, and a soft ambient lift seat each card. */
.svc-card, .cap-card, .person-card, .proj-feature, .proj-list li, .service-row, .how-grid {
  box-shadow:
    inset 0 1px 0 rgba(242, 237, 225, 0.07),
    0 1px 2px rgba(0, 0, 0, 0.45),
    0 12px 28px -10px rgba(0, 0, 0, 0.4);
}
.pit-card {
  box-shadow:
    inset 0 1px 0 rgba(242, 237, 225, 0.09),
    0 2px 4px rgba(0, 0, 0, 0.4),
    0 18px 40px -12px rgba(0, 0, 0, 0.5);
}
.svc-card, .cap-card { transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; }
.svc-card:hover, .cap-card:hover {
  box-shadow:
    inset 0 1px 0 rgba(242, 237, 225, 0.1),
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 22px 44px -12px rgba(0, 0, 0, 0.55);
}

/* Stats proof strip: recessed steel channel with pinstripe mile-markers */
.stats-band {
  position: relative; isolation: isolate;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0.10) 35%, rgba(0, 0, 0, 0.24));
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35), inset 0 -1px 0 rgba(242, 237, 225, 0.05);
}
.stats-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg stroke-width='7' stroke-linecap='round' fill='none'%3E%3Cg stroke='%23000000' stroke-opacity='0.55'%3E%3Cpath d='M10 25 L24 11'/%3E%3Cpath d='M42 57 L56 43'/%3E%3C/g%3E%3Cg stroke='%23ffffff' stroke-opacity='0.55'%3E%3Cpath d='M8 23 L22 9'/%3E%3Cpath d='M40 55 L54 41'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 46px 46px;
  opacity: 0.05;
}
.stat { transition: background 0.3s ease; }
.stat::before {
  content: ""; display: block; width: 34px; height: 6px; margin-bottom: 20px;
  background: linear-gradient(to bottom,
    var(--red) 0, var(--red) 2px,
    #fcc724 2px, #fcc724 4px,
    var(--stripe-white) 4px, var(--stripe-white) 6px);
  transition: width 0.35s cubic-bezier(0.2, 0.7, 0, 1);
}
.stat:hover { background: rgba(252, 199, 36, 0.045); }
.stat:hover::before { width: 62px; }

/* staggered rise-in; .stats-anim is added by JS so cells stay visible without it */
.stats-band.stats-anim .stat {
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0, 1), background 0.3s ease;
}
.stats-band.stats-anim .stat.stat-in { opacity: 1; transform: none; }
body[data-motion="off"] .stats-band .stat { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .stats-band .stat { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Footer: pinned to the dark palette in BOTH themes (like the nav), with
   social icons under the brand blurb that glow brand-gold on hover. */
.footer { background: #131009; color: #a99d87; border-top: 0; }
.footer a { color: #a99d87; }
.footer a:hover { color: #f2ede1; }
.footer-col h5 { color: #fcc724; }
.footer-col .f-item strong { color: #f2ede1; }
.footer-bottom { border-top-color: #322b1f; }
.footer .footer-services { color: #fcc724; }
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a {
  display: grid; place-items: center; width: 32px; height: 32px;
  border: 1px solid #322b1f; border-radius: 6px; color: #a99d87;
  transition: color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.footer-social svg { width: 15px; height: 15px; }
.footer-social a:hover, .footer-social a:focus-visible {
  color: #fcc724; border-color: rgba(252, 199, 36, 0.8);
  box-shadow: 0 0 18px rgba(252, 199, 36, 0.35), inset 0 0 8px rgba(252, 199, 36, 0.12);
  transform: translateY(-2px);
}
body[data-motion="off"] .footer-social a:hover { transform: none; }

/* footer carries the faint tread like the other dark plates */
.footer { isolation: isolate; }
.footer::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg stroke-width='7' stroke-linecap='round' fill='none'%3E%3Cg stroke='%23000000' stroke-opacity='0.55'%3E%3Cpath d='M10 25 L24 11'/%3E%3Cpath d='M42 57 L56 43'/%3E%3C/g%3E%3Cg stroke='%23ffffff' stroke-opacity='0.55'%3E%3Cpath d='M8 23 L22 9'/%3E%3Cpath d='M40 55 L54 41'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 46px 46px;
  opacity: 0.035;
}

/* (The 2026-07-16 second-level flyout experiment, .drop-sub / .sub-panel, was
   replaced by the full-width .mega-panel above on 2026-08-17.) */

/* Mobile menu (hamburger + overlay; button/panel injected by woods-app.js) */
.mnav-btn, .mnav { display: none; }
@media (max-width: 900px) {
  .mnav-btn {
    display: grid; gap: 4.5px; place-content: center;
    width: 42px; height: 38px; flex-shrink: 0;
    background: transparent; border: 1px solid rgba(242, 237, 225, 0.28);
    border-radius: 6px; cursor: pointer; padding: 0;
  }
  .mnav-btn span { display: block; width: 17px; height: 2px; background: #f2ede1; transition: transform 0.25s ease, opacity 0.25s ease; }
  body.mnav-open .mnav-btn span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  body.mnav-open .mnav-btn span:nth-child(2) { opacity: 0; }
  body.mnav-open .mnav-btn span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  .theme-toggle { margin-left: auto; }

  .mnav {
    position: fixed; inset: 0; z-index: 95; /* root context: above content, below the nav bar (100) */
    padding: 96px 26px 40px; overflow-y: auto;
    background: rgba(19, 16, 9, 0.97);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    flex-direction: column;
  }
  body.mnav-open .mnav { display: flex; }
  body.mnav-open { overflow: hidden; }
  /* keep the header row (logo, toggle, burger) above the overlay */
  .nav-logo, .theme-toggle, .mnav-btn { position: relative; z-index: 2; }
  body.mnav-open .nav, body.mnav-open .nav.scrolled { background: rgba(19, 16, 9, 0.97); border-bottom-color: #322b1f; }
  .mnav a { text-decoration: none; }
  .mnav-link { display: block; font-family: var(--font-display); font-weight: 400; font-size: 26px; letter-spacing: 0.03em; text-transform: uppercase; color: #f2ede1; padding: 10px 0; }
  .mnav-group { border-bottom: 1px solid rgba(242, 237, 225, 0.1); padding-bottom: 10px; margin-bottom: 8px; }
  /* plain top-level rows (Home, Careers) get the same divider as the accordion groups */
  .mnav-list > a.mnav-link { border-bottom: 1px solid rgba(242, 237, 225, 0.1); padding-bottom: 10px; margin-bottom: 8px; }
  .mnav-top {
    appearance: none; background: none; border: 0; cursor: pointer;
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    text-align: left; padding-right: 2px;
  }
  .mnav-caret { flex: none; opacity: 0.7; transition: transform 0.25s ease; }
  .mnav-group.open .mnav-caret { transform: rotate(180deg); }
  .mnav-subs {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows 0.28s cubic-bezier(0.2, 0.7, 0, 1);
  }
  .mnav-group.open .mnav-subs { grid-template-rows: 1fr; }
  .mnav-subs-inner { overflow: hidden; min-height: 0; display: flex; flex-direction: column; padding-left: 2px; }
  .mnav-cat {
    font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em;
    font-size: 17px; color: #fcc724; padding: 14px 0 4px;
  }
  .mnav-subs a { color: #e9e2d3; font-size: 15.5px; padding: 9px 0 9px 16px; border-left: 2px solid #322b1f; }
  .mnav-subs a:hover, .mnav-subs a:focus-visible { color: #fcc724; border-left-color: #fcc724; }
  body[data-motion="off"] .mnav-subs, body[data-motion="off"] .mnav-caret { transition: none; }
  .mnav-call { margin-top: 22px; justify-content: center; text-align: center; }
}

/* Stripe mark: replaces the numbered card eyebrows (01/02/03 read like a template) */
.stripe-mark {
  width: 44px; height: 6px; margin-bottom: 16px;
  background: linear-gradient(to bottom,
    var(--red) 0, var(--red) 2px,
    #fcc724 2px, #fcc724 4px,
    var(--stripe-white) 4px, var(--stripe-white) 6px);
}

/* the sticky call bar must not float over the open mobile menu */


/* ============ Header wordmark (8/17: Woods' own pinstripe vector replaces the
   CSS bar drawn under the PNG on 8/6, which sat uneven under the letters) ============ */
.nav-logo { position: relative; display: inline-block; }

/* mobile: icon-only pause control in the hero's corner (the 92px offset it
   used to carry cleared the sticky call bar, removed 8/25) */
@media (max-width: 700px) {
  .video-toggle {
    left: auto; right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    padding: 11px; border-radius: 50%;
  }
  .video-toggle .vt-label {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .video-toggle .vt-ico { width: 13px; height: 14px; }
}

/* category headers on the projects archive (engineer-language buckets) */
.cat-head { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 24px; letter-spacing: 0.03em; color: var(--cream); margin: 44px 0 18px; padding-bottom: 10px; border-bottom: 1px solid var(--line); position: relative; }
.cat-head::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 84px; height: 6px; background: linear-gradient(to bottom, var(--red) 0, var(--red) 2px, var(--gold) 2px, var(--gold) 4px, var(--stripe-white) 4px, var(--stripe-white) 6px); }

/* ============ 2026-08-17 round (Nate's edit list + Dylan-Nate sync) ============ */

/* Global: every closing CTA heading sits on the same H1 scale as the section
   titles. The old .cta-band h2 ran a size up on every page (Nate: "the very
   bottom call to action H1 font is bigger than every other H1"). */
.cta-band h2, .cta-band .sec-title { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.02; max-width: 16em; }
.cta-band .cta-copy { margin-top: 26px; }
.cta-simple { background: var(--bg); }
.cta-simple .inner { align-items: center; }
.cta-simple .cta-col { align-items: flex-start; gap: 26px; }
.cta-simple .cta-col .btn { padding: 18px 30px; font-size: 15px; }
@media (max-width: 900px) { .cta-simple .cta-col { align-items: flex-start; } }
/* Both CTA buttons the same size (Dylan 9/1): a single max-content track, so the
   buttons stretch to the wider label; the phone line keeps its own width */
.cta-simple .cta-col { display: grid; grid-template-columns: max-content; justify-content: start; }
.cta-simple .cta-col .btn { justify-content: center; }
.cta-simple .cta-col .phone-xl { justify-self: start; }

/* Global: section separation. `.alt` shifts a band to the second surface so
   adjacent sections stop reading as one. Works in both themes via tokens. */
section.alt { background: var(--bg-2); }
section.alt + section.alt { border-top: 1px solid var(--line); }

/* Global: multi-line display headings without manual <br> runts */
.sec-title .line, .why-statement .line { display: block; }
.nowrap { white-space: nowrap; }
.inline-link { color: var(--cream); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--gold); }
.inline-link:hover { color: var(--gold); }
.sec-cta { padding: 14px 24px; font-size: 13.5px; align-self: flex-end; }

/* Home: Who we are (team photo left, short company statement right) */
/* 8/20 client call: the old crew photo (contains former employees) may only appear
   as a dimmed background texture, never as a featured image. Swap the source to the
   new crew photo when the rescheduled HQ shoot delivers it. */
.who { position: relative; isolation: isolate; }
.who::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background: url("assets/work/woods-team-2026.jpg") center 30% / cover no-repeat;
  opacity: 0.10; filter: grayscale(1); }
.who-body p { color: var(--muted); font-size: 17.5px; line-height: 1.65; margin-top: 18px; }
.who-body p:first-of-type { margin-top: 26px; }
.who-body .btn-chev { margin-top: 26px; }

/* Quotes: image left, quotation right, so the words sit against the picture
   instead of the page edge (Nate: fill the right-side negative space) */
.quote-split { display: grid; grid-template-columns: minmax(min(280px, 100%), 0.9fr) 1.3fr; gap: 56px; align-items: center; }
.quote-split .quote-photo { margin: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel);
  box-shadow: inset 0 1px 0 rgba(242, 237, 225, 0.07), 0 1px 2px rgba(0, 0, 0, 0.45), 0 12px 28px -10px rgba(0, 0, 0, 0.4); }
.quote-split .quote-photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.quote-split .quote-body { min-width: 0; }
.quote-split blockquote { max-width: none; }
@media (max-width: 900px) { .quote-split { grid-template-columns: 1fr; gap: 28px; } .quote-split .quote-photo img { aspect-ratio: 16 / 10; } }

/* Home before/after: tag text pure white in the dark chip for contrast */
.ba-tag { color: #ffffff; background: rgba(19, 16, 9, 0.82); }

/* Home selected work: three larger cards up top, five smaller below */

/* Global forms: the tread texture and recessed slots were punching through
   too hard in dark mode (8/17 sync), and select arrows crowded the right edge */
html[data-theme="dark"] .quote-form::before, .quote-form::before { opacity: 0.025; }
.qf-field input, .qf-field select, .qf-field textarea { background: rgba(0, 0, 0, 0.14); }
.qf-field select { padding-right: 44px; background-repeat: no-repeat; background-position: right 16px center; }
select { padding-right: 44px; }

/* Subpage hero band: one component for Community, Our Company, Careers.
   Taller than the old 56vh community band (Nate: media needs breathing room),
   pause control styled and placed exactly like the homepage hero's. */
.hero-band { position: relative; height: 66vh; min-height: 420px; overflow: hidden; background: var(--bg); }
.hero-band video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-band .band-veil { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(19, 16, 9, 0.35) 0%, rgba(19, 16, 9, 0.10) 45%, var(--bg) 100%); }
/* Tight variant: footage stays clean until the bottom edge (bright pit
   footage washed out under the standard 45% ramp - materials hero, 8/31) */
.hero-band .band-veil.veil-tight {
  background: linear-gradient(to bottom, rgba(19, 16, 9, 0.35) 0%, rgba(19, 16, 9, 0.10) 45%, rgba(19, 16, 9, 0) 80%, var(--bg) 100%); }
.hero-band .band-title {
  position: absolute; left: max(28px, 5vw); bottom: 64px; z-index: 2;
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(34px, 5vw, 64px); line-height: 1.04; letter-spacing: 0.02em;
  color: #f2ede1; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}
@media (max-width: 700px) { .hero-band .band-title { bottom: 56px; } }
.hero-band .video-toggle { display: inline-flex; bottom: 26px; left: max(28px, 5vw); }
.hero-band + .about-head { padding-top: 34px; }
@media (max-width: 700px) { .hero-band { height: 52vh; min-height: 300px; } .hero-band .video-toggle { left: auto; right: 16px; bottom: 16px; } }

/* Our Company: history band pullout sits under the heading, right side
   carries a photo instead of open space */
.history-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: start; }
.history-grid .hist-lede { color: var(--muted); font-size: 17px; line-height: 1.65; max-width: 560px; margin: -30px 0 40px; }
.history-photo { margin: 0; position: sticky; top: 110px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel);
  box-shadow: inset 0 1px 0 rgba(242, 237, 225, 0.07), 0 1px 2px rgba(0, 0, 0, 0.45), 0 12px 28px -10px rgba(0, 0, 0, 0.4); }
.history-photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.history-photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 18px; font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #f2ede1;
  background: linear-gradient(to top, rgba(19, 16, 9, 0.85), transparent); }
@media (max-width: 900px) { .history-grid { grid-template-columns: 1fr; } .history-photo { position: static; } .history-photo img { aspect-ratio: 16 / 10; } }

/* Careers intro: image left, heading and copy right */
.intro-split { display: grid; grid-template-columns: minmax(min(280px, 100%), 0.95fr) 1.15fr; gap: 56px; align-items: center; }
.intro-split .intro-photo { margin: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel);
  box-shadow: inset 0 1px 0 rgba(242, 237, 225, 0.07), 0 1px 2px rgba(0, 0, 0, 0.45), 0 12px 28px -10px rgba(0, 0, 0, 0.4); }
.intro-split .intro-photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.intro-split .about-lede { margin-top: 22px; }
@media (max-width: 900px) { .intro-split { grid-template-columns: 1fr; gap: 28px; } }

/* Careers benefits cards: same lift + gold-edge hover as the capability cards */
.benefit-card, .how-block { transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; }
.benefit-card:hover { border-color: rgba(252, 199, 36, 0.4); transform: translateY(-3px);
  box-shadow: inset 0 1px 0 rgba(242, 237, 225, 0.1), 0 2px 4px rgba(0, 0, 0, 0.5), 0 22px 44px -12px rgba(0, 0, 0, 0.55); }
body[data-motion="off"] .benefit-card:hover { transform: none; }

/* Forms centered in their section (Careers application, and any .quote-form
   used standalone) so the plate no longer hugs the left edge */
.form-centered { max-width: 860px; margin-left: auto; margin-right: auto; }
.form-centered .qf-grid { max-width: none; }
.people-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 900px) { .people-3 { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .people-3 { grid-template-columns: 1fr; } }
.people-3 .person-card image-slot { height: 300px; }
.sec-title .line.red { color: var(--red); }
/* dark mode: the tread plate behind CTA and quote bands read too loud (8/17 sync) */
.cta-band::before, .quote-band::before { opacity: 0.025; }

/* Capability map tiles (8/18): the market/category strip on What We Do and
   Projects, and under Selected Work on the homepage. Reads like the mega
   menu columns so the taxonomy is the same everywhere a buyer looks. */
.cap-map { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cap-map-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cap-tile {
  display: flex; flex-direction: column; gap: 12px; text-decoration: none;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 24px 22px 22px;
  box-shadow: inset 0 1px 0 rgba(242, 237, 225, 0.07), 0 1px 2px rgba(0, 0, 0, 0.45), 0 12px 28px -10px rgba(0, 0, 0, 0.4);
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.cap-tile::before { content: ""; display: block; width: 34px; height: 6px;
  background: linear-gradient(to bottom, var(--red) 0, var(--red) 2px, #fcc724 2px, #fcc724 4px, var(--stripe-white) 4px, var(--stripe-white) 6px);
  transition: width 0.35s cubic-bezier(0.2, 0.7, 0, 1); }
.cap-tile:hover { border-color: rgba(252, 199, 36, 0.4); transform: translateY(-3px);
  box-shadow: inset 0 1px 0 rgba(242, 237, 225, 0.1), 0 2px 4px rgba(0, 0, 0, 0.5), 0 22px 44px -12px rgba(0, 0, 0, 0.55); }
.cap-tile:hover::before { width: 62px; }
body[data-motion="off"] .cap-tile:hover { transform: none; }
.cap-tile-head { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 21px; line-height: 1.08; color: var(--cream); }
.cap-tile-list { color: var(--muted); font-size: 13.5px; line-height: 1.55; }
@media (max-width: 1100px) { .cap-map, .cap-map-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cap-map, .cap-map-5 { grid-template-columns: 1fr; } }

/* job-type cards under each market on What We Do */
.job-types { margin-top: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.job-types li { scroll-margin-top: 110px; }
.job-types p a { color: var(--cream); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--gold); }
.job-types p a:hover { color: var(--gold); }
@media (max-width: 1100px) { .job-types { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .job-types { grid-template-columns: 1fr; } }
section[id], .service-row[id] { scroll-margin-top: 90px; }

/* Symmetry (Dylan 8/17): reserve two lines for every column head so lists in
   the mega menu and the capability tiles start on the same row whether the
   head runs one line or two. */
.nav-links .mega-col a.mega-head { min-height: 74px; line-height: 1.08; box-sizing: border-box; }
.cap-tile-head { min-height: 2.2em; }

/* Mega menu hover stability (Dylan 8/17): the panel hangs off the bar's
   bottom edge, but the link sits above the bar's padding, so the cursor
   crossed a dead strip and :hover dropped. A transparent bridge covers the
   strip, and JS holds the panel open through a short grace period. */
.mega-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }

/* Card-grid symmetry (Dylan 8/17, second pass): headings in every card grid
   reserve two lines so body copy starts on the same row across a row of
   cards, whether the head wraps or not. */
.how-block h3, .bene-card h3, .cap-card h3, .proj-list h4, .svc-card h3 { min-height: 2.2em; }

/* Contact: phone sits above the grid so the map and the routing blocks start
   on the same line, and the blocks spread to the map's bottom edge (Dylan 8/17) */
.contact-head { margin-bottom: 34px; }
.contact-grid-aligned { align-items: stretch; }
.contact-grid-aligned .map-embed { margin-top: 0; }
.contact-grid-aligned .contact-blocks { align-content: space-between; height: 100%; }
@media (max-width: 900px) { .contact-grid-aligned .contact-blocks { align-content: start; height: auto; margin-top: 26px; } }

/* Footer contrast (Dylan 8/17): links and body copy were tan on the dark
   tread; lift to near-cream, keep heads gold, brighten link hover, and dial
   the tread down so it stops competing with the text. */
.footer, .footer a, .footer p, .footer-col .f-item { color: #e2dbcc; }
.footer a:hover { color: #fcc724; }
.footer-col h5 { color: #fcc724; }
.footer-col .f-item strong { color: #ffffff; }
.footer-bottom, .footer-bottom a { color: #cfc6b3; }
.footer-bottom a:hover { color: #fcc724; }
.footer::after { opacity: 0.02; }
.footer-social a { color: #e2dbcc; border-color: #4a4133; }

/* ============ Service-area map (8/17): brand-styled SVG from US Census TIGER geometry ============ */
.map-wrap { position: relative; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel);
  box-shadow: inset 0 1px 0 rgba(242, 237, 225, 0.07), 0 1px 2px rgba(0, 0, 0, 0.45), 0 12px 28px -10px rgba(0, 0, 0, 0.4); }
.me-map { display: block; width: 100%; height: auto; font-family: var(--font-body); }
.mm-sea { fill: rgba(120, 150, 150, 0.18); }
.mm-land polygon { fill: var(--bg-2); stroke: var(--line); stroke-width: 0.8; }
.mm-land-out polygon { fill: var(--bg); stroke: var(--line); stroke-width: 0.6; }
.mm-water polygon { fill: rgba(120, 150, 150, 0.22); stroke: rgba(120, 150, 150, 0.6); stroke-width: 0.6; }
.mm-countylines polygon { fill: none; stroke: var(--muted); stroke-width: 1.4; }
.mm-road-p { fill: none; stroke: var(--muted); stroke-width: 1; opacity: 0.55; }
.mm-road-i { fill: none; stroke: var(--red); stroke-width: 2.2; opacity: 0.8; }
.mm-waterlbl { font-size: 11px; font-style: italic; fill: var(--muted); }
.mm-roadlbl { font-size: 11px; font-weight: 700; fill: var(--red); }
/* pits map (9/2): denser road network + labels along the roads */
.mm-road-s { fill: none; stroke: var(--muted); stroke-width: 0.9; opacity: 0.45; }
.mm-road-l { fill: none; stroke: var(--muted); stroke-width: 0.6; opacity: 0.32; }
.me-map-pits .mm-roadlbl, .me-map-pits .mm-roadname { paint-order: stroke; stroke: var(--panel); stroke-width: 3px; stroke-linejoin: round; }
.me-map-pits .mm-roadlbl { font-size: 10.5px; }
.mm-roadname { font-size: 9px; font-weight: 500; fill: var(--muted); letter-spacing: 0.02em; }
.mm-county { font-size: 12px; letter-spacing: 0.2em; font-weight: 700; fill: var(--muted); }
.mm-hit { fill: transparent; }
.mm-dot { fill: var(--cream); stroke: var(--panel); stroke-width: 1.5; transition: r 0.2s ease, fill 0.2s ease; }
.mm-lbl { font-size: 12px; fill: var(--cream); pointer-events: none; paint-order: stroke; stroke: var(--bg-2); stroke-width: 3px; stroke-linejoin: round; }
.mm-town { cursor: pointer; outline: none; }
.mm-town:hover .mm-dot, .mm-town:focus .mm-dot, .mm-town.on .mm-dot { fill: var(--red); r: 6.5; }
.mm-town:hover .mm-lbl, .mm-town:focus .mm-lbl, .mm-town.on .mm-lbl { font-weight: 700; }
.mm-mark { fill: var(--red); stroke: var(--panel); stroke-width: 2; }
.mm-office .mm-mark, .mm-office-mark { fill: var(--cream); }
.mm-sitelbl { font-size: 12.5px; font-weight: 700; fill: var(--cream); paint-order: stroke; stroke: var(--bg-2); stroke-width: 3px; stroke-linejoin: round; }
.mm-site { cursor: pointer; text-decoration: none; }
.mm-site:hover .mm-mark { fill: var(--gold); }
.mm-legend-bg { fill: var(--panel); stroke: var(--line); }
.mm-legend-txt { font-size: 12px; fill: var(--cream); }
.mm-legend-note { font-size: 10.5px; fill: var(--muted); }
.mm-siteaddr { font-size: 11.5px; fill: var(--muted); paint-order: stroke; stroke: var(--bg-2); stroke-width: 3px; stroke-linejoin: round; }
html[data-theme="dark"] .mm-sea { fill: rgba(60, 90, 100, 0.35); }
html[data-theme="dark"] .mm-water polygon { fill: rgba(60, 90, 100, 0.45); stroke: rgba(120, 150, 150, 0.4); }
/* hover card */
.map-tip {
  position: absolute; z-index: 5; pointer-events: none; opacity: 0; transform: translateY(4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  min-width: 190px; padding: 12px 14px; border-radius: 6px;
  background: #14110b; color: #f2ede1; border: 1px solid #322b1f;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4); font-size: 13px; line-height: 1.5;
}
.map-tip.on { opacity: 1; transform: none; }
.map-tip strong { display: block; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 17px; letter-spacing: 0.03em; color: #fff; }
.map-tip .tip-county { color: #a99d87; font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 8px; display: block; }
.map-tip .tip-row { display: flex; justify-content: space-between; gap: 16px; }
.map-tip .tip-row span:last-child { color: #fcc724; font-weight: 700; white-space: nowrap; }
.map-tip .tip-note { color: #a99d87; font-size: 11px; margin-top: 8px; }
/* map + side rail on the service-area page */
.map-grid { display: grid; grid-template-columns: 1.5fr 0.8fr; gap: 40px; align-items: start; }
.map-side { display: grid; gap: 14px; }
.map-side .site-card { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 20px 22px; text-decoration: none; color: inherit; display: block;
  transition: border-color 0.3s ease, transform 0.3s ease; }
.map-side .site-card:hover { border-color: rgba(252, 199, 36, 0.4); transform: translateY(-2px); }
.map-side .site-card h4 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 19px; color: var(--cream); margin-bottom: 4px; }
.map-side .site-card p { color: var(--muted); font-size: 14px; line-height: 1.5; }
.map-side .site-card p strong { color: var(--cream); font-weight: 600; }
.map-side .site-hint { color: var(--muted); font-size: 13.5px; line-height: 1.55; padding: 4px 2px; }
@media (max-width: 1000px) { .map-grid { grid-template-columns: 1fr; } .map-side { grid-template-columns: 1fr 1fr; } .map-side .site-hint { grid-column: 1 / -1; } }
@media (max-width: 560px) { .map-side { grid-template-columns: 1fr; } .mm-lbl { font-size: 15px; } .mm-county, .mm-sitelbl { font-size: 15px; } }
/* town list: no bold, no distinction (Dylan 8/17), and evenly spaced columns */
.town-list li strong { font-weight: inherit; color: inherit; }
/* local record cards */
.record-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .record-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .record-grid { grid-template-columns: 1fr; } }
/* still-photo variant of the subpage hero band */
.hero-band-still img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.hero-band-still { height: 52vh; min-height: 340px; }

/* Featured video (projects): click-to-play with a brand play button over the poster */
.video-frame { position: relative; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #000;
  box-shadow: inset 0 1px 0 rgba(242, 237, 225, 0.07), 0 1px 2px rgba(0, 0, 0, 0.45), 0 12px 28px -10px rgba(0, 0, 0, 0.4); }
.video-frame video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.video-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 78px; height: 78px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85); background: rgba(205, 20, 43, 0.92); color: #fff; display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); transition: transform 0.25s ease, background 0.25s ease; }
.video-play svg { margin-left: 4px; }
.video-play:hover { transform: translate(-50%, -50%) scale(1.06); background: var(--red); }
.video-frame.playing .video-play { display: none; }

/* ============ Type hierarchy (Dylan 8/18): one lead per page ============
   Page H1 leads at 60px max; section H2s and CTAs sit at 46; hero at 72.
   The H1 is descriptive (what the page is); the editorial line moved into
   the lede. */
h1.sec-title { font-size: clamp(36px, 4.4vw, 60px); line-height: 1.0; max-width: 16em; }
.about-head h1.sec-title { max-width: 14em; }
.ty-title, .nf-title { font-size: clamp(36px, 4.4vw, 60px); }

/* ============ Round 2 + 8/18 sync ============ */
/* Section headers stack: heading spreads across, side element sits directly
   beneath (like mobile), instead of heading-left / button-right. */
.sec-head { flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 44px; }
.sec-head > div { width: 100%; }
.sec-title { max-width: 22em; }
h1.sec-title { max-width: 18em; }
.sec-side { max-width: 640px; padding-bottom: 0; }
.sec-cta { margin-top: 2px; align-self: flex-start; }
/* Bottom CTA standard: button column top-aligned to the heading; phone scaled with the type system */
.cta-band .inner { align-items: start; }
.phone-xl { font-size: clamp(28px, 3vw, 44px); }
.cta-band .cta-col { padding-top: 6px; }
/* Runts: balance every display heading and card title */
h1, h2, .sec-title, .why-statement, .cta-band h2, .person-body h3, .proj-list h4, .cap-card h3, .how-block h3, .bene-card h3, .svc-card h3, .service-row h2, .cap-tile-head { text-wrap: balance; }
/* Project cards: one-line titles, descriptions clamped, equal heights */
.person-body h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 0; }
.person-body p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.people-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .people-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .people-grid { grid-template-columns: 1fr; } }
/* Featured project: text LEFT, image RIGHT, aligned to the card grid */
.service-row.feature { grid-template-columns: 1fr 1.05fr; }
.service-row.feature .svc-media { order: 2; }
@media (max-width: 900px) { .service-row.feature { grid-template-columns: 1fr; } .service-row.feature .svc-media { order: 0; } }
/* Video cell placeholder: the architecture is built; the file drops in later */
.video-cell { position: relative; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); aspect-ratio: 16 / 9;
  box-shadow: inset 0 1px 0 rgba(242, 237, 225, 0.07), 0 1px 2px rgba(0, 0, 0, 0.45), 0 12px 28px -10px rgba(0, 0, 0, 0.4); }
.video-cell.empty { display: grid; place-items: center; background: repeating-linear-gradient(135deg, var(--panel) 0 14px, var(--bg-2) 14px 28px); }
.video-cell.empty .vc-label { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); border: 1px dashed var(--line); border-radius: 99px; padding: 8px 14px; background: var(--panel); }
.video-cell video { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-cell .video-play { width: 64px; height: 64px; }
.video-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.video-pair h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 22px; line-height: 1.1; color: var(--cream); margin: 14px 0 4px; }
.video-pair p { color: var(--muted); font-size: 14.5px; line-height: 1.55; }
@media (max-width: 900px) { .video-pair { grid-template-columns: 1fr; } }
/* Home video library: YouTube-style cards linking to the page that hosts each video */
.vlib { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.vlib a { text-decoration: none; color: inherit; display: block; }
.vlib .video-cell { aspect-ratio: 16 / 9; transition: transform 0.3s ease, border-color 0.3s ease; }
.vlib a:hover .video-cell { transform: translateY(-3px); border-color: rgba(252, 199, 36, 0.4); }
.vlib .vl-title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 18px; line-height: 1.1; color: var(--cream); margin-top: 12px; }
.vlib .vl-meta { color: var(--muted); font-size: 13.5px; margin-top: 3px; }
.vlib .video-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vlib .video-cell video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vlib .vl-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(205, 20, 43, 0.92); border: 2px solid rgba(255,255,255,0.85); display: grid; place-items: center; color: #fff; }
@media (max-width: 1100px) { .vlib { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .vlib { grid-template-columns: 1fr; } }
/* Careers apply: CTA copy beside the form in one section (Dylan 8/31);
   form bands stay clean per the launch-round rule, so no photo backdrop */
/* Contact department directory (Dylan 9/1: organize the information). Six
   departments as scannable cards instead of a cramped prose stack beside the
   map, so a GC hunting the estimator finds them at a glance. */
.dept-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 22px; align-items: start; }
.dept-card {
  border: 1px solid var(--line); border-radius: 6px; background: var(--panel); overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(242, 237, 225, 0.06), 0 1px 2px rgba(0, 0, 0, 0.3);
}
html[data-theme="light"] .dept-card { box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 1px 2px rgba(24,20,16,0.06); }
.dept-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 15px; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: 14.5px; letter-spacing: 0.03em; color: var(--cream);
  border-bottom: 2px solid transparent; transition: border-color 0.2s ease, color 0.2s ease;
}
.dept-head:hover { color: var(--gold); }
.dept-card.open .dept-head { border-bottom-color: var(--gold); }
.dept-caret { flex: none; opacity: 0.65; transition: transform 0.25s ease; }
.dept-card.open .dept-caret { transform: rotate(180deg); }
/* 0fr to 1fr animates a container of unknown height without hard-coding one */
.dept-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.25s ease; }
.dept-card.open .dept-body { grid-template-rows: 1fr; }
.dept-body-inner { overflow: hidden; }
.dept-body-inner > :first-child { margin-top: 13px; }
.dept-body-inner > * { padding-left: 15px; padding-right: 15px; }
.dept-body-inner > :last-child { padding-bottom: 14px; }
body[data-motion="off"] .dept-body, body[data-motion="off"] .dept-caret { transition: none; }
.dept-person { color: var(--cream); font-size: 14px; font-weight: 600; margin: 0 0 3px; line-height: 1.35;
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
/* role sits on the same line as its own name, so multi-person cards do not make
   the reader guess which title belongs to whom */
.dept-role-inline { color: var(--muted); font-size: 10.5px; letter-spacing: 0.07em;
  text-transform: uppercase; font-weight: 600; white-space: nowrap; flex: none; }
.dept-person + .dept-person { border-top: 1px solid var(--line); padding-top: 5px; }
.dept-card a:first-of-type { margin-top: 7px; }
.dept-card a { display: block; color: var(--red); text-decoration: none; font-size: 13.5px; line-height: 1.6; word-break: break-word; }
.dept-card a:hover { text-decoration: underline; }
.dept-note { color: var(--muted); font-size: 12.5px; line-height: 1.45; margin: 6px 0 0; }
.dept-note a { display: inline; }
@media (max-width: 1000px) { .dept-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .dept-grid { grid-template-columns: 1fr; } }
.contact-map-full { margin-top: 28px; }


/* Contact page as one two-column section (Dylan 9/1): reach-us info on the left,
   form on the right, instead of two stacked sections. Left column is narrower
   so the form keeps room for its two-up field rows. */
.contact-split { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(min(290px, 100%), 0.82fr); gap: 48px; align-items: stretch; }
/* Dylan 9/1: form on the LEFT, phone + dropdowns + map on the right, and the form card's
   top and bottom line up with them. The form column is a flex column; the card fills
   whatever height the side sets. Stacked on small screens the side (phone) stays first. */
.contact-split .contact-main { order: -1; display: flex; flex-direction: column; }
.contact-split .quote-form { flex: 1 1 auto; }
@media (max-width: 960px) { .contact-split .contact-main { order: 0; } }
/* Services directory (hub) */
.hub-head .about-lede { max-width: none; }
/* Text directory (Dylan 9/1: no images, a directory with links; one band, families as subheads) */
.dir-band { padding-top: 40px; }
.dir-family + .dir-family { margin-top: 48px; }
.dir-h2 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.05; color: var(--cream); margin: 0; }
.dir-blurb { margin: 8px 0 6px; color: var(--muted); font-size: 15px; max-width: none; }
.dir-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 0 48px; }
.dir-item { display: block; padding: 18px 0 20px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.dir-item h3 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 24px; line-height: 1.05; color: var(--cream); margin: 0 0 6px; display: flex; align-items: center; gap: 10px; }
.dir-item h3::after { content: "\2192"; color: var(--gold); font-size: 18px; transition: transform 0.25s ease; }
.dir-item:hover h3::after { transform: translateX(4px); }
.dir-item p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.mega-all { display: inline-block; margin-bottom: 14px; color: var(--gold); font-size: 12.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; }
.mega-all:hover { text-decoration: underline; }
.contact-split .dept-grid { grid-template-columns: 1fr; margin-top: 18px; }
.contact-split .contact-head { margin: 0; }
.contact-split .map-embed { margin-top: 18px; }
/* 9/2 meeting: the side column matches the form exactly. Two-row grid: the
   heading and the phone number share the top row (bottom-aligned), the form
   and the dropdowns+map stack share the second, so both start and end on the
   same lines with every dropdown closed. The map absorbs the difference and
   yields to a floor when a dropdown opens. */
.contact-split { grid-template-rows: auto 1fr; row-gap: 0; }
.contact-split .contact-main, .contact-split .contact-side { display: contents; }
.contact-split .apply-grid { display: contents; }
.contact-split .apply-intro { grid-column: 1; grid-row: 1; align-self: end; }
.contact-split .contact-head { grid-column: 2; grid-row: 1; align-self: end; margin: 0 0 24px; }
.contact-split .quote-form { grid-column: 1; grid-row: 2; }
.contact-split .contact-stack { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; min-width: 0; }
.contact-split .contact-stack .dept-grid { margin-top: 0; }
.contact-split .contact-stack .map-embed { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 320px; }
.contact-split .contact-stack .map-embed iframe { flex: 1 1 auto; height: auto; min-height: 260px; }
@media (max-width: 960px) {
  .contact-split { grid-template-rows: none; row-gap: 28px; }
  .contact-split .apply-intro, .contact-split .quote-form, .contact-split .contact-head, .contact-split .contact-stack { grid-column: 1; grid-row: auto; }
  .contact-split .apply-intro { order: 1; } .contact-split .quote-form { order: 2; }
  .contact-split .contact-head { order: 3; margin: 0; } .contact-split .contact-stack { order: 4; display: block; }
  .contact-split .contact-stack .map-embed { display: block; min-height: 0; }
  .contact-split .contact-stack .map-embed iframe { height: 360px; }
}
.contact-split .apply-grid { display: contents; } /* 9/2: intro and form are grid items of the split */
.contact-split .apply-intro { position: static; margin-bottom: 24px; }
.contact-split .quote-form { margin: 0; max-width: none; }
@media (max-width: 1000px) {
  .contact-split { grid-template-columns: 1fr; gap: 36px; }
  .contact-split .dept-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) { .contact-split .dept-grid { grid-template-columns: 1fr; } }
.apply-grid { display: grid; grid-template-columns: minmax(min(280px, 100%), 0.85fr) minmax(0, 1.15fr); gap: 56px; align-items: start; }
.apply-grid .quote-form { margin: 0; max-width: none; }
.apply-grid .qf-grid { max-width: none; }
.apply-intro { position: sticky; top: 110px; }
@media (max-width: 900px) { .apply-grid { grid-template-columns: 1fr; gap: 32px; } .apply-intro { position: static; } }
/* Photo backdrop on any section band (Dylan 9/1, reversing the 8/31
   form-bands-stay-clean call). Same grayscale low-opacity treatment as the
   sitewide CTA bands so it reads as one system; each page sets its own image
   with --band-img, the way .cta-photo uses --cta-img. */
.band-photo { position: relative; isolation: isolate; overflow: hidden; }
.band-photo::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--band-img) var(--band-pos, center 45%) / cover no-repeat;
  filter: grayscale(1); opacity: 0.13;
}
html[data-theme="light"] .band-photo::before { opacity: 0.10; }

/* Materials pits map (8/31, Dylan: way too big): the 900x1064 portrait SVG at
   full column width ran over 1000px tall; cap and center it */
/* Pits map (9/2, Dylan): full-bleed band with zoom and pan. The SVG keeps its
   viewBox; woods-app.js drives zoom/pan by rewriting it. */
.pits-map { max-width: none; width: 100%; margin: 0 0 26px; border-radius: 8px;
  height: clamp(400px, 62vh, 720px); background: var(--panel); touch-action: none; user-select: none; }
.pits-map .me-map { width: 100%; height: 100%; cursor: grab; }
.pits-map.dragging .me-map { cursor: grabbing; }
.map-zoom { position: absolute; left: 14px; top: 14px; display: grid; gap: 6px; z-index: 5; }
.map-zoom button { width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--cream); font: 700 20px/1 var(--font-body); cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 20px -10px rgba(0,0,0,0.45); }
.map-zoom button:hover, .map-zoom button:focus-visible { border-color: #fcc724; outline: none; }
.map-zoom button.reset { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.map-hint { position: absolute; left: 14px; bottom: 14px; z-index: 5; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px; }
@media (max-width: 700px) { .pits-map { height: clamp(340px, 58vh, 560px); } .map-hint { display: none; } }

/* Home video theater (8/31, per the 8/27 ruling): muted primary + switch rail
   replaces the 4-card grid; coming-soon tiles cut, rail grows as videos land */
.vtheater { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(min(300px, 100%), 1fr); gap: 24px; align-items: start; }
.vtheater .vl-title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 20px; line-height: 1.1; color: var(--cream); margin-top: 14px; }
.vtheater .vl-meta { color: var(--muted); font-size: 13.5px; margin-top: 3px; }
.vt-desc { color: var(--muted); font-size: 14.5px; line-height: 1.6; margin-top: 8px; max-width: 640px; }
.vt-sound { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #fff;
  background: rgba(19, 16, 9, 0.72); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 99px; padding: 10px 16px; cursor: pointer; transition: background 0.25s ease, border-color 0.25s ease; }
.vt-sound:hover { background: var(--red); border-color: var(--red); }
.vt-sound[hidden] { display: none; }
/* Desktop rail matches the playing video's height exactly (Dylan 8/31):
   rail height = rail width x 1.9 x 9/16 (the 1.9fr/1fr column split), so the
   stack of compact rows always ends level with the player's bottom edge */
/* 9/3: rows are hard-equal (minmax(0,1fr)) and thumbs take a fixed share of the rail width,
   so a two-line title can no longer stretch its row and push its text out of line */
.vt-rail { display: grid; gap: 14px; grid-auto-rows: minmax(0, 1fr); aspect-ratio: 1000 / 1069; }
.vt-item { display: grid; grid-template-columns: 42% minmax(0, 1fr); gap: 12px; align-items: center; min-height: 0; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; color: inherit; }
.vt-thumb { position: relative; width: 100%; height: auto; max-height: 100%; min-height: 0; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); transition: transform 0.3s ease, border-color 0.3s ease; }
.vt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vt-item:hover .vt-thumb { transform: translateY(-2px); border-color: rgba(252, 199, 36, 0.4); }
.vt-item.on .vt-thumb { border-color: var(--gold); }
.vt-dur { position: absolute; right: 8px; bottom: 8px; font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: #fff; background: rgba(19, 16, 9, 0.78); border-radius: 4px; padding: 4px 6px; }
.vt-now { position: absolute; left: 8px; top: 8px; display: none; font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #131009; background: var(--gold); border-radius: 4px; padding: 4px 7px; }
.vt-item.on .vt-now { display: block; }
.vt-info { display: grid; gap: 3px; min-width: 0; }
.vt-t { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 17px; line-height: 1.1; color: var(--cream); }
.vt-m { color: var(--muted); font-size: 13px; }
@media (max-width: 1100px) {
  .vtheater { grid-template-columns: 1fr; }
  .vt-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; aspect-ratio: auto; }
  .vt-item { grid-template-columns: 1fr; align-items: start; gap: 10px; }
  .vt-thumb { height: auto; max-height: none; width: 100%; }
}
@media (max-width: 560px) { .vt-rail { grid-template-columns: 1fr; } .vt-item { grid-template-columns: 140px minmax(0, 1fr); align-items: center; } }

/* Earthwork & Specialty job-type cards: three equal columns */
.job-types.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .job-types.cols-3 { grid-template-columns: 1fr; } }
/* Scroll hint: readable over footage in both themes */

/* About: history photo recentered on the people; leadership portraits zoomed out, tops of heads clear */
.history-photo img { object-position: 45% 50%; aspect-ratio: 1 / 1; }
.people-3 .person-card image-slot, #leadership .person-card image-slot { height: 330px; }

/* 8/18 placements: contact shop photo, capability scope photo */
.contact-photo { margin: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); }
.contact-photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.contact-photo figcaption { padding: 10px 14px; font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.scope-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 32px; align-items: start; }
.scope-photo { margin: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); position: sticky; top: 110px; }
.scope-photo img { display: block; width: 100%; height: auto; }
.scope-photo figcaption { padding: 10px 14px; font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 900px) { .scope-grid { grid-template-columns: 1fr; } .scope-photo { position: static; } }
.hero-band + .rates-head { padding-top: 34px; }

/* Project pins + neighbor towns on the map (8/18) */
.mm-pin { fill: var(--red); stroke: var(--panel); stroke-width: 2; transition: r 0.2s ease; }
.mm-proj { cursor: pointer; }
.mm-proj:hover .mm-pin, .mm-proj:focus .mm-pin, .mm-proj.on .mm-pin { r: 8; fill: var(--gold); }
.mm-outdot { fill: var(--muted); }
.mm-outlbl { font-size: 11px; font-style: italic; fill: var(--muted); }

/* Associations (8/27 client meeting): names now, logos when Gregg supplies them */
/* Association badges centered on the page and given a reveal + hover (Dylan 9/1) */
.assoc-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 6px auto 22px; max-width: 980px; }
.assoc-item {
  border: 1px solid var(--line); background: #ffffff; border-radius: 6px;
  padding: 26px 24px; display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0, 1),
              box-shadow 0.28s ease, border-color 0.28s ease;
  box-shadow: 0 1px 2px rgba(24, 20, 16, 0.06);
}
.assoc-item.in { opacity: 1; transform: none; }
/* stagger so they land left to right rather than all at once */
.assoc-item:nth-child(2) { transition-delay: 0.09s; }
.assoc-item:nth-child(3) { transition-delay: 0.18s; }
.assoc-item:hover { transform: translateY(-4px); border-color: rgba(205, 20, 43, 0.35); box-shadow: 0 14px 30px -12px rgba(24, 20, 16, 0.3); }
.assoc-item a { display: flex; align-items: center; justify-content: center; width: 100%; }
.assoc-item img { height: 78px; width: 100%; object-fit: contain; display: block; transition: transform 0.28s ease; }
.assoc-item:hover img { transform: scale(1.04); }
.assoc-item span { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: #4a4436; text-align: center; }
body[data-motion="off"] .assoc-item { opacity: 1; transform: none; transition: none; }
@media (max-width: 760px) { .assoc-row { grid-template-columns: 1fr; max-width: 420px; } }
/* .sec-title carries max-width: 22em, so a centered short heading was only
   centering inside a left-hugging box. Full width first, then center. */
.assoc-title { text-align: center; max-width: none; }
.band-title .accent-red { color: var(--red); }
/* Logo-style hero title (Dylan 9/1, trial): WOODS white and EXCAVATING gold,
   both on the truck-lettering red drop shadow. Offset is in em so it tracks
   the clamped title size. Colors are the logo file's own values, hard-coded on
   purpose: the band is always dark, and light mode swaps --gold to a muted
   #b08502 that reads olive. */
/* Wordmark treatment usable on a LIGHT page heading, not just a dark video band.
   The red stroke is what makes white letters survive on cream; the logo does the
   same thing. Without it the white word disappears. */
.wordmark-woods, .wordmark-exc {
  -webkit-text-stroke: 1.5px #cd142b;
  paint-order: stroke fill;
  text-shadow: -0.005em 0.0055em 0 #cd142b, -0.010em 0.0110em 0 #cd142b, -0.015em 0.0165em 0 #cd142b, -0.020em 0.0220em 0 #cd142b, -0.025em 0.0275em 0 #cd142b, -0.030em 0.0330em 0 #cd142b, -0.035em 0.0385em 0 #cd142b, -0.040em 0.0440em 0 #cd142b, -0.045em 0.0495em 0 #cd142b, -0.050em 0.0550em 0 #cd142b, -0.055em 0.0605em 0 #cd142b, -0.060em 0.0660em 0 #cd142b;  /* continuous down-left extrusion, fine-stepped (Dylan 9/3) */
}
.wordmark-woods { color: #ffffff; }
/* The word-reveal mask (.k-word, overflow hidden) wraps the glyphs inside the wordmark
   span and clips the red shadow (Nate, 9/1, on a phone). Give the mask room for the
   shadow and pull the layout back with matching negative margins. */
.wordmark-woods .k-word, .wordmark-exc .k-word { padding: 0 0.12em 0.12em 0; margin: 0 -0.12em -0.12em 0; }
.wordmark-exc { color: #f4da1a; }

.band-title .brand-woods,
.band-title .brand-exc {
  /* stepped so the red reads as a solid extrusion like the truck lettering,
     not a detached offset copy with gaps on the diagonals */
  /* 9/3 Dylan: one solid shadow, not stepped layers */
  text-shadow: -0.005em 0.0055em 0 #cd142b, -0.010em 0.0110em 0 #cd142b, -0.015em 0.0165em 0 #cd142b, -0.020em 0.0220em 0 #cd142b, -0.025em 0.0275em 0 #cd142b, -0.030em 0.0330em 0 #cd142b, -0.035em 0.0385em 0 #cd142b, -0.040em 0.0440em 0 #cd142b, -0.045em 0.0495em 0 #cd142b, -0.050em 0.0550em 0 #cd142b, -0.055em 0.0605em 0 #cd142b, -0.060em 0.0660em 0 #cd142b, 0 3px 24px rgba(0, 0, 0, 0.5);  /* continuous down-left extrusion, fine-stepped (Dylan 9/3) */
}
.band-title .brand-woods { color: #ffffff; }
.band-title .brand-exc { color: #f4da1a; }
.map-tip img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 4px; margin: 8px 0 8px; }
.map-tip .tip-cat { color: #a99d87; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.map-tip .tip-go { color: #fcc724; font-size: 12px; font-weight: 700; margin-top: 6px; }
.map-tip { max-width: 250px; }
.map-tip img { max-height: 130px; }
/* compact project card on the map (Dylan 8/18: keep them small) */
.map-tip.proj { max-width: 176px; min-width: 0; padding: 8px 10px 9px; }
.map-tip.proj strong { font-size: 13.5px; line-height: 1.15; letter-spacing: 0.02em; }
.map-tip.proj .tip-cat { font-size: 9.5px; letter-spacing: 0.08em; }
.map-tip.proj img { aspect-ratio: 2 / 1; max-height: 78px; margin: 6px 0 6px; border-radius: 3px; }
.map-tip.proj .tip-row { font-size: 11.5px; }
.map-tip.proj .tip-go { font-size: 10.5px; margin-top: 3px; }

.cap-map-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1100px) { .cap-map-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cap-map-6 { grid-template-columns: 1fr; } }
/* the footprint runs Eliot to Lewiston, so the map is tall; keep the homepage copy in check */

/* Careers "What working at Woods looks like" (9/2, Dylan): four separate cards in
   the site's card language (was a joined how-grid that orphaned the fourth block). */
.expect-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.expect-grid .svc-card h3 { font-size: 22px; min-height: 0; margin-top: 16px; }
.expect-grid .svc-card .stripe-mark { margin: 0; }
@media (max-width: 1100px) { .expect-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .expect-grid { grid-template-columns: 1fr; } }

/* Careers apply: the four "what working at Woods looks like" points ride beside the
   application form (9/2, Dylan), the contact-page pattern. */
.apply-intro.has-stack { position: static; }
.expect-stack { display: grid; gap: 12px; margin-top: 30px; }
.expect-kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.expect-item { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 18px 20px 17px;
  box-shadow: inset 0 1px 0 rgba(242, 237, 225, 0.07), 0 1px 2px rgba(0, 0, 0, 0.45), 0 12px 28px -10px rgba(0, 0, 0, 0.4); }
html[data-theme="light"] .expect-item { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 1px 2px rgba(33, 27, 19, 0.07), 0 10px 24px -10px rgba(33, 27, 19, 0.14); }
.expect-item .stripe-mark { margin: 0 0 10px; }
.expect-item h4 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 19px; line-height: 1.1; color: var(--cream); margin-bottom: 6px; }
.expect-item p { color: var(--muted); font-size: 14.5px; line-height: 1.55; }

/* Careers (9/2, Dylan: page felt bland): the team video sits on the site's ink
   ground with two real voices from the film beneath it. Colors are fixed, not
   theme tokens, so the band reads the same in light and dark mode. */
.ink-band { background: #131009; color: #f2ede1; }
.ink-band .sec-title { color: #f2ede1; }
.ink-band .sec-side { color: #a99d87; }
.ink-band .video-frame { border-color: #322b1f; }
.voices-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 40px; }
.voice { margin: 0; display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 22px; align-items: center;
  padding: 22px; border: 1px solid #322b1f; border-radius: 8px; background: #1b1710;
  box-shadow: inset 0 1px 0 rgba(242, 237, 225, 0.07), 0 1px 2px rgba(0, 0, 0, 0.45), 0 12px 28px -10px rgba(0, 0, 0, 0.4); }
.voice img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; display: block; }
.voice .quote-mark { font-size: 54px; margin-bottom: 14px; }
.voice blockquote { font-family: var(--font-body); font-size: 16.5px; line-height: 1.55; color: #f2ede1; margin: 0; }
.voice cite { display: block; margin-top: 14px; font-style: normal; font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #fcc724; }
@media (max-width: 1000px) { .voices-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .voice { grid-template-columns: 1fr; } }

/* Careers brand pass (9/2, Dylan: strongly branded, still tasteful). One truck
   stripe across the top of the ink band, same stripe the footer wears. */
.ink-band { position: relative; }
.ink-band::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9px; pointer-events: none; z-index: 3;
  background: linear-gradient(to bottom, #cd142b 0, #cd142b 3px, #fcc724 3px, #fcc724 6px, #ffffff 6px, #ffffff 9px); }
body[data-pinstripes="off"] .ink-band::before { display: none; }
.ink-band .sec-eyebrow { color: #fcc724; }
.bene-card .stripe-mark { margin-bottom: 14px; }

/* Contact directory: a photo inside a department card (Fleet maintenance: Rob and
   Will with the new service truck; Chris asked to keep it somewhere visible, 9/2). */
.dept-photo { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 40%; border-radius: 6px; margin: 2px 0 14px; border: 1px solid var(--line); }

/* About "Working with Woods" (9/2, Dylan): three separate cards in the site's card
   language, replacing the last joined how-grid on a public page. */
.pillars-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pillars-grid .svc-card h3 { font-size: 22px; min-height: 0; margin-top: 16px; }
.pillars-grid .svc-card .stripe-mark { margin: 0; }
@media (max-width: 900px) { .pillars-grid { grid-template-columns: 1fr; } }

/* Static cards don't pretend to be links (9/2, Dylan): no hover lift, glow, or
   border change on cards that go nowhere. Linked cards (homepage) keep theirs. */
.pillars-grid .svc-card, .expect-grid .svc-card, .bene-card, .benefit-card { cursor: default; }
.pillars-grid .svc-card:hover, .expect-grid .svc-card:hover, .bene-card:hover, .benefit-card:hover {
  transform: none; border-color: var(--line);
  box-shadow: inset 0 1px 0 rgba(242, 237, 225, 0.07), 0 1px 2px rgba(0, 0, 0, 0.45), 0 12px 28px -10px rgba(0, 0, 0, 0.4);
}
html[data-theme="light"] .pillars-grid .svc-card:hover, html[data-theme="light"] .expect-grid .svc-card:hover,
html[data-theme="light"] .bene-card:hover, html[data-theme="light"] .benefit-card:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 1px 2px rgba(33, 27, 19, 0.07), 0 10px 24px -10px rgba(33, 27, 19, 0.14);
}
.pillars-grid .svc-card:hover::before, .expect-grid .svc-card:hover::before { opacity: 0; }

/* What We Do directory (9/2): list format stays (Dylan tried photo cards and
   preferred the list); family headers carry the two-tone red accent. */
.dir-band .dir-h2 { font-size: clamp(28px, 3.2vw, 40px); }
.dir-band .dir-h2 .line { display: block; }
.dir-band .dir-h2 .line.red { color: var(--red); }
.dir-band .dir-family + .dir-family { margin-top: 64px; }

/* 9/3 pits map: dotted halo on each pit, delivery-band rings, key pinned bottom-right, listing preview card */
.mm-pit-ring { fill: none; stroke: var(--red); stroke-width: 2.2; stroke-dasharray: 3 4; stroke-linecap: round; }
.mm-site:hover .mm-pit-ring, .mm-site.is-open .mm-pit-ring { stroke: var(--gold); }
.mm-radii { opacity: 0; transition: opacity 0.25s ease; pointer-events: none; }
.mm-radii.show { opacity: 1; }
.mm-radius-under { fill: none; stroke: #211b13; stroke-opacity: 0.55; stroke-width: 4.5; stroke-dasharray: 8 6; }
.mm-radius { fill: none; stroke: #fcc724; stroke-width: 2; stroke-dasharray: 8 6; }
.mm-r15 { stroke-opacity: 0.8; }
.mm-radlbl { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; fill: #fcc724; paint-order: stroke; stroke: var(--bg-2); stroke-width: 3px; stroke-linejoin: round; }
.map-key { position: absolute; right: 14px; bottom: 14px; z-index: 5; display: grid; gap: 7px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--panel) 92%, transparent); font-size: 12px; color: var(--cream); }
.map-key-row { display: flex; align-items: center; gap: 9px; }
.map-key-row svg { flex: 0 0 auto; overflow: visible; }
.map-key-note { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.pit-pop { position: absolute; z-index: 8; width: 300px; max-width: calc(100% - 28px); border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: 0 18px 44px rgba(0,0,0,0.45); overflow: hidden; }
.pit-pop-map { aspect-ratio: 16 / 9; background: var(--bg-2); }
.pit-pop-map iframe { display: block; width: 100%; height: 100%; border: 0; }
.pit-pop-body { padding: 12px 14px 14px; }
.pit-pop-kicker { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.pit-pop-body h4 { margin: 2px 0 4px; font-size: 17px; line-height: 1.15; color: var(--cream); }
.pit-pop-body p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.pit-pop-ctas { display: flex; gap: 8px; margin-top: 11px; }
.pit-pop-ctas .btn { flex: 1 1 0; padding: 9px 10px; font-size: 12px; text-align: center; }
.pit-pop-x { position: absolute; top: 8px; right: 8px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--cream); font: 700 16px/1 var(--font-body, inherit); cursor: pointer; }
.pit-pop-x:hover { border-color: #fcc724; }
@media (max-width: 700px) {
  .map-key { right: 10px; bottom: 10px; padding: 9px 11px; gap: 5px; font-size: 11px; }
  .map-key-note { display: none; }
  .pit-pop { left: 10px !important; right: 10px; top: auto !important; bottom: 10px; width: auto; max-width: none; }
  .pit-pop-map { aspect-ratio: 21 / 9; }
}

/* 9/3 video library on the ink band (Dylan: a different background). Explicit colors so the light theme cannot invert them. */
.ink-band .vtheater .vl-title, .ink-band .vt-t { color: #f2ede1; }
.ink-band .vtheater .vl-meta, .ink-band .vt-m, .ink-band .vt-desc { color: #a99d87; }
.ink-band .vt-stage { border-color: #322b1f; background: #1b1710; box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.8); }
.ink-band .vt-thumb { border-color: #322b1f; background: #1b1710; }
.ink-band .vt-item:hover .vt-thumb { border-color: rgba(252, 199, 36, 0.5); }
.ink-band .vt-item.on .vt-thumb { border-color: #fcc724; }
.ink-band .vt-now { background: #fcc724; }
.ink-band .vt-item:focus-visible { outline: 2px solid #fcc724; outline-offset: 3px; border-radius: 8px; }


/* 9/3 readiness audit: keyboard focus on map towns (WCAG 2.4.7), pause controls
   for the category carousels and the testimonial rotator (2.2.2), and the
   theater loop's pause button. */
.mm-town:focus-visible .mm-hit { stroke: #fcc724; stroke-width: 3; fill: rgba(252, 199, 36, 0.18); }
.mm-town:focus-visible .mm-dot { stroke: #fcc724; stroke-width: 3; }
.wwd-pause, .vo-pause {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border: 1px solid rgba(242, 237, 225, 0.35); border-radius: 5px;
  background: rgba(19, 16, 9, 0.72); color: #f2ede1; font-family: var(--font-body);
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
}
.wwd-pause { right: 12px; top: 12px; }
.wwd-pause:hover, .vo-pause:hover { background: rgba(19, 16, 9, 0.9); border-color: #fcc724; }
.wwd-pause:focus-visible, .vo-pause:focus-visible { outline: 2px solid #fcc724; outline-offset: 2px; }
.vo-pause { position: static; margin-left: 10px; vertical-align: middle; }
.vt-stage .video-toggle { position: absolute; left: 12px; right: auto; bottom: 12px; z-index: 3; } /* right:auto: the phone rule sets right:16px, which with left:12px stretched the button across the video (Dylan 9/3) */

/* 9/3 audit: footer group headings are h2 for heading order; styled as the h5 they were */
.footer-col .ft-h5 { font-size: 11.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 16px; }
.footer-links .ft-h5 { grid-column: 1 / -1; }
.footer-col .ft-h5 { color: #fcc724; }
.footer-col .ft-h5 { color: #fcc724; }
.footer .ft-h5, .footer-links .ft-h5 { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; margin: 0 0 12px; }