/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Roobert';
  src: url('/assets/fonts/Roobert-Regular.woff2') format('woff2'),
       url('/assets/fonts/Roobert-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roobert';
  src: url('/assets/fonts/Roobert-Heavy.woff2') format('woff2'),
       url('/assets/fonts/Roobert-Heavy.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
input, textarea { font: inherit; }

/* ---------- Design tokens ---------- */
:root {
  --c-yellow: #FFEC67;
  --c-pink: #FF616B;
  --c-blue: #119FD1;
  --c-green: #81BB3F;
  --c-orange: #FCAA3D;
  --c-ink: #1E1A1A;
  --c-white: #ffffff;
  --c-silver: #dddddd;
  --c-grey: #aaaaaa;
  --c-light-grey: #ededed;

  --f-sans: 'Roobert', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-mono: 'Space Mono', 'Courier New', monospace;

  --container-width: 1272px;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 4.5rem;
  --space-12: 7rem;

  --transition: 200ms ease-in-out;
}

body {
  font-family: var(--f-sans);
  color: var(--c-ink);
  background: var(--c-white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--f-sans); font-weight: 700; line-height: 1.08; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.5rem, 6vw, 4.625rem); }
h2 { font-size: clamp(1.875rem, 3.4vw, 3.125rem); margin-bottom: var(--space-2); }
h3 { font-size: 1.375rem; margin-bottom: var(--space-1); }
p { max-width: 60ch; }

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

/* ---------- Mono labels / eyebrows ---------- */
.mono {
  font-family: var(--f-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8125rem;
}
.eyebrow {
  font-family: var(--f-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8125rem;
  font-weight: 400;
  margin-bottom: var(--space-2);
  display: block;
}

/* ---------- Arrow link (the site's core CTA pattern) ---------- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--f-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.8125rem;
  font-weight: 400;
  padding-bottom: 0.2em;
  border-bottom: 1px solid currentColor;
  transition: gap var(--transition);
}
.link-arrow::after { content: '\2192'; transition: transform var(--transition); }
.link-arrow:hover { gap: 0.85em; }
.link-arrow--light { color: var(--c-white); }

/* ---------- Pills / badges ---------- */
.pill {
  display: inline-block;
  font-family: var(--f-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.6875rem;
  padding: 0.35em 0.9em;
  border: 1px solid currentColor;
  border-radius: 20px;
}
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  background: var(--c-yellow);
  color: var(--c-ink);
  font-family: var(--f-mono);
  text-transform: uppercase;
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 2;
}

/* ---------- Header ---------- */
.site-header {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  padding-block: var(--space-2);
  transition: background var(--transition), color var(--transition), position 0s;
  color: var(--c-white);
}
.site-header.is-solid {
  position: fixed;
  background: var(--c-white);
  color: var(--c-ink);
  box-shadow: 0 1px 0 var(--c-light-grey);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo {
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.nav-list { display: flex; gap: var(--space-4); }
.nav-link {
  font-family: var(--f-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.8125rem;
  position: relative;
  padding-bottom: 0.3em;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1px;
  background: currentColor;
  transition: right var(--transition);
}
.nav-link.is-active::after,
.nav-link:hover::after { right: 0; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-1);
}
.nav-toggle span { width: 24px; height: 2px; background: currentColor; }

.nav-mobile {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--c-ink);
  color: var(--c-white);
  flex-direction: column;
  justify-content: center;
  padding: var(--space-4);
}
.nav-mobile.is-open { display: flex; }
.nav-mobile ul { display: flex; flex-direction: column; gap: var(--space-3); }
.nav-mobile a {
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: 2rem;
  text-transform: uppercase;
}
.nav-mobile-close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-3);
  color: var(--c-white);
  font-family: var(--f-mono);
  text-transform: uppercase;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}

@media (max-width: 780px) {
  .nav-list { display: none; }
  .nav-toggle { display: flex; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  color: var(--c-white);
  background:
    radial-gradient(ellipse 80% 60% at 30% 20%, rgb(255 236 103 / 0.16), transparent 60%),
    radial-gradient(ellipse 70% 60% at 80% 80%, rgb(17 159 209 / 0.22), transparent 60%),
    linear-gradient(160deg, #171414 0%, var(--c-ink) 55%, #241d1d 100%);
  overflow: hidden;
}
.hero--compact { min-height: 46vh; }
.hero-inner { position: relative; z-index: 2; max-width: 900px; }
.hero .eyebrow { color: var(--c-silver); }
.hero h1 { color: var(--c-yellow); font-size: clamp(2.1rem, 4.5vw, 3.5rem); }
.hero-subtitle { font-size: 1.15rem; margin-block: var(--space-2) var(--space-3); max-width: 620px; color: rgb(255 255 255 / 0.85); }

/* Cross-fading per-slide text content, synced with .hero-carousel-slide */
.hero-slide-content { transition: opacity 500ms ease; }
.hero-slide-content:not(.is-active) {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.hero-slide-content.is-active { position: relative; opacity: 1; }

.hero--center .hero-inner { max-width: 720px; margin-inline: auto; text-align: center; }
.hero--center .hero-subtitle { margin-inline: auto; font-weight: 600; color: var(--c-white); }

.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 999px;
  border: 1.5px solid rgb(255 255 255 / 0.4);
  background: rgb(255 255 255 / 0.08);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-yellow);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.hero-arrow:hover { background: rgb(255 255 255 / 0.18); border-color: var(--c-yellow); }
.hero-arrow--prev { left: var(--space-2); }
.hero-arrow--next { right: var(--space-2); }
.hero-arrow svg { width: 1.1rem; height: auto; fill: currentColor; }

.hero-scroll {
  position: absolute;
  bottom: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  color: var(--c-yellow);
  width: 1.1rem;
  animation: bob 2.2s ease-in-out infinite;
}
.hero-scroll svg { fill: currentColor; }
.hero--center .hero-scroll { color: var(--c-white); }
@keyframes bob {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 8px); }
}

@media (max-width: 780px) {
  .hero-arrow { display: none; }
}

/* ---------- Intro / CTA block ---------- */
.intro-cta {
  padding-block: var(--space-12);
  text-align: center;
}
.intro-cta .container { max-width: 820px; }
.intro-cta .eyebrow { justify-content: center; }
.intro-cta p.lead {
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  font-weight: 700;
  max-width: none;
  margin-bottom: var(--space-3);
}
.intro-cta .link-arrow { justify-content: center; }

/* ---------- Service bands ---------- */
.service-band {
  padding-block: var(--space-12);
  position: relative;
  overflow: hidden;
}
.service-band .container { max-width: 820px; text-align: center; }
.service-band .eyebrow { justify-content: center; }
.service-band p { margin-inline: auto; margin-bottom: var(--space-3); }
.service-band .link-arrow { justify-content: center; }
.service-band--yellow { background: var(--c-yellow); }
.service-band--blue { background: var(--c-blue); color: var(--c-white); }
.service-band--green { background: var(--c-green); }
.service-band--pink { background: var(--c-pink); color: var(--c-white); }
.service-band--orange { background: var(--c-orange); }
.service-band::before {
  content: '';
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 90px;
  height: 90px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  opacity: 0.35;
}
@media (max-width: 780px) {
  .service-band::before { display: none; }
}

/* ---------- Service carousel (horizontal, scroll or arrow nav) ---------- */
.service-carousel {
  position: relative;
  padding-block: var(--space-12);
}
.service-carousel--yellow { background: var(--c-yellow); }
.service-carousel--blue { background: var(--c-blue); color: var(--c-white); }
.service-carousel--green { background: var(--c-green); }
.service-carousel--pink { background: var(--c-pink); color: var(--c-white); }
.service-carousel--orange { background: var(--c-orange); }
.service-carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.service-carousel-track::-webkit-scrollbar { display: none; }
.service-carousel-item {
  flex: 0 0 100%;
  scroll-snap-align: start;
  max-width: 820px;
  margin-inline: auto;
  padding-inline: var(--space-6);
  text-align: center;
}
.service-carousel-item .eyebrow { justify-content: center; }
.service-carousel-item p { margin-inline: auto; margin-bottom: var(--space-3); }
.service-carousel-item .link-arrow { justify-content: center; }
.service-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1.5px solid var(--c-ink);
  background: transparent;
  color: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-carousel-arrow--prev { left: var(--space-4); }
.service-carousel-arrow--next { right: var(--space-4); }
@media (max-width: 780px) {
  .service-carousel-arrow { display: none; }
  .service-carousel-item { padding-inline: var(--space-4); }
}

/* ---------- Split (image + content side by side) ---------- */
.split { padding-block: var(--space-8); }
.split--light { background: var(--c-light-grey); }
.split-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: center;
}
.split--reverse .split-inner { direction: rtl; }
.split--reverse .split-content,
.split--reverse .split-media { direction: ltr; }
.split-media { display: flex; flex-direction: column; gap: var(--space-4); align-self: start; }
.split-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; }
.split-body :is(p, ul, blockquote) { margin-bottom: var(--space-2); }
.split-body blockquote {
  border-left: 3px solid var(--c-ink);
  padding-left: var(--space-2);
  font-weight: 700;
  font-size: 1.1rem;
}
.split-body ul { padding-left: 1.1rem; list-style: disc; }
.split-body h2, .split-body h3 {
  font-size: 1.375rem;
  margin-top: var(--space-4);
  margin-bottom: var(--space-1);
}
.split-body h2:first-child, .split-body h3:first-child { margin-top: 0; }
.split-body figure {
  margin: var(--space-4) 0;
}
.split-body figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 20px;
  display: block;
}
.split-body figcaption {
  font-size: 0.85rem;
  color: var(--c-grey);
  margin-top: var(--space-1);
}

