/* Shared photographic hero for the homepage and B preview. */
.home-landscape .hb-hero {
  --hb-ink: #102138;
  --hb-muted: #293f52;
  --hb-blue: #1458aa;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 710px;
  height: min(940px, calc(100svh - 76px));
  background: #edf3f7;
  color: var(--hb-ink);
  color-scheme: light;
}
.hb-landscape { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hb-landscape picture { display: block; width: 100%; height: 100%; }
.hb-landscape::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, #edf3f7eb, #edf3f7b3 105px, transparent 240px),
    linear-gradient(90deg, #edf3f7d9, #edf3f7c2 32%, #edf3f773 53%, transparent 76%);
}
.home-landscape .hb-landscape-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 78% 55%;
  transform: scale(1.025);
  transform-origin: 78% 65%;
}
.home-landscape .hb-shell {
  position: relative;
  width: calc(100% - clamp(48px, 10vw, 160px));
  height: 100%;
  min-height: inherit;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 150px 82px;
}
.home-landscape .hb-horizon-note {
  position: absolute;
  right: 0;
  top: 142px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--hb-muted);
  text-align: right;
}
.hb-intro { max-width: 790px; }
.home-landscape .hb-intro h1 { font-family: Inter, sans-serif; font-size: 22px; font-weight: 500; line-height: 1.4; }
.home-landscape .hb-promise {
  margin-top: 22px;
  font-family: "Avenir Next", "Helvetica Neue", Inter, sans-serif;
  font-size: 68px;
  font-weight: 300;
  line-height: 1.12;
  text-wrap: initial;
}
.home-landscape .hb-description { margin-top: 26px; color: var(--hb-muted); font-size: 18px; font-weight: 450; line-height: 1.65; }
.home-landscape .hb-pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 610px;
  max-width: 100%;
  margin: 38px 0 0;
  padding: 0;
  list-style: none;
}
.hb-pillars li { position: relative; min-width: 0; }
.hb-pillar--clarity { --hb-pillar-color: #2246e5; }
.hb-pillar--integrity { --hb-pillar-color: #388548; }
.hb-pillar--trust { --hb-pillar-color: #d9932d; }
.hb-pillar--impact { --hb-pillar-color: #57159f; }
.hb-pillars li + li { border-left: 1px solid #10213840; }
.home-landscape .hb-pillars a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
  padding: 0 22px 16px;
  color: var(--hb-ink);
  text-decoration: none;
  font-size: 15px;
  font-weight: 450;
  line-height: 1.45;
}
.home-landscape .hb-pillars li:first-child a { padding-left: 0; }
.home-landscape .hb-pillars strong { font-weight: 600; }
.hb-pillar-dot { display: block; width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background: var(--hb-pillar-color); }
.home-landscape .hb-pillars a:hover strong, .home-landscape .hb-pillars a:focus-visible strong { text-decoration: underline; text-decoration-color: var(--hb-pillar-color); text-underline-offset: 5px; }
.hb-pillar-line {
  position: absolute;
  left: 22px;
  bottom: 0;
  width: 34px;
  height: 2px;
  background: var(--hb-pillar-color);
  transform: scaleX(.2);
  transform-origin: left;
  opacity: .35;
}
.hb-pillars li:first-child .hb-pillar-line { left: 0; }
.hb-hero-foot { position: absolute; bottom: 26px; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.home-landscape .hb-explore { display: inline-flex; gap: 16px; align-items: center; min-height: 44px; color: var(--hb-ink); font-size: 15px; font-weight: 550; text-decoration: none; }
.home-landscape .hb-explore:hover { text-decoration: underline; }
.home-landscape .hb-explore .lucide { width: 18px; height: 18px; }
.home-landscape .hb-motion {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 1px solid #ffffff80;
  border-radius: 50%;
  padding: 0;
  background: #10213859;
  color: #fff;
  cursor: pointer;
}
.hb-motion span { display: flex; }
.home-landscape .hb-motion .lucide { width: 16px; height: 16px; }
.hb-motion:hover { background: #102138b3; }
.home-landscape .hb-hero :is(a,button):focus-visible { outline: 2px solid var(--hb-blue); outline-offset: 5px; }
.home-landscape .hb-hero-foot button:focus-visible { outline-color: #fff; }

/* The daylight photograph needs the dark wordmark, even in system dark mode. */
html[data-nav-experiment="floating"] body.home.home-refresh.home-landscape nav.site-nav:not(.is-scrolled) {
  --masthead-ink: #102138;
  --masthead-muted: #293f52;
  --masthead-line: #10213826;
  --masthead-surface: transparent;
  --masthead-blur: none;
}
html[data-nav-experiment="floating"] body.home-landscape nav.site-nav:not(.is-scrolled) .menubar-logo { content: url("img/sd-dot-logo.png"); }

@media (min-width: 1800px) {
  .home-landscape .hb-promise { font-size: 78px; }
  .home-landscape .hb-description { font-size: 20px; }
  .home-landscape .hb-pillars { width: 650px; margin-top: 44px; }
  .home-landscape .hb-pillars a { font-size: 16px; }
}
@media (min-width: 701px) and (max-height: 800px) {
  .home-landscape .hb-hero { min-height: 610px; }
  .home-landscape .hb-shell { padding-block: 130px 76px; }
  .home-landscape .hb-promise { font-size: 56px; margin-top: 14px; }
  .home-landscape .hb-description { font-size: 17px; margin-top: 18px; }
  .home-landscape .hb-pillars { margin-top: 26px; }
  .home-landscape .hb-horizon-note { top: 122px; }
}
@media (min-width: 701px) and (max-width: 1100px) {
  .home-landscape .hb-shell { width: calc(100% - 64px); }
  .home-landscape .hb-hero { height: min(880px, calc(100svh - 76px)); min-height: 760px; }
  .home-landscape .hb-promise { font-size: 56px; }
  .home-landscape .hb-horizon-note { top: 126px; }
  .home-landscape .hb-landscape-image { object-position: 78% 50%; }
  .hb-landscape::after {
    background:
      linear-gradient(180deg, #edf3f7eb, #edf3f7b3 160px, transparent 280px),
      linear-gradient(90deg, #edf3f7eb, #edf3f7c9 48%, #edf3f773 75%, #edf3f740);
  }
}
@media (max-width: 700px) {
  .home-landscape .hb-hero { min-height: 720px; height: calc(100svh - 48px); max-height: 950px; }
  .home-landscape .hb-shell { width: calc(100% - 40px); justify-content: flex-start; padding-block: 118px 76px; }
  .hb-landscape picture { position: absolute; bottom: 0; height: 55%; }
  .home-landscape .hb-landscape-image { object-position: 82% bottom; transform-origin: 80% 80%; }
  .hb-landscape::after { background: linear-gradient(180deg, #edf3f7 43%, #edf3f7d9 49%, #edf3f740 59%, transparent 68%); }
  .home-landscape .hb-horizon-note { display: none; }
  .home-landscape .hb-intro h1 { font-size: 17px; }
  .home-landscape .hb-promise { font-size: 38px; line-height: 1.14; margin-top: 16px; }
  .home-landscape .hb-description { margin-top: 20px; font-size: 15px; line-height: 1.65; max-width: 400px; }
  .home-landscape .hb-description br { display: none; }
  .home-landscape .hb-pillars { margin-top: 28px; }
  .home-landscape .hb-pillars a { gap: 10px; padding: 0 10px 14px; font-size: 12px; }
  .hb-pillar-dot { width: 27px; height: 27px; }
  .hb-pillar-line { left: 10px; width: 24px; }
  .hb-hero-foot { bottom: 20px; }
  .home-landscape .hb-explore { font-size: 13px; gap: 10px; color: #fff; text-shadow: 0 1px 8px #102138a0; }
  .home-landscape .hb-explore:focus-visible { outline-color: #fff; }
}
@media (max-width: 380px) {
  .home-landscape .hb-shell { width: calc(100% - 32px); padding-top: 104px; }
  .home-landscape .hb-promise { font-size: 32px; }
  .home-landscape .hb-description { font-size: 14px; }
  .home-landscape .hb-pillars a { padding-inline: 8px; font-size: 11px; }
  .hb-pillar-line { left: 8px; }
}
@media (max-width: 700px) and (max-height: 740px) {
  .home-landscape .hb-hero { min-height: 600px; height: calc(100svh - 40px); }
  .home-landscape .hb-shell { padding-top: 104px; }
  .home-landscape .hb-promise { font-size: 30px; margin-top: 12px; }
  .home-landscape .hb-description { font-size: 14px; margin-top: 16px; }
  .home-landscape .hb-pillars { margin-top: 22px; }
  .hb-landscape picture { height: 46%; }
  .hb-landscape::after { background: linear-gradient(180deg, #edf3f7 52%, #edf3f7d9 57%, #edf3f740 66%, transparent 75%); }
  .hb-hero-foot { bottom: 16px; }
}
@media (max-width: 350px) and (max-height: 740px) {
  .home-landscape .hb-promise { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-landscape .hb-landscape-image { transform: none !important; }
  .hb-pillar-line { transform: scaleX(1) !important; opacity: .6 !important; }
}