/* Viewport-fit hero with a distinct surface for each skin. */
html[data-theme="forest"] { --hero-title-accent: #0e7253; }
html[data-theme="crystal"] { --hero-title-accent: #1d50ed; }
html[data-theme="bloom"] { --hero-title-accent: #e54175; }

html[data-theme] .hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) 95px;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  min-width: 0;
  border: 0;
}
html[data-theme] .hero-inner { height: 100%; min-height: 0; min-width: 0; padding-top: 80px; }
html[data-theme] .hero-art { max-height: calc(100dvh - 220px); display: flex; align-items: center; }
html[data-theme] .hero-art img { max-height: calc(100dvh - 220px); object-fit: contain; }
html[data-theme] .trust-strip {
  height: 95px;
  margin-top: 0;
  border: 0;
}
html[data-theme] .trust-strip::before { content: none; }
html[data-theme] .logo-window { mask-image: none; }

html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) {
  --paper: #fff;
}
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) body,
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .cloud,
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .closing {
  background: #fff;
}
html[data-theme="forest"] .hero {
  background: radial-gradient(ellipse at 78% 48%, #fffdf6 0%, #f8f4ea 54%, #f1eee3 100%);
}
html[data-theme="crystal"] .hero {
  background: radial-gradient(ellipse at 78% 48%, #f8fcff 0%, #edf6ff 50%, #e4f0ff 100%);
}
html[data-theme="bloom"] .hero {
  background: radial-gradient(ellipse at 78% 48%, #fffaf9 0%, #fff2f5 52%, #ffeaf2 100%);
}
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .hero h1 em {
  font-style: normal;
  color: var(--hero-title-accent);
}
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .research {
  color: #f7f7f7;
  background-color: #090909;
  background-image: linear-gradient(rgba(0,0,0,.13), rgba(0,0,0,.22)), url('assets/portfolio-ink-marble-hires.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .research-heading p { color: #c7c7c7; }
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .research-logos img+img { border-color: #555; }

html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .closing-copy {
  position: relative;
  z-index: 2;
}
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .closing-background {
  top: 400px;
  bottom: auto;
  left: 50%;
  right: auto;
  width: min(100%, 1900px);
  height: auto;
  min-height: 0;
  transform: translateX(-50%);
  object-fit: contain;
  opacity: 1;
}
html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .footer-card {
  margin-top: 370px;
}

@media (max-width: 767px) {
  html[data-theme] .hero { grid-template-rows: minmax(0, 1fr) 88px; }
  html[data-theme] .hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
    padding-top: clamp(78px, 14dvh, 105px);
    gap: 0;
  }
  html[data-theme] .hero-copy { text-align: center; }
  html[data-theme] .hero-actions { justify-content: center; }
  html[data-theme] .hero-art {
    width: min(92%, 440px);
    height: 100%;
    min-height: 0;
    max-height: none;
    margin: 0 auto;
    padding-bottom: 10px;
    align-items: end;
    justify-content: center;
  }
  html[data-theme] .hero-art img {
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center bottom;
  }
  html[data-theme] .trust-strip { height: 88px; margin: 0 20px; }
  html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .closing-background {
    top: 400px;
    left: 50%;
    right: auto;
    width: 160%;
  }
  html:is([data-theme="forest"],[data-theme="crystal"],[data-theme="bloom"]) .footer-card { margin-top: 300px; }
}