/*
Design tokens and component styles ported from DAElectric_WebsiteDesign.html.
Enqueued after style.css in functions.php.
*/

/* Self-hosted (previously loaded from fonts.googleapis.com) — removes a
   third-party connection on every page load, which was the actual cause of
   the visible font swap/flicker on first paint, and drops one external
   request entirely. Only the "latin" Unicode subset is included (covers
   everything this site's English content actually uses, incl. smart quotes
   and em dashes) rather than the vietnamese/latin-ext subsets Google's own
   stylesheet also serves. */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/barlow-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/barlow-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/barlow-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/barlow-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/barlow-condensed-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/barlow-condensed-700.woff2') format('woff2');
}

:root {
  --color-black:          #0D0D0D;
  --color-dark:           #1E1E1E;
  --color-dark-mid:       #2C2C2C;
  --color-mid:            #5A5A5A;
  --color-light-grey:     #F2F2F2;
  --color-border:         #DEDEDE;
  --color-white:          #FFFFFF;
  --color-text-primary:   #0D0D0D;
  --color-text-secondary: #5A5A5A;
  --color-text-light:     #F0F0F0;
  --color-text-muted:     #888888;

  --font-display: 'Barlow Condensed', sans-serif;
  --font-body:    'Barlow', sans-serif;

  --text-hero:   clamp(40px, 5vw, 78px);
  --text-h2:     clamp(32px, 4vw, 52px);
  --text-h3:     24px;
  --text-body:   17px;
  --text-small:  14px;
  --text-label:  11px;

  /* Content stops growing past this width on very wide screens (matches the
     1440px desktop canvas the design was authored against); the gutter below
     absorbs the extra space instead, so backgrounds stay full-bleed while
     the content itself doesn't stretch edge-to-edge on 1920px+ displays. */
  --content-max: 1440px;
  --gutter: 60px;

  /* The one correct edge-inset formula: gutter PLUS however much space is
     left over once content hits --content-max. .container gets this same
     result via max-width+margin:auto+padding, but anything that can't use
     a wrapper div (hero text, the service-area row, the CTA banner) must
     use this exact variable — not a hand-rolled max()/calc() — or it drifts
     out of alignment with everything else past ~1560px viewport width. */
  --edge-inset: calc(var(--gutter) + max(0px, (100% - var(--content-max)) / 2));
}

@media (max-width: 900px) {
  :root { --gutter: 20px; }
}

/* Reset / base */
*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: var(--font-body);
  color: var(--color-text-primary);
  overflow-x: hidden;
  background: var(--color-white);
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
/* Underscores' base style.css sets a:visited to a purple (#800080). Every
   link on this site is meant to read as its surrounding text, never a
   distinct "link colour" — this restores that for any plain link (blog post
   body copy, blog card titles, etc.) that isn't one of the button variants
   below, which already handle their own :visited explicitly. */
a:visited { color: inherit; }
a:hover, a:focus, a:active { color: inherit; } /* same fix, same reason — Underscores' a:hover is navy blue (#191970) */

/* Layout helpers */
/* Full-bleed background on the outer section, gutter via a nested
   .container — never bespoke padding math per section. */
.container {
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
/* Narrower reading column for long-form pages. Pair with .container:
   class="container container--article". */
.container--article { max-width: 900px; }
.section       { padding-top: 80px; padding-bottom: 80px; }
.section-sm    { padding-top: 64px; padding-bottom: 64px; }
.bg-white      { background: var(--color-white); }
.bg-light-grey { background: var(--color-light-grey); }
.bg-dark       { background: var(--color-dark); }
.bg-black      { background: var(--color-black); }

.h2 {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 700;
  color: var(--color-text-primary);
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}
.h2--light { color: var(--color-white); }
.h2--center { text-align: center; }
.h3 {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0;
}
.h3--light { color: var(--color-text-light); }
.intro {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: 1.65;
  max-width: 620px;
  margin: 0 0 40px;
}
.text-small {
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0;
}
/* Same as .intro, without its own max-width/margin — for pages where the
   reading width is already set by .container--article. */
.text-body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin: 0 0 24px;
}
.text-muted {
  font-family: var(--font-body);
  font-size: var(--text-label);
  color: var(--color-text-muted);
}
.pb-0 { padding-bottom: 0; }
.mb-0 { margin-bottom: 0; }
.mt-lg { margin-top: 40px; }
/* Shared "important text on dark background" treatment (announcement bar,
   footer brand name). */
