/* Otherworldly art direction; Artist's framework defaults remain in artist.css. */
:root {
  --primary: #ff6428;
  --tertiary: #25374c;
  --dark-background: #000;
  --dark-link: #ffc394;
  --navbar-brand-background: #ff6428;
}
body.otherworldly-home { background: #000; }
#oa-nav {
  --surface: #1b1b1b; --ink: #fff; --border-color: transparent; --nav-hover-color: #333;
  --navbar-sublogo-width: 125px;
}
#oa-nav .navbar-subbrand { color: #fff; }
.navbar.is-floating { --navbar-padding: 5px; border: 0; border-radius: 14px; padding-block: var(--navbar-padding); }
.navbar.is-floating > .navbar-brand.has-background { margin-block: -5px; padding-block: 13px; border-radius: 14px 0 0 14px; }
.navbar .navbar-menu > .button { background: #fff; border-color: #fff; color: #202a35; }
#oa-hero, #oa-closing { --art-base: #000; }
#oa-reviews {
  --proof-item-width: 300px;
  --item-gap: 16px;
  --dark-surface-secondary: #212428;
  --quote-accent-color: #ff9b5b;
  padding-top: 40px;
  padding-bottom: 60px;
}
#oa-reviews .quote blockquote { color: #d4d6da; }
#oa-reviews .quote { gap: 16px; }
#oa-reviews .quote.is-small > blockquote { line-height: 1.4; }
#oa-reviews .quote .media-content > strong { color: #fff; }
.oa-quote-roian > blockquote { line-height: 1; font-weight: 400; }
.client-logos { display: flex; align-items: center; gap: 24px; color: var(--muted); font-size: var(--size-small); white-space: nowrap; }
.client-logos img { display: block; width: min(100%, 850px); height: auto; }
#oa-problem { --art-base: #212121; }
#oa-solution { --art-base: #212121; }
#oa-fun { --art-base: #1c1d21; }
#oa-future { --art-base: #212121; }
#oa-optimized { --art-base: #212121; }
#pricing { --art-base: #fff; padding-bottom: 0; }
#pricing .client-logos { justify-content: center; margin-top: var(--layout-gap); }
#oa-plans { --check-partial-color: #68717d; --check-no-color: #9fa8b2; padding-top: 48px; background: #fff; }
#oa-plans .grid-3 > .card > .content:not(.card-header) { display: flex; flex-direction: column; }
#oa-plans .grid-3 > .card > .content > .checklist { margin-bottom: auto; }
.home-contact-card > .content { display: flex; flex-direction: column; }
.home-contact-card > .content > p { margin-bottom: auto; }
.home-contact-card > .content > .button { align-self: flex-start; }
@media (min-width: 801px) {
  #oa-hero > .container > .columns, #oa-closing > .container > .columns { align-items: flex-end; }
  .card.is-horizontal.is-reversed.home-contact-card { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}
@media (max-width: 1213px) {
  #oa-hero > .container > .columns, #oa-closing > .container > .columns { margin-top: 20px; }
}
@media (min-width: 1214px) {
  #oa-hero > .container > .columns, #oa-closing > .container > .columns { margin-top: -40px; }
}
@media (max-width: 1179px) {
  #oa-hero .launch-copy small, #oa-closing .launch-copy small { display: none }
}

#oa-plans .tag { color: #849199; border-color: #b8c4cf; width: fit-content; }
#oa-fit .accordion details[open] > summary > span,
#faq .accordion details[open] > summary > span {
  background: linear-gradient(90deg, #ffaa6d, #ffcc6c);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
#oa-fit { --accordion-title-size: 23px; }
#oa-footer img { display: block; width: min(100%, 300px); height: auto; margin-inline: auto; }
#oa-footer p { color: #b9bec8; font-size: 16px; line-height: 1.5; }
#oa-footer a { color: inherit; text-decoration: underline; }
#oa-contact { width: min(640px, calc(100% - 30px)); }

#oa-hero h1, #oa-closing h2 {
  background: linear-gradient(180deg, #fff 26.55%, #daebf1 50%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-size: clamp(38px, 7.92vw, 95px);
  line-height: .85;
  font-weight: 800;
}

#oa-hero h1 em, #oa-closing h2 em {
  display: block;
  font-weight: 800;
  font-style: italic;
  background: linear-gradient(180deg, #ffcc6c 70.755%, #ff986c 94.34%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

#oa-hero .lede strong, #oa-closing .lede strong { color: #ff986c; }
#oa-hero .lede, #oa-closing .lede { font-size: 20px; }
#services .stats { --stats-description-size: 16px; }
#oa-plans .card-header h3 + p { margin-top: 10px; }
#services .group h2 {
  font-size: clamp(38px, 4.9vw, 59px);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -.04em;
  background: linear-gradient(180deg, #fff 26.55%, #daebf1 50%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
#services .group h2 em {
  font-weight: 800;
  background: linear-gradient(90deg, #ffaa6d, #ffcc6c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.consultation-teaser { display: block; position: relative; width: min(100%, 461px); aspect-ratio: 461 / 159; margin-left: auto; color: #fff; text-decoration: none; isolation: isolate; }
.consultation-teaser .launch-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.consultation-teaser .launch-figure { position: absolute; left: 2%; top: 6%; width: 42%; height: 88%; object-fit: cover; border-radius: 4px; }
.consultation-teaser .launch-copy { position: absolute; top: 12%; left: 48%; width: 48%; }
.consultation-teaser b { display: block; font-size: clamp(16px, 2vw, 23px); line-height: 1.16; }
.consultation-teaser small { display: block; width: min(160px, 90%); margin-top: 10px; color: #c7c6cc; font-size: 14px; line-height: 1.2; }
.consultation-teaser .launch-go { position: absolute; right: -2%; bottom: -6%; width: 20%; height: auto; transition: transform var(--motion-fast) var(--motion-ease); }
.consultation-teaser:hover .launch-go { transform: translateX(4px); }
@media (max-width: 800px) {
  #oa-hero h1, #oa-closing h2 { line-height: 1; }
  /* Keep the logo row independent of the expanding menu and its height animation. */
  #oa-nav { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr) auto; grid-auto-rows: max-content; align-content: start; padding: 0; column-gap: 20px; row-gap: 0; }
  #oa-nav > .navbar-brand.has-background { margin-block: 0; border-radius: 14px 0 0 14px; }
  #oa-nav:has(> .navbar-menu.is-active) > .navbar-brand.has-background { border-bottom-left-radius: 0; }
  #oa-nav > .navbar-subbrand img { max-width: min(100%, 20vw); }
  #oa-nav .navbar-toggle { margin: 0 12px 0 0; }
  #oa-nav > .navbar-menu { grid-column: 1 / -1; width: auto; }
  .navbar.is-floating .navbar-menu.is-active, .navbar.is-floating:not(.is-enhanced) .navbar-menu { padding: 8px 16px 16px; border-radius: 0 0 14px 14px; }
  .navbar .navbar-menu > .button { border-color: #cdd6e1; }
  .client-logos { flex-direction: column; gap: 12px; white-space: normal; text-align: center; }
  .client-logos img { width: 100%; }
}
@media (max-width: 480px) {
  .consultation-teaser .launch-copy { top: 10%; }
  .consultation-teaser b { font-size: clamp(15px, 4vw, 19px); }
  .consultation-teaser small { width: min(132px, 80%); margin-top: 4px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .consultation-teaser .launch-go { transition: none; }
}

/* Keep each customer image and its caption together, with clear space between rows. */
.customer-grid { row-gap: var(--layout-gap); }
.customer-grid > .card > .content { --content-gap: 6px; margin-top: 12px; }

/* Leave breathing room below the floating mobile navigation. */
@media (max-width: 800px) {
  #customer-index { --reserve-1: 128px; }
}