@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap");

:root {
  --the55-font-display: "Space Grotesk", system-ui, sans-serif;
  --the55-font-body: "Manrope", system-ui, sans-serif;

  /* The 55 brand colors (from logo) */
  --the55-blue: #24a9e1;
  --the55-blue-rgb: 36, 169, 225;
  --the55-purple: #8300fe;
  --the55-purple-rgb: 131, 0, 254;

  /* Replace template yellow/green → blue, old purple → logo purple */
  --accent--light: var(--the55-purple);
  --accent-rgb--light: var(--the55-purple-rgb);
  --additional--light: var(--the55-blue);
  --additional-rgb--light: var(--the55-blue-rgb);
  --accent--dark: var(--the55-blue);
  --accent-rgb--dark: var(--the55-blue-rgb);
  --additional--dark: var(--the55-purple);
  --additional-rgb--dark: var(--the55-purple-rgb);
}

/* Default dark theme — prevents white flash before JS / on light OS */
:root {
  --base: var(--base--dark);
  --base-rgb: var(--base-rgb--dark);
  --base-tint: var(--base-tint--dark);
  --base-shade: var(--base-shade--dark);
  --base-opp: var(--base-opp--dark);
  --base-opp-tint: var(--base-opp-tint--dark);
  --accent: var(--accent--dark);
  --accent-rgb: var(--accent-rgb--dark);
  --additional: var(--additional--dark);
  --additional-rgb: var(--additional-rgb--dark);
  --neutral-transparent: var(--neutral-transparent--dark);
  --st-bright: var(--st-bright--dark);
  --st-medium: var(--st-medium--dark);
  --st-muted: var(--st-muted--dark);
  --st-opp-bright: var(--st-opp-bright--dark);
  --fw-regular: var(--fw-regular--dark);
  --fw-medium: var(--fw-medium--dark);
  --fw-semibold: var(--fw-semibold--dark);
  --fw-bold: var(--fw-bold--dark);
  --fw-regular-opp: var(--fw-regular-opp--dark);
  --fw-medium-opp: var(--fw-medium-opp--dark);
  --t-bright: var(--t-bright--dark);
  --t-medium: var(--t-medium--dark);
  --t-muted: var(--t-muted--dark);
  --t-muted-extra: var(--t-muted-extra--dark);
  --t-opp-bright: var(--t-opp-bright--dark);
  --t-opp-medium: var(--t-opp-medium--dark);
  --t-opp-muted: var(--t-opp-muted--dark);
}

html[color-scheme="light"] {
  --base: var(--base--light);
  --base-rgb: var(--base-rgb--light);
  --base-tint: var(--base-tint--light);
  --base-shade: var(--base-shade--light);
  --base-opp: var(--base-opp--light);
  --base-opp-tint: var(--base-opp-tint--light);
  --accent: var(--accent--light);
  --accent-rgb: var(--accent-rgb--light);
  --additional: var(--additional--light);
  --additional-rgb: var(--additional-rgb--light);
  --neutral-transparent: var(--neutral-transparent--light);
  --st-bright: var(--st-bright--light);
  --st-medium: var(--st-medium--light);
  --st-muted: var(--st-muted--light);
  --st-opp-bright: var(--st-opp-bright--light);
  --fw-regular: var(--fw-regular--light);
  --fw-medium: var(--fw-medium--light);
  --fw-semibold: var(--fw-semibold--light);
  --fw-bold: var(--fw-bold--light);
  --fw-regular-opp: var(--fw-regular-opp--light);
  --fw-medium-opp: var(--fw-medium-opp--light);
  --t-bright: var(--t-bright--light);
  --t-medium: var(--t-medium--light);
  --t-muted: var(--t-muted--light);
  --t-muted-extra: var(--t-muted-extra--light);
  --t-opp-bright: var(--t-opp-bright--light);
  --t-opp-medium: var(--t-opp-medium--light);
  --t-opp-muted: var(--t-opp-muted--light);
}