.text-strong {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 700;
  color: var(--color-text-light);
}
/* Shared "navigation" text style — primary menu and footer column headings. */
.nav-label,
.navbar__menu a,
.footer-col-title {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--color-text-light);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.8;
}
.footer-col-title { margin-bottom: 14px; }
.divider-top { border-top: 1px solid var(--color-border); padding-top: 36px; }

/* Announcement bar */
.announcement-bar {
  background: var(--color-black);
  padding: 7px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Navbar */
.navbar { background: var(--color-dark); height: 80px; border-bottom: 1px solid #2A2A2A; position: relative; z-index: 100; }
.navbar .container { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.navbar__logo img { height: 64px; width: auto; }
/* Higher-specificity selectors here deliberately beat Underscores' base
   .main-navigation { width: 100% } and .main-navigation ul { display: ... }
   rules, which otherwise make the nav claim the leftover flex space and
   left-align the menu against the logo instead of the right edge. */
nav.main-navigation { width: auto; }
.main-navigation ul.navbar__menu { display: flex; align-items: center; gap: 32px; list-style: none; margin: 0; padding: 0; }
/* wp_nav_menu() can't take a custom class per-link, so .navbar__menu a can't
   just carry .nav-label in the markup — it's grouped into the same rule
   below instead, which is the same "same style, stated once" outcome. */
.navbar__menu a.current-menu-item,
.navbar__menu a:hover,
.navbar__menu a:focus { color: var(--color-text-light); opacity: 1; }
.navbar__toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 4px; cursor: pointer; }
.navbar__toggle span { width: 20px; height: 2px; background: var(--color-text-light); border-radius: 1px; }
.navbar__toggle span:nth-child(2) { width: 14px; }

@media (max-width: 900px) {
  .navbar { height: 60px; }
  .navbar__logo img { height: 48px; }
  .main-navigation ul.navbar__menu { display: none; }
  .navbar__toggle { display: flex; }
  .main-navigation.toggled ul.navbar__menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-dark);
    border-top: 1px solid #2A2A2A;
    padding: 8px 20px 20px;
  }
  .main-navigation.toggled ul.navbar__menu li { width: 100%; }
  .main-navigation.toggled ul.navbar__menu a { display: block; padding: 12px 0; }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: none;
  border-radius: 0;
  background: none;
  line-height: 1;
  /* A real <button> (e.g. .js-lightbox) keeps native OS chrome — a default
     corner radius and its own vertical metrics — until appearance is reset.
     Without this, a <button class="btn"> renders shorter and slightly
     rounded compared to an identically-styled <a class="btn">. */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}
/* Exactly two button skins, light-bg vs. dark-bg — nothing else should
   create a third variant. Each restates its own colour on hover/focus/active
   so Underscores' navy a:hover rule can't shift it on interaction. */
.btn-outline, .btn-outline:visited { background: transparent; border: 2px solid var(--color-white); color: var(--color-white); } /* dark backgrounds */
.btn-outline:hover, .btn-outline:focus, .btn-outline:active { background: rgba(255,255,255,0.1); color: var(--color-white); }
.btn-border, .btn-border:visited  { background: transparent; border: 2px solid var(--color-black); color: var(--color-black); } /* light backgrounds */
.btn-border:hover, .btn-border:focus, .btn-border:active { background: var(--color-black); color: var(--color-white); }
.btn-full    { width: 100%; }