@media (max-width: 780px) {
  .split-inner { grid-template-columns: 1fr; }
  .split--reverse .split-inner { direction: ltr; }
}

/* ---------- Section header ---------- */
.section-header { max-width: 620px; margin-bottom: var(--space-4); }

/* ---------- Quote / intro-cta secondary text on Our Offer ---------- */
.intro-cta .mono { display: block; color: var(--c-blue); margin-top: -1rem; margin-bottom: 1rem; }

/* ---------- Offer content (Nick's letter) ---------- */
.offer-content { padding-block: var(--space-12); overflow: hidden; }

.offer-content-lead { margin-inline: auto; max-width: 920px; text-align: center; margin-bottom: var(--space-8); }
.offer-content-lead__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 20px;
  margin-bottom: var(--space-4);
}
.offer-content-lead__text { display: grid; gap: var(--space-2); max-width: 680px; margin-inline: auto; text-align: left; }
.offer-content-lead__text p:last-child { font-weight: 700; }

.offer-content-row {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--space-6);
  align-items: center;
  padding-block: var(--space-8);
  border-top: 1px solid var(--c-light-grey);
}
.offer-content-row--reverse { grid-template-columns: 7fr 5fr; }
.offer-content-row--reverse .offer-content-row__media { order: 2; }
.offer-content-row__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 20px;
}
.offer-content-quote {
  font-size: clamp(1.5rem, 2.8vw, 2.125rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--space-3);
  padding-left: var(--space-3);
  border-left: 3px solid var(--c-yellow);
}
.offer-content-row__body p { margin-bottom: var(--space-2); max-width: 46ch; }
.offer-content-row__body p:last-child { margin-bottom: 0; }

