/* DigLTBlue About Us template — the "About Us" canvas (Figma 320:487), in
   artboard order: 1 Hero · 2 Our Story · 3 Key facts · 4 Leadership ·
   5 Built to Deliver · 6 Unions & Certifications. The careers band, the
   closing CTA, the chrome and the footer are the shared partials and need
   nothing here.

   Most of this file is MODIFIERS on home.css components (the hero, the intro
   split, the credential strip) at the same specificity as the rules they
   override, which is why inc/enqueue.php loads it after lt-home. Where an
   override is load-bearing the selector is doubled so it wins regardless.
   The two new components — the officer cards and the capability cards — and
   the logo plates are the only rules that are not modifiers.

   Desktop values are the 1440 artboard's literals; the <1024px block is the
   tablet step and the <640px block at the end is the 400 artboard. Every
   colour, size and tracking is a tokens.css token — nothing new. */

/* ══ 1 Hero ═══════════════════════════════════════════════════════════ */
/* The home hero is built for the chrome overlaid on it: 820px tall, 248px of
   top padding to clear the bar. On the About page the chrome is IN the flow
   (lt_page_has_hero() is false), so the band is the drawn 440px with the copy
   64px off its bottom edge and no clearance to reserve. */
.lt-hero.lt-hero--band {
  min-height: 440px;
  padding: 64px 0;
}

.lt-hero--band .lt-hero__body {
  gap: 16px;
}

/* A solid navy band unless an editor sets the optional hero photo (client,
   2026-09-25: by default no photo, since the plaque moved to the story
   section). The scrim layer is kept as the band so the hero's stacking is
   unchanged; with a photo (.lt-hero--photo) it falls back to home.css's
   --hero-scrim tint, as the capability photo heroes do. */
.lt-hero--band:not(.lt-hero--photo) .lt-hero__scrim {
  background: var(--color-navy);
}

/* 60px, not the 88px home scale — the holding template makes the same call
   for the same reason: this headline introduces, it does not sell. */
.lt-hero--band .lt-hero__title {
  font-size: 60px;
  line-height: var(--lh-hero);
}

/* The page's kicker — the hero's "ABOUT US" and the Leadership band's
   "OFFICERS" are the same 13px / .18em orange line. The home hero's eyebrow
   is 18px; the holding template's kicker is this size, but that sheet does
   not load here. */
.lt-about__kicker {
  color: var(--color-orange);
  font-size: var(--fs-nav);
  letter-spacing: var(--ls-kicker);
}

.lt-hero__standfirst {
  margin: 0;
  max-width: 745px;
  font-size: var(--fs-lead);
  line-height: var(--lh-tight);
  text-wrap: pretty;
}

/* ══ 2 Our Story ══════════════════════════════════════════════════════ */
/* The intro split, butted to the hero above and the strip below (the home
   version floats 24px clear of the strip that overlaps its hero). 52.14% is
   706/1354: the photo starts at x=792 on the artboard, which leaves the
   prose its drawn 642px column once the body's 64px right padding is off. */
.lt-intro.lt-intro--about {
  margin: 0;
  padding-top: 48px;
  padding-bottom: 48px;
}

.lt-intro--about .lt-intro__body {
  width: 52.14%;
}

.lt-intro--about .lt-intro__media {
  min-height: 684px;
}

/* Two photos stacked in the right half (client, 2026-09-25): plaque over
   crew. The wrapper keeps the 684px plate and the reveal; each photo takes
   half, split by a white hairline gap so they read as two pictures. */
