:root,
[data-md-color-primary="custom"] {
  --md-primary-fg-color: #0285bd;
  --md-primary-fg-color--light: #35a4d3;
  --md-primary-fg-color--dark: #016b98;
}

:root,
[data-md-color-accent="custom"] {
  --md-accent-fg-color: #0285bd;
  --md-accent-fg-color--transparent: rgb(2 133 189 / 10%);
}

/* The horizontal Deceema wordmark needs more room than Material's icon slot. */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.8rem;
  width: auto;
}

/* Home-page hero */
.home-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0 0 2.4rem;
  padding: clamp(1.8rem, 5vw, 3.5rem);
  border-radius: 0.7rem;
  background:
    radial-gradient(circle at 90% 10%, rgb(255 255 255 / 20%), transparent 32%),
    linear-gradient(135deg, #016b98 0%, #0285bd 55%, #22a8df 100%);
  box-shadow: 0 0.8rem 2rem rgb(1 107 152 / 18%);
  color: #fff;
}

.home-hero::after {
  position: absolute;
  z-index: -1;
  right: -4rem;
  bottom: -6rem;
  width: 14rem;
  height: 14rem;
  border: 1.8rem solid rgb(255 255 255 / 8%);
  border-radius: 50%;
  content: "";
}

.home-hero h1 {
  max-width: 32rem;
  margin: 0.35rem 0 0.7rem;
  color: #fff;
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.home-hero__eyebrow {
  color: rgb(255 255 255 / 78%);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.home-hero__lead {
  max-width: 39rem;
  margin: 0 0 1.4rem;
  color: rgb(255 255 255 / 88%);
  font-size: 1rem;
  line-height: 1.65;
}

.home-hero .md-button {
  margin: 0.25rem 0.4rem 0.25rem 0;
  border-color: rgb(255 255 255 / 75%);
  color: #fff;
}

.home-hero .md-button:is(:focus, :hover) {
  border-color: #fff;
  background-color: rgb(255 255 255 / 12%);
  color: #fff;
}

.home-hero .md-button--primary {
  border-color: #fff;
  background-color: #fff;
  color: #016b98;
}

.home-hero .md-button--primary:is(:focus, :hover) {
  border-color: #fff;
  background-color: rgb(255 255 255 / 90%);
  color: #016b98;
}

.home-capabilities .twemoji {
  color: var(--md-primary-fg-color);
}

/* Service-status hero */
.status-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0 0 2.2rem;
  padding: clamp(1.8rem, 5vw, 3.2rem);
  border-radius: 0.7rem;
  background:
    radial-gradient(circle at 88% 18%, rgb(79 209 197 / 25%), transparent 24%),
    linear-gradient(125deg, #001f33 0%, #016b98 58%, #0285bd 100%);
  box-shadow: 0 0.8rem 2rem rgb(0 31 51 / 18%);
  color: #fff;
}

.status-hero::after {
  position: absolute;
  z-index: -1;
  right: 2.4rem;
  bottom: -3.5rem;
  width: 8rem;
  height: 8rem;
  border: 1.2rem solid rgb(255 255 255 / 7%);
  border-radius: 50%;
  content: "";
}

.status-hero h1 {
  margin: 0.35rem 0 0.7rem;
  color: #fff;
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.status-hero__eyebrow {
  color: rgb(255 255 255 / 72%);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.status-hero__lead {
  max-width: 40rem;
  margin-bottom: 1.4rem;
  color: rgb(255 255 255 / 86%);
  font-size: 0.96rem;
  line-height: 1.65;
}

.status-hero .md-button {
  margin: 0.25rem 0.4rem 0.25rem 0;
  border-color: rgb(255 255 255 / 70%);
  color: #fff;
}

.status-hero .md-button:is(:focus, :hover) {
  border-color: #fff;
  background-color: rgb(255 255 255 / 12%);
  color: #fff;
}

.status-hero .md-button--primary {
  border-color: #fff;
  background-color: #fff;
  color: #016b98;
}

.status-hero .md-button--primary:is(:focus, :hover) {
  border-color: #fff;
  background-color: rgb(255 255 255 / 90%);
  color: #016b98;
}

.status-paths .twemoji {
  color: var(--md-primary-fg-color);
}

.status-icon--ok {
  color: #16865c;
}

.status-icon--warning {
  color: #d58700;
}

.status-icon--critical {
  color: #c73535;
}

.status-icon--maintenance {
  color: #68758a;
}

/* Open OnDemand hero */
.ood-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0 0 2.2rem;
  padding: clamp(1.8rem, 5vw, 3.2rem);
  border-radius: 0.7rem;
  background:
    radial-gradient(circle at 86% 16%, rgb(72 207 230 / 26%), transparent 26%),
    linear-gradient(125deg, #002a42 0%, #016b98 52%, #0285bd 100%);
  box-shadow: 0 0.8rem 2rem rgb(0 42 66 / 18%);
  color: #fff;
}

.ood-hero::before {
  position: absolute;
  z-index: -1;
  right: -2.8rem;
  bottom: -4.5rem;
  width: 13rem;
  height: 13rem;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 50%;
  box-shadow:
    0 0 0 1.5rem rgb(255 255 255 / 4%),
    0 0 0 3rem rgb(255 255 255 / 3%);
  content: "";
}

.ood-hero h1 {
  max-width: 35rem;
  margin: 0.35rem 0 0.7rem;
  color: #fff;
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.ood-hero__eyebrow {
  color: rgb(255 255 255 / 72%);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.ood-hero__lead {
  max-width: 42rem;
  margin-bottom: 1.4rem;
  color: rgb(255 255 255 / 86%);
  font-size: 0.96rem;
  line-height: 1.65;
}

.ood-hero .md-button {
  margin: 0.25rem 0.4rem 0.25rem 0;
  border-color: rgb(255 255 255 / 70%);
  color: #fff;
}

.ood-hero .md-button:is(:focus, :hover) {
  border-color: #fff;
  background-color: rgb(255 255 255 / 12%);
  color: #fff;
}

.ood-hero .md-button--primary {
  border-color: #fff;
  background-color: #fff;
  color: #016b98;
}

.ood-hero .md-button--primary:is(:focus, :hover) {
  border-color: #fff;
  background-color: rgb(255 255 255 / 90%);
  color: #016b98;
}

.ood-capabilities .twemoji {
  color: var(--md-primary-fg-color);
}

/* Storage-page capacity hero */
.storage-hero {
  position: relative;
  overflow: hidden;
  margin: 0 0 2rem;
  padding: clamp(1.6rem, 4vw, 2.8rem);
  border: 0.05rem solid rgb(2 133 189 / 20%);
  border-radius: 0.7rem;
  background:
    linear-gradient(110deg, rgb(2 133 189 / 13%), transparent 60%),
    var(--md-default-bg-color);
}

.storage-hero h1 {
  margin: 0.3rem 0 0.7rem;
  color: var(--md-default-fg-color);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  letter-spacing: -0.035em;
}

.storage-hero__eyebrow {
  color: var(--md-primary-fg-color);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.storage-hero__lead {
  max-width: 38rem;
  color: var(--md-default-fg-color--light);
  font-size: 0.92rem;
}

.storage-hero__metric {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-top: 1.3rem;
  color: var(--md-primary-fg-color);
}

.storage-hero__metric strong {
  font-size: clamp(1.8rem, 5vw, 3rem);
  letter-spacing: -0.04em;
  line-height: 1;
}

.storage-hero__metric span {
  color: var(--md-default-fg-color--light);
  font-size: 0.72rem;
}

@media screen and (max-width: 30rem) {
  .storage-hero__metric {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.25rem;
  }
}

/* Jobs-page hero */
.jobs-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0 0 2.2rem;
  padding: clamp(1.8rem, 5vw, 3.2rem);
  border-radius: 0.7rem;
  background:
    linear-gradient(120deg, rgb(0 26 44 / 94%), rgb(1 107 152 / 92%)),
    var(--md-primary-fg-color);
  box-shadow: 0 0.8rem 2rem rgb(0 26 44 / 18%);
  color: #fff;
}

.jobs-hero::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(rgb(255 255 255 / 5%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 5%) 1px, transparent 1px);
  background-size: 2rem 2rem;
  content: "";
  mask-image: linear-gradient(90deg, transparent, #000);
}

.jobs-hero h1 {
  margin: 0.35rem 0 0.7rem;
  color: #fff;
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.jobs-hero__eyebrow {
  color: rgb(255 255 255 / 72%);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.jobs-hero__lead {
  max-width: 40rem;
  margin-bottom: 1.4rem;
  color: rgb(255 255 255 / 86%);
  font-size: 0.96rem;
  line-height: 1.65;
}

.jobs-hero .md-button {
  margin: 0.25rem 0.4rem 0.25rem 0;
  border-color: rgb(255 255 255 / 70%);
  color: #fff;
}

.jobs-hero .md-button:is(:focus, :hover) {
  border-color: #fff;
  background-color: rgb(255 255 255 / 12%);
  color: #fff;
}

.jobs-hero .md-button--primary {
  border-color: #fff;
  background-color: #fff;
  color: #016b98;
}

.jobs-hero .md-button--primary:is(:focus, :hover) {
  border-color: #fff;
  background-color: rgb(255 255 255 / 90%);
  color: #016b98;
}