/*
Theme Name: Before & Beyond Co.
Theme URI: https://beforeandbeyondco.com
Author: IG Web Development
Author URI: https://igwebdevelopment.com
Description: Custom theme built to the approved Before & Beyond Co. design specification. Content is edited through labeled fields rather than a page builder, so the layout cannot be disturbed by an ordinary content edit.
Version: 0.17.0
Requires at least: 6.5
Requires PHP: 8.0
License: Proprietary. Commissioned work, owned by Before & Beyond Co.
Text Domain: before-beyond
*/

/* ==================================================================
   Fonts, self-hosted. No request leaves for a font CDN, which is
   consistent with the site's position on third-party tracking.
   ================================================================== */

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('assets/fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('assets/fonts/cormorant-garamond-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('assets/fonts/cormorant-garamond-latin-300-italic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('assets/fonts/montserrat-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('assets/fonts/montserrat-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ==================================================================
   Before & Beyond Co.
   Design system, per the approved specification.
   Tokens and foundation rules are taken from the spec verbatim.
   ================================================================== */

:root {
  /* colour - deep contrast executive */
  --bb-charcoal: #2d2521; /* primary canvas */
  --bb-espresso: #4a3428;
  --bb-terracotta: #a85f49;
  --bb-gold: #c8a46a;
  --bb-taupe: #9b8a7c;
  --bb-linen: #f8f4ee;

  --bb-stroke-dark: 1px solid rgba(155, 138, 124, 0.28);
  --bb-stroke-light: 1px solid rgba(155, 138, 124, 0.5);

  /* type */
  --bb-display: 'Cormorant Garamond', Georgia, serif;
  --bb-body: 'Montserrat', system-ui, sans-serif;

  /* rhythm */
  --bb-gutter: clamp(22px, 4vw, 56px);
  --bb-section: clamp(58px, 8vw, 130px);
  --bb-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bb-charcoal);
  color: var(--bb-linen);
  font-family: var(--bb-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 2;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--bb-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.06;
  margin: 0 0 0.4em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(44px, 7.6vw, 116px);
  line-height: 1;
  letter-spacing: -0.025em;
}
h2 {
  font-size: clamp(30px, 4.4vw, 60px);
}
h3 {
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.1;
}
h4 {
  font-size: clamp(23px, 2.4vw, 31px);
  line-height: 1.2;
}
h5 {
  font-size: clamp(19px, 1.9vw, 23px);
  line-height: 1.3;
}
h6 {
  font-size: 15px;
  letter-spacing: 0.04em;
}

p {
  margin: 0 0 1.2em;
  max-width: 62ch;
  text-wrap: pretty;
}

/* light editorial band */
.band-light {
  background: var(--bb-linen);
  color: var(--bb-espresso);
}
.band-light p {
  color: var(--bb-charcoal);
  opacity: 0.8;
}

.eyebrow {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--bb-gold);
  display: block;
  margin: 0 0 1.6em;
}
.band-light .eyebrow {
  color: var(--bb-terracotta);
}

a {
  color: var(--bb-gold);
  text-decoration: none;
  transition: color 0.4s var(--bb-ease);
}
a:hover {
  color: var(--bb-linen);
}

.btn {
  display: inline-block;
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bb-linen);
  background: transparent;
  border: 1px solid var(--bb-terracotta);
  padding: 18px 46px;
  cursor: pointer;
  font-family: var(--bb-body);
  transition:
    background 0.5s var(--bb-ease),
    letter-spacing 0.5s var(--bb-ease);
}
.btn:hover {
  background: var(--bb-terracotta);
  letter-spacing: 0.34em;
  color: var(--bb-linen);
}
.btn--gold {
  border-color: var(--bb-gold);
  background: var(--bb-gold);
  color: var(--bb-charcoal);
}
.btn--gold:hover {
  background: #d9b87e;
  color: var(--bb-charcoal);
}

/* strict grid with fine strokes - cells own their borders so an
   incomplete row never leaves an empty tinted panel */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  border-top: var(--bb-stroke-dark);
}
.grid > * {
  border-right: var(--bb-stroke-dark);
  border-bottom: var(--bb-stroke-dark);
  padding: clamp(30px, 3.6vw, 52px) clamp(22px, 2.6vw, 40px);
}
.band-light .grid,
.band-light .grid > * {
  border-color: rgba(155, 138, 124, 0.5);
}

