/*
  White editorial direction.
  Healf's useful lesson is restraint: an uninterrupted light canvas, imagery
  with authority, quiet navigation and one unmistakable accent. The actual
  shapes, type, globe and monogram remain unmistakably TLH.
*/

:root {
  --paper: #ffffff;
  --editorial-white: #ffffff;
  --editorial-mist: #faf7fc;
  --editorial-lilac: #f4eef8;
  --editorial-ink: #17131c;
  --editorial-muted: #665f6c;
  --editorial-rule: rgba(35, 25, 42, .14);
  /* The brand kit contains dedicated RGB/CMYK palettes. Use its deeper
     aubergine as the site action colour; reserve the brighter logo violet for
     small highlights and reflected light. */
  --violet: #4c3074;
  --accent: #4c3074;
  --tlh-purple: #4c3074;
  --tlh-purple-hover: #3d265d;
  --violet-text: #5f3c91;
  --font-display: "Inter", "Geist", "Helvetica Neue", sans-serif;
  --font-ui: "Inter", "Geist", "Helvetica Neue", sans-serif;
}

html,
body,
.page-content {
  background-color: var(--editorial-white);
}

/* The opening now uses the same Manrope voice as the rest of the site. */
.statement {
  font-family: "Inter", "Geist", "Helvetica Neue", sans-serif;
}

/* Six quiet architectural rules run continuously through copy. The shared
   line controller gives images a soft 44px fade at their edges. */
