/* Final responsive safeguards shared by every page. */
html {
  width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

:root {
  --mobile-gutter: clamp(18px, 5vw, 24px);
}

/* Stats strips attach directly to the section above at every breakpoint. */
.stats-section {
  margin-top: 0;
  padding-top: 0 !important;
}

.stats-section > .stats {
  margin-top: 0;
}

/* Homepage sections stay full-bleed on desktop and mobile. */
.home-page .section {
  width: 100%;
  max-width: none;
  margin-right: 0;
  margin-left: 0;
}

.home-page .stats-section {
  padding-bottom: 0 !important;
}

.home-page #about {
  margin-top: 0;
  padding-top: 0 !important;
}

body {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

img,
video,
svg,
canvas,
iframe {
  max-width: 100%;
}

h1,
h2,
h3,
h4,
p,
a,
span,
strong {
  overflow-wrap: break-word;
}

button,
input,
select,
textarea {
  max-width: 100%;
}

@media (max-width: 900px) {
  .nav,
  .nav.scrolled {
    padding-right: max(var(--mobile-gutter), env(safe-area-inset-right));
    padding-left: max(var(--mobile-gutter), env(safe-area-inset-left));
  }

  .nav .menu {
    min-width: 44px;
    min-height: 44px;
  }

  .nav .nav-links {
    min-height: 100dvh;
    height: 100dvh;
    padding: max(88px, calc(64px + env(safe-area-inset-top))) max(var(--mobile-gutter), env(safe-area-inset-right)) max(40px, env(safe-area-inset-bottom)) max(var(--mobile-gutter), env(safe-area-inset-left));
    overflow-y: auto;
  }

  .hero,
  .work-hero,
  .case-hero,
  .contact-hero,
  .discipline-hero,
  .page-shell {
    min-height: 0;
    padding-top: max(125px, calc(90px + env(safe-area-inset-top)));
    padding-right: max(var(--mobile-gutter), env(safe-area-inset-right));
    padding-bottom: 60px;
    padding-left: max(var(--mobile-gutter), env(safe-area-inset-left));
  }

  .section,
  .results,
  .result-band,
  .story-section,
  .tools-inner,
  .cta,
  .close {
    padding-right: max(var(--mobile-gutter), env(safe-area-inset-right));
    padding-left: max(var(--mobile-gutter), env(safe-area-inset-left));
  }

  .section {
    padding-top: 84px;
    padding-bottom: 84px;
  }

  .section-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 38px;
  }

  .case-grid,
  .gallery-grid,
  .featured-grid {
    gap: 14px;
  }

  .overview-grid,
  .contact-layout,
  .conclusion,
  .campaign-video-stage,
  .video-stage,
  .website-comparison,
  .image-pair {
    min-width: 0;
  }

  .overview-grid > *,
  .contact-layout > *,
  .conclusion > *,
  .campaign-video-stage > *,
  .video-stage > *,
  .website-comparison > *,
  .image-pair > * {
    min-width: 0;
  }
}

