:root {
  --ink: #0e0e0f;
  --ink-2: #181817;
  --paper: #f5f2e9;
  --paper-2: #eae4d7;
  --white: #fffef9;
  --orange: #ff8a00;
  --gold: #ffd879;
  --green: #27c984;
  --muted: #706d65;
  --line: rgba(17, 17, 15, 0.13);
  --line-dark: rgba(255, 253, 248, 0.14);
  --shell: min(1180px, calc(100% - 40px));
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 82% 4%, rgba(255, 174, 48, 0.17), transparent 28rem),
    var(--paper);
  font-family:
    Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    sans-serif;
  line-height: 1.55;
  overflow-x: hidden;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1,
h2,
h3 {
  line-height: 1.02;
  letter-spacing: -0.04em;
}

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 8px;
}

.shell {
  width: var(--shell);
  margin-inline: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: #cf6500;
  font-size: 0.69rem;
  font-weight: 850;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--orange), var(--gold));
}

.eyebrow.on-dark {
  color: var(--gold);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 800;
}

.button--gold {
  color: #241b06;
  background: linear-gradient(120deg, var(--gold), var(--orange));
}

.button--dark {
  color: var(--white);
  background: var(--ink);
  border: 1px solid var(--line-dark);
}

/* Shared enterprise header */
.page-header {
  position: fixed;
  z-index: 90;
  top: 16px;
  left: 0;
  right: 0;
  pointer-events: none;
}

.page-nav {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: center;
  gap: 14px;
  width: var(--shell);
  margin-inline: auto;
  pointer-events: auto;
}

.page-nav__pill {
  min-height: 74px;
  border: 1px solid rgba(255, 253, 248, 0.09);
  border-radius: 24px;
  background: rgba(14, 14, 15, 0.93);
  box-shadow: 0 18px 50px rgba(10, 8, 3, 0.25);
  backdrop-filter: blur(18px) saturate(140%);
}

.page-brand {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px 10px 14px;
  color: var(--white);
}

.page-brand img {
  width: 54px;
}

.page-brand span {
  display: grid;
  line-height: 1.15;
}

.page-brand strong {
  font-size: 0.77rem;
  letter-spacing: 0.11em;
}

.page-brand small {
  color: rgba(255, 253, 248, 0.55);
  font-size: 0.5rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.page-nav__rotator {
  justify-self: center;
  display: flex;
  align-items: center;
  width: min(330px, 100%);
  min-width: 0;
  max-width: min(430px, 100%);
  gap: 9px;
  padding: 9px 10px 9px 16px;
  color: var(--white);
  font-size: 0.76rem;
  font-weight: 800;
}

.page-nav__rotator-link {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 9px;
  color: inherit;
}

.page-nav__rotator-copy {
  min-width: 0;
  white-space: nowrap;
}

.page-nav__rotator-item {
  display: none;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-nav__rotator-item.is-active {
  display: block;
  animation: pageRotatorIn 0.32s ease both;
}

.page-nav__rotator-arrow {
  flex: none;
  color: var(--gold);
  font-size: 1.15rem;
}

.page-nav__stores {
  display: flex;
  flex: none;
  gap: 6px;
}

.page-nav__store {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  padding: 4px;
  overflow: hidden;
  border: 1px solid rgba(255, 183, 62, 0.58);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
}

.page-nav__store img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Exact desktop/tablet copy of the approved homepage navbar. */
.homepage-nav-copy {
  position: fixed;
  top: 16px;
  left: 0;
  right: 0;
  z-index: 90;
  pointer-events: none;
}

.homepage-nav-copy .nav-stack {
  position: relative;
  width: min(1280px, calc(100% - 40px));
  margin-inline: auto;
  pointer-events: auto;
}

.homepage-nav-copy .nav-shell {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  min-height: 84px;
}

.homepage-nav-copy .nav-seg {
  display: flex;
  align-items: center;
  min-height: 84px;
  border: 1px solid rgba(255, 253, 248, 0.09);
  border-radius: 26px;
  background: rgba(14, 14, 15, 0.9);
  box-shadow: 0 18px 50px rgba(10, 8, 3, 0.3);
  backdrop-filter: blur(18px) saturate(140%);
  transition:
    background 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}

.homepage-nav-copy.is-scrolled .nav-seg {
  background: rgba(14, 14, 15, 0.97);
  box-shadow: 0 20px 60px rgba(10, 8, 3, 0.42);
}

.homepage-nav-copy .nav-seg--brand {
  justify-self: start;
  gap: 18px;
  padding: 10px 22px 10px 18px;
}

.homepage-nav-copy .brand {
  display: flex;
  align-items: center;
  flex: none;
  gap: 14px;
}

.homepage-nav-copy .brand-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 62px;
  height: 44px;
}

.homepage-nav-copy .brand-mark img {
  width: 62px;
}

.homepage-nav-copy .brand-copy {
  display: flex;
  flex-direction: column;
  color: #fffef9;
  line-height: 1.1;
}

.homepage-nav-copy .brand-copy strong {
  font-size: 0.94rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.homepage-nav-copy .brand-copy small {
  color: rgba(255, 253, 248, 0.62);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.homepage-nav-copy .nav-seg--app {
  justify-self: center;
  gap: 10px;
  padding: 10px 14px;
}

.homepage-nav-copy .nav-rot-link {
  display: flex;
  align-items: center;
  gap: 8px;
}

.homepage-nav-copy .nav-rotator {
  display: grid;
  align-items: center;
  justify-items: start;
}

.homepage-nav-copy .nav-rot-item {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fffef9;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}

.homepage-nav-copy .nav-rot-item.is-active {
  opacity: 1;
  transform: none;
}

.homepage-nav-copy .nav-rot-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 0.9em;
  color: #ffd879;
  font-size: 0.9rem;
  line-height: 1;
}

.homepage-nav-copy .store-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 3px;
  border: 1.5px solid transparent;
  border-radius: 12px;
  background: rgba(255, 253, 248, 0.06);
}

.homepage-nav-copy .store-badge img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.homepage-nav-copy .store-badge--apple {
  border-color: rgba(255, 138, 0, 0.55);
}

.homepage-nav-copy .store-badge--play {
  border-color: rgba(255, 216, 121, 0.6);
}

.homepage-nav-copy .nav-seg--actions {
  justify-self: end;
  gap: 10px;
  padding: 10px 10px 10px 16px;
}

.homepage-nav-copy .nav-item {
  position: relative;
}

.homepage-nav-copy .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 15px;
  border: 0;
  border-radius: 999px;
  color: rgba(255, 253, 248, 0.76);
  background: transparent;
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 0.2s var(--ease),
    background 0.2s var(--ease);
}

