/* Sonder homepage / Evergreen, September 2026.
   One offer, one action. Mobile is a type-led composition, not a scaled desktop.
   This file is loaded only by index.html. Other pages keep their own palette. */
body.sonder-home.sonder-restored {
  --si-evergreen: #112e28;
  --si-ivory: #f4f1e9;
  --si-sage: #b6cbb9;
  --si-muted: #c0cdc5;
  --si-rule: #3d554d;
  --si-gutter: clamp(24px, 4.5vw, 72px);
  --sh-paper: #f6f5f0;
}
.sonder-home.sonder-restored .ss-nav {
  background: var(--si-evergreen);
  color: var(--si-ivory);
  border: 0;
}
.sonder-home.sonder-restored .ss-nav .ss-nav-inner {
  max-width: 1584px;
  min-height: 92px;
  padding-inline: var(--si-gutter);
  gap: 24px;
}
.sonder-home.sonder-restored .ss-nav .ss-nav-brand img {
  width: 136px;
  filter: brightness(0) invert(1);
  opacity: .96;
}
.sonder-home.sonder-restored .ss-nav .ss-nav-links > a {
  color: var(--si-ivory);
  font-weight: 450;
}
.sonder-home.sonder-restored .ss-nav .ss-nav-links > .ss-nav-cta {
  min-height: 46px;
  padding: 11px 17px;
  gap: 20px;
  border: 1px solid #81948a;
  border-radius: 5px;
  background: transparent;
  color: var(--si-ivory);
  overflow: hidden;
  transform: none;
}
.sonder-home.sonder-restored .ss-nav .ss-nav-cta .sh-button-reveal {
  display: none;
}
.sonder-home.sonder-restored .ss-nav .ss-nav-cta .sh-button-label {
  position: static;
  font-size: 13px !important;
  font-weight: 450;
  transform: none;
  opacity: 1;
}
.sonder-home.sonder-restored .ss-nav .ss-nav-cta .sh-button-arrow {
  position: static;
  display: inline;
  width: auto;
  height: auto;
  margin: 0;
  background: none;
  color: inherit;
  transform: none;
  font-size: 19px;
}
.sonder-home.sonder-restored .ss-nav :is(a, button):focus-visible {
  outline: 2px solid var(--si-sage);
  outline-offset: 5px;
}
.sonder-home.sonder-restored .sh-hero-minimal {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--si-evergreen);
  color: var(--si-ivory);
  isolation: isolate;
}
.sh-hero-minimal .si-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  align-items: center;
  gap: 32px;
  width: calc(100% - var(--si-gutter) * 2);
  max-width: 1440px;
  min-height: clamp(610px, calc(89svh - 92px), 770px);
  margin-inline: auto;
  padding-block: 58px 86px;
  border-top: 1px solid var(--si-rule);
}
.sh-hero-minimal .si-hero-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
}
.sonder-home .sh-hero-minimal .si-hero-title {
  max-width: 100%;
  margin: 0;
  color: var(--si-ivory);
  font-family: 'Sonder Hanken', Arial, sans-serif;
  font-size: clamp(64px, 7.25vw, 112px);
  font-weight: 450;
  line-height: 1.025;
  letter-spacing: -.055em;
  text-wrap: initial;
}
.sh-hero-minimal .si-hero-title > span {
  display: block;
}
.sonder-home .sh-hero-minimal .si-hero-title em {
  display: block;
  margin-top: .025em;
  color: var(--si-sage);
  font-family: 'Sonder Instrument', Georgia, serif;
  font-size: 1.035em;
  font-style: italic;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.035em;
  white-space: normal;
}
.sonder-home .sh-hero-minimal .si-hero-description {
  max-width: 38ch;
  margin: 30px 0 0;
  color: var(--si-muted);
  font-size: clamp(17px, 1.35vw, 19px);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -.01em;
  text-wrap: pretty;
}
.sonder-home .sh-hero-minimal .si-hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 54px;
  max-width: 100%;
  margin-top: 32px;
  padding: 15px 20px;
  border: 1px solid var(--si-ivory);
  border-radius: 5px;
  background: var(--si-ivory);
  color: var(--si-evergreen);
  font-size: 15px;
  font-weight: 550;
  line-height: 1.45;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s ease, border-color .2s ease;
}
.sh-hero-minimal .si-hero-cta > span:last-child {
  display: grid;
  flex: 0 0 20px;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 0;
  background: none;
  color: inherit;
  transition: transform .2s ease;
}
.sh-hero-minimal .si-hero-cta svg {
  display: block;
  width: 20px;
  height: 20px;
}
.sonder-home .sh-hero-minimal .si-hero-cta:focus-visible {
  outline: 2px solid var(--si-sage);
  outline-offset: 6px;
}
/* The existing Sonder sculpture is an accent on spacious screens only. */
.sonder-home.sonder-restored .sh-hero-minimal .sh-liquid {
  display: block;
  align-self: center;
  justify-self: center;
  width: 100%;
  max-width: 540px;
  min-width: 0;
  margin: 0;
}
.sonder-home.sonder-restored .sh-hero-minimal .sh-liquid::before {
  display: none;
}
.sonder-home.sonder-restored .sh-hero-minimal .sh-liquid-stage {
  height: auto;
  max-height: 570px;
  aspect-ratio: 1 / 1.15;
  border: 0;
  border-radius: 0;
  background: transparent;
  touch-action: pan-y pinch-zoom;
}
.sonder-home.sonder-restored .sh-hero-minimal .sh-liquid-stage canvas {
  filter: saturate(.23) brightness(1.5);
}
.sonder-home.sonder-restored .sh-hero-minimal .sh-liquid-shadow {
  opacity: .25;
}
.sonder-home.sonder-restored .sh-hero-minimal .sh-liquid-fallback {
  background: radial-gradient(ellipse at 25% 16%, #e4e9de, #b5c9ba 18%, #739685 34%, #3c6653 58%, #203d32 78%, #9bb5a5);
}
.sonder-home.sonder-restored .sh-hero-minimal .sh-logo-pause {
  left: auto;
  right: 8px;
  bottom: 8px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--si-rule);
  background: transparent;
  color: var(--si-sage);
}
.sonder-home.sonder-restored .sh-hero-minimal :is(.sh-logo-pause, .sh-liquid-stage):focus-visible {
  outline: 2px solid var(--si-sage);
  outline-offset: -4px;
}
/* A quiet transition into the existing work. Client content is unchanged. */
.sonder-home.sonder-restored .sh-clients {
  width: calc(100% - var(--si-gutter) * 2);
  max-width: 1440px;
  padding-top: 52px;
}
@media (hover: hover) and (pointer: fine) {
  .sonder-home .sh-hero-minimal .si-hero-cta:hover {
    background: var(--si-sage);
    border-color: var(--si-sage);
  }
  .sh-hero-minimal .si-hero-cta:hover > span:last-child {
    transform: translate(2px, -2px);
  }
  .sonder-home.sonder-restored .ss-nav .ss-nav-links > .ss-nav-cta:hover {
    background: var(--si-ivory);
    color: var(--si-evergreen);
    border-color: var(--si-ivory);
  }
}
@media (min-width: 901px) and (max-width: 1150px) {
  .sh-hero-minimal .si-hero-layout {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    gap: 20px;
    min-height: 580px;
  }
  .sonder-home .sh-hero-minimal .si-hero-title {
    font-size: clamp(62px, 7.1vw, 82px);
  }
}
@media (max-width: 900px) {
  body.sonder-home.sonder-restored {
    --si-gutter: clamp(24px, 5.4vw, 40px);
  }
  .sonder-home.sonder-restored .ss-nav .ss-nav-inner {
    min-height: 80px;
    gap: 0 16px;
  }
  .sonder-home.sonder-restored .ss-nav .ss-nav-brand {
    min-height: 80px;
  }
  .sonder-home.sonder-restored .ss-nav .ss-nav-brand img {
    width: 120px;
  }
  .sonder-home.sonder-restored .ss-nav .ss-nav-toggle {
    color: var(--si-ivory);
    font-size: 13px;
    font-weight: 450;
  }
  .sonder-home.sonder-restored .ss-nav[data-menu-ready] .ss-nav-toggle-icon {
    background: transparent;
    border-color: #81948a;
    color: var(--si-ivory);
    transform: none;
  }
  .sonder-home.sonder-restored .ss-nav[data-menu-ready] .ss-nav-toggle[aria-expanded='true'] .ss-nav-toggle-icon {
    background: var(--si-ivory);
    color: var(--si-evergreen);
    border-color: var(--si-ivory);
  }
  .sonder-home.sonder-restored .ss-nav[data-menu-ready] .ss-nav-links {
    width: calc(100% + var(--si-gutter) * 2);
    margin-inline: calc(-1 * var(--si-gutter));
    padding: 12px var(--si-gutter) 28px;
    background: var(--si-evergreen);
    color: var(--si-ivory);
  }
  .sonder-home.sonder-restored .ss-nav[data-menu-ready] .ss-nav-links > a:not(.ss-nav-cta) {
    min-height: 66px;
    padding-block: 14px;
    border-color: var(--si-rule);
    color: var(--si-ivory);
    font-size: clamp(29px, 5vw, 44px);
    font-weight: 450;
    line-height: 1.15;
  }
  .sonder-home.sonder-restored .ss-nav .ss-menu-number,
  .sonder-home.sonder-restored .ss-nav .ss-menu-arrow,
  .sonder-home.sonder-restored .ss-nav .ss-menu-note .ss-menu-location {
    color: var(--si-sage);
  }
  .sonder-home.sonder-restored .ss-nav .ss-menu-note {
    border-color: var(--si-rule);
  }
  .sonder-home.sonder-restored .ss-nav .ss-menu-note :is(.ss-menu-intro, a) {
    color: var(--si-ivory);
  }
  .sonder-home.sonder-restored .ss-nav[data-menu-ready] .ss-nav-links > .ss-nav-cta {
    justify-content: space-between;
    width: auto;
    min-height: 52px;
    margin-block: 26px;
    background: var(--si-ivory);
    color: var(--si-evergreen);
    border-color: var(--si-ivory);
  }
  .sonder-home.sonder-restored .ss-nav[data-menu-ready] .ss-nav-links a:focus-visible {
    outline-color: var(--si-sage);
  }
  .sh-hero-minimal .si-hero-layout {
    display: block;
    width: calc(100% - var(--si-gutter) * 2);
    min-height: 0;
    padding-block: clamp(52px, 9vw, 76px) clamp(64px, 10vw, 92px);
  }
  .sonder-home .sh-hero-minimal .si-hero-title {
    font-size: clamp(44px, 13.65vw, 92px);
    line-height: 1.04;
    letter-spacing: -.052em;
  }
  .sonder-home .sh-hero-minimal .si-hero-title em {
    margin-top: .035em;
    font-size: 1.01em;
    line-height: 1.11;
    letter-spacing: -.038em;
  }
  .sonder-home .sh-hero-minimal .si-hero-description {
    max-width: 28ch;
    margin-top: 25px;
    font-size: 16px;
    line-height: 1.6;
  }
  .sonder-home .sh-hero-minimal .si-hero-cta {
    width: auto;
    min-height: 54px;
    max-width: 100%;
    margin-top: 28px;
    padding: 15px 19px;
    gap: 30px;
    font-size: 14px;
  }
  .sonder-home.sonder-restored .sh-hero-minimal .sh-liquid {
    display: none;
  }
  .sonder-home.sonder-restored .sh-clients {
    padding-top: 38px;
  }
}
@media (max-width: 359px) {
  body.sonder-home.sonder-restored { --si-gutter: 22px; }
  .sonder-home .sh-hero-minimal .si-hero-title { font-size: 13.35vw; }
  .sh-hero-minimal .si-hero-layout { padding-block: 44px 54px; }
}
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  .sh-hero-minimal .si-hero-layout { padding-block: 32px 44px; }
  .sonder-home .sh-hero-minimal .si-hero-title { font-size: clamp(42px, 7vw, 62px); }
}
@media (prefers-reduced-motion: reduce) {
  .sh-hero-minimal *, .sh-hero-minimal *::before, .sh-hero-minimal *::after,
  .sonder-home.sonder-restored .ss-nav * {
    animation: none !important;
    transition: none !important;
  }
  .sh-hero-minimal .si-hero-cta:hover > span:last-child { transform: none; }
  .sonder-home.sonder-restored .ss-nav .sh-button-arrow { transform: none !important; }
}