:root {
  --black: #090a09;
  --black-soft: #111311;
  --green: #434441;
  --green-light: #565753;
  --gold: #c8a85b;
  --gold-soft: #a98d4d;
  --text: #eee9dc;
  --muted: #aaa79d;
  --line: rgba(200,168,91,.28);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 50%, rgba(67,68,65,.20), transparent 48%),
    var(--black);
  color: var(--text);
  font-family: Inter, Arial, sans-serif;
  overflow: hidden;
}

a { color: inherit; text-decoration: none; }

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5vw;
  border-bottom: 1px solid rgba(200,168,91,.14);
  background: rgba(9,10,9,.86);
  backdrop-filter: blur(10px);
  z-index: 10;
}

.brand {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(25px, 2.3vw, 36px);
  letter-spacing: .04em;
  font-weight: 600;
}
.brand span { color: var(--gold); }

.nav { display: flex; gap: clamp(18px, 2.5vw, 38px); }
.nav a {
  position: relative;
  color: #c7c4ba;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .14em;
  padding: 8px 0;
  transition: color .2s ease;
}
.nav a:hover, .nav a.active { color: var(--gold); }
.nav a.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--gold);
}

.home, .page {
  min-height: 100vh;
  padding: 120px 5vw 70px;
}

.home {
  display: grid;
  place-items: center;
  text-align: center;
}

.home-content { max-width: 760px; margin-top: -25px; }
.eyebrow {
  color: var(--gold);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .35em;
  margin-bottom: 15px;
}
h1, h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
}
.home h1 { font-size: clamp(60px, 8vw, 105px); line-height: .9; margin: 0; }
.gold-rule {
  width: 64px;
  height: 1px;
  background: var(--gold);
  margin: 25px auto;
}
.intro {
  max-width: 620px;
  margin: 0 auto 30px;
  color: var(--muted);
  line-height: 1.8;
  font-size: 15px;
}

.button {
  display: inline-block;
  border: 1px solid var(--line);
  padding: 12px 22px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 11px;
  transition: background .2s, border-color .2s, color .2s;
}
.button:hover {
  background: var(--green);
  border-color: var(--gold-soft);
  color: var(--text);
}

.page { max-width: 1400px; margin: 0 auto; }
.page-heading { text-align: center; }
.page-heading h1 { font-size: clamp(44px, 5vw, 68px); margin: 0; }
.page-heading .gold-rule { margin: 16px auto 10px; }
.page-heading p { color: var(--muted); margin: 0 auto 26px; font-size: 13px; }

.team-grid, .gallery-grid {
  display: grid;
  gap: 18px;
}
.team-grid { grid-template-columns: repeat(3, 1fr); }
.gallery-grid { grid-template-columns: repeat(4, 1fr); }

.team-card, .gallery-card {
  background: rgba(17,19,17,.92);
  border: 1px solid rgba(200,168,91,.17);
  box-shadow: 0 14px 45px rgba(0,0,0,.25);
}

.photo-placeholder, .gallery-image {
  display: grid;
  place-items: center;
  color: rgba(200,168,91,.6);
  background:
    linear-gradient(145deg, rgba(67,68,65,.80), rgba(7,9,8,.9));
  border-bottom: 1px solid var(--line);
  letter-spacing: .16em;
  font-size: 10px;
}
.photo-placeholder { height: 180px; }
.gallery-image { height: 230px; }

.team-info, .gallery-caption { padding: 16px 18px; }
.team-info h2, .gallery-caption h2 { margin: 0 0 3px; font-size: 25px; }
.team-info h3 {
  margin: 0 0 10px;
  color: var(--gold);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.team-info p, .gallery-caption p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  margin: 0;
}
.gallery-caption h2 { font-size: 22px; }

.site-footer {
  position: fixed;
  bottom: 15px;
  left: 0; right: 0;
  text-align: center;
  color: #68675f;
  font-size: 9px;
  letter-spacing: .12em;
}