html,
body {
  background-color: #161616;
}

html[color-scheme="light"] body {
  background-color: var(--base);
}

/* Typography scoped below hero — does not affect protected header/hero */
.the55-below-hero,
.the55-below-hero p,
.the55-below-hero li,
.the55-below-hero .t-small,
.the55-below-hero .t-large,
.the55-below-hero .t-opposite,
.the55-below-hero input,
.the55-below-hero textarea,
.the55-below-hero .footer-nav__link .btn-caption,
.the55-below-hero .footer-socials__link,
.the55-below-hero .mxd-block__paragraph p,
.the55-below-hero .mxd-section-title__hrdescr p,
.the55-below-hero .mxd-blog-preview__data a,
.the55-below-hero .mxd-awards-list__tagslist p,
.the55-below-hero .mxd-services-cards__info p,
.the55-below-hero .mxd-promo__caption {
  font-family: var(--the55-font-body) !important;
  line-height: 1.6;
}

.the55-below-hero h2,
.the55-below-hero h3,
.the55-below-hero .reveal-type,
.the55-below-hero .mxd-section-title__hrtitle h2,
.the55-below-hero .mxd-projects-stack__title h2,
.the55-below-hero .mxd-block__name h2,
.the55-below-hero .the55-about__pillar-body h3,
.the55-below-hero .the55-about__tagline,
.the55-below-hero .mxd-services-cards__title p,
.the55-below-hero .mxd-awards-list__title p,
.the55-below-hero .mxd-footer__wordmark,
.the55-below-hero .mxd-promo__title,
.the55-below-hero .mxd-blog-preview__data a {
  font-family: var(--the55-font-display) !important;
  letter-spacing: -0.02em;
}

.the55-below-hero h2,
.the55-below-hero .reveal-type {
  font-size: clamp(2rem, 4.5vw, 3.75rem);
  font-weight: 600;
  line-height: 1.08;
}

.the55-below-hero .btn,
.the55-below-hero .btn-caption,
.the55-below-hero .tag {
  font-family: var(--the55-font-body) !important;
  font-weight: 600;
}

.the55-below-hero .mxd-services-section-label {
  font-family: var(--the55-font-body) !important;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.the55-project-desc {
  margin-top: 0.5rem;
  opacity: 0.85;
  max-width: 28rem;
}

/* Portfolio project pages */
.the55-portfolio-hero {
  background-size: cover;
  background-position: center;
  aspect-ratio: 16 / 9;
  min-height: clamp(220px, 42vw, 560px);
}

.the55-delivered-block {
  margin-top: clamp(1rem, 2vw, 2rem);
}

.the55-delivered-panel {
  position: relative;
  overflow: hidden;
  background: #faf7f6 !important;
  border: 1px solid color-mix(in srgb, #161616 8%, transparent);
}

.the55-delivered-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.the55-delivered-panel__title {
  margin: 0;
  max-width: none;
  font-family: var(--the55-font-display) !important;
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #161616;
}

.the55-delivered-panel__mark {
  width: clamp(3rem, 7vw, 4.5rem);
  height: clamp(3rem, 7vw, 4.5rem);
  object-fit: contain;
  opacity: 0.85;
  flex-shrink: 0;
}

.the55-delivered-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.the55-delivered-column--full {
  grid-column: 1 / -1;
}

.the55-delivered-column__label {
  margin: 0 0 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--the55-blue);
  font-family: var(--the55-font-body) !important;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #585858;
}

.the55-delivered-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}

.the55-delivered-row {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid color-mix(in srgb, #161616 10%, transparent);
}

.the55-delivered-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.the55-delivered-row__num {
  flex-shrink: 0;
  min-width: 1.75rem;
  font-family: var(--the55-font-display) !important;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--the55-purple);
}