/* Two-column composition, per the specification's Four ways in
   and How the work goes blocks. Still collapses to one column
   below 640px through the same auto-fit mechanism. */
.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
}

.scrim {
  position: relative;
}
.scrim img {
  filter: saturate(0.62) brightness(0.52) contrast(1.05);
}
.scrim::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(45, 37, 33, 0.86) 0%,
    rgba(45, 37, 33, 0.58) 40%,
    rgba(45, 37, 33, 0.92) 100%
  );
}

::selection {
  background: var(--bb-gold);
  color: var(--bb-charcoal);
}
:focus-visible {
  outline: 1px solid var(--bb-gold);
  outline-offset: 3px;
}

/* ==================================================================
   Layout scaffolding
   ================================================================== */

.wrap {
  padding-inline: var(--bb-gutter);
  margin-inline: auto;
  max-width: 1240px;
}

.section {
  padding-block: var(--bb-section);
}

.rule {
  width: 76px;
  height: 1px;
  background: var(--bb-gold);
  border: 0;
  margin: 2em 0;
}
.rule--center {
  margin-inline: auto;
}

.italic-accent {
  font-style: italic;
  font-weight: 300;
  color: var(--bb-gold);
}

.pull {
  font-family: var(--bb-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(24px, 3.6vw, 50px);
  line-height: 1.42;
  letter-spacing: 0;
  max-width: 20ch;
  margin: 0 auto 1em;
  text-wrap: balance;
}

.meta {
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--bb-taupe);
  line-height: 1.8;
}

.lede {
  font-size: clamp(15px, 1.3vw, 17px);
  max-width: 46ch;
}

.center {
  text-align: center;
}

/* Centred contexts: centre the box, not just the text inside it.
   The 62ch measure from the specification stays intact. */
.center p,
.hero__inner p,
.footer p,
.band-terracotta p,
.pull {
  margin-inline: auto;
}

/* ==================================================================
   Navigation
   ================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 18px var(--bb-gutter);
  background: rgba(45, 37, 33, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: var(--bb-stroke-dark);
}

.nav__links {
  display: flex;
  gap: clamp(18px, 3vw, 42px);
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__links--end {
  justify-content: flex-end;
}

.nav__link {
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--bb-linen);
  position: relative;
  padding-block: 6px;
  white-space: nowrap;
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background: var(--bb-gold);
  transition: width 0.4s var(--bb-ease);
}
.nav__link:hover,
.nav__link[aria-current='page'] {
  color: var(--bb-gold);
}
.nav__link:hover::after,
.nav__link[aria-current='page']::after {
  width: 100%;
}

.nav__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.nav__badge {
  width: 46px;
  height: 46px;
  display: block;
  object-fit: contain;
}
.nav__wordmark {
  font-family: var(--bb-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.06em;
  color: var(--bb-linen);
  white-space: nowrap;
}

.nav__cta {
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--bb-gold);
  border: 1px solid var(--bb-gold);
  padding: 13px 26px;
  transition:
    background 0.4s var(--bb-ease),
    color 0.4s var(--bb-ease);
  white-space: nowrap;
}
.nav__cta:hover {
  background: var(--bb-gold);
  color: var(--bb-charcoal);
}

@media (max-width: 760px) {
  .nav {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 14px;
    text-align: center;
    position: static;
  }
  .nav__links,
  .nav__links--end {
    justify-content: center;
    flex-wrap: wrap;
  }
  .nav__wordmark {
    font-size: 15px;
  }
}

/* ==================================================================
   Hero
   ================================================================== */

.hero {
  position: relative;
  min-height: min(88vh, 860px);
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(80px, 12vw, 160px) var(--bb-gutter);
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
}
.hero h1 {
  margin-bottom: 0;
}
.hero .subhead {
  max-width: 48ch;
  margin-inline: auto;
  margin-top: 1.4em;
}

/* ==================================================================
   Feature blocks
   ================================================================== */

