@charset "utf-8";
@import url("./nav-cta-base.css?v=3");
@import url("./mobile-text.css?v=20261009-app2");

/* Remove the translucent sheen layer that creates the faded white oval
   inside the header booking button. Keep the button itself and its arrow. */
.nav a.nav-book::before {
  display: none;
}

/* Keep every menu label centred inside its complete clickable area. */
#site-nav > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  line-height: 1.2;
  text-align: center;
}

/* Homepage proof copy: centred on phones, but allowed to use the full content
   row so it reads as a clean intro statement rather than a narrow text block. */
@media (max-width: 760px) {
  .landing-proof .proof-summary {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    font-size: clamp(1.35rem, 6vw, 1.45rem);
    line-height: 1.22;
    letter-spacing: 0;
    text-align: center;
    text-wrap: balance;
    white-space: normal;
    overflow-wrap: normal;
  }
}

/* Desktop/tablet header foundation. Keep the normal links together between
   the wordmark and booking CTA, and lower their visual baseline very slightly
   so the labels sit in line with the Nightshift wordmark and button text. */
@media (min-width: 761px) {
  nav {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(18px, 2.4vw, 36px);
  }

  nav > .logo {
    position: relative;
    left: auto;
    top: auto;
    z-index: 2;
    flex: 0 0 auto;
    transform: rotate(-2deg);
  }

  nav > .logo:hover {
    transform: rotate(2deg) scale(1.04);
  }

  nav > .nav {
    position: static;
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(1px, 0.45vw, 7px);
  }

  nav > .nav > a:not(.nav-book) {
    /* 44px, not 40px: these are the primary navigation links and were
       measuring under the minimum comfortable touch target. */
    min-height: 44px;
    font-size: 0.78rem;
  }

  nav > .nav > a:first-child {
    margin-left: auto;
  }

  nav > .nav > a:nth-last-child(2) {
    margin-right: auto;
  }

  nav > .nav .nav-book {
    position: static;
    top: auto;
    right: auto;
    flex: 0 0 auto;
    min-height: 40px;
    margin: 0;
    padding: 0 clamp(13px, 1.25vw, 18px);
    transform: none;
    font-size: 0.72rem;
    line-height: 1;
    white-space: nowrap;
  }

  nav > .nav .nav-book:hover,
  nav > .nav .nav-book:focus-visible,
  nav > .nav .nav-book[aria-current="page"]:hover,
  nav > .nav .nav-book[aria-current="page"]:focus-visible {
    transform: translateY(-1px);
  }
}

/* Centre Home-Live on the actual header centre at every non-mobile width.
   The logo and booking button sit independently at the sides, so unequal side
   widths cannot pull the menu labels off-centre. */
@media (min-width: 761px) {
  nav {
    position: relative;
    gap: 0;
  }

  nav > .nav {
    position: absolute;
    inset: 0;
    width: 100%;
    min-width: 0;
    padding: 0;
    display: flex;
    flex: none;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(1px, 0.45vw, 7px);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: none;
  }

  nav > .nav > a {
    pointer-events: auto;
  }

  nav > .nav > a:first-child,
  nav > .nav > a:nth-last-child(2) {
    margin-left: 0;
    margin-right: 0;
  }

  nav > .nav .nav-book {
    position: absolute;
    top: 50%;
    right: clamp(8px, 0.8vw, 14px);
    margin: 0;
    transform: translateY(-50%);
  }

  nav > .nav .nav-book:hover,
  nav > .nav .nav-book:focus-visible,
  nav > .nav .nav-book[aria-current="page"]:hover,
  nav > .nav .nav-book[aria-current="page"]:focus-visible {
    transform: translateY(calc(-50% - 1px));
  }
}

/* Compact desktop/tablet widths: tighten labels and the booking button while
   retaining the same true-centre layout. */