@media (max-width: 900px) {
  body { overflow: auto; }
  .site-header { position: sticky; }
  .home, .page { min-height: auto; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .site-footer { position: static; padding: 20px; }
}

@media (max-width: 620px) {
  .site-header { height: auto; min-height: 78px; padding: 15px 5vw; align-items: flex-start; gap: 12px; flex-direction: column; }
  .nav { width: 100%; justify-content: space-between; gap: 10px; }
  .nav a { font-size: 10px; }
  .home, .page { padding: 120px 5vw 40px; }
  .team-grid, .gallery-grid { grid-template-columns: 1fr; }
}

/* 2026 visual refresh: supplied logo, metallic gold, reference green, centered two-person team */
:root {
  --green: #434441;
  --green-light: #565753;
  --gold: #ae9857;
  --gold-soft: #7f6339;
  --gold-highlight: #e0ce7b;
  --gold-deep: #493d25;
  --gold-metal: linear-gradient(110deg, #493d25 0%, #7f6339 16%, #d4c16c 34%, #e0ce7b 46%, #ae9857 60%, #d4c16c 73%, #735b36 88%, #ae9857 100%);
  --line: rgba(174,152,87,.30);
}

body {
  background:
    radial-gradient(circle at 50% 50%, rgba(67,68,65,.24), transparent 48%),
    var(--black);
}

.brand { display: inline-flex; align-items: center; }
.brand img {
  display: block;
  width: clamp(230px, 24vw, 370px);
  max-height: 62px;
  object-fit: contain;
  object-position: left center;
}

.eyebrow,
.nav a:hover,
.nav a.active,
.button,
.team-info h3 {
  color: var(--gold);
  background-image: var(--gold-metal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.nav a.active::after,
.gold-rule {
  background: var(--gold-metal);
}

.photo-placeholder,
.gallery-image {
  color: rgba(212,193,108,.72);
  background: linear-gradient(145deg, rgba(67,68,65,.88), rgba(7,9,8,.92));
}

.team-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 620px) {
  .brand img { width: min(82vw, 330px); max-height: 56px; }
  .team-grid { grid-template-columns: 1fr; max-width: 520px; }
}


/* 2026-10 refinement: larger header logo, softer green cards, finished team portraits */
.site-header { height: 104px; padding-top: 7px; padding-bottom: 7px; }
.brand img { width: clamp(300px, 30vw, 455px); max-height: 86px; }
.home, .page { padding-top: 132px; }

.team-card, .gallery-card {
  background: linear-gradient(150deg, rgba(67,68,65,.76) 0%, rgba(52,53,51,.70) 58%, rgba(25,26,25,.76) 100%);
}
.photo-placeholder, .gallery-image {
  background: linear-gradient(145deg, rgba(86,87,83,.92) 0%, rgba(67,68,65,.90) 62%, rgba(42,43,41,.88) 100%);
}
.team-photo {
  height: 310px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 35%, rgba(86,87,83,.98) 0%, rgba(67,68,65,.96) 56%, rgba(48,49,47,.94) 100%);
  border-bottom: 1px solid var(--line);
}
.team-photo img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; display: block; }
.team-info { text-align: center; padding: 18px 18px 20px; }
.team-info h2 { margin-bottom: 5px; font-size: 29px; }
.team-info h3 { margin-bottom: 0; }
.page-heading .gold-rule { margin-bottom: 24px; }

@media (max-width: 900px) {
  .site-header { height: 98px; }
  .brand img { width: clamp(260px, 42vw, 390px); max-height: 80px; }
  .home, .page { padding-top: 124px; }
}
@media (max-width: 620px) {
  .site-header { height: auto; min-height: 104px; }
  .brand img { width: min(90vw, 390px); max-height: 76px; }
  .home, .page { padding-top: 126px; }
  .team-photo { height: 330px; }
}

/* Wave 3: team messaging, linked profiles, gallery photos, contact footer */
.home, .page { padding-bottom: 96px; }
.page-heading p {
  max-width: 680px;
  color: #c8c5bb;
  font-size: 14px;
  line-height: 1.6;
}

.team-profile-link {
  display: block;
  position: relative;
  border-top: 1px solid transparent;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.team-profile-link::after {
  content: "›";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  font-family: Georgia, serif;
  font-size: 24px;
  opacity: .72;
  transition: transform .2s ease, opacity .2s ease;
}
.team-profile-link:focus-visible {
  outline: 2px solid var(--gold-highlight);
  outline-offset: -3px;
}
@media (hover: hover) and (pointer: fine) {
  .team-profile-link:hover {
    transform: translateY(-2px);
    background: linear-gradient(110deg, rgba(86,87,83,.74), rgba(67,68,65,.48));
    border-top-color: rgba(224,206,123,.65);
    box-shadow: inset 0 1px 0 rgba(224,206,123,.12);
  }
  .team-profile-link:hover::after { transform: translate(4px, -50%); opacity: 1; }
}

.gallery-card { overflow: hidden; }
.gallery-image {
  height: 310px;
  border-bottom: 0;
  padding: 0;
}
.gallery-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.site-footer {
  bottom: 12px;
  color: #8b897f;
  font-size: 9px;
  line-height: 1.65;
  letter-spacing: .10em;
}
.site-footer a { color: inherit; transition: color .2s ease; }
.site-footer a:hover { color: var(--gold); }

.bio-page { max-width: 900px; }
.bio-placeholder {
  max-width: 620px;
  margin: 42px auto 0;
  padding: 36px 28px;
  text-align: center;
  background: linear-gradient(150deg, rgba(67,68,65,.68), rgba(40,41,39,.72));
  border: 1px solid rgba(174,152,87,.22);
}
.bio-placeholder p { color: var(--muted); margin: 0 0 24px; }

@media (max-width: 900px) {
  .gallery-image { height: 340px; }
  .site-footer { padding-bottom: 18px; }
}
@media (max-width: 620px) {
  .gallery-image { height: 390px; }
  .team-profile-link::after { right: 14px; }
}

/* Wave 4: contact icons/maps link, team navigation dropdown, swipeable gallery carousel */
.nav { align-items: center; }
.nav-item { position: relative; display: flex; align-items: center; }
.nav-team-row { display: flex; align-items: center; }
.nav-link { position: relative; }
.nav-team-toggle {
  width: 28px;
  height: 34px;
  margin-left: 3px;
  padding: 6px;
  border: 0;
  background: transparent;
  color: #c7c4ba;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: color .2s ease, transform .2s ease;
}
.nav-team-toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav-team-toggle:hover,
.nav-team-toggle:focus-visible,
.nav-item.is-open .nav-team-toggle { color: var(--gold-highlight); }
.nav-team-toggle:focus-visible { outline: 1px solid var(--gold-highlight); outline-offset: 1px; }
.nav-item.is-open .nav-team-toggle { transform: rotate(180deg); }

.nav-dropdown {
  position: absolute;
  top: calc(100% - 1px);
  left: 50%;
  min-width: 156px;
  padding: 8px;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: rgba(13,16,13,.98);
  border: 1px solid rgba(174,152,87,.30);
  box-shadow: 0 16px 38px rgba(0,0,0,.36);
  transition: opacity .18s ease, visibility .18s ease;
  z-index: 30;
}
.nav-dropdown a {
  display: block;
  padding: 11px 13px;
  color: #d3d0c7;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-left: 1px solid transparent;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.nav-dropdown a::after { display: none !important; }
.nav-dropdown a:hover,
.nav-dropdown a:focus-visible {
  color: var(--gold-highlight);
  background: rgba(67,68,65,.46);
  border-left-color: var(--gold);
  outline: none;
}
.nav-item.is-open .nav-dropdown,
.nav-item:focus-within .nav-dropdown { opacity: 1; visibility: visible; pointer-events: auto; }
@media (hover: hover) and (pointer: fine) {
  .nav-item:hover .nav-dropdown { opacity: 1; visibility: visible; pointer-events: auto; }
}

.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.footer-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  max-width: calc(100vw - 24px);
}
.footer-icon {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.footer-link span { min-width: 0; }
.footer-link:hover,
.footer-link:focus-visible { color: var(--gold-highlight); outline: none; }
.footer-link:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

.gallery-carousel-section { width: 100%; max-width: 1320px; margin: 0 auto; }
.gallery-carousel-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: -6px 0 10px;
}
.gallery-swipe-hint {
  color: #85847b;
  font-size: 9px;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.gallery-controls { display: flex; gap: 7px; }
.carousel-button {
  width: 34px;
  height: 34px;
  padding: 7px;
  border: 1px solid rgba(174,152,87,.30);
  background: rgba(67,68,65,.62);
  color: var(--gold);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.carousel-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.carousel-button:hover { background: rgba(86,87,83,.86); border-color: var(--gold-highlight); color: var(--gold-highlight); }
.carousel-button:active { transform: scale(.96); }
.carousel-button:focus-visible { outline: 2px solid var(--gold-highlight); outline-offset: 2px; }
.carousel-button:disabled { opacity: .35; cursor: default; }

.gallery-carousel {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  padding: 4px 0 14px;
}
.gallery-carousel::-webkit-scrollbar { display: none; }
.gallery-carousel.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.gallery-track { display: flex; gap: 18px; width: max-content; min-width: 100%; }
.gallery-carousel .gallery-card {
  flex: 0 0 clamp(280px, 27vw, 350px);
  width: auto;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.gallery-card--placeholder[hidden] { display: none !important; }

@media (max-width: 900px) {
  .gallery-carousel .gallery-card { flex-basis: min(44vw, 390px); }
  .gallery-carousel-toolbar { margin-top: 0; }
}

@media (max-width: 620px) {
  .nav { align-items: center; }
  .nav-item { min-width: 0; }
  .nav-team-toggle { width: 24px; height: 30px; margin-left: 0; padding: 5px; }
  .nav-dropdown { min-width: 142px; top: calc(100% + 1px); }
  .nav-dropdown a { font-size: 10px; padding: 11px 12px; }

  .site-footer { gap: 5px; padding-left: 12px; padding-right: 12px; }
  .footer-link { font-size: 9px; letter-spacing: .07em; text-align: left; }
  .footer-icon { width: 13px; height: 13px; flex-basis: 13px; }

  .gallery-carousel-toolbar { margin-bottom: 8px; }
  .gallery-swipe-hint { font-size: 8px; }
  .carousel-button { width: 36px; height: 36px; }
  .gallery-track { gap: 12px; }
  .gallery-carousel .gallery-card { flex: 0 0 88%; max-width: 420px; }
  .gallery-carousel { padding-bottom: 10px; }
}

/* Wave 4.1: keep team dropdown labels visible on hover/focus.
   The site's metallic nav-text rule uses transparent text fill; using the
   background shorthand on dropdown hover cleared that gradient and made the
   label disappear. Dropdown items use a solid gold label instead. */
.nav-dropdown a:hover,
.nav-dropdown a:focus-visible {
  background-color: rgba(67,68,65,.46);
  background-image: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: var(--gold-highlight);
  color: var(--gold-highlight);
}

/* Wave 5: finish pass — consistent borders, cleaner typography and title rules */
:root {
  --surface-border: rgba(174, 152, 87, .38);
  --surface-border-strong: rgba(224, 206, 123, .60);
  --surface-border-width: 1px;
  --surface-radius: 4px;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Slightly stronger navigation weight without changing its character. */
.nav a,
.nav-dropdown a {
  font-weight: 500;
}

/* Crisp, uniform decorative rule under page titles. */
.gold-rule,
.nav a.active::after {
  background: var(--gold);
}
.gold-rule {
  width: 58px;
  height: 2px;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(174, 152, 87, .04);
}
.nav a.active::after {
  height: 1px;
  border-radius: 999px;
}

/* One border system for the site's primary surfaces. */
.team-card,
.gallery-card,
.bio-placeholder {
  border: var(--surface-border-width) solid var(--surface-border);
  border-radius: var(--surface-radius);
  box-shadow: 0 12px 36px rgba(0, 0, 0, .24);
  overflow: hidden;
}
.team-photo {
  border-bottom: var(--surface-border-width) solid var(--surface-border);
}
.team-profile-link {
  border-top: 0;
}
@media (hover: hover) and (pointer: fine) {
  .team-profile-link:hover {
    border-top-color: transparent;
    box-shadow: inset 0 1px 0 rgba(224, 206, 123, .12);
  }
}

.button,
.carousel-button,
.nav-dropdown {
  border-width: var(--surface-border-width);
  border-style: solid;
  border-color: var(--surface-border);
}
.button,
.carousel-button {
  border-radius: 3px;
}
.nav-dropdown {
  border-radius: 3px;
}
.carousel-button:hover,
.carousel-button:focus-visible,
.button:hover,
.button:focus-visible {
  border-color: var(--surface-border-strong);
}

/* Refine image presentation and keep the cutout edge rendering clean. */
.team-photo img {
  backface-visibility: hidden;
  transform: translateZ(0);
}
.gallery-image img {
  backface-visibility: hidden;
}

/* Infinite carousel clones are visual duplicates, not additional content. */
.gallery-card[data-carousel-clone="true"] {
  pointer-events: none;
}

@media (max-width: 620px) {
  .gold-rule { width: 52px; }
}

/* Responsive polish: sticky headers already occupy layout space, so avoid
   carrying over the desktop fixed-header offset on tablets and phones. */
@media (max-width: 900px) {
  .home, .page { padding-top: 52px; }
}
@media (max-width: 620px) {
  .home, .page { padding-top: 44px; }
}

/* Wave 5.1: keep the header/navigation anchored identically on every page.
   Pages with different content heights can otherwise gain/lose a desktop
   scrollbar, changing the usable viewport width and nudging the right nav. */
@media (min-width: 901px) {
  html {
    overflow-y: scroll;
    scrollbar-gutter: stable;
  }
  .site-header {
    width: 100%;
  }
}

/* Wave 6: marble backgrounds, About page, centered home actions, refined gallery input */
body.home-background,
body.inner-background {
  background-color: var(--black);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
body.home-background {
  background-image: url('marble.webp');
}
body.inner-background {
  background-image:
    linear-gradient(rgba(0, 0, 0, .78), rgba(0, 0, 0, .82)),
    url('marble.webp');
}

.home-content {
  position: relative;
  z-index: 1;
}
.home-content h1,
.home-content .eyebrow,
.home-content .intro {
  text-shadow: 0 2px 14px rgba(0, 0, 0, .68);
}
.home-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
}
.home-actions .button {
  min-width: 138px;
  text-align: center;
}

.about-page {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Keep the four-item nav evenly aligned after adding About. */
.nav {
  align-items: center;
}
@media (max-width: 620px) {
  .nav {
    gap: 6px;
  }
  .nav a {
    letter-spacing: .10em;
  }
  body.home-background,
  body.inner-background {
    background-attachment: scroll;
  }
}

/* Gallery: the whole visual surface behaves as the drag target. */
.gallery-carousel,
.gallery-track,
.gallery-card,
.gallery-image,
.gallery-image img {
  cursor: grab;
}
.gallery-carousel.is-dragging,
.gallery-carousel.is-dragging .gallery-track,
.gallery-carousel.is-dragging .gallery-card,
.gallery-carousel.is-dragging .gallery-image,
.gallery-carousel.is-dragging .gallery-image img {
  cursor: grabbing;
}
.gallery-image img {
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  touch-action: pan-y pinch-zoom;
}
.gallery-carousel.is-wheeling {
  scroll-snap-type: none;
  scroll-behavior: auto;
}

/* Keep the marble visually below the header and preserve readable controls. */
body.home-background .site-header,
body.inner-background .site-header {
  background: rgba(9, 10, 9, .98);
}
body.home-background .site-footer,
body.inner-background .site-footer {
  text-shadow: 0 1px 5px rgba(0, 0, 0, .92);
}
.button:hover,
.button:focus-visible {
  background-color: rgba(86, 87, 83, .90);
  background-image: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: var(--gold-highlight);
  color: var(--gold-highlight);
}
.button:focus-visible {
  outline: 2px solid var(--gold-highlight);
  outline-offset: 2px;
}

/* Photos themselves do not intercept pointer input; grabbing anywhere on a
   visible image drags the carousel surface beneath it. */
.gallery-image img {
  pointer-events: none;
}

/* The unfiltered home artwork has bright areas, so keep the welcome copy
   comfortably readable without adding an overlay to the supplied image. */
body.home-background .intro {
  color: #d1cdc2;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .92);
}

/* Wave 6.1: focused home readability + refined team cutouts */
/* Keep the supplied marble asset at its original 2048×1365 resolution. */
body.home-background {
  background-image:
    radial-gradient(
      ellipse at 50% 50%,
      rgba(0, 0, 0, .72) 0%,
      rgba(0, 0, 0, .64) 24%,
      rgba(0, 0, 0, .42) 43%,
      rgba(0, 0, 0, .18) 64%,
      rgba(0, 0, 0, .04) 82%,
      rgba(0, 0, 0, 0) 100%
    ),
    url('marble.webp');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Readable neutral button surfaces on the marble hero. */
body.home-background .home-actions .button {
  background-color: rgba(66, 67, 64, .92);
  border-color: rgba(224, 206, 123, .58);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .24);
}
body.home-background .home-actions .button:hover,
body.home-background .home-actions .button:focus-visible {
  background-color: rgba(83, 84, 80, .96);
  border-color: var(--gold-highlight);
  -webkit-text-fill-color: var(--gold-highlight);
  color: var(--gold-highlight);
}

/* Slightly stronger text contrast inside the darkened center of the hero. */
body.home-background .home-content h1,
body.home-background .home-content .eyebrow,
body.home-background .home-content .intro {
  text-shadow: 0 2px 16px rgba(0, 0, 0, .88);
}

@media (max-width: 620px) {
  body.home-background {
    background-position: 50% center;
  }
  body.home-background .home-actions .button {
    background-color: rgba(66, 67, 64, .94);
  }
}


/* Wave 7: legibility refinements and clean white-background team portraits */
/* Slightly larger brand mark while preserving the fixed header alignment. */
.site-header {
  height: 110px;
}
.brand img {
  width: clamp(330px, 32vw, 500px);
  max-height: 94px;
}
.home, .page {
  padding-top: 138px;
}

/* Home hero: solid neutral controls and brighter supporting copy. */
body.home-background .home-actions .button {
  background-color: rgb(67, 68, 65);
}
body.home-background .home-actions .button:hover,
body.home-background .home-actions .button:focus-visible {
  background-color: rgb(86, 87, 83);
}
body.home-background .intro {
  color: #f0ede5;
}

/* Footer contact information should read clearly against every page background. */
.site-footer,
.site-footer a,
.footer-link {
  color: #ffffff;
}
.site-footer a:hover,
.footer-link:hover,
.footer-link:focus-visible {
  color: var(--gold-highlight);
}

/* Team cards now use the original white-background portraits directly.
   The white surface extends edge-to-edge so there is no cutout seam or halo. */
.team-photo {
  background: #ffffff;
}
.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  background: #ffffff;
}

@media (max-width: 900px) {
  .site-header { height: 104px; }
  .brand img { width: clamp(285px, 45vw, 430px); max-height: 88px; }
  .home, .page { padding-top: 52px; }
}

@media (max-width: 620px) {
  .site-header { height: auto; min-height: 108px; }
  .brand img { width: min(94vw, 415px); max-height: 82px; }
  .home, .page { padding-top: 44px; }
}


/* Wave 8: neutral-gray interface, homepage brandmark, and final welcome copy */
:root {
  --green: #434441;       /* retained variable name for compatibility; now neutral gray */
  --green-light: #565753; /* hover gray */
}

/* Home brand pairing: use the supplied high-resolution brandmark above the company name. */
.home-brandmark {
  display: block;
  width: clamp(118px, 10.5vw, 168px);
  height: auto;
  margin: 0 auto 16px;
  object-fit: contain;
  filter: drop-shadow(0 3px 12px rgba(0,0,0,.24));
}
.home-company-name {
  /* sampled from the supplied D/A brandmark so the two marks read as one set */
  color: #e3b804;
  background-image: linear-gradient(90deg, #edc302 0%, #d7ac05 22%, #f4ca01 48%, #dfb404 68%, #c49908 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.home-tagline {
  max-width: 700px;
  margin-bottom: 28px;
  color: #f2efe8;
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: .035em;
}

/* Home buttons are fully opaque in their resting state; hover is a small neutral lift. */
body.home-background .home-actions .button {
  background: rgb(67, 68, 65);
  background-image: none;
  border-color: rgba(224, 206, 123, .62);
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: var(--gold-highlight);
  color: var(--gold-highlight);
}
body.home-background .home-actions .button:hover,
body.home-background .home-actions .button:focus-visible {
  background: rgb(86, 87, 83);
  background-image: none;
  border-color: var(--gold-highlight);
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: var(--gold-highlight);
  color: var(--gold-highlight);
}

/* Remove the last green UI tint from cards, menus, profile links, and carousel controls. */
.team-card,
.gallery-card {
  background: linear-gradient(150deg, rgba(67,68,65,.82) 0%, rgba(52,53,51,.78) 58%, rgba(25,26,25,.84) 100%);
}
.photo-placeholder,
.gallery-image {
  background: linear-gradient(145deg, rgba(86,87,83,.90) 0%, rgba(67,68,65,.88) 62%, rgba(42,43,41,.90) 100%);
}
.bio-placeholder {
  background: linear-gradient(150deg, rgba(67,68,65,.74), rgba(40,41,39,.78));
}
.nav-dropdown a:hover,
.nav-dropdown a:focus-visible {
  background-color: rgba(86,87,83,.48);
}
.carousel-button {
  background: rgba(67,68,65,.72);
}
.carousel-button:hover,
.carousel-button:focus-visible {
  background: rgba(86,87,83,.94);
}
@media (hover: hover) and (pointer: fine) {
  .team-profile-link:hover {
    background: linear-gradient(110deg, rgba(86,87,83,.78), rgba(67,68,65,.62));
  }
}
.button:hover,
.button:focus-visible {
  background-color: rgb(86,87,83);
}

@media (max-width: 620px) {
  .home-brandmark {
    width: clamp(104px, 31vw, 142px);
    margin-bottom: 13px;
  }
  .home-tagline {
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 24px;
  }
}

/* Wave 9: tighter home composition + one consistent translucent gray button system */
:root {
  --button-gray: rgba(67, 68, 65, .52);
  --button-gray-deep: rgba(52, 53, 51, .42);
  --button-gray-hover: rgba(86, 87, 83, .82);
  --button-gray-hover-deep: rgba(67, 68, 65, .68);
}

/* Bring the whole home composition closer to the header without changing its center alignment. */
.home-content {
  margin-top: -78px;
}

/* Tighten the vertical rhythm so the retirement subheading feels more connected to the brand block. */
.home-brandmark {
  margin-bottom: 10px;
}
.home-company-name {
  margin-bottom: 9px;
}
body.home-background .home-content .gold-rule {
  margin-top: 16px;
  margin-bottom: 12px;
}
.home-tagline {
  margin-bottom: 24px;
}

/* Use the team profile-link interaction as the site's gray-button language. */
.button,
.carousel-button,
.team-profile-link {
  background-color: var(--button-gray);
  background-image: linear-gradient(110deg, var(--button-gray), var(--button-gray-deep));
  border-color: var(--surface-border);
  -webkit-background-clip: border-box;
  background-clip: border-box;
}

/* Metallic/gold text remains readable on the translucent resting surface. */
.button,
.carousel-button,
.team-profile-link h3 {
  color: var(--gold-highlight);
}
.button {
  -webkit-text-fill-color: var(--gold-highlight);
}

.button:hover,
.button:focus-visible,
.carousel-button:hover,
.carousel-button:focus-visible,
.team-profile-link:hover,
.team-profile-link:focus-visible {
  background-color: var(--button-gray-hover);
  background-image: linear-gradient(110deg, var(--button-gray-hover), var(--button-gray-hover-deep));
  border-color: var(--surface-border-strong);
}

/* Override the previous home-only solid button rule so Home matches the team controls exactly. */
body.home-background .home-actions .button {
  background-color: var(--button-gray);
  background-image: linear-gradient(110deg, var(--button-gray), var(--button-gray-deep));
  border-color: var(--surface-border);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: var(--gold-highlight);
  color: var(--gold-highlight);
}
body.home-background .home-actions .button:hover,
body.home-background .home-actions .button:focus-visible {
  background-color: var(--button-gray-hover);
  background-image: linear-gradient(110deg, var(--button-gray-hover), var(--button-gray-hover-deep));
  border-color: var(--surface-border-strong);
  -webkit-text-fill-color: var(--gold-highlight);
  color: var(--gold-highlight);
}

/* Keep the team-card action visually identical to the shared button system. */
.team-profile-link {
  transition: transform .2s ease, background-color .2s ease, background-image .2s ease, border-color .2s ease, box-shadow .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .team-profile-link:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(224, 206, 123, .12);
  }
}

@media (max-width: 900px) {
  .home-content {
    margin-top: -46px;
  }
}

@media (max-width: 620px) {
  .home-content {
    margin-top: -24px;
  }
  .home-brandmark {
    margin-bottom: 9px;
  }
  .home-company-name {
    margin-bottom: 7px;
  }
  body.home-background .home-content .gold-rule {
    margin-top: 14px;
    margin-bottom: 10px;
  }
  .home-tagline {
    margin-bottom: 20px;
  }
}

/* Wave 10: alignment, softer team portraits, gallery framing, and one non-header gold system */
:root {
  /* Exact gold family sampled from the D/A brandmark used on the Home page. */
  --content-gold: #dfb404;
  --content-gold-bright: #f4ca01;
  --content-gold-mid: #d7ac05;
  --content-gold-deep: #c49908;
  --content-gold-metal: linear-gradient(90deg, #edc302 0%, #d7ac05 22%, #f4ca01 48%, #dfb404 68%, #c49908 100%);
  --content-border: rgba(223, 180, 4, .62);
  --content-border-strong: rgba(244, 202, 1, .88);
}

/* Preserve the header/nav styling exactly as-is; the unified gold below is scoped
   to page content and footer only. */
main .eyebrow,
main .team-info h3,
main .button,
main .carousel-button,
main .team-profile-link::after {
  color: var(--content-gold);
}

/* The on-page Dickson & Associates label now exactly mirrors the Home treatment
   for typography, spacing, and gold gradient on every inner page. */
.page-heading .eyebrow {
  font-family: Inter, Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .35em;
  line-height: 1.2;
  color: #e3b804;
  background-image: var(--content-gold-metal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.home-company-name {
  background-image: var(--content-gold-metal);
}

/* All non-header gold rules and borders use the Home brandmark gold family. */
main .gold-rule {
  background: var(--content-gold-metal);
  box-shadow: 0 0 0 1px rgba(223, 180, 4, .06);
}
main .team-card,
main .gallery-card,
main .bio-placeholder {
  border-color: var(--content-border);
}
main .button,
main .carousel-button {
  border-color: var(--content-border);
}
main .button:hover,
main .button:focus-visible,
main .carousel-button:hover,
main .carousel-button:focus-visible,
main .team-profile-link:hover,
main .team-profile-link:focus-visible {
  border-color: var(--content-border-strong);
}
main .button,
main .carousel-button,
main .team-info h3,
main .team-profile-link::after {
  -webkit-text-fill-color: var(--content-gold-bright);
  color: var(--content-gold-bright);
}
main .team-info h3 {
  background-image: var(--content-gold-metal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.site-footer a:hover,
.site-footer .footer-link:hover,
.site-footer .footer-link:focus-visible {
  color: var(--content-gold-bright);
}

/* Team cards: identical image/button geometry with a single crisp separator.
   The portrait files themselves now use the same softly dimmed studio backdrop. */
.team-card {
  display: flex;
  flex-direction: column;
}
.team-photo {
  flex: 0 0 310px;
  height: 310px;
  background: #e4e4e0;
  border-bottom: 0;
}
.team-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  background: #e4e4e0;
}
.team-profile-link {
  margin: 0;
  border-top: 1px solid var(--content-border);
  min-height: 92px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Gallery borders are deliberately explicit so originals and infinite-carousel
   clones render with the exact same framing. */
.gallery-carousel .gallery-card,
.gallery-carousel .gallery-card[data-carousel-clone="true"] {
  border: 1px solid var(--content-border);
  border-radius: var(--surface-radius);
  box-shadow:
    inset 0 0 0 1px rgba(244, 202, 1, .08),
    0 12px 36px rgba(0, 0, 0, .24);
  overflow: hidden;
}
.gallery-carousel .gallery-image {
  border: 0;
}

/* Reframe the Germany photo lower so Julie and Michelle stay visible in the crop. */
.gallery-image--germany img,
.gallery-image img[src="gallery-6.png"] {
  object-position: center 82%;
}

@media (max-width: 900px) {
  .team-photo {
    flex-basis: 330px;
    height: 330px;
  }
}

/* Wave 11: master-gold unification, black glass controls, matched team strips, double gallery frame */
:root {
  /* Master reference: the D/A brandmark shown at the top of the Home/Welcome page. */
  --brand-gold: #dfb404;
  --brand-gold-bright: #f4ca01;
  --brand-gold-deep: #c49908;
  --brand-gold-metal: linear-gradient(90deg, #edc302 0%, #d7ac05 22%, #f4ca01 48%, #dfb404 68%, #c49908 100%);

  /* Override every older gold token so header + page UI all share one family. */
  --gold: var(--brand-gold);
  --gold-soft: var(--brand-gold-deep);
  --gold-highlight: var(--brand-gold-bright);
  --gold-deep: var(--brand-gold-deep);
  --gold-metal: var(--brand-gold-metal);
  --content-gold: var(--brand-gold);
  --content-gold-bright: var(--brand-gold);
  --content-gold-mid: var(--brand-gold);
  --content-gold-deep: var(--brand-gold-deep);
  --content-gold-metal: var(--brand-gold-metal);
  --line: var(--brand-gold);
  --surface-border: var(--brand-gold);
  --surface-border-strong: var(--brand-gold-bright);
  --content-border: var(--brand-gold);
  --content-border-strong: var(--brand-gold-bright);

  /* Shared black-glass interaction surface. */
  --button-black: rgba(0, 0, 0, .58);
  --button-black-deep: rgba(10, 10, 10, .46);
  --button-black-hover: rgba(30, 30, 30, .80);
  --button-black-hover-deep: rgba(10, 10, 10, .70);
}

/* Header gold now follows the exact same master family as the Home brandmark. */
.site-header {
  border-bottom-color: rgba(223, 180, 4, .28);
}
.nav a:hover,
.nav a.active {
  color: var(--brand-gold);
  background-image: var(--brand-gold-metal);
}
.nav a.active::after {
  background: var(--brand-gold-metal);
}
.nav-team-toggle:hover,
.nav-team-toggle:focus-visible,
.nav-item.is-open .nav-team-toggle {
  color: var(--brand-gold);
}
.nav-team-toggle:focus-visible {
  outline-color: var(--brand-gold);
}

/* All page-content gold text/rules/outlines share the Home brandmark reference. */
.eyebrow,
.home-company-name,
.page-heading .eyebrow,
.team-info h3 {
  background-image: var(--brand-gold-metal);
}
.gold-rule {
  background: var(--brand-gold-metal);
}
.button,
.carousel-button,
.team-profile-link::after,
.site-footer a:hover,
.site-footer .footer-link:hover,
.site-footer .footer-link:focus-visible {
  color: var(--brand-gold);
  -webkit-text-fill-color: var(--brand-gold);
}
.button,
.carousel-button,
.bio-placeholder,
.team-card {
  border-color: var(--brand-gold);
}
.button:hover,
.button:focus-visible,
.carousel-button:hover,
.carousel-button:focus-visible {
  border-color: var(--brand-gold-bright);
}

/* Every gray button/control becomes the same translucent-black glass surface. */
.button,
.carousel-button,
.team-profile-link,
body.home-background .home-actions .button {
  background-color: var(--button-black);
  background-image: linear-gradient(110deg, var(--button-black), var(--button-black-deep));
  border-color: var(--brand-gold);
  -webkit-background-clip: border-box;
  background-clip: border-box;
}
.button:hover,
.button:focus-visible,
.carousel-button:hover,
.carousel-button:focus-visible,
.team-profile-link:hover,
.team-profile-link:focus-visible,
body.home-background .home-actions .button:hover,
body.home-background .home-actions .button:focus-visible {
  background-color: var(--button-black-hover);
  background-image: linear-gradient(110deg, var(--button-black-hover), var(--button-black-hover-deep));
  border-color: var(--brand-gold-bright);
}

/* Keep Home button labels on the master gold instead of the previous lighter yellow. */
body.home-background .home-actions .button,
body.home-background .home-actions .button:hover,
body.home-background .home-actions .button:focus-visible {
  color: var(--brand-gold);
  -webkit-text-fill-color: var(--brand-gold);
}

/* Our Team dropdown uses the same black-glass surface as the buttons. */
.nav-dropdown {
  background-color: var(--button-black);
  background-image: linear-gradient(110deg, var(--button-black), var(--button-black-deep));
  border-color: var(--brand-gold);
  backdrop-filter: blur(10px);
}
.nav-dropdown a {
  background: transparent;
}
.nav-dropdown a:hover,
.nav-dropdown a:focus-visible {
  background-color: var(--button-black-hover);
  background-image: linear-gradient(110deg, var(--button-black-hover), var(--button-black-hover-deep));
  border-left-color: var(--brand-gold);
  color: var(--brand-gold);
  -webkit-text-fill-color: var(--brand-gold);
}

/* Julie and Michelle now have the exact same gold separator above the profile button. */
.team-profile-link {
  border-top: 2px solid var(--brand-gold) !important;
}
.team-profile-link:hover,
.team-profile-link:focus-visible {
  border-top-color: var(--brand-gold-bright) !important;
}
.team-profile-link h3 {
  background-image: var(--brand-gold-metal);
}

/* Gallery frame: black strip directly around every image card, then a gold strip outside it.
   This is applied to originals and infinite-carousel clones identically. */
.gallery-carousel .gallery-card,
.gallery-carousel .gallery-card[data-carousel-clone="true"] {
  border: 2px solid #050505 !important;
  border-radius: var(--surface-radius);
  box-shadow:
    0 0 0 2px var(--brand-gold),
    0 12px 36px rgba(0, 0, 0, .28) !important;
  overflow: hidden;
}
.gallery-carousel .gallery-image {
  border: 0 !important;
}

/* The carousel controls and focus treatments use the same master gold. */
.carousel-button:focus-visible,
.button:focus-visible,
.team-profile-link:focus-visible {
  outline-color: var(--brand-gold-bright);
}

/* Wave 11.1: keep every desktop page locked to a single viewport, matching Home.
   Mobile/tablet pages remain scrollable when their stacked content genuinely needs it. */
@media (min-width: 901px) {
  html,
  body {
    height: 100%;
    min-height: 100%;
    overflow-y: hidden !important;
  }

  html {
    scrollbar-gutter: auto;
  }

  body {
    overflow-x: hidden;
  }

  .home,
  .page {
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
  }
}


/* Wave 11.4: refined gallery motion, thinner gold frame, and final Germany crop. */
.gallery-carousel.is-autoscrolling {
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
}
.gallery-carousel .gallery-card,
.gallery-carousel .gallery-card[data-carousel-clone="true"] {
  box-shadow:
    0 0 0 1px var(--brand-gold),
    0 12px 36px rgba(0, 0, 0, .28) !important;
}
.gallery-image--germany img,
.gallery-image img[src="gallery-6.png"] {
  object-position: center bottom !important;
}


/* Wave 11.6: reliable continuous gallery autoplay.
   Keep scroll snapping disabled once the carousel is initialized so small,
   continuous increments are never pulled back to a snap point. */
.gallery-carousel.carousel-ready,
.gallery-carousel.is-autoscrolling,
.gallery-carousel.is-wheeling,
.gallery-carousel.is-dragging {
  scroll-snap-type: none !important;
}
.gallery-carousel.carousel-ready,
.gallery-carousel.is-autoscrolling,
.gallery-carousel.is-wheeling {
  scroll-behavior: auto !important;
}
.gallery-carousel .gallery-card {
  scroll-snap-stop: normal;
}

/* Wave 11.7: high-resolution marble master + perfectly matched team actions. */
/*
   The prior 2048px WebP was being enlarged on some displays, which made its
   dark-area compression artifacts much more visible.  Use a lossless 4096px
   master instead; keep the established overlays and composition unchanged.
*/
body.home-background {
  background-image:
    radial-gradient(
      ellipse at 50% 50%,
      rgba(0, 0, 0, .72) 0%,
      rgba(0, 0, 0, .64) 24%,
      rgba(0, 0, 0, .42) 43%,
      rgba(0, 0, 0, .18) 64%,
      rgba(0, 0, 0, .04) 82%,
      rgba(0, 0, 0, 0) 100%
    ),
    url('marble-hires.png') !important;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

body.inner-background {
  background-image:
    linear-gradient(rgba(0, 0, 0, .78), rgba(0, 0, 0, .82)),
    url('marble-hires.png') !important;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Julie and Michelle use one exact action geometry and interaction treatment. */
.team-grid .team-card {
  display: flex;
  flex-direction: column;
}
.team-grid .team-profile-link {
  box-sizing: border-box;
  width: 100%;
  height: 96px;
  min-height: 96px;
  margin: 0;
  padding: 14px 42px 14px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-top: 2px solid var(--brand-gold) !important;
  background-color: var(--button-black);
  background-image: linear-gradient(110deg, var(--button-black), var(--button-black-deep));
}
.team-grid .team-profile-link h2,
.team-grid .team-profile-link h3 {
  width: 100%;
  text-align: center;
}
.team-grid .team-profile-link h2 {
  margin: 0;
  line-height: 1.12;
}
.team-grid .team-profile-link h3 {
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
}
.team-grid .team-profile-link:hover,
.team-grid .team-profile-link:focus-visible {
  border-top-color: var(--brand-gold-bright) !important;
  background-color: var(--button-black-hover);
  background-image: linear-gradient(110deg, var(--button-black-hover), var(--button-black-hover-deep));
}

/* Wave 11.8: smooth marble background treatment.
   Use a freshly deblocked 4K lossless master and avoid fixed-background GPU tiling,
   which can produce visible dark rectangular artifacts in some browsers. */
body.home-background,
body.inner-background {
  background-attachment: scroll !important;
  image-rendering: auto;
}

body.home-background {
  background-image:
    radial-gradient(
      ellipse at 50% 50%,
      rgba(0, 0, 0, .72) 0%,
      rgba(0, 0, 0, .64) 24%,
      rgba(0, 0, 0, .42) 43%,
      rgba(0, 0, 0, .18) 64%,
      rgba(0, 0, 0, .04) 82%,
      rgba(0, 0, 0, 0) 100%
    ),
    url('marble-smooth.png') !important;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

body.inner-background {
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .80) 50%, rgba(0, 0, 0, .82) 100%),
    url('marble-smooth.png') !important;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Wave 11.9: unify the marble rendering approach across all pages.
   Render the background on a fixed pseudo-element instead of directly on the body.
   This matches the smooth look the user preferred on the Our Team page and avoids
   browser tiling/compression artifacts that were still visible on some other pages. */
body.home-background,
body.inner-background {
  position: relative;
  isolation: isolate;
  background: var(--black) !important;
}

body.home-background::before,
body.inner-background::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
}

body.home-background::before {
  background-image:
    radial-gradient(
      ellipse at 50% 50%,
      rgba(0, 0, 0, .72) 0%,
      rgba(0, 0, 0, .64) 24%,
      rgba(0, 0, 0, .42) 43%,
      rgba(0, 0, 0, .18) 64%,
      rgba(0, 0, 0, .04) 82%,
      rgba(0, 0, 0, 0) 100%
    ),
    url('marble-smooth.png');
}

body.inner-background::before {
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .80) 50%, rgba(0, 0, 0, .82) 100%),
    url('marble-smooth.png');
}

/* Wave 11.10: keep the Home page exactly on its clear Wave 11.8 treatment,
   while every inner page uses one identical smooth fixed marble layer. */
body.home-background {
  position: static;
  isolation: auto;
  background-image:
    radial-gradient(
      ellipse at 50% 50%,
      rgba(0, 0, 0, .72) 0%,
      rgba(0, 0, 0, .64) 24%,
      rgba(0, 0, 0, .42) 43%,
      rgba(0, 0, 0, .18) 64%,
      rgba(0, 0, 0, .04) 82%,
      rgba(0, 0, 0, 0) 100%
    ),
    url('marble-smooth.png') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
}

body.home-background::before {
  content: none !important;
  display: none !important;
}

body.inner-background {
  position: relative;
  isolation: isolate;
  background: var(--black) !important;
}

body.inner-background::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .80) 50%, rgba(0, 0, 0, .82) 100%),
    url('marble-smooth.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
}

/* Wave 11.11: give the fixed footer a little more breathing room on Our Team. */
body.inner-background .team-grid {
  transform: translateY(-14px);
}

@media (max-width: 900px) {
  body.inner-background .team-grid {
    transform: none;
  }
}

/* Wave 11.12: mobile-only polish pass.
   Desktop (901px+) is intentionally untouched. */
@media (max-width: 900px) {
  html {
    scroll-padding-top: 112px;
    -webkit-text-size-adjust: 100%;
  }

  body {
    min-width: 0;
    overflow-x: hidden;
    overscroll-behavior-x: none;
  }

  a,
  button {
    -webkit-tap-highlight-color: transparent;
  }

  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
  }

  .home,
  .page {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  .page-heading {
    width: 100%;
    max-width: 720px;
    margin-inline: auto;
  }

  .page-heading p {
    max-width: 92%;
  }

  .team-grid {
    width: 100%;
  }

  .gallery-carousel-section,
  .gallery-carousel,
  .gallery-track {
    min-width: 0;
  }

  /* Let touch users naturally swipe the horizontal gallery while still being
     able to move vertically through a page with an angled gesture. */
  .gallery-carousel,
  .gallery-track,
  .gallery-card,
  .gallery-image,
  .gallery-image img {
    touch-action: pan-x pan-y pinch-zoom;
  }

  .gallery-carousel {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
  }

  .carousel-button,
  .button,
  .nav-team-toggle {
    min-height: 44px;
  }

  .footer-link {
    min-height: 40px;
    padding-block: 4px;
  }
}

@media (max-width: 620px) {
  :root {
    --mobile-inline: max(16px, env(safe-area-inset-left));
  }

  body {
    font-size: 16px;
  }

  .site-header {
    min-height: 0;
    height: auto;
    padding:
      max(10px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      8px
      max(12px, env(safe-area-inset-left));
    gap: 7px;
    align-items: center;
    background: rgba(9, 10, 9, .985);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .brand {
    width: 100%;
    justify-content: center;
  }

  .brand img {
    width: min(86vw, 348px);
    max-width: 100%;
    max-height: 62px;
    object-position: center;
  }

  /* Four equal navigation zones keep the mobile header balanced at 320–430px. */
  .nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    gap: 0;
    align-items: stretch;
  }

  .nav > a,
  .nav > .nav-item {
    min-width: 0;
    width: 100%;
    justify-content: center;
  }

  .nav > a,
  .nav-link {
    min-height: 44px;
    padding: 0 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(9px, 2.65vw, 10.5px);
    line-height: 1.15;
    letter-spacing: .075em;
    text-align: center;
    white-space: nowrap;
  }

  .nav-team-row {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }

  .nav-team-row .nav-link {
    flex: 0 1 auto;
    padding-left: 1px;
    padding-right: 0;
  }

  .nav-team-toggle {
    width: 28px;
    min-width: 28px;
    height: 44px;
    margin-left: -1px;
    padding: 6px;
  }

  .nav-dropdown {
    top: calc(100% + 2px);
    left: 50%;
    min-width: 154px;
    padding: 6px;
    border-radius: 5px;
  }

  .nav-dropdown a {
    min-height: 44px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    font-size: 10px;
  }

  .home,
  .page {
    padding:
      24px
      max(16px, env(safe-area-inset-right))
      calc(32px + env(safe-area-inset-bottom))
      max(16px, env(safe-area-inset-left));
  }

  .home {
    min-height: calc(100dvh - 120px);
    place-items: center;
  }

  .home-content {
    width: min(100%, 520px);
    margin-top: 0;
  }

  .home-brandmark {
    width: clamp(100px, 29vw, 128px);
    margin-bottom: 9px;
  }

  .home-company-name,
  .page-heading .eyebrow {
    font-size: 10px;
    letter-spacing: .25em;
  }

  .home h1 {
    font-size: clamp(54px, 18vw, 76px);
    line-height: .92;
  }

  .page-heading h1 {
    font-size: clamp(42px, 13vw, 58px);
    line-height: 1;
  }

  .gold-rule {
    width: 48px;
  }

  .page-heading .gold-rule {
    margin-top: 12px;
    margin-bottom: 14px;
  }

  .page-heading p {
    max-width: 94%;
    margin-bottom: 20px;
    font-size: 13px;
    line-height: 1.5;
  }

  .home-tagline {
    max-width: 92%;
    margin-inline: auto;
    margin-bottom: 20px;
    font-size: clamp(15px, 4.3vw, 17px);
    line-height: 1.42;
  }

  .home-actions {
    flex-wrap: nowrap;
    gap: 9px;
    max-width: 350px;
    margin-inline: auto;
  }

  .home-actions .button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 46px;
    padding: 11px 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    line-height: 1.15;
  }

  /* Team cards: one comfortable column with phone-sized portrait geometry. */
  .team-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 430px;
    margin-inline: auto;
  }

  .team-photo {
    flex-basis: auto;
    height: clamp(285px, 84vw, 350px);
  }

  .team-grid .team-profile-link {
    min-height: 88px;
    height: auto;
    padding: 13px 40px 13px 16px;
  }

  .team-info h2 {
    font-size: clamp(25px, 8vw, 29px);
  }

  .team-info h3 {
    font-size: 10px;
    white-space: normal;
  }

  .team-profile-link::after {
    right: 14px;
  }

  /* Gallery: keep one strong card in view, with a hint of the next card and
     true native horizontal swipe support. */
  .gallery-carousel-section {
    width: calc(100% + 8px);
    margin-inline: -4px;
  }

  .gallery-carousel-toolbar {
    margin: 0 4px 8px;
    gap: 10px;
  }

  .gallery-swipe-hint {
    font-size: 8px;
    letter-spacing: .10em;
  }

  .gallery-controls {
    gap: 6px;
  }

  .carousel-button {
    width: 44px;
    height: 44px;
    padding: 10px;
  }

  .gallery-carousel {
    padding: 3px 4px 12px;
    scroll-padding-inline: 4px;
  }

  .gallery-track {
    gap: 12px;
  }

  .gallery-carousel .gallery-card {
    flex: 0 0 min(84vw, 360px);
    max-width: none;
  }

  .gallery-image {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Bio placeholders stay readable and don't feel like desktop cards shrunk down. */
  .bio-page {
    width: 100%;
  }

  .bio-placeholder {
    width: 100%;
    max-width: 520px;
    margin: 28px auto 0;
    padding: 26px 18px;
  }

  .bio-placeholder p {
    font-size: 14px;
    line-height: 1.6;
  }

  .bio-placeholder .button {
    min-height: 46px;
    padding-inline: 18px;
  }

  .site-footer {
    width: 100%;
    gap: 2px;
    padding:
      14px
      max(14px, env(safe-area-inset-right))
      max(16px, env(safe-area-inset-bottom))
      max(14px, env(safe-area-inset-left));
  }

  .footer-link {
    width: fit-content;
    max-width: 100%;
    min-height: 38px;
    gap: 8px;
    justify-content: center;
    font-size: 10px;
    line-height: 1.35;
    letter-spacing: .035em;
    text-align: center;
  }

  .footer-icon {
    width: 15px;
    height: 15px;
    flex-basis: 15px;
  }
}

/* Extra-narrow phones: preserve a single-line nav without clipping. */
@media (max-width: 350px) {
  .site-header {
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
  }

  .brand img {
    width: min(90vw, 310px);
  }

  .nav > a,
  .nav-link {
    font-size: 8.5px;
    letter-spacing: .045em;
  }

  .nav-team-toggle {
    width: 24px;
    min-width: 24px;
    padding: 5px;
  }

  .home-actions {
    gap: 7px;
  }

  .home-actions .button {
    font-size: 9px;
    letter-spacing: .085em;
  }

  .footer-link {
    font-size: 9.5px;
  }
}

/* Landscape phones need a shallower header so content is not squeezed out. */
@media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {
  .site-header {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding-top: max(7px, env(safe-area-inset-top));
    padding-bottom: 7px;
  }

  .brand {
    width: min(34vw, 250px);
    flex: 0 0 auto;
  }

  .brand img {
    width: 100%;
    max-height: 54px;
  }

  .nav {
    flex: 1 1 auto;
  }

  .home,
  .page {
    padding-top: 18px;
    padding-bottom: 24px;
  }

  .home {
    min-height: auto;
  }

  .home-brandmark {
    width: 82px;
  }

  .home h1 {
    font-size: 52px;
  }
}

/* Touch devices should use active feedback rather than sticky hover states. */
@media (hover: none) and (pointer: coarse) {
  .button:active,
  .carousel-button:active,
  .team-profile-link:active,
  .nav-dropdown a:active {
    background-color: var(--button-black-hover);
    background-image: linear-gradient(110deg, var(--button-black-hover), var(--button-black-hover-deep));
    border-color: var(--brand-gold-bright);
  }

  .team-profile-link:hover {
    transform: none;
  }
}

/* Wave 11.13: phone/tablet-only visual corrections.
   Everything in this block is <= 900px, so the established desktop layout remains unchanged. */
@media (max-width: 900px) {
  /* Keep page titles as crisp white display type, matching the desktop presentation. */
  body.inner-background .page-heading h1 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .72);
  }

  /* Give the contact footer its own dark surface so white contact text never lands
     on a pale section of the marble background. */
  body .site-footer {
    color: #f7f7f4 !important;
    background: rgba(5, 5, 5, .94) !important;
    border-top: 1px solid rgba(223, 180, 4, .24);
    box-shadow: 0 -10px 28px rgba(0, 0, 0, .20);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  body .site-footer .footer-link,
  body .site-footer .footer-link:visited {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: none;
  }

  /* Scale the team cards to phone/tablet dimensions while preserving the original
     square source-photo ratio instead of forcing a tall crop. */
  .team-grid {
    max-width: min(82vw, 320px);
  }

  .team-grid .team-card {
    width: 100%;
    max-width: 320px;
    margin-inline: auto;
  }

  .team-photo {
    flex: 0 0 auto !important;
    width: 100%;
    height: auto !important;
    aspect-ratio: 1 / 1;
  }

  .team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }

  .team-grid .team-profile-link {
    min-height: 78px;
    height: auto;
    padding-block: 11px;
  }

  .team-grid .team-profile-link h2 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  /* Mobile gallery: each photograph now keeps its own original aspect ratio.
     Cards shrink around the actual image rather than stretching every photo into
     one artificial 4:3 frame.  Max dimensions keep portrait shots from consuming
     the whole screen. */
  .gallery-carousel-section {
    width: 100%;
    margin-inline: 0;
  }

  .gallery-carousel {
    width: 100%;
    padding: 5px 14px 14px;
    scroll-padding-inline: 14px;
  }

  .gallery-track {
    align-items: center;
    gap: 16px;
  }

  .gallery-carousel .gallery-card,
  .gallery-carousel .gallery-card[data-carousel-clone="true"] {
    flex: 0 0 auto !important;
    width: fit-content !important;
    max-width: min(78vw, 360px) !important;
  }

  .gallery-carousel .gallery-image {
    display: block;
    width: fit-content !important;
    max-width: min(78vw, 360px) !important;
    height: auto !important;
    aspect-ratio: auto !important;
    background: #080808;
  }

  .gallery-carousel .gallery-image img {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: min(78vw, 360px) !important;
    max-height: min(52vh, 320px) !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  /* Keep the carousel easy to control by touch, with enough breathing room around
     the controls and without page-level horizontal overflow. */
  .gallery-carousel-toolbar {
    padding-inline: 2px;
  }

  .gallery-carousel {
    touch-action: pan-x pan-y pinch-zoom;
    overscroll-behavior-x: contain;
  }
}

@media (max-width: 620px) {
  .team-grid {
    gap: 22px;
    max-width: min(80vw, 300px);
  }

  .team-grid .team-card {
    max-width: 300px;
  }

  .team-info h2 {
    font-size: clamp(23px, 7.2vw, 27px);
  }

  .gallery-carousel-toolbar {
    margin-inline: 0;
  }

  .gallery-swipe-hint {
    max-width: 48vw;
    line-height: 1.35;
  }

  .gallery-carousel .gallery-card,
  .gallery-carousel .gallery-card[data-carousel-clone="true"],
  .gallery-carousel .gallery-image,
  .gallery-carousel .gallery-image img {
    max-width: min(76vw, 300px) !important;
  }

  .gallery-carousel .gallery-image img {
    max-height: min(46vh, 290px) !important;
  }

  body .site-footer {
    margin-top: 18px;
    padding-top: 16px;
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }
}

/* Large phones in landscape need a compact version of the same fixes even when
   their CSS width is above the portrait breakpoint. */
@media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {
  .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 600px;
    gap: 16px;
  }

  .team-grid .team-card {
    max-width: 280px;
  }

  .gallery-carousel .gallery-card,
  .gallery-carousel .gallery-card[data-carousel-clone="true"],
  .gallery-carousel .gallery-image,
  .gallery-carousel .gallery-image img {
    max-width: min(42vw, 300px) !important;
  }

  .gallery-carousel .gallery-image img {
    max-height: min(50vh, 245px) !important;
  }
}

/* Wave 11.14: mobile-only background/footer/title refinements.
   Desktop (901px+) is intentionally untouched. */
@media (max-width: 900px) {
  html {
    min-height: 100%;
    background: #090a09;
  }

  body.home-background,
  body.inner-background {
    position: relative !important;
    isolation: isolate !important;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    background: #090a09 !important;
  }

  /* Use a vertically extended marble master on phones/tablets. The pseudo-layer
     grows with the entire document, so long pages never expose a white gap. */
  body.home-background::before,
  body.inner-background::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    min-height: 100% !important;
    z-index: -1 !important;
    pointer-events: none;
    transform: none !important;
    backface-visibility: visible !important;
    will-change: auto !important;
    background-position: center top, center top !important;
    background-repeat: no-repeat, repeat-y !important;
    background-size: 100% 100%, 100% auto !important;
  }

  body.home-background::before {
    background-image:
      radial-gradient(
        ellipse at 50% 34%,
        rgba(0, 0, 0, .72) 0%,
        rgba(0, 0, 0, .64) 24%,
        rgba(0, 0, 0, .42) 43%,
        rgba(0, 0, 0, .18) 64%,
        rgba(0, 0, 0, .04) 82%,
        rgba(0, 0, 0, 0) 100%
      ),
      url('marble-mobile-extended.png') !important;
  }

  body.inner-background::before {
    background-image:
      linear-gradient(180deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .80) 50%, rgba(0, 0, 0, .82) 100%),
      url('marble-mobile-extended.png') !important;
  }

  /* True bottom-of-page footer behavior on mobile: short pages fill the viewport,
     long pages grow naturally, and the footer follows the content. */
  body.home-background > .site-header,
  body.inner-background > .site-header {
    flex: 0 0 auto;
  }

  body.home-background > .home,
  body.inner-background > .page {
    flex: 1 0 auto;
  }

  body.home-background > .site-footer,
  body.inner-background > .site-footer {
    position: static !important;
    inset: auto !important;
    flex: 0 0 auto;
    margin-top: auto !important;
  }

  /* Match the desktop/main version's white Welcome title. */
  body.home-background .home h1 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .58);
  }
}

@media (max-width: 620px) {
  body.home-background > .home {
    min-height: 0 !important;
  }
}

/* Wave 11.15: Home-page footer contrast refinement.
   Desktop only: gently dim the marble directly behind the contact details.
   Mobile retains the stronger Wave 11.13 footer surface for readability. */
@media (min-width: 901px) {
  body.home-background .site-footer {
    background: rgba(5, 5, 5, .34);
    border-top: 1px solid rgba(223, 180, 4, .12);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .10);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 7px 12px;
  }
}

/* Wave 11.16: queued refinements.
   - Home footer dimming now reaches the viewport edge without moving its text.
   - Desktop header logo is slightly larger for readability.
   Mobile header sizing remains exactly as established in Wave 11.15. */
@media (min-width: 901px) {
  /* Restore the Home footer's exact shared text geometry (same bottom position and
     zero added padding as every other desktop page).  A pseudo-layer supplies the
     dimming and extends through the final 12px to the bottom edge. */
  body.home-background .site-footer {
    bottom: 12px;
    padding: 0;
    background: transparent;
    border-top: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    isolation: isolate;
  }

  body.home-background .site-footer::before {
    content: "";
    position: absolute;
    top: -7px;
    right: 0;
    bottom: -12px;
    left: 0;
    z-index: -1;
    pointer-events: none;
    background: rgba(5, 5, 5, .34);
    border-top: 1px solid rgba(223, 180, 4, .12);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .10);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  /* Slight desktop-only increase. The mobile/tablet logo rules are untouched. */
  .site-header .brand img {
    width: clamp(345px, 33vw, 520px);
    max-height: 98px;
  }
}

/* Wave 11.19: About now mirrors the Our Team card system exactly.
   The shared team-grid/team-card/team-photo/team-profile-link classes supply the
   established size, placement, borders, button geometry, hover behavior, and
   responsive stacking. Only image focal treatment differs for the supplied
   portrait/landscape source photos. */
.about-card-photo img {
  object-fit: cover;
}
.about-card-photo--founder img {
  object-position: 50% 43%;
}
.about-card-photo--company img {
  object-position: 50% 50%;
}
.about-card-link h2 {
  margin: 0 !important;
}

/* The About dropdown uses the exact same navigation component as Our Team.
   Give the longer labels enough room without changing the Team menu geometry. */
.nav-dropdown-about {
  min-width: 190px;
}

/* Destination sections for the two About cards/dropdown links. These are ready
   for the final copy and remain scrollable as that content grows. */
.about-details-body {
  overflow-y: auto !important;
}
.about-details-page {
  height: auto !important;
  min-height: 100vh !important;
  overflow: visible !important;
  padding-bottom: 56px;
}
.about-detail-section {
  width: 100%;
  min-height: calc(100vh - 104px);
  padding-top: 12px;
  scroll-margin-top: 116px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.about-detail-section + .about-detail-section {
  padding-top: 42px;
}
.about-detail-content {
  width: min(100%, 920px);
  min-height: 1px;
  margin: 0 auto;
}
.about-details-body .site-footer {
  position: static;
  margin-top: 24px;
  padding-bottom: 18px;
}

@media (max-width: 900px) {
  .about-card-photo--founder img {
    object-position: 50% 40%;
  }
  .about-card-photo--company img {
    object-position: 50% 50%;
  }
  .about-detail-section {
    min-height: calc(100dvh - 120px);
    padding-top: 8px;
    scroll-margin-top: 132px;
  }
  .about-details-body .site-footer {
    margin-top: 18px !important;
  }
}

@media (max-width: 620px) {
  /* Two dropdown toggles now share the phone nav. Keep both tap targets usable
     while preserving the established one-line navigation. */
  .nav-team-toggle {
    width: 22px;
    min-width: 22px;
    padding-inline: 4px;
  }
  .nav-dropdown-about {
    min-width: 174px;
  }
  .about-card-link h2 {
    font-size: clamp(22px, 6.9vw, 27px);
  }
}

@media (max-width: 350px) {
  .nav-team-toggle {
    width: 20px;
    min-width: 20px;
    padding-inline: 3px;
  }
  .nav > a,
  .nav-link {
    font-size: 8px;
    letter-spacing: .035em;
  }
}

/* Wave 11.20: queued refinements */

/* Desktop dropdown arrows now visually follow the dropdown itself: up while
   hovered/focused/open, and back down when the menu closes. Touch/mobile keeps
   the existing click-to-toggle behavior. */
@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  .nav-item:hover .nav-team-toggle,
  .nav-item:focus-within .nav-team-toggle {
    transform: rotate(180deg);
    color: var(--brand-gold);
  }
}

/* About cards use the exact same two-line action treatment as Our Team.
   Harry's source is portrait-oriented, so contain it inside the same square
   photo geometry instead of cropping him tightly. */
.about-card-link h2,
.about-card-link h3 {
  margin: 0;
}
.about-card-photo--founder {
  background: #e4e4e0;
}
.about-card-photo--founder img {
  object-fit: contain !important;
  object-position: center center !important;
  background: #e4e4e0;
}

/* Reusable long-form detail treatment. The image floats to the left on desktop,
   allowing future paragraphs to begin to its right and naturally continue below
   it as the copy grows. */
.bio-detail-body,
.about-details-body {
  overflow-y: auto !important;
}
.bio-detail-body .bio-page {
  width: min(100%, 1120px);
  max-width: 1120px;
  height: auto !important;
  min-height: 100vh !important;
  overflow: visible !important;
  padding-bottom: 54px;
}
.detail-story {
  width: min(100%, 1000px);
  margin: 28px auto 0;
  padding: 26px;
  text-align: left;
  color: var(--text);
  background: rgba(4, 4, 4, .48);
  border: 1px solid rgba(223, 180, 4, .56) !important;
  box-shadow: 0 14px 42px rgba(0, 0, 0, .24);
}
.detail-story::after {
  content: "";
  display: block;
  clear: both;
}
.detail-story-photo {
  float: left;
  width: clamp(285px, 31vw, 360px);
  aspect-ratio: 1 / 1;
  margin: 0 30px 20px 0;
  background: #e4e4e0;
  border: 2px solid #050505;
  box-shadow:
    0 0 0 1px var(--brand-gold),
    0 12px 32px rgba(0, 0, 0, .28);
  overflow: hidden;
}
.detail-story-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.detail-story-photo--founder img {
  object-fit: contain;
  object-position: center;
  background: #e4e4e0;
}
.detail-story-photo--practice img {
  object-position: center center;
}
.detail-story-copy {
  min-height: 210px;
}
.detail-story-copy p {
  margin: 2px 0 18px;
  color: #f0ede5;
  font-size: 14px;
  line-height: 1.78;
}
.detail-back-button {
  clear: both;
  display: table;
  margin-top: 22px;
}
.bio-detail-body .site-footer,
.about-details-body .site-footer {
  position: relative;
  inset: auto;
  margin-top: 18px;
  padding-bottom: 18px;
}

/* Footer social buttons stay out of the centered address/phone block on desktop.
   Their white -> gold interaction mirrors the existing footer links. */
.site-footer {
  position: fixed;
}
.footer-socials {
  position: absolute;
  left: max(18px, 4vw);
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.social-link {
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  color: #ffffff !important;
  -webkit-text-fill-color: currentColor !important;
  background: rgba(0, 0, 0, .28);
  border: 1px solid rgba(255, 255, 255, .20);
  border-radius: 50%;
  transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}
.social-link:hover,
.social-link:focus-visible {
  color: var(--brand-gold) !important;
  -webkit-text-fill-color: var(--brand-gold) !important;
  border-color: var(--brand-gold);
  background: rgba(0, 0, 0, .55);
  transform: translateY(-1px);
  outline: none;
}
.social-icon {
  width: 16px;
  height: 16px;
  display: block;
}
.social-link--facebook .social-icon {
  fill: currentColor;
  stroke: none;
}
.social-link--instagram .social-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.social-link--instagram .social-icon circle:last-child {
  fill: currentColor;
  stroke: none;
}

@media (max-width: 900px) {
  .bio-detail-body .bio-page,
  .about-details-page {
    padding-bottom: 34px;
  }
  .detail-story {
    width: min(100%, 680px);
    margin-top: 22px;
    padding: 20px;
  }
  .detail-story-photo {
    width: min(44vw, 300px);
    margin-right: 22px;
  }
  .detail-story-copy {
    min-height: 170px;
  }
  .bio-detail-body .site-footer,
  .about-details-body .site-footer {
    position: relative !important;
    margin-top: 12px !important;
  }
  .footer-socials {
    position: static;
    order: 3;
    align-self: flex-start;
    margin-top: 5px;
  }
  .social-link {
    width: 34px;
    height: 34px;
  }
  .social-icon {
    width: 17px;
    height: 17px;
  }
}

@media (max-width: 620px) {
  /* Exact same type sizing as the existing Our Team action cards. */
  .about-card-link h2 {
    font-size: clamp(25px, 8vw, 29px) !important;
  }
  .about-card-link h3 {
    font-size: 10px !important;
  }
  .detail-story {
    padding: 16px;
  }
  .detail-story-photo {
    float: none;
    width: min(100%, 320px);
    margin: 0 auto 20px;
  }
  .detail-story-copy {
    min-height: 0;
  }
  .detail-story-copy p {
    font-size: 14px;
    line-height: 1.65;
  }
  .detail-back-button {
    margin-top: 18px;
  }
}


/* Wave 11.21: standalone About detail pages, Community Impact, and viewport-fit layout. */
html, body { height: 100%; min-height: 100%; }
body { overflow: hidden !important; }

/* About and Team share one desktop card width so the two pages truly match. */
@media (min-width: 901px) {
  .team-grid { --shared-card-w: min(451px, calc((90vw - 36px) / 3)); max-width: none !important; justify-content: center; }
  body:not(.about-overview-body) .team-grid { grid-template-columns: repeat(2, var(--shared-card-w)) !important; }
  .about-card-grid { grid-template-columns: repeat(3, var(--shared-card-w)) !important; }
  .about-overview-page .team-grid, .about-overview-page .about-card-grid { transform: translateY(-14px); }
}

/* Harry fills his card completely again: a slightly lower focal point shows more
   of the original scene without any white/gray gutters outside the photograph. */
.about-card-photo--founder { background: #080808 !important; }
.about-card-photo--founder img { object-fit: cover !important; object-position: 50% 39% !important; background: transparent !important; transform: scale(1.001); }
.about-card-photo--community img { object-fit: cover !important; object-position: 50% 38% !important; }

/* Every standalone detail page uses the same image + copy geometry and remains
   inside the header/footer breathing room at desktop sizes. */
.standalone-detail-page {
  width: min(100%, 1120px) !important;
  max-width: 1120px !important;
  height: 100vh !important;
  min-height: 0 !important;
  padding: 122px 5vw 62px !important;
  overflow: hidden !important;
}
.standalone-detail-page .page-heading p { margin-bottom: 12px; }
.standalone-detail-card {
  width: min(100%, 960px) !important;
  height: 332px;
  margin: 10px auto 0 !important;
  padding: 18px !important;
  display: grid !important;
  grid-template-columns: 300px minmax(0, 1fr) !important;
  grid-template-rows: 1fr auto !important;
  column-gap: 24px;
  row-gap: 10px;
  overflow: hidden;
}
.standalone-detail-card::after { display: none !important; }
.standalone-detail-card .detail-story-photo {
  float: none !important;
  width: 300px !important;
  height: 250px !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  grid-row: 1 / 3;
  align-self: center;
}
.standalone-detail-card .detail-story-photo img { object-fit: cover !important; width: 100%; height: 100%; }
.standalone-detail-card .detail-story-photo--founder img { object-position: 50% 39% !important; background: transparent !important; }
.standalone-detail-card .detail-story-photo--practice img { object-position: center center !important; }
.standalone-detail-card .detail-story-photo--community img { object-position: center center !important; }
.standalone-detail-card .detail-story-copy {
  min-height: 0 !important;
  height: 250px;
  overflow: hidden;
  padding: 14px 16px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(223,180,4,.34);
}
.standalone-detail-card .detail-story-copy p { margin: 0 0 10px; font-size: 13px; line-height: 1.55; }
.standalone-detail-card .detail-back-button { clear: none !important; margin: 0 !important; justify-self: start; align-self: end; }
.impact-list-title { margin: 10px 0 6px; color: #fff; font-size: 19px; }
.impact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 5px; color: #f0ede5; font-size: 12px; line-height: 1.35; }
.impact-list a { color: var(--brand-gold-bright); text-decoration: none; }
.impact-list a:hover, .impact-list a:focus-visible { text-decoration: underline; }
.standalone-detail-body .site-footer { position: fixed !important; bottom: 12px !important; margin: 0 !important; padding: 0 !important; }

/* Keep all primary pages within a single desktop viewport. */
@media (min-width: 901px) {
  .about-overview-page, .bio-page, .about-details-page { height: 100vh !important; min-height: 0 !important; overflow: hidden !important; }
}

/* Phone/tablet: no vertical page scrollbar. Use compact card grids and a
   side-by-side detail presentation so every page remains one viewport tall. */
@media (max-width: 900px) {
  html, body { height: 100dvh !important; min-height: 100dvh !important; overflow: hidden !important; }
  body.home-background, body.inner-background { display: block !important; min-height: 100dvh !important; overflow: hidden !important; }
  body.home-background::before, body.inner-background::before { position: fixed !important; min-height: 100dvh !important; }
  .site-header { position: fixed !important; top: 0; left: 0; right: 0; z-index: 20; margin: 0 !important; }
  body .site-footer { position: fixed !important; left: 0; right: 0; bottom: 0; z-index: 15; margin: 0 !important; padding: 8px 12px max(8px, env(safe-area-inset-bottom)) !important; gap: 3px !important; }
  body .site-footer .footer-link { font-size: 8px !important; line-height: 1.2 !important; }
  .footer-socials { position: absolute !important; left: 10px !important; bottom: max(8px, env(safe-area-inset-bottom)) !important; margin: 0 !important; }
  .social-link { width: 26px !important; height: 26px !important; }
  .social-icon { width: 14px !important; height: 14px !important; }
  .page, .home { height: 100dvh !important; min-height: 0 !important; overflow: hidden !important; padding-top: 116px !important; padding-bottom: 78px !important; }
  .page-heading .eyebrow { margin-bottom: 5px !important; font-size: 8px !important; }
  .page-heading h1 { font-size: clamp(34px, 10vw, 46px) !important; line-height: .95 !important; }
  .page-heading .gold-rule { margin: 8px auto 6px !important; }
  .page-heading p { margin-bottom: 10px !important; font-size: 10px !important; }

  .team-grid { transform: none !important; gap: 8px !important; max-width: none !important; width: 100% !important; margin: 0 auto !important; justify-content: center; }
  body:not(.about-overview-body) .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; max-width: 620px !important; }
  .about-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; max-width: 760px !important; }
  .team-grid .team-card { max-width: none !important; width: 100% !important; min-width: 0; }
  .team-photo { width: 100% !important; height: clamp(92px, 24vh, 205px) !important; aspect-ratio: auto !important; }
  .team-grid .team-profile-link { min-height: 54px !important; height: 54px !important; padding: 6px 10px !important; gap: 2px !important; }
  .team-grid .team-profile-link h2, .about-card-link h2 { font-size: clamp(13px, 4.1vw, 21px) !important; line-height: 1.0 !important; }
  .team-grid .team-profile-link h3, .about-card-link h3 { font-size: clamp(6px, 1.8vw, 9px) !important; line-height: 1.05 !important; white-space: normal !important; }
  .team-profile-link::after { display: none !important; }

  .standalone-detail-page { height: 100dvh !important; padding: 116px 12px 78px !important; }
  .standalone-detail-card { width: min(100%, 720px) !important; height: calc(100dvh - 260px) !important; min-height: 300px; max-height: 440px; margin: 6px auto 0 !important; padding: 10px !important; grid-template-columns: minmax(118px, 38%) minmax(0, 1fr) !important; grid-template-rows: 1fr auto !important; column-gap: 10px !important; row-gap: 6px !important; }
  .standalone-detail-card .detail-story-photo { width: 100% !important; height: 100% !important; min-height: 0 !important; max-height: none !important; grid-row: 1 / 3; }
  .standalone-detail-card .detail-story-copy { height: 100% !important; min-height: 0 !important; padding: 8px 9px !important; overflow: hidden !important; }
  .standalone-detail-card .detail-story-copy p { font-size: clamp(9px, 2.7vw, 12px) !important; line-height: 1.35 !important; margin: 0 0 6px !important; }
  .standalone-detail-card .detail-back-button { padding: 7px 10px !important; font-size: 8px !important; }
  .impact-list-title { font-size: clamp(11px, 3.3vw, 15px) !important; margin: 6px 0 4px !important; }
  .impact-list { gap: 3px !important; font-size: clamp(8px, 2.25vw, 10px) !important; line-height: 1.22 !important; }
  .standalone-detail-body .site-footer { bottom: 0 !important; }

  /* Gallery also stays inside the viewport; images shrink with available height. */
  .gallery-carousel-section { margin-top: 0 !important; }
  .gallery-carousel .gallery-image img { max-height: min(34vh, 245px) !important; }
  .gallery-carousel-toolbar { margin-bottom: 3px !important; }
}

@media (max-width: 620px) {
  .site-header { min-height: 98px !important; padding: 9px 4vw 7px !important; gap: 5px !important; }
  .brand img { max-height: 48px !important; }
  .nav { gap: 4px !important; }
  .nav > a, .nav-link { font-size: 8px !important; }
  .nav-team-toggle { width: 18px !important; min-width: 18px !important; height: 24px !important; padding: 3px !important; }
  .nav-dropdown { top: calc(100% + 0px) !important; }
  .page, .home { padding-top: 104px !important; padding-bottom: 72px !important; }
  .team-photo { height: clamp(78px, 20vh, 145px) !important; }
  .team-grid .team-profile-link { min-height: 46px !important; height: 46px !important; }
  .standalone-detail-page { padding: 104px 8px 72px !important; }
  .standalone-detail-card { height: calc(100dvh - 236px) !important; min-height: 270px; grid-template-columns: minmax(106px, 38%) minmax(0, 1fr) !important; }
}

@media (max-height: 650px) and (max-width: 900px) {
  .page-heading .eyebrow, .page-heading .gold-rule { display: none !important; }
  .page-heading h1 { font-size: 31px !important; }
  .page-heading p { margin: 2px auto 6px !important; }
  .team-photo { height: clamp(64px, 17vh, 105px) !important; }
  .team-grid .team-profile-link { min-height: 40px !important; height: 40px !important; }
  .standalone-detail-card { height: calc(100dvh - 206px) !important; min-height: 230px; }
}


/* Wave 11.21 final fit/contrast corrections. */
body.inner-background .page-heading h1,
.team-grid .team-profile-link h2 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
}

@media (min-width: 901px) {
  .about-overview-page .page-heading p,
  .team-overview-page .page-heading p { margin-bottom: 10px !important; }
  .about-overview-page .team-grid,
  .team-overview-page .team-grid { transform: translateY(-14px) !important; }
}

@media (max-width: 900px) {
  body.home-background > .site-footer,
  body.inner-background > .site-footer {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    inset: auto 0 0 0 !important;
    margin: 0 !important;
    z-index: 30 !important;
    padding: 8px 12px max(8px, env(safe-area-inset-bottom)) !important;
  }
  .standalone-detail-card {
    grid-template-rows: auto 1fr !important;
  }
  .standalone-detail-card .detail-story-photo {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    align-self: start !important;
  }
  .standalone-detail-card .detail-story-copy {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
  }
  .standalone-detail-card .detail-back-button {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: start !important;
    justify-self: start !important;
    margin-top: 6px !important;
  }
  .standalone-detail-card .detail-story-photo--community img {
    object-fit: contain !important;
    object-position: center !important;
    background: #090909 !important;
  }
}

@media (max-width: 620px) and (max-height: 700px) {
  .standalone-detail-card {
    height: calc(100dvh - 302px) !important;
    min-height: 0 !important;
  }
}


/* Wave 11.22: typography cleanup, updated community image, gallery addition,
   and tighter card/detail alignment. */
html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body,
button,
input,
textarea,
select {
  font-synthesis-weight: none;
}

/* Keep the non-home page heading system aligned to the Gallery page. */
body.inner-background .page-heading .eyebrow {
  margin-bottom: 15px !important;
  font-size: 11px !important;
  letter-spacing: .35em !important;
}
body.inner-background .page-heading h1 {
  font-size: clamp(44px, 5vw, 68px) !important;
  line-height: .96 !important;
  margin: 0 !important;
}
body.inner-background .page-heading .gold-rule {
  margin: 16px auto 10px !important;
}
body.inner-background .page-heading p {
  margin: 0 auto 26px !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: #c9c5bb !important;
}

/* Match About / Our Team spacing to Gallery by lowering the cards slightly. */
@media (min-width: 901px) {
  .about-overview-page .team-grid,
  .about-overview-page .about-card-grid,
  .team-overview-page .team-grid {
    transform: translateY(4px) !important;
  }
}

/* Keep the Community Impact card image framed so every face stays visible. */
.about-card-photo--community {
  background: #090909 !important;
}
.about-card-photo--community img {
  object-fit: contain !important;
  object-position: center center !important;
  background: #090909 !important;
}

/* Refine all five destination pages: larger photo, larger smoother copy,
   and a taller frame that sits closer to the footer without creating a page
   scrollbar. */
@media (min-width: 901px) {
  .standalone-detail-page {
    padding-bottom: 60px !important;
  }
  .standalone-detail-card {
    width: min(100%, 1004px) !important;
    height: 372px !important;
    margin: 12px auto 0 !important;
    padding: 20px !important;
    grid-template-columns: 340px minmax(0, 1fr) !important;
    column-gap: 28px !important;
    row-gap: 10px !important;
  }
  .standalone-detail-card .detail-story-photo {
    width: 340px !important;
    height: 292px !important;
    align-self: center !important;
  }
  .standalone-detail-card .detail-story-copy {
    height: 292px !important;
    padding: 18px 20px !important;
    background: rgba(0,0,0,.34) !important;
  }
  .standalone-detail-card .detail-story-copy p {
    margin: 0 0 12px !important;
    font-size: 15px !important;
    line-height: 1.72 !important;
    color: #f2eee6 !important;
  }
  .impact-list-title {
    margin: 12px 0 8px !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
  }
  .impact-list {
    gap: 8px !important;
    font-size: 14px !important;
    line-height: 1.42 !important;
  }
}

/* Preserve the approved people photo cleanly on the About card and detail page. */
.standalone-detail-card .detail-story-photo--community {
  background: #090909 !important;
}
.standalone-detail-card .detail-story-photo--community img {
  object-fit: contain !important;
  object-position: center center !important;
  background: #090909 !important;
}

/* Slightly larger photo treatment on tablets and phones while staying inside a
   single-screen layout. */
@media (max-width: 900px) {
  .about-overview-page .team-grid,
  .team-overview-page .team-grid {
    transform: translateY(2px) !important;
  }
  body.inner-background .page-heading .eyebrow {
    margin-bottom: 6px !important;
    font-size: 8px !important;
  }
  body.inner-background .page-heading h1 {
    font-size: clamp(34px, 10vw, 46px) !important;
  }
  body.inner-background .page-heading .gold-rule {
    margin: 8px auto 6px !important;
  }
  body.inner-background .page-heading p {
    margin: 0 auto 12px !important;
    font-size: 10px !important;
  }
  .standalone-detail-card {
    width: min(100%, 760px) !important;
    height: calc(100dvh - 248px) !important;
  }
  .standalone-detail-card .detail-story-photo {
    aspect-ratio: 1 / 1 !important;
  }
  .standalone-detail-card .detail-story-copy {
    padding: 10px 11px !important;
  }
  .standalone-detail-card .detail-story-copy p {
    font-size: clamp(10px, 2.7vw, 13px) !important;
    line-height: 1.42 !important;
  }
  .impact-list-title {
    font-size: clamp(12px, 3.3vw, 16px) !important;
  }
  .impact-list {
    font-size: clamp(9px, 2.3vw, 11px) !important;
    line-height: 1.28 !important;
  }
}

@media (max-width: 620px) {
  .standalone-detail-card {
    height: calc(100dvh - 228px) !important;
  }
}


/* Wave 11.25: queued detail-page, email, crop, and typography refinements. */

/* Inner-site typography: favor solid text fills and normal rasterization over
   gradient-clipped glyphs, which can look fuzzy at smaller sizes. Home remains untouched. */
body.inner-background,
body.inner-background button,
body.inner-background a {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}
body.inner-background .page-heading .eyebrow,
body.inner-background .team-info h3 {
  background-image: none !important;
  background: none !important;
  color: var(--brand-gold) !important;
  -webkit-text-fill-color: var(--brand-gold) !important;
  text-shadow: none !important;
}
body.inner-background .nav a.active,
body.inner-background .nav a:hover,
body.inner-background .nav a:focus-visible {
  background-image: none !important;
  background: none !important;
  color: var(--brand-gold) !important;
  -webkit-text-fill-color: var(--brand-gold) !important;
}

/* Community Impact uses the user's exact source photo with a non-generative crop.
   Fill the existing image frames; keep the focal point high so lower-image content,
   rather than faces, is what gets trimmed. */
.about-card-photo--community {
  background: #090909 !important;
}
.about-card-photo--community img,
.standalone-detail-card .detail-story-photo--community img {
  object-fit: cover !important;
  object-position: 50% 0% !important;
  background: transparent !important;
}

/* Team-card email shortcuts. They sit independently over the portrait so the
   existing profile action area remains unchanged. */
.team-grid .team-card {
  position: relative;
}
.team-email-link {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: rgba(8, 8, 8, .76) !important;
  border: 1px solid rgba(223, 180, 4, .72);
  border-radius: 50%;
  box-shadow: 0 4px 15px rgba(0,0,0,.28);
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}
.team-email-link svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.team-email-link:hover,
.team-email-link:focus-visible {
  color: var(--brand-gold-bright) !important;
  -webkit-text-fill-color: var(--brand-gold-bright) !important;
  background: rgba(8, 8, 8, .94) !important;
  border-color: var(--brand-gold-bright);
  transform: translateY(-1px);
  outline: none;
}
.team-email-link:focus-visible {
  box-shadow: 0 0 0 2px #090909, 0 0 0 4px var(--brand-gold-bright);
}

/* Desktop detail pages now begin at the same vertical position as About Us.
   The top edge is never pulled upward. The frame grows only downward until its
   bottom aligns with the bottom of the Team cards at the same viewport. */
@media (min-width: 901px) {
  .standalone-detail-page {
    padding-top: 138px !important;
    padding-bottom: 60px !important;
  }
  .standalone-detail-card {
    width: min(100%, 1004px) !important;
    height: 394px !important;
    margin: 12px auto 0 !important;
    padding: 20px !important;
    grid-template-columns: 340px minmax(0, 1fr) !important;
    grid-template-rows: 292px minmax(0, 1fr) !important;
    column-gap: 28px !important;
    row-gap: 10px !important;
  }
  .standalone-detail-card .detail-story-photo {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 340px !important;
    height: 292px !important;
    align-self: start !important;
    margin: 0 !important;
  }
  .standalone-detail-card .detail-story-copy {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    height: auto !important;
    min-height: 0 !important;
    align-self: stretch !important;
    overflow: hidden !important;
    padding: 20px 22px !important;
    background: rgba(0,0,0,.34) !important;
  }
  .standalone-detail-card .detail-back-button {
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    align-self: end !important;
    margin: 0 !important;
  }
  .standalone-detail-card .detail-story-copy p {
    margin: 0 0 16px !important;
    color: #cbc7be !important;
    font-size: 16px !important;
    line-height: 1.68 !important;
    font-weight: 400 !important;
    text-shadow: none !important;
  }
  .impact-list-title {
    margin: 15px 0 10px !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
    font-family: Inter, Arial, sans-serif !important;
    font-size: 22px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
  }
  .impact-list {
    gap: 8px !important;
    color: #d8d4ca !important;
    font-size: 14px !important;
    line-height: 1.42 !important;
  }
  .impact-list strong {
    color: #f1eee7;
  }
}

@media (max-width: 900px) {
  .team-email-link {
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
  }
  .team-email-link svg {
    width: 16px;
    height: 16px;
  }
  .standalone-detail-card .detail-story-copy p {
    color: #cbc7be !important;
    font-size: clamp(11px, 2.8vw, 14px) !important;
    line-height: 1.48 !important;
  }
  .impact-list-title {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
    font-family: Inter, Arial, sans-serif !important;
    font-weight: 600 !important;
    text-shadow: none !important;
  }
}

/* Wave 11.25 fit correction: use the same vertical band as the Team cards on
   desktop, and keep very short phones clear of the fixed footer. */
@media (min-width: 901px) {
  .standalone-detail-card {
    height: 408px !important;
    margin-top: 16px !important;
  }
}

@media (max-width: 620px) and (max-height: 700px) {
  .standalone-detail-card {
    height: calc(100dvh - 304px) !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  .standalone-detail-card .detail-story-copy p {
    font-size: 9.5px !important;
    line-height: 1.28 !important;
    margin-bottom: 5px !important;
  }
  .impact-list-title {
    margin: 5px 0 3px !important;
    font-size: 11px !important;
    line-height: 1.18 !important;
  }
  .impact-list {
    gap: 2px !important;
    font-size: 8.5px !important;
    line-height: 1.18 !important;
  }
}
@media (min-width: 901px) {
  .standalone-detail-card { height: 412px !important; }
}


/* Wave 11.26: functional team email links and social-button-matched surfaces. */
.team-email-link {
  background: rgba(0, 0, 0, .28) !important;
  border-color: rgba(255, 255, 255, .20) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: currentColor !important;
}
.team-email-link:hover,
.team-email-link:focus-visible {
  background: rgba(0, 0, 0, .55) !important;
  border-color: var(--brand-gold) !important;
  color: var(--brand-gold) !important;
  -webkit-text-fill-color: currentColor !important;
}


/* Wave 11.27: precise logo hitbox and direct email shortcuts on bios. */
/* The logo PNG is 2:1. Earlier rules made the image element much wider than
   that while object-fit: contain rendered the artwork at the same height,
   leaving a large invisible clickable area to the right. Give the image box
   its natural aspect ratio instead; this preserves the rendered logo itself
   while making the Home-link hit area hug the artwork. */
.brand {
  width: auto !important;
  flex: 0 0 auto !important;
  line-height: 0;
  clip-path: inset(10% 1% 10% 1%);
}
.brand img {
  width: auto !important;
  height: 98px !important;
  max-width: none !important;
  max-height: 98px !important;
  object-fit: contain !important;
}

/* The dedicated Julie/Michelle email actions use the exact same working
   mailto button treatment as their Our Team cards. */
.standalone-detail-card .detail-story-photo--team {
  position: relative;
}
.standalone-detail-card .detail-email-link {
  top: 12px;
  right: 12px;
}

@media (max-width: 900px) and (min-width: 621px) {
  .brand img {
    height: 88px !important;
    max-height: 88px !important;
  }
}

@media (max-width: 620px) {
  .brand {
    width: auto !important;
    justify-content: center !important;
  }
  .brand img {
    width: auto !important;
    height: 48px !important;
    max-width: none !important;
    max-height: 48px !important;
  }
  .standalone-detail-card .detail-email-link {
    top: 8px;
    right: 8px;
  }
}


/* Wave 11.28: smoother font loading + phone-only natural scrolling. */
/* Fonts are requested directly in each document head now, with preconnects to
   Google's font origins. Keeping the same font stacks/final metrics avoids a
   visual redesign while removing the late CSS @import that caused the obvious
   fallback-font snap after page load. */
html {
  font-synthesis: none;
}
body,
button,
input,
textarea,
select {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Phones may scroll naturally now. Tablet (621-900px) and desktop rules are
   intentionally untouched, so the desktop single-viewport/no-scroll layout is
   preserved exactly. */
@media (max-width: 620px) {
  html,
  body {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.home-background,
  body.inner-background {
    display: block !important;
    height: auto !important;
    min-height: 100svh !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  /* Keep the compact fixed phone header, but let page content determine height. */
  .page,
  .home {
    height: auto !important;
    min-height: calc(100svh + 1px) !important;
    overflow: visible !important;
    padding-top: 108px !important;
    padding-bottom: 34px !important;
  }

  /* Footer follows the content instead of covering it. On normal phone pages
     this places it below the first viewport, so it appears naturally on scroll. */
  body .site-footer,
  body.home-background > .site-footer,
  body.inner-background > .site-footer,
  .standalone-detail-body .site-footer {
    position: static !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 16px 12px max(18px, env(safe-area-inset-bottom)) !important;
    gap: 5px !important;
  }
  .footer-socials {
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    order: 3 !important;
    align-self: center !important;
    margin: 7px 0 0 !important;
  }

  /* With scrolling available, stop compressing headings and cards purely to fit
     a single screen. The first viewport still remains compact and informative. */
  body.inner-background .page-heading .eyebrow {
    display: block !important;
    margin-bottom: 7px !important;
    font-size: 8px !important;
  }
  body.inner-background .page-heading h1 {
    font-size: clamp(36px, 10vw, 46px) !important;
    line-height: .98 !important;
  }
  body.inner-background .page-heading .gold-rule {
    display: block !important;
    margin: 9px auto 7px !important;
  }
  body.inner-background .page-heading p {
    margin: 0 auto 14px !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
  }

  /* Team stays two-up so both people remain visible near the top. About uses
     two columns instead of three, trading a little scroll for much better text
     and photo readability. */
  body:not(.about-overview-body) .team-grid,
  .team-overview-page .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 560px !important;
    gap: 10px !important;
  }
  .about-card-grid,
  .about-overview-page .about-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 560px !important;
    gap: 10px !important;
  }
  .team-grid .team-card {
    width: 100% !important;
  }
  .team-photo {
    height: clamp(145px, 42vw, 190px) !important;
  }
  .team-grid .team-profile-link {
    height: auto !important;
    min-height: 58px !important;
    padding: 9px 10px !important;
  }
  .team-grid .team-profile-link h2,
  .about-card-link h2 {
    font-size: clamp(17px, 5vw, 22px) !important;
    line-height: 1.05 !important;
  }
  .team-grid .team-profile-link h3,
  .about-card-link h3 {
    font-size: 8px !important;
    line-height: 1.2 !important;
  }

  /* Detail pages can finally prioritize readability: image, copy, and Back
     action stack naturally instead of being squeezed side-by-side. */
  .standalone-detail-page {
    height: auto !important;
    min-height: calc(100svh + 1px) !important;
    overflow: visible !important;
    padding: 108px 14px 34px !important;
  }
  .standalone-detail-card {
    width: min(100%, 520px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 8px auto 0 !important;
    padding: 14px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto !important;
    row-gap: 12px !important;
    column-gap: 0 !important;
    overflow: visible !important;
  }
  .standalone-detail-card .detail-story-photo {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: min(100%, 360px) !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 auto !important;
    align-self: auto !important;
  }
  .standalone-detail-card .detail-story-copy {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 15px 16px !important;
  }
  .standalone-detail-card .detail-story-copy p {
    margin: 0 0 14px !important;
    font-size: 15px !important;
    line-height: 1.62 !important;
  }
  .impact-list-title {
    margin: 12px 0 8px !important;
    font-size: 19px !important;
    line-height: 1.25 !important;
  }
  .impact-list {
    gap: 7px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
  }
  .standalone-detail-card .detail-back-button {
    grid-column: 1 !important;
    grid-row: 3 !important;
    justify-self: start !important;
    align-self: auto !important;
    margin: 0 !important;
    padding: 10px 15px !important;
    font-size: 9px !important;
  }

  /* The short-phone squeeze rules from the no-scroll version are intentionally
     neutralized now that the page may extend naturally. */
  .standalone-detail-card .detail-story-copy p {
    font-size: 15px !important;
    line-height: 1.62 !important;
    margin-bottom: 14px !important;
  }
  .impact-list-title {
    font-size: 19px !important;
    line-height: 1.25 !important;
    margin: 12px 0 8px !important;
  }
  .impact-list {
    font-size: 13px !important;
    line-height: 1.4 !important;
    gap: 7px !important;
  }

  /* Gallery remains manual on phone; only its page height/footer behavior is
     relaxed. Images retain the existing aspect-ratio treatment. */
  .gallery-page {
    min-height: calc(100svh + 1px) !important;
  }
  .gallery-carousel {
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
}


/* Wave 11.29: zero-visible-font-swap gate + reliable email choices.
   The tiny inline gate in every document keeps content invisible while the
   requested typefaces resolve. If they cannot resolve quickly, the page locks
   to metric-stable system fallbacks for that navigation rather than visibly
   swapping later. */
.email-choice-open { overflow: hidden !important; }
.email-choice-modal[hidden] { display: none !important; }
.email-choice-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
}
.email-choice-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.68);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.email-choice-panel {
  position: relative;
  z-index: 1;
  width: min(92vw, 440px);
  padding: 28px 26px 24px;
  text-align: center;
  color: #f2eee6;
  background: rgba(12,12,12,.97);
  border: 1px solid rgba(223,180,4,.58);
  border-radius: 4px;
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
}
.email-choice-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #c8c5bb;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
}
.email-choice-close:hover,
.email-choice-close:focus-visible { color: var(--brand-gold-bright); outline: none; }
.email-choice-kicker {
  margin-bottom: 7px;
  color: var(--brand-gold);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .28em;
}
.email-choice-panel h2 {
  margin: 0;
  color: #fff;
  font-size: 34px;
  line-height: 1.05;
}
.email-choice-address {
  margin: 13px 0 20px;
  color: #cbc7be;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  user-select: all;
}
.email-choice-actions {
  display: flex;
  justify-content: center;
  gap: 9px;
  flex-wrap: wrap;
}
.email-choice-actions .button {
  min-width: 154px;
  margin: 0;
  cursor: pointer;
  font-family: Inter, Arial, sans-serif;
}
.email-choice-note {
  margin: 16px auto 0;
  max-width: 340px;
  color: #8f8c83;
  font-size: 10px;
  line-height: 1.5;
}
@media (max-width: 620px) {
  .email-choice-modal { padding: 14px; }
  .email-choice-panel { padding: 26px 18px 20px; }
  .email-choice-panel h2 { font-size: 30px; }
  .email-choice-address { font-size: 13px; }
  .email-choice-actions { display: grid; grid-template-columns: 1fr; }
  .email-choice-actions .button { width: 100%; min-width: 0; }
}
/* Wave 11.34: mobile layout polish queue.
   Desktop/tablet behavior at 621px+ is intentionally unchanged. */
@media (max-width: 620px) {
  :root {
    --mobile-header-clearance: 132px;
  }

  /* Keep the whole phone document as one continuous column so the footer is the
     true end of the site. The html background matches the footer surface so
     mobile overscroll never exposes a light/white strip beneath it. */
  html {
    min-height: 100%;
    background: #050505 !important;
    overscroll-behavior-y: auto;
  }

  body.home-background,
  body.inner-background {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100dvh !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    padding: 0 !important;
    background-color: #050505 !important;
  }

  /* The fixed header remains persistent, while every page begins from the exact
     same safe vertical line beneath it. */
  .page,
  .home,
  .standalone-detail-page {
    flex: 1 0 auto !important;
    height: auto !important;
    min-height: 100dvh !important;
    padding-top: var(--mobile-header-clearance) !important;
    padding-bottom: 42px !important;
    overflow: visible !important;
  }

  /* Home receives the same clearance plus a very small optical nudge so the D/A
     mark cannot tuck beneath the persistent header. */
  .home-content {
    margin-top: 0 !important;
    transform: translateY(8px);
  }

  /* Footer is always the final element in document flow. There is no trailing
     margin or spacer beneath it, and its safe-area padding is contained inside
     the footer itself. */
  body .site-footer,
  body.home-background > .site-footer,
  body.inner-background > .site-footer,
  .standalone-detail-body .site-footer {
    flex: 0 0 auto !important;
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    margin: auto 0 0 !important;
    padding: 16px 12px max(18px, env(safe-area-inset-bottom)) !important;
    background: #050505 !important;
  }

  /* Make the dropdown arrow a distinct, forgiving phone-sized control next to
     the label instead of a tiny target. */
  .nav-team-row {
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    width: 100% !important;
  }

  .nav-team-row .nav-link {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
    justify-content: center !important;
  }

  .nav-team-toggle {
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 11px !important;
    border-left: 1px solid rgba(223, 180, 4, .20) !important;
    border-radius: 0 4px 4px 0 !important;
    background: rgba(255, 255, 255, .035) !important;
  }

  .nav-team-toggle:active,
  .nav-team-toggle[aria-expanded="true"] {
    background: rgba(223, 180, 4, .10) !important;
  }

  .nav-team-toggle svg {
    width: 16px !important;
    height: 16px !important;
  }

  /* Center the third About card beneath the two-card first row while preserving
     exactly the same card width as either column. */
  .about-card-grid .about-card:last-child {
    grid-column: 1 / -1 !important;
    width: calc((100% - 10px) / 2) !important;
    max-width: none !important;
    justify-self: center !important;
  }

  /* Give the phone Gallery a little more visual weight without changing swipe
     behavior or the original-image aspect ratios. */
  .gallery-carousel-section {
    width: calc(100% + 12px) !important;
    margin-left: -6px !important;
    margin-right: -6px !important;
  }

  .gallery-carousel {
    padding-left: 6px !important;
    padding-right: 6px !important;
    scroll-padding-inline: 6px !important;
  }

  .gallery-carousel .gallery-card,
  .gallery-carousel .gallery-card[data-carousel-clone="true"],
  .gallery-carousel .gallery-image,
  .gallery-carousel .gallery-image img {
    max-width: min(86vw, 340px) !important;
  }

  .gallery-carousel .gallery-image img {
    max-height: min(54vh, 350px) !important;
  }
}

@media (max-width: 350px) {
  .nav-team-toggle {
    flex-basis: 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    padding: 9px !important;
  }
}

/* Wave 11.36: mobile swipe/footer refinement + desktop dropdown cleanup.
   These overrides intentionally leave the established desktop geometry and
   persistent-shell navigation intact. */
@media (max-width: 620px) {
  /* Footer: keep it as the true final block in normal document flow, but remove
     expensive compositing effects that could lag behind the page while scrolling.
     A solid surface and its own crisp border prevent the dark layer from painting
     over the gold separator. */
  body .site-footer,
  body.home-background > .site-footer,
  body.inner-background > .site-footer,
  .standalone-detail-body .site-footer {
    position: static !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: 150px !important;
    margin: auto 0 0 !important;
    padding:
      20px
      max(14px, env(safe-area-inset-right))
      max(24px, calc(env(safe-area-inset-bottom) + 14px))
      max(14px, env(safe-area-inset-left)) !important;
    gap: 4px !important;
    background: #050505 !important;
    border-top: 1px solid rgba(223, 180, 4, .42) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    text-shadow: none !important;
    transform: none !important;
    will-change: auto !important;
    isolation: isolate;
  }

  /* Social controls stay inside the footer instead of sitting on a separately
     composited absolute layer. This also guarantees enough room when fully
     scrolled to the bottom. */
  body .site-footer .footer-socials {
    position: static !important;
    inset: auto !important;
    order: 3 !important;
    align-self: center !important;
    margin: 9px 0 0 !important;
    gap: 9px !important;
  }

  body .site-footer .social-link {
    width: 34px !important;
    height: 34px !important;
  }

  /* Keep the larger phone touch target from Wave 11.34, but visually dissolve it
     back into the clean header. The button remains easy to hit even though only
     the arrow itself is visually prominent. */
  .nav-team-toggle {
    flex: 0 0 36px !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 10px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .nav-team-toggle:active,
  .nav-team-toggle[aria-expanded="true"] {
    background: rgba(223, 180, 4, .055) !important;
  }

  .nav-team-toggle svg {
    width: 14px !important;
    height: 14px !important;
  }

  /* Restore the same small destination chevron used on desktop to the About and
     Team card action strips. Older mobile fit rules hid it. */
  .team-grid .team-profile-link,
  .about-card-grid .about-card-link {
    padding-right: 34px !important;
  }

  .team-grid .team-profile-link::after,
  .about-card-grid .about-card-link::after {
    display: block !important;
    right: 12px !important;
    font-size: 20px !important;
    line-height: 1 !important;
    opacity: .92;
  }

  /* Touch/mobile Gallery runs as a finite native swipe strip in script.js. These
     rules reinforce that mode by avoiding visual clone assumptions. */
  .gallery-carousel {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 350px) {
  .nav-team-toggle {
    flex-basis: 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    padding: 9px !important;
  }
}

/* Wave 11.37 queue #1: phone-only continuous gallery. Desktop is unchanged. */
@media (max-width: 620px) {
  .gallery-carousel.mobile-loop {
    overflow: hidden !important;
    scroll-behavior: auto !important;
    scroll-snap-type: none !important;
    -webkit-overflow-scrolling: auto !important;
  }
  .gallery-carousel.mobile-loop,
  .gallery-carousel.mobile-loop * {
    touch-action: pan-y pinch-zoom !important;
  }
  .mobile-loop .gallery-track {
    position: relative;
    will-change: transform;
    transition: none !important;
  }
  .mobile-loop .gallery-card {
    /* Avoid an oversized shadow layer repainting for every swipe frame. */
    box-shadow: 0 0 0 1px var(--brand-gold) !important;
  }
}

/* Queue #2: About uses the CURRENT Team footer surface. Its existing
   card-to-footer spacing remains intact; #4 below is Team-only. */
@media (max-width: 620px) {
  body.about-overview-body .site-footer {
    background: #050505 !important;
    border-top: 1px solid rgba(223, 180, 4, .42) !important;
    box-shadow: none !important;
  }
}

/* Queue #3: a footer is an ordinary final document section on every phone page.
   Keep its background within its own bounds and remove all independent layers. */
@media (max-width: 620px) {
  body.home-background,
  body.inner-background {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 100svh !important;
  }
  body.home-background > .site-footer,
  body.inner-background > .site-footer,
  .standalone-detail-body .site-footer {
    position: static !important;
    inset: auto !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 150px !important;
    overflow: hidden !important;
    background-clip: border-box !important;
    z-index: auto !important;
    transform: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
  }
  body .site-footer::before,
  body .site-footer::after {
    content: none !important;
    display: none !important;
  }
}

/* Queue #4: Team uses Home's footer surface/padding (shared Wave 11.36 rules),
   with the same flexible page height as Home to reduce the gap under its cards.
   About deliberately retains its previous page height and bottom spacing. */
@media (max-width: 620px) {
  body.team-overview-body .team-overview-page {
    min-height: 0 !important;
    height: auto !important;
    flex: 1 0 auto !important;
    padding-bottom: 42px !important;
  }
}

/* Wave 11.38: ordinary mobile document footers, scoped to About, Gallery,
   Founder, How We Help, Community Impact and the two biographies.
   Home, Our Team and all desktop/tablet rules are intentionally unaffected. */
@media (max-width: 620px) {
  body.inner-background.mobile-document-footer {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
    padding: 0 !important;
    background: #050505 !important;
  }

  /* The marble belongs to the content block, not a separate background spanning
     the entire document and footer. It now ends exactly at the footer border. */
  body.inner-background.mobile-document-footer::before,
  body.inner-background.mobile-document-footer::after {
    content: none !important;
    display: none !important;
  }

  body.inner-background.mobile-document-footer > main.page {
    position: relative !important;
    inset: auto !important;
    display: block !important;
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    /* Stable viewport height prevents toolbar expansion/collapse from shifting
       the footer. Short content still puts it below the initial viewport. */
    min-height: 100svh !important;
    margin: 0 !important;
    padding-top: var(--mobile-header-clearance) !important;
    padding-bottom: 42px !important;
    overflow: visible !important;
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
    background-color: #090a09 !important;
    background-image:
      linear-gradient(180deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, .82)),
      url('marble-mobile-extended.png') !important;
    background-position: center top, center top !important;
    background-repeat: no-repeat, repeat-y !important;
    background-size: 100% 100%, 100% auto !important;
    background-attachment: scroll !important;
  }

  body.inner-background.mobile-document-footer > .site-footer {
    /* No fixed/sticky attachment, flex filler, viewport heights or offsets. */
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    flex: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: 150px !important;
    max-height: none !important;
    margin: 0 !important;
    padding:
      20px
      max(14px, env(safe-area-inset-right))
      max(24px, calc(env(safe-area-inset-bottom) + 14px))
      max(14px, env(safe-area-inset-left)) !important;
    background: #050505 !important;
    border-top: 1px solid rgba(223, 180, 4, .42) !important;
    overflow: hidden !important;
    contain: paint;
    isolation: isolate;
    z-index: auto !important;
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  body.inner-background.mobile-document-footer > .site-footer::before,
  body.inner-background.mobile-document-footer > .site-footer::after {
    content: none !important;
    display: none !important;
  }
}

/* Stable document-scroller geometry for the seven content pages.
   Wave 11.40 restores native vertical bounce without changing footer layouts. */
@media (max-width: 620px) {
  html.mobile-scroll-boundary {
    height: auto !important;
    min-height: 0 !important;
    overflow-x: clip !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto !important;
    scroll-snap-type: none !important;
    overflow-anchor: none;
  }
  body.inner-background.mobile-document-footer {
    overflow: visible !important;
    overscroll-behavior-y: auto !important;
  }
}

/* #2: equal two-line titles and subtitle bands; the full action area fills each
   About card, so shorter text cannot expose the gray card surface below it. */
@media (max-width: 620px) {
  .about-card-grid .about-card {
    display: flex !important;
    flex-direction: column !important;
    background: #080808 !important;
  }
  .about-card-grid .about-card-link {
    flex: 1 0 auto !important;
    min-height: calc(2.1em + 34px) !important;
    height: auto !important;
    font-size: clamp(17px, 5vw, 22px) !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
    margin: 0 !important;
    gap: 4px !important;
  }
  .about-card-grid .about-card-link h2 {
    font-size: inherit !important;
    line-height: 1.05 !important;
    min-height: 2.1em !important;
    margin: 0 !important;
  }
  .about-card-grid .about-card-link h3 {
    font-size: 8px !important;
    line-height: 1.2 !important;
    min-height: 1.2em !important;
    margin: 0 !important;
  }
  .about-card-link .mobile-card-break {
    display: initial !important;
  }
}

/* #5: a quiet phone-only shortcut immediately beneath the header. */
@media (max-width: 620px) {
  .mobile-return-top {
    position: fixed;
    top: calc(var(--mobile-header-clearance) + 10px);
    left: max(12px, env(safe-area-inset-left));
    z-index: 19;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 13px;
    border: 1px solid rgba(223, 180, 4, .28);
    border-radius: 50%;
    color: #e3dccb;
    background: rgba(5, 5, 5, .76);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-return-top[hidden] { display: none !important; }
  .mobile-return-top svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .mobile-return-top:active { color: var(--brand-gold); }
  .mobile-return-top:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 3px; }
}
@media (min-width: 621px) {
  .mobile-return-top { display: none !important; }
}


/* Wave 11.40: native mobile rebound on EVERY page, including Home/Our Team.
   No custom bounce animation, edge blocking or scroll-position clamp. */
@media (max-width: 620px) {
  html,
  body,
  html.mobile-scroll-boundary,
  body.inner-background.mobile-document-footer {
    overscroll-behavior-y: auto !important;
  }
}

/* Wave 11.41: one native viewport scroller and a solid overscroll canvas.
   Keep footer geometry intact. Marble paints only the main content, never the
   body/canvas or a viewport-sized layer behind the footer. */
@media (max-width: 620px) {
  html,
  html.mobile-scroll-boundary {
    height: auto !important;
    min-height: 0 !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
    background: #050505 !important;
    scroll-behavior: auto !important;
    scroll-snap-type: none !important;
    overflow-anchor: none !important;
    overscroll-behavior-y: auto !important;
  }

  body.home-background,
  body.inner-background,
  body.inner-background.mobile-document-footer {
    height: auto !important;
    /* hidden on one axis makes visible on the other compute to auto. Keep both
       visible so body cannot become a second scrolling region. */
    overflow: visible !important;
    background: #050505 !important;
    isolation: auto !important;
    contain: none !important;
    scroll-behavior: auto !important;
    scroll-snap-type: none !important;
    overflow-anchor: none !important;
    overscroll-behavior-y: auto !important;
  }

  body.home-background::before,
  body.home-background::after,
  body.inner-background::before,
  body.inner-background::after {
    content: none !important;
    display: none !important;
  }

  body.home-background > main.home,
  body.inner-background > main.page {
    background-color: #090a09 !important;
    background-position: center top, center top !important;
    background-repeat: no-repeat, repeat-y !important;
    background-size: 100% 100%, 100% auto !important;
    background-attachment: scroll !important;
    overflow-anchor: none !important;
  }

  body.home-background > main.home {
    background-image:
      radial-gradient(ellipse at 50% 34%,
        rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .64) 24%,
        rgba(0, 0, 0, .42) 43%, rgba(0, 0, 0, .18) 64%,
        rgba(0, 0, 0, .04) 82%, rgba(0, 0, 0, 0) 100%),
      url('marble-mobile-extended.png') !important;
  }

  body.inner-background > main.page {
    background-image:
      linear-gradient(180deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, .82)),
      url('marble-mobile-extended.png') !important;
  }

  body.home-background > .site-footer,
  body.inner-background > .site-footer,
  body.inner-background.mobile-document-footer > .site-footer {
    background: #050505 !important;
    /* The solid ordinary block needs no separate paint/stacking container. */
    contain: none !important;
    isolation: auto !important;
    overflow: clip !important;
    overflow-anchor: none !important;
  }
}

/* Wave 11.42: stabilize the bottom scroll limit during a Safari fling, while
   allowing rebound at the bottom and suppressing it only at the top. */
@media (max-width: 620px) {
  body.home-background > .site-footer,
  body.inner-background > .site-footer,
  body.inner-background.mobile-document-footer > .site-footer {
    padding-bottom: var(--mobile-footer-bottom,
      max(24px, calc(env(safe-area-inset-bottom) + 14px))) !important;
  }
  html.mobile-top-boundary,
  html.mobile-top-boundary.mobile-scroll-boundary {
    overscroll-behavior-y: none !important;
  }
}


/* Wave 11.43: consistent, tighter desktop copy on the five detail pages. */
@media (min-width: 901px) {
  .standalone-detail-card .detail-story-copy {
    /* Keep the frame fixed; a narrow/zoomed desktop must not hide longer copy. */
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(223, 180, 4, .38) transparent;
  }
  .standalone-detail-card .detail-story-copy p {
    line-height: 1.4 !important;
    margin: 0 0 8px !important;
  }
  .standalone-detail-card .detail-story-copy p:last-child {
    margin-bottom: 0 !important;
  }
}

/* Wave 11.44: short phone pages need distinct top and bottom boundaries even
   after Safari retracts its toolbar. Large viewport units remain stable while
   scrolling; the extra 24px gives a real bottom scroll range on Home/Our Team. */
@media (max-width: 620px) {
  body.home-background,
  body.inner-background.team-overview-body {
    min-height: calc(100vh + 24px) !important;
    min-height: calc(100lvh + 24px) !important;
  }
}

/* Wave 11.46: extend the five existing destination links over their phone cards.
   The transparent absolute hit area adds no layout, color or text changes. */
.mobile-card-link { display: none; }
@media (max-width: 620px) {
  .about-card-grid .team-card,
  .team-overview-page .team-card {
    position: relative;
  }
  .mobile-card-link {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    background: transparent;
    border: 0;
    -webkit-tap-highlight-color: transparent;
  }
  /* Email buttons keep their existing z-index: 4, above the card hit area. */
  .about-card-grid .team-card.is-card-pressed,
  .team-overview-page .team-card.is-card-pressed {
    filter: brightness(.92);
  }
  .team-email-link {
    width: 36px;
    height: 36px;
  }
  .team-email-link svg {
    width: 18px;
    height: 18px;
  }
}

/* Wave 11.47: the three Team cards reuse About's grid, action bands and
   centered phone third card. About keeps its existing geometry. */
@media (min-width: 901px) {
  body.team-overview-body .about-card-grid {
    grid-template-columns: repeat(3, var(--shared-card-w)) !important;
  }
}
@media (max-width: 620px) {
  body.inner-background.team-overview-body.mobile-document-footer {
    min-height: 0 !important;
  }
}
@media (min-width: 621px) and (max-width: 900px) {
  body.team-overview-body .about-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-width: 760px !important;
  }
}

/* Wave 11.49 — The biography Back button belongs under the LEFT photo, not
   beneath the copy. Its original grid cell (first column, second row) is
   restored; both social icons occupy the right end of the SAME action row.
   On a phone, retain the original after-copy Back position and show its social
   siblings alongside it to avoid changing the already-established mobile flow. */
.standalone-detail-card .detail-actions {
  grid-column: 1 !important;
  grid-row: 2 !important;
  align-self: end !important;
  justify-self: start;
  width: 340px;
  max-width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.standalone-detail-card .detail-actions .detail-back-button {
  margin: 0 !important;
  align-self: center !important;
  flex: 0 0 auto;
}
.detail-socials {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  flex: 0 0 auto;
}
.detail-socials .social-link { flex: 0 0 auto; }
@media (min-width: 621px) and (max-width: 900px) {
  .standalone-detail-card .detail-actions {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100%;
    align-self: start !important;
    padding-top: 6px;
  }
}
@media (max-width: 620px) {
  .standalone-detail-card .detail-actions {
    grid-column: 1 !important;
    grid-row: 3 !important;
    width: 100%;
    align-self: center !important;
  }
  .detail-socials .social-link { width: 34px !important; height: 34px !important; }
  .detail-socials .social-icon { width: 17px !important; height: 17px !important; }
}

/* Wave 11.49 — sharper, clearer, slightly lowered desktop-only contact guide.
   The speech-bubble pointer is a CSS shape, not a resampled image. */
.team-contact-tip[hidden] { display: none !important; }
.team-contact-tip { display: none; }
@media (min-width: 901px) {
  .team-contact-tip {
    display: block;
    position: fixed;
    top: 132px; /* 110px desktop header + generous visual clearance */
    right: clamp(16px, 3vw, 52px);
    z-index: 12;
    width: 266px;
    padding: 17px 19px 17px;
    background: #0b0b0b;
    border: 1px solid rgba(223,180,4,.82);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0,0,0,.42);
    color: #f6f3ed;
    text-align: left;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
  }
  .team-contact-tip::after {
    content: "";
    position: absolute;
    bottom: -9px;
    left: 25px;
    width: 16px;
    height: 16px;
    background: #0b0b0b;
    border-right: 1px solid rgba(223,180,4,.82);
    border-bottom: 1px solid rgba(223,180,4,.82);
    transform: rotate(45deg);
    border-radius: 0 0 2px 0;
    pointer-events: none;
  }
  .team-contact-tip h2 {
    margin: 0 29px 7px 0;
    font: 600 25px/1.05 'Cormorant Garamond', Georgia, serif;
    color: #fff;
    text-shadow: none;
  }
  .team-contact-tip p {
    margin: 0;
    font: 400 13px/1.5 Inter, Arial, sans-serif;
    color: #eee9df;
    letter-spacing: 0;
    text-shadow: none;
  }
  .team-contact-tip-close {
    position: absolute;
    top: 9px;
    right: 9px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    color: #fff;
    font: 25px/1 Arial,sans-serif;
    background: transparent;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
  }
  .team-contact-tip-close:hover,
  .team-contact-tip-close:focus-visible {
    color: var(--brand-gold-bright);
    outline: 1px solid var(--brand-gold);
  }
  .team-contact-tip-example {
    display: flex;
    justify-content: center;
    gap: 17px;
    align-items: center;
    margin-top: 14px;
  }
  .team-contact-tip-arrow svg {
    display: block;
    width: 54px;
    height: 27px;
    fill: none;
    stroke: var(--brand-gold-bright);
    stroke-width: 2.3;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }
  .team-contact-tip-mail {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    border-radius: 10px;
    background: rgba(0,0,0,.38);
    border: 1px solid rgba(255,255,255,.38);
    color: #fff;
  }
  .team-contact-tip-mail svg {
    display: block;
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.85;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}
@media (max-width: 900px) {
  .team-contact-tip { display: none !important; }
}


/* Wave 11.50 — restrained footer D/A brandmark, exactly to the left of social icons. */
.site-footer .footer-socials { gap: 8px; }
.site-footer .footer-brandmark {
  display: block;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  object-fit: contain;
  background: transparent;
}
@media (max-width: 900px) {
  .site-footer .footer-brandmark { width: 34px; height: 34px; }
}

/* Wave 11.50 — full copy scrolls inside the original desktop frame only.
   On mobile the text frame and whole document retain natural height. */
@media (min-width: 901px) {
  body.founder-detail-body .standalone-detail-card .detail-story-copy,
  body.how-we-help-detail-body .standalone-detail-card .detail-story-copy,
  body.standalone-detail-body:has(.detail-story-photo--founder) .standalone-detail-card .detail-story-copy,
  body.standalone-detail-body:has(.detail-story-photo--practice) .standalone-detail-card .detail-story-copy {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(223,180,4,.72) rgba(0,0,0,.28);
    scrollbar-gutter: stable;
    overscroll-behavior-y: contain;
    padding-right: 13px !important;
  }
  .standalone-detail-card .detail-story-copy::-webkit-scrollbar { width: 7px; }
  .standalone-detail-card .detail-story-copy::-webkit-scrollbar-track { background: rgba(0,0,0,.28); border-radius: 5px; }
  .standalone-detail-card .detail-story-copy::-webkit-scrollbar-thumb { background: rgba(223,180,4,.66); border-radius: 5px; }
  .standalone-detail-card .detail-story-copy::-webkit-scrollbar-thumb:hover { background: rgba(245,206,52,.82); }
}
@media (max-width: 900px) {
  .standalone-detail-card .detail-story-copy[tabindex] {
    height: auto !important;
    overflow: visible !important;
    scrollbar-width: none;
  }
}

/* Wave 11.50 — desktop-only contact guide, native font rendering and SVG
   iconography (never raster-scaled), arrow shown as clean vector geometry. */
@media (min-width: 901px) {
  .team-contact-tip {
    top: 150px;
    overflow: visible;
    padding: 19px 20px 18px;
    border-color: rgba(223,180,4,.85);
    text-shadow: none !important;
    transform: none !important;
    filter: none !important;
    -webkit-font-smoothing: auto;
    text-rendering: optimizeLegibility;
  }
  .team-contact-tip::after {
    left: 27px;
    top: -8px;
    bottom: auto;
    width: 14px;
    height: 14px;
    border: 0;
    border-left: 1px solid rgba(223,180,4,.85);
    border-top: 1px solid rgba(223,180,4,.85);
    border-radius: 2px 0 0 0;
    transform: rotate(45deg);
    box-shadow: none;
  }
  .team-contact-tip h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 27px;
    line-height: 1.17;
    font-weight: 600;
    letter-spacing: .005em;
    text-shadow: none !important;
  }
  .team-contact-tip p {
    font-family: Inter, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: 0;
    text-shadow: none !important;
  }
  .team-contact-tip-arrow svg {
    width: 58px;
    height: 29px;
    stroke-width: 2;
    shape-rendering: geometricPrecision;
  }
  .team-contact-tip-mail {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(8,8,8,.76);
    border: 1px solid rgba(223,180,4,.72);
    box-shadow: 0 4px 15px rgba(0,0,0,.28);
    color: #ffffff;
  }
  .team-contact-tip-mail svg {
    width: 19px;
    height: 19px;
    stroke-width: 1.7;
    shape-rendering: geometricPrecision;
  }
}
@media (max-width: 900px) { .team-contact-tip { display: none !important; } }

@media (min-width: 901px) {
  .team-contact-tip { top: 126px; padding: 11px 20px 9px; }
  .team-contact-tip h2 { margin-bottom: 4px; }
  .team-contact-tip-example { margin-top: 5px; }
}
@media (min-width: 621px) and (max-width: 900px) {
  body.standalone-detail-body:has(.detail-story-photo--founder),
  body.standalone-detail-body:has(.detail-story-photo--practice) {
    min-height: 100vh !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  body.standalone-detail-body:has(.detail-story-photo--founder) .standalone-detail-page,
  body.standalone-detail-body:has(.detail-story-photo--practice) .standalone-detail-page {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding-bottom: 32px !important;
  }
  body.standalone-detail-body:has(.detail-story-photo--founder) .standalone-detail-card,
  body.standalone-detail-body:has(.detail-story-photo--practice) .standalone-detail-card {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    grid-template-rows: auto auto !important;
  }
  body.standalone-detail-body:has(.detail-story-photo--founder) .detail-story-copy,
  body.standalone-detail-body:has(.detail-story-photo--practice) .detail-story-copy {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  body.standalone-detail-body:has(.detail-story-photo--founder) .site-footer,
  body.standalone-detail-body:has(.detail-story-photo--practice) .site-footer {
    position: relative !important;
    bottom: auto !important;
    margin: 12px auto 0 !important;
    padding-bottom: 18px !important;
  }
}


/* Wave 11.51 — fix the Contact Us guide at the source rather than upscaling
   its lettering. Keep text in the browser's native painting path: no filters,
   layer promotion, faux antialiasing switches, fractional positioning, or
   transform on the text containers. System fonts avoid network font swaps. */
@media (min-width: 901px) {
  body.team-overview-body .team-contact-tip {
    right: 24px;
    top: 126px;
    width: 278px;
    padding: 6px 20px 5px;
    transform: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    -webkit-font-smoothing: auto;
    text-rendering: auto;
    will-change: auto;
    contain: none;
    opacity: 1;
  }
  body.team-overview-body .team-contact-tip h2 {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 27px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0;
    text-rendering: auto;
    -webkit-font-smoothing: auto;
    transform: none;
    filter: none;
    margin: 0 29px 5px 0;
  }
  body.team-overview-body .team-contact-tip p {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.47;
    letter-spacing: 0;
    text-rendering: auto;
    -webkit-font-smoothing: auto;
    transform: none;
    filter: none;
  }
  body.team-overview-body .team-contact-tip-example {
    margin-top: 7px;
    gap: 16px;
  }
  /* The demonstration button now uses the same translucent surface,
     white envelope SVG and exact sizing as a real team email button. */
  body.team-overview-body .team-contact-tip-mail {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    /* Reproduce the real translucent dark team button as it appears over
       a light team photograph, not as an invisible black-on-black disc. */
    background: linear-gradient(rgba(0,0,0,.28),rgba(0,0,0,.28)), #dedede !important;
    border: 1px solid rgba(255,255,255,.20) !important;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0,0,0,.28);
    color: white !important;
    -webkit-text-fill-color: white !important;
    backdrop-filter: none;
  }
  body.team-overview-body .team-contact-tip-mail svg {
    display: block;
    width: 19px;
    height: 19px;
    stroke: white;
    stroke-width: 1.7;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    shape-rendering: auto;
  }
}
/* Keep the donation list visible in narrow desktop widths while maintaining
   identical styling for every individual donation row. */
@media (min-width: 901px) {
  body.standalone-detail-body:has(.detail-story-photo--community) .standalone-detail-card .detail-story-copy {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(223,180,4,.7) rgba(0,0,0,.22);
  }
}
@media (min-width: 901px) and (max-width: 1020px) {
  /* Fit the newly added fourth entry at narrow desktop widths without
     modifying the styling or order of the donation rows themselves. */
  body.standalone-detail-body:has(.detail-story-photo--community) .detail-story-copy > p {
    font-size: 15px !important;
    line-height: 1.45 !important;
  }
}
@media (max-width: 900px) {
  body.team-overview-body .team-contact-tip { display: none !important; }
}


/* Wave 11.52: curved arrow from selected sample C; keep it as a sharp SVG.
   Header is a separate stacking context (due to backdrop-filter). Raising its
   level ABOVE the contact tip is necessary: a z-index on the dropdown alone
   cannot escape a lower-layer header. This does not affect mobile or modals. */
@media (min-width: 901px) {
  body.team-overview-body > .site-header {
    z-index: 40;
  }
  body.team-overview-body .team-contact-tip {
    z-index: 12;
  }
  body.team-overview-body .team-contact-tip-arrow svg {
    width: 67px;
    height: 36px;
    stroke-width: 3.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    /* Nudge the SVG only; leave card, text, and mail-button layout untouched. */
    position: relative;
    left: 7px;
    top: -4px;
  }
  body.team-overview-body .team-contact-tip-example {
    gap: 14px;
  }
  /* Preserve the dropdown's original black-glass gradient and translucency.
     The header's higher stacking layer above handles visibility on hover. */
}