/* ==========================================================================
   AYAN VACATIONS — Bonding Travel Lovers
   Design system + site styles
   Brand: Navy #2E3B5D · Green #41A44A
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --navy: #2e3b5d;
  --navy-700: #253150;
  --navy-800: #1b2540;
  --navy-900: #131b31;
  --navy-950: #0d1424;
  --green: #41a44a;
  --green-600: #379040;
  --green-700: #2c7734;
  --green-100: #e6f3e7;

  /* Neutrals — warm, so the palette never reads cold or default */
  --cream: #f7f5f0;
  --cream-deep: #efece4;
  --paper: #ffffff;
  --ink: #171e30;
  --ink-soft: #4a5470;
  --ink-mute: #5f6880;

  /* Lines & shadows */
  --line: rgba(46, 59, 93, 0.14);
  --line-soft: rgba(46, 59, 93, 0.08);
  --line-light: rgba(255, 255, 255, 0.16);
  --shadow-sm: 0 2px 10px rgba(19, 27, 49, 0.05);
  --shadow-md: 0 14px 40px -18px rgba(19, 27, 49, 0.3);
  --shadow-lg: 0 30px 70px -30px rgba(19, 27, 49, 0.45);

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia,
    "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* Rhythm */
  --shell: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4.5rem, 9vw, 8.5rem);
  --radius-sm: 10px;
  /* chevron used between itinerary stops; a mask so it takes currentColor */
  --arrow-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'%3E%3Cpath d='M0 3.4h11.2L8.6.8 9.4 0 13.4 4 9.4 8l-.8-.8 2.6-2.6H0z' fill='%23000'/%3E%3C/svg%3E");
  --radius: 18px;
  --radius-lg: 28px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --header-h: 130px;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.68;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked {
  overflow: hidden;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

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

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--green);
  color: #fff;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 999;
  background: var(--navy);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: top 0.2s var(--ease);
}

.skip-link:focus {
  top: 0;
}

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

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell--wide {
  max-width: 1420px;
}

.section {
  padding-block: var(--section-y);
  position: relative;
}

.section--tight {
  padding-block: clamp(3rem, 6vw, 5.5rem);
}

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

.section--deep {
  background: var(--navy-800);
  color: #fff;
}

.section--cream-deep {
  background: var(--cream-deep);
}

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */
.display {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: "opsz" 96, "SOFT" 0, "WONK" 0;
  line-height: 1.04;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.display--xl {
  font-size: clamp(2.75rem, 6.4vw, 5.1rem);
}

.display--lg {
  font-size: clamp(2.1rem, 4.3vw, 3.5rem);
}

.display--md {
  font-size: clamp(1.65rem, 2.9vw, 2.4rem);
  line-height: 1.14;
}

.display em {
  font-style: italic;
  font-variation-settings: "opsz" 96, "SOFT" 40, "WONK" 1;
  /* --green is only 2.68:1 on cream-deep, under the 3.0 that large text needs.
     --green-600 reaches 3.40 there and stays closer to the brand green than
     the deeper button shade. These accent words never render below 33px, so
     the large-text threshold is the one that applies. */
  color: var(--green-600);
}

.section--deep .display em,
.hero .display em,
.page-banner .display em,
.cta-band .display em {
  color: #7ed184;
}

/* Eyebrow — numbered, hairline, with the brand arc */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-700);
  margin-bottom: 1.15rem;
}

/* Every dark surface — deep sections, the hero, page banners and the CTA band
   — needs the light green, or the eyebrow drops below 4.5:1. */
.section--deep .eyebrow,
.hero .eyebrow,
.page-banner .eyebrow,
.cta-band .eyebrow {
  color: #86d18d;
}

.eyebrow::before {
  content: "";
  width: 30px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

/* Set apart by the serif face rather than by opacity, which would push it
   under the contrast floor. */
.eyebrow__num {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 20;
  letter-spacing: 0.06em;
}

.lede {
  font-size: clamp(1.075rem, 1.6vw, 1.25rem);
  line-height: 1.62;
  color: var(--ink-soft);
  max-width: 62ch;
}

.section--deep .lede,
.cta-band .lede {
  color: rgba(255, 255, 255, 0.76);
}

.section--deep .display,
.cta-band .display,
.page-banner .display {
  color: #fff;
}

.body-copy p + p {
  margin-top: 1.15rem;
}

.body-copy {
  color: var(--ink-soft);
  max-width: 66ch;
}

.section-head {
  max-width: 720px;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section-head--split {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
}

/* The brand arc — echoes the swoosh in the Ayan Vacations logo */
.arc {
  display: block;
  width: 100%;
  height: auto;
  color: var(--green);
  overflow: visible;
}

.arc path {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  transition: stroke-dashoffset 0.9s var(--ease-out);
}

.is-visible .arc path,
.arc--static path {
  stroke-dashoffset: 0;
}

.underline-arc {
  position: relative;
  display: inline-block;
}

.underline-arc svg {
  position: absolute;
  left: -2%;
  bottom: -0.34em;
  width: 104%;
  height: 0.34em;
  color: var(--green);
  overflow: visible;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--navy);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
    background-color 0.35s var(--ease), color 0.35s var(--ease),
    border-color 0.35s var(--ease);
}

/* Filled green surfaces use the deeper green: white on the bright brand green
   is only 3.2:1, which fails AA for button labels. The bright green stays for
   icons, rules, arcs and other non-text accents. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--green-700);
  transform: translateY(101%);
  transition: transform 0.45s var(--ease-out);
}

.btn:hover::before,
.btn:focus-visible::before {
  transform: translateY(0);
}

.btn:hover,
.btn:focus-visible {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn:active {
  transform: translateY(0);
}

.btn__ico {
  width: 17px;
  height: 17px;
  flex: none;
  transition: transform 0.4s var(--ease-out);
}

.btn:hover .btn__ico {
  transform: translateX(3px);
}

.btn--green {
  --btn-bg: var(--green-700);
}

.btn--green::before {
  background: var(--navy);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--line);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: transparent;
}

.btn--light {
  --btn-bg: rgba(255, 255, 255, 0.1);
  --btn-fg: #fff;
  border-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(6px);
}

.btn--light:hover,
.btn--light:focus-visible {
  border-color: transparent;
}

.btn--sm {
  padding: 0.68rem 1.2rem;
  font-size: 0.875rem;
}

.btn--lg {
  padding: 1.08rem 2rem;
  font-size: 1rem;
}

.btn--block {
  width: 100%;
}

/* Quiet text link with an animated rule */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--navy);
  padding-bottom: 3px;
  background-image: linear-gradient(var(--green), var(--green));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size 0.45s var(--ease-out), color 0.3s var(--ease);
}

.link-arrow:hover,
.link-arrow:focus-visible {
  background-size: 100% 2px;
  color: var(--green-700);
}

.link-arrow svg {
  width: 15px;
  height: 15px;
  transition: transform 0.4s var(--ease-out);
}

.link-arrow:hover svg {
  transform: translateX(4px);
}

.section--deep .link-arrow {
  color: #fff;
}

.section--deep .link-arrow:hover {
  color: #86d18d;
}

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  padding-block: 18px;
  transition: padding 0.4s var(--ease);
}

.site-header.is-stuck {
  padding-block: 10px;
}

.nav-shell {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 10px 10px 10px 22px;
  border-radius: 999px;
  /* Near-solid white. At 88% over the dark hero this composited to roughly
     #DEDEE0, which dulled the whole lockup — the logo can only look as bright
     as the plate behind it. */
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 18px 44px -20px rgba(13, 20, 36, 0.5),
    0 2px 8px -3px rgba(13, 20, 36, 0.16);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  transition: background-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.site-header.is-stuck .nav-shell {
  background: #fff;
  box-shadow: 0 14px 38px -18px rgba(13, 20, 36, 0.5),
    0 2px 8px -3px rgba(13, 20, 36, 0.14);
}

/* Brand lockup: the complete logo, laid out horizontally so the wordmark and
   tagline stay legible in a nav bar. The supplied lockup is stacked and nearly
   square, which at header height would shrink the lettering to a few pixels. */
.brand {
  display: flex;
  align-items: center;
  flex: none;
  margin-right: auto;
}

.brand__mark {
  height: 72px;
  width: auto;
  display: block;
  flex: none;
  transition: height 0.4s var(--ease), transform 0.5s var(--ease-out),
    filter 0.4s var(--ease);
  filter: drop-shadow(0 2px 4px rgba(46, 59, 93, 0.18));
}

.brand:hover .brand__mark,
.brand:focus-visible .brand__mark {
  transform: rotate(-4deg) scale(1.05);
  filter: drop-shadow(0 5px 10px rgba(46, 59, 93, 0.28));
}

.site-header.is-stuck .brand__mark {
  height: 58px;
}

.brand__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 0.9rem;
  transition: margin 0.4s var(--ease);
}

/* Name in the site's display serif, set plainly — the two brand colours are
   the only decoration, mirroring how the logo splits the words. */
.brand__name {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 96;
  font-weight: 600;
  font-size: 1.95rem;
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--navy);
  white-space: nowrap;
  transition: font-size 0.4s var(--ease);
}

.brand__name span {
  color: var(--green-700);
}

.brand__tag {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.205em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
  margin-top: 0.42rem;
  transition: font-size 0.4s var(--ease);
}

.site-header.is-stuck .brand__name {
  font-size: 1.62rem;
}

.site-header.is-stuck .brand__tag {
  font-size: 0.66rem;
}