@media (min-width: 761px) and (max-width: 1020px) {
  nav {
    gap: 10px;
    padding-inline: clamp(20px, 2.8vw, 30px);
  }

  nav > .nav {
    gap: 0;
  }

  nav > .nav a:not(.nav-book) {
    padding-inline: clamp(5px, 0.8vw, 9px);
  }

  nav > .nav .nav-book {
    min-height: 38px;
    padding-inline: 10px;
  }
}

/* ===================================================================
   Site-wide button label breathing room
   Keep visible button/pill labels away from their edges. !important is
   intentional here because page-specific styles load after this shared file
   on some pages (notably Live) and previously reduced the side padding. */
.button {
  padding-inline: 24px !important;
}

.youtube-link {
  padding-right: 22px !important;
}

.nav a.nav-book {
  padding-inline: 18px !important;
}

.gig-details,
.gig-dir {
  padding-inline: 14px !important;
}

.past-year-btn,
.upcoming-more-btn {
  padding-inline: 18px !important;
}

@media (max-width: 760px) {
  .button {
    padding-inline: 24px !important;
  }

  .nav a.nav-book {
    padding-inline: 20px !important;
  }

  .gig-details,
  .gig-dir {
    padding-inline: 14px !important;
  }
}

/* Keep the header comfortable at the narrow desktop/tablet breakpoint without
   allowing the booking label to crowd the pill edges. */
@media (min-width: 761px) and (max-width: 1020px) {
  nav > .nav .nav-book {
    padding-inline: 12px !important;
  }
}

/* ===================================================================
   Interior page hero hierarchy
   Make the first screen on About / Music / Videos / Live / Contact feel more
   like a deliberate show poster: strong headline, compact label and a soft
   violet spotlight, while keeping the copy readable and centred. */
.page-hero {
  isolation: isolate;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      42% 78% at 50% 46%,
      rgba(183, 140, 255, 0.18),
      transparent 72%
    ),
    linear-gradient(
      90deg,
      transparent 7%,
      rgba(223, 178, 255, 0.035) 50%,
      transparent 93%
    );
}

.page-hero > .wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.page-hero .eyebrow {
  margin-bottom: 16px !important;
}

.page-hero .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 7px 13px;
  border: 1px solid rgba(223, 178, 255, 0.34);
  border-radius: 999px;
  background: rgba(18, 10, 36, 0.56);
  color: #eadbff;
  font:
    800 0.68rem/1 "Manrope",
    sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.18);
}

.page-hero h1:not(.about-hero-title) {
  max-width: 22ch;
  margin: 0 auto 18px !important;
  font-size: clamp(3.2rem, 5vw, 4.4rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.025em !important;
  text-wrap: balance;
  text-shadow:
    0 2px 0 rgba(255, 255, 255, 0.04),
    0 0 30px rgba(183, 140, 255, 0.22),
    0 10px 32px rgba(0, 0, 0, 0.28);
}

.page-hero h1::after {
  content: "";
  display: block;
  width: clamp(56px, 7vw, 86px);
  height: 3px;
  margin: 17px auto 0;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    #cfa6ff 22%,
    #ffffff 50%,
    #cfa6ff 78%,
    transparent
  );
  box-shadow: 0 0 18px rgba(183, 140, 255, 0.55);
}

.page-hero .hero-copy {
  width: min(100%, 56ch) !important;
  max-width: 56ch !important;
  margin-inline: auto !important;
  color: rgba(247, 243, 237, 0.82) !important;
  font-size: clamp(1rem, 1.3vw, 1.1rem) !important;
  line-height: 1.68 !important;
  text-wrap: pretty;
}

/* About uses the same main headline scale as the other interior pages. The
   supporting aim line carries more weight while “A great night out” still leads. */
.page-hero .about-hero-title {
  width: 100% !important;
  max-width: 15ch !important;
  margin: 0 auto 22px !important;
  gap: 0.12em !important;
  font-size: clamp(3.45rem, 7vw, 5.7rem) !important;
  line-height: 0.88 !important;
}

.page-hero .about-hero-title .aim {
  font-size: 0.46em;
  letter-spacing: 0.09em;
}