.homepage-nav-copy .nav-link:hover,
.homepage-nav-copy .nav-link.is-active {
  color: var(--white);
  background: rgba(255, 253, 248, 0.08);
}

.homepage-nav-copy .nav-link .caret {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.25s var(--ease);
}

.homepage-nav-copy .nav-item.is-open .nav-link .caret {
  transform: translateY(1px) rotate(-135deg);
}

.homepage-nav-copy .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.homepage-nav-copy .button-gold {
  color: #221a06;
  background: linear-gradient(120deg, #ffd879, #ff8a00);
  box-shadow: 0 14px 34px rgba(255, 138, 0, 0.32);
}

.homepage-nav-copy .nav-book {
  min-height: 48px;
  padding: 0 22px;
  font-size: 0.88rem;
  white-space: nowrap;
}

.homepage-nav-copy .nav-book-sm {
  display: none;
}

.homepage-nav-copy .menu-trigger {
  position: relative;
  display: none;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(255, 253, 248, 0.14);
  border-radius: 16px;
  background: rgba(255, 253, 248, 0.07);
  cursor: pointer;
}

.homepage-nav-copy .menu-trigger span,
.homepage-nav-copy .menu-trigger span::before,
.homepage-nav-copy .menu-trigger span::after {
  position: absolute;
  left: 50%;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: #fffef9;
}

.homepage-nav-copy .menu-trigger span {
  top: 50%;
  transform: translate(-50%, -50%);
}

.homepage-nav-copy .menu-trigger span::before,
.homepage-nav-copy .menu-trigger span::after {
  content: "";
  left: 0;
}

.homepage-nav-copy .menu-trigger span::before {
  top: -7px;
}

.homepage-nav-copy .menu-trigger span::after {
  top: 7px;
}

.homepage-nav-copy .mega-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: min(760px, calc(100vw - 48px));
  padding: 22px;
  border: 1px solid var(--line-dark);
  border-radius: 24px;
  background: rgba(20, 20, 22, 0.97);
  box-shadow: 0 30px 80px rgba(8, 6, 2, 0.5);
  backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition:
    opacity 0.25s var(--ease),
    transform 0.25s var(--ease),
    visibility 0.25s;
}

.homepage-nav-copy .nav-item.is-open .mega-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.homepage-nav-copy .mega-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.homepage-nav-copy .mega-card {
  display: grid;
  grid-template-columns: 74px 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid transparent;
  border-radius: 14px;
  transition:
    background 0.2s var(--ease),
    border-color 0.2s var(--ease),
    transform 0.2s var(--ease);
}

.homepage-nav-copy .mega-card:hover {
  border-color: var(--line-dark);
  background: rgba(255, 253, 248, 0.06);
  transform: translateX(3px);
}

.homepage-nav-copy .mega-card img {
  width: 74px;
  height: 46px;
  object-fit: contain;
}

.homepage-nav-copy .mega-card strong,
.homepage-nav-copy .mega-card small {
  display: block;
}

.homepage-nav-copy .mega-card strong {
  color: var(--white);
  font-size: 0.88rem;
  font-weight: 700;
}

.homepage-nav-copy .mega-card small {
  color: rgba(255, 253, 248, 0.62);
  font-size: 0.72rem;
  line-height: 1.35;
}

.homepage-nav-copy .mega-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line-dark);
  color: rgba(255, 253, 248, 0.62);
  font-size: 0.78rem;
}

