/* ESS v2.1 final cascade fixes.
   Loaded after the main brand stylesheet so these verified Team and Residents
   rules cannot be displaced by legacy prototype declarations. */

.team-executive-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: clamp(36px, 5vw, 72px) !important;
  align-items: start !important;
  /* hidden re-clips the corner lattice decoration; profile overlays are
     position:fixed and are not affected by this clip */
  overflow: hidden !important;
}

.team-executive-hero__intro {
  width: min(100%, 980px) !important;
}

.team-leadership-mosaic {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: 100% !important;
  max-width: none !important;
  overflow: visible !important;
}

.team-leader-card {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: clamp(82px, 7vw, 112px) minmax(0, 1fr) !important;
  grid-template-rows: auto 1fr !important;
  gap: 18px 22px !important;
  min-width: 0 !important;
  min-height: 360px !important;
  padding: clamp(28px, 3vw, 44px) !important;
  overflow: visible !important;
}

.team-leader-card:has(.team-profile-details[open]) {
  z-index: 20 !important;
}

.team-leader-card .team-avatar {
  width: clamp(82px, 7vw, 112px) !important;
  height: clamp(82px, 7vw, 112px) !important;
  min-width: 0 !important;
}

.team-leader-card .team-person {
  min-width: 0 !important;
  overflow: visible !important;
}