.page-hero .about-hero-title .night-out {
  max-width: none;
  font-size: 1em;
  line-height: 0.88;
  letter-spacing: -0.025em;
}

@media (max-width: 760px) {
  .page-hero {
    padding-top: 100px !important;
    padding-bottom: 36px !important;
  }

  .page-hero > .wrap {
    width: 100%;
  }

  .page-hero .eyebrow {
    margin-bottom: 12px !important;
  }

  .page-hero .hero-eyebrow {
    max-width: calc(100% - 16px);
    min-height: 28px;
    padding: 6px 11px;
    font-size: 0.64rem;
    letter-spacing: 0.15em;
    text-align: center;
  }

  /* Do not force mobile headlines into a narrow character box. The old
     11.5ch limit caused awkward three-line breaks and made short titles look
     off-centre. Let the available phone width determine the natural wrap. */
  .page-hero h1:not(.about-hero-title) {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto 18px !important;
    padding-inline: 4px;
    font-size: clamp(2.75rem, 11.4vw, 3.55rem) !important;
    line-height: 0.92 !important;
    letter-spacing: -0.02em !important;
    text-align: center;
    text-wrap: balance;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  .page-hero h1::after {
    width: 54px;
    height: 2px;
    margin-top: 12px;
  }

  .page-hero .hero-copy {
    width: min(100%, 32ch) !important;
    max-width: 32ch !important;
    font-size: 0.98rem !important;
    line-height: 1.56 !important;
  }

  .page-hero .about-hero-title {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto 18px !important;
    gap: 0.12em !important;
    padding-inline: 4px;
    font-size: clamp(2.75rem, 11.4vw, 3.55rem) !important;
    line-height: 0.92 !important;
    text-align: center;
  }

  .page-hero .about-hero-title .aim {
    font-size: 0.46em;
    letter-spacing: 0.08em;
  }

  .page-hero .about-hero-title .night-out {
    width: auto;
    max-width: 100%;
    font-size: 1em;
    line-height: 0.92;
    letter-spacing: -0.02em;
    /* Let enlarged text wrap instead of clipping the end of the headline. */
    white-space: normal;
  }
}

@media (min-width: 761px) {
  .page-hero {
    padding-top: 124px !important;
    padding-bottom: 44px !important;
  }
}

/* Restore the small page titles above each main hero heading. Keep them as
   clear text labels rather than pills so About Nightshift, The music, Videos,
   Live dates and Contact read as part of the page hierarchy again. */
.page-hero .hero-eyebrow {
  display: block;
  min-height: 0;
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: #dfb2ff;
  font:
    700 0.82rem/1.25 "Manrope",
    sans-serif;
  letter-spacing: 0.08em;
  text-transform: none;
  box-shadow: none;
  text-align: center;
}

.page-hero .eyebrow {
  margin-bottom: 14px !important;
}

@media (max-width: 760px) {
  .page-hero .hero-eyebrow {
    min-height: 0;
    max-width: 100%;
    padding: 0;
    font-size: 0.78rem;
    line-height: 1.25;
    letter-spacing: 0.07em;
  }

  .page-hero .eyebrow {
    margin-bottom: 11px !important;
  }
}

/* Booking contact hierarchy: calling or texting is the quickest route, so it
   is the clear primary control. Email remains an obvious secondary option. */
#enquire .contact-primary a.contact-call {
  width: 100%;
  min-height: 64px;
  padding-block: 10px;
  color: #12081f;
  line-height: 1.2;
  text-align: center;
}

#enquire .contact-primary a.contact-call .contact-label {
  color: rgba(18, 8, 31, 0.72);
  font-size: 0.68rem;
}

#enquire .contact-primary .contact-number {
  display: block;
  margin-top: 5px;
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: none;
}

#enquire .contact-primary a:is(.contact-email, .contact-text) {
  width: 100%;
  min-height: 48px;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid rgba(223, 178, 255, 0.22);
  border-radius: 12px;
  background: rgba(183, 140, 255, 0.06);
  text-align: center;
}