.nav {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.nav a {
  position: relative;
  /* Continuous, not stepped: 15.2px of side padding at 1250px and wider,
     easing down to 5px at the burger breakpoint. Six nav items left no room
     for the old per-tier steps, each of which wrapped just above its own
     breakpoint. */
  padding: 0.55rem clamp(0.31rem, 3.79vw - 2.01rem, 0.95rem);
  border-radius: 999px;
  font-size: 0.9125rem;
  font-weight: 500;
  color: var(--ink-soft);
  transition: color 0.3s var(--ease), background-color 0.3s var(--ease);
}

.nav a:hover {
  color: var(--navy);
  background: rgba(46, 59, 93, 0.06);
}

.nav a[aria-current="page"] {
  color: var(--navy);
  font-weight: 600;
}

.nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
  transform: translateX(-50%);
}

/* ---- Tours dropdown -------------------------------------------------
   "Tours" is a real link to the overview page AND the opener for a menu of
   the nine tour types. Those are two different jobs, so they are two
   different controls: the link navigates, the chevron button opens. That
   keeps it usable by keyboard and on touch, where there is no hover. */
.nav-drop {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-drop__toggle {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-left: -0.55rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.3s var(--ease), background-color 0.3s var(--ease),
    transform 0.3s var(--ease);
}

.nav-drop__toggle svg {
  width: 13px;
  height: 13px;
  pointer-events: none;
}

.nav-drop__toggle:hover,
.nav-drop__toggle:focus-visible {
  color: var(--navy);
  background: rgba(46, 59, 93, 0.08);
}

.nav-drop__toggle[aria-expanded="true"] {
  color: var(--navy);
  transform: rotate(180deg);
}

.nav-drop__menu {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 0;
  z-index: 60;
  min-width: 17.5rem;
  padding: 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: 1px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease-out),
    visibility 0s 0.22s;
}

.nav-drop__menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease-out),
    visibility 0s;
}

/* The panel is wider than the nav item it hangs from, so keep it from
   running off the right edge of a narrow desktop window. */
.nav-drop:last-of-type .nav-drop__menu {
  left: auto;
  right: 0;
}

.nav-drop__menu a {
  display: block;
  padding: 0.6rem 0.85rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink-soft);
  white-space: nowrap;
}

.nav-drop__menu a:hover,
.nav-drop__menu a:focus-visible {
  color: var(--navy);
  background: rgba(46, 59, 93, 0.06);
}

.nav-drop__menu a[aria-current="page"] {
  color: var(--navy);
  font-weight: 600;
  background: var(--green-100);
}

/* ---- Tours group inside the mobile drawer ---- */
.drawer__sub {
  display: grid;
  padding: 0.2rem 0 0.9rem 2.4rem;
  border-bottom: 1px solid var(--line-light);
}

.drawer__sub a {
  padding: 0.62rem 0;
  border: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.72);
}

.drawer__sub a:hover,
.drawer__sub a:focus-visible,
.drawer__sub a[aria-current="page"] {
  color: #fff;
}

.drawer__sub a[aria-current="page"] {
  font-weight: 600;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: none;
}

/* Display only — the phone numbers are not click-to-call links anywhere on
   the site, so nothing here should suggest the number is interactive. */
.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9125rem;
  font-weight: 600;
  color: var(--navy);
  padding: 0.5rem 0.4rem;
  white-space: nowrap;
}

.nav-phone svg {
  width: 16px;
  height: 16px;
  color: var(--green);
}

/* Burger */
.burger {
  display: none;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  padding: 0;
  place-items: center;
}

.burger span {
  display: block;
  width: 19px;
  height: 1.6px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform 0.4s var(--ease-out), opacity 0.25s var(--ease);
}

.burger span + span {
  margin-top: 5px;
}

.burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.6px) rotate(45deg);
}

.burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.6px) rotate(-45deg);
}

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: var(--navy-900);
  color: #fff;
  padding: calc(var(--header-h) + 24px) var(--gutter) 2.5rem;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  /* visibility is a discrete property: transitioning it over a duration makes
     it flip halfway through, so the panel is still `hidden` at the moment the
     open handler tries to move focus into it. Switch it instantly on open and
     delay it only on close, so the fade-out is still seen. */
  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease-out),
    visibility 0s 0.4s;
  overflow-y: auto;
}

.drawer.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease-out),
    visibility 0s;
}

.drawer__nav {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line-light);
}

.drawer__nav a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line-light);
  font-family: var(--font-display);
  font-variation-settings: "opsz" 60;
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease-out),
    color 0.3s var(--ease);
}

.drawer.is-open .drawer__nav a {
  opacity: 1;
  transform: translateY(0);
}

.drawer__nav a:nth-child(1) { transition-delay: 0.08s; }
.drawer__nav a:nth-child(2) { transition-delay: 0.14s; }
.drawer__nav a:nth-child(3) { transition-delay: 0.2s; }
.drawer__nav a:nth-child(4) { transition-delay: 0.26s; }

.drawer__nav a:hover,
.drawer__nav a[aria-current="page"] {
  color: #86d18d;
}

.drawer__nav i {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.4);
}

.drawer__foot {
  margin-top: auto;
  padding-top: 2.25rem;
  display: grid;
  gap: 1rem;
}

.drawer__phones {
  display: grid;
  gap: 0.35rem;
  font-size: 1.05rem;
  font-weight: 600;
}

.drawer__phones small {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 0.35rem;
}

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(100svh, 900px);
  display: flex;
  align-items: flex-end;
  padding-top: calc(var(--header-h) + 3rem);
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
  overflow: hidden;
  background: var(--navy-950);
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -3;
  overflow: hidden;
}

/* The supplied hero artwork is a light silver brand plate. Desaturating it and
   multiplying navy over the top turns it into a deep, embossed navy backdrop —
   the map engraving and objects survive as texture, and white type sits clean
   on top of it. */
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
  filter: grayscale(1) contrast(1.08) brightness(1.1);
  transform: scale(1.08);
  animation: heroDrift 26s ease-in-out infinite alternate;
}

@keyframes heroDrift {
  from {
    transform: scale(1.08) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.16) translate3d(-1.6%, -1.2%, 0);
  }
}

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--navy);
  mix-blend-mode: multiply;
  opacity: 0.76;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(
      98deg,
      rgba(9, 14, 27, 0.82) 0%,
      rgba(9, 14, 27, 0.62) 34%,
      rgba(9, 14, 27, 0.22) 64%,
      rgba(9, 14, 27, 0.46) 100%
    ),
    radial-gradient(
      110% 80% at 50% 100%,
      rgba(9, 14, 27, 0.6) 0%,
      rgba(9, 14, 27, 0) 62%
    );
}

/* Faint dashed flight route drawn over the hero */
.hero__route {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.4;
}

.hero__route path {
  fill: none;
  stroke: #7ed184;
  stroke-width: 1.4;
  stroke-dasharray: 7 9;
  animation: routeFlow 3.4s linear infinite;
}

@keyframes routeFlow {
  to {
    stroke-dashoffset: -32;
  }
}

.hero__inner {
  position: relative;
  width: 100%;
  color: #fff;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: end;
}

.hero h1 {
  color: #fff;
  margin-bottom: 1.5rem;
  max-width: 15ch;
}

.hero__lede {
  color: rgba(255, 255, 255, 0.8);
  font-size: clamp(1.0625rem, 1.5vw, 1.2rem);
  max-width: 48ch;
  margin-bottom: 2.25rem;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

/* Facts rail on the right of the hero */
.hero__facts {
  display: grid;
  gap: 1px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hero__fact {
  background: rgba(13, 20, 36, 0.42);
  padding: 1.15rem 1.35rem;
}

.hero__fact dt {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0.3rem;
}

.hero__fact dd {
  margin: 0;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 60;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.hero__fact dd span {
  color: #86d18d;
}

.hero__scroll {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 2.75rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.3s var(--ease);
}

.hero__scroll:hover {
  color: #fff;
}

.hero__scroll i {
  display: block;
  width: 1px;
  height: 34px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.55),
    rgba(255, 255, 255, 0)
  );
  position: relative;
  overflow: hidden;
}

.hero__scroll i::after {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 1px;
  height: 12px;
  background: #86d18d;
  animation: scrollHint 2.1s var(--ease) infinite;
}

@keyframes scrollHint {
  0% { transform: translateY(-14px); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: translateY(34px); opacity: 0; }
}

/* --------------------------------------------------------------------------
   8. Marquee band
   -------------------------------------------------------------------------- */
.marquee {
  background: var(--navy);
  color: #fff;
  padding-block: 1.15rem;
  overflow: hidden;
  position: relative;
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marqueeSlide 38s linear infinite;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

@keyframes marqueeSlide {
  to {
    transform: translateX(-50%);
  }
}

.marquee__group {
  display: flex;
  align-items: center;
  flex: none;
}

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 1.6rem;
  padding-inline: 1.6rem;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 60;
  font-size: clamp(1.05rem, 1.8vw, 1.45rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.marquee__item::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  flex: none;
}

/* --------------------------------------------------------------------------
   9. Intro / brand story
   -------------------------------------------------------------------------- */
.intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}

.intro__copy h2 {
  margin-bottom: 1.6rem;
}

.intro__actions {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
}

/* Decorative route panel — replaces photography with brand-derived line art */
.route-panel {
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--navy-800);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  color: #fff;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.route-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.11) 1px,
    transparent 1px
  );
  background-size: 22px 22px;
  opacity: 0.75;
}

.route-panel__art {
  position: relative;
  width: 100%;
  height: auto;
  overflow: visible;
}