.team-leader-card h2 {
  max-width: 100% !important;
  margin: 0 0 10px !important;
  font-size: clamp(19px, 1.45vw, 28px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.025em !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

.team-leader-card .team-role {
  font-size: clamp(17px, 1.25vw, 22px) !important;
  line-height: 1.35 !important;
}

.team-profile-details__body {
  position: absolute !important;
  z-index: 40 !important;
  inset: calc(100% - 1px) 0 auto 0 !important;
  max-height: min(58vh, 440px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-gutter: stable !important;
}

.team-directory-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.team-directory-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 20px !important;
  min-width: 0 !important;
  padding: clamp(28px, 3vw, 44px) !important;
}

.team-directory-card h3 {
  max-width: 100% !important;
  margin: 0 !important;
  font-size: clamp(19px, 1.55vw, 28px) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.025em !important;
  white-space: nowrap !important;
}

.team-directory-card:hover,
.team-directory-card:focus-visible {
  background: #fff !important;
}

.team-directory-card:hover h3,
.team-directory-card:focus-visible h3 {
  color: var(--b-dark) !important;
}

.team-directory-card:hover p,
.team-directory-card:focus-visible p {
  color: var(--text) !important;
}

.residents-asset-hero {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background: #07576a !important;
}

.residents-hero-photo {
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.residents-hero-overlay {
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: linear-gradient(90deg, rgba(3, 65, 81, .98) 0%, rgba(4, 82, 101, .91) 28%, rgba(4, 82, 101, .32) 55%, rgba(4, 82, 101, 0) 76%) !important;
}

.residents-asset-hero > .wrap {
  position: relative !important;
  z-index: 2 !important;
}

@media (max-width: 1100px) {
  .team-leadership-mosaic,
  .team-directory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .team-leader-card h2 {
    font-size: clamp(21px, 2.5vw, 28px) !important;
  }

  .team-directory-card h3 {
    font-size: clamp(20px, 2.4vw, 28px) !important;
  }
}

@media (max-width: 700px) {
  .team-leadership-mosaic,
  .team-directory-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .team-leader-card {
    min-height: 300px !important;
    grid-template-columns: 82px minmax(0, 1fr) !important;
  }

  .team-leader-card h2,
  .team-directory-card h3 {
    font-size: clamp(20px, 6.2vw, 27px) !important;
  }

  .team-profile-details__body {
    position: fixed !important;
    inset: 12vh 18px auto 18px !important;
    max-height: 76vh !important;
  }

  .residents-hero-photo {
    object-position: 64% center !important;
  }

  .residents-hero-overlay {
    background: linear-gradient(90deg, rgba(3, 65, 81, .96) 0%, rgba(4, 82, 101, .82) 48%, rgba(4, 82, 101, .2) 100%) !important;
  }
}

/* ===== v1.9.3 Team page corrections =====
   1. Leadership names never overflow their card (tighter clamp + JS fit assist).
   2. Leadership profiles open as a centered overlay above the page, scrollable,
      never cut off at any viewport.
   3. Full Team directory: intro above a full-width grid; names on one line,
      roles on at most two lines.
   4. Avatar image support: drop an <img> inside .team-avatar to replace the
      initials placeholder. */

/* 1 ── Leadership name sizing */
html body sc-if[data-page="team"] .team-leader-card h2 {
  font-size: clamp(18px, 1.3vw, 25px) !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

html body sc-if[data-page="team"] .team-leader-card .team-role {
  font-size: clamp(15px, 1.1vw, 19px) !important;
}

/* 2 ── Profile overlay: centered, above everything, internally scrollable */
html body sc-if[data-page="team"] .team-profile-details[open] summary::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(4, 42, 52, .55);
  cursor: default;
}

html body sc-if[data-page="team"] .team-profile-details__body {
  position: fixed !important;
  z-index: 1300 !important;
  inset: auto !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(620px, calc(100vw - 40px)) !important;
  max-height: min(78vh, 640px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  padding: clamp(24px, 3vw, 36px) !important;
  padding-top: 52px !important;
  background: #fff !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 30px 80px rgba(3, 40, 50, .45) !important;
}

html body sc-if[data-page="team"] .team-profile-details__body p {
  font-size: 14px !important;
  line-height: 1.7 !important;
}

html body sc-if[data-page="team"] .team-profile-details__body p + p {
  font-size: 12px !important;
}

html body sc-if[data-page="team"] .team-profile-details__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--b-dark);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

html body sc-if[data-page="team"] .team-profile-details__close:hover,
html body sc-if[data-page="team"] .team-profile-details__close:focus-visible {
  color: #fff;
  background: var(--b);
  outline: none;
}

@media (max-width: 700px) {
  html body sc-if[data-page="team"] .team-profile-details__body {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100vw - 32px) !important;
    max-height: 80vh !important;
  }
}

/* 3 ── Full Team directory: title above, grid full width */
html body sc-if[data-page="team"] .team-directory-band {
  display: block !important;
}

html body sc-if[data-page="team"] .team-directory-band__intro {
  max-width: 980px;
  margin-bottom: clamp(36px, 4vw, 56px);
}

html body sc-if[data-page="team"] .team-directory-band__intro h2 {
  font-size: clamp(34px, 3.4vw, 52px) !important;
}

html body sc-if[data-page="team"] .team-directory-band__intro p {
  font-size: clamp(15px, 1.2vw, 18px) !important;
}

html body sc-if[data-page="team"] .team-directory-grid {
  width: 100% !important;
}

html body sc-if[data-page="team"] .team-directory-card {
  min-height: 96px !important;
  padding: clamp(20px, 2vw, 30px) clamp(20px, 2.2vw, 34px) !important;
}

html body sc-if[data-page="team"] .team-directory-card h3 {
  font-size: clamp(17px, 1.35vw, 24px) !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  margin: 0 0 6px !important;
}

html body sc-if[data-page="team"] .team-directory-card p {
  font-size: clamp(12px, 1vw, 14px) !important;
  line-height: 1.5 !important;
  max-width: 34ch;
}

@media (max-width: 1100px) {
  html body sc-if[data-page="team"] .team-directory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 700px) {
  html body sc-if[data-page="team"] .team-directory-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* 4 ── Real headshot support inside avatars */
html body sc-if[data-page="team"] .team-avatar img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

html body sc-if[data-page="team"] .team-avatar:has(img) span {
  display: none;
}

/* 5 ── Team hero intro alignment: pin to the page left edge like every
   other section (auto margins were centering it inside the hero track). */
html body sc-if[data-page="team"] .team-executive-hero__intro {
  margin: 0 !important;
  justify-self: start !important;
}

/* 6 ── LinkedIn hover: identical green hover on every card, light or dark.
   The dark leadership cards' resting style previously out-ranked the hover
   rule, so they had no hover feedback at all. */
html body sc-if[data-page="team"] .team-leader-card > .team-linkedin:hover,
html body sc-if[data-page="team"] .team-leader-card > .team-linkedin:focus-visible,
html body sc-if[data-page="team"] .team-directory-card:hover .team-linkedin,
html body sc-if[data-page="team"] .team-directory-card:focus-visible .team-linkedin {
  color: var(--b-dark) !important;
  background: var(--g) !important;
  border-color: var(--g) !important;
  box-shadow: 0 7px 16px rgba(10, 77, 88, .22);
  transform: translateY(-2px);
}


/* 7 ── Hero subtitle on a single line at desktop widths */
html body sc-if[data-page="team"] .team-executive-hero__intro > p {
  max-width: none !important;
}

/* 8 ── Clip the hero corner lattice to the section (it was bleeding across
   the section boundary into the Full Team band). High specificity because
   a legacy rule forces overflow visible with !important. */
html body sc-if[data-page="team"] .team-executive-hero {
  overflow: hidden !important;
}

/* ===== BEGIN services-hero seamless blend (added 2026-07-15) =====
   Rollback: delete everything between BEGIN and END markers.
   1. Hero background matched to the illustration's corner color (#fcfcfc).
   2. 36px alpha feather on all four image edges so the artwork dissolves
      into the background instead of ending at a hard rectangle. Applies to
      any future illustration swapped into this slot. */
html body sc-if[data-page="services"] .services-hero {
  background: #fcfcfc !important;
}

html body sc-if[data-page="services"] .services-hero__drawing img {
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
  mask-composite: intersect;
}
/* ===== END services-hero seamless blend ===== */

/* ===== BEGIN team-hero lattice fade (added 2026-07-15) =====
   Rollback: delete this block.
   The corner lattice was a hard-edged rectangle floating in the hero's
   white space. It now anchors to the bottom-right corner, extends wider,
   and dissolves toward the top-left so it reads as intentional texture. */
html body sc-if[data-page="team"] .team-executive-hero::after {
  right: -40px !important;
  bottom: -30px !important;
  width: 880px !important;
  height: 470px !important;
  opacity: .1 !important;
  -webkit-mask-image: linear-gradient(225deg, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 78%);
  mask-image: linear-gradient(225deg, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 78%);
}
/* ===== END team-hero lattice fade ===== */

/* ===== BEGIN residents-hero short banner (added 2026-07-15) =====
   Rollback: delete this block and restore the previous img src in index.html
   (residents-open-door-hero-approved.png).
   Band height retuned to the new 1536x560 hero image so it displays with
   minimal cropping at desktop widths. */
html body sc-if[data-page="residents"] .residents-asset-hero {
  min-height: clamp(360px, 38vw, 560px) !important;
}

@media (max-width: 700px) {
  html body sc-if[data-page="residents"] .residents-asset-hero {
    min-height: 440px !important;
  }
}
/* ===== END residents-hero short banner ===== */

/* 9 ── "Full Team" eyebrow label: light gold on the dark band (a legacy .sl
   rule was forcing dark teal on dark teal). */
html body sc-if[data-page="team"] .team-directory-band .sl {
  color: var(--gl) !important;
}

/* ===== BEGIN hero hex-pattern fade (added 2026-07-15) =====
   Rollback: delete this block.
   The .hgrid hex pattern on plain heroes had raw edges and was sliced at
   the section boundary. It now sits inside the section and dissolves
   radially, so it reads as texture instead of a cut-off image. Applies to
   every hero that uses .hgrid (legal, contact, and similar plain heroes). */
html body .hero .hgrid {
  inset: auto 0 0 auto !important;
  height: 85% !important;
  -webkit-mask-image: radial-gradient(120% 130% at 92% 88%, #000 38%, transparent 74%);
  mask-image: radial-gradient(120% 130% at 92% 88%, #000 38%, transparent 74%);
}
/* ===== END hero hex-pattern fade ===== */

/* ===== BEGIN round-1 launch fixes (added 2026-07-22, Zac's doc) =====
   Rollback: delete this block. */

/* Case-study hero metric accent: full-width row on every case page, so the
   gradient dash never occupies a grid cell and displaces the first metric
   (previously patched for Avian's 4-col grid only; Whisper uses 3-col). */
html body sc-if[data-page^="case-"] > div > section:first-child
  div[style*="padding-top:40px"]::before {
  grid-column: 1 / -1 !important;
  width: 44px !important;
  margin-bottom: 12px !important;
}

/* Service-page bullet lists: browser default <p> margins pushed the text
   below its bullet. Zero them so bullets align with the first text line. */
html body sc-if[data-page^="service-"] div[style*="display:flex;gap:12px"] > p {
  margin: 0 !important;
}

/* Integrated Delivery process flow: step labels up ~1.35x per review. */
html body .process-step strong {
  font-size: 23px;
}
/* ===== END round-1 launch fixes ===== */

/* ===== BEGIN v2.6 form verification ===== */
html body form[data-ess-form] .ess-turnstile {
  width: 100%;
  max-width: 340px;
  min-height: 0;
  overflow: hidden;
}

html body form[data-ess-form] .ess-turnstile iframe {
  max-width: 100%;
}

html body form[data-ess-form] button:disabled {
  cursor: wait !important;
  opacity: .68;
}
/* ===== END v2.6 form verification ===== */

/* ===== BEGIN v2.6 service hero mobile crops =====
   Keep the drilling rig and rooftop equipment visible beside the mobile
   headlines instead of allowing the landscape crops to hide them. */
@media (max-width: 720px) {
  html body sc-if[data-page="service-geo"] .hero.editorial-photo-hero {
    background-position: center, center, 36% center !important;
  }

  html body sc-if[data-page="service-retro"] .hero.editorial-photo-hero {
    background-position: center, center, 76% center !important;
  }
}
/* ===== END v2.6 service hero mobile crops ===== */