.offer-content-signature {
  margin-top: var(--space-6);
  padding-top: var(--space-3);
  border-top: 1px solid var(--c-light-grey);
  font-family: var(--f-mono);
  font-size: 0.9rem;
}
.offer-content-signature span { display: block; color: var(--c-grey); margin-top: 0.2em; }

@media (max-width: 780px) {
  .offer-content-row,
  .offer-content-row--reverse { grid-template-columns: 1fr; }
  .offer-content-row--reverse .offer-content-row__media { order: 0; }
  .offer-content-row__media img { aspect-ratio: 4 / 3; }
}

/* ---------- Platform + examples (Our Offer) ---------- */
.platform-section {
  background: var(--c-ink);
  color: var(--c-white);
  padding-block: var(--space-8);
}
.platform-section .section-header { margin-inline: auto; text-align: center; }
.platform-section .eyebrow { color: var(--c-yellow); }
.platform-diagram {
  position: relative;
  max-width: 900px;
  margin: var(--space-8) auto 0;
  padding-inline: 230px;
}
.platform-diagram__image {
  width: 100%;
  max-width: 340px;
  margin-inline: auto;
  display: block;
}
.platform-diagram__note h3 { color: var(--c-yellow); font-size: 1.1rem; }
.platform-diagram__note p { color: rgb(255 255 255 / 0.7); font-size: 0.9rem; max-width: none; }
.platform-diagram__note--people { position: absolute; width: 210px; left: 0; top: 8%; text-align: right; }
.platform-diagram__note--product { position: absolute; width: 210px; right: 0; top: 8%; text-align: left; }
.platform-diagram__note--activity { max-width: 380px; margin: var(--space-3) auto 0; text-align: center; }

@media (max-width: 1080px) {
  .platform-diagram { padding-inline: 0; }
  .platform-diagram__note--people,
  .platform-diagram__note--product {
    position: static;
    width: auto;
    max-width: 360px;
    margin: var(--space-3) auto 0;
    text-align: center !important;
  }
}

