/* Final responsive QA layer. Keep it last so every page shares the same rules. */
html,
body {
  max-inline-size: 100%;
  overflow-x: clip;
}

main,
section,
article,
header,
footer,
nav,
figure,
div,
dl,
dd {
  min-inline-size: 0;
}

img,
picture,
video,
svg {
  max-inline-size: 100%;
}

/* Every portrait hero uses a crop made from its existing photograph. Keeping
   the picture element full-bleed prevents the browser from enlarging a small
   landscape candidate to fill a tall phone or tablet screen. */
.banda-layout .slide picture {
  block-size: 100%;
  display: block;
  inline-size: 100%;
  inset: 0;
  position: absolute;
}

.banda-layout .slide img {
  backface-visibility: hidden;
  filter: none;
  image-rendering: auto;
}

h1,
h2,
h3,
p,
a,
dd {
  max-inline-size: 100%;
}

.header-action,
.brand-mark,
.service-index a {
  white-space: nowrap;
}

#menu-toggle {
  display: none;
}

#nav-dialog::backdrop {
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
  background: rgba(2, 10, 17, .18);
}

.hero-copy h1,
.hero-title-line {
  overflow-wrap: normal;
  word-break: normal;
}

.contact-heading-line {
  display: block;
  max-inline-size: 100%;
  white-space: nowrap;
}

/* The title remains prominent through the phone-to-tablet range. */
@media (min-width: 48rem) and (max-width: 64rem) {
  .banda-layout .hero-copy {
    inline-size: min(calc(100% - 5rem), 56rem);
    inset-block-start: 70%;
  }

  .hero-copy h1 {
    font-size: clamp(3rem, 5.8vw, 4.1rem);
    letter-spacing: .035em;
    line-height: 1.12;
  }

  .hero-purpose {
    font-size: clamp(.86rem, 1.35vw, .98rem);
  }
}

@media (max-width: 47.9375rem) {
  #menu-toggle {
    display: inline-flex;
  }

  .desktop-explore-trigger {
    display: none;
  }

  .banda-layout .hero-copy {
    inline-size: calc(100% - 2.5rem);
    inset-block-start: 70%;
  }

  .hero-copy h1 {
    font-size: clamp(2rem, 9.2vw, 3.55rem);
    letter-spacing: .035em;
    line-height: 1.12;
  }

  .hero-purpose {
    font-size: clamp(.8rem, 3.45vw, .92rem);
    line-height: 1.5;
    margin-block-start: .9rem;
  }

  .site-header {
    gap: .75rem;
  }

  .header-action {
    flex: 0 0 auto;
  }

  .brand-mark {
    flex: 0 1 auto;
  }

  .editorial-copy,
  .gallery-about-copy,
  .service-copy,
  .privacy-copy {
    overflow-wrap: break-word;
  }
}

@media (min-width: 48rem) {
  #menu-toggle {
    display: none;
  }

  .desktop-explore-trigger {
    display: inline-flex;
  }
}

@media (max-width: 22.5rem) {
  .site-header {
    padding-inline: 1rem;
  }

  .header-action,
  .conversation-trigger::before {
    font-size: .56rem;
    letter-spacing: .1em;
  }

  .brand-mark svg.ta-monogram {
    block-size: 1.9rem;
    inline-size: 2rem;
  }

  .banda-layout .hero-copy {
    inline-size: calc(100% - 2rem);
  }

  .hero-copy h1 {
    font-size: clamp(1.95rem, 9.6vw, 2.2rem);
    letter-spacing: .025em;
  }
}