#enquire .contact-primary a:is(.contact-email, .contact-text):hover,
#enquire .contact-primary a:is(.contact-email, .contact-text):focus-visible {
  border-color: rgba(223, 178, 255, 0.48);
  background: rgba(183, 140, 255, 0.12);
}

/* Quiet shortcuts keep longer pages easy to navigate. */
.page-hero .page-guide {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 26px auto 0;
  padding: 0;
  width: fit-content;
  max-width: calc(100% - 36px);
  height: auto;
  min-height: 0;
}
.page-guide a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  padding: 10px 15px;
  border: 1px solid rgba(207, 166, 255, 0.24);
  border-radius: 10px;
  color: #eee2ff;
  background: rgba(9, 7, 17, 0.25);
  font:
    600 0.82rem/1.35 "Manrope",
    sans-serif;
  text-decoration: none;
}
.page-guide a:hover {
  background: rgba(183, 140, 255, 0.14);
  border-color: #cfa6ff;
}
.page-guide a:focus-visible {
  outline: 2px solid #dfb2ff;
  outline-offset: 3px;
}
@media (max-width: 760px) {
  .page-hero .page-guide {
    display: flex;
  }
  .page-hero .page-guide {
    margin-top: 22px;
    gap: 8px;
  }
  .page-guide a {
    padding: 10px 12px;
    font-size: 0.78rem;
  }

  /* Collapse gallery to first 3 photos on mobile */
  #gallery .gallery-grid > figure:nth-child(n + 4) {
    display: none;
  }
  .gallery-more > summary {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .gallery-more > summary .gallery-more-count {
    display: none;
  }
  .gallery-more > summary::after {
    content: "3 photos";
    margin-left: 8px;
    font-size: 0.8rem;
    color: var(--muted);
    font-weight: 400;
  }
}

.performance-media {
  min-width: 0;
}
.video-fallback {
  margin: 12px 0 0;
  font-size: 0.95rem;
  line-height: 1.5;
}
.video-fallback a {
  color: #dfb2ff;
  text-decoration: underline;
}

/* Homepage mobile conversion path: the desktop header already exposes the
   booking CTA, while the compact header hides it behind the menu. Put one
   clear primary action in the first viewport without duplicating it on wide
   layouts. */
.hero-book-mobile {
  display: none;
}

/* The packaged site appends actions.css, whose `#main :is(.button, …)` rule
   outranks the bare class above and re-shows this button on wide layouts.
   Hide it again on desktop, where the header already owns the booking CTA.
   Scoped to desktop widths only so the mobile-only rules below still win
   on phones. */
@media (min-width: 761px) {
  #main section.hero .hero-book-mobile {
    display: none !important;
  }
}

@media (max-width: 760px) {
  .hero .hero-book-mobile {
    display: inline-flex;
    width: auto;
    min-width: 0;
    max-width: none;
    min-height: 46px;
    margin: 20px auto 0;
    align-self: center;
    padding: 0 21px !important;
    border-color: rgba(223, 178, 255, 0.5);
    background: rgba(16, 10, 28, 0.78);
    color: #f7f3ed;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.075em;
    text-align: center;
    box-shadow:
      0 8px 22px rgba(0, 0, 0, 0.24),
      inset 0 1px 0 rgba(255, 255, 255, 0.07);
  }

  .hero .hero-book-mobile::after {
    content: "→";
    margin-left: 9px;
    color: #dfb2ff;
    font-size: 1rem;
    line-height: 1;
  }

  .hero .hero-book-mobile:hover,
  .hero .hero-book-mobile:focus-visible {
    border-color: rgba(223, 178, 255, 0.78);
    background: rgba(28, 16, 46, 0.9);
    color: #fff;
    transform: translateY(-1px);
    box-shadow:
      0 10px 26px rgba(0, 0, 0, 0.3),
      0 0 18px rgba(183, 140, 255, 0.1);
  }

  .hero .hero-book-mobile:active {
    transform: translateY(0);
  }

  .hero .hero-grid {
    width: min(100%, 34rem);
  }
}