.lt-story__photos {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

/* Out of flow, so a tall original cannot size its row: the grid decides the
   box and the photo covers it. */
.lt-story__photo .lt-slot__img {
  position: absolute;
  inset: 0;
}

/* The plaque is a tall portrait whose lower two-thirds is paragraph text; a
   centred crop lands on that. Anchoring near the top keeps the name and the
   tractor relief, which is the picture. */
.lt-story__photo:first-child .lt-slot__img {
  object-position: 50% 12%;
}

/* One full line between the two paragraphs, as drawn — the prose default is
   a tighter 18px. In em so it follows the 14px mobile step by itself. */
.lt-intro--about .lt-prose > * + * {
  margin-top: 1.75em;
}

/* ══ 3 Credential strip ═══════════════════════════════════════════════ */
/* In the flow, not lifted: the home strip pulls itself 60px up over the
   hero and stacks above it; here it sits under the story with nothing to
   overlap. The grid's padding moves into the cells so every one of the four
   is padded alike and the dividers run the full 170px, and the strip carries
   the 96px of white the artboard draws before the wash band under it. */
.lt-credentials.lt-credentials--flush {
  margin-top: 0;
  z-index: auto;
  padding-bottom: var(--pad-y);
}

.lt-credentials--flush .lt-credentials__grid {
  padding: 0;
}

.lt-credentials--flush .lt-credentials__item,
.lt-credentials--flush .lt-credentials__item:first-child,
.lt-credentials--flush .lt-credentials__item:last-child {
  padding: 40px 28px;
}

/* The grid's own border is the first cell's left edge. */
.lt-credentials--flush .lt-credentials__item:first-child {
  border-left: 0;
}

/* ══ 4 Leadership ═════════════════════════════════════════════════════ */
/* Not .lt-leadership — that is the homepage's two-up editorial section. */

/* The "Meet the Team" anchor lands under a bar that nav.js has fixed by the
   time the jump finishes; the margin keeps the kicker clear of it. The bar
   is logo-driven — taller than --header-h at every width on this install —
   so the bound is the one the home hero uses for its own clearance. */
.lt-officers {
  scroll-margin-top: calc(max(var(--header-h), var(--nav-logo-w)) + 40px);
}

/* Three 412px columns with 16px gaps at 1440. The column count is a custom
   property so the lead card below can be exactly one column wide at every
   breakpoint without restating the arithmetic. */
.lt-officers__grid {
  --officer-cols: 3;
  --officer-gap: 16px;
  display: grid;
  grid-template-columns: repeat(var(--officer-cols), minmax(0, 1fr));
  gap: var(--officer-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The President alone on the top row, centred, one card wide (client,
   2026-09-28) — the six officers below then fill two rows of three, or
   three of two on tablets. Spanning the row and narrowing the card, rather
   than placing it in the middle column, keeps auto-placement from pulling
   the next officer up beside it. */
.lt-officer--lead {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc((100% - (var(--officer-cols) - 1) * var(--officer-gap)) / var(--officer-cols));
}

/* The white bordered plate of the home proof panel. 142px is the drawn
   height; a wrapped title grows it. The card is a ROW — copy at the left, the
   square portrait at the right. The frame is always there: with no headshot
   it is the grey square alone, the placeholder the client asked for
   (2026-09-25). The copy keeps the drawn 24px inset on the left; the other
   three sides are 16px, the frame the portrait sits in. */
.lt-officer {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 142px;
  padding: 16px 16px 16px 24px;
  background: var(--color-white);
  border: 1px solid var(--color-line);
}

.lt-officer__text {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: 12px;
}

.lt-officer__name {
  color: var(--color-navy);
}

/* Square and a little larger than the artboard's 84px circle (client,
   2026-09-28): 110px is the drawn 142px card less the 16px frame top and
   bottom, so the photo fills the card's height with an even margin on three
   sides. `flex: none` keeps it square when a long title ("Corporate Safety
   Officer, Engineer") wraps and pushes the copy wider. The grey square is the
   placeholder when there is no photo, and what a transparent or loading one
   sits on. No radius — square corners everywhere in V2. */
.lt-officer__portrait {
  flex: none;
  width: 110px;
  height: 110px;
  overflow: hidden;
  background: var(--color-placeholder);
}

.lt-officer__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Rows of THREE on every desktop width — the client's layout (2026-09-28)
   is the President alone, then Renshaw / Mu / McIntyre, then Rinauro /
   Arteaga / Espinoza, and two-up would regroup them. So the grid keeps three
   columns down to the page's 1024px tablet step and the PORTRAIT gives way
   instead: the longest name ("Derrick Rinauro", 179px at 24px) must stay on
   one line beside it. Measured: 110px fits from 1280, 96px from 1200; below
   that the portrait is 80px and the name steps to 20px (149px). */
@media (max-width: 1279px) {
  .lt-officer {
    gap: 16px;
  }

  .lt-officer__portrait {
    width: 96px;
    height: 96px;
  }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .lt-officer__portrait {
    width: 80px;
    height: 80px;
  }

  .lt-officer .lt-officer__name {
    font-size: var(--fs-title-sm);
  }
}

/* The muted uppercase label under the 40px rule. The canvas draws it at the
   .55 annotation alpha, which fails AA for 14px text; --color-muted-text is
   the same navy at the lightest alpha that passes (tokens.css). */
.lt-officer__title {
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-dropdown);
  color: var(--color-muted-text);
}

/* ══ 5 Built to Deliver ═════════════════════════════════════ */
/* The capability cards that replaced the department roster. The artboard
   draws three 391px cards in a row with 24px gaps; the count is keyed to the
   room rather than to the breakpoints, the same call the department grid it
   replaced used to make — 340px is the narrowest card at which "PRECONSTRUCTION & ESTIMATING"
   stays on one line, which gives three columns from ~1090px, two down to
   ~730, one below. */
.lt-structure__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The same white bordered plate as the officer card, on a 24px inset. 195px
   is the drawn height; the cards in a row equalise on the tallest, so the
   min-height only matters to the last row when it is short. */
.lt-capability {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-height: 195px;
  padding: 24px;
  background: var(--color-white);
  border: 1px solid var(--color-line);
}

/* The card's rule is its own size — 48×3, against the 2px full-width rules
   everywhere else — so it is a modifier here rather than a token. */
.lt-rule--card {
  width: 48px;
  height: 3px;
}

.lt-capability__name {
  color: var(--color-navy);
}

.lt-capability__text {
  margin: 0;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-meta);
  color: var(--color-muted-text);
  text-wrap: pretty;
}

/* ══ 6 Unions & Certifications ════════════════════════════════════════ */
/* Seven plates. Seven divides into nothing, so the rows are flex and
   centred rather than a grid: one row of seven where it fits, then 4 + 3,
   then 2 · 2 · 2 + 1 on phones — the short last row sits in the middle
   instead of hanging off the left edge. --plates-row sets the per-row count;
   each plate's basis is its share of the row after the gaps. */
.lt-plates {
  --plates-row: 7;
  --plates-gap: 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--plates-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 1199px) {
  .lt-plates {
    --plates-row: 4;
  }
}

/* The same white bordered plate as the officer card, contents centred. */
.lt-plate {
  flex: 0 0 calc((100% - (var(--plates-row) - 1) * var(--plates-gap)) / var(--plates-row));
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 174px;
  padding: 24px 16px;
  background: var(--color-white);
  border: 1px solid var(--color-line);
}

/* A fixed box the mark is CONTAINED in. Most marks are near-square seals; a
   cover-crop — .lt-slot__img's default, right for a photo — would clip one.
   The box is wider than tall so the one landscape mark (CGA DPI, ~3.4:1)
   gets 120px of width instead of shrinking to an 88px sliver; the square
   seals are height-bound and still draw at 88. With no mark the box is the
   grey placeholder plate. */
.lt-plate__media {
  width: 100%;
  max-width: 120px;
  height: 88px;
  flex: none;
}

.lt-plate__media .lt-slot__img,
.lt-plate__logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Title case, not a kicker: the labels are proper names. A seventh of the
   content column is ~167px at 1440, and the three-word labels ("Damage
   Prevention Institute", "BBB A+ Accredited Business") have to break inside
   it — balanced so they break evenly rather than leaving one word on the
   last line. */
.lt-plate__label {
  font-size: var(--fs-small);
  font-weight: var(--weight-label);
  letter-spacing: var(--ls-nav);
  color: var(--color-navy);
  text-align: center;
  text-wrap: balance;
}

/* ══ ≤1023px ══════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  /* A narrower band shows a taller slice of a portrait source (at 640 the
     440px window is 44% of the plaque; at 400 it is 58%), so the anchor
     moves down as the viewport narrows — it is the engraved dates ABOVE the
     relief that must stay out of frame; the paragraphs below it fall under
     the deep end of the scrim. */
  /* The split stacks here (home.css): the body goes full width again and
     the photo takes the home tablet height, not the 684px desktop plate.
     Both restated because the desktop modifiers above out-rank home.css's
     own tablet rules. */
  .lt-intro--about .lt-intro__body {
    width: auto;
  }

  .lt-intro--about .lt-intro__media {
    min-height: 360px;
  }

  /* Stacked under the copy the column is full width, so the pair sits side
     by side instead — two 360px-tall halves read better than a 720px tower. */
  .lt-story__photos {
    grid-template-rows: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* home.css makes the strip a 2x2 with a 28px gap and unpadded outer
     cells; the flush strip keeps every cell padded and bordered instead. */
  .lt-credentials--flush .lt-credentials__grid {
    gap: 0;
  }

  .lt-credentials--flush .lt-credentials__item,
  .lt-credentials--flush .lt-credentials__item:nth-child(odd),
  .lt-credentials--flush .lt-credentials__item:nth-child(even) {
    padding: 32px 24px;
    border-left: 0;
  }

  .lt-credentials--flush .lt-credentials__item:nth-child(even) {
    border-left: 1px solid var(--color-line);
  }

  .lt-credentials--flush .lt-credentials__item:nth-child(n + 3) {
    border-top: 1px solid var(--color-line);
  }

  /* Column counts keep coming from the auto-fill above; only the gap
     tightens. */
  .lt-structure__grid {
    gap: 16px;
  }

  /* Tablets: two-up — three ~220px columns cannot hold a name and a photo.
     The cards are ~330px wide at 768: the 110px square left the copy ~150px
     and broke two-word names ("Donna / McIntyre"). 88px — still larger than
     the old circle — gives the name its line back. */
  .lt-officers__grid {
    --officer-cols: 2;
  }

  .lt-officer {
    gap: 16px;
  }

  .lt-officer__portrait {
    width: 88px;
    height: 88px;
  }
}

/* ══ <640px — the 400 artboard ════════════════════════════════════════ */
/* The kicker (12px), lead (14px), meta (12px), display scale and section
   rhythm already step down through tokens.css; only what the artboard draws
   differently is restated here. */
@media (max-width: 639px) {
  .lt-hero.lt-hero--band {
    min-height: 360px;
    padding-bottom: 32px;
  }

  .lt-hero--band .lt-hero__body {
    gap: 12px;
  }

  .lt-hero--band .lt-hero__title {
    font-size: 38px;
  }

  .lt-about__kicker {
    font-size: var(--fs-micro);
  }

  /* The 400 artboard puts the photo ABOVE the button, inset to the gutters,
     where the home stack ends on a full-bleed photo. Lifting the body's
     children into the section (display: contents) lets `order` place the
     photo before the button without a second button in the DOM; the body's
     own padding and gap stop applying, so the section takes them over. */
  .lt-intro.lt-intro--about {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: var(--pad-y) var(--pad-x);
  }

  .lt-intro--about .lt-intro__body {
    display: contents;
  }

  .lt-intro--about .lt-intro__media {
    order: 1;
    min-height: 220px;
  }

  /* Back to a stack at phone width: side by side, each photo would be
     ~180px wide. */
  .lt-story__photos {
    grid-template-columns: none;
    grid-template-rows: 220px 220px;
  }

  .lt-intro--about .lt-intro__cta {
    order: 2;
  }

  /* Full bleed 2x2 with the wash band butted straight under it; the cells
     drop to a 16px inset and the 20px title. */
  .lt-credentials.lt-credentials--flush {
    padding-bottom: 0;
  }

  .lt-credentials--flush .lt-credentials__grid {
    padding: 0;
    border-top: 1px solid var(--color-line);
  }

  .lt-credentials--flush .lt-credentials__item,
  .lt-credentials--flush .lt-credentials__item:nth-child(odd),
  .lt-credentials--flush .lt-credentials__item:nth-child(even),
  .lt-credentials--flush .lt-credentials__item:nth-child(n + 3) {
    padding: 16px;
    border-top: 0;
    border-left: 0;
  }

  /* --fs-display-sm steps to 22 on its own; the strip wants 20. */
  .lt-credentials--flush .lt-credentials__heading {
    font-size: var(--fs-title-sm);
  }

  .lt-officers__grid {
    --officer-cols: 1;
    --officer-gap: 12px;
  }

  /* 111px is the drawn card on the 400 artboard. The 400 canvas draws NO
     portrait — its cards are name/rule/title only — but a headshot is worth
     more on a phone than the saved height. 80px square (was a 64px circle)
     in the same 16px frame makes the card 112. Drop
     `.lt-officer__portrait { display: none }` here for strict parity with
     that artboard. */
  .lt-officer {
    min-height: 111px;
    gap: 16px;
    padding: 16px 16px 16px 20px;
  }

  .lt-officer__portrait {
    width: 80px;
    height: 80px;
  }

  .lt-structure__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* The 400 artboard's cards are 145–167 tall depending on how far the
     sentence wraps; the floor is the short one. */
  .lt-capability {
    min-height: 145px;
  }

  /* --fs-title-sm has no mobile step; the artboard draws 16. */
  .lt-capability .lt-capability__name {
    font-size: var(--fs-title-xs);
  }

  .lt-plates {
    --plates-row: 2;
    --plates-gap: 12px;
  }

  /* 8px sides: the two-word labels ("Operating Engineers") measure ~140px
     at 11px, and a 375 phone's plate is 159 wide — 12px sides broke them in
     two. The three-word labels break regardless. */
  .lt-plate {
    min-height: 136px;
    padding: 20px 8px;
  }

  .lt-plate__media {
    max-width: 96px;
    height: 64px;
  }

  /* --fs-small has no mobile step; the artboard draws 11. */
  .lt-plate__label {
    font-size: var(--fs-micro);
  }
}