.the55-delivered-row__text {
  font-family: var(--the55-font-body) !important;
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  font-weight: 500;
  line-height: 1.55;
  color: #161616;
}

.mxd-project .inner-headline__text {
  margin-top: 0.75rem;
  max-width: 36rem;
}

.the55-promo__text {
  margin: 0 0 1.5rem;
  max-width: 32rem;
  color: var(--t-opp-bright) !important;
  opacity: 0.92;
}

.the55-promo .mxd-promo__bg {
  display: none;
}

.the55-promo .mxd-promo__icon img.the55-promo__logo {
  width: clamp(3.5rem, 8vw, 5rem);
  height: clamp(3.5rem, 8vw, 5rem);
  object-fit: contain;
}

.the55-promo .the55-promo__brand {
  pointer-events: none;
}

.the55-promo .the55-promo__mark {
  width: clamp(10rem, 28vw, 18rem) !important;
  height: auto !important;
  opacity: 0.22;
  object-fit: contain;
  filter: none;
  transform: none !important;
}

@media only screen and (min-width: 1200px) {
  .the55-promo .the55-promo__mark {
    opacity: 0.28;
  }
}

.the55-mission-vision {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.the55-mission-vision__item {
  padding: 1.25rem;
  border-radius: 1.25rem;
  background: color-mix(in srgb, currentColor 5%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
}

.the55-mission-vision__item h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}

.the55-mission-vision__item p {
  margin: 0;
  font-size: 0.95rem;
  opacity: 0.85;
}

/* About section */
.the55-about__header {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.the55-about__cta {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  height: 100%;
  padding-top: 0.5rem;
}

.the55-about__intro {
  margin-bottom: 1rem;
}

.the55-about__copy {
  margin: 0;
  width: 100%;
  max-width: none;
}

.the55-about__tagline {
  margin: clamp(1.5rem, 3vw, 2rem) 0 0;
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  font-family: var(--the55-font-display) !important;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--accent);
}

.the55-about__pillars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.the55-about__pillar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 16rem;
}

.the55-about__pillar-index {
  font-family: var(--the55-font-display) !important;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #ffffff;
  opacity: 1;
}

.the55-about__pillar-body h3 {
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: 600;
  margin: 0 0 0.75rem;
  line-height: 1.15;
}

.the55-about__pillar-body p {
  margin: 0;
  font-size: clamp(0.98rem, 1.6vw, 1.08rem);
  line-height: 1.65;
  max-width: 28rem;
  opacity: 0.92;
}

.the55-about__pillar--wide {
  grid-column: 1 / -1;
}

.the55-about__pillar--wide .the55-about__pillar-body p {
  max-width: 52rem;
}

.the55-why__pillars {
  margin-top: 0;
}

/* Our Capabilities — display-only list */
.the55-capabilities .the55-capabilities__item {
  cursor: default;
  text-decoration: none;
  color: inherit;
}

.the55-capabilities .the55-capabilities__item:hover {
  color: inherit;
}

.the55-capabilities .mxd-awards-list__icon {
  display: none;
}

.the55-industry-card p {
  margin-bottom: 0.75rem;
}

/* Our Partners */
.the55-partners-section .the55-partners__header {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.the55-partners-marquee {
  margin-top: 0.5rem;
  min-height: 12rem;
}

.the55-partners-marquee .the55-partner-card {
  width: 280px;
  height: 160px;
  padding: 0;
  overflow: hidden;
  background: transparent;
  animation: none;
  opacity: 1;
  transform: none;
}

.the55-partners-marquee .the55-partner-card__inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.75rem 2rem;
  border-radius: var(--_radius-m, 1.25rem);
  background: transparent;
  border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.the55-partners-marquee .the55-partner-card:hover .the55-partner-card__inner {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  transform: translateY(-4px);
}

.the55-partners-marquee .the55-partner-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: grayscale(0.05);
}