.homepage-nav-copy .mega-foot a {
  color: var(--gold);
  font-weight: 700;
}

@media (min-width: 761px) {
  .page-header {
    display: none;
  }
}

@media (max-width: 1180px) {
  .homepage-nav-copy .nav-link {
    padding: 10px 11px;
    font-size: 0.82rem;
  }

  .homepage-nav-copy .brand-copy {
    display: none;
  }
}

@media (max-width: 1024px) {
  .homepage-nav-copy .nav-stack {
    width: min(1280px, calc(100% - 32px));
  }

  .homepage-nav-copy #servicesItem {
    display: none;
  }

  .homepage-nav-copy .menu-trigger {
    display: block;
  }

  .homepage-nav-copy .nav-shell {
    grid-template-columns: auto 1fr auto;
    gap: 10px;
  }

  .homepage-nav-copy .brand-mark,
  .homepage-nav-copy .brand-mark img {
    width: 50px;
  }

  .homepage-nav-copy .brand-mark {
    height: 36px;
  }

  .homepage-nav-copy .brand-copy strong {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
  }

  .homepage-nav-copy .brand-copy small {
    font-size: 0.48rem;
    letter-spacing: 0.08em;
  }

  .homepage-nav-copy .nav-seg--brand {
    padding: 10px 14px 10px 12px;
  }

  .homepage-nav-copy .brand {
    gap: 10px;
  }
}

@media (min-width: 830px) and (max-width: 1024px) {
  .homepage-nav-copy .brand-copy {
    display: flex;
  }
}

@media (max-width: 939px) {
  .homepage-nav-copy .nav-book-lg {
    display: none;
  }

  .homepage-nav-copy .nav-book-sm {
    display: inline;
  }

  .homepage-nav-copy .nav-rot-item {
    font-size: 0.78rem;
  }

  .homepage-nav-copy .nav-seg--app {
    padding: 10px 12px;
  }

  .homepage-nav-copy .store-badge {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  .homepage-nav-copy .nav-seg--actions {
    gap: 8px;
    padding: 10px 10px 10px 12px;
  }
}

@media (max-width: 760px) {
  .homepage-nav-copy {
    display: none;
  }
}

@keyframes pageRotatorIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-nav__actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px;
}

.page-nav__home {
  min-height: 46px;
  padding: 0 18px;
  color: var(--white);
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.08);
  font-size: 0.78rem;
  font-weight: 750;
}

.page-menu-trigger {
  display: none;
  position: relative;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--line-dark);
  border-radius: 15px;
  background: rgba(255, 253, 248, 0.07);
  cursor: pointer;
}

.page-menu-trigger i,
.page-menu-trigger i::before,
.page-menu-trigger i::after {
  position: absolute;
  left: 50%;
  width: 19px;
  height: 2px;
  border-radius: 2px;
  background: var(--white);
  transition: transform 0.28s var(--ease), opacity 0.2s var(--ease);
}

.page-menu-trigger i {
  top: 50%;
  transform: translate(-50%, -50%);
}

.page-menu-trigger i::before,
.page-menu-trigger i::after {
  content: "";
  left: 0;
}

.page-menu-trigger i::before {
  top: -6px;
}

.page-menu-trigger i::after {
  top: 6px;
}

.page-menu-trigger[aria-expanded="true"] i {
  background: transparent;
}

.page-menu-trigger[aria-expanded="true"] i::before {
  transform: translateY(6px) rotate(45deg);
}

.page-menu-trigger[aria-expanded="true"] i::after {
  transform: translateY(-6px) rotate(-45deg);
}

.page-menu-scrim {
  position: fixed;
  z-index: 89;
  inset: 0;
  border: 0;
  background: rgba(14, 14, 15, 0.14);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease), visibility 0.25s;
}

.page-menu-scrim.is-open {
  opacity: 1;
  visibility: visible;
}

.page-menu {
  position: fixed;
  z-index: 96;
  top: calc(env(safe-area-inset-top) + 94px);
  right: max(12px, calc((100vw - min(1180px, 100vw - 40px)) / 2));
  width: min(430px, calc(100vw - 24px));
  max-height: calc(100dvh - 112px);
  padding: 20px;
  overflow-y: auto;
  border: 1px solid rgba(255, 253, 248, 0.13);
  border-radius: 28px;
  color: var(--white);
  background:
    radial-gradient(circle at 100% 0, rgba(255, 138, 0, 0.18), transparent 18rem),
    rgba(14, 14, 15, 0.97);
  box-shadow: 0 32px 90px rgba(6, 5, 2, 0.42);
  backdrop-filter: blur(24px) saturate(140%);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.97);
  transform-origin: top right;
  transition:
    opacity 0.25s var(--ease),
    transform 0.3s var(--ease),
    visibility 0.25s;
}

.page-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.page-menu__intro {
  padding: 4px 4px 16px;
}