.route-panel__art .globe {
  fill: none;
  stroke: rgba(255, 255, 255, 0.28);
  stroke-width: 1;
}

.route-panel__art .globe--bold {
  stroke: rgba(255, 255, 255, 0.5);
}

.route-panel__art .route {
  fill: none;
  stroke: var(--green);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 480;
  stroke-dashoffset: 480;
}

.is-visible .route-panel__art .route {
  animation: drawRoute 2.2s var(--ease-out) forwards;
}

@keyframes drawRoute {
  to {
    stroke-dashoffset: 0;
  }
}

.route-panel__art .pin {
  fill: #fff;
  opacity: 0;
  animation: none;
}

.is-visible .route-panel__art .pin {
  animation: pinPop 0.5s var(--ease-out) forwards;
}

.is-visible .route-panel__art .pin:nth-of-type(1) { animation-delay: 0.5s; }
.is-visible .route-panel__art .pin:nth-of-type(2) { animation-delay: 1.1s; }
.is-visible .route-panel__art .pin:nth-of-type(3) { animation-delay: 1.7s; }

@keyframes pinPop {
  from { opacity: 0; transform: scale(0.4); }
  to { opacity: 1; transform: scale(1); }
}

.route-panel__art .plane {
  fill: #86d18d;
}

.route-panel__caption {
  position: relative;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-light);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.route-panel__caption div strong {
  display: block;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 60;
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 0.2rem;
}

.route-panel__caption div span {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.45;
  display: block;
}

/* --------------------------------------------------------------------------
   10. Cards & grids
   -------------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: clamp(1rem, 1.6vw, 1.5rem);
}

.grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease),
    border-color 0.4s var(--ease);
}

.card::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--ease-out);
}

.card:hover,
.card:focus-within {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}

.card:hover::after,
.card:focus-within::after {
  transform: scaleX(1);
}

.card__ico {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--green-100);
  color: var(--green-700);
  margin-bottom: 1.35rem;
  flex: none;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease),
    transform 0.5s var(--ease-out);
}

.card__ico svg {
  width: 25px;
  height: 25px;
}

.card:hover .card__ico {
  background: var(--navy);
  color: #fff;
  transform: translateY(-2px) rotate(-4deg);
}

.card h3 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 40;
  font-size: 1.235rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin-bottom: 0.6rem;
}

.card p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Live departure count on the Group Departures landing cards. */
.card__meta {
  margin-top: -0.35rem;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 20;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-700);
}

/* ---- card with a photograph ----
   Used by the Group Departures landing cards, the seven service cards on the
   home and Tours pages, and the compact "other services" tiles at the foot of
   each tour page. Same shape in every case: a 16:10 photograph across the top
   of an ordinary light card, with the copy below it. */
.card--photo {
  position: relative;
  overflow: hidden;
  /* the band runs to the card edges; the copy carries the padding */
  padding: 0;
}

.card__panel {
  /* relative, so .card__num anchors to the copy rather than floating over
     the photograph where it has no guaranteed contrast */
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.5rem, 2.4vw, 2rem);
}

/* The compact tiles carry only an icon and a title, so they need less room
   below the photograph than a card with a paragraph does. */
.card--photo .card__panel:not(:has(p)) {
  padding-block: 1.15rem;
}

.card__bg {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--cream-deep);
  transition: transform 0.7s var(--ease-out);
}

.card--photo:hover .card__bg {
  transform: scale(1.05);
}

.card__num {
  position: absolute;
  top: 1.35rem;
  right: 1.5rem;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 30;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
}

/* Values — on the navy band */
.value-card {
  padding: clamp(1.4rem, 2.2vw, 1.9rem);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
  transition: background-color 0.4s var(--ease), transform 0.5s var(--ease-out),
    border-color 0.4s var(--ease);
}

.value-card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(134, 209, 141, 0.45);
  transform: translateY(-4px);
}

.value-card__num {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 30;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #86d18d;
  display: block;
  margin-bottom: 0.9rem;
}

.value-card h3 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 40;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.28;
  margin-bottom: 0.5rem;
}

.value-card p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
}

/* --------------------------------------------------------------------------
   11. Process
   -------------------------------------------------------------------------- */
.process {
  position: relative;
}

.process__track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
}

.process__line {
  position: absolute;
  top: 27px;
  left: 6%;
  width: 88%;
  height: 2px;
  pointer-events: none;
}

.process__line path {
  fill: none;
  stroke: var(--navy);
  stroke-width: 1.5;
  stroke-dasharray: 6 7;
  opacity: 0.28;
}

.step {
  position: relative;
  text-align: left;
}

.step__dot {
  position: relative;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cream);
  border: 1.5px solid var(--line);
  font-family: var(--font-display);
  font-variation-settings: "opsz" 40;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 1.35rem;
  transition: background-color 0.45s var(--ease), color 0.45s var(--ease),
    border-color 0.45s var(--ease), transform 0.5s var(--ease-out);
}

.section--paper .step__dot {
  background: var(--paper);
}

.step:hover .step__dot {
  background: var(--green-700);
  border-color: var(--green-700);
  color: #fff;
  transform: scale(1.06);
}

.step h3 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 40;
  font-size: 1.185rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 0.5rem;
}

.step p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   12. Allied services list
   -------------------------------------------------------------------------- */
.allied {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
}

.allied__item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.35rem 1.4rem;
  background: var(--paper);
  font-size: 0.95rem;
  font-weight: 500;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}

.section--cream-deep .allied__item {
  background: var(--cream);
}

.allied__item svg {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--green-700);
  transition: transform 0.45s var(--ease-out), color 0.35s var(--ease);
}

.allied__item:hover {
  background: var(--navy);
  color: #fff;
}

.allied__item:hover svg {
  color: #86d18d;
  transform: translateY(-2px) scale(1.08);
}

/* --------------------------------------------------------------------------
   13. Connect / proof
   -------------------------------------------------------------------------- */
.connect {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 1.6vw, 1.5rem);
}

.connect__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.6rem, 2.6vw, 2.1rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
  transition: transform 0.5s var(--ease-out), box-shadow 0.45s var(--ease),
    border-color 0.4s var(--ease);
}

.connect__card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}

.connect__badge {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--navy);
  color: #fff;
  transition: background-color 0.4s var(--ease);
}

.connect__badge svg {
  width: 22px;
  height: 22px;
}

.connect__card:hover .connect__badge {
  background: var(--green);
}

.connect__card h3 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 40;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.connect__card p {
  font-size: 0.9125rem;
  color: var(--ink-soft);
  line-height: 1.55;
  flex: 1;
}

.connect__card span.handle {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--green-700);
}

/* --------------------------------------------------------------------------
   14. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  background: var(--navy-900);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(
      rgba(255, 255, 255, 0.1) 1px,
      transparent 1px
    );
  background-size: 26px 26px;
}

.cta-band::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 62vw;
  height: 62vw;
  max-width: 760px;
  max-height: 760px;
  right: -14vw;
  top: -32%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(65, 164, 74, 0.24) 0%,
    rgba(65, 164, 74, 0) 68%
  );
}

/* Stacked, not side by side: the message is row one, the actions row two.
   Side by side squeezed the heading into a narrow column — "Your Journey
   Could Be Next" was breaking across four lines — and pushed the buttons into
   a cramped strip on the right. */
.cta-band__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 3.5vw, 2.6rem);
  align-items: start;
}

.cta-band__inner .lede {
  max-width: 62ch;
}

.cta-band h2 {
  margin-bottom: 1rem;
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

/* Phone numbers shown for reference inside a CTA band. Deliberately not a
   button: it sits beside the real action rather than pretending to be one. */
.cta-phone {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.65rem;
  padding: 0.9rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  color: #fff;
  font-size: 0.975rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.cta-phone svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: #86d18d;
}

.cta-phone span + span::before {
  content: "·";
  margin-right: 0.6rem;
  opacity: 0.45;
}

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--navy-950);
  color: rgba(255, 255, 255, 0.72);
  padding-top: clamp(3.5rem, 7vw, 5.5rem);
  font-size: 0.9375rem;
}

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

/* Full lockup sits on a white chip so the navy half of the logo stays visible */
.footer__logo {
  display: inline-block;
  background: #fff;
  border-radius: var(--radius);
  padding: 1rem 1.35rem;
  margin-bottom: 1.5rem;
}

.footer__logo img {
  width: 168px;
  height: auto;
}

.footer__about p {
  max-width: 38ch;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.62);
}

.footer h3 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 30;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1.25rem;
}

.footer__links {
  display: grid;
  gap: 0.7rem;
}

.footer__links a {
  color: rgba(255, 255, 255, 0.66);
  width: fit-content;
  transition: color 0.3s var(--ease), transform 0.35s var(--ease-out);
}

.footer__links a:hover {
  color: #86d18d;
  transform: translateX(3px);
}

.footer__contact {
  display: grid;
  gap: 1.1rem;
}

.footer__contact div {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.footer__contact svg {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 4px;
  color: var(--green);
}

.footer__contact a:hover {
  color: #86d18d;
}

.socials {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.socials a {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-light);
  color: rgba(255, 255, 255, 0.8);
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease),
    border-color 0.35s var(--ease), transform 0.45s var(--ease-out);
}

.socials a svg {
  width: 18px;
  height: 18px;
}

.socials a:hover {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  transform: translateY(-3px);
}

.footer__bottom {
  border-top: 1px solid var(--line-light);
  padding-block: 1.6rem 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.5);
}

.footer__bottom p {
  margin: 0;
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.25rem;
}

.footer__legal a {
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.3s var(--ease);
}

