/* BASE: shared by every page. Load first, then the page's own stylesheet.
   Tokens, reset, buttons, navbar, marquee, footer, modals, autoscroll. */

:root {
  --clementine: #f18122;
  --lightclementine: #ed9654;
  --blush: #f3917b;
  --lightblush: #efafa5;
  --goldenhour: #f4cc53;
  --lightgoldenhour: #edd28e;
  --charcoal: #333333;
  --linen: #f2ecdc;
  --button-pressed: #f7a928;

  --marquee-height: clamp(7.5rem, 12vw, 11rem);
  --marquee-overlap: calc(var(--marquee-height) / 2);

  /* The marquee wave curve, traced through the marquee's center.
     Its depth (25% of the marquee height) must match MARQUEE_WAVE_DEPTH in index.js. */
  --marquee-mask-above: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'><path d='M0 0V200C100 130 200 100 360 100S600 150 720 200S920 300 1080 300S1340 270 1440 200V0Z'/></svg>");
  --marquee-mask-below: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 400' preserveAspectRatio='none'><path d='M0 400V200C100 130 200 100 360 100S600 150 720 200S920 300 1080 300S1340 270 1440 200V400Z'/></svg>");
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "brandon-grotesque", sans-serif;
}

html {
  scroll-behavior: smooth;
  /* Section titles sit 56px into each section (container padding); with the
     80px fixed navbar, this lands them 32px below the nav on #anchor jumps. */
  scroll-padding-top: 56px;
}

li {
  list-style-type: none;
}

p {
  line-height: 1.5;
  font-size: 16px;
}

a {
  text-decoration: none;
}

button {
  cursor: pointer;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.container {
  padding: 56px 0;
}

.row {
  width: min(100% - 3rem, 1200px);
  margin: 0 auto;
}

.btn {
  display: inline-block;
  padding: 8px 32px;
  color: var(--charcoal);
  font-size: 14px;
  font-weight: 500;
  text-shadow: 0 0 0 transparent;
  background-color: var(--lightgoldenhour);
  border: 1px solid var(--charcoal);
  border-radius: 999px;
  text-transform: uppercase;
  /* Kept on purpose: gives the button its own stacking context before it scales. */
  transform: scale(1);
  transition:
    transform 220ms ease-out,
    background-color 180ms ease;
}

.btn:hover,
.btn:focus-visible,
.nav__link--primary:hover,
.nav__link--primary:focus-visible {
  background-color: var(--goldenhour);
  transform: scale(1.07);
}

.btn:active,
.nav__link--primary:active {
  background-color: var(--button-pressed);
  transform: scale(0.96);
  transition-duration: 80ms;
}

.btn:focus-visible,
.nav__link--primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--linen);
}

/* Gradient pill CTA (About + case study pages), with an optional sliding arrow. */
.btn--gradient {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.75rem 1.75rem;
  font-size: 1rem;
  font-weight: 700;
  background-image: linear-gradient(
    90deg,
    var(--clementine) 0%,
    var(--goldenhour) 25%,
    var(--blush) 50%,
    var(--goldenhour) 75%,
    var(--clementine) 100%
  );
  background-position: 0% center;
  background-size: 200% 100%;
  transition:
    transform 220ms ease-out,
    background-position 450ms ease,
    filter 180ms ease;
}

.btn--gradient:hover,
.btn--gradient:focus-visible {
  background-position: 100% center;
}

.btn--gradient:active {
  filter: brightness(0.94) saturate(1.1);
}

.btn__arrow {
  transition: transform 220ms ease-out;
}

.btn:hover .btn__arrow,
.btn:focus-visible .btn__arrow {
  transform: translateX(4px);
}

/* SCROLL TRANSITIONS */

.reveal {
  opacity: 0;
  transform: translateY(2rem);
  transition:
    opacity 600ms ease-out,
    transform 600ms ease-out;
}

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

.reveal--delay {
  transition-delay: 150ms;
}

/* NAVBAR */

.navbar {
  position: fixed;
  background-color: var(--linen);
  z-index: 100;
  top: 0;
  right: 0;
  left: 0;
  height: 80px;
  display: flex;
}

.logo {
  width: 200px;
  transition: transform 300ms ease;
}

.logo:hover {
  transform: scale(1.07);
}

.nav__container {
  width: 100%;
  max-width: 1200px;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
}