@media (max-height: 700px) and (max-width: 760px) {
  .hero .hero-book-mobile {
    min-height: 44px;
    margin-top: 15px;
    padding-inline: 19px !important;
  }
}

/* ===================================================================
   Site-wide alignment system
   A consistent reading hierarchy:
   - Hero and major section headings: centred.
   - Supporting content inside cards/panels: left aligned.
   - Eyebrows/mini labels follow the heading they introduce.
   - Dates, badges and controls: centred where they act as compact UI.
   - Forms and practical information: left aligned for scanning.
   =================================================================== */

main .page-hero,
main .page-hero > .wrap,
main .page-hero .eyebrow,
main .page-hero .hero-eyebrow,
main .page-hero h1,
main .page-hero .hero-copy,
main .page-hero .page-guide {
  text-align: center !important;
}

@media (min-width: 901px) {
  main > .wrap > .footer-cta,
  main .home-cta .footer-cta {
    text-align: left !important;
  }

  main > .wrap > .footer-cta > :is(.mini-title, h2, p),
  main .home-cta .footer-cta > :is(.mini-title, h2, p) {
    text-align: left !important;
  }
}

/* Title labels
   The short eyebrow labels above headings now use a lighter typographic
   treatment instead of pill badges, which avoids repeating button-shaped
   elements throughout the site. The homepage occasion line above the Nightshift
   wordmark intentionally keeps its original non-badge treatment. */
main#main
  :is(
    .page-hero .hero-eyebrow,
    .section-head > .label,
    .booking-diary-heading .label,
    .footer-cta > .mini-title,
    .panel .mini-title,
    .card .mini-title
  ) {
  display: inline-block !important;
  width: auto !important;
  max-width: min(100%, 34ch) !important;
  min-height: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: #dfb2ff;
  font-weight: 800;
  line-height: 1.25 !important;
  letter-spacing: 0.14em !important;
  text-shadow: 0 0 18px rgba(223, 178, 255, 0.22);
  text-transform: uppercase;
  text-wrap: balance;
  white-space: normal;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

main#main :is(.page-hero .hero-eyebrow, .section-head > .label) {
  margin-inline: auto !important;
  align-self: center !important;
  text-align: center !important;
}

main#main :is(.section-head > .label, .booking-diary-heading .label)::after {
  display: block;
  width: clamp(34px, 4vw, 54px);
  height: 1px;
  margin: 9px auto 0;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(223, 178, 255, 0.86),
    transparent
  );
  content: "";
  opacity: 0.82;
}

@media (max-width: 760px) {
  main#main
    :is(
      .page-hero .hero-eyebrow,
      .section-head > .label,
      .booking-diary-heading .label,
      .footer-cta > .mini-title,
      .panel .mini-title,
      .card .mini-title
    ) {
    max-width: min(100%, 30ch) !important;
    font-size: 0.66rem !important;
    line-height: 1.28 !important;
    letter-spacing: 0.12em !important;
  }

  main#main :is(.section-head > .label, .booking-diary-heading .label)::after {
    width: 42px;
    margin-top: 7px;
  }
}

/* Cross-page polish: page guides and content surfaces.
   Applies to every source page so desktop and mobile share the same quieter,
   more deliberate navigation and card treatment. */
main#main .page-hero .page-guide {
  display: flex;
  width: fit-content;
  max-width: min(100%, 52rem);
  align-items: center;
  justify-content: center;
  gap: 4px !important;
  margin: 28px auto 0;
  padding: 6px;
  border: 1px solid rgba(223, 178, 255, 0.2);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(223, 178, 255, 0.09), rgba(7, 6, 11, 0.24)),
    rgba(7, 6, 11, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 28px rgba(0, 0, 0, 0.18);
}

main#main .page-hero .page-guide a {
  min-height: 38px;
  padding: 8px 14px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(247, 243, 237, 0.86) !important;
  box-shadow: none !important;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none !important;
  text-wrap: balance;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