.examples-section { padding-block: var(--space-8); }
.examples-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3);
}
.example-card {
  padding: var(--space-3);
  border-radius: 16px;
  background: var(--c-light-grey);
}
.example-card .eyebrow { color: var(--c-pink); margin-bottom: var(--space-1); }
.example-card h3 { font-size: 1.1rem; }
.example-card-meta { display: grid; gap: 0.5rem; margin-top: var(--space-2); }
.example-card-meta div { font-size: 0.9rem; }
.example-card-meta b { font-family: var(--f-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.04em; display: block; color: var(--c-grey); margin-bottom: 0.15em; }

/* ---------- Working with (partner logos) ---------- */
.working-with { padding-block: var(--space-8); text-align: center; background: rgb(237, 237, 237); }
.working-with .eyebrow { color: var(--c-ink); justify-content: center; }
.working-with-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-6) var(--space-8);
  margin-top: var(--space-4);
}
.working-with-logos li { display: flex; align-items: center; justify-content: center; width: 150px; height: 150px; }
.working-with-logos img {
  width: 150px;
  height: 150px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.7;
  transition: opacity var(--transition), filter var(--transition);
}
.working-with-logos img:hover { filter: grayscale(0); opacity: 1; }

/* ---------- Project grid / cards ---------- */
.featured-projects, .projects-archive { padding-block: var(--space-8); }
.project-filters { text-align: center; margin-bottom: var(--space-8); }
.project-filters-label {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-ink);
  margin-bottom: var(--space-2);
}
.project-filters-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.tag-filter {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  border: 1.5px solid var(--c-ink);
  background: var(--c-white);
  color: var(--c-ink);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.tag-filter:hover { border-color: var(--c-yellow); }
.tag-filter.is-active { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-white); }
.project-card[hidden] { display: none; }
.project-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-bottom: var(--space-3); }
.project-card { display: block; }
.project-card-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--c-ink); }
.project-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.project-card:hover .project-card-media img { transform: scale(1.04); }
.project-card-body { padding-block: var(--space-2); }
@media (max-width: 780px) { .project-grid { grid-template-columns: 1fr; } }
.tag-list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: var(--space-1); }
.tag {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--c-ink);
  border-radius: 20px;
}
.project-card h3 { font-size: 1.15rem; margin-bottom: var(--space-1); }

.project-carousel { position: relative; }
.project-carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  gap: var(--space-4);
}
.project-carousel-track::-webkit-scrollbar { display: none; }
.project-carousel-track .project-card {
  flex: 0 0 calc(50% - var(--space-4) / 2);
  scroll-snap-align: start;
}
.project-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1.5px solid var(--c-ink);
  background: var(--c-white);
  color: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.project-carousel-arrow--prev { left: var(--space-2); }
.project-carousel-arrow--next { right: var(--space-2); }
@media (max-width: 780px) {
  .project-carousel-arrow { display: none; }
  .project-carousel-track .project-card { flex-basis: 85%; }
}

/* ---------- Project hero ---------- */
.project-hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: flex-end;
  color: var(--c-white);
  background: var(--c-ink);
  padding-block: var(--space-6);
  overflow: hidden;
}

/* ---------- Hero photo carousel (reused by .hero and .project-hero) ---------- */
.hero-carousel-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-carousel-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1600ms ease-in-out;
}
.hero-carousel-slide.is-active { opacity: 1; }
.hero-carousel-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgb(30 26 26 / 0.9) 0%, rgb(30 26 26 / 0.45) 55%, rgb(30 26 26 / 0.35) 100%);
}
.project-hero .container { position: relative; z-index: 1; }
.project-hero .tag-list .tag { border-color: var(--c-white); color: var(--c-white); }
.project-hero h1 { color: var(--c-yellow); margin-top: var(--space-2); }

.project-intro { padding-block: var(--space-6); }
.project-intro h2 { font-size: 2rem; }
.project-intro--yellow { background: var(--c-yellow); }
.project-intro--blue { background: var(--c-blue); color: var(--c-white); }
.project-intro--green { background: var(--c-green); }
.project-intro--pink { background: var(--c-pink); color: var(--c-white); }
.project-intro--orange { background: var(--c-orange); }
.project-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid rgb(30 26 26 / 0.25);
}
.project-intro--blue .project-meta-grid,
.project-intro--pink .project-meta-grid { border-top-color: rgb(255 255 255 / 0.3); }
.project-meta-grid .eyebrow { margin-bottom: 0.35rem; opacity: 0.7; }
.project-meta-grid p { font-weight: 700; font-size: 1.05rem; }