.page-menu__intro small {
  color: var(--gold);
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.page-menu__intro strong {
  display: block;
  margin-top: 5px;
  font-size: 1.45rem;
  letter-spacing: -0.035em;
}

.page-menu__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.page-menu__link {
  min-width: 0;
  padding: 15px;
  border: 1px solid rgba(255, 253, 248, 0.1);
  border-radius: 17px;
  background: rgba(255, 253, 248, 0.055);
}

.page-menu__link strong,
.page-menu__link small {
  display: block;
}

.page-menu__link strong {
  font-size: 0.86rem;
}

.page-menu__link small {
  margin-top: 4px;
  color: rgba(255, 253, 248, 0.5);
  font-size: 0.66rem;
}

.page-menu__footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.page-menu__footer .button {
  min-height: 46px;
  padding-inline: 14px;
  font-size: 0.74rem;
}

/* The responsive menu on secondary pages deliberately mirrors the approved
   homepage hamburger panel. Keep these selectors menu-scoped so the page
   navbar, page content, footer and desktop layouts remain independent. */
.page-menu--homepage {
  top: calc(env(safe-area-inset-top) + 104px);
  right: max(12px, calc((100vw - min(1280px, calc(100vw - 32px))) / 2));
  width: min(280px, calc(100vw - 24px));
  padding: 18px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 100% 0, rgba(255, 138, 0, 0.2), transparent 19rem),
    rgba(12, 12, 13, 0.97);
  box-shadow: 0 34px 90px rgba(6, 5, 2, 0.48);
  backdrop-filter: blur(24px) saturate(145%);
}

.page-menu-home__intro {
  padding: 2px 4px 12px;
}

.page-menu-home__intro small {
  display: block;
  color: var(--gold);
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.page-menu-home__pages {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.page-menu-home__pages a {
  padding: 11px 4px;
  color: rgba(255, 253, 248, 0.72);
  font-size: 0.92rem;
  font-weight: 600;
  transition: color 0.2s var(--ease);
}

.page-menu-home__pages a:hover {
  color: var(--white);
}

.page-menu-home__actions,
.page-menu-home__stores {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 253, 248, 0.1);
}

.page-menu-home__actions .button {
  min-height: 48px;
  width: 100%;
  padding-inline: 16px;
  font-size: 0.8rem;
}

.page-menu-home__actions .button--dark {
  border: 0;
}

.page-menu-home__actions .button--gold {
  box-shadow: 0 14px 34px rgba(255, 138, 0, 0.32);
}

.page-menu-home__store {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 54px;
  padding: 8px 14px;
  border: 0;
  border-radius: 16px;
  color: var(--white);
  background: var(--ink);
}

.page-menu-home__store svg {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  fill: currentColor;
}

.page-menu-home__store span,
.page-menu-home__store small,
.page-menu-home__store strong {
  display: block;
}

.page-menu-home__store small {
  margin-bottom: 1px;
  color: rgba(255, 253, 248, 0.6);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.page-menu-home__store strong {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Page layouts */
.page-main {
  min-height: 100vh;
}

.page-hero {
  position: relative;
  min-height: 690px;
  padding: 176px 0 90px;
  overflow: hidden;
  color: var(--white);
  background:
    radial-gradient(circle at 80% 28%, rgba(255, 138, 0, 0.25), transparent 25rem),
    linear-gradient(120deg, #17140f, var(--ink) 58%);
}

.page-hero::after {
  content: "";
  position: absolute;
  right: -8vw;
  bottom: -22vw;
  width: min(62vw, 760px);
  height: min(62vw, 760px);
  border: 1px dashed rgba(255, 216, 121, 0.24);
  border-radius: 50%;
}

.page-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  align-items: end;
  gap: 60px;
}

.page-hero h1 {
  max-width: 850px;
  font-size: clamp(4rem, 8vw, 7.4rem);
}

.page-hero h1 em {
  color: var(--gold);
  font-style: normal;
}

.page-hero__aside {
  padding: 28px;
  border: 1px solid rgba(255, 253, 248, 0.13);
  border-radius: 26px;
  background: rgba(255, 253, 248, 0.055);
  backdrop-filter: blur(14px);
}

.page-hero__aside p {
  color: rgba(255, 253, 248, 0.7);
  font-size: 1rem;
}

.page-hero__aside .button {
  margin-top: 22px;
}

.page-section {
  padding: 96px 0;
}

.page-section--soft {
  background: var(--paper-2);
}

.page-section--dark {
  color: var(--white);
  background: var(--ink);
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.55fr);
  align-items: end;
  gap: 50px;
  margin-bottom: 42px;
}

.section-heading h2 {
  max-width: 760px;
  font-size: clamp(2.5rem, 5vw, 5.2rem);
}

.section-heading > p {
  color: var(--muted);
}

.page-section--dark .section-heading > p {
  color: rgba(255, 253, 248, 0.62);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.card {
  min-height: 250px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: rgba(255, 254, 249, 0.72);
}

.page-section--dark .card {
  border-color: var(--line-dark);
  background: rgba(255, 253, 248, 0.055);
}

.card__number {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 42px;
  border-radius: 14px;
  color: var(--gold);
  background: var(--ink);
  font-size: 0.72rem;
  font-weight: 850;
}

.page-section--dark .card__number {
  color: var(--ink);
  background: var(--gold);
}

.card h3 {
  margin-bottom: 10px;
  font-size: 1.2rem;
}

.card p {
  color: var(--muted);
  font-size: 0.88rem;
}

.page-section--dark .card p {
  color: rgba(255, 253, 248, 0.6);
}

.feature-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 34px;
  background: var(--white);
  box-shadow: 0 30px 80px rgba(21, 17, 8, 0.1);
}

.feature-panel__copy {
  padding: clamp(34px, 6vw, 74px);
}

.feature-panel__copy h2 {
  margin-bottom: 20px;
  font-size: clamp(2.4rem, 5vw, 5.2rem);
}

.feature-panel__copy p {
  color: var(--muted);
}

.feature-panel__copy p + p {
  margin-top: 14px;
}

.feature-panel__visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 520px;
  padding: 42px;
  background:
    radial-gradient(circle, rgba(255, 138, 0, 0.24), transparent 44%),
    var(--ink);
}

.feature-panel__visual img {
  position: relative;
  z-index: 1;
  max-height: 360px;
  object-fit: contain;
  filter: drop-shadow(0 30px 34px rgba(0, 0, 0, 0.32));
}

.feature-panel__visual::before,
.feature-panel__visual::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.feature-panel__visual::before {
  width: 340px;
  height: 340px;
  border: 1px dashed rgba(255, 216, 121, 0.3);
}

.feature-panel__visual::after {
  width: 220px;
  height: 220px;
  border: 1px solid rgba(255, 253, 248, 0.12);
}

.split-list {
  display: grid;
  grid-template-columns: minmax(240px, 0.55fr) minmax(0, 1fr);
  gap: 50px;
}

.split-list h2 {
  position: sticky;
  top: 130px;
  align-self: start;
  font-size: clamp(2.7rem, 5vw, 5rem);
}

.stack {
  display: grid;
  gap: 12px;
}

.stack-item {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 254, 249, 0.68);
}