.stage__index,
.step__index {
  font-family: var(--bb-display);
  font-size: 13px;
  letter-spacing: 0.5em;
  color: var(--bb-terracotta);
  display: block;
  margin-bottom: 1.2em;
}

.cell-hover {
  transition: background 0.5s var(--bb-ease);
}
.cell-hover:hover {
  background: #332a25;
}
.band-espresso .cell-hover:hover {
  background: #553c2e;
}
.band-espresso {
  background: var(--bb-espresso);
}

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  align-items: center;
  gap: clamp(32px, 6vw, 96px);
}

.mark-lg {
  width: min(100%, 240px);
  display: block;
  margin-inline: auto;
}

/* The stacked lockup is tall (roughly 1:1.6), so a width that reads fine
   beside text on desktop takes half the screen height once the split
   collapses to one column. Constrain it on narrow viewports. */
@media (max-width: 760px) {
  .mark-lg {
    width: min(58%, 168px);
    margin-top: 1.5em;
  }
}

.mark-md {
  width: min(100%, 190px);
  display: block;
}
.mark-sm {
  width: 86px;
  display: block;
  margin-inline: auto;
}

.engagement {
  border-top: var(--bb-stroke-dark);
  padding: clamp(28px, 3vw, 44px) 0 clamp(28px, 3vw, 44px) 16px;
  transition: padding-left 0.45s var(--bb-ease);
}
.engagement:last-child {
  border-bottom: var(--bb-stroke-dark);
}
.engagement:hover {
  padding-left: 32px;
}
.engagement h4 {
  margin-bottom: 0.25em;
}
.engagement .meta {
  color: var(--bb-gold);
  display: block;
  margin-bottom: 1.2em;
}

/* ==================================================================
   Testimonial
   ================================================================== */

.testimonial {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  align-items: center;
}
.testimonial__image img {
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
  display: block;
}
.testimonial__body {
  padding: clamp(40px, 5vw, 76px) clamp(24px, 4vw, 64px);
}
.testimonial__quote {
  font-family: var(--bb-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(21px, 2.3vw, 31px);
  line-height: 1.5;
  margin: 1.2em 0 0;
  max-width: none;
}

/* ==================================================================
   Closing band
   ================================================================== */

.band-terracotta {
  background: var(--bb-terracotta);
  color: var(--bb-linen);
  text-align: center;
}
.band-terracotta p {
  margin-inline: auto;
  color: var(--bb-linen);
  opacity: 0.92;
}
.band-terracotta .btn {
  border-color: var(--bb-linen);
}
.band-terracotta .btn:hover {
  background: var(--bb-linen);
  color: var(--bb-terracotta);
}

/* ==================================================================
   Forms
   ================================================================== */

.field {
  display: block;
  margin-bottom: 34px;
}
.field__label {
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--bb-taupe);
  display: block;
  margin-bottom: 10px;
}
.field input,
.field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: var(--bb-stroke-dark);
  color: var(--bb-linen);
  font-family: var(--bb-body);
  font-size: 15px;
  padding: 8px 0 12px;
  transition: border-color 0.4s var(--bb-ease);
}
.field input::placeholder,
.field textarea::placeholder {
  color: rgba(248, 244, 238, 0.34);
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--bb-gold);
}
.field textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.8;
}

.booking-embed {
  border: var(--bb-stroke-dark);
  min-height: 620px;
  width: 100%;
}
.booking-note {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--bb-taupe);
  margin-top: 18px;
}

/* ==================================================================
   Footer
   ================================================================== */

.footer {
  background: var(--bb-espresso);
  text-align: center;
  padding: clamp(56px, 7vw, 96px) var(--bb-gutter) 40px;
}
.footer__badge {
  width: 96px;
  height: 96px;
  margin: 0 auto 26px;
  display: block;
  object-fit: contain;
}
.footer__name {
  font-family: var(--bb-display);
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 28px);
  letter-spacing: 0.1em;
  margin: 0 0 0.3em;
  max-width: none;
}
.footer__tagline {
  font-family: var(--bb-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(16px, 1.7vw, 20px);
  color: var(--bb-gold);
  margin: 0 0 2.4em;
  max-width: none;
}
.footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(16px, 2.6vw, 36px);
  list-style: none;
  margin: 0 0 2.6em;
  padding: 0;
}
.footer__legal {
  border-top: var(--bb-stroke-dark);
  padding-top: 26px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bb-taupe);
}
.footer__disclaimer {
  font-size: 11px;
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: var(--bb-taupe);
  max-width: 68ch;
  margin: 0 auto 2.4em;
  text-transform: none;
}

