/* Inner-page mobile composition. Base = phone; desktop resets at 48rem. */

.nav-wrap > nav {
  position: absolute;
  inset: 100% 0 auto;
}

.menu-button {
  margin-left: auto;
}

.nav-list {
  top: 0;
}

.about-hero,.service-hero,.portfolio-hero,.contact-hero,.section {
  padding-block: 4.5rem;
}

h1 {
  max-width: 11ch;
  font-size: clamp(3rem,13vw,4rem);
  line-height: .96;
  letter-spacing: -.04em;
}

h2 {
  font-size: clamp(2.55rem,10vw,3.3rem);
  line-height: 1.03;
}

.hero-copy,.large-copy {
  font-size: 1.125rem;
  line-height: 1.65;
}

.section-head {
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

.section-head p,.principle p,.page-jobs p,.include-grid p,.project-copy p,.portfolio-card p,.compare-card p,.field small,.form-note,.next-card li {
  line-height: 1.65;
}

.button {
  width: 100%;
}

/* About */

.about-intro {
  gap: 2rem;
}

.focus-grid {
  gap: 3rem;
}

.focus-graphic {
  min-height: 16rem;
}

.principles-grid {
  gap: 0;
}

.principle {
  padding: 2rem 0;
}

.principle span {
  margin-bottom: 1rem;
}

/* Services */

.service-hero-grid {
  gap: 3rem;
}

.page-stack {
  padding: 1rem;
}

.page-stack span {
  padding: .75rem 1rem;
}

.page-jobs,.include-grid {
  gap: 1.5rem;
}

.page-jobs article,.include-grid article {
  padding: 1.5rem;
}

.page-jobs b,.include-grid article>span {
  margin-bottom: 1.5rem;
}

/* Portfolio */

.portfolio-hero-grid {
  gap: 3rem;
}

.gallery-stack {
  min-height: 18rem;
  margin-inline: .5rem;
}

.gallery-sheet {
  inset: 1rem .5rem 2rem 0;
  padding: 1rem;
}

.category-row {
  flex-wrap: nowrap;
  overflow-x: auto;
  margin-inline: -1rem;
  padding: 0 1rem .75rem;
  scrollbar-width: none;
}

.category-row::-webkit-scrollbar {
  display: none;
}

.category-row span {
  flex: 0 0 auto;
}

.featured-project {
  gap: 2rem;
}

.project-copy {
  gap: 1rem;
}

.project-copy dl div {
  padding-block: 1rem;
}

.portfolio-grid {
  gap: 2rem;
}

.portfolio-card {
  padding: 1.5rem;
}

.mini-site {
  aspect-ratio: 16/10;
}

.compare-grid {
  gap: 1.5rem;
}

.compare-arrow {
  transform: rotate(90deg);
  line-height: 1;
}

.compare-card {
  padding: 1.5rem;
}

/* Contact */

.contact-hero-grid,.contact-layout {
  gap: 3rem;
}

.enquiry-graphic {
  margin-top: .5rem;
}

.enquiry-form {
  padding: 1.5rem;
  box-shadow: .375rem .375rem 0 var(--color-ink);
}

.field-grid {
  gap: 1.5rem;
}

.field {
  gap: .625rem;
}

.choice-row {
  grid-template-columns: 1fr;
  gap: .75rem;
}

.choice-row span {
  justify-content: flex-start;
  padding-inline: 1rem;
}

.contact-aside {
  gap: 2rem;
}

.next-card {
  padding: 1.5rem;
}

@media (min-width:48rem) {
  .nav-wrap>nav {
    position: static;
    inset: auto;
  }

  .menu-button {
    margin-left: 0;
  }

  .nav-list {
    top: auto;
  }

  .button {
    width: auto;
  }

  .about-hero,.service-hero,.portfolio-hero,.contact-hero,.section {
    padding-block: var(--space-24);
  }

  h1 {
    max-width: 12ch;
    font-size: var(--text-h1);
    line-height: .98;
    letter-spacing: -.045em;
  }

  h2 {
    font-size: var(--text-h2);
    line-height: 1.02;
  }

  .hero-copy,.large-copy {
    font-size: var(--text-lg);
    line-height: 1.55;
  }

  .section-head {
    gap: var(--space-4);
    margin-bottom: var(--space-8);
  }

  .about-intro {
    gap: var(--space-6);
  }

  .focus-grid {
    gap: var(--space-8);
  }

  .focus-graphic {
    min-height: 18rem;
  }

  .principles-grid {
    gap: var(--space-4);
  }

  .principle {
    padding: var(--space-6);
  }

  .principle span {
    margin-bottom: var(--space-8);
  }

  .service-hero-grid {
    gap: var(--space-12);
  }

  .page-stack {
    min-height: 25rem;
    padding: var(--space-8);
  }

  .page-stack span {
    padding: var(--space-3) var(--space-4);
  }

  .page-jobs,.include-grid {
    gap: var(--space-4);
  }

  .page-jobs article,.include-grid article {
    padding: var(--space-6);
  }

  .page-jobs b,.include-grid article>span {
    margin-bottom: var(--space-8);
  }

  .portfolio-hero-grid {
    gap: var(--space-12);
  }

  .gallery-stack {
    min-height: 24rem;
    margin-inline: 0;
  }

  .gallery-sheet {
    inset: 2rem 1rem 2rem 0;
    padding: var(--space-6);
  }

  .category-row {
    flex-wrap: wrap;
    overflow: visible;
    margin-inline: 0;
    padding: 0;
  }

  .featured-project {
    gap: var(--space-8);
  }

  .project-copy {
    gap: var(--space-4);
  }

  .project-copy dl div {
    padding-block: var(--space-3);
  }

  .portfolio-grid {
    gap: var(--space-4);
  }

  .portfolio-card,.compare-card {
    padding: var(--space-6);
  }

  .mini-site {
    aspect-ratio: 4/3;
  }

  .compare-grid {
    gap: var(--space-4);
  }

  .compare-arrow {
    transform: none;
  }

  .contact-hero-grid,.contact-layout {
    gap: var(--space-12);
  }

  .enquiry-graphic {
    margin-top: 0;
  }

  .enquiry-form {
    padding: var(--space-8);
    box-shadow: var(--shadow-offset);
  }

  .field-grid {
    gap: var(--space-6);
  }

  .field {
    gap: var(--space-2);
  }

  .choice-row {
    grid-template-columns: repeat(3,1fr);
    gap: var(--space-2);
  }

  .choice-row span {
    justify-content: center;
    padding-inline: var(--space-2);
  }

  .contact-aside {
    gap: var(--space-6);
  }

  .next-card {
    padding: var(--space-6);
  }
}

/* Preview proof and generated images on inner-page mobile */

.portfolio-feature-image {
  min-height: auto;
}

.portfolio-card .project-image {
  aspect-ratio: 4/3;
}

.contact-quote {
  padding: var(--space-6);
}

@media (min-width:48rem) {
  .portfolio-feature-image {
    min-height: 23rem;
  }
}

/* Services hero graphic ratio refinement */

.page-stack {
  min-height: 22rem;
  padding-inline: .5rem;
}

.page-stack span {
  width: 76%;
  max-width: calc(100% - var(--space-8));
}

@media (min-width:48rem) {
  .service-hero-grid {
    grid-template-columns: .9fr 1.1fr;
  }

  .page-stack {
    min-height: 29rem;
    padding: 1.5rem 0;
    transform: none;
  }

  .page-stack span {
    width: 78%;
    max-width: calc(100% - var(--space-8));
  }
}

/* Approved centred mobile closing composition */

@media (max-width:47.99rem) {
  .closing {
    text-align: center;
  }

  .closing h2,.closing p {
    margin-inline: auto;
  }

  .closing .button {
    margin-inline: auto;
  }
}

/* Full-screen mobile navigation */