.stack-item small {
  color: #c06000;
  font-size: 0.64rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.stack-item h3 {
  margin: 8px 0;
  font-size: 1.35rem;
}

.stack-item p,
.legal-copy p,
.legal-copy li {
  color: var(--muted);
}

.notice {
  margin-top: 22px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 138, 0, 0.25);
  border-radius: 18px;
  color: #6e3a00;
  background: rgba(255, 216, 121, 0.22);
  font-size: 0.82rem;
}

.legal-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 60px;
}

.legal-nav {
  position: sticky;
  top: 126px;
  align-self: start;
  display: grid;
  gap: 5px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 254, 249, 0.66);
}

.legal-nav a {
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.legal-nav a:hover {
  color: var(--ink);
  background: var(--paper-2);
}

.legal-copy {
  max-width: 820px;
}

.legal-copy section {
  padding: 0 0 48px;
  scroll-margin-top: 130px;
}

.legal-copy h2 {
  margin-bottom: 14px;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
}

.legal-copy p + p {
  margin-top: 12px;
}

.legal-copy ul {
  margin: 14px 0 0;
  padding-left: 20px;
}

.legal-copy li + li {
  margin-top: 8px;
}

/* Shared enterprise footer */
.enterprise-footer {
  padding: 30px 0 0;
  color: var(--white);
  background: var(--ink);
}

.footer-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 56px;
  padding: 34px;
  border: 1px solid var(--line-dark);
  border-radius: 28px;
  background:
    radial-gradient(circle at 88% 50%, rgba(255, 138, 0, 0.24), transparent 20rem),
    rgba(255, 253, 248, 0.055);
}

.footer-callout small {
  display: block;
  margin-bottom: 8px;
  color: var(--gold);
  font-size: 0.64rem;
  font-weight: 850;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.footer-callout strong {
  font-size: clamp(1.8rem, 4vw, 3.5rem);
  letter-spacing: -0.04em;
}

.footer-columns {
  display: grid;
  grid-template-columns: minmax(260px, 1.5fr) repeat(4, minmax(120px, 1fr));
  gap: 34px;
  padding-bottom: 48px;
}

/* ---- CONTACT PANEL (about page) -----------------------------------
   Copy on the left, actions on the right. Collapses to one column on
   phones. No email address is printed anywhere — the enquiry drawer is
   the only route in. */
.contact-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(circle at 100% 0, rgba(255, 138, 0, 0.13), transparent 22rem),
    rgba(255, 255, 255, 0.55);
}

.contact-panel__copy h2 {
  margin-bottom: 12px;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
}

.contact-panel__copy p {
  max-width: 52ch;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

.contact-panel__place {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink) !important;
  font-size: 0.82rem;
  font-weight: 800;
}

.contact-panel__place span[aria-hidden] {
  color: var(--orange);
  font-size: 0.7rem;
}

.contact-panel__actions {
  display: grid;
  gap: 10px;
  align-content: center;
}

.contact-panel__actions .button {
  width: 100%;
}

.contact-panel__actions small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.72rem;
  text-align: center;
}

@media (max-width: 860px) {
  .contact-panel {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 26px 22px;
  }
}