/* ==================================================================
   Prose pages (legal, crisis resources)
   ================================================================== */

.prose {
  max-width: 68ch;
}
.prose h2 {
  font-size: clamp(24px, 2.6vw, 34px);
  margin-top: 1.8em;
}
.prose h3 {
  font-size: clamp(20px, 2vw, 25px);
  margin-top: 1.6em;
}
.prose ul {
  padding-left: 1.2em;
  margin-bottom: 1.4em;
}
.prose li {
  margin-bottom: 0.5em;
  max-width: 62ch;
}

/* ==================================================================
   Motion preferences
   ================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover {
    letter-spacing: 0.28em;
  }
  .engagement:hover {
    padding-left: 16px;
  }
}


/* ==================================================================
   WordPress specifics
   ================================================================== */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--bb-gold);
  color: var(--bb-charcoal);
  padding: 12px 20px;
  z-index: 999;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.skip-link:focus {
  left: 8px;
  top: 8px;
  color: var(--bb-charcoal);
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.screen-reader-text:focus {
  position: static !important;
  width: auto;
  height: auto;
  clip: auto;
  white-space: normal;
}

.nav__link.is-current {
  color: var(--bb-gold);
}
.nav__link.is-current::after {
  width: 100%;
}

/* The admin bar shifts the sticky nav down when logged in. */
body.admin-bar .nav {
  top: 32px;
}
@media screen and (max-width: 782px) {
  body.admin-bar .nav {
    top: 46px;
  }
}


/* ==================================================================
   HoneyBook form
   The embed is styled by HoneyBook, so the job here is to frame it in
   the brand rather than to restyle its internals.
   ================================================================== */

/* HoneyBook renders its own light card, so a frame around it would be a
   box inside a box. The form simply sits on the linen band, centred and
   held to a comfortable reading width rather than stretched across it. */
.enquire__head {
  text-align: center;
  max-width: 56ch;
  margin: 0 auto clamp(32px, 4vw, 56px);
}
.enquire__head .lede {
  margin-inline: auto;
}

.bb-form-wrap {
  max-width: 900px;
  margin-inline: auto;
}

/* HoneyBook sizes its own iframe and ignores a max-width on the element
   itself, so the constraint is applied to the container and the iframe is
   pinned to it. Without this the form runs wider than the copy above it. */
/* No overflow clipping here. HoneyBook lays its form out for a wider
   container, and hiding the overflow cut text mid-word and sliced the
   Submit button off at the right edge rather than letting it fit. */
.bb-honeybook {
  min-height: 280px;
  max-width: 100%;
}
.bb-honeybook iframe,
.bb-form-wrap iframe {
  width: 100% !important;
  max-width: 100% !important;
  border: 0;
  display: block;
}

/* Two light bands in a row read as one continuous field, and their section
   padding stacks into a large empty gap. A hairline marks the break and the
   second band starts tighter. */
.band-light + .band-light {
  border-top: 1px solid rgba(155, 138, 124, 0.45);
  padding-top: clamp(40px, 5vw, 76px);
}
/* Trim the first band's tail as well. Where :has is unsupported the
   padding simply stays at its normal value, which is only untidy. */
.band-light:has(+ .band-light) {
  padding-bottom: clamp(40px, 5vw, 76px);
}

.booking-note--center {
  text-align: center;
  max-width: 48ch;
  margin-inline: auto;
  margin-top: clamp(24px, 3vw, 40px);
}
.band-light .booking-note {
  color: var(--bb-espresso);
  opacity: 0.7;
}

/* Administrator-only message when the placement is not yet configured. */
.bb-notice {
  border: 1px dashed var(--bb-terracotta);
  padding: 20px 24px;
  font-size: 13px;
  color: var(--bb-taupe);
  max-width: none;
}


/* ==================================================================
   Interior prose pages
   ================================================================== */

/* Interior prose pages sit in a centred column. The measure stays at 68ch
   for readability, but the block is centred in the wrap rather than pinned
   to the left edge, which left a large void on wide screens. Text alignment
   is unchanged: left, as long-form prose should be. */
.page-prose {
  max-width: 68ch;
  margin-inline: auto;
}

.page-head {
  margin-bottom: 3em;
}
.page-head h2 {
  margin-bottom: 0;
}

.prose h2 {
  font-size: clamp(22px, 2.4vw, 30px);
  margin-top: 2em;
}
.prose h3 {
  font-size: clamp(19px, 1.9vw, 23px);
  margin-top: 1.8em;
}
.prose > *:first-child {
  margin-top: 0;
}
.prose strong {
  color: var(--bb-linen);
  font-weight: 500;
}
.prose ul,
.prose ol {
  padding-left: 1.4em;
  margin-bottom: 1.6em;
}
.prose li::marker {
  color: var(--bb-gold);
}
.prose hr {
  border: 0;
  border-top: var(--bb-stroke-dark);
  margin: 2.4em 0;
}
.prose a {
  border-bottom: 1px solid rgba(200, 164, 106, 0.4);
}
.prose .meta {
  display: block;
  margin-bottom: 2em;
}
.prose > *:last-child {
  margin-bottom: 0;
}


/* ==================================================================
   Contact form
   ================================================================== */

/* Honeypot. Positioned off-canvas rather than display:none, since some
   bots skip hidden inputs but fill positioned ones. */
.bb-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.bb-result {
  border-left: 2px solid var(--bb-gold);
  padding: 20px 24px;
  margin-bottom: 2.4em;
  background: rgba(248, 244, 238, 0.03);
}
.bb-result p {
  margin-bottom: 0.6em;
  max-width: none;
}
.bb-result p:last-child {
  margin-bottom: 0;
}
.bb-result--error {
  border-left-color: var(--bb-terracotta);
}
.band-light .bb-result {
  background: rgba(45, 37, 33, 0.04);
}

/* The button is a real submit here rather than a link. */
.bb-form-wrap .btn {
  border: 1px solid var(--bb-terracotta);
  background: transparent;
  font-family: var(--bb-body);
}


/* ==================================================================
   Inquiry section spacing
   HoneyBook sizes its iframe to the tallest step of a paginated form, so
   there is already generous space inside it. Adding a full section's
   padding underneath leaves the page trailing off into nothing.
   ================================================================== */

#enquire.section {
  padding-bottom: clamp(32px, 4vw, 56px);
}

