/* =============================================
   CSS VARIABLES
   ============================================= */
:root {
  /* Font */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Background colors */
  --bg-dark:       #1a1a1a;
  --bg-white:      #ffffff;
  --bg-driver:     #DDDDED;
  --bg-green:      #F6EFEB;
  --bg-blue-gray:  #dfe8f5;
  --bg-gray:       #eeeeee;
  --bg-light-blue: #e4edf5;

  /* Text colors */
  --text-white:     #ffffff;
  --text-muted:     #787878;
  --text-dim:       #999999;
  --text-dark:      #1a1a1a;
  --text-secondary: #5c5c5c;

  /* Accent */
  --color-cyan: #4ec9d8;

  /* Dividers */
  --divider-light: rgba(255, 255, 255, 0.18);
  --divider-dark:  rgba(0, 0, 0, 0.12);

  /* Nav */
  --nav-height:      68px;
  --nav-btn-bg:      #363636;
  --nav-btn-border:  #525252;

  /* Layout */
  --container-max: 1280px;
  --container-px:  80px;
  --section-py:    100px;

  /* Misc */
  --radius-card:  16px;
  --radius-img:   12px;
  --transition:   200ms ease;
}

/* =============================================
   RESET & BASE
   ============================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  background-color: var(--bg-dark);
  color: var(--text-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

ul  { list-style: none; }
img { max-width: 100%; height: auto; display: block; }

a {
  color: inherit;
  text-decoration: none;
}

/* =============================================
   LAYOUT
   ============================================= */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

/* =============================================
   UTILITIES
   ============================================= */
.divider {
  border: none;
  height: 1px;
}

.divider--light { background-color: var(--divider-light); }
.divider--dark  { background-color: var(--divider-dark); }

.link-underline {
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity var(--transition);
}
.link-underline:hover { opacity: 0.6; }

.link-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* =============================================
   NAVIGATION
   ============================================= */
.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  transition: background-color var(--transition), backdrop-filter var(--transition);
}

.nav.is-scrolled {
  background-color: rgba(22, 22, 22, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 40px;
}

.nav__link {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color var(--transition);
}

.nav__link:hover,
.nav__link--active {
  color: var(--text-white);
}

.nav__cta {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-white);
  background-color: var(--nav-btn-bg);
  border: 1px solid var(--nav-btn-border);
  border-radius: 100px;
  padding: 9px 20px;
  transition: background-color var(--transition), border-color var(--transition);
}

.nav__cta:hover {
  background-color: #484848;
  border-color: #686868;
}

/* =============================================
   HERO SECTION
   ============================================= */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--bg-dark);
  background-image: url('https://res.cloudinary.com/dflfttgoc/image/upload/v1780892904/bg-hero_phsfad.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

/* SVG Gradient background */
.gradient-svg {
  position: absolute;
  top: -20%;
  right: -15%;
  width: 85%;
  max-width: 1100px;
  height: auto;
  pointer-events: none;
  z-index: 0;
  user-select: none;
  opacity: 1;
}

/* Gradient blobs — used inside dark project section */
.hero__blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.hero__blob--teal {
  width: 560px;
  height: 560px;
  top: -8%;
  right: 10%;
  background: radial-gradient(circle, rgba(18, 95, 118, 0.6) 0%, transparent 68%);
  filter: blur(70px);
}

.hero__blob--olive {
  width: 620px;
  height: 580px;
  bottom: -12%;
  right: 4%;
  background: radial-gradient(circle, rgba(80, 76, 12, 0.68) 0%, transparent 68%);
  filter: blur(80px);
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 80px;
  padding-block: 120px 80px;
}

/* Headline */
.hero__title {
  display: flex;
  flex-direction: column;
  gap: 0;
  font-size: clamp(32px, 5.4vw, 64px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.hero__title-line {
  display: block;
  opacity: 0;
  transform: translateY(24px);
  animation: fadeInUp 0.7s ease forwards;
}

.hero__title-line:nth-child(1) { animation-delay: 0.1s; }
.hero__title-line:nth-child(2) { animation-delay: 0.25s; }
.hero__title-line:nth-child(3) { animation-delay: 0.4s; }

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__title-line--muted  { color: var(--text-muted);  font-weight: 600; }
.hero__title-line--bright { color: var(--text-white);  font-weight: 500; }

/* Info block — 2 columns, offset right */
.hero__info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-inline-start: 26%;
}

.hero__info-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
  opacity: 0;
  transform: translateY(24px);
  animation: fadeInUp 0.7s ease forwards;
}

.hero__info-col:nth-child(1) { animation-delay: 0.55s; }
.hero__info-col:nth-child(2) { animation-delay: 0.7s; }

.hero__bio {
  font-size: clamp(15px, 1.5vw, 20px);
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 420px;
}

.hero__info .link-list a {
  font-size: clamp(15px, 1.5vw, 20px);
  color: var(--text-muted);
}

/* =============================================
   PROJECT SECTIONS — SHARED
   ============================================= */
.project {
  position: relative;
  padding-block: var(--section-py);
}

/* Background variants */
.project--white      { background-color: var(--bg-white); }
.project--driver     { background-color: var(--bg-driver); }
.project--green      { background-color: var(--bg-green); }
.project--dark       { background-color: var(--bg-dark); overflow: hidden; }
.project--blue-gray  { background-color: var(--bg-blue-gray); }
.project--gray       { background-color: var(--bg-gray); }
.project--light-blue { background-color: var(--bg-light-blue); }

/* Project header */
.project__header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 60px;
  align-items: start;
  margin-bottom: 56px;
}