.footer__legal a:hover,
.footer__legal a[aria-current="page"] {
  color: #86d18d;
}

.footer__sign {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 40;
  font-style: italic;
  font-size: 0.95rem;
  color: #86d18d;
}

/* --------------------------------------------------------------------------
   16. Page banner (inner pages)
   -------------------------------------------------------------------------- */
.page-banner {
  position: relative;
  background: var(--navy-900);
  color: #fff;
  padding-top: calc(var(--header-h) + clamp(3rem, 7vw, 5.5rem));
  padding-bottom: clamp(3rem, 7vw, 5rem);
  overflow: hidden;
  isolation: isolate;
}

.page-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.09) 1px,
    transparent 1px
  );
  background-size: 24px 24px;
}

.page-banner::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 70vw;
  height: 70vw;
  max-width: 820px;
  max-height: 820px;
  right: -16vw;
  bottom: -46%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(65, 164, 74, 0.22) 0%,
    rgba(65, 164, 74, 0) 66%
  );
}

.page-banner h1 {
  max-width: 18ch;
  margin-bottom: 1.15rem;
}

.page-banner .lede {
  color: rgba(255, 255, 255, 0.76);
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.72);
  margin-top: 2rem;
}

.crumbs a:hover {
  color: #86d18d;
}

.crumbs span {
  opacity: 0.8;
}

/* --------------------------------------------------------------------------
   17. About page pieces
   -------------------------------------------------------------------------- */
.quote {
  position: relative;
  max-width: 880px;
  margin-inline: auto;
  text-align: center;
  padding-inline: clamp(0rem, 4vw, 3rem);
}

.quote__mark {
  width: 46px;
  height: auto;
  margin: 0 auto 1.5rem;
  color: var(--green);
}

.quote blockquote {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 96, "SOFT" 30, "WONK" 1;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.55rem, 3.2vw, 2.5rem);
  line-height: 1.24;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.quote figcaption {
  margin-top: 1.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.section--deep .quote figcaption {
  color: rgba(255, 255, 255, 0.5);
}

.pillars {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.pillars li {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.9125rem;
  font-weight: 500;
  background: var(--paper);
  transition: border-color 0.35s var(--ease), transform 0.4s var(--ease-out),
    background-color 0.35s var(--ease);
}

.pillars li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  flex: none;
}

.pillars li:hover {
  border-color: var(--green);
  transform: translateY(-2px);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.split--reverse .split__aside {
  order: 2;
}

.split__aside .eyebrow {
  margin-bottom: 0.9rem;
}

.split__aside h2 {
  position: sticky;
  top: calc(var(--header-h) + 24px);
}

.checklist {
  display: grid;
  gap: 0.95rem;
  margin-top: 1.75rem;
}

.checklist li {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  font-size: 0.975rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.checklist svg {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 3px;
  color: var(--green);
}

.section--deep .checklist li {
  color: rgba(255, 255, 255, 0.72);
}

/* Detailed service rows (services page) */
.service-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(1.25rem, 3vw, 2.75rem);
  padding-block: clamp(2rem, 3.6vw, 2.85rem);
  border-top: 1px solid var(--line);
  align-items: start;
  transition: background-color 0.4s var(--ease);
}

.service-row:last-child {
  border-bottom: 1px solid var(--line);
}

/* ---- service row with a photograph ----
   The row is a three-column grid, so the photograph takes the first column in
   place of the icon tile: a full-width band across a 1240px row would stand
   over 700px tall, and a photograph inside the 84px icon tile would be a
   thumbnail rather than an image. The icon is dropped on these rows because
   the photograph is now the stronger cue and two badges in one cell is noise;
   it still appears on every service card elsewhere. */
.service-row--photo {
  grid-template-columns: 210px minmax(0, 1fr) minmax(0, 0.85fr);
  align-items: center;
}

.service-row__bg {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--cream-deep);
}

.service-row--photo .service-row__ico {
  display: none;
}

.service-row__ico {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: var(--green-100);
  color: var(--green-700);
  transition: background-color 0.45s var(--ease), color 0.45s var(--ease),
    transform 0.5s var(--ease-out);
}

.service-row__ico svg {
  width: 30px;
  height: 30px;
}

.service-row:hover .service-row__ico {
  background: var(--navy);
  color: #fff;
  transform: rotate(-5deg);
}

.service-row h3 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 60;
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 0.7rem;
}

.service-row p {
  color: var(--ink-soft);
  font-size: 0.9875rem;
}

.service-row__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-content: start;
}

.service-row__tags li {
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  background: var(--paper);
}

/* --------------------------------------------------------------------------
   18. Contact page
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: start;
}

/* minmax(0, 1fr) rather than the default auto track: the email address is one
   unbreakable string, and an auto track would size every card to fit it,
   pushing the whole column past the viewport on a 320px screen. */
.contact-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.contact-card {
  display: flex;
  gap: 1.1rem;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  transition: border-color 0.35s var(--ease), transform 0.45s var(--ease-out),
    box-shadow 0.4s var(--ease);
}

.contact-card:hover {
  border-color: transparent;
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

/* Flex children refuse to shrink below their content width without this. */
.contact-card > div {
  min-width: 0;
}

.contact-card p,
.contact-card a {
  overflow-wrap: anywhere;
}

.contact-card__ico {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--green-100);
  color: var(--green-700);
}

.contact-card__ico svg {
  width: 21px;
  height: 21px;
}

.contact-card h3 {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 0.5rem;
}

.contact-card p,
.contact-card a {
  font-size: 1.0125rem;
  line-height: 1.5;
  font-weight: 500;
}

.contact-card a {
  display: block;
  width: fit-content;
  transition: color 0.3s var(--ease);
}

.contact-card a:hover {
  color: var(--green-700);
}

/* Form */
.form-panel {
  padding: clamp(1.6rem, 3.4vw, 2.75rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.form-panel h2 {
  margin-bottom: 0.75rem;
}

.form-panel > p {
  color: var(--ink-soft);
  font-size: 0.9375rem;
  margin-bottom: 2rem;
}

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

.field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.field--full {
  grid-column: 1 / -1;
}

.field label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.field label span {
  color: var(--green-700);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--cream);
  font-size: 0.9375rem;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}

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

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%234a5470' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
  padding-right: 2.5rem;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--green);
  background: var(--paper);
  box-shadow: 0 0 0 3px rgba(65, 164, 74, 0.14);
}

.field input:user-invalid,
.field textarea:user-invalid {
  border-color: #c2413a;
}

.form-foot {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}

.form-note {
  font-size: 0.8125rem;
  color: var(--ink-mute);
  line-height: 1.5;
  max-width: 34ch;
}

.form-status {
  margin-top: 1.15rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-sm);
  background: var(--green-100);
  border: 1px solid rgba(65, 164, 74, 0.3);
  font-size: 0.875rem;
  color: var(--green-700);
  display: none;
}

.form-status.is-shown {
  display: block;
}

/* Map */
.map-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--cream-deep);
  box-shadow: var(--shadow-md);
}

.map-frame iframe {
  display: block;
  width: 100%;
  height: clamp(300px, 42vw, 460px);
  border: 0;
  filter: grayscale(0.35) contrast(1.04);
}

/* Editable notes — a dashed box for content still waiting on the client.
   No page uses this now: the last two, on the legal pages, became HTML
   comments so visitors never saw them. Kept for the next one. Pair it with
   the #i-info sprite symbol. */
.editable-note {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin-top: 1.25rem;
  padding: 0.9rem 1.1rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--ink-mute);
  background: rgba(46, 59, 93, 0.03);
}

.editable-note svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 3px;
  color: var(--green-700);
}

/* --------------------------------------------------------------------------
   18b. Legal pages (privacy policy, terms & conditions)
   -------------------------------------------------------------------------- */
.legal {
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.legal__toc {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  border-left: 2px solid var(--line);
  padding-left: 1.25rem;
}

.legal__toc h2 {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-700);
  margin-bottom: 1rem;
}

.legal__toc ol {
  display: grid;
  gap: 0.6rem;
  counter-reset: toc;
}

.legal__toc a {
  display: flex;
  gap: 0.6rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--ink-soft);
  /* These sit in a stack of a dozen or more on a phone. At the bare line
     height each row is 21px, under the 24px a finger needs, so the padding
     is what makes them tappable rather than decorative. */
  padding-block: 0.2rem;
  transition: color 0.3s var(--ease), transform 0.35s var(--ease-out);
}

.legal__toc a::before {
  counter-increment: toc;
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-display);
  font-variation-settings: "opsz" 20;
  font-size: 0.75rem;
  color: var(--ink-mute);
  flex: none;
  padding-top: 2px;
}

.legal__toc a:hover {
  color: var(--navy);
  transform: translateX(2px);
}

.legal__body > section + section {
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  padding-top: clamp(2.25rem, 4vw, 3.25rem);
  border-top: 1px solid var(--line);
}

.legal__body h2 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 72;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.legal__body h3 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 40;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  margin: 1.75rem 0 0.65rem;
}

.legal__body p,
.legal__body li {
  color: var(--ink-soft);
  font-size: 0.9875rem;
  line-height: 1.7;
  max-width: 72ch;
}

.legal__body p + p {
  margin-top: 1rem;
}

.legal__list {
  display: grid;
  gap: 0.85rem;
  margin-top: 1.1rem;
}

.legal__list li {
  position: relative;
  padding-left: 1.6rem;
}

.legal__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
}

.legal__updated {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
  margin-top: 1.75rem;
}

.legal__updated svg {
  width: 15px;
  height: 15px;
  color: #86d18d;
  flex: none;
}