#enquire .booking-note--center {
  margin-top: clamp(16px, 2vw, 24px);
  margin-bottom: 0;
}

#enquire .bb-form-wrap {
  margin-top: clamp(20px, 2.5vw, 32px);
}


/* Our own contact form is plain fields, so it keeps the narrower measure
   the design calls for. Only the HoneyBook embed needs the extra width. */
.page-template-contact .bb-form-wrap {
  max-width: 680px;
}


/* ==================================================================
   Inner page template
   ================================================================== */

.inner-head .eyebrow:empty {
  display: none;
}
.inner-head h2 {
  margin-bottom: 0;
}

.inner-banner {
  max-height: 420px;
  overflow: hidden;
}
.inner-banner img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}
@media (max-width: 760px) {
  .inner-banner,
  .inner-banner img {
    height: 240px;
    max-height: 240px;
  }
}

/* The prose band under an inner page heading should not repeat the
   heading's full section padding above it. */
.inner-head + .band-light,
.inner-banner + .band-light {
  padding-top: clamp(44px, 5vw, 80px);
}


/* ==================================================================
   Enquire page
   The form supplies its own heading and introduction, so the page has no
   chrome of its own and needs far less space above it.
   ================================================================== */

.enquire-page {
  padding-top: clamp(28px, 3.5vw, 52px);
}
.enquire-page .enquire__head {
  margin-bottom: clamp(24px, 3vw, 40px);
}
.enquire-page .booking-note--center {
  margin-top: clamp(20px, 2.5vw, 32px);
}