/* ============================================================
   TOKENS
   ============================================================ */

:root {
  /* Colours */
  --color-text-primary:   #2A282C;
  --color-text-secondary: #F1EEE7;
  --color-text-tertiary:  #908F8F;
  --color-border-primary: #2A282C;
  --color-accent-green:   #45AFA5;
  --color-accent-blue:    #8578FF;
  --color-accent-red:     #DD6239;
  --color-accent-yellow:  #CEAE4B;
  --color-bg-primary:     #FFFFFF;
  --color-bg-secondary:   #F1EEE7;
  --color-bg-tertiary:    #2A282C;

  /* Typography */
  --font-display: 'Fraunces', serif;
  --font-mono:    'DM Mono', monospace;
  --font-body:    'DM Sans', sans-serif;
}


/* ============================================================
   RESET
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

body {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}


/* ============================================================
   NAVIGATION
   ============================================================ */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background-color: var(--color-bg-primary);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 24px;
  transition: box-shadow 0.2s ease;
}

.nav.is-scrolled {
  box-shadow: 0 2px 12px rgba(42, 40, 44, 0.2);
}

.nav__logo img {
  display: block;
  height: 42px;
  width: auto;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 16px;
  list-style: none;
}

.nav__link {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.9em;       /* mobile */
  line-height: 1.3;
  text-transform: none;
  letter-spacing: 0.08em;
  color: var(--color-text-primary);
  text-decoration: none;
  /* Reset for <button> */
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.nav__link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* Copied feedback state */
.nav__contact.is-copied {
  opacity: 0.5;
}


/* ============================================================
   HERO
   ============================================================ */

.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100dvh - 90px); /* 90px = nav: 24px + 42px logo + 24px */
}

/* Handles horizontal padding and max-width — matches other section conventions */
.hero__inner {
  width: 100%;
  max-width: 1608px;
  padding-inline: 24px;
  padding-block: 64px;
  margin-inline: auto;
}

/* Proportional content box: all child sizes are derived from this width via cqw.
   max-width constrains by viewport height so the full composition fits.

   All sizes scale with W (this box's width):
     SVG block  = 0.470W  (two 1360×370 containers − 7.4% overlap)
     Gap        = 0.0473W (4.73cqw → 64px at W=1352px)
     Arrow      = 0.145W  (14.5cqw → 196px at W=1352px)
     Total      = 0.6623W

   Overhead = nav(90) + padding-block(128) = 218px
   Fit: 0.6623W + 218 ≤ 100dvh  →  W ≤ 1.510 × (100dvh − 218px) */
.hero__content {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: max(100px, calc(1.510 * (100dvh - 218px)));
  margin-inline: auto;
}

.hero__svg-wrap {
  width: 100%;
  aspect-ratio: 1360 / 370;
}

/* -7.4% ≈ −100px at 1352px content width (1480px max − 2×64px padding);
   margin percentage is relative to element width, so overlap scales with SVG. */
.hero__svg-wrap--work {
  margin-top: -7.4%;
}

.hero__svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Arrow scales proportionally with content width via cqw.
   At W = 1480px: height = 196px (14.5cqw ≈ 214px → clamped), gap = 64px (4.73cqw) */
.hero__arrow {
  display: block;
  height: min(196px, 14.5cqw);
  width: auto;
  margin-top: 4.73cqw;
  flex-shrink: 0;
  opacity: 0;
}

.hero__arrow.is-visible {
  opacity: 1;
}


/* ============================================================
   WORK / CASE STUDY CARDS
   ============================================================ */

.work {
  padding: 40px max(24px, calc((100% - 700px) / 2));
}

.work__heading {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 2rem;       /* 32px — Display-S Light */
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 32;
  line-height: 1.1;
  color: var(--color-text-primary);
  margin-bottom: 48px;
}

.work__grid {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Scroll anchor for first case study thumbnail */
.work__item--first {
  scroll-margin-top: 114px; /* nav height (90px) + 24px gap */
}

.work__card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-decoration: none;
  color: inherit;
}

.work__card--static {
  cursor: default;
}