@media (min-width: 768px) {
  .the55-partners-marquee .the55-partner-card {
    width: 320px;
    height: 180px;
  }
}

.the55-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-start;
}

.the55-home-cta .mxd-promo__content {
  width: 100%;
  max-width: 100%;
  gap: 2.5rem;
}

.the55-home-cta .mxd-promo__title {
  width: 100% !important;
}

.the55-home-cta .the55-promo__text {
  margin: 1rem 0 1.5rem;
  max-width: none;
  width: 100%;
  color: #161616 !important;
  opacity: 1;
  text-align: left;
}

.the55-home-cta .the55-promo__brand,
.the55-home-cta .mxd-promo__images {
  display: none !important;
}

.the55-home-cta .the55-cta-contact {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #ffffff !important;
}

.the55-home-cta .the55-cta-contact .btn-caption,
.the55-home-cta .the55-cta-contact i {
  color: #ffffff !important;
}

.the55-home-cta .the55-promo__mark {
  opacity: 0.18;
}

@media only screen and (min-width: 1200px) {
  .the55-home-cta .the55-promo__mark {
    opacity: 0.24;
  }
}

.mxd-footer__wordmark {
  font-family: var(--the55-font-display) !important;
  font-size: clamp(4rem, 18vw, 14rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.9;
  white-space: nowrap;
  margin: 0;
  color: currentColor;
}

.mxd-footer__fullwidth-text .mxd-footer__wordmark {
  display: block;
}

.the55-social-links {
  margin-top: 1rem;
}

.the55-legal-content a {
  text-decoration: underline;
}

.the55-below-hero .mxd-services-list__tagslist ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.the55-below-hero .mxd-services-list__tagslist li p {
  margin: 0;
}

@media (max-width: 767px) {
  .the55-mission-vision,
  .the55-about__pillars,
  .the55-delivered-columns {
    grid-template-columns: 1fr;
  }

  .the55-about__pillar--wide {
    grid-column: auto;
  }

  .the55-about__cta {
    margin-top: 1.25rem;
  }
}

@media (min-width: 992px) {
  .the55-about__cta {
    justify-content: flex-end;
  }
}

/* Header logo */
.the55-logo {
  background: transparent;
}

.the55-logo__image {
  display: block;
  width: 4.75rem !important;
  height: 4.75rem !important;
  max-width: none;
  object-fit: contain;
  background: transparent;
}

@media only screen and (min-width: 768px) {
  .the55-logo__image {
    width: 6.25rem !important;
    height: 6.25rem !important;
  }
}

/* White text on purple brand cards */
.bg-additional .opposite,
.bg-additional .t-opposite,
.bg-additional h3 {
  color: #ffffff !important;
}

/* Homepage one-page section anchors */
#home,
#about,
#portfolio,
#services,
#contact {
  scroll-margin-top: 6rem;
}

.the55-menu__brand {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.the55-menu__logo {
  width: 3.25rem;
  height: 3.25rem;
  object-fit: contain;
  flex-shrink: 0;
}

.the55-menu__caption {
  margin: 0;
  font-family: var(--the55-font-body) !important;
  font-size: 1rem;
  line-height: 1.55;
  opacity: 0.9;
}

@media only screen and (min-width: 768px) {
  .the55-menu__logo {
    width: 4rem;
    height: 4rem;
  }

  .the55-menu__caption {
    font-size: 1.05rem;
  }
}

/* Mobile menu promo panel */
.the55-menu-promo__caption {
  margin: 0 0 1.25rem;
  font-family: var(--the55-font-body) !important;
  line-height: 1.55;
}

.the55-menu-promo__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 11rem;
  padding: 2.5rem 2rem;
  border-radius: 3.8rem;
  background: color-mix(in srgb, currentColor 4%, transparent);
}

.the55-menu-promo__logo {
  width: clamp(5.5rem, 16vw, 9rem);
  height: auto;
  object-fit: contain;
}