.footer-brand > img {
  width: 165px;
  margin-bottom: 16px;
}

@media (min-width: 1025px) {
  .footer-brand > img {
    width: 214.5px;
  }
}

/* ---- FOOTER BRAND — STACKED DESKTOP LOCKUP --------------------
   Desktop only (>=1025px) swaps the single combined logo for the
   symbol sitting centred above the wordmark. Tablet and mobile keep
   the original combined lockup, untouched.

   This stylesheet is shared by five pages, so every rule that hides
   or moves the existing logo is gated on :has(.footer-brand__stack).
   Pages without the stacked markup are therefore untouched. */
.footer-brand__stack {
  display: none;
}

@media (min-width: 1025px) {
  .footer-brand:has(.footer-brand__stack) > img {
    display: none;
  }

  .footer-brand__stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 260px;
    margin-bottom: 20px;
  }

  .footer-brand__stack picture {
    display: block;
  }

  .footer-brand__stack img {
    width: 100%;
    height: auto;
    margin: 0;
  }

  .footer-brand__symbol {
    width: 97.2px; /* 108px − 10% */
  }

  .footer-brand__wordmark {
    width: 208px; /* 260px − 20% */
  }

  /* Store badges share the lockup's 260px column and centre inside
     it, so they sit on the same axis as the symbol and wordmark. */
  .footer-brand:has(.footer-brand__stack) .footer-store-row {
    width: 260px;
    margin-top: 0;
    justify-content: center;
  }
}

.footer-store-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}

.footer-store-badge {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  padding: 4px;
  overflow: hidden;
  border: 1px solid rgba(255, 183, 62, 0.45);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.055);
}

.footer-store-badge img {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: contain;
}

.footer-contact-button {
  display: block;
  padding: 6px 0;
  border: 0;
  color: rgba(255, 253, 248, 0.62);
  background: none;
  font: inherit;
  cursor: pointer;
}

.footer-contact-button:hover {
  color: var(--white);
}

/* Inline, non-overlay enquiry experience. */
.enquiry-drawer {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  overflow: hidden;
  color: var(--ink);
  background: var(--paper-2);
  transition: grid-template-rows 0.45s ease, opacity 0.3s ease;
}

.enquiry-drawer.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}

.enquiry-drawer__clip {
  min-height: 0;
  overflow: hidden;
}

.enquiry-drawer__panel {
  margin-block: 34px;
  padding: clamp(24px, 4vw, 52px);
  border: 1px solid var(--line);
  border-radius: 30px;
  background: rgba(255, 254, 249, 0.94);
  box-shadow: 0 24px 70px rgba(21, 17, 8, 0.1);
}

.enquiry-drawer__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.enquiry-drawer__head h2 {
  margin-top: 8px;
  font-size: clamp(2rem, 5vw, 4rem);
}

.enquiry-drawer__head p {
  max-width: 58ch;
  margin-top: 12px;
  color: var(--muted);
}

.enquiry-drawer__close {
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  font-size: 1.2rem;
  cursor: pointer;
}

.enquiry-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.enquiry-field {
  display: grid;
  gap: 8px;
}

.enquiry-field--wide,
.enquiry-form__actions {
  grid-column: 1 / -1;
}

.enquiry-field span {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.enquiry-field input,
.enquiry-field select,
.enquiry-field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 15px;
  color: var(--ink);
  background: var(--white);
  font: inherit;
}

.enquiry-field textarea {
  min-height: 140px;
  resize: vertical;
}

.enquiry-field input:focus,
.enquiry-field select:focus,
.enquiry-field textarea:focus {
  outline: 3px solid rgba(255, 138, 0, 0.2);
  border-color: var(--orange);
}

.enquiry-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.enquiry-form__status {
  color: var(--muted);
  font-size: 0.78rem;
}