.work__thumbnail {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.work__caption {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.work__client {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3125rem; /* 21px — Display-XS */
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 21;
  line-height: 1.1;
  color: var(--color-text-primary);
}

.work__headline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.25rem;   /* 20px — Body-L */
  line-height: 1.3;
  color: var(--color-text-primary);
}


/* ============================================================
   SERVICES (OFFER)
   ============================================================ */

.offer {
  background-color: var(--color-bg-secondary);
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 48px max(24px, calc((100% - 700px) / 2));
  scroll-margin-top: 90px; /* offset sticky nav */
}

.offer__label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;       /* 16px — Label-S Bold */
  line-height: 1.3;
  color: var(--color-text-primary);
}

.offer__summary {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.offer__intro {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3125rem;  /* 21px — Display-XS SemiBold */
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 21;
  line-height: 1.3;      /* matches body paragraph line-height on mobile */
  color: var(--color-text-primary);
}

.offer__grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.offer__item {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.offer__symbol {
  font-family: var(--font-display), 'Noto Sans Symbols 2', sans-serif;
  font-weight: 300;
  font-size: 2.5rem;     /* 40px — Display-M */
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 21;
  line-height: 1.1;
}

.offer__symbol--blue     { color: var(--color-accent-blue); }
.offer__symbol--green    { color: var(--color-accent-green); }
.offer__symbol--red      { color: var(--color-accent-red); }
.offer__symbol--yellow   { color: var(--color-accent-yellow); }
.offer__symbol--tertiary { color: var(--color-text-tertiary); }

.offer__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.offer__heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3125rem;  /* 21px — Display-XS SemiBold */
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 21;
  line-height: 1.1;
  color: var(--color-text-primary);
}

.offer__copy {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.25rem;    /* 20px — Body-L */
  line-height: 1.3;
  color: var(--color-text-primary);
}


/* ============================================================
   ABOUT
   ============================================================ */

.about {
  background-color: var(--color-bg-tertiary);
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 48px max(24px, calc((100% - 700px) / 2)) 0;
}

.about__header {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.about__symbol {
  font-family: var(--font-display), 'Noto Sans Symbols 2', sans-serif;
  font-weight: 300;
  font-size: 2.5rem;     /* 40px — Display-M */
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 21;
  line-height: 1.1;
  color: var(--color-text-secondary);
}

.about__intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.about__tagline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3125rem;  /* 21px — Display-XS SemiBold */
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 21;
  line-height: 1.3;      /* matches body paragraph line-height on mobile */
  color: var(--color-text-secondary);
}

.about__body {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.about__para {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.25rem;    /* 20px — Body-L */
  line-height: 1.3;
  color: var(--color-text-secondary);
}


/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  background-color: var(--color-bg-tertiary);
  display: flex;
  flex-direction: column;
  gap: 96px;
  padding: 48px max(24px, calc((100% - 700px) / 2));
}

.footer__summary {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.footer__heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3125rem;  /* 21px — Display-XS SemiBold */
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 21;
  line-height: 1.1;
  color: var(--color-text-secondary);
}

/* Hide mobile line-break at desktop */
.footer__br {
  display: inline;
}

.footer__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.footer__btn {
  background-color: var(--color-bg-secondary);
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 20px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1rem;       /* 16px — Label-S Bold */
  line-height: 1.3;
  color: var(--color-text-primary);
  text-decoration: none;
  white-space: nowrap;
}

.footer__btn--outline {
  background-color: transparent;
  border-color: var(--color-text-secondary);
  color: var(--color-text-secondary);
}

.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer__copyright,
.footer__credit {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 1rem;       /* 16px — Label-S Regular */
  line-height: 1.3;
  color: var(--color-text-secondary);
}


/* ============================================================
   BREAKPOINTS
   ============================================================ */

/* Mobile: max-width 829px */
@media (max-width: 829px) {
  .nav__logo img {
    height: 34px; /* 10% reduction from 38px */
    width: 65px;
  }

  .nav__links {
    gap: 20px;
  }
}

/* Desktop: 830px – 1023px */
@media (min-width: 830px) {
  .nav__links {
    gap: 32px;
  }

  .nav__link {
    font-size: 1.125rem; /* 18px — Label */
  }

  .work {
    padding: 64px;
  }

  .work__item--first {
    scroll-margin-top: 114px;
  }

  .work__heading {
    font-size: 2.5rem;   /* 40px — Display-M Light */
    font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 21;
    margin-bottom: 96px;
  }

  .work__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 24px;
  }

  .about {
    gap: 64px;
    padding: 96px 64px 0;
  }

  .about__header {
    gap: 32px;
  }

  .about__intro {
    gap: 32px;
  }

  .about__symbol {
    font-size: 4rem;     /* 64px — Display-L */
    font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 40;
  }

  .about__tagline {
    font-size: 2rem;     /* 32px — Display-S SemiBold */
    font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 32;
    line-height: 1.1;
  }

  .about__body {
    flex-direction: column;
    gap: 32px;
  }

  .about__para {
    font-size: 1.25rem;  /* 20px — Body-L */
  }

  .footer {
    padding: 96px 64px;
    align-items: center;
  }

  .footer__summary,
  .footer__bottom {
    width: 100%;
  }

  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .footer__summary {
    gap: 40px;
  }

  .footer__heading {
    font-size: 2rem;     /* 32px — Display-S SemiBold */
    font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 32;
  }

  .footer__ctas {
    gap: 32px;
  }


  .footer__btn {
    font-size: 1.125rem; /* 18px — Label Bold */
    padding: 24px;
  }

  .offer {
    align-items: center;
    gap: 64px;
    padding: 96px 64px;
  }

  .offer__label {
    font-size: 1.25rem;  /* 20px — Label-L Bold */
  }

  .offer__summary,
  .offer__grid {
    width: 100%;
  }

  .offer__summary {
    gap: 40px;
  }

  .offer__intro {
    font-size: 2rem;     /* 32px — Display-S SemiBold */
    font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 32;
    line-height: 1.1;
  }

  .offer__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
  }

  .offer__item {
    gap: 32px;
  }

  .offer__symbol {
    font-size: 4rem;     /* 64px — Display-L */
    font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 40;
  }

  .offer__body {
    gap: 32px;
  }

  .offer__heading {
    font-size: 2rem;     /* 32px — Display-S SemiBold */
    font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 32;
  }

  .offer__copy {
    font-size: 1.25rem;  /* 20px — Body-L */
  }

  .hero__inner {
    padding-inline: 64px;
  }
}

