/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1200px) {
  :root {
    --page-padding: 32px;
  }

  .hero__description {
    grid-column: 1 / span 5;
  }

  .hero__bottom .text-link {
    grid-column: 9 / -1;
  }

  .project-card,
  .project-card--reverse {
    grid-template-columns: 1.1fr 0.9fr;
  }

  .process__grid,
  .about__grid {
    gap: 70px;
  }

  .principles-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .principle:nth-child(2) {
    border-right: 0;
  }

  .principle:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .principle:nth-child(3) {
    padding-left: 0;
  }
}

@media (max-width: 900px) {
  :root {
    --page-padding: 24px;
    --header-height: 72px;
  }

  .nav,
  .header__cta {
    display: none;
  }

  .header__inner {
    grid-template-columns: 1fr auto;
  }

  .menu-toggle {
    display: block;
    justify-self: end;
  }

  .hero {
    padding-top: calc(var(--header-height) + 50px);
  }

  .hero__title {
    font-size: clamp(3.3rem, 10vw, 6.2rem);
    line-height: 0.94;
  }

  .hero__bottom {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .hero__description,
  .hero__bottom .text-link {
    grid-column: auto;
  }

  .hero__bottom .text-link {
    justify-self: start;
  }

  .hero-projects {
    height: 420px;
  }

  .hero-project--one {
    width: 66%;
    left: 0;
  }

  .hero-project--two {
    width: 60%;
    right: 0;
    top: 33%;
  }

  .intro__inner,
  .section-heading--split,
  .process__grid,
  .about__grid {
    grid-template-columns: 1fr;
  }

  .intro__inner {
    gap: 45px;
  }

  .section-heading--split {
    gap: 45px;
  }

  .project-card,
  .project-card--reverse {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .project-card--reverse .project-card__media,
  .project-card--reverse .project-card__info {
    order: initial;
  }

  .manifesto__inner {
    grid-template-columns: 1fr;
  }

  .manifesto .section-label,
  .manifesto__title,
  .manifesto__text {
    grid-column: auto;
  }

  .manifesto__text {
    margin-top: 45px;
    max-width: 620px;
  }

  .service {
    grid-template-columns: 50px 1fr auto;
  }

  .service__content {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .process__intro {
    position: static;
  }

  .about__visual {
    max-width: 520px;
  }

  .contact__bottom {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .contact__text,
  .contact-button {
    grid-column: auto;
  }

  .contact-button {
    width: 100%;
  }

  .footer__bottom {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .footer__bottom > span:last-child {
    justify-self: start;
  }

  .footer__links {
    flex-wrap: wrap;
  }

  .custom-cursor {
    display: none;
  }
}

@media (max-width: 640px) {
  :root {
    --page-padding: 18px;
    --section-space: 95px;
  }

  .hero {
    min-height: auto;
    padding-bottom: 60px;
  }

  .hero__label {
    margin-bottom: 52px;
    font-size: 0.68rem;
  }

  .hero__title {
    font-size: clamp(3rem, 15vw, 4.8rem);
    line-height: 0.92;
  }

  .hero__bottom {
    margin-top: 40px;
  }

  .hero__description {
    font-size: 0.98rem;
  }

  .hero-projects {
    height: 340px;
    margin-top: 60px;
  }

  .hero-project--one {
    width: 78%;
  }

  .hero-project--two {
    width: 73%;
    top: 38%;
  }

  .section-heading {
    gap: 32px;
    margin-bottom: 65px;
  }

  .display-title,
  .section-title {
    font-size: clamp(2.6rem, 13vw, 4rem);
    line-height: 0.98;
  }

  .intro__content {
    gap: 38px;
  }

  .intro__text {
    font-size: 1.08rem;
  }

  .projects-list {
    gap: 110px;
  }

  .project-card__info {
    gap: 24px;
  }

  .project-card__title {
    font-size: clamp(2.4rem, 11vw, 3.5rem);
  }

  .manifesto__title {
    font-size: clamp(3.6rem, 17vw, 6rem);
  }

  .service {
    grid-template-columns: 38px 1fr auto;
    padding-block: 30px;
  }

  .service__number {
    padding-top: 7px;
  }

  .service h3 {
    font-size: 2rem;
  }

  .service p {
    font-size: 0.93rem;
  }

  .process-step {
    grid-template-columns: 48px 1fr;
    gap: 20px;
  }

  .about__grid {
    margin-top: 50px;
  }

  .about__text {
    margin-top: 45px;
  }

  .principles-grid {
    grid-template-columns: 1fr;
  }

  .principle,
  .principle:nth-child(3) {
    padding: 28px 0;
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .principle:last-child {
    border-bottom: 0;
  }

  .principle > span {
    margin-bottom: 55px;
  }

  .contact__title {
    font-size: clamp(3.6rem, 17vw, 6rem);
  }

  .contact-button {
    min-height: 78px;
    padding-inline: 24px;
  }

  .footer__name {
    font-size: clamp(4.4rem, 22vw, 8rem);
  }

  .footer__bottom {
    margin-top: 40px;
  }
}
/* =========================
   HERO — DARK/RED RESPONSIVE
========================= */

@media (max-width: 1200px) {
  .hero__meta {
    grid-column: 6 / span 3;
  }

  .hero__title-line--two {
    padding-right: 3vw;
  }
}

@media (max-width: 900px) {
  .hero__accent-shape {
    top: -1rem;
    right: 0;
    width: clamp(78px, 13vw, 110px);
    padding: 12px;
  }

  .hero__title-line--two {
    align-self: flex-start;
    padding-right: 0;
  }

  .hero__title-line--three {
    max-width: 100%;
  }

  .hero__meta {
    grid-column: auto;
    order: 2;
  }

  .hero__bottom .text-link {
    order: 3;
  }

  .hero-projects::before {
    display: none;
  }
}

@media (max-width: 640px) {
  .hero::before {
    background-size: auto, 48px 48px, 48px 48px;
  }

  .hero__accent-shape {
    position: relative;
    top: auto;
    right: auto;
    margin: 0 0 28px auto;
    width: 72px;
    padding: 10px;
    transform: rotate(5deg);
  }

  .hero__accent-shape span:first-child {
    font-size: 0.55rem;
  }

  .hero__title-line--three em::after {
    min-height: 3px;
  }

  .hero__meta {
    gap: 6px;
  }
}
@media (max-width: 640px) {
  .services__lead {
    margin-left: 0;
    margin-bottom: 50px;
  }
}


/* CASE STUDY RESPONSIVE */
@media (max-width: 900px) {
  .hero-project--three { width: 48%; right: -2%; top: -2%; }
  .case-hero__intro,
  .case-content__grid { grid-template-columns: 1fr; }
  .case-hero__intro { gap: 45px; }
  .case-features { grid-template-columns: 1fr; }
  .case-feature,
  .case-feature + .case-feature { padding: 28px 0; border-left:0; border-bottom:1px solid var(--line); }
  .case-feature:last-child { border-bottom:0; }
}

@media (max-width: 640px) {
  .hero-projects { height: 420px; }
  .hero-project--one { width: 80%; left:-2%; top:4%; }
  .hero-project--two { width: 72%; right:-4%; top:35%; }
  .hero-project--three { width: 62%; right:4%; top:67%; }
  .case-hero__eyebrow { flex-direction:column; gap:8px; }
  .case-hero__title { font-size:clamp(3.5rem,18vw,5.5rem); }
  .case-meta { grid-template-columns:1fr; }
  .case-gallery__grid { gap:18px; }
  .case-shot--half { grid-column:span 12; }
  .case-next__row { align-items:center; }
}
@media (max-width: 640px) {
  .about__image-wrap {
    min-height: 470px;
  }

  .about__image {
    width: 100%;
  }

  .about__image-wrap::before {
    top: 18px;
    left: 18px;
  }

  .about__image-wrap::after {
    width: 170px;
    height: 170px;
  }

  .about__image-word {
    font-size: 7rem;
  }
}