/* ---------- Blog post ---------- */
.post-hero img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; display: block; }
.post-intro { padding-block: var(--space-6) var(--space-4); }
.post-intro-inner { max-width: 760px; margin-inline: auto; }
.post-intro h1 { margin-top: var(--space-2); }
.post-byline {
  font-family: var(--f-mono);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.6;
  margin-top: var(--space-2);
}
.post-content-section { padding-block: var(--space-2) var(--space-8); }
.post-content { max-width: 760px; margin-inline: auto; }
.post-content p { max-width: none; }

@media (max-width: 780px) {
  .post-hero img { aspect-ratio: 4 / 3; }
}

.related-projects { padding-block: var(--space-8); background: var(--c-light-grey); }

/* ---------- Team ---------- */
.team-section { padding-block: var(--space-8); }
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-4); }
.team-card { border-top: 3px solid var(--c-ink); padding-top: var(--space-2); }
.team-avatar {
  width: 3.25rem; height: 3.25rem;
  border-radius: 999px;
  background: var(--c-ink);
  color: var(--c-yellow);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-mono);
  font-weight: 400;
  margin-bottom: var(--space-2);
}
.team-role { font-family: var(--f-mono); text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.75rem; color: var(--c-blue); margin-bottom: var(--space-1); }
.team-linkedin { display: inline-block; margin-top: var(--space-1); }

/* ---------- Contact ---------- */
.contact-section { padding-block: var(--space-8); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.contact-email { font-size: 1.5rem; font-weight: 700; display: inline-block; margin-block: var(--space-2); }
.contact-form { display: flex; flex-direction: column; gap: var(--space-2); max-width: 420px; }
.contact-form-field { display: flex; flex-direction: column; gap: var(--space-2); }
.contact-form label { font-family: var(--f-mono); text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.75rem; }
.contact-form input,
.contact-form textarea {
  padding: 0.85rem 0;
  border: none;
  border-bottom: 1px solid var(--c-ink);
  background: transparent;
  border-radius: 0;
  font: inherit;
  resize: vertical;
}
.contact-form input:focus,
.contact-form textarea:focus { outline: none; border-bottom-width: 2px; }
.contact-form-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.contact-form button {
  align-self: flex-start;
  margin-top: var(--space-1);
  padding: 0.85rem 1.6rem;
  background: var(--c-ink);
  color: var(--c-white);
  font-family: var(--f-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.8125rem;
}
.contact-form button:hover { background: var(--c-blue); }
.contact-form button:disabled { opacity: 0.6; cursor: not-allowed; }
.contact-form-status { font-size: 0.875rem; min-height: 1.25em; }
.contact-form-status[data-state="error"] { color: var(--c-pink); }
.contact-form-status[data-state="success"] { color: var(--c-blue); }
@media (max-width: 780px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------- CTA band ---------- */
.cta-band { background: var(--c-ink); color: var(--c-white); text-align: center; }
.cta-band h2 { color: var(--c-yellow); }
.cta-band-inner { max-width: 560px; margin-inline: auto; padding-block: var(--space-8); }
.cta-band .link-arrow { justify-content: center; margin-top: var(--space-2); }

/* ---------- Project implementation (Our Offer) ---------- */
.project-implementation { padding-block: var(--space-8); }
.project-implementation .section-header { margin-inline: auto; text-align: center; }
.project-implementation__map { width: 100%; max-width: 1100px; margin-inline: auto; }

/* ---------- Marquee ---------- */
.marquee {
  background: var(--c-yellow);
  color: var(--c-ink);
  overflow: hidden;
  padding-block: var(--space-2);
  white-space: nowrap;
}
.marquee-track {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  animation: marquee 22s linear infinite;
}
.marquee-track span {
  font-family: var(--f-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.875rem;
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
}
.marquee-track .marquee-globe { width: 1rem; height: 1rem; fill: currentColor; flex-shrink: 0; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--c-ink); color: rgb(255 255 255 / 0.85); }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-4); }
.footer-logo { font-family: var(--f-sans); font-weight: 700; color: var(--c-white); text-transform: uppercase; }
.footer-tagline { font-family: var(--f-mono); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.03em; }
.footer-nav ul { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.footer-nav a { font-family: var(--f-mono); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.03em; }
.footer-contact a { font-weight: 700; color: var(--c-yellow); }
.footer-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-1);
  border-top: 1px solid rgb(255 255 255 / 0.12);
  padding-block: var(--space-2);
  font-family: var(--f-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}