:root {
  color-scheme: dark;
  --paper: #101116;
  --surface: #181b23;
  --raised: #202431;
  --ink: #f1eef0;
  --muted: #b3b6c3;
  --line: #353944;
  --line-strong: #555c70;
  --accent: #b4bfff;
  --backstage: #0d0e12;
  --section-space: clamp(38px, 4.4vw, 76px);
}

.site-nav {
  width: 100%;
  padding-inline: max(4vw, calc((100% - var(--shell)) / 2));
  background: var(--backstage);
}

#ribbon-intro {
  --bg: var(--backstage);
  --mid: var(--muted);
}

#ribbon-intro .intro-progress i {
  background: #818ee7;
}

.brand-chapter {
  background: radial-gradient(ellipse 64% 475px at 83% 16%, #171a28, transparent);
}

.company-overview {
  padding-top: clamp(20px, 2.8vw, 48px);
}

.overview-layout {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(360px, 40vw, 680px);
}

.overview-copy {
  z-index: 1;
  width: 43%;
  max-width: 530px;
  padding-block: 42px;
}

.overview-copy h2 {
  margin: 0 0 20px;
  font: 500 clamp(32px, 3.4vw, 58px)/1.1 'Inter Tight', -apple-system, sans-serif;
  letter-spacing: -.035em;
  white-space: nowrap;
}

.overview-copy .company-statement {
  max-width: 40em;
  font: 15px/1.85 -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif;
  color: var(--muted);
}

.overview-photo {
  position: absolute;
  inset: 0 0 0 30%;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 45%, #000 97%, transparent),
              linear-gradient(to bottom, transparent, #000 10%, #000 83%, transparent);
  mask-composite: intersect;
}

.overview-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  filter: brightness(.88);
}

.overview-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(105deg, transparent 28%, rgb(226 234 255 / .16), transparent 69%);
}

.overview-photo.visible::after {
  animation: studio-light-sweep 1.5s ease-out both;
}

@keyframes studio-light-sweep {
  0% { opacity: 0; transform: translateX(-65%); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translateX(66%); }
}

.overview-copy .cinema-proof {
  margin: 30px 0 0;
  padding: 19px 0 0;
  border-top: 1px solid var(--line);
  border-bottom: 0;
}

.overview-copy .cinema-proof dl {
  display: grid;
  width: 100%;
  grid-template-columns: .8fr .8fr 1.25fr;
  gap: 12px;
}

.overview-copy .cinema-proof dt {
  font-size: clamp(26px, 2.6vw, 50px);
  white-space: nowrap;
}

.overview-copy .cinema-proof dd {
  max-width: none;
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.55;
}

.company-overview .partner-proof {
  margin: clamp(16px, 2vw, 36px) 0 0;
}

.partner-grid li {
  gap: 8px;
  white-space: nowrap;
  color: var(--ink);
}

.partner-grid li > span {
  font-size: 16px;
  font-weight: 600;
}

.partner-grid img {
  filter: brightness(0) invert(.87);
}

.section,
.section + .section {
  padding-block: var(--section-space) 0;
}

.section > .shell {
  padding-bottom: var(--section-space);
}

.section-head h2 {
  font-size: clamp(31px, 3vw, 55px);
  line-height: 1.22;
}

.section-head {
  align-items: end;
  margin-bottom: clamp(24px, 3vw, 52px);
}

.section-label {
  margin-bottom: 12px;
}

.account-eyebrow,
.metric,
.commerce-stats dt {
  color: var(--accent);
}

.cover-tile,
.page-tile {
  border-color: var(--line-strong);
  background: var(--raised);
  box-shadow: none;
}

.results-figure img,
.dashboard-sample img {
  border: 1px solid var(--line-strong);
}

.script-evidence a,
.goal-panel,
.contact-card {
  background: var(--surface);
}

.network-map {
  padding: clamp(12px, 1.5vw, 22px);
  border: 1px solid var(--line);
  background: var(--backstage);
}

.province {
  fill: #2a3041;
  stroke: #111319;
}

.province.highlighted {
  fill: #515c8a;
}

.pin-leader {
  stroke: var(--accent);
}

.city-pin text {
  fill: var(--ink);
  stroke: var(--backstage);
}

.centre-choice:hover,
.account-link:hover {
  color: var(--accent);
}

.next-project {
  margin-top: 0;
  margin-bottom: 0;
  padding-block: clamp(30px, 4vw, 64px);
  border-bottom: 1px solid var(--line);
}

.goal-tab[aria-selected="true"] {
  box-shadow: inset 2px 0 var(--accent);
}

#pricing {
  padding-block: var(--section-space);
  margin-top: 0;
  background: var(--backstage);
}

.price-row,
.annual-details {
  border-color: var(--line);
  background: var(--surface);
}

.price-row-accent {
  border-color: #707cae;
  background: #1c2132;
  box-shadow: inset 0 2px #8b9bd9;
}

.plan-cta {
  border-color: var(--line-strong);
}

.plan-cta:hover,
.lightbox-bar button:hover {
  background: var(--raised);
}

.button.primary,
.button.dark,
.price-row-accent .plan-cta {
  border-color: var(--accent);
  color: #111522;
  background: var(--accent);
}

:is(.button.primary, .button.dark, .price-row-accent .plan-cta):hover {
  border-color: #d2d9ff;
  background: #d2d9ff;
}

.persona-switch button[aria-pressed="true"] {
  color: var(--accent);
  border-color: var(--accent);
}

.closing {
  padding-block: var(--section-space);
}

.contact-card {
  padding: 20px;
  border: 1px solid var(--line);
}

.cover-lightbox {
  color: var(--ink);
  background: var(--surface);
}

.cover-lightbox::backdrop {
  background: rgb(5 6 9 / .87);
}

@media (max-width: 720px) {
  .overview-layout {
    display: block;
    min-height: 0;
  }

  .overview-copy {
    width: 100%;
    padding-block: 24px;
  }

  .overview-photo {
    position: relative;
    inset: auto;
    aspect-ratio: 16 / 9;
    mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 83%, transparent);
  }
}