@media (max-width: 600px) {
  /* Homepage sections run edge to edge on phones. */
  .home-page .section,
  .home-page .cta {
    padding-right: 0;
    padding-left: 0;
  }

  .home-page .section-heading {
    margin-right: 0;
    margin-left: 0;
    padding-right: var(--mobile-gutter);
    padding-left: var(--mobile-gutter);
  }

  .home-page .stats,
  .home-page .services,
  .home-page .work-carousel {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }

  .home-page .about {
    gap: 0;
  }

  .home-page .about-image {
    width: 100%;
    max-width: none;
  }

  .home-page .about-text {
    padding: 34px var(--mobile-gutter) 0;
  }

  /* Full-bleed case-study sections; headings and controls keep a readable gutter. */
  #work,
  #selected,
  .stats-section,
  #more-work {
    padding-right: 0;
    padding-left: 0;
  }

  #work > .section-heading,
  #selected > .section-head,
  #selected > .filters {
    margin-right: var(--mobile-gutter);
    margin-left: var(--mobile-gutter);
  }

  .home-page #work > .section-heading {
    margin-right: 0;
    margin-left: 0;
  }

  .stats-section > .stats {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }

  .stats-section .stat {
    padding-right: var(--mobile-gutter);
    padding-left: var(--mobile-gutter);
  }

  #more-work > .section-heading {
    padding-right: var(--mobile-gutter);
    padding-left: var(--mobile-gutter);
  }

  #more-work .more-work-grid {
    width: 100%;
    padding-right: 0;
    padding-left: 0;
  }

  .hero h1,
  .work-hero h1,
  .case-hero h1,
  .contact-hero h1,
  .discipline-hero h1,
  .page-shell h1 {
    max-width: 100%;
    font-size: clamp(3.15rem, 15.5vw, 5rem);
    line-height: .86;
    letter-spacing: -.065em;
  }

  .photography-page .discipline-hero h1 {
    font-size: clamp(2.6rem, 12.5vw, 4rem);
    line-height: .88;
    letter-spacing: -.065em;
  }

  .section-title,
  .section-heading,
  .result-heading,
  .result-quote,
  .cta h2,
  .close h2,
  .conclusion h2 {
    max-width: 100%;
    font-size: clamp(2.65rem, 13vw, 4.5rem);
    line-height: .92;
    letter-spacing: -.055em;
  }

  .hero-bottom,
  .section-head {
    gap: 24px;
    margin-top: 34px;
  }

  .case-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .case-card {
    width: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }

  .case-media {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .case-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .case-info {
    min-height: 260px;
    position: relative;
    display: flex;
    flex-direction: column;
  }

  .case-footer {
    align-items: flex-end;
    gap: 16px;
  }

  /* Homepage case studies: one image size with copy below it. */
  .project,
  .project:nth-child(even) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    width: 100%;
    height: auto;
    min-height: 0;
  }

  .project-image,
  .project:nth-child(even) .project-image {
    order: 0;
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .project-image img,
  .project-image--contain img,
  .project-image--split img {
    width: 100%;
    height: 100%;
    padding: 0;
    object-fit: cover;
    object-position: center;
  }

  .project-info,
  .project:nth-child(even) .project-info {
    order: 1;
    min-height: 260px;
    padding: 22px;
  }

  .project-title,
  .project-title--long {
    margin-top: 28px;
    margin-bottom: 24px;
    font-size: clamp(1.85rem, 8.5vw, 2.55rem);
  }

  .project-link {
    gap: 16px;
  }

  .project-hover {
    display: none;
  }

  .section {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .featured-grid {
    grid-template-rows: repeat(3, minmax(320px, 78vw));
  }

  .feature-card.contain img,
  .gallery-card.contain .gallery-media img,
  .case-media.contain img {
    padding: 14px;
  }

  .feature-content,
  .gallery-content,
  .case-info,
  .video-caption,
  .campaign-video-caption,
  .reading-caption {
    padding: 20px;
  }

  .archive-tools {
    width: 100%;
    gap: 20px;
  }

  .feature-title,
  .gallery-title,
  .case-title,
  .case-title.long {
    font-size: clamp(1.55rem, 8vw, 2.55rem);
  }

  .filters {
    width: 100%;
  }

  .filter-button {
    min-height: 44px;
    padding: 10px 14px;
  }

  .field-grid,
  .gallery-grid,
  .simple-gallery .gallery-grid,
  .campus-photo-gallery,
  .iheart-gallery,
  .kia-gallery,
  .image-pair,
  .website-comparison,
  .system,
  .principles,
  .question-grid,
  .process,
  .services,
  .service-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .overview-copy,
  .overview-visual,
  .image-slot,
  .image-pair .image-slot,
  .process-step,
  .service-card {
    min-height: 0;
  }

  .overview-visual,
  .image-slot,
  .image-pair .image-slot {
    aspect-ratio: 4 / 3;
  }

  .email-row {
    min-width: 0;
  }

  .email-arrow {
    white-space: normal;
  }

  .reading-stage iframe {
    height: min(430px, 72vh);
  }

  input,
  select,
  textarea {
    font-size: 16px;
  }

  .footer {
    padding-right: max(var(--mobile-gutter), env(safe-area-inset-right));
    padding-left: max(var(--mobile-gutter), env(safe-area-inset-left));
  }

  .footer-inner,
  .footer-links {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .footer-inner {
    gap: 22px;
  }

  .footer-links {
    gap: 14px 22px;
  }
}

@media (max-width: 380px) {
  .hero h1,
  .work-hero h1,
  .case-hero h1,
  .contact-hero h1,
  .discipline-hero h1,
  .page-shell h1 {
    font-size: clamp(2.8rem, 14.5vw, 3.5rem);
  }

  .nav .logo {
    font-size: 16px;
  }

  .case-meta {
    gap: 18px 24px;
  }
}