.nav__link {
  display: inline-block;
  font-size: 16px;
  color: var(--charcoal);
  font-weight: 500;
  padding: 8px;
  text-shadow: 0 0 0 transparent;
  transition: text-shadow 300ms ease;
}

.nav__link--list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
}

.nav__link--primary {
  background-color: var(--lightgoldenhour);
  border: 1px solid var(--charcoal);
  border-radius: 999px;
  padding: 8px 16px;
  backface-visibility: hidden;
  transform: scale(1);
  transition:
    transform 220ms ease-out,
    background-color 180ms ease;
}

.nav__link:not(.nav__link--primary):hover,
.nav__link:not(.nav__link--primary):focus-visible {
  text-shadow:
    0.25px 0 0 currentColor,
    -0.25px 0 0 currentColor;
}

.link__hover-effect {
  position: relative;
}

.link__hover-effect:after {
  content: "";
  background-color: var(--charcoal);
  position: absolute;
  bottom: -3px;
  height: 3px;
  width: 0;
  right: 0;
  transition: width 300ms ease;
}

.link__hover-effect:hover:after {
  width: 100%;
  left: 0;
  right: auto;
}

.nav__actions {
  display: none;
}

.nav__toggle {
  display: grid;
  place-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.nav__toggle:focus-visible {
  outline: 2px solid var(--charcoal);
  outline-offset: 2px;
}

.nav__toggle-bar {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--charcoal);
  border-radius: 2px;
  transition:
    transform 250ms ease,
    opacity 200ms ease;
}

.navbar.is-open .nav__toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.navbar.is-open .nav__toggle-bar:nth-child(2) {
  opacity: 0;
}

.navbar.is-open .nav__toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* MARQUEE */

.marquee {
  position: relative;
  z-index: 2;
  width: 100%;
  height: var(--marquee-height);
  margin-top: calc(var(--marquee-overlap) * -1);
  margin-bottom: calc((var(--marquee-overlap) * -1) - 2px);
}