/* Hero (shared home/careers) */
.hero { position: relative; overflow: hidden; display: flex; }
.hero--tall  { min-height: 720px; } /* homepage — a big, image-led first impression */
.hero--short { min-height: 480px; } /* secondary pages (Careers, Services, About, Contact) */
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.50) 55%, rgba(0,0,0,0.20) 100%);
}
.hero__content {
  position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding-top: 100px; padding-bottom: 80px;
  padding-left: var(--edge-inset);
  /* Scales with viewport width for the same reason --text-hero does (5vw) —
     a fixed px max-width here means the heading gets BIGGER (via vw) while
     its box stays the same width, so it wraps to MORE lines on wider
     screens instead of fewer. This grows to match. */
  max-width: clamp(600px, 58vw, 1100px);
  z-index: 1;
}
.hero__heading {
  font-family: var(--font-display); font-size: var(--text-hero); font-weight: 700;
  color: var(--color-white); line-height: 1.05; text-transform: uppercase; letter-spacing: -0.01em;
  margin: 0 0 20px;
  align-self: stretch;
}
.hero__subheading {
  font-family: var(--font-body); font-size: var(--text-body); color: rgba(240,240,240,0.88); line-height: 1.65; margin: 0 0 32px;
  align-self: stretch;
  max-width: 620px; /* matches .intro's line-length cap — same size/line-height as .intro, just a different colour for the dark hero background */
}

@media (max-width: 900px) {
  .hero { min-height: 460px; }
  .hero__content { padding: 72px 24px 56px; align-items: center; text-align: center; max-width: 100%; }
}

/* Service sectors / cards grid */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sector-card {
  background: var(--color-white); border: 1px solid var(--color-border);
  padding: 28px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
}
.sector-card img { width: 48px; height: 48px; object-fit: contain; }


@media (max-width: 900px) {
  .card-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sector-card { padding: 20px 14px; }
}

/* Featured projects */
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.project-card { background: var(--color-white); border: 1px solid var(--color-border); overflow: hidden; display: flex; flex-direction: column; }
.project-card__photo { height: 220px; overflow: hidden; flex-shrink: 0; }
.project-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.project-card__body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.project-card__sector {
  align-self: flex-start; background: var(--color-black); color: var(--color-white);
  font-size: var(--text-label); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 3px 8px; margin-bottom: 12px;
}
.project-card__title { margin: 0 0 6px; }
.project-card__dates { font-weight: 500; margin-bottom: 12px; }
.project-card__desc { line-height: 1.65; flex: 1; margin-bottom: 20px; }

@media (max-width: 900px) {
  .project-grid { grid-template-columns: 1fr; }
}