/* Cancellation-charge table — scrolls inside itself rather than the page */
.table-wrap {
  overflow-x: auto;
  margin-top: 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  -webkit-overflow-scrolling: touch;
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 420px;
  font-size: 0.925rem;
}

.legal-table th,
.legal-table td {
  padding: 0.9rem 1.15rem;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}

.legal-table thead th {
  background: var(--navy);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 0;
}

.legal-table tbody th {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.legal-table td {
  color: var(--ink-soft);
}

.legal-table tbody tr:last-child th,
.legal-table tbody tr:last-child td {
  border-bottom: 0;
}

.legal-table tbody tr:nth-child(even) {
  background: rgba(46, 59, 93, 0.028);
}

/* --------------------------------------------------------------------------
   19. FAQ / accordion
   -------------------------------------------------------------------------- */
.faq {
  border-top: 1px solid var(--line);
}

.faq__item {
  border-bottom: 1px solid var(--line);
}

.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 40;
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink);
  transition: color 0.3s var(--ease);
}

.faq__q:hover {
  color: var(--green-700);
}

.faq__sign {
  position: relative;
  width: 26px;
  height: 26px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease),
    transform 0.4s var(--ease-out);
}

.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 1.5px;
  background: var(--navy);
  transform: translate(-50%, -50%);
  transition: transform 0.4s var(--ease-out), background-color 0.35s var(--ease);
}

.faq__sign::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq__q[aria-expanded="true"] .faq__sign {
  background: var(--green);
  border-color: var(--green);
  transform: rotate(180deg);
}

.faq__q[aria-expanded="true"] .faq__sign::before,
.faq__q[aria-expanded="true"] .faq__sign::after {
  background: #fff;
}

.faq__q[aria-expanded="true"] .faq__sign::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

/* Panel height is animated from JS (see main.js) rather than with the
   0fr -> 1fr grid trick, so it also works in browsers that cannot interpolate
   grid tracks. JS releases the height back to auto once the panel is open. */
.faq__a {
  height: 0;
  overflow: hidden;
  transition: height 0.45s var(--ease-out);
}

.faq__a p {
  padding-bottom: 1.5rem;
  color: var(--ink-soft);
  font-size: 0.975rem;
  max-width: 68ch;
}

/* --------------------------------------------------------------------------
   20. Floating actions
   -------------------------------------------------------------------------- */
.floaters {
  position: fixed;
  right: clamp(0.9rem, 2vw, 1.6rem);
  bottom: clamp(0.9rem, 2vw, 1.6rem);
  z-index: 150;
  display: grid;
  gap: 0.6rem;
  justify-items: end;
}

.floater {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform 0.4s var(--ease-out), background-color 0.35s var(--ease),
    opacity 0.35s var(--ease), visibility 0.35s;
}

.floater:hover {
  transform: translateY(-3px) scale(1.05);
}

/* WhatsApp's darker brand green — the bright #25D366 puts the white glyph at
   about 2:1, well under the 3:1 floor for a graphical control. */
.floater--wa {
  background: #128c7e;
  color: #fff;
}

.floater--wa svg {
  width: 27px;
  height: 27px;
}

.floater--top {
  background: var(--navy);
  color: #fff;
  opacity: 0;
  visibility: hidden;
}

.floater--top svg {
  width: 19px;
  height: 19px;
}

.floater--top.is-shown {
  opacity: 1;
  visibility: visible;
}

/* Scroll progress hairline */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--green);
  z-index: 300;
}

/* --------------------------------------------------------------------------
   21. Scroll reveal
   -------------------------------------------------------------------------- */
/* Everything below is gated on .has-js (set by an inline script in <head>).
   Without JavaScript the page renders fully visible instead of blank. */
.has-js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