.page-content { background-image: none; }
.site-grid-lines {
  position: fixed;
  z-index: 18;
  inset: 0;
  mix-blend-mode: difference;
  background: none;
  pointer-events: none;
}
.site-grid-lines .site-grid-line {
  position: absolute;
  inset-block: 0;
  left: calc(var(--line-index) * 100% / 5);
  width: 1px;
  background: rgb(10, 10, 10);
  -webkit-mask-image: var(--lines-mask, linear-gradient(#000, #000));
  mask-image: var(--lines-mask, linear-gradient(#000, #000));
}

/* A slim architectural navigation frame, borrowing the reference's edge-led
   structure while keeping TLH's monogram and purple action unmistakable. */
.site-header:not(.impact-header) { --nav-text: #f8f5fa; padding: clamp(.4rem, .7vw, .8rem); }
.site-header:not(.impact-header) .header-shell,
.site-header:not(.impact-header).is-pinned .header-shell {
  --nav-text: #fff;
  max-width: none;
  min-height: 3.25rem;
  margin-top: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.site-header:not(.impact-header).is-pinned .header-shell {
  --nav-text: #fff;
}
.site-header:not(.impact-header) .nav-group {
  align-self: stretch;
  gap: .3rem;
  padding: 0;
}
.site-header:not(.impact-header) .nav-group a,
.site-header:not(.impact-header) .nav-actions > a {
  display: inline-grid;
  min-width: clamp(6.5rem, 7.7vw, 8.2rem);
  min-height: 44px;
  margin: 0;
  padding: .7rem 1rem;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 0;
  background: rgba(20, 17, 26, .08);
  color: var(--nav-text);
  box-shadow: none;
  font-size: clamp(.7rem, .72vw, .82rem);
  font-weight: var(--w-medium);
  letter-spacing: -.015em;
  text-decoration: none;
  transition: border-color .25s ease, background .25s ease, color .25s ease;
}
.site-header:not(.impact-header) .nav-actions { position: relative; z-index: 2; display: flex; align-self: stretch; gap: .3rem; }
.site-header:not(.impact-header).is-pinned .nav-group a,
.site-header:not(.impact-header).is-pinned .nav-actions > a {
  border-color: rgba(255, 255, 255, .13);
  background: rgba(31, 23, 41, .24);
  color: #fff;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.site-header:not(.impact-header) .nav-group a:hover,
.site-header:not(.impact-header) .nav-group a[aria-current="page"],
.site-header:not(.impact-header) .nav-actions > a:hover {
  border-color: rgba(218, 197, 237, .65);
  background: rgba(76, 48, 116, .42);
  color: #fff;
}
.site-header:not(.impact-header) .brand-mark {
  width: clamp(1.5rem, 1.65vw, 2rem);
  height: clamp(2.7rem, 3vw, 3.45rem);
  color: var(--nav-text);
}
.site-header:not(.impact-header) .header-cta {
  align-self: stretch;
  margin: 0;
  background: rgba(20, 17, 26, .08);
}
.site-header:not(.impact-header) .header-cta:hover {
  border-color: rgba(218, 197, 237, .65);
  background: rgba(76, 48, 116, .72);
  transform: none;
}
.site-header:not(.impact-header) .menu-button {
  min-width: 3.25rem;
  min-height: 3.25rem;
  color: #fff;
}

@media (min-width: 768px) and (max-width: 999px) {
  .site-header:not(.impact-header) .nav-group { gap: .18rem; }
  .site-header:not(.impact-header) .nav-group a,
  .site-header:not(.impact-header) .nav-actions > a {
    min-width: auto;
    padding-inline: .7rem;
    font-size: .68rem;
  }
}

@media (max-width: 767px) {
  /* Five columns leave four interior rules on the narrower canvas. */
  .site-grid-lines {
    opacity: 1;
  }
  .site-grid-lines .site-grid-line { left: calc(var(--line-index) * 100% / 5); }
  .site-grid-lines .site-grid-line:nth-child(n + 5) { display: none; }
  .site-header:not(.impact-header) .nav-actions { display: none; }
  .site-header:not(.impact-header) {
    padding: .75rem .65rem 0;
  }
  .site-header:not(.impact-header) .header-shell,
  .site-header:not(.impact-header).is-pinned .header-shell {
    min-height: 2.65rem;
  }
  /* The monogram is unusually fine-lined, so the phone version needs both a
     larger footprint and a fractional-pixel dilation to survive Safari's mask
     rasterisation. The paired shadows expand the silhouette instead of moving
     it, keeping the mark centred while strengthening its right-hand upright. */
  .site-header:not(.impact-header) .brand-mark {
    width: 1.625rem;
    height: 2.936rem;
  }
  .site-header:not(.impact-header) .brand-mark-vector {
    filter:
      drop-shadow(.75px 0 0 currentColor)
      drop-shadow(-.75px 0 0 currentColor)
      drop-shadow(0 .55px 0 currentColor)
      drop-shadow(0 -.55px 0 currentColor);
  }
  .site-header:not(.impact-header) .menu-button {
    min-width: auto;
    min-height: 2.65rem;
    padding: .55rem .35rem;
    font: var(--w-medium) .72rem/1 var(--font-ui);
    letter-spacing: .04em;
  }

  .site-header.is-menu-open {
    z-index: 60;
  }
  .site-header.is-menu-open .header-shell {
    opacity: 1 !important;
    transform: none !important;
  }
  .site-header.is-menu-open .brand-mark,
  .site-header.is-menu-open .menu-button {
    color: #f5eee9;
  }

  /* Over the page sheet the bar switches to ink. script.js sets is-on-light
     from the sheet's top edge; until then everything stays white over the film.
     The Enquire pill needs its own pair, since a translucent dark wash under
     white type has to become a translucent light wash under dark type. */
  .site-header:not(.impact-header).is-on-light {
    --nav-text: #19171d;
  }
  .site-header:not(.impact-header).is-on-light .brand-mark,
  .site-header:not(.impact-header).is-on-light .menu-button {
    color: #19171d;
  }
  /* On a phone Enquire is the word, not a pill. The base .header-cta carries a
     999px radius, padding and a filled background, and the nav rule above lays
     a translucent wash over it — together they drew a box around one word in a
     bar whose other two items (the mark and Menu) are plain. It now takes the
     bar's own colour and nothing else, so is-on-light only has to flip the ink,
     not swap one wash for another. */
  .site-header:not(.impact-header) .header-cta--compact {
    min-height: 44px;
    padding: .55rem 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--nav-text);
  }
  .site-header:not(.impact-header) .header-cta--compact:hover,
  .site-header:not(.impact-header) .header-cta--compact:focus-visible {
    background: transparent;
    box-shadow: none;
    color: var(--nav-text);
    opacity: .68;
    transform: none;
  }
  .site-header:not(.impact-header).is-on-light .header-cta--compact {
    background: transparent;
    color: #19171d;
  }
  /* The menu sheet is dark whatever is behind the bar, so it wins over both. */
  .site-header.is-menu-open.is-on-light .brand-mark,
  .site-header.is-menu-open.is-on-light .menu-button { color: #f5eee9; }

  .menu-button__label { display: block; }

  /* The phone bar matches the inner pages' (site-shell.css .tlh-nav): ENQUIRE
     left, MENU right, and open it reads CLOSE with the two bars crossed. */
  .site-header:not(.impact-header) .header-cta--compact,
  .site-header:not(.impact-header) .menu-button {
    font: 470 .75rem/1 var(--font-ui);
    letter-spacing: -.015em;
    text-transform: uppercase;
  }
  .site-header:not(.impact-header) .header-cta--compact { padding-inline: .6rem; }
  .site-header:not(.impact-header) .menu-button {
    display: inline-grid;
    grid-auto-flow: column;
    align-items: center;
    gap: .55rem;
  }
  .site-header .menu-button .menu-button__bars { display: none; width: 1rem; height: 1px; }
  .site-header .menu-button[aria-expanded="true"] .menu-button__bars { display: grid; }
  .site-header .menu-button .menu-button__bars i { grid-area: 1 / 1; width: 1rem; height: 1px; background: currentColor; }
  .site-header .menu-button .menu-button__bars i:first-child { transform: rotate(45deg); }
  .site-header .menu-button .menu-button__bars i:last-child { transform: rotate(-45deg); }
}

/* Who we are: pure white, large editorial copy and a clean film handoff. */
.story {
  /* Let the fixed three-dimensional TLH mark float through the second chapter. */
  background: transparent;
}
.story-reveal-primary {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -.045em;
}
.story,
.story-word,
.what-index-eyebrow,
.home-impact-eyebrow,
.home-impact-link,
.team-eyebrow,
.team-more span,
.impact-team-bridge p {
  color: var(--violet-text);
}
.story-reveal-secondary {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -.045em;
  color: var(--editorial-muted);
}
.story-film-band {
  /* The film remains in the paragraph chapter's visual field. The band itself
     has no paint, so the 3D mark stays visible until the video passes over it. */
  margin-top: 0;
  background: transparent !important;
}
.story-film-stage { background: transparent !important; }
.story-film-band::before { display: none !important; content: none !important; }
.story-film {
  border-radius: 0;
}

/* The circles introduce one pale-lavender chapter, rather than recolouring the
   entire remainder of the page. Their timing remains independent of scroll. */
.page-wash-circle.is-left,
.page-wash-circle.is-right {
  background: var(--editorial-lilac);
}
.ambient-haze-blob {
  background: radial-gradient(circle at 50% 50%, var(--haze-colour) 0%, rgba(95, 60, 145, .12) 42%, transparent 73%);
  mix-blend-mode: multiply;
}

/* What we do is the single softly coloured chapter. Its photography runs
   almost edge-to-edge and loses the app-card softness. */
.what-we-do.what-index-section {
  background: transparent;
}
.what-we-do.what-index-section::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: clamp(13rem, 30vh, 24rem);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 88%);
  pointer-events: none;
}
.what-index-layout {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--editorial-rule);
  padding-top: clamp(2rem, 4vw, 4.5rem);
}
.what-index-nav a {
  font-weight: var(--w-regular);
}
.what-index-card {
  --card-scrim: linear-gradient(180deg, rgba(15, 10, 20, .1) 0%, rgba(15, 10, 20, 0) 48%, rgba(15, 10, 20, .64) 100%);
  border: 1px solid rgba(255,255,255,.48);
  border-radius: 18px;
  box-shadow: 0 1.4rem 4.5rem rgba(50, 32, 67, calc(.04 + .11 * var(--card-focus)));
  transform: scale(calc(.94 + .06 * var(--card-focus)));
}
.what-index-card--challenge { --card-image: url("assets/impact/teams-01.jpg"); background-position: center; }
.what-index-card--science { --card-image: url("assets/impact/workshop.jpg"); background-position: center; }
.what-index-card--activation { --card-image: url("assets/impact/palo-alto-team.jpg"); background-position: center; }
.what-index-card::before {
  filter:
    grayscale(calc((1 - var(--card-focus)) * .38))
    saturate(calc(.88 + .12 * var(--card-focus)))
    brightness(calc(.94 + .06 * var(--card-focus)));
  transform: scale(calc(1.035 - .035 * var(--card-focus)));
  transition: filter .35s ease;
}
.what-index-card-label,
.what-index-services {
  opacity: clamp(0, calc((var(--card-focus) - .5) * 3.4), 1);
  transform: translateY(calc((1 - var(--card-focus)) * 1.2rem));
  transition: opacity .28s ease, transform .4s cubic-bezier(.22,.61,.36,1);
}
.what-index-card-label {
  width: fit-content;
  padding: .65rem .8rem;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  background: rgba(15,10,20,.18);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.what-index-services {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: end;
  gap: 1.2rem 2rem;
}
.what-index-services > div {
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.36);
}
.what-index-services dt { font-family: var(--font-display); font-weight: 400; }
.what-index-services dd { font-size: .86rem; }
/* Impact returns decisively to white. The globe is the visual event, so it no
   longer competes with a coloured ground or decorative haze. */
.home-impact {
  position: relative;
  background: var(--editorial-white);
  border-top: 1px solid var(--editorial-rule);
  border-bottom: 1px solid var(--editorial-rule);
}
.home-impact::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: clamp(8rem, 19vh, 15rem);
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
  pointer-events: none;
}
.home-impact-copy > p:not(.home-impact-eyebrow),
.home-impact-hint,
.home-impact-partners > p {
  color: var(--editorial-muted);
}
.home-impact-card {
  border-color: var(--editorial-rule);
  border-radius: 2px;
  background: rgba(255, 255, 255, .985);
  box-shadow: 0 1.5rem 4rem rgba(32, 20, 42, .11);
}

@media (min-width: 901px) {
  :root { --impact-drawer-width: 33.333vw; }
  .home-impact {
    position: relative;
    z-index: 0;
    min-height: min(116svh, 76rem);
    padding-bottom: clamp(7rem, 11vw, 10rem);
  }
  body.impact-drawer-open .site-header {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .home-impact {
    transition: padding-left .68s cubic-bezier(.16, 1, .3, 1), padding-right .68s cubic-bezier(.16, 1, .3, 1), gap .68s cubic-bezier(.16, 1, .3, 1), grid-template-columns .68s cubic-bezier(.16, 1, .3, 1);
  }
  .home-impact-copy {
    transform-origin: left center;
    transition: transform .68s cubic-bezier(.16, 1, .3, 1);
  }
  .home-impact-stage { min-width: 0; }
  .home-impact-globe { transition: transform .68s cubic-bezier(.16, 1, .3, 1); }
  body.impact-drawer-open .home-impact {
    grid-template-columns: minmax(15rem, .58fr) minmax(24rem, 1.05fr);
    gap: clamp(1.25rem, 2.4vw, 2.75rem);
    padding-left: max(1rem, calc(var(--frame-inset) - clamp(2rem, 4vw, 4rem)));
    padding-right: calc(var(--frame-inset) + var(--impact-drawer-width));
  }
  body.impact-drawer-open .home-impact-copy {
    transform: translate3d(clamp(-3rem, -2vw, -1.5rem), -4rem, 0) scale(.92);
  }
  body.impact-drawer-open .home-impact-globe {
    transform: translateX(clamp(2rem, 3vw, 4.5rem));
  }
  /* A case study behaves as a real edge drawer: it enters from beyond the
     viewport, owns the full right side while active, then retraces that motion
     when the marker/card loses hover. */
  .home-impact-card {
    position: fixed;
    z-index: 80;
    top: 0;
    right: 0;
    bottom: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(12rem, 32svh) minmax(0, 1fr);
    width: var(--impact-drawer-width);
    height: 100svh;
    max-width: none;
    max-height: none;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    border: 0;
    border-left: 1px solid var(--editorial-rule);
    border-radius: 0;
    background: #fff;
    box-shadow: -1.8rem 0 5rem rgba(32, 20, 42, .16);
    opacity: 1;
    transform: translate3d(102%, 0, 0);
    transition: transform .68s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .68s;
    visibility: hidden;
  }
  .home-impact-card.is-visible {
    transform: translate3d(0, 0, 0);
    transition-delay: 0s;
    visibility: visible;
  }
  .home-impact-card-client { min-height: 5rem; padding: 1.25rem 4rem 1.25rem 1.8rem; }
  .home-impact-card-media { min-height: 0; height: 100%; aspect-ratio: auto; }
  .home-impact-card-media img { object-position: center 70%; }
  .home-impact-card-copy {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: clamp(1.5rem, 2.4vw, 2.5rem);
  }
  .home-impact-card-copy > .home-impact-card-note { margin-top: auto; padding-top: 1rem; }
  .home-impact-card-copy > a { flex: 0 0 auto; margin-top: .75rem; }
  .home-impact-card-copy h3 { font-size: clamp(1.7rem, 2.15vw, 2.7rem); }
  .home-impact-card-close { position: fixed; top: .65rem; right: .65rem; z-index: 2; }
}
.home-impact-card-proof {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(8rem, .9fr);
  gap: 1rem;
  align-items: stretch;
  margin-top: 1.15rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--editorial-rule);
}
.home-impact-card-proof blockquote { margin: 0; }
.home-impact-card-quote { margin: 0; color: #3f3747; font-size: .88rem; font-style: italic; line-height: 1.45; }
.home-impact-card-attribution { display: block; margin-top: .65rem; color: var(--editorial-muted); font: 600 .5rem/1.35 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; }
.home-impact-card-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; min-height: 6rem; }
.home-impact-card-gallery img { width: 100%; height: 100%; min-height: 6rem; object-fit: cover; filter: saturate(.72) contrast(1.02); }
.home-impact-card-media img {
  filter: saturate(.7) contrast(1.02);
}

/* People remain the content: taller image planes, almost no container styling,
   and an editorial serif headline above them. */
.people-chapter {
  position: relative;
  z-index: 2;
  background: #382748;
}
.team {
  background: transparent;
  color: #f8f5fa;
}
.team-head {
  padding-top: clamp(1.5rem, 3vw, 3rem);
  border-top: 0;
}
.team-head h2 {
  max-width: 13ch;
  color: #f8f5fa;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -.045em;
}
.team-eyebrow { color: #dcc9ec; }
.team-intro p { color: rgba(248, 245, 250, .76); }
/* Meet the full team inverts on the dark team ground: white pill, purple type
   and arrow (Lauchie, 2026-10-06). Size and arrow are unchanged. */
.team-more,
.team-more span { color: var(--tlh-purple); }
.team-more { background: #fff; }
.team-more:hover { background: #f4eef8; color: var(--tlh-purple); }
.team-film-hint { color: rgba(248, 245, 250, .76); }
.team-film-hint__play { border-color: rgba(248, 245, 250, .42); }
.team-count { color: rgba(248, 245, 250, .64); }
.team-count strong { color: #fff; }
.team-progress { background: rgba(255, 255, 255, .2); }
.team-progress span { background: #dcc9ec; }
.team-arrows button {
  border-color: rgba(255, 255, 255, .34);
  color: #fff;
}
.team-arrows button:hover {
  border-color: #4c3074;
  background: #4c3074;
}
.team-panel-trigger {
  border-radius: 2px;
}
.team-row {
  gap: 2px;
}

/* A restrained editorial pause between the film and the image-led What We Do
   chapter. Its asymmetry borrows the rhythm of a printed opening spread. */
.impact-team-bridge {
  position: relative;
  z-index: 2;
  display: grid;
  /* The longer divider now occupies its own place in the document flow. It
     follows the film instead of climbing over its pinned stage. */
  margin-top: 0;
  min-height: 86svh;
  overflow: hidden;
  background: #fff;
  color: var(--violet);
  border-top: 1px solid var(--editorial-rule);
  border-bottom: 1px solid var(--editorial-rule);
  box-shadow: none;
}
.impact-team-bridge::before {
  content: none;
}

.impact-team-bridge__inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: auto 1fr auto;
  width: 100%;
  min-height: 52svh;
  padding: clamp(1.35rem, 2.5vw, 2.5rem) clamp(1.25rem, 3.2vw, 3.5rem) clamp(1.15rem, 2vw, 2rem);
  text-align: left;
}
.impact-team-bridge__kicker {
  position: relative;
  z-index: 1;
  grid-column: 2 / 4;
  grid-row: 1;
  justify-self: start;
  margin: .35rem 0 0;
  color: rgba(62, 49, 75, .72);
  font: italic 400 clamp(.72rem, .9vw, .92rem)/1.2 "Inter", "Geist", "Helvetica Neue", sans-serif;
  letter-spacing: -.015em;
  text-transform: none;
}
.impact-team-bridge__kicker::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -.5rem -1rem -.4rem -1.35rem;
  border: 1px solid rgba(76, 48, 116, .2);
  border-radius: 48% 53% 46% 57%;
  transform: rotate(8deg) skewX(-10deg);
}
.impact-team-bridge__kicker::after {
  content: "";
  position: absolute;
  top: calc(100% + .75rem);
  left: -2.2rem;
  width: 9rem;
  border-top: 1px solid rgba(76, 48, 116, .16);
}
.impact-team-bridge h2 {
  z-index: 1;
  grid-column: 3 / 7;
  grid-row: 1 / 3;
  align-self: start;
  max-width: 19ch;
  margin: clamp(2.5rem, 6vh, 4.8rem) 0 0;
  color: #35283f;
  font: 400 clamp(2.1rem, 3.85vw, 4.85rem)/.95 "Inter", "Geist", "Helvetica Neue", sans-serif;
  letter-spacing: -.04em;
  text-transform: uppercase;
}
.impact-team-bridge__note {
  z-index: 1;
  grid-column: 1 / 3;
  grid-row: 3;
  align-self: end;
  max-width: 25rem;
}
.impact-team-bridge__note h3 {
  margin: 0 0 .85rem;
  color: #35283f;
  font: 700 .65rem/1 var(--font-ui);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.impact-team-bridge__note p {
  margin: 0;
  color: rgba(53, 40, 63, .78);
  font: 500 clamp(.68rem, .78vw, .82rem)/1.55 var(--font-ui);
  letter-spacing: -.01em;
  text-transform: none;
}
.impact-team-bridge__mark {
  position: absolute;
  right: 20%;
  bottom: -3.6rem;
  display: grid;
  width: clamp(4.5rem, 6vw, 7rem);
  height: clamp(8rem, 11vw, 12.5rem);
  place-items: center;
  color: var(--violet);
  opacity: .12;
}
.impact-team-bridge__mark .brand-mark-vector { width: 100%; height: 100%; }

/* The team now begins directly inside its own coloured chapter. */
.people-chapter > .team {
  position: relative;
  z-index: 1;
  box-shadow: none;
}

/* Keep the monogram finale but let it emerge from the same white canvas. */
.site-footer {
  --footer-paper: #ffffff;
  --footer-line: var(--editorial-rule);
  background: var(--editorial-white);
}
.site-footer::before {
  background:
    radial-gradient(ellipse at 50% 54%, rgba(95, 60, 145, .09), transparent 22%),
    radial-gradient(ellipse at 50% 64%, rgba(36, 26, 46, .055), transparent 15%);
}
.site-footer__button,
.site-footer__button--secondary {
  border-radius: 999px;
}

/* The dedicated Impact page is white with the faintest cool cast. It keeps
   enough separation for the purple globe while reading as part of this system. */
.impact-page,
.impact-page .impact-header {
  --impact-paper: #fcfbfd;
  --impact-purple: #4c3074;
  background: #fcfbfd;
}
.impact-page .impact-partners,
.impact-page .impact-contact {
  background: #ffffff;
}
.impact-page .impact-partners {
  border-top: 1px solid var(--editorial-rule);
}
.impact-page .impact-contact {
  border-top: 1px solid var(--editorial-rule);
}

@media (max-width: 899px) {
  .impact-team-bridge__inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    padding: 1.5rem 1.25rem 1.35rem;
  }
  .impact-team-bridge__kicker {
    grid-column: 1;
  }
  .impact-team-bridge h2 {
    grid-column: 1;
    grid-row: 1 / 3;
    max-width: 13ch;
    margin-top: clamp(3.5rem, 8vh, 5rem);
    font-size: clamp(2rem, 9vw, 3.3rem);
  }
  .impact-team-bridge__note {
    grid-column: 1;
    max-width: min(78vw, 24rem);
  }
  .impact-team-bridge__mark {
    right: 1.25rem;
    bottom: -2.75rem;
  }
  .what-index-card { border-radius: 14px; }
  .what-index-services { grid-template-columns: 1fr; }
  .what-index-services dd { display: none; }
  .team-row { gap: .45rem; }
  .team-panel-trigger { border-radius: 2px; }
  .site-footer { background: #fff; }
}

@media (prefers-reduced-motion: reduce) {
  .what-index-card { transform: none; }
}

/* Final cascade for the continuous Impact handoff. The atlas stylesheet owns
   the component details; this layer keeps the editorial overrides aligned
   with the wider 42vw leaflet and rising off-white stage. */
.home-impact { background: #fbfaf8; }
.home-impact-link,
.home-impact-link:hover { color: #fff; }

@media (min-width: 900px) {
  :root { --impact-drawer-width: 42vw; }

  .home-impact {
    z-index: 4;
    grid-template-columns: minmax(18rem, .62fr) minmax(36rem, 1.38fr);
    gap: clamp(1rem, 2.5vw, 3rem);
    min-height: 112svh;
    /* The thread carries the handoff now, so this section no longer climbs a
       viewport over the closing plate. */
    margin-top: 0;
    padding-top: clamp(4rem, 7vh, 6rem);
    border-top: 0;
  }

  /* The off-white surface dissolves over the final photograph instead of
     arriving as a hard new viewport. The six site rules remain visible above
     this surface, giving both halves one continuous page structure. */
  .home-impact {
    isolation: isolate;
    background: transparent;
  }

  /* Solid, not a dissolve. The gradient let the closing photograph read through
     the top of this surface for the first 15svh — the section arrived looking
     half-transparent over the plate. It is an opaque edge rising now. */
  .home-impact::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    height: auto;
    background: #fbfaf8;
    pointer-events: none;
  }

  .home-impact-stage {
    opacity: var(--impact-copy-enter);
    transform: none;
    will-change: opacity;
  }

  /* Opens out of the thread's dot on a latch, not on scroll. It starts at the
     dot's own size and runs to the same resting .8 it always had, on its own
     transition — scrolling further must not make it bigger. */
  .home-impact-globe {
    opacity: 0;
    transform: scale(.018);
    transform-origin: 50% 50%;
    transition: opacity .18s linear, transform 1.65s cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform;
  }

  .home-impact.is-globe-open .home-impact-globe { opacity: 1; transform: scale(.8); }

  /* The thread goes as the globe arrives, so the two never read as two things. */
  .home-impact.is-globe-open .impact-thread { opacity: 0; transition: opacity .22s linear .04s; }

  body.impact-drawer-open .home-impact {
    grid-template-columns: minmax(14rem, .5fr) minmax(23rem, 1fr);
    gap: clamp(1rem, 2vw, 2.25rem);
    padding-right: calc(var(--frame-inset) + var(--impact-drawer-width));
  }

  body.impact-drawer-open .home-impact-copy {
    transform: translate3d(clamp(-2.5rem, -1.8vw, -1.25rem), 0, 0) scale(.94);
  }

  body.impact-drawer-open .home-impact-globe {
    opacity: 1;
    transform: translateX(clamp(1rem, 2vw, 3rem));
    transition: transform .68s cubic-bezier(.16, 1, .3, 1);
  }

  .home-impact-card {
    grid-template-rows: auto minmax(14rem, 34svh) minmax(0, 1fr);
    box-shadow: -1.2rem 0 4rem rgba(32, 20, 42, .13);
  }

  .home-impact-card-client {
    min-height: 5rem;
    padding: 1rem 4.2rem 1rem 1.8rem;
  }

  .home-impact-card-copy {
    padding: clamp(1.35rem, 2vw, 2.1rem) clamp(1.7rem, 2.4vw, 2.6rem) 2rem;
  }

  .home-impact-card-copy h3 { font-size: clamp(2rem, 2.8vw, 3.35rem); }
}

/* Compact atlas: the globe is a supporting object, every marker opens only a
   small editorial caption, and partner proof forms one continuous baseline. */
.home-impact {
  padding-bottom: 6.5rem;
}

.home-impact-globe {
  transform: scale(.8);
  transform-origin: 50% 50%;
}

.home-impact-partners {
  position: absolute;
  z-index: 7;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  width: auto;
  max-width: none;
  height: 5.5rem;
  margin: 0;
  padding: 0 var(--frame-inset);
  border-top: 1px solid rgba(76, 48, 116, .14);
  background: rgba(251, 250, 248, .94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transform: none;
}

.home-impact-partners > p {
  margin: 0;
  padding-right: clamp(1.5rem, 3vw, 3.5rem);
  color: #766d7f;
  white-space: nowrap;
}

.home-impact-partner-window {
  width: 100%;
  height: 5.4rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.home-impact-partner-group > span {
  flex-basis: clamp(7.5rem, 10vw, 10rem);
  width: clamp(7.5rem, 10vw, 10rem);
  height: 5.4rem;
  padding: 1rem 1.35rem;
}

.home-impact-partner-loop img {
  max-height: 2rem;
}

.home-impact-card {
  position: fixed;
  z-index: 80;
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  display: grid;
  grid-template-columns: 6.25rem minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  width: min(20rem, calc(100vw - 2rem));
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(76, 48, 116, .16);
  border-radius: 3px;
  background: rgba(255, 254, 251, .97);
  box-shadow: 0 1rem 2.8rem rgba(31, 21, 42, .16);
  -webkit-backdrop-filter: blur(16px) saturate(1.08);
  backdrop-filter: blur(16px) saturate(1.08);
  opacity: 0;
  transform: translate3d(var(--impact-card-x, -30rem), calc(var(--impact-card-y, -30rem) + 6px), 0) scale(.985);
  transform-origin: center;
  transition: opacity .18s ease, transform .24s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .24s;
  visibility: hidden;
}

.home-impact-card.is-visible {
  opacity: 1;
  transform: translate3d(var(--impact-card-x, -30rem), var(--impact-card-y, -30rem), 0) scale(1);
  transition-delay: 0s;
  visibility: visible;
}

.home-impact-card-client {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  min-height: 2.35rem;
  padding: .58rem .72rem;
  border-bottom: 1px solid rgba(76, 48, 116, .1);
  color: #5f5669;
  font-size: .46rem;
  letter-spacing: .12em;
}

.home-impact-card-client img {
  max-width: 4.5rem;
  height: .95rem;
}

.home-impact-card-client > span:not(.home-impact-card-place) {
  overflow: hidden;
  max-width: 12rem;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-impact-card-place {
  position: static;
  margin-left: auto;
  padding: 0;
  background: transparent;
  color: #81768b;
  font-size: .44rem;
  backdrop-filter: none;
}

.home-impact-card-media {
  grid-column: 1;
  grid-row: 2;
  width: 6.25rem;
  min-height: 0;
  height: 100%;
  aspect-ratio: auto;
  background: #e5e0e8;
}

.home-impact-card-media img {
  object-position: center;
  filter: saturate(.72) contrast(1.02);
}

.home-impact-card-copy {
  grid-column: 2;
  grid-row: 2;
  display: block;
  min-height: 0;
  padding: .78rem .82rem .72rem;
}

.home-impact-card-label {
  margin: 0 0 .42rem;
  font-size: .43rem;
  letter-spacing: .15em;
}

.home-impact-card-copy h3 {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #251d2c;
  font-size: 1.02rem;
  line-height: 1.08;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.home-impact-card-copy > .home-impact-card-summary {
  display: -webkit-box;
  margin: .42rem 0 0;
  overflow: hidden;
  color: #716878;
  font-size: .66rem;
  line-height: 1.38;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.home-impact-card-copy > a {
  display: flex;
  justify-content: space-between;
  min-height: 0;
  margin-top: .58rem;
  padding-top: .48rem;
  border-top: 1px solid rgba(76, 48, 116, .1);
  color: var(--violet);
  font-size: .45rem;
}

.home-impact-controls {
  bottom: 5.9rem;
}

@media (min-width: 900px) {
  .home-impact {
    min-height: 100svh;
    height: 100svh;
    padding-bottom: 5.5rem;
  }

  .home-impact-stage {
    min-height: 0;
    height: auto;
  }

  .home-impact-partners {
    opacity: var(--impact-copy-enter);
    will-change: opacity;
  }

  /* Second copy of this rule, later in the cascade — it has to match the one
     above or the globe goes back to scrubbing on scroll. */
  .home-impact-globe {
    opacity: 0;
    transform: scale(.018);
  }

  .home-impact.is-globe-open .home-impact-globe { opacity: 1; transform: scale(.8); }
}

/* Once the travelling dot becomes the globe, keep the completed atlas framed
   for another 1.25 viewports. The outer section supplies scroll distance while
   this inner composition stays pinned; fast wheel/trackpad input therefore
   cannot throw the viewer directly into the team chapter. */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .home-impact {
    display: block;
    width: 100%;
    height: 225svh;
    min-height: 225svh;
    padding: 0;
    overflow: visible;
  }

  .home-impact-pin {
    position: sticky;
    top: 0;
    display: grid;
    grid-template-columns: minmax(18rem, .62fr) minmax(36rem, 1.38fr);
    gap: clamp(1rem, 2.5vw, 3rem);
    width: 100%;
    height: 100svh;
    padding: clamp(4rem, 7vh, 6rem) var(--frame-inset) 5.5rem;
    overflow: hidden;
  }

  body.impact-drawer-open .home-impact-pin {
    grid-template-columns: minmax(14rem, .5fr) minmax(23rem, 1fr);
    gap: clamp(1rem, 2vw, 2.25rem);
    padding-right: calc(var(--frame-inset) + var(--impact-drawer-width));
  }
}

@media (max-width: 899px), (prefers-reduced-motion: reduce) {
  .home-impact-pin { display: contents; }
}

@media (max-width: 899px) {
  .home-impact {
    padding-bottom: 8rem;
  }

  .home-impact-partners {
    grid-template-columns: 1fr;
    height: 7rem;
    padding-inline: var(--frame-pad);
  }

  .home-impact-partners > p {
    align-self: end;
    padding: .8rem 0 0;
  }

  .home-impact-partner-window,
  .home-impact-partner-group > span {
    height: 4.7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-impact-globe { transform: scale(.8) !important; }
  .home-impact-card { transition: none; }
}

/* ── Impact preview card ──────────────────────────────────────────────────── */

/* The floating preview had shrunk to a 20rem tooltip with a 6.25rem thumbnail
   beside the text — it read as a system tooltip rather than a piece of TLH's
   work. It is a stacked card now: the photograph leads at full width, the
   client and place sit under it, and the headline gets room. Fewer words than
   before, but presence. positionPreview() measures the card live, so widening
   it needs no JS change. */
@media (min-width: 900px) {
  .home-impact-card {
    display: flex;
    flex-direction: column;
    width: min(27.5rem, calc(100vw - 2rem));
    grid-template-columns: none;
    grid-template-rows: none;
    border-radius: 4px;
    /* Solid, not frosted: at this size a translucent card sits hazily over the
       globe and reads cheap. The shadow does the lifting instead. */
    background: #fffefb;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 1.6rem 4.4rem rgba(31, 21, 42, .22);
  }

  .home-impact-card-media {
    order: 1;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .home-impact-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 55%;
    /* Was heavily desaturated to sit quietly as a thumbnail; at this size the
       photograph is the point. */
    filter: saturate(.82) contrast(1.02);
  }

  /* The place belongs on the photograph, not in a text row — it says where
     without spending a line. */
  .home-impact-card-place {
    position: absolute;
    /* top comes from home-atlas.css and would otherwise win over bottom. */
    top: auto;
    right: auto;
    bottom: .85rem;
    left: .95rem;
    padding: .3rem .6rem;
    border-radius: 2px;
    background: rgba(16, 10, 24, .58);
    color: #fff;
    font-size: .54rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  .home-impact-card-client {
    order: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    min-height: 0;
    padding: 1.1rem 1.5rem .2rem;
  }

  .home-impact-card-client img { max-width: 6.5rem; height: 1.6rem; filter: grayscale(1); opacity: .75; }
  .home-impact-card-client > span:not(.home-impact-card-place) {
    max-width: 18ch;
    color: #6f6678;
    font-size: .56rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-align: right;
  }

  .home-impact-card-copy { order: 3; padding: .7rem 1.5rem 1.35rem; }

  .home-impact-card-copy h3 {
    margin: 0;
    font-size: 1.42rem;
    line-height: 1.18;
    letter-spacing: -.02em;
    font-weight: var(--w-medium);
  }

  /* tlh-polish.css turns every card link into a filled purple pill. Inside a
     card this size that reads as a slab of colour across the bottom — the row
     is a quiet rule and a mark instead. */
  .home-impact-card-copy > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
    margin-top: 1rem;
    padding: .85rem 0 0;
    border: 0;
    border-top: 1px solid rgba(75, 55, 92, .12);
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: #2b2333;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
  }

  .home-impact-card-copy > a span {
    display: grid;
    width: 1.55rem;
    height: 1.55rem;
    place-items: center;
    border-radius: 50%;
    background: var(--tlh-purple, #4c3074);
    color: #fff;
    font-size: .6rem;
  }

  .home-impact-card-close { top: .4rem; right: .4rem; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
}

/* A location reveals a compact editorial case study beside the pin—still a
   popup, never a drawer or a second content panel. */
@media (min-width: 900px) {
  .home-impact .home-impact-card {
    display: grid;
    flex-direction: initial;
    grid-template-columns: 7.1rem minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    width: min(20.7rem, calc(100vw - 2rem));
    height: 13rem;
    border: 1px solid rgba(76, 48, 116, .16);
    border-radius: 9px;
    background: rgba(255, 254, 251, .98);
    box-shadow: 0 1.1rem 3rem rgba(31, 21, 42, .17);
  }

  .home-impact .home-impact-card-client {
    order: initial;
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: 2.7rem;
    padding: .62rem .78rem;
    border-bottom: 1px solid rgba(76, 48, 116, .1);
  }

  .home-impact .home-impact-card-identity {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: .55rem;
  }

  .home-impact .home-impact-card-client img {
    max-width: 4rem;
    height: .85rem;
  }

  .home-impact .home-impact-card-identity > span {
    max-width: 8.5rem;
    overflow: hidden;
    color: #352b3e;
    font-size: .49rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-align: left;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .home-impact .home-impact-card-sector {
    max-width: 7.5rem;
    overflow: hidden;
    color: #81768b;
    font-size: .42rem;
    letter-spacing: .06em;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .home-impact .home-impact-card-place {
    position: static;
    inset: auto;
    margin-left: auto;
    padding: 0;
    background: transparent;
    color: #81768b;
    font-size: .42rem;
    backdrop-filter: none;
  }

  .home-impact .home-impact-card-media {
    order: initial;
    grid-column: 1;
    grid-row: 2;
    width: 7.1rem;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
  }

  .home-impact .home-impact-card-media img {
    object-fit: cover;
    object-position: center;
    filter: saturate(.76) contrast(1.02);
  }

  .home-impact .home-impact-card-copy {
    order: initial;
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    padding: .75rem .82rem .66rem;
  }

  .home-impact .home-impact-card-label {
    margin: 0 0 .34rem;
    font-size: .4rem;
  }

  .home-impact .home-impact-card-copy h3 {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: 1.04rem;
    line-height: 1.07;
    letter-spacing: -.02em;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .home-impact .home-impact-card-copy > .home-impact-card-summary {
    display: -webkit-box;
    margin: .35rem 0 0;
    overflow: hidden;
    color: #716878;
    font-size: .58rem;
    line-height: 1.34;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .home-impact .home-impact-card-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .32rem;
    margin-top: .62rem;
    padding-top: .5rem;
    border-top: 1px solid rgba(76, 48, 116, .1);
  }

  .home-impact .home-impact-card-stats > span {
    display: grid;
    gap: .12rem;
  }

  .home-impact .home-impact-card-stats strong {
    color: #302638;
    font-family: "Inter", "Geist", "Helvetica Neue", sans-serif;
    font-size: .9rem;
    font-weight: 400;
    line-height: 1;
  }

  .home-impact .home-impact-card-stats small {
    color: #867b8e;
    font-size: .32rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: .05em;
    text-transform: uppercase;
  }

  .home-impact .home-impact-card-quote {
    min-height: 0;
    margin: .58rem 0 0;
    padding-left: .55rem;
    overflow: hidden;
    border-left: 2px solid rgba(76, 48, 116, .28);
  }

  .home-impact .home-impact-card-quote p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: #5f5568;
    font-family: "Inter", "Geist", "Helvetica Neue", sans-serif;
    font-size: .61rem;
    font-style: italic;
    line-height: 1.32;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .home-impact .home-impact-card-quote:not(.is-summary) p::before { content: "“"; }
  .home-impact .home-impact-card-quote:not(.is-summary) p::after { content: "”"; }

  .home-impact .home-impact-card-quote cite {
    display: block;
    margin-top: .22rem;
    overflow: hidden;
    color: #8b8193;
    font: 700 .31rem/1.2 var(--font-ui);
    letter-spacing: .06em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .home-impact .home-impact-card-copy > a {
    min-height: 0;
    margin-top: auto;
    padding: .38rem 0 0;
    color: var(--violet);
    font-size: .44rem;
  }

  .home-impact .home-impact-card-copy > a span {
    width: 1.25rem;
    height: 1.25rem;
    font-size: .5rem;
  }
}

/* The monogram's colour, at every width. Brand purple over light ground, white
   over the film, photographs and the dark sections, white again with the menu
   open. The ink rule above only covered phones, so on a laptop the mark stayed
   white when the bar dropped back in over a white section and vanished, while
   the buttons, on their own dark wash, stayed readable. */
.site-header:not(.impact-header) .brand-mark { color: #fff; }
.site-header:not(.impact-header).is-on-light:not(.is-mark-on-light) .brand-mark { color: #fff; }
.site-header:not(.impact-header).is-mark-on-light .brand-mark { color: #5f3c91; }
.site-header.is-menu-open .brand-mark,
.site-header.is-menu-open.is-mark-on-light .brand-mark { color: #f5eee9; }
/* The inline mark is solid vector, so the Safari mask dilation is not needed. */
.site-header:not(.impact-header) .brand-mark-vector.is-inline { filter: none; }

/* Film band captions (Home → The film band — captions): the site's type in a
   quiet ink band rather than the browser's large default. */
.story-film-video::cue {
  background: rgba(23, 19, 28, .72);
  color: #fff;
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(.9rem, 1.35vw, 1.2rem);
  line-height: 1.45;
}

/* Logo bar: every logo at an even visual size, like the Our Impact wall.
   --logo-h comes from src/lib/logos.ts (a square mark is 1 unit tall, a long
   wordmark less), so each cell takes its logo's own width. */
.home-impact-partners { --logo-unit: 3rem; }
.home-impact-partner-group > span { flex-basis: auto; width: auto; padding: 1rem clamp(1.25rem, 2.2vw, 2.1rem); }
.home-impact-partner-loop img { width: auto; max-width: none; height: calc(var(--logo-h, .6) * var(--logo-unit)); max-height: none; }
@media (max-width: 899px) { .home-impact-partners { --logo-unit: 2.45rem; } }