/* Short landscape screens need a shallower title and fully reachable menus. */
@media (orientation: landscape) and (max-height: 40rem) {
  .banda-layout .hero-copy {
    inset-block-start: 65%;
  }

  .hero-copy h1 {
    font-size: clamp(1.75rem, 4.6vw, 2.8rem);
    line-height: 1.05;
  }

  .hero-purpose {
    font-size: .75rem;
    margin-block-start: .55rem;
  }

  .menu-navigation {
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* Contact: never trap or crop the copy on short and narrow devices. */
@media (max-width: 47.9375rem) {
  .contact-page .contact-hero {
    block-size: auto;
    min-block-size: max(100svh, 48rem);
    overflow: hidden;
  }

  .contact-page .contact-hero-copy,
  .contact-page .contact-hero-copy:is(:where(*)) {
    bottom: 2rem;
    inset-block-start: auto;
    inline-size: calc(100% - 2rem);
    inset-inline-start: 1rem;
  }

  .contact-page .contact-hero h1 {
    font-size: clamp(2.25rem, 10vw, 3.75rem);
    letter-spacing: .025em;
    line-height: 1.02;
  }

  .contact-page .contact-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 24rem) {
  .contact-page .contact-hero {
    min-block-size: max(100svh, 55rem);
  }

  .contact-page .contact-hero-copy,
  .contact-page .contact-hero-copy:is(:where(*)) {
    bottom: 1.5rem;
    inline-size: calc(100% - 2rem);
    inset-inline-start: 1rem;
  }

  .contact-page .contact-details {
    grid-template-columns: 1fr;
  }
}

/* Ultra-narrow browser panes (including the 385px view in the supplied screenshot). */
@media (max-width: 26rem) {
  .contact-page .contact-hero {
    min-block-size: max(100svh, 58rem);
  }

  .contact-page .contact-hero-copy,
  .contact-page .contact-hero-copy:is(:where(*)) {
    bottom: 1.5rem;
    inline-size: calc(100% - 1.5rem);
    inset-inline-start: .75rem;
  }

  .contact-page .contact-hero h1 {
    font-size: clamp(1.55rem, 8.7vw, 2.35rem);
    letter-spacing: .015em;
    line-height: 1.04;
  }

  .contact-page .contact-intro-copy {
    font-size: .8rem;
    line-height: 1.5;
  }

  .contact-page .contact-details {
    grid-template-columns: 1fr;
  }

  .contact-page .contact-details dd,
  .contact-page .contact-details a,
  .site-footer a,
  .site-footer p {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .hero-title-line,
  .privacy-intro h1,
  .gallery-about-copy h1,
  .gallery-about-copy h2,
  .service-copy h2 {
    white-space: normal;
  }
}

@media (orientation: landscape) and (max-height: 40rem) and (max-width: 64rem) {
  .contact-page .contact-hero {
    min-block-size: 39rem;
  }

  .contact-page .contact-hero-copy,
  .contact-page .contact-hero-copy:is(:where(*)) {
    bottom: 1.5rem;
    inset-block-start: auto;
    inline-size: min(46rem, calc(100% - 5rem));
    inset-inline-start: 2.5rem;
  }

  .contact-page .contact-hero h1 {
    font-size: clamp(2.5rem, 6.6vw, 3.7rem);
    margin-block-start: .75rem;
  }

  .contact-page .contact-intro-copy {
    margin-block-start: .75rem;
  }

  .contact-page .contact-details {
    margin-block-start: .8rem;
    padding-block-start: .8rem;
  }
}

/* Let the contact photograph remain visible instead of turning nearly black. */
.contact-shade {
  background:
    linear-gradient(90deg, rgba(2, 10, 17, .84) 0%, rgba(3, 12, 20, .7) 24%, rgba(4, 13, 21, .34) 48%, rgba(4, 12, 20, .03) 73%, rgba(3, 10, 17, .04) 100%),
    linear-gradient(180deg, rgba(2, 9, 16, .22) 0%, rgba(3, 11, 18, .01) 32%, rgba(2, 9, 16, .04) 64%, rgba(2, 8, 14, .46) 100%);
}

@media (max-width: 64rem) {
  .contact-shade {
    background:
      linear-gradient(90deg, rgba(2, 10, 17, .78) 0%, rgba(3, 12, 20, .48) 52%, rgba(3, 10, 17, .06) 100%),
      linear-gradient(180deg, rgba(2, 9, 16, .28) 0%, rgba(2, 9, 16, .03) 32%, rgba(2, 8, 14, .58) 100%);
  }
}

@media (max-width: 47.9375rem) {
  .contact-shade {
    background:
      linear-gradient(90deg, rgba(2, 10, 17, .52), rgba(2, 10, 17, .05)),
      linear-gradient(180deg, rgba(2, 9, 16, .34) 0%, rgba(2, 9, 16, .04) 26%, rgba(2, 8, 14, .38) 50%, rgba(2, 8, 14, .78) 76%, rgba(2, 8, 14, .9) 100%);
  }
}

/* The header progressively covers the contact image as the page scrolls. */
.contact-page .contact-header {
  --contact-header-cover: 0;
  isolation: isolate;
}

.contact-page .contact-header,
.contact-page .contact-header.is-scrolled {
  background: transparent;
}

.contact-page .contact-header::after {
  background: #07121c;
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  transform: scaleY(var(--contact-header-cover));
  transform-origin: top;
  will-change: transform;
  z-index: -1;
}

.contact-page .contact-header > * {
  position: relative;
  z-index: 1;
}

/* Portrait tablets read better with a stacked, full-width footer. */
@media (max-width: 56.25rem) {
  .site-footer .footer-row {
    grid-template-columns: 1fr;
    gap: 2.25rem;
    margin: 0;
  }

  .site-footer .footer-identity,
  .site-footer .footer-enquiry,
  .site-footer .footer-navigation {
    grid-column: 1;
    grid-row: auto;
    padding-inline-start: 0;
  }

  .site-footer .footer-navigation ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1.5rem;
  }
}

@media (max-width: 30rem) {
  .site-footer .footer-navigation ul {
    grid-template-columns: 1fr;
  }

  .site-footer .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .site-footer .footer-imagery-note,
  .site-footer .footer-bottom small {
    max-inline-size: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-page .contact-header::after {
    transform: scaleY(0);
    transition: none;
  }

  .contact-page .contact-header.is-scrolled::after {
    transform: scaleY(1);
  }
}