.page-hero .notice {
  border-color: rgba(255, 210, 112, 0.5);
  color: #fff8e7;
  background: rgba(255, 138, 0, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.footer-brand p {
  max-width: 34ch;
  color: rgba(255, 253, 248, 0.56);
  font-size: 0.82rem;
}

.footer-columns h2 {
  margin-bottom: 16px;
  color: var(--gold);
  font-size: 0.65rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.footer-columns a,
.footer-columns address {
  display: block;
  padding: 6px 0;
  color: rgba(255, 253, 248, 0.62);
  font-size: 0.8rem;
  font-style: normal;
}

.footer-columns a:hover {
  color: var(--white);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  gap: 12px;
  padding: 20px 0 26px;
  border-top: 1px solid var(--line-dark);
  color: rgba(255, 253, 248, 0.4);
  font-size: 0.7rem;
}

.footer-copyright {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.footer-copyright__mark {
  display: block;
  width: 18px;
  height: auto;
}

@media (max-width: 980px) {
  .page-nav {
    grid-template-columns: auto 1fr auto;
  }

  .page-nav__home {
    display: none;
  }

  .page-menu-trigger {
    display: block;
  }

  .page-hero__grid,
  .section-heading,
  .feature-panel {
    grid-template-columns: 1fr;
  }

  .page-hero {
    min-height: 620px;
  }

  .page-hero__aside {
    max-width: 620px;
  }

  .feature-panel__visual {
    min-height: 380px;
  }

  .footer-columns {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  :root {
    --shell: min(1180px, calc(100% - 24px));
  }

  .page-header {
    top: 10px;
  }

  .page-nav__pill {
    min-height: 64px;
    border-radius: 20px;
  }

  .page-brand {
    padding: 8px 12px;
  }

  .page-brand img {
    width: 48px;
  }

  .page-nav {
    gap: 8px;
  }

  .page-nav__rotator {
    width: 100%;
    padding: 8px 9px 8px 12px;
  }

  .page-nav__rotator-link {
    flex: 1 1 auto;
  }

  .page-nav__rotator-copy {
    min-width: 0;
  }

  .page-nav__rotator-item {
    max-width: 18ch;
  }

  .page-nav__store {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  .page-brand span {
    display: none;
  }

  .page-nav__actions {
    padding: 8px;
  }

  .page-menu-trigger {
    width: 46px;
    height: 46px;
  }

  .enquiry-form {
    grid-template-columns: 1fr;
  }

  .enquiry-field--wide,
  .enquiry-form__actions {
    grid-column: auto;
  }

  .page-menu {
    top: calc(env(safe-area-inset-top) + 84px);
    right: 12px;
    max-height: calc(100dvh - 98px);
    padding: 16px;
    border-radius: 24px;
  }

  .page-menu--homepage {
    top: calc(env(safe-area-inset-top) + 84px);
    right: 12px;
    width: min(280px, calc(100vw - 24px));
    padding: 16px;
    border-radius: 24px;
  }

  .page-menu__grid {
    gap: 7px;
  }

  .page-menu__link {
    padding: 13px;
  }

  .page-hero {
    min-height: 620px;
    padding: 142px 0 64px;
  }

  .page-hero__grid {
    gap: 30px;
  }

  .page-hero h1 {
    font-size: clamp(3rem, 15vw, 5.4rem);
  }

  .page-hero__aside {
    padding: 22px;
  }

  .page-section {
    padding: 64px 0;
  }

  .section-heading {
    gap: 18px;
    margin-bottom: 28px;
  }

  .card-grid {
    grid-template-columns: 1fr;
  }

  .card {
    min-height: 0;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    column-gap: 14px;
    padding: 22px;
  }

  .card__number {
    grid-row: 1 / span 2;
    margin: 0;
  }

  .card h3,
  .card p {
    grid-column: 2;
  }

  .feature-panel {
    border-radius: 26px;
  }

  .feature-panel__copy {
    padding: 30px 22px;
  }

  .feature-panel__visual {
    min-height: 280px;
    padding: 24px;
  }

  .feature-panel__visual img {
    max-height: 220px;
  }

  .feature-panel__visual::before {
    width: 230px;
    height: 230px;
  }

  .feature-panel__visual::after {
    width: 150px;
    height: 150px;
  }

  .split-list,
  .legal-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .split-list h2,
  .legal-nav {
    position: static;
  }

  .legal-nav {
    display: flex;
    overflow-x: auto;
    padding: 10px;
    scrollbar-width: none;
  }

  .legal-nav::-webkit-scrollbar {
    display: none;
  }

  .legal-nav a {
    flex: none;
  }

  .footer-callout {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 42px;
    padding: 26px 22px;
  }

  .footer-columns {
    grid-template-columns: 1fr 1fr;
    gap: 28px 18px;
    width: min(100%, 380px);
    margin-inline: auto;
    padding-inline: 12px;
    box-sizing: border-box;
  }

  .footer-brand {
    display: none;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 30px;
    text-align: center;
  }
}

/* Match the approved homepage footer only inside the established iPad band:
   fluid desktop lockup at left, then a two-by-two navigation grid at right. */
@media (min-width: 761px) and (max-width: 1024px) {
  .footer-columns {
    grid-template-columns:
      clamp(190px, 25vw, 260px)
      minmax(0, 1fr)
      minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: clamp(18px, 4vw, 40px);
    row-gap: 36px;
    padding-inline: clamp(20px, 4vw, 48px);
    box-sizing: border-box;
  }

  .footer-brand {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: start;
    text-align: center;
  }

  .footer-brand:has(.footer-brand__stack) > img {
    display: none;
  }

  .footer-brand__stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 260px;
    margin-bottom: 20px;
  }

  .footer-brand__stack picture {
    display: block;
  }

  .footer-brand__stack img {
    width: 100%;
    height: auto;
    margin: 0;
  }

  .footer-brand__symbol {
    width: clamp(82px, 10vw, 97.2px);
  }

  .footer-brand__wordmark {
    width: min(80%, 208px);
  }

  .footer-brand:has(.footer-brand__stack) .footer-store-row {
    width: 100%;
    margin-top: 0;
    justify-content: center;
  }

  .footer-columns > :nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }

  .footer-columns > :nth-child(3) {
    grid-column: 3;
    grid-row: 1;
  }

  .footer-columns > :nth-child(4) {
    grid-column: 2;
    grid-row: 2;
  }

  .footer-columns > :nth-child(5) {
    grid-column: 3;
    grid-row: 2;
  }

  .footer-bottom {
    justify-content: center;
    text-align: center;
  }

}

@media (max-width: 374px) {
  .page-nav__stores {
    display: none;
  }

  .page-nav__rotator-item {
    max-width: 12ch;
  }
}

@media (max-width: 380px) {
  .page-menu__grid,
  .page-menu__footer {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Live word counter on the contact enquiry message.
   Turns red past 350 — the point submit_enquiry.php rejects. */
.enquiry-wordcount {
  display: block;
  margin-top: 6px;
  text-align: right;
  font-size: 11px;
  opacity: 0.7;
}
.enquiry-wordcount.is-over {
  color: #ff6b6b;
  font-weight: 700;
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════
   CONTACT ENQUIRY — SUBMIT SPINNER, BUSY BUTTON, SUCCESS OVERLAY
   ═══════════════════════════════════════════════════════════════════════
   The homepage booking deck already answers a submit with a spinner held
   for a minimum duration (home.css `.btn-spinner`, home.js `holdSpinner`).
   The information pages load pages.css only, so none of that reaches the
   contact drawer — it had a button that swapped to the word "Sending…"
   and nothing else. These rules bring the same language here and take it
   further: the button spins, the status line narrates the stage, and a
   real overlay confirms the send instead of the form silently vanishing.
   ═══════════════════════════════════════════════════════════════════════ */

/* The overlay is positioned against the panel, so the panel has to be the
   containing block. Declared again here rather than edited above so the
   original block stays as the layout authority. */
.enquiry-drawer__panel {
  position: relative;
}

/* Same geometry and timing as home.css `.btn-spinner` so a customer who
   books on the homepage and writes here sees one product, not two. The
   ring is dark because it rides on `.button--gold`, whose text is #241b06. */
.btn-spinner {
  display: inline-block;
  flex: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(36, 27, 6, 0.28);
  border-top-color: rgba(36, 27, 6, 0.85);
  border-radius: 50%;
  animation: btn-spin 700ms linear infinite;
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

/* The label is replaced by the spinner, so without a floor the button
   collapses to a circle and the actions row jumps. Holds its footprint. */
.enquiry-form__actions .button[aria-busy="true"] {
  min-width: 170px;
  cursor: progress;
}

/* Stage text while the request is in flight, and the failure colour.
   `is-sent` is left to the overlay — the status line goes quiet on
   success because the overlay is now carrying that message. */
.enquiry-form__status.is-working {
  color: var(--ink);
  font-weight: 600;
}

.enquiry-form__status.is-error {
  color: #b3261e;
  font-weight: 600;
}

/* ── Success overlay ──────────────────────────────────────────────────
   Covers the panel rather than replacing it: the customer still sees the
   shape of what they filled in behind the confirmation, which reads as
   "that was received", where an empty space reads as "that was lost".
   `visibility` is in the transition so the hidden overlay cannot be
   tabbed into or clicked through. */
.enquiry-overlay {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(24px, 5vw, 56px);
  border-radius: 30px;
  background: rgba(255, 254, 249, 0.965);
  opacity: 0;
  visibility: hidden;
  /* Visibility is switched at a boundary, never interpolated. Listing it
     as a normal transitioned property makes it a discrete value that
     flips at 50% progress, so the confirmation stayed unfocusable for the
     first ~175ms and never became focusable at all in a throttled or
     backgrounded tab, where the transition does not advance. Hiding
     delays the switch until after the fade; showing does it at once. */
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.enquiry-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s ease, visibility 0s linear 0s;
}

.enquiry-overlay__card {
  max-width: 46ch;
  text-align: center;
}

.enquiry-overlay__mark {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 22px;
  border-radius: 50%;
  color: var(--white);
  background: var(--green);
  box-shadow: 0 14px 34px rgba(39, 201, 132, 0.32);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  animation: enquiry-mark-in 0.45s var(--ease) both;
}

@keyframes enquiry-mark-in {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.enquiry-overlay__card h3 {
  margin: 0 0 12px;
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  line-height: 1.15;
}

.enquiry-overlay__card p {
  margin: 0 auto 10px;
  max-width: 42ch;
  color: var(--muted);
}

.enquiry-overlay__card .button {
  margin-top: 20px;
}

/* The panel is the scroll container on a short screen; keep the
   confirmation reachable rather than clipped. */
@media (max-height: 620px) {
  .enquiry-overlay {
    align-items: start;
    overflow-y: auto;
  }
}

/* The blanket rule near the top of this file kills every animation with
   `animation-duration: 0.01ms !important`, which would freeze the spinner
   into a static ring — the one state that says "nothing is happening" at
   exactly the moment something is. Restored at a slow, non-vestibular
   rate, and the mark simply appears rather than springing in. */
@media (prefers-reduced-motion: reduce) {
  .btn-spinner {
    animation-duration: 2s !important;
    animation-iteration-count: infinite !important;
  }

  .enquiry-overlay__mark {
    animation: none !important;
  }
}