.has-js [data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

[data-reveal-stagger].is-visible > * {
  opacity: 1;
  transform: none;
}

[data-reveal-stagger].is-visible > *:nth-child(1) { transition-delay: 0.02s; }
[data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: 0.08s; }
[data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: 0.14s; }
[data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: 0.2s; }
[data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: 0.26s; }
[data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: 0.32s; }
[data-reveal-stagger].is-visible > *:nth-child(7) { transition-delay: 0.38s; }
[data-reveal-stagger].is-visible > *:nth-child(8) { transition-delay: 0.44s; }
[data-reveal-stagger].is-visible > *:nth-child(9) { transition-delay: 0.5s; }

/* Hero intro animation */
.has-js .hero [data-hero] {
  opacity: 0;
  transform: translateY(26px);
  animation: heroIn 1s var(--ease-out) forwards;
}

.hero [data-hero="1"] { animation-delay: 0.15s; }
.hero [data-hero="2"] { animation-delay: 0.28s; }
.hero [data-hero="3"] { animation-delay: 0.41s; }
.hero [data-hero="4"] { animation-delay: 0.54s; }
.hero [data-hero="5"] { animation-delay: 0.67s; }
.hero [data-hero="6"] { animation-delay: 0.8s; }

@keyframes heroIn {
  to {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   LIMITED OFFER — floating offer button and flyer modal
   --------------------------------------------------------------------------
   A self-contained campaign block. Everything for the promotion lives between
   this banner and the one that closes it, so the whole thing can be removed in
   one edit when the campaign ends. Behaviour and copy are in
   js/launch-offer.js; nothing here is referenced by the rest of the site.
   ========================================================================== */

/* ---- where it sits ----
   Pinned just under the header on the right, using the same
   `calc(var(--header-h) + 24px)` the site already uses for its other sticky
   offsets — so it follows the header as that shrinks at each breakpoint
   instead of needing its own set of numbers.

   z-index 150 matches the floating stack: above the page, below the mobile
   drawer (190) and the header (200), so an open menu covers it rather than
   the other way round. */
.offer-dock {
  position: fixed;
  top: calc(var(--header-h) + 24px);
  right: clamp(0.9rem, 2vw, 1.6rem);
  z-index: 150;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;            /* only the button itself is clickable */
}

.offer-dock > * {
  pointer-events: auto;
}

/* ---- the button ----
   The client's ribbon is the button: the white card it was supplied on is
   knocked out of the artwork, so what sits on the page is the ribbon's own
   silhouette and nothing else. No panel, no border, no background — a box
   behind it would put back exactly what the knockout removed.

   The wording is in the artwork, so the only text is the call to action
   beneath it. That one does need a ground of its own: the button floats over
   whatever the page happens to be showing, and small white type over a
   photograph is a coin toss. It gets a compact dark pill. */
.offer-fab {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: transform 0.4s var(--ease-out), opacity 0.35s var(--ease),
    visibility 0s linear 0s;
}

/* the pop the client asked for: a short spring in, once, on arrival */
.offer-fab--in {
  animation: offer-pop 0.5s var(--ease-out) both;
}

@keyframes offer-pop {
  0% { transform: scale(0.86) translateY(-6px); opacity: 0; }
  60% { transform: scale(1.04) translateY(0); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

.offer-fab:hover {
  transform: translateY(-2px) scale(1.03);
}

.offer-fab:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 6px;
  border-radius: 6px;
}

/* Waiting for a scroll. On a phone the button would otherwise land on top of
   the hero's own headline and call to action the moment the page loads. It
   appears after a short scroll instead. Desktop shows it straight away.

   visibility, not just opacity, so a hidden button is out of the tab order. */
.offer-fab--pending {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  pointer-events: none;
  transition: transform 0.35s var(--ease-out), opacity 0.35s var(--ease),
    visibility 0s linear 0.35s;
}

/* The drop shadow follows the ribbon's own outline rather than a box, which
   is the whole point of having knocked the background out. */
.offer-fab__img {
  display: block;
  width: clamp(4.25rem, 6.5vw, 5.75rem);
  height: auto;
  max-width: none;                 /* the global img rule would cap this */
  filter: drop-shadow(0 6px 14px rgba(13, 20, 36, 0.38));
  -webkit-user-drag: none;
  user-select: none;
}

.offer-fab__cta {
  padding: 0.26rem 0.6rem;
  border-radius: 999px;
  background: var(--navy-900);
  box-shadow: var(--shadow-sm);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: #fff;
  transition: background 0.3s var(--ease);
}

.offer-fab:hover .offer-fab__cta {
  background: var(--green-700);
}

/* ---- the firework ----
   Three layers of sparks behind the card. Two carry coloured embers — small
   radial gradients with a white-hot core and a soft halo — and the third
   carries four-point stars drawn as inline SVG. Each layer bursts outward
   and fades, the three within half a second of each other, so one firework
   reads as a shower of colour rather than a single ring of dots.

   Forty-eight particles in eight colours — sixteen of them stars — alight
   together at the peak of the burst. Positions hug the edges of each layer:
   the middle of the box sits behind the opaque card, where a spark would
   never be seen.

   All of it is decorative and sits behind the card (z-index -1 inside the
   button's own stacking context), so nothing here can cover the text or
   catch a click. Only transform and opacity animate — no layout, no repaint
   — and the whole lot stops under prefers-reduced-motion. */
.offer-fab__spark,
.offer-fab__spark::before,
.offer-fab__spark::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background-repeat: no-repeat;
}

/* The three delays are within half a second of each other so the layers are
   alight together — forty-eight particles at the peak — rather than arriving
   one after another. Timing is linear and the easing is carried in the
   keyframe stops instead: a fast expansion, then a slow drift out. */

/* layer one — the close shower */
.offer-fab__spark {
  inset: -26px;
  background-image:
    radial-gradient(circle, #fff 14%, #86d18d 50%, rgba(134, 209, 141, 0.5) 66%, transparent 76%),
    radial-gradient(circle, #fff 14%, #ffd98a 50%, rgba(255, 217, 138, 0.5) 66%, transparent 76%),
    radial-gradient(circle, #fff 14%, #ffffff 50%, rgba(255, 255, 255, 0.5) 66%, transparent 76%),
    radial-gradient(circle, #fff 14%, #8fd3ff 50%, rgba(143, 211, 255, 0.5) 66%, transparent 76%),
    radial-gradient(circle, #fff 14%, #ff9ec7 50%, rgba(255, 158, 199, 0.5) 66%, transparent 76%),
    radial-gradient(circle, #fff 14%, #ff9f6e 50%, rgba(255, 159, 110, 0.5) 66%, transparent 76%),
    radial-gradient(circle, #fff 14%, #c9a7ff 50%, rgba(201, 167, 255, 0.5) 66%, transparent 76%),
    radial-gradient(circle, #fff 14%, #7ef0c8 50%, rgba(126, 240, 200, 0.5) 66%, transparent 76%),
    radial-gradient(circle, #fff 14%, #ffd98a 50%, rgba(255, 217, 138, 0.5) 66%, transparent 76%),
    radial-gradient(circle, #fff 14%, #86d18d 50%, rgba(134, 209, 141, 0.5) 66%, transparent 76%),
    radial-gradient(circle, #fff 14%, #8fd3ff 50%, rgba(143, 211, 255, 0.5) 66%, transparent 76%),
    radial-gradient(circle, #fff 14%, #ffffff 50%, rgba(255, 255, 255, 0.5) 66%, transparent 76%),
    radial-gradient(circle, #fff 14%, #ff9ec7 50%, rgba(255, 158, 199, 0.5) 66%, transparent 76%),
    radial-gradient(circle, #fff 14%, #ff9f6e 50%, rgba(255, 159, 110, 0.5) 66%, transparent 76%),
    radial-gradient(circle, #fff 14%, #c9a7ff 50%, rgba(201, 167, 255, 0.5) 66%, transparent 76%),
    radial-gradient(circle, #fff 14%, #7ef0c8 50%, rgba(126, 240, 200, 0.5) 66%, transparent 76%);
  background-size: 6px 6px, 5px 5px, 4px 4px, 6px 6px, 5px 5px, 7px 7px,
    4px 4px, 6px 6px, 5px 5px, 4px 4px, 6px 6px, 5px 5px, 4px 4px, 6px 6px,
    5px 5px, 4px 4px;
  background-position: 5% 14%, 17% 4%, 30% 8%, 43% 2%, 57% 9%, 70% 3%, 83% 12%,
    95% 24%, 98% 48%, 90% 70%, 76% 88%, 60% 96%, 45% 92%, 29% 97%, 14% 84%,
    2% 52%;
  animation: offer-spark 8s linear 1.5s infinite;
}

/* layer two — thrown further out */
.offer-fab__spark::before {
  inset: -40px;
  background-image:
    radial-gradient(circle, #fff 14%, #ff9f6e 50%, rgba(255, 159, 110, 0.5) 66%, transparent 76%),
    radial-gradient(circle, #fff 14%, #8fd3ff 50%, rgba(143, 211, 255, 0.5) 66%, transparent 76%),
    radial-gradient(circle, #fff 14%, #ffd98a 50%, rgba(255, 217, 138, 0.5) 66%, transparent 76%),
    radial-gradient(circle, #fff 14%, #ff9ec7 50%, rgba(255, 158, 199, 0.5) 66%, transparent 76%),
    radial-gradient(circle, #fff 14%, #ffffff 50%, rgba(255, 255, 255, 0.5) 66%, transparent 76%),
    radial-gradient(circle, #fff 14%, #86d18d 50%, rgba(134, 209, 141, 0.5) 66%, transparent 76%),
    radial-gradient(circle, #fff 14%, #c9a7ff 50%, rgba(201, 167, 255, 0.5) 66%, transparent 76%),
    radial-gradient(circle, #fff 14%, #ffd98a 50%, rgba(255, 217, 138, 0.5) 66%, transparent 76%),
    radial-gradient(circle, #fff 14%, #7ef0c8 50%, rgba(126, 240, 200, 0.5) 66%, transparent 76%),
    radial-gradient(circle, #fff 14%, #8fd3ff 50%, rgba(143, 211, 255, 0.5) 66%, transparent 76%),
    radial-gradient(circle, #fff 14%, #ff9ec7 50%, rgba(255, 158, 199, 0.5) 66%, transparent 76%),
    radial-gradient(circle, #fff 14%, #ffffff 50%, rgba(255, 255, 255, 0.5) 66%, transparent 76%),
    radial-gradient(circle, #fff 14%, #86d18d 50%, rgba(134, 209, 141, 0.5) 66%, transparent 76%),
    radial-gradient(circle, #fff 14%, #c9a7ff 50%, rgba(201, 167, 255, 0.5) 66%, transparent 76%),
    radial-gradient(circle, #fff 14%, #ff9f6e 50%, rgba(255, 159, 110, 0.5) 66%, transparent 76%),
    radial-gradient(circle, #fff 14%, #ffd98a 50%, rgba(255, 217, 138, 0.5) 66%, transparent 76%);
  background-size: 5px 5px, 6px 6px, 4px 4px, 5px 5px, 6px 6px, 5px 5px,
    4px 4px, 6px 6px, 5px 5px, 6px 6px, 4px 4px, 5px 5px, 6px 6px, 4px 4px,
    5px 5px, 4px 4px;
  background-position: 9% 10%, 22% 3%, 36% 9%, 50% 2%, 64% 8%, 77% 2%, 89% 14%,
    97% 34%, 93% 58%, 84% 82%, 68% 94%, 52% 99%, 37% 93%, 21% 90%, 7% 72%,
    2% 36%;
  animation: offer-spark-wide 8s linear 1.75s infinite;
}

/* layer three — the stars, turning as they go */
.offer-fab__spark::after {
  inset: -48px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c1.3 7.4 3.3 9.4 12 12-8.7 2.6-10.7 4.6-12 12-1.3-7.4-3.3-9.4-12-12 8.7-2.6 10.7-4.6 12-12z' fill='%23ffd98a'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c1.3 7.4 3.3 9.4 12 12-8.7 2.6-10.7 4.6-12 12-1.3-7.4-3.3-9.4-12-12 8.7-2.6 10.7-4.6 12-12z' fill='%23ffffff'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c1.3 7.4 3.3 9.4 12 12-8.7 2.6-10.7 4.6-12 12-1.3-7.4-3.3-9.4-12-12 8.7-2.6 10.7-4.6 12-12z' fill='%23ff9ec7'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c1.3 7.4 3.3 9.4 12 12-8.7 2.6-10.7 4.6-12 12-1.3-7.4-3.3-9.4-12-12 8.7-2.6 10.7-4.6 12-12z' fill='%238fd3ff'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c1.3 7.4 3.3 9.4 12 12-8.7 2.6-10.7 4.6-12 12-1.3-7.4-3.3-9.4-12-12 8.7-2.6 10.7-4.6 12-12z' fill='%237ef0c8'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c1.3 7.4 3.3 9.4 12 12-8.7 2.6-10.7 4.6-12 12-1.3-7.4-3.3-9.4-12-12 8.7-2.6 10.7-4.6 12-12z' fill='%23c9a7ff'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c1.3 7.4 3.3 9.4 12 12-8.7 2.6-10.7 4.6-12 12-1.3-7.4-3.3-9.4-12-12 8.7-2.6 10.7-4.6 12-12z' fill='%23ffd98a'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c1.3 7.4 3.3 9.4 12 12-8.7 2.6-10.7 4.6-12 12-1.3-7.4-3.3-9.4-12-12 8.7-2.6 10.7-4.6 12-12z' fill='%23ff9f6e'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c1.3 7.4 3.3 9.4 12 12-8.7 2.6-10.7 4.6-12 12-1.3-7.4-3.3-9.4-12-12 8.7-2.6 10.7-4.6 12-12z' fill='%23ffffff'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c1.3 7.4 3.3 9.4 12 12-8.7 2.6-10.7 4.6-12 12-1.3-7.4-3.3-9.4-12-12 8.7-2.6 10.7-4.6 12-12z' fill='%23ff9ec7'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c1.3 7.4 3.3 9.4 12 12-8.7 2.6-10.7 4.6-12 12-1.3-7.4-3.3-9.4-12-12 8.7-2.6 10.7-4.6 12-12z' fill='%238fd3ff'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c1.3 7.4 3.3 9.4 12 12-8.7 2.6-10.7 4.6-12 12-1.3-7.4-3.3-9.4-12-12 8.7-2.6 10.7-4.6 12-12z' fill='%23ffd98a'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c1.3 7.4 3.3 9.4 12 12-8.7 2.6-10.7 4.6-12 12-1.3-7.4-3.3-9.4-12-12 8.7-2.6 10.7-4.6 12-12z' fill='%237ef0c8'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c1.3 7.4 3.3 9.4 12 12-8.7 2.6-10.7 4.6-12 12-1.3-7.4-3.3-9.4-12-12 8.7-2.6 10.7-4.6 12-12z' fill='%23c9a7ff'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c1.3 7.4 3.3 9.4 12 12-8.7 2.6-10.7 4.6-12 12-1.3-7.4-3.3-9.4-12-12 8.7-2.6 10.7-4.6 12-12z' fill='%23ff9f6e'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c1.3 7.4 3.3 9.4 12 12-8.7 2.6-10.7 4.6-12 12-1.3-7.4-3.3-9.4-12-12 8.7-2.6 10.7-4.6 12-12z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size: 13px 13px, 10px 10px, 14px 14px, 10px 10px, 11px 11px,
    13px 13px, 10px 10px, 11px 11px, 12px 12px, 10px 10px, 13px 13px,
    10px 10px, 11px 11px, 10px 10px, 12px 12px, 10px 10px;
  background-position: 4% 28%, 16% 6%, 33% 2%, 49% 7%, 63% 1%, 79% 6%, 92% 18%,
    99% 40%, 95% 64%, 86% 86%, 70% 96%, 55% 91%, 40% 98%, 25% 94%, 10% 78%,
    1% 50%;
  animation: offer-star 8s linear 1.95s infinite;
}

@keyframes offer-spark {
  0% { transform: scale(0.42); opacity: 0; }
  5% { opacity: 1; }
  12% { transform: scale(1.02); }
  16% { opacity: 1; }
  30% { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}

@keyframes offer-spark-wide {
  0% { transform: scale(0.3); opacity: 0; }
  5% { opacity: 1; }
  13% { transform: scale(1.04); }
  17% { opacity: 1; }
  32% { transform: scale(1.26); opacity: 0; }
  100% { transform: scale(1.26); opacity: 0; }
}

@keyframes offer-star {
  0% { transform: scale(0.4) rotate(-30deg); opacity: 0; }
  5% { opacity: 1; }
  14% { transform: scale(1.05) rotate(6deg); }
  18% { opacity: 1; }
  34% { transform: scale(1.22) rotate(26deg); opacity: 0; }
  100% { transform: scale(1.22) rotate(26deg); opacity: 0; }
}

/* A warm flash behind the ribbon on the same beat, so the burst reads as one
   event. This used to be a ring tracing the old card's rounded rectangle;
   against a ribbon a ring would only draw a box that is not there, so it is a
   soft disc instead — z-index -2, behind the sparks as well as the artwork. */
.offer-fab::after {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: -2;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 214, 150, 0.5) 0%,
    rgba(255, 160, 90, 0.28) 45%,
    transparent 70%);
  opacity: 0;
  pointer-events: none;
  animation: offer-pulse 8s var(--ease-out) 1.5s infinite;
}

@keyframes offer-pulse {
  0% { transform: scale(0.82); opacity: 0.85; }
  20% { transform: scale(1.12); opacity: 0; }
  100% { transform: scale(1.12); opacity: 0; }
}

/* hovering is a deliberate interaction — stop competing with it */
.offer-fab:hover::after,
.offer-fab:hover .offer-fab__spark,
.offer-fab:hover .offer-fab__spark::before,
.offer-fab:hover .offer-fab__spark::after {
  animation-play-state: paused;
}

/* ---- the flyer modal ---- */
.offer-modal {
  position: fixed;
  inset: 0;
  /* above the floaters (150), drawer (190), header (200) and the reading
     progress bar (300) — a dialog the sticky header punches through is not a
     dialog */
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 3vw, 2rem);
  background: rgba(13, 20, 36, 0.9);
  opacity: 0;
  visibility: hidden;
  /* visibility is stepped, not eased: it waits out the fade on the way out and
     flips immediately on the way in. Easing it in as well leaves the dialog
     still `hidden` on the frame it opens, and a browser will not move focus
     into something invisible. */
  transition: opacity 0.28s var(--ease), visibility 0s linear 0.28s;
}

.offer-modal.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.28s var(--ease), visibility 0s linear 0s;
}

.offer-modal__panel {
  display: flex;
  flex-direction: column;
  width: min(100%, 38rem);
  max-height: 100%;
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.offer-modal__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem clamp(1rem, 3vw, 1.5rem);
  border-bottom: 1px solid var(--line-soft);
  flex: none;
}

.offer-modal__titles {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.offer-modal__eyebrow {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-700);
}

.offer-modal__title {
  margin: 0;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 40;
  font-size: clamp(1.1rem, 3vw, 1.35rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--navy);
}

.offer-modal__close {
  margin-left: auto;
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
    border-color 0.25s var(--ease);
}

.offer-modal__close:hover {
  background: var(--cream-deep);
  color: var(--ink);
  border-color: rgba(46, 59, 93, 0.3);
}

.offer-modal__close:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
}

.offer-modal__close svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

/* the flyer scrolls inside the panel rather than pushing the CTAs off screen */
.offer-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--cream);
  padding: clamp(0.75rem, 2.5vw, 1.15rem);
}

/* height:auto with the intrinsic ratio: the flyer is never cropped and never
   stretched, whatever its proportions */
.offer-modal__flyer {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  background: var(--cream-deep);
}

.offer-modal__foot {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  padding: clamp(0.85rem, 2.5vw, 1.15rem) clamp(1rem, 3vw, 1.5rem);
  border-top: 1px solid var(--line-soft);
}

.offer-modal__foot .btn {
  flex: 1 1 12rem;
}

.offer-modal__aside {
  flex: 1 1 100%;
  display: flex;
  justify-content: center;
}

.offer-modal__download {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.5rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-mute);
  transition: color 0.25s var(--ease);
}

.offer-modal__download:hover {
  color: var(--navy);
}

.offer-modal__download:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
}

.offer-modal__download svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* scroll is locked while the dialog is open and restored on close */
body.offer-locked {
  overflow: hidden;
}

/* ---- small screens ----
   The call to action stays: it is the only text on the button, and the whole
   point of it is to say what tapping the ribbon does. It just gets smaller. */
@media (max-width: 560px) {
  .offer-fab {
    gap: 0.24rem;
  }

  .offer-fab__cta {
    padding: 0.22rem 0.5rem;
    font-size: 0.64rem;
  }

  .offer-modal__foot .btn {
    flex: 1 1 100%;
  }
}

@media (max-width: 380px) {
  .offer-fab__cta {
    font-size: 0.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .offer-fab::after,
  .offer-fab__spark,
  .offer-fab__spark::before,
  .offer-fab__spark::after {
    animation: none;
  }

  .offer-fab--in {
    animation: none;
  }

  .offer-fab,
  .offer-modal {
    transition: none;
  }

  .offer-fab:hover {
    transform: none;
  }

  .offer-fab--pending {
    transform: none;
  }
}

/* =========================== end LIMITED OFFER =========================== */

/* --------------------------------------------------------------------------
   22. Responsive
   -------------------------------------------------------------------------- */
/* The larger brand lockup needs the phone number to step out earlier, or the
   pill runs out of room and the nav links wrap onto a second line. */
@media (max-width: 1380px) {
  .nav-phone {
    display: none;
  }
}

/* Five nav items instead of four: the lockup and the links both step down
   earlier so the pill keeps real breathing room, not a couple of pixels. */
@media (max-width: 1200px) {
  .brand__mark {
    height: 66px;
  }

  .brand__name {
    font-size: 1.82rem;
  }
}

/* Six nav items need the lockup to step down earlier than it used to. Note
   the header has two sizes — the full one at the top of the page and the
   compact "is-stuck" one after scrolling — and it is the *unstuck* one, 44px
   wider, that decides whether the links fit. Both are checked. */
@media (max-width: 1160px) {
  .brand__mark {
    height: 58px;
  }

  .brand__name {
    font-size: 1.6rem;
  }

  .brand__tag {
    font-size: 0.68rem;
    letter-spacing: 0.185em;
  }
}

@media (max-width: 1080px) {
  :root {
    --header-h: 124px;
  }

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

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

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

  /* Tighter link boxes buy back the width the lockup takes, so the pill still
     fits on one line down to the burger breakpoint. */
  .nav a {
    font-size: 0.855rem;
  }

  .brand__mark {
    height: 58px;
  }

  .site-header.is-stuck .brand__mark {
    height: 54px;
  }

  .brand__name {
    font-size: 1.6rem;
  }

  .site-header.is-stuck .brand__name {
    font-size: 1.5rem;
  }

  .brand__tag {
    font-size: 0.68rem;
    letter-spacing: 0.185em;
  }
}

/* Six nav items instead of five. Everything above 1024px already had room to
   spare, but between the burger breakpoint and about 1010px "Happy Travellers"
   was pushing the pill onto a second line — so the links tighten once more for
   that last narrow band only. Nothing above 1024px is affected. */
@media (max-width: 1040px) {
  .nav a {
    font-size: 0.82rem;
  }

  .nav {
    gap: 0.1rem;
  }
}

@media (max-width: 980px) {
  .nav,
  .nav-drop,
  .nav-actions .btn {
    display: none;
  }

  .brand__mark,
  .site-header.is-stuck .brand__mark {
    height: 66px;
  }

  .brand__name,
  .site-header.is-stuck .brand__name {
    font-size: 1.85rem;
  }

  .brand__tag {
    font-size: 0.7rem;
    letter-spacing: 0.2em;
  }

  .burger {
    display: grid;
  }

  .hero__grid,
  .intro__grid,
  .contact-grid,
  .split,
  .cta-band__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .split--reverse .split__aside {
    order: 0;
  }

  .split__aside h2 {
    position: static;
  }

  .hero {
    min-height: auto;
    padding-top: calc(var(--header-h) + 4.5rem);
    padding-bottom: 3.5rem;
  }

  .hero__facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hero__fact {
    padding: 1rem;
  }

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

  .connect {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .process__line {
    display: none;
  }

  .section-head--split {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .legal {
    grid-template-columns: minmax(0, 1fr);
  }

  .legal__toc {
    position: static;
  }

  .service-row {
    grid-template-columns: 66px minmax(0, 1fr);
  }

  .service-row--photo {
    grid-template-columns: 150px minmax(0, 1fr);
  }

  .service-row__tags {
    grid-column: 2 / -1;
  }
}

@media (max-width: 680px) {
  :root {
    --header-h: 112px;
  }

  body {
    font-size: 1rem;
  }

  .brand__mark,
  .site-header.is-stuck .brand__mark {
    height: 54px;
  }

  .brand__name,
  .site-header.is-stuck .brand__name {
    font-size: 1.5rem;
  }

  .brand__tag,
  .site-header.is-stuck .brand__tag {
    font-size: 0.62rem;
    letter-spacing: 0.17em;
  }

  .brand__text {
    margin-left: 0.7rem;
  }

  .grid--3,
  .grid--2,
  .grid--4,
  .form-grid,
  .allied,
  .route-panel__caption {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .process__track {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
  }

  .footer__top {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-row--photo {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-row__tags {
    grid-column: auto;
  }

  .btn {
    width: 100%;
  }

  .hero__cta .btn,
  .cta-band__actions .btn,
  .form-foot .btn {
    width: 100%;
  }

  .cta-phone {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    border-radius: var(--radius);
  }

  .cta-phone span + span::before {
    content: none;
  }

  .quote blockquote {
    text-align: left;
  }

  .quote {
    text-align: left;
  }

  .quote__mark {
    margin-inline: 0;
  }
}

/* Mid-size phones: the lockup is 5:1, so its width is set by its height and it
   has to step down before the burger runs out of room inside the pill. */
@media (max-width: 430px) {
  :root {
    --header-h: 104px;
  }

  .brand__mark,
  .site-header.is-stuck .brand__mark {
    height: 44px;
  }

  .brand__name,
  .site-header.is-stuck .brand__name {
    font-size: 1.28rem;
  }

  .brand__tag,
  .site-header.is-stuck .brand__tag {
    font-size: 0.55rem;
    letter-spacing: 0.11em;
  }

  .brand__text {
    margin-left: 0.6rem;
  }
}

/* Smallest phones. Measured: below roughly a 360px viewport even the 42px
   lockup leaves no room for the burger, so it steps down once more. */
@media (max-width: 360px) {
  :root {
    --header-h: 104px;
  }

  .nav-shell {
    padding-left: 10px;
    gap: 10px;
  }

  .brand__mark,
  .site-header.is-stuck .brand__mark {
    height: 40px;
  }

  .brand__name,
  .site-header.is-stuck .brand__name {
    font-size: 1.12rem;
  }

  /* Tagline drops on the narrowest phones — at this size it would be a smudge
     and it costs the width the burger needs. */
  .brand__tag {
    display: none;
  }

  .brand__text {
    margin-left: 0.5rem;
  }
}

/* --------------------------------------------------------------------------
   23. Motion & print preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

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

  [data-reveal],
  [data-reveal-stagger] > *,
  .hero [data-hero] {
    opacity: 1 !important;
    transform: none !important;
  }

  .arc path,
  .route-panel__art .route {
    stroke-dashoffset: 0 !important;
  }

  .route-panel__art .pin {
    opacity: 1;
  }

  .marquee__track {
    animation: none;
  }
}

@media print {
  .site-header,
  .floaters,
  .offer-dock,
  .progress,
  .drawer,
  .marquee,
  .hero__route {
    display: none !important;
  }

  body {
    background: #fff;
  }

  .hero,
  .page-banner,
  .section--deep,
  .cta-band,
  .site-footer {
    background: #fff !important;
    color: #000 !important;
  }
}


/* ====================================================================
   Itineraries, sectors and MICE destinations
   Used by the tour-type pages to show what the client actually runs.
   ==================================================================== */

/* ---- itinerary card ---- */
.itin-grid {
  display: grid;
  /* min() lets a track shrink below 20rem when the viewport itself is
     narrower — without it a 320px screen gets a 320px track plus gutters,
     and the page scrolls sideways. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 1rem;
  align-items: stretch;
}

.itin {
  /* the photograph band reads these back to pull itself out to the edges */
  --itin-pad-x: 1.6rem;
  --itin-pad-y: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: var(--itin-pad-y) var(--itin-pad-x);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease),
    transform 0.35s var(--ease-out);
}

.itin:hover {
  border-color: rgba(46, 59, 93, 0.22);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.itin__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.8rem;
}

.itin__name {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 40;
  font-size: 1.28rem;
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--navy);
  text-wrap: balance;
}

.itin__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.itin__nights,
.itin__by {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.24rem 0.6rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.itin__nights {
  background: var(--green-100);
  color: var(--green-700);
}

/* Road or helicopter is the whole difference between two otherwise
   identical yatras, so it is a tag rather than a footnote. */
.itin__by {
  background: rgba(46, 59, 93, 0.07);
  color: var(--navy);
}

.itin__by svg {
  width: 12px;
  height: 12px;
}

/* ---- the route: stops in order, with nights ---- */
.itin__route {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.itin__route li {
  display: inline-flex;
  align-items: center;
}

/* the arrow belongs between stops, so it hangs off every one but the first */
.itin__route li + li::before {
  content: "";
  width: 13px;
  height: 7px;
  margin: 0 0.42rem;
  flex: none;
  background: currentColor;
  opacity: 0.42;
  -webkit-mask: var(--arrow-mask) center / contain no-repeat;
  mask: var(--arrow-mask) center / contain no-repeat;
}

.itin__stop-n {
  margin-left: 0.28rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-mute);
}

.itin__foot {
  margin-top: auto;
  padding-top: 0.35rem;
}

.itin__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--green-700);
}

.itin__cta svg {
  width: 15px;
  height: 15px;
  transition: transform 0.3s var(--ease-out);
}

.itin__cta:hover {
  color: var(--navy);
}

.itin__cta:hover svg {
  transform: translateX(3px);
}

/* ---- region heading above a group of itineraries ---- */
.itin-region {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 3rem 0 1.35rem;
}

.itin-region:first-of-type {
  margin-top: 0;
}

.itin-region__ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  background: var(--green-100);
  color: var(--green-700);
}

.itin-region__ico svg {
  width: 20px;
  height: 20px;
}

.itin-region h3 {
  margin: 0;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 40;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--navy);
}

.itin-region__count {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
}

/* ---- itinerary card with a photograph ----
   Matches .tour-card on the departures pages: the photograph is a 16:10 band
   across the top of a normal light card, and everything below it keeps the
   ordinary card colours. Nothing is tinted and nothing is overlaid.
   The photograph is a real <img> rather than a CSS background-image so it can
   be lazy-loaded, sized, and carry alt text — the filenames the client
   supplied are descriptive, and that description is worth keeping.

   (Two earlier versions put the photograph behind the whole card under a
   gradient. The first never rendered that way at all — `.itin--photo > *`
   matched the image too and overrode its own position and z-index, so the
   scrim painted under the picture rather than over it. Both hid too much of
   the photograph, which is why the treatment was dropped.) */
.itin--photo {
  position: relative;
  overflow: hidden;
}

/* Negative margins pull the band out to the card's edges while the copy keeps
   the card's padding — no extra wrapper element needed around the text. */
.itin__bg {
  display: block;
  flex: none;
  /* the global img rule caps images at max-width:100%, which would hold the
     band to the padded content width and leave a gap down the right edge */
  max-width: none;
  width: calc(100% + var(--itin-pad-x) * 2);
  margin: calc(var(--itin-pad-y) * -1) calc(var(--itin-pad-x) * -1) 0.4rem;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out);
}

.itin--photo:hover {
  transform: translateY(-3px);
}

.itin--photo:hover .itin__bg {
  transform: scale(1.05);
}

/* ---- sector chips (where we operate) ---- */
.sector-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1rem;
}

.sector-card {
  --sector-pad-x: 1.8rem;
  --sector-pad-y: 1.7rem;
  padding: var(--sector-pad-y) var(--sector-pad-x);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.sector-card__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.15rem;
}

.sector-card__head svg {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--green-700);
}

.sector-card__head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 40;
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--navy);
}

.sector-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sector-list li {
  padding: 0.44rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--cream);
}

/* ---- sector card with a photograph ----
   Same shape as the itinerary and tour cards: a 16:10 band across the top,
   the chips below it on the card's own paper. */
.sector-card--photo {
  position: relative;
  overflow: hidden;
}

.sector-card__bg {
  display: block;
  max-width: none;
  width: calc(100% + var(--sector-pad-x) * 2);
  margin: calc(var(--sector-pad-y) * -1) calc(var(--sector-pad-x) * -1) 1.3rem;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--cream-deep);
}

/* ---- MICE destination rows ---- */
.mice-list {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.mice-list div {
  display: grid;
  grid-template-columns: minmax(11rem, 0.85fr) minmax(0, 1.4fr);
  gap: 0.3rem 1.5rem;
  padding: 1rem 1.4rem;
  background: #fff;
}

.mice-list dt {
  font-weight: 600;
  color: var(--navy);
}

.mice-list dd {
  margin: 0;
  font-size: 0.9125rem;
  color: var(--ink-soft);
}

@media (max-width: 620px) {
  .mice-list div {
    grid-template-columns: minmax(0, 1fr);
    padding: 0.95rem 1.15rem;
  }
}

@media (max-width: 520px) {
  .itin {
    --itin-pad-x: 1.25rem;
    --itin-pad-y: 1.3rem;
  }

  .itin-region {
    margin-top: 2.4rem;
  }

  .itin-region h3 {
    font-size: 1.3rem;
  }
}