.marquee__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.marquee__ribbon {
  fill: var(--lightgoldenhour);
  stroke: var(--charcoal);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

/* Sits on the default (alphabetic) baseline; index.js lowers the text path by
   half the cap height so the capitals are centered in the ribbon. */
.marquee__text {
  fill: var(--charcoal);
  font-size: clamp(1rem, 1.6vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.marquee__star {
  fill: var(--clementine);
}

/* FOOTER */

footer {
  --footer-start: var(--linen);

  padding: 5rem 0 3.5rem;
  color: var(--charcoal);
  background-color: var(--clementine);
  background-image:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='grain'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23grain)' opacity='0.55'/></svg>"),
    linear-gradient(to bottom, var(--footer-start) 0%, var(--clementine) 100%);
  background-size:
    200px 200px,
    auto;
  background-blend-mode: soft-light, normal;
}

footer a {
  color: inherit;
}

footer a:hover,
footer a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1.35fr 0.8fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.footer__column {
  min-width: 0;
}

.footer__heading {
  margin-bottom: 0.75rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
}

.footer__address {
  font-style: normal;
  font-size: 0.9rem;
  line-height: 1.55;
}

.footer__meeting {
  margin-top: 1rem;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.55;
}

.footer__links {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  column-gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}

.footer__links .footer__heading {
  grid-column: 1 / -1;
}

.footer__links ul,
.footer__socials {
  list-style: none;
}

.footer__links ul {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.footer__links li {
  font-size: 0.9rem;
  line-height: 1.3;
}

.footer__socials {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.footer__socials a {
  display: grid;
  width: 1.5rem;
  height: 1.5rem;
  place-items: center;
  border-radius: 0.25rem;
  transition:
    transform 300ms ease,
    opacity 300ms ease;
}

.footer__socials img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.footer__socials a:hover {
  transform: translateY(-0.15rem);
  opacity: 0.8;
}

.footer__socials a:focus-visible {
  outline: 2px solid var(--charcoal);
  outline-offset: 3px;
}

.footer__logo {
  justify-self: end;
  align-self: center;
}

.footer__logo img {
  display: block;
  width: clamp(5rem, 9vw, 8rem);
  height: auto;
}

/* MODALS */

.modal {
  width: min(100% - 2rem, 42rem);
  max-height: min(90vh, 48rem);
  margin: auto;
  color: var(--charcoal);
  background: transparent;
  border: 0;
}

.modal::backdrop {
  background-color: rgb(51 51 51 / 70%);
  backdrop-filter: blur(0.2rem);
}

/* Safari before 15.4 has no <dialog> and shows it as plain inline content.
   Hiding closed ones matches the browser default; index.js adds .no-dialog
   and a .dialog-backdrop, and the rules below stand in for an open modal. */
dialog:not([open]) {
  display: none;
}

.no-dialog dialog[open] {
  position: fixed;
  top: 50%;
  left: 50%;
  display: block;
  max-width: calc(100% - 38px);
  overflow: auto;
  transform: translate(-50%, -50%);
}

.no-dialog .dialog-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgb(51 51 51 / 70%);
}

.modal__card {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: min(90vh, 48rem);
  padding: clamp(1.5rem, 4vw, 3rem);
  overflow: hidden;
  background-color: var(--linen);
  border: 1px solid var(--charcoal);
  border-radius: 1.25rem;
  box-shadow: 0 1rem 3rem rgb(51 51 51 / 30%);
}

/* Back | title | close. The side columns are always reserved (even with no
   back button), so the title stays centered on the card. They're sized to
   the visible icon; each 44px tap area overhangs outward by 13px. */
.modal__header {
  --modal-title-size: clamp(1.75rem, 4vw, 2.5rem);

  display: grid;
  grid-template-columns: 31px minmax(0, 1fr) 31px;
  flex: 0 0 auto;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.modal__header > * {
  grid-row: 1;
  grid-column: 2;
}

.modal__header > .modal__back {
  grid-column: 1;
}

.modal__header > .modal__close {
  grid-column: 3;
}

.modal__title {
  font-size: var(--modal-title-size);
  line-height: 1;
  /* Titles that must wrap on small phones split into even lines. */
  text-wrap: balance;
}

/* Round icon buttons for the modal header. */
.modal__close,
.modal__back {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: var(--charcoal);
  background-color: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 300ms ease;
}

/* Pull each tap area outward so the visible icons line up with the content edges. */
.modal__close {
  margin-right: -13px;
}

.modal__back {
  margin-left: -13px;
}

/* Shown only when the modal was opened from the Get Started modal (index.js). */
.modal__back[hidden] {
  display: none;
}

.modal__back svg {
  width: 24px;
  height: 24px;
}

/* Title ink sits 0.03em above its line box center; match it. */
.modal__header .modal__close,
.modal__header .modal__back {
  translate: 0 calc(var(--modal-title-size) * -0.03);
}

/* Thin X drawn to match the open mobile nav toggle (.nav__toggle-bar). */
.modal__close::before,
.modal__close::after {
  content: "";
  grid-area: 1 / 1;
  width: 24px;
  height: 2px;
  background-color: var(--charcoal);
  border-radius: 2px;
  transform: rotate(45deg);
}

.modal__close::after {
  transform: rotate(-45deg);
}

.modal__close:hover,
.modal__close:focus-visible,
.modal__back:hover,
.modal__back:focus-visible {
  background-color: var(--lightgoldenhour);
}

.modal__close:focus-visible,
.modal__back:focus-visible {
  outline: 2px solid var(--charcoal);
  outline-offset: 2px;
}

.modal__scroll-area {
  min-height: 0;
  overflow-y: auto;
  padding-right: 0.5rem;
}

.modal__scroll-area::-webkit-scrollbar {
  width: 0.5rem;
}

.modal__scroll-area::-webkit-scrollbar-track {
  background: transparent;
}

.modal__scroll-area::-webkit-scrollbar-thumb {
  background-color: var(--charcoal);
  border: 0.125rem solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

.modal__scroll-area::-webkit-scrollbar-thumb:hover {
  background-color: var(--clementine);
}

/* FORM MODAL */

.form__container {
  min-height: 8rem;
}

/* WORK IN PROGRESS MODAL */

.wip-modal__message {
  margin-bottom: 1.5rem;
  text-align: center;
}

.wip-modal__button {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* BOOK CALL MODAL */

.book-call-modal {
  width: min(100% - 2rem, 32rem);
}

.book-call-modal__options {
  display: grid;
  gap: 1rem;
}

.book-call-modal__options .btn {
  width: 100%;
  /* Full-width, centered labels don't need the default 32px side padding;
     the smaller value keeps "Request for Proposal" on one line at 320px. */
  padding-left: 16px;
  padding-right: 16px;
  text-align: center;
}

.book-call-modal__options .book-call-modal__call.is-revealed {
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: clamp(1.5rem, 4vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

/* AUTOSCROLL STRIP (About brands, case study gallery). index.js clones the
   list; every copy slides one list-width left, so the loop has no seam.
   Set --autoscroll-gap and --autoscroll-duration on the strip. */
.autoscroll {
  display: flex;
  overflow: hidden;
}

.autoscroll__list {
  display: flex;
  flex: none;
  gap: var(--autoscroll-gap);
  padding-right: var(--autoscroll-gap);
  animation: autoscroll var(--autoscroll-duration) linear infinite;
}

@keyframes autoscroll {
  to {
    transform: translateX(-100%);
  }
}

/* Navbar tightens before collapsing, 1081px–1180px */
@media (min-width: 1081px) and (max-width: 1180px) {
  .logo {
    width: 170px;
  }

  .nav__link--list {
    gap: 28px;
  }

  .nav__link {
    font-size: 14px;
    white-space: nowrap;
  }

  .nav__link--primary {
    padding: 8px 14px;
  }
}

/* Navbar collapses, 1080px and below */
@media (max-width: 1080px) {
  .nav__container {
    padding: 0 clamp(16px, 4vw, 24px);
  }

  .nav__actions {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .nav__link--list {
    position: fixed;
    top: 80px;
    right: 0;
    bottom: 0;
    left: 0;
    flex-direction: column;
    gap: clamp(0.75rem, 3vh, 1.75rem); /* Fallback: Safari < 15.4 lacks svh. */
    gap: clamp(0.75rem, 3svh, 1.75rem);
    padding: 2rem 1.5rem;
    overflow-y: auto;
    background-color: var(--linen);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-0.75rem);
    transition:
      opacity 250ms ease,
      transform 250ms ease,
      visibility 0s linear 250ms;
  }

  .navbar.is-open .nav__link--list {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition:
      opacity 250ms ease,
      transform 250ms ease;
  }

  .nav__link--list a.nav__link {
    font-size: clamp(1.75rem, 7vw, 2.5rem);
    font-weight: 700;
  }

  .nav__item--cta {
    display: none;
  }

  body.nav-open {
    overflow: hidden;
  }
}

/* Footer stacks into one centered column, 960px and below */
@media (max-width: 960px) {
  .footer__grid {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 2.5rem;
    text-align: center;
  }

  .footer__column:last-child {
    display: flex;
  }

  .footer__socials,
  .footer__column:last-child,
  .footer__links {
    justify-content: center;
  }
}

/* Small phones, 480px and below */
@media (max-width: 480px) {
  .logo {
    width: clamp(110px, 34vw, 150px);
  }

  .nav__cta {
    padding: 6px 12px;
    font-size: 14px;
  }
}

/* Keep modal titles ("Schedule a Meeting") on one line on most phones. */
@media (max-width: 480px) {
  .modal__header {
    --modal-title-size: 1.625rem;

    gap: 0.5rem;
  }
}

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .nav__link--list,
  .navbar.is-open .nav__link--list,
  .nav__toggle-bar {
    transform: none;
    transition: none;
  }

  .nav__link--primary {
    transition: background-color 180ms ease;
  }

  .nav__link--primary:hover,
  .nav__link--primary:focus-visible,
  .nav__link--primary:active {
    transform: none;
  }

  .btn--gradient,
  .btn__arrow {
    transition: none;
  }

  .autoscroll__list {
    animation: none;
  }

  .autoscroll__list[aria-hidden="true"] {
    display: none;
  }
}

/* Safari 14.0 ignores gap on flex containers. It also lacks inset, which
   arrived with flex gap in 14.1, so that test targets it; margins stand in
   for the gaps. Modern browsers skip this block. */
@supports not (inset: 0) {
  .btn__arrow {
    margin-left: 0.6em;
  }

  .nav__link--list > * + * {
    margin-left: 48px;
  }

  .nav__actions > * + * {
    margin-left: 12px;
  }

  .footer__links ul > * + * {
    margin-top: 0.3rem;
  }

  .footer__socials > * + * {
    margin-left: 0.5rem;
  }

  .autoscroll__list > * + * {
    margin-left: var(--autoscroll-gap);
  }

  @media (min-width: 1081px) and (max-width: 1180px) {
    .nav__link--list > * + * {
      margin-left: 28px;
    }
  }

  @media (max-width: 1080px) {
    .nav__link--list > * + * {
      margin-top: clamp(0.75rem, 3vh, 1.75rem);
      margin-left: 0;
    }
  }
}