/* Trust stats */
.trust { position: relative; overflow: hidden; }
.trust__ghost {
  position: absolute; bottom: -20px; right: 20px;
  font-family: var(--font-display); font-size: 200px; font-weight: 700; color: #fff; opacity: 0.03;
  line-height: 1; letter-spacing: -0.04em; text-transform: uppercase; white-space: nowrap; pointer-events: none;
}
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; position: relative; z-index: 1; }
.trust-card {
  background: var(--color-dark-mid); border-top: 2px solid rgba(255,255,255,0.18);
  padding: 32px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.trust-card img { width: 52px; height: 52px; object-fit: contain; }
.trust-card p { font-family: var(--font-body); font-size: var(--text-small); color: rgba(240,240,240,0.62); line-height: 1.65; margin: 0; }

@media (max-width: 900px) {
  .trust__ghost { font-size: 120px; right: -10px; }
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .trust-card { padding: 20px 14px; }
}

/* Reviews */
.reviews-embed {
  background: var(--color-white); border: 1px solid var(--color-border);
  min-height: 220px; display: flex; align-items: center; justify-content: center; padding: 24px;
}
.reviews-embed__placeholder {
  font-family: var(--font-body); font-size: var(--text-label); font-weight: 600; color: var(--color-text-muted);
  letter-spacing: 0.1em; text-transform: uppercase; text-align: center;
}
.review-card {
  background: var(--color-white); border: 1px solid var(--color-border);
  padding: 24px; display: flex; flex-direction: column; gap: 12px;
}
.review-card__stars { color: var(--color-black); letter-spacing: 0.05em; }
.review-card__text { flex: 1; }
.review-card__author { display: flex; align-items: center; gap: 10px; }
.review-card__avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.review-card__name { font-weight: 700; color: var(--color-text-primary); }

/* Review carousel — card widths are measured in JS from the actual
   rendered container, not derived here, since a gap-aware percentage
   formula for "N cards, V visible" gets fragile fast. */
.review-carousel { position: relative; }
/* The clipping element is separate from .review-carousel itself, and has
   no side padding/inset of its own — cards fill exactly the same width as
   every other .container-based grid on the site. The prev/next buttons sit
   outside THIS box, in the page gutter, so they never eat into card width. */
.review-carousel__viewport { overflow: hidden; }
.review-carousel__track { display: flex; gap: 12px; transition: transform 0.35s ease; }
.review-carousel__track .review-card { flex-shrink: 0; }
.review-carousel__prev, .review-carousel__next {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%; padding: 0;
  background: var(--color-white); border: 1px solid var(--color-border);
  color: var(--color-black); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.review-carousel__prev:disabled, .review-carousel__next:disabled { opacity: 0.35; cursor: default; }
.review-carousel__prev { left: -52px; }
.review-carousel__next { right: -52px; }

@media (max-width: 900px) {
  /* Gutter shrinks to 20px here — not enough room to sit fully outside the
     content edge, so the buttons float half-overlapping the first/last
     card instead (a shadow makes the overlap read as intentional). */
  .review-carousel__prev, .review-carousel__next { width: 36px; height: 36px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }
  .review-carousel__prev { left: -8px; }
  .review-carousel__next { right: -8px; }
}

/* Photo strip */
.photo-strip { display: flex; height: 260px; overflow: hidden; }
.photo-strip > div { flex: 1; overflow: hidden; }
.photo-strip img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .photo-strip { height: 160px; } }

/* Service area */
.service-area {
  display: flex; min-height: 480px; overflow: hidden;
  padding-left: var(--edge-inset);
  padding-right: var(--edge-inset);
}
.service-area__text { flex: 0 0 45%; padding: 80px 60px 80px 0; display: flex; flex-direction: column; justify-content: center; }
.service-area__text p { font-family: var(--font-body); font-size: var(--text-body); color: var(--color-text-secondary); line-height: 1.7; margin: 0 0 36px; }
.service-area__contact { border-top: 1px solid var(--color-border); padding-top: 24px; }
.service-area__contact div { font-family: var(--font-body); font-size: var(--text-body); color: var(--color-text-secondary); line-height: 1.7; }
.service-area__map { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.service-area__map img { width: 100%; height: 100%; object-fit: contain; padding: 40px; }

@media (max-width: 900px) {
  .service-area { flex-direction: column; min-height: auto; }
  .service-area__text { padding: 48px 20px 40px; }
  .service-area__map { min-height: 260px; }
}

/* CTA banner */
/* --cta-bg-image is the only thing set inline per-instance (a dynamic,
   ACF-driven photo URL); the gradient recipe and everything else about how
   it's presented lives here, not duplicated in the template each time. */
.cta-banner {
  background-color: var(--color-black);
  background-image: linear-gradient(rgba(0,0,0,0.78), rgba(0,0,0,0.78)), var(--cta-bg-image, none);
  background-size: cover; background-position: center top;
  padding-top: 80px; padding-bottom: 80px;
  padding-left: var(--edge-inset);
  padding-right: var(--edge-inset);
  position: relative; overflow: hidden; display: flex; justify-content: flex-end;
}
.cta-banner__content { position: relative; z-index: 1; max-width: 540px; text-align: right; }
.cta-banner__heading { font-family: var(--font-display); font-size: var(--text-hero); font-weight: 700; color: var(--color-white); text-transform: uppercase; line-height: 1.05; letter-spacing: -0.01em; margin: 0 0 16px; }
.cta-banner__text { font-family: var(--font-body); font-size: var(--text-body); color: rgba(240,240,240,0.72); line-height: 1.6; margin: 0 0 36px; }
.cta-banner--center { text-align: center; justify-content: center; }
.cta-banner--center .cta-banner__content { text-align: center; max-width: 680px; }

@media (max-width: 900px) {
  .cta-banner { padding: 56px 24px; justify-content: center; }
  .cta-banner__content { text-align: center; max-width: 100%; }
}

/* Careers: why work here */
.why-work { display: flex; align-items: stretch; }
.why-work__photo { flex: 0 0 44%; min-height: 480px; overflow: hidden; }
.why-work__photo img { width: 100%; height: 100%; object-fit: cover; }
.why-work__content {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding-top: 48px; padding-bottom: 64px; padding-left: 60px;
  padding-right: var(--edge-inset);
}
.why-work__intro { font-family: var(--font-body); font-size: var(--text-body); color: var(--color-text-secondary); line-height: 1.7; margin: 0 0 36px; }
.why-work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.why-work-item__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.why-work-item__head img { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; }
.why-work-item p { line-height: 1.65; }

@media (max-width: 900px) {
  .why-work { flex-direction: column; }
  .why-work__photo { min-height: 260px; }
  .why-work__content { padding: 36px 20px 48px; }
  .why-work-grid { gap: 24px; }
}

/* Careers: what to expect */
.expect-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #2C2C2C; }
.expect-card { position: relative; padding: 44px 40px 52px; border-left: 1px solid #2C2C2C; }
.expect-card:first-child { border-left: none; }
.expect-card img { width: 64px; height: 64px; object-fit: contain; margin-bottom: 24px; }
.expect-card p { font-family: var(--font-body); font-size: var(--text-small); color: rgba(240,240,240,0.62); line-height: 1.75; margin: 0; }

@media (max-width: 900px) {
  .expect-grid { grid-template-columns: 1fr; }
  .expect-card { padding: 36px 20px 44px; border-left: none; border-top: 1px solid #2C2C2C; }
  .expect-card:first-child { border-top: none; }
}

/* Current openings */
.openings-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 36px; }
.opening-card { background: var(--color-white); border: 1px solid var(--color-border); padding: 24px 20px; display: flex; flex-direction: column; gap: 12px; }
.opening-card p { flex: 1; }
.openings-empty { font-family: var(--font-body); font-size: var(--text-body); color: var(--color-text-secondary); line-height: 1.7; max-width: 640px; margin-bottom: 36px; }

@media (max-width: 900px) {
  .openings-grid { grid-template-columns: 1fr; }
}

/* Positions list */
/* .bullet-item is the reusable dot+text row; .roles-list (compact 2-col
   tags) and .bullet-list (single-column, full sentences) are just different
   containers around the same row. */
.bullet-item { display: flex; align-items: center; gap: 10px; }
.bullet-item .dot { width: 5px; height: 5px; background: var(--color-black); flex-shrink: 0; }
.bullet-item span:last-child { font-family: var(--font-body); font-size: var(--text-body); color: var(--color-text-primary); }

.roles-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 32px; max-width: 560px; }
.bullet-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; }
/* Vertical stack of heading+paragraph blocks (services list, etc.) — same
   spacing .why-work-grid uses between its items, just single-column. */
.stack { display: flex; flex-direction: column; gap: 28px; margin-bottom: 40px; }

@media (max-width: 900px) { .roles-list { grid-template-columns: 1fr; } }

/* Footer */
.site-footer { background: var(--color-dark); padding-top: 56px; padding-bottom: 28px; }
/* Grid, not flex-wrap — a fixed column count equal to however many logos
   are actually filled (--assoc-count, set inline in footer.php) means the
   row always spans the full container width edge to edge, rather than
   flex-wrap's default of clustering everything centered with leftover
   space on both sides. */
.footer-assoc {
  display: grid;
  grid-template-columns: repeat(var(--assoc-count, 9), 1fr);
  align-items: center;
  gap: 24px;
  margin-bottom: 36px;
  padding-bottom: 56px;
  border-bottom: 1px solid #2C2C2C;
}
.footer-assoc img { height: 72px; max-width: 100%; width: auto; object-fit: contain; }
.footer-assoc > div { height: 90px; display: flex; align-items: center; justify-content: center; }
.footer-cols { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 32px; gap: 32px; }
.footer-col--brand { min-width: 200px; }
.footer-col--brand img { height: 100px; width: 100px; object-fit: contain; margin-bottom: 20px; }
.footer-col--brand div { font-family: var(--font-body); font-size: var(--text-small); color: #666; line-height: 1.5; }
.footer-col a, .footer-col span { display: block; font-family: var(--font-body); font-size: var(--text-small); color: #666; margin-bottom: 8px; line-height: 1.5; }
/* Same specificity as the rule above (one class + one element each), so
   source order decides — this must stay AFTER it to actually win. The brand
   column's links (phone/email) sit inline within a text line
   ("Phone: 403-328-4849"), not stacked like the nav-style columns below, so
   they're excluded from that block+stacked-spacing treatment. */
.footer-col--brand a { display: inline; margin-bottom: 0; }
.footer-bottom { border-top: 1px solid #2C2C2C; padding-top: 16px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.footer-bottom span, .footer-bottom a { font-family: var(--font-body); font-size: var(--text-label); color: #444; }

@media (max-width: 900px) {
  .site-footer { padding: 44px 20px 24px; }
  /* A 9-wide (or however many) grid is illegible at this width regardless
     of how many logos are actually active — fall back to a fixed, small
     column count instead of the dynamic --assoc-count. */
  .footer-assoc { grid-template-columns: repeat(3, 1fr); gap: 20px; padding-bottom: 44px; }
  .footer-assoc img { height: 56px; }
  .footer-assoc > div { height: 70px; }
  .footer-cols { flex-direction: column; align-items: flex-start; gap: 32px; }
}

/* Blog index + single post (baseline, not a bespoke comp) */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.blog-card { background: var(--color-white); border: 1px solid var(--color-border); overflow: hidden; display: flex; flex-direction: column; }
.blog-card__photo { display: block; height: 200px; overflow: hidden; }
.blog-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.blog-card__body { padding: 20px; }
.blog-card__body h2 { margin: 0 0 6px; }
.blog-card__meta { font-family: var(--font-body); font-size: var(--text-label); color: var(--color-text-muted); margin-bottom: 10px; }


/* max-width alone leaves zero side padding below 760px viewports — every
   other long-form/container element on the site gets its gutter from
   .container; this one rolls its own max-width so it needs the same
   gutter added explicitly. */
.single-post { max-width: 760px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.single-post .entry-title { font-family: var(--font-display); font-size: var(--text-h2); text-transform: uppercase; color: var(--color-text-primary); margin: 0 0 12px; }
.single-post .entry-meta { font-family: var(--font-body); font-size: var(--text-small); color: var(--color-text-muted); margin-bottom: 24px; }
.single-post .entry-content { font-family: var(--font-body); font-size: var(--text-body); color: var(--color-text-secondary); line-height: 1.75; }
.single-post .entry-content p { margin: 0 0 20px; }

@media (max-width: 900px) {
  .blog-grid { grid-template-columns: 1fr; }
}

/* Project gallery lightbox */
.lightbox {
  display: none;
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(13,13,13,0.94);
  align-items: center; justify-content: center;
}
.lightbox.is-open { display: flex; }
.lightbox__img { max-width: 84vw; max-height: 82vh; object-fit: contain; }
.lightbox__close,
.lightbox__prev,
.lightbox__next {
  position: absolute;
  background: none; border: none; color: var(--color-white);
  font-size: 40px; line-height: 1; cursor: pointer; padding: 12px;
}
.lightbox__close { top: 16px; right: 24px; font-size: 32px; }
.lightbox__prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__counter {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-body); font-size: var(--text-small); color: rgba(240,240,240,0.72);
}

@media (max-width: 900px) {
  .lightbox__close, .lightbox__prev, .lightbox__next { font-size: 28px; padding: 8px; }
}