.project__header-left {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Title */
.project__title {
  font-size: clamp(20px, 2.6vw, 38px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text-dark);
  width: 100%;
}

.project__title--on-dark { color: var(--text-white); }

/* Description */
.project__desc {
  font-size: clamp(13px, 1.2vw, 16px);
  line-height: 1.7;
  color: var(--text-secondary);
  padding-right: 64px;
}

.project__desc--on-dark { color: rgba(255, 255, 255, 0.65); }

/* Meta — Role / Scope */
.project__meta {
  display: flex;
  gap: 48px;
}

.project__meta--on-dark {}

.project__meta-col {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 110px;
}

.project__meta-label {
  font-size: clamp(12px, 1.1vw, 16px);
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 16px;
  letter-spacing: 0.02em;
}

.project__meta-label--on-dark { color: var(--text-white); }

.project__meta-value {
  font-size: clamp(12px, 1.1vw, 16px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-secondary);
}

.project__meta-value--on-dark { color: rgba(255, 255, 255, 0.65); }

/* =============================================
   PROJECT VISUALS — SINGLE COMPOSITE IMAGE
   ============================================= */
.project__visuals {
  width: 100%;
}

.project__visual-img {
  width: 100%;
  height: auto;
  display: block;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* =============================================
   CTA / FOOTER SECTION
   ============================================= */
.cta {
  position: relative;
  background-color: var(--bg-dark);
  overflow: hidden;
  padding-block: var(--section-py);
}

.cta__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 60px;
  align-items: start;
}

.cta__left {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cta__title {
  font-size: clamp(28px, 3.5vw, 52px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text-white);
}

.cta__subtitle {
  font-size: clamp(14px, 1.3vw, 18px);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 480px;
}

.cta__right {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cta__right .link-list a {
  font-size: clamp(15px, 1.5vw, 20px);
  color: var(--text-muted);
}

/* =============================================
   BACK TO TOP BUTTON
   ============================================= */
.back-to-top {
  position: fixed;
  bottom: 40px;
  right: 40px;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: rgba(40, 40, 40, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 100px;
  padding: 10px 18px;
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.03em;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 250ms ease, transform 250ms ease, background-color 200ms ease, color 200ms ease;
}

.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.back-to-top:hover {
  background-color: rgba(60, 60, 60, 0.95);
  color: var(--text-white);
}

/* =============================================
   ARCHIVE PAGE
   ============================================= */

/* Hero */
.arc-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  background-color: var(--bg-dark);
  background-image: url('https://res.cloudinary.com/dflfttgoc/image/upload/v1781194386/hero-achieve_v2tzvy.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  overflow: visible;
}

.arc-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 60px;
  padding-block: 140px 0;
}

.arc-hero__left {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-bottom: 60px;
}

.arc-hero__title {
  font-size: clamp(72px, 13vw, 180px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text-white);
  opacity: 0;
  transform: translateY(24px);
  animation: fadeInUp 0.7s ease forwards 0.1s;
}

.arc-hero__desc {
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.75;
  color: var(--text-muted);
  max-width: 420px;
  opacity: 0;
  transform: translateY(24px);
  animation: fadeInUp 0.7s ease forwards 0.3s;
}

.arc-hero__card {
  align-self: flex-end;
  max-width: 320px;
  justify-self: end;
  position: relative;
  z-index: 2;
  margin-bottom: -240px;
  opacity: 0;
  transform: translateY(24px);
  animation: fadeInUp 0.7s ease forwards 0.5s;
}

.arc-hero__card-text {
  background-color: #ffffff;
  padding: 24px 28px;
  font-size: clamp(13px, 1.1vw, 15px);
  line-height: 1.6;
  color: var(--text-dark);
}

.arc-hero__card-img {
  width: 100%;
  height: 240px;
  background-color: #111827;
  overflow: hidden;
}

.arc-hero__card-img-inner {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Statement */
.arc-statement {
  background-color: var(--bg-white);
  padding-top: 180px;
  padding-bottom: 100px;
}

.arc-statement__heading {
  font-size: clamp(22px, 3.5vw, 52px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--text-dark);
  max-width: 820px;
  margin-bottom: 64px;
}

/* Scroll-triggered fade-in */
.fade-in-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

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

.arc-statement__trusted {
  font-size: clamp(14px, 1.2vw, 17px);
  color: var(--text-secondary);
  margin-bottom: 48px;
}

.arc-statement__trusted strong {
  color: var(--text-dark);
  font-weight: 700;
}

.arc-statement__logos {
  display: flex;
  align-items: center;
  gap: 56px;
  flex-wrap: wrap;
}

.arc-logos-strip {
  width: 100%;
  overflow: hidden;
  margin-top: 48px;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.arc-logos-track {
  display: flex;
  align-items: center;
  gap: 56px;
  width: max-content;
  animation: marquee-rtl 80s linear infinite;
}

.arc-logos-track:hover {
  animation-play-state: paused;
}

.arc-logo-img {
  height: 72px;
  width: auto;
  object-fit: contain;
  display: block;
  opacity: 0.7;
  flex-shrink: 0;
  filter: grayscale(100%);
  transition: opacity 200ms ease, filter 200ms ease;
}

.arc-logo-img:hover {
  opacity: 1;
  filter: grayscale(0%);
}

@keyframes marquee-rtl {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Archive Cards — shared */
.arc-card {
  padding-block: var(--section-py);
}

.arc-card--blue-steel  { background-color: #4a6e8a; }
.arc-card--olive       { background-color: #757550; }
.arc-card--steel-blue  { background-color: #6a8fa8; }
.arc-card--dark        { background-color: var(--bg-dark); }
.arc-card--light-gray  { background-color: #e5e5e5; }
.arc-card--purple      { background-color: #5c3d8f; }
.arc-card--charcoal    { background-color: #2b2b2b; }

/* Text color overrides for colored bg cards — white text on dark/colored bg */
.arc-card--blue-steel .project__title,
.arc-card--olive .project__title,
.arc-card--steel-blue .project__title { color: var(--text-white); }

.arc-card--blue-steel .project__desc,
.arc-card--olive .project__desc,
.arc-card--steel-blue .project__desc { color: rgba(255, 255, 255, 0.65); }

.arc-card--blue-steel .project__meta-label,
.arc-card--olive .project__meta-label,
.arc-card--steel-blue .project__meta-label { color: var(--text-white); }

.arc-card--blue-steel .project__meta-value,
.arc-card--olive .project__meta-value,
.arc-card--steel-blue .project__meta-value { color: rgba(255, 255, 255, 0.65); }

/* Light gray card — dark text */
.arc-card--light-gray .project__title  { color: var(--text-dark); }
.arc-card--light-gray .project__desc   { color: var(--text-secondary); }
.arc-card--light-gray .project__meta-label { color: var(--text-dark); }
.arc-card--light-gray .project__meta-value { color: var(--text-secondary); }

/* Charcoal card — all white */
.arc-card--charcoal .project__title  { color: var(--text-white); }
.arc-card--charcoal .project__desc   { color: rgba(255, 255, 255, 0.65); }
.arc-card--charcoal .project__meta-label { color: var(--text-white); }
.arc-card--charcoal .project__meta-value { color: rgba(255, 255, 255, 0.65); }

/* Archive card visuals — single full-width image */
.arc-card__visuals {
  width: 100%;
}

/* Creative solution — 3×3 grid */
.arc-card__visuals--grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-inline: calc(-1 * var(--container-px));
  width: calc(100% + 2 * var(--container-px));
}

.arc-card__img-wrap {
  width: 100%;
  overflow: hidden;
}

.arc-card__img {
  width: 100%;
  height: auto;
  display: block;
}

/* Grid cells (creative solution) need fixed height */
.arc-card__visuals--grid .arc-card__img-wrap {
  background-color: rgba(0, 0, 0, 0.1);
  min-height: 240px;
}

.arc-card__visuals--grid .arc-card__img {
  height: 100%;
  object-fit: cover;
}

.arc-card__more {
  margin-top: 40px;
  font-size: 14px;
  color: var(--text-muted);
  text-align: center;
}

/* =============================================
   ARCHIVE — RESPONSIVE — TABLET (≤ 1024px)
   ============================================= */
@media (max-width: 1024px) {
  .arc-hero__inner { grid-template-columns: 1fr; gap: 0; }
  .arc-hero__card  { display: none; }
  .arc-hero__left  { padding-bottom: 60px; }
  .arc-statement   { padding-top: 100px; }
}

@media (max-width: 768px) {
  .arc-hero__title { font-size: clamp(64px, 18vw, 100px); }
  .arc-statement   { padding-top: 60px; padding-bottom: 60px; }
  .arc-statement__heading { margin-bottom: 40px; }
  .arc-statement__logos { gap: 28px; }
  .arc-card__visuals { grid-template-columns: 1fr; }
  .arc-card__visuals--grid { grid-template-columns: 1fr; }
}

/* =============================================
   RESPONSIVE — TABLET  (≤ 1024px)
   ============================================= */
@media (max-width: 1024px) {
  :root {
    --container-px: 48px;
    --section-py:   80px;
  }

  .hero__blob--teal  { width: 380px; height: 380px; right: 4%; }
  .hero__blob--olive { width: 420px; height: 400px; }

  .hero__info {
    margin-inline-start: 0;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }

  .hero__inner { gap: 60px; }

  .project__header {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .nav__links { gap: 28px; }
}

/* =============================================
   RESPONSIVE — MOBILE  (≤ 768px)
   ============================================= */
@media (max-width: 768px) {
  :root {
    --container-px: 24px;
    --section-py:   60px;
  }

  /* Nav */
  .nav__links { gap: 20px; }
  .nav__link  { font-size: 11px; letter-spacing: 0.05em; }
  .nav__cta   { font-size: 11px; padding: 8px 14px; }

  /* Hero */
  .hero__inner      { gap: 48px; padding-block: 100px 60px; }
  .hero__info       { grid-template-columns: 1fr; gap: 40px; margin-inline-start: 0; }
  .hero__blob--teal  { width: 280px; height: 280px; top: 5%; right: -8%; filter: blur(55px); }
  .hero__blob--olive { width: 320px; height: 300px; right: -12%; filter: blur(65px); }

  /* Project header */
  .project__header   { margin-bottom: 36px; }
  .project__meta     { gap: 28px; }

  /* Project typography — mobile floor */
  .project__title       { font-size: 20px; }
  .project__desc        { font-size: 13px; padding-right: 0; }
  .project__meta-label  { font-size: 12px; margin-bottom: 10px; }
  .project__meta-value  { font-size: 12px; }

  /* Hero typography — mobile floor */
  .hero__bio            { font-size: 15px; }
  .hero__info .link-list a { font-size: 15px; }

  /* CTA */
  .cta__inner { grid-template-columns: 1fr; gap: 48px; }
  .cta__text  { font-size: 15px; }
  .cta__link  { font-size: 15px; }
  .cta__right .link-list a { font-size: 15px; }
}

/* =============================================
   RESPONSIVE — SMALL MOBILE  (≤ 480px)
   ============================================= */
@media (max-width: 480px) {
  .nav__links { gap: 14px; }
}