/* Frontier Labs — ink / paper / acid color theme */

:root {
  --color-ink: #0b0b0c;          /* main dark background */
  --color-ink-raised: #131316;   /* raised media/card background */
  --color-ink-sunk: #08080a;     /* deeper sections/footer */
  --color-paper: #f4f3ef;        /* main text / light hover */
  --color-muted: #8d8d87;        /* low-emphasis text */
  --color-muted-strong: #b4b4ad; /* body text */
  --color-line: #27272b;         /* borders/dividers */
  --color-line-strong: #3a3a40;  /* stronger borders */
  --color-acid: #d7ff3e;         /* neon accent/buttons */
  --color-error: #ff6b4a;
  --color-error-text: #ff8c70;
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);

  /* Shared page content width — keeps sections + footer aligned */
  --page-max: 85rem;
  --page-gutter: 1.25rem;
}

@media (min-width: 640px) {
  :root {
    --page-gutter: 1.75rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --page-gutter: 2.5rem;
  }
}

html,
body {
  background: var(--color-ink);
  color: var(--color-paper);
}

/* Standard content width for all Foundation rows + footer */
main > .v-block .row,
main > .section-stage .row,
main > .talkSection .row,
main > .talk-cta .row,
main > .case-study-block .row,
.site-footer__inner {
  max-width: var(--page-max) !important;
  width: min(100% - (var(--page-gutter) * 2), var(--page-max)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Nested rows should fill their parent column, not re-constrain */
main .row .row {
  width: 100% !important;
  max-width: none !important;
  margin-left: auto;
  margin-right: auto;
}

/* Section backgrounds stay full-bleed; only inner content is constrained */
.section-stage,
.about-block.section-stage,
.talkSection.talk-cta.section-stage,
.talk-cta.section-stage,
.v-block.v-block--xl,
.v-block.case-study-block {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Smooth scrolling fights pinned scrub animations and makes text jitter */
.tl-edges {
  scroll-behavior: auto !important;
  overscroll-behavior: none;
}

html,
body {
  overscroll-behavior-y: none;
}

::selection {
  background: var(--color-acid);
  color: var(--color-ink);
}

:focus-visible {
  outline: 2px solid var(--color-acid);
  outline-offset: 3px;
}

/* Remap existing site surfaces / accents to the new theme */

body,
.background--charcoal,
.background-converse .background--charcoal {
  background: var(--color-ink);
  color: var(--color-paper);
}

.background--charcoal a,
.background--charcoal p,
.background-converse .background--charcoal a,
.background-converse .background--charcoal p {
  color: var(--color-paper);
}

.background--charcoal .main-content,
.background--charcoal .main-nav__splash-guard {
  background: var(--color-ink);
}

.background--black {
  background: var(--color-ink-sunk);
  color: var(--color-paper);
}

.background--black p {
  color: var(--color-muted);
}

.background--black a {
  color: var(--color-paper);
}

.background--black .main-content,
.background--black .main-nav__splash-guard {
  background: var(--color-ink-sunk);
}

.background--space {
  background: var(--color-ink-raised);
  color: var(--color-paper);
}

.background--space .main-content,
.background--space .main-nav__splash-guard {
  background: var(--color-ink-raised);
}

.background--sunrise {
  background: var(--color-acid);
  color: var(--color-ink);
}

.background--sunrise .main-content {
  background: var(--color-acid);
}

.background--white,
.background--lightGrey {
  background: var(--color-paper);
  color: var(--color-ink);
}

.background--white .main-content,
.background--lightGrey .main-content,
.background--white .main-nav__splash-guard,
.background--lightGrey .main-nav__splash-guard {
  background: var(--color-paper);
}

.background--white .main-nav {
  background: var(--color-paper) !important;
}

.background--white .main-nav__button .nav__bar,
.background--white .main-nav__button:hover .nav__bar {
  border-color: var(--color-ink);
}

.background--lightGrey a,
.background--lightGrey p {
  color: var(--color-ink);
}

.sunrise,
.block-text--sunrise,
.block-btn.--text.--sunrise,
.notice-bar .--text.--sunrise.cookie-btn,
.text-teal {
  color: var(--color-acid);
}

.block-btn.--text.--sunrise #button-arrow__carat,
.block-btn.--text.--sunrise #button-arrow__line,
.notice-bar .--text.--sunrise.cookie-btn #button-arrow__carat,
.notice-bar .--text.--sunrise.cookie-btn #button-arrow__line {
  stroke: var(--color-acid);
}

.block-btn.--hover-color:hover.--sunrise,
.notice-bar .--hover-color.cookie-btn:hover.--sunrise {
  color: var(--color-acid);
}

.spaceGrey,
.kb-quote-header:after,
.kb-quote-header:before,
.ref-box-text:after,
.ref-box-text:before,
.block-text--spaceGrey {
  color: var(--color-muted);
}

.brand-point-text,
.block-text-paragraph {
  color: var(--color-muted-strong);
}

.white,
.lightGrey,
.text-white {
  color: var(--color-paper);
}

hr {
  border-bottom: 1px solid var(--color-line);
}

hr.white {
  border-bottom: 1px solid var(--color-line-strong);
}

.block-btn.--sunrise,
.notice-bar .--sunrise.cookie-btn {
  color: var(--color-ink);
  border: 1px solid var(--color-acid);
}

.block-btn.--sunrise:before,
.notice-bar .--sunrise.cookie-btn:before {
  background: var(--color-acid);
}

.block-btn.--sunrise:hover,
.notice-bar .--sunrise.cookie-btn:hover {
  color: var(--color-ink);
  border: 1px solid var(--color-paper);
}

.block-btn.--sunrise:hover:before,
.notice-bar .--sunrise.cookie-btn:hover:before {
  background: var(--color-paper);
}

.block-text-paragraph a {
  color: var(--color-muted-strong);
  transition: color .2s var(--ease-out-expo);
}

.block-text-paragraph a:hover {
  color: var(--color-acid);
}

.case-study__img,
.theme-media {
  background: var(--color-ink-raised);
}

.main-nav,
.theme-header {
  background: rgb(11 11 12 / 85%);
  border-bottom: 1px solid var(--color-line);
  backdrop-filter: blur(12px);
}

.hero-meta {
  margin: 0 0 1rem;
  max-width: 36rem;
  min-height: 0 !important;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  margin-top: 0;
}

.theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  white-space: nowrap;
  border: 1px solid transparent;
  padding: 1.0625rem 2rem;
  font: 700 .75rem/1 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  transition:
    background-color .25s var(--ease-out-expo),
    color .25s var(--ease-out-expo),
    border-color .25s var(--ease-out-expo);
}

.theme-btn:active {
  transform: scale(.98);
}

.theme-btn-primary,
.background--charcoal a.theme-btn-primary {
  background: var(--color-acid);
  border-color: var(--color-acid);
  color: #0b0b0c;
}

.theme-btn-primary:hover,
.background--charcoal a.theme-btn-primary:hover {
  background: var(--color-ink);
  border-color: var(--color-paper);
  color: #ffffff;
}

.theme-btn-ghost {
  background: transparent;
  border-color: var(--color-line-strong);
  color: var(--color-paper);
}

.theme-btn-ghost:hover {
  background: var(--color-paper);
  border-color: var(--color-paper);
  color: var(--color-ink);
}

.section-stage {
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}

.hero-stage.section-stage {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-stage.section-stage > .row {
  width: 100%;
}

@media screen and (min-width: 53.75em) {
  .section-stage {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }
}

.section-stage--work {
  min-height: auto;
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}

@media screen and (min-width: 53.75em) {
  .section-stage--work {
    padding-top: 7rem !important;
    padding-bottom: 7rem !important;
  }

  .section-stage--work .case-study-block__featured-study {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

.about-block.section-stage {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}

@media screen and (min-width: 53.75em) {
  .about-block.section-stage {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }
}

.about-block__lead,
.about-block__copy {
  min-height: 0 !important;
  color: var(--color-muted-strong);
}

.about-block__lead {
  max-width: 28rem;
}

.about-block__copy {
  max-width: 18rem;
}

.about-block__title {
  line-height: 1.25 !important;
}

@media screen and (min-width: 53.75em) {
  .about-block__title {
    line-height: 1.22 !important;
  }
}

.reveal-up {
  opacity: 0;
  transform: translateY(2.5rem);
  transition:
    opacity .7s var(--ease-out-expo),
    transform .7s var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.reveal-up.is-in {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.talkSection.talk-cta,
.talk-cta {
  background: var(--color-acid) !important;
  color: var(--color-ink);
}

.talkSection.talk-cta.section-stage,
.talk-cta.section-stage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}

.talkSection.talk-cta.section-stage > .row,
.talk-cta.section-stage > .row {
  width: 100%;
}

@media screen and (min-width: 53.75em) {
  .talkSection.talk-cta.section-stage,
  .talk-cta.section-stage {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }
}

.talk-cta__word {
  margin: 0;
  color: var(--color-ink) !important;
  font-size: 8rem;
  line-height: .85;
  letter-spacing: -.06em;
}

@media screen and (min-width: 53.75em) {
  .talk-cta__word {
    font-size: 14rem;
    line-height: .82;
    letter-spacing: -.08em;
    margin-left: -.15rem;
  }
}

.talk-cta__meta {
  margin: 1.5rem 0 0;
  max-width: 32rem;
  color: rgb(11 11 12 / 72%) !important;
  min-height: 0 !important;
}

.talk-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 1.5rem;
}

.talk-cta .theme-btn-invert,
.background--charcoal .talk-cta a.theme-btn-invert {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-acid);
}

.talk-cta .theme-btn-invert:hover,
.background--charcoal .talk-cta a.theme-btn-invert:hover {
  background: transparent;
  border-color: var(--color-ink);
  color: var(--color-ink);
}