main#main .page-hero .page-guide a:is(:hover, :focus-visible) {
  background: rgba(223, 178, 255, 0.13) !important;
  color: #fff !important;
  transform: translateY(-1px);
}

main#main
  :is(
    .panel,
    .card,
    .faq details,
    .booking-card,
    .booking-details,
    .booking-diary-card,
    .gig-calendar,
    .gallery-more,
    .reviews-panel,
    .repertoire-panel
  ) {
  background-clip: padding-box;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

@media (hover: hover) and (pointer: fine) {
  main#main
    :is(
      .panel,
      .card,
      .faq details,
      .booking-card,
      .booking-details,
      .booking-diary-card,
      .gallery-more,
      .reviews-panel,
      .repertoire-panel
    ):hover {
    border-color: rgba(223, 178, 255, 0.42);
    box-shadow:
      0 0 34px rgba(147, 81, 255, 0.13),
      0 22px 58px rgba(0, 0, 0, 0.3);
  }
}

@media (max-width: 760px) {
  main#main .page-hero .page-guide {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 23rem);
    max-width: calc(100% - 24px);
    gap: 8px !important;
    margin-top: 22px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  main#main .page-hero .page-guide a {
    min-width: 0;
    min-height: 46px;
    padding: 10px 13px !important;
    border: 1px solid rgba(223, 178, 255, 0.34) !important;
    border-radius: 999px !important;
    background: rgba(223, 178, 255, 0.075) !important;
    color: #fff !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 5px 16px rgba(0, 0, 0, 0.16) !important;
    font-size: 0.78rem;
    line-height: 1.25;
  }

  main#main .page-hero .page-guide a:is(:hover, :focus-visible) {
    border-color: rgba(223, 178, 255, 0.58) !important;
    background: rgba(223, 178, 255, 0.14) !important;
    transform: none;
  }

  main#main
    :is(
      .panel,
      .card,
      .faq details,
      .booking-card,
      .booking-details,
      .booking-diary-card,
      .gig-calendar,
      .gallery-more,
      .reviews-panel,
      .repertoire-panel
    ) {
    border-radius: 18px;
  }
}

@media (max-width: 350px) {
  main#main .page-hero .page-guide {
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 17rem);
  }
}

/* Responsive bridge: tablets and narrow laptops get their own rhythm instead
   of inheriting full desktop spacing until the mobile breakpoint suddenly
   takes over. This keeps every interior page hero and section heading balanced
   through the in-between widths. */
@media (min-width: 761px) and (max-width: 1100px) {
  main#main .page-hero {
    padding-top: clamp(108px, 12vw, 132px) !important;
    padding-bottom: clamp(42px, 6vw, 58px) !important;
  }

  main#main .page-hero > .wrap {
    width: min(calc(100% - clamp(48px, 7vw, 72px)), 46rem);
  }

  main#main .page-hero h1:not(.about-hero-title) {
    max-width: 18ch;
    font-size: clamp(3rem, 6vw, 4.1rem) !important;
    line-height: 0.96 !important;
  }

  main#main .page-hero .about-hero-title {
    max-width: 14ch !important;
    font-size: clamp(3.35rem, 7vw, 5rem) !important;
  }

  main#main .page-hero .hero-copy {
    width: min(100%, 46ch) !important;
    max-width: 46ch !important;
    line-height: 1.62 !important;
  }

  main#main .page-hero .page-guide {
    flex-wrap: wrap;
    width: fit-content;
    max-width: min(100%, 42rem);
    gap: 6px !important;
    margin-top: 24px;
    border-radius: 24px;
  }

  main#main .page-hero .page-guide a {
    min-height: 40px;
    padding: 8px 13px !important;
    font-size: 0.82rem;
  }

  main#main .section-head,
  main#main .booking-diary-heading {
    width: min(100%, 44rem);
    margin-inline: auto;
    justify-content: center;
    text-align: center;
  }
}