/* Desktop HD: 1024px – content max-width 1480px */
@media (min-width: 1024px) {
  .work {
    max-width: 1608px;
    margin-inline: auto;
    width: 100%;
  }

  /* Full-bleed sections: background fills the viewport margins.
     padding-inline centres content within the 1480px content zone (1608px total with 64px padding each side). */
  .offer,
  .about,
  .footer {
    padding-inline: max(64px, calc((100% - 1608px) / 2 + 64px));
  }

  /* Work heading: Display-L at Desktop HD */
  .work__heading {
    font-size: 4rem;     /* 64px — Display-L Light */
    font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 40;
  }

  /* Services intro + headings: Display-M at Desktop HD */
  .offer__intro {
    font-size: 2.5rem;   /* 40px — Display-M SemiBold */
    font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 40;
  }

  .offer__heading {
    font-size: 2.5rem;   /* 40px — Display-M SemiBold */
    font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 40;
  }

  .about__header {
    gap: 32px;
  }

  /* About tagline + footer heading: Display-M at Desktop HD */
  .about__tagline {
    font-size: 2.5rem;   /* 40px — Display-M SemiBold */
    font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 40;
  }

  .footer__heading {
    font-size: 2.5rem;   /* 40px — Display-M SemiBold */
    font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 40;
  }

  .footer__summary {
    gap: 48px;
  }

  /* About: paragraphs side by side at Desktop HD */
  .about__body {
    flex-direction: row;
    gap: 64px;
  }

  .about__para {
    flex: 1;
  }
}