@charset "utf-8";
/* =========================================================================
   House of Yatra — site stylesheet
   Plain CSS. One file. Mobile-first. Breakpoints: 640 / 900 / 1120 / 1024(svc)
   Order: Reset & base · Tokens · Typography · Layout · Buttons · Header/Nav ·
          Hero · Cards & grids · Sections & bands · Accordion · Forms ·
          Chips/marquee/misc · Footer · Utilities · Reduced motion · Print
   ========================================================================= */

/* ===== RESET & BASE ===================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  tab-size: 4;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol, pre {
  margin: 0;
}

ul[class],
ol[class] {
  padding: 0;
}

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

img {
  height: auto;
  border-style: none;
}

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

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--s6) 0;
}

/* Global hidden helper — the accordion, scrim, field errors and form status
   are all toggled by the `hidden` attribute from main.js. */
[hidden] {
  display: none !important;
}

/* ===== TOKENS =========================================================== */

:root {
  /* Brand */
  --brand: #1D49A7;
  --brand-600: #17398A;
  --brand-700: #122E6E;
  --brand-900: #102547;
  --brand-050: #EEF3FC;
  --brand-100: #DDE7F8;
  --brand-200: #BCCEF1;

  /* Accent — matches the logo's true sky blue (#65CDF2) */
  --accent: #65CDF2;
  --accent-600: #0B6B8E;
  --accent-050: #E9F7FC;
  /* Sky blue light enough to clear 4.5:1 on the brightest brand-gradient stop */
  --accent-on-dark: #9FDEF5;

  /* Ink & surfaces */
  --ink: #0F172A;
  --ink-2: #334155;
  --muted: #5A6478;
  --line: #E3E8F0;
  --line-2: #EEF1F6;
  --surface: #FFFFFF;
  --bg: #F7F9FC;

  /* Status */
  --ok: #0F7B4F;
  --err: #C0392B;

  /* Radii */
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Shadows */
  --sh-1: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .05);
  --sh-2: 0 4px 12px rgba(15, 23, 42, .07), 0 2px 4px rgba(15, 23, 42, .04);
  --sh-3: 0 18px 40px rgba(12, 31, 77, .12), 0 4px 10px rgba(12, 31, 77, .06);
  --sh-brand: 0 18px 40px rgba(29, 73, 167, .22);

  /* Spacing (8pt) */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;

  /* Type families */
  --font-head: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;

  /* Fluid type scale */
  --fs-hero: clamp(2.5rem, 1.60rem + 3.60vw, 3.75rem);   /* 40 → 60 */
  --fs-h1:   clamp(2.125rem, 1.55rem + 2.30vw, 3rem);    /* 34 → 48 */
  --fs-h2:   clamp(1.6875rem, 1.35rem + 1.35vw, 2.375rem); /* 27 → 38 */
  --fs-h3:   clamp(1.25rem, 1.13rem + 0.50vw, 1.5rem);   /* 20 → 24 */
  --fs-lead: clamp(1.0625rem, 1rem + 0.30vw, 1.25rem);   /* 17 → 20 */
  --fs-body: 1.03125rem;                                 /* 16.5 */
  --fs-sm: 0.90625rem;                                   /* 14.5 */
  --fs-xs: 0.8125rem;                                    /* 13 */

  /* Layout */
  --maxw: 1180px;
  --gutter: 20px;
  --header-h: 64px;
  --scroll-offset: 84px;

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --t-fast: 150ms;
  --t: 180ms;
  --t-slow: 300ms;
}

@media (min-width: 900px) {
  :root {
    --gutter: 32px;
    --header-h: 76px;
    --scroll-offset: 100px;
  }
}

/* ===== TYPOGRAPHY ======================================================= */

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink-2);
  background-color: var(--bg);
  overflow-x: clip;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.16;
  letter-spacing: -0.021em;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.28; letter-spacing: -0.012em; }
h4 { font-size: 1.0625rem; line-height: 1.35; letter-spacing: -0.008em; }
h5, h6 { font-size: var(--fs-sm); letter-spacing: 0; }

p {
  text-wrap: pretty;
}

strong, b { font-weight: 600; color: var(--ink); }

small { font-size: var(--fs-sm); }

a {
  color: var(--brand-600);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.18em;
  transition: color var(--t-fast) ease;
}

a:hover { color: var(--brand); }

/* Eyebrow — editorial serif kicker */
.eyebrow {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.3125rem);
  line-height: 1.3;
  letter-spacing: .005em;
  color: var(--accent-600);
  margin: 0 0 var(--s3);
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 62ch;
}

/* Long-form text */
.prose {
  max-width: 68ch;
}

.prose > * + * { margin-top: var(--s4); }
.prose > * + h2 { margin-top: var(--s7); }
.prose > * + h3 { margin-top: var(--s6); }
.prose h2 + *, .prose h3 + * { margin-top: var(--s3); }

.prose p { line-height: 1.75; }

.prose a {
  text-decoration: underline;
  font-weight: 500;
}

.prose ul,
.prose ol {
  padding-left: 1.2em;
  display: grid;
  gap: var(--s2);
}

.prose li::marker { color: var(--brand-200); }
.prose ol li::marker { color: var(--brand); font-weight: 700; }

.prose blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.25rem, 1.1rem + .7vw, 1.625rem);
  line-height: 1.4;
  color: var(--brand-700);
  border-left: 3px solid var(--accent);
  padding-left: var(--s5);
}

::selection {
  background: var(--brand-100);
  color: var(--brand-900);
}

/* Focus — never removed, applied everywhere */
:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Anchor targets clear the sticky header. :where() keeps specificity at 0. */
:where([id]) {
  scroll-margin-top: var(--scroll-offset);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ===== LAYOUT =========================================================== */

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

@media (min-width: 900px) {
  .section { padding-block: var(--s9); }
}

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

@media (min-width: 900px) {
  .section--tight { padding-block: var(--s8); }
}

/* The breadcrumb already supplies the gap under the title band, so the first
   section shouldn't stack a second full section's worth on top of it. */
.breadcrumb + .section { padding-top: var(--s6); }

@media (min-width: 900px) {
  .breadcrumb + .section { padding-top: var(--s7); }
}

.section--tint {
  background-color: var(--brand-050);
  background-image: linear-gradient(180deg, #EBF1FC 0%, #E5EDFB 50%, #EBF1FC 100%);
  border-block: 1px solid #DCE6F7;
}

.section-head {
  max-width: 720px;
  margin-bottom: var(--s7);
}

.section-head > * + * { margin-top: var(--s4); }
.section-head .eyebrow + h2,
.section-head .eyebrow + h1 { margin-top: 0; }

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head--center .lead {
  margin-inline: auto;
}

.section-head--center .btn-row {
  justify-content: center;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

.stack--lg { gap: var(--s6); }

/* Responsive card grids */
.grid {
  display: grid;
  gap: var(--s5);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .grid { gap: var(--s6); }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -120px;
  left: var(--s4);
  z-index: 300;
  display: inline-block;
  padding: 12px 20px;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-decoration: none;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  box-shadow: var(--sh-2);
  transition: top var(--t) ease;
}

.skip-link:focus {
  top: 0;
  color: #fff;
}

/* Breadcrumb */
.breadcrumb {
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* On inner pages the breadcrumb sits directly under the title band, where it
   would otherwise be glued to the hero's bottom edge. Give it its own room and
   pull the following section's top padding back so the gap doesn't double up. */
.hero--page + .breadcrumb {
  padding-block: var(--s5) var(--s4);
}

@media (min-width: 900px) {
  .hero--page + .breadcrumb { padding-block: var(--s6) var(--s5); }
}

.breadcrumb ol,
.breadcrumb ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  padding: 0;
  margin: 0;
}

.breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
}

.breadcrumb li + li::before {
  content: "/";
  color: var(--brand-200);
  font-weight: 600;
}

.breadcrumb a {
  color: var(--muted);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--brand);
  text-decoration: underline;
}

.breadcrumb [aria-current="page"] {
  color: var(--ink-2);
  font-weight: 600;
}

/* ===== BUTTONS ========================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 11px 22px;
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-head);
  font-size: 0.96875rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .005em;
  text-align: center;
  text-decoration: none;
  max-width: 100%;
  overflow-wrap: break-word;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition:
    transform var(--t) ease,
    background-color var(--t) ease,
    background-image var(--t) ease,
    border-color var(--t) ease,
    color var(--t) ease,
    box-shadow var(--t) ease;
}

.btn .icon {
  width: 18px;
  height: 18px;
  flex: none;
}

.btn:active { transform: translateY(1px); }

.btn:disabled,
.btn.is-disabled,
.btn[aria-disabled="true"] {
  opacity: .55;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}

/* Sizes */
.btn-sm {
  min-height: 44px;
  padding: 9px 16px;
  font-size: var(--fs-sm);
  gap: 8px;
}

.btn-sm .icon { width: 16px; height: 16px; }

.btn-lg {
  min-height: 48px;
  padding: 13px 30px;
  font-size: 1.03125rem;
  gap: 12px;
}

.btn-lg .icon { width: 20px; height: 20px; }

/* Primary — solid brand */
.btn-primary {
  background-color: var(--brand);
  background-image: linear-gradient(135deg, #2555B8 0%, var(--brand) 48%, var(--brand-600) 100%);
  color: #fff;
  border-color: var(--brand-600);
  box-shadow: var(--sh-1);
}

.btn-primary:hover {
  color: #fff;
  background-image: linear-gradient(135deg, var(--brand) 0%, var(--brand-600) 55%, var(--brand-700) 100%);
  box-shadow: var(--sh-brand);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: var(--sh-1);
}

/* Accent — sky blue with dark ink for contrast */
.btn-accent {
  background-color: var(--accent);
  background-image: linear-gradient(135deg, #ABE2F6 0%, var(--accent) 62%, #3DABD2 100%);
  color: var(--ink);
  border-color: #3DABD2;
  box-shadow: var(--sh-1);
}

.btn-accent:hover {
  color: var(--ink);
  background-image: linear-gradient(135deg, #B9E7F8 0%, #5EBFE3 60%, #3DABD2 100%);
  box-shadow: 0 16px 34px rgba(61, 171, 210, .30);
  transform: translateY(-1px);
}

.btn-accent:active { transform: translateY(0); box-shadow: var(--sh-1); }

/* Outline — brand border on light backgrounds */
.btn-outline {
  background-color: transparent;
  color: var(--brand-600);
  border-color: var(--brand-200);
}

.btn-outline:hover {
  color: var(--brand-700);
  background-color: var(--brand-050);
  border-color: var(--brand);
  transform: translateY(-1px);
}

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

/* Ghost — for dark sections */
.btn-ghost {
  background-color: rgba(255, 255, 255, .07);
  color: #fff;
  border-color: rgba(255, 255, 255, .48);
}

.btn-ghost:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .78);
  transform: translateY(-1px);
}

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

/* Quiet — subtle grey */
.btn-quiet {
  background-color: var(--line-2);
  color: var(--ink-2);
  border-color: var(--line);
}

.btn-quiet:hover {
  color: var(--ink);
  background-color: #E6EBF3;
  border-color: #D5DDE9;
  transform: translateY(-1px);
}

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

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s5);
}

.btn-row--center { justify-content: center; }

/* Plain (non-button) links in a button row still carry a trailing icon —
   keep the glyph on the same line as its label. */
.btn-row > a:not(.btn) {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-weight: 500;
  white-space: nowrap;
}

.btn-row > a:not(.btn) .icon {
  transition: transform var(--t) var(--ease);
}

.btn-row > a:not(.btn):hover .icon { transform: translateX(3px); }

/* Icons */
.icon {
  width: 20px;
  height: 20px;
  flex: none;
  vertical-align: middle;
}

.svc-icon {
  box-sizing: border-box;
  width: 52px;
  height: 52px;
  padding: 12px;
  flex: none;
  border-radius: var(--r);
  background-color: var(--brand-050);
  color: var(--brand);
  transition: background-color var(--t) ease, color var(--t) ease, transform var(--t) ease;
}

/* ===== HEADER / NAV ===================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.site-header.is-stuck {
  background-color: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: saturate(1.6) blur(10px);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom-color: var(--line);
  box-shadow: 0 6px 22px rgba(12, 31, 77, .08);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--s4);
  min-height: var(--header-h);
  transition: min-height 220ms ease;
}

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

@media (min-width: 900px) {
  .header-inner { gap: var(--s5); }
  .site-header.is-stuck .header-inner { min-height: 64px; }
}

.brand {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  margin-right: auto;
  text-decoration: none;
  border-radius: var(--r-sm);
}

/* Compact lockup (2.5:1) — navy ink on transparent, so it needs no field
   behind it. It sits on the hero at the top of the page and on the frosted
   white bar once stuck; both are light enough for the navy to hold up. */
.brand-logo {
  height: 42px;
  width: auto;
  transition: height 220ms ease;
}

.site-header.is-stuck .brand-logo { height: 36px; }

@media (min-width: 900px) {
  .brand-logo { height: 50px; }
  .site-header.is-stuck .brand-logo { height: 42px; }
}

/* Header phone — desktop-wide only */
.header-phone {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background-color: var(--surface);
  color: var(--brand-700);
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--t) ease, border-color var(--t) ease, color var(--t) ease;
}

.header-phone .icon { width: 17px; height: 17px; color: var(--brand); }

.header-phone:hover {
  color: var(--brand);
  background-color: var(--brand-050);
  border-color: var(--brand-200);
}

@media (min-width: 1120px) {
  .header-phone { display: inline-flex; }
}

/* Nav toggle (mobile) */
.nav-toggle {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background-color: var(--surface);
  color: var(--ink);
  box-shadow: var(--sh-1);
  transition: background-color var(--t) ease, border-color var(--t) ease;
}

.nav-toggle:hover {
  background-color: var(--brand-050);
  border-color: var(--brand-200);
}

.nav-toggle-bars {
  position: relative;
  display: block;
  width: 20px;
  height: 14px;
}

.nav-toggle-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: currentColor;
  transition: transform 240ms var(--ease), opacity 160ms ease;
}

.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 6px; }
.nav-toggle-bars span:nth-child(3) { top: 12px; }

body.nav-open .nav-toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .nav-toggle-bars span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Nav scrim (sits below the header bar, above page content) */
.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  background-color: rgba(11, 31, 77, .52);
  opacity: 0;
  transition: opacity 260ms ease;
}

body.nav-open .nav-scrim { opacity: 1; }

/* --- Mobile: off-canvas panel ------------------------------------------ */
@media (max-width: 899.98px) {
  .nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: min(88vw, 340px);
    display: flex;
    flex-direction: column;
    gap: var(--s5);
    padding: 84px var(--s5) var(--s6);
    background-color: var(--surface);
    box-shadow: -18px 0 52px rgba(12, 31, 77, .22);
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
    transform: translateX(102%);
    transition:
      transform 300ms var(--ease),
      visibility 0s linear 300ms;
  }

  body.nav-open .nav {
    visibility: visible;
    transform: translateX(0);
    transition:
      transform 300ms var(--ease),
      visibility 0s linear 0s;
  }

  body.nav-open {
    overflow: hidden;
  }

  .nav-list {
    list-style: none;
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
  }

  .nav-list a {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 var(--s3);
    border-radius: var(--r-sm);
    font-family: var(--font-head);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    transition: background-color var(--t) ease, color var(--t) ease;
  }

  .nav-list a:hover { background-color: var(--brand-050); color: var(--brand); }

  .nav-list a.is-active,
  .nav-list a[aria-current="page"] {
    color: var(--brand);
    background-color: var(--brand-050);
  }

  .nav-cta {
    margin-top: auto;
    padding-top: var(--s5);
    border-top: 1px solid var(--line-2);
  }

  .nav-cta .btn { width: 100%; }
}

/* --- Desktop: horizontal bar ------------------------------------------- */
@media (min-width: 900px) {
  .nav {
    display: flex;
    align-items: center;
    gap: var(--s5);
    margin-left: auto;
  }

  .nav-list {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 0;
  }

  .nav-list a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 12px;
    border-radius: var(--r-sm);
    font-family: var(--font-head);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-2);
    text-decoration: none;
    transition: color var(--t) ease, background-color var(--t) ease;
  }

  .nav-list a::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 4px;
    height: 2px;
    border-radius: 2px;
    background-color: var(--brand);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 220ms var(--ease);
  }

  .nav-list a:hover { color: var(--brand); }
  .nav-list a:hover::after { transform: scaleX(1); }

  .nav-list a.is-active,
  .nav-list a[aria-current="page"] {
    color: var(--brand);
  }

  .nav-list a.is-active::after,
  .nav-list a[aria-current="page"]::after {
    transform: scaleX(1);
  }

  .nav-toggle { display: none; }
  .nav-scrim { display: none; }
}

@media (min-width: 1120px) {
  .nav-list a { padding: 0 14px; font-size: 0.9375rem; }
  .nav-list a::after { left: 14px; right: 14px; }
}

/* ===== HERO ============================================================= */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--s8);
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background-color: var(--bg);
  background-image:
    radial-gradient(40rem 30rem at 2% 24%, rgba(29, 73, 167, .24), rgba(29, 73, 167, 0) 64%),
    radial-gradient(34rem 26rem at 97% 20%, rgba(101, 205, 242, .26), rgba(101, 205, 242, 0) 62%),
    radial-gradient(48rem 34rem at 66% 104%, rgba(120, 160, 232, .42), rgba(120, 160, 232, 0) 68%),
    linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, 0) 28%),
    linear-gradient(0deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 14%);
}

/* Faint dot grid, faded out toward the copy */
.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(29, 73, 167, .18) 1px, rgba(0, 0, 0, 0) 1px);
  background-size: 22px 22px;
  opacity: .55;
  -webkit-mask-image: radial-gradient(120% 95% at 60% 8%, #000 0%, rgba(0, 0, 0, 0) 72%);
  mask-image: radial-gradient(120% 95% at 60% 8%, #000 0%, rgba(0, 0, 0, 0) 72%);
}

/* Decorative flight arc */
.hero-bg::after {
  content: "";
  position: absolute;
  left: 46%;
  bottom: -78%;
  width: min(1500px, 150%);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1.5px dashed rgba(29, 73, 167, .16);
}

/* Photo/video hero backgrounds. .hero-bg--media swaps the plain gradient
   for real media; .hero-scrim (painted after the media in DOM order, so it
   layers on top) keeps the copy legible without hiding the photo entirely. */
.hero-bg--media { background-image: none; }
.hero-bg--media::before { content: none; }

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-media picture,
.hero-media video {
  position: absolute;
  inset: 0;
}

.hero-media img,
.hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(100deg, rgba(247, 249, 252, .96) 0%, rgba(247, 249, 252, .86) 32%, rgba(247, 249, 252, .34) 60%, rgba(247, 249, 252, .06) 84%),
    linear-gradient(180deg, rgba(247, 249, 252, .88) 0%, rgba(247, 249, 252, 0) 20%),
    linear-gradient(0deg, rgba(247, 249, 252, 1) 0%, rgba(247, 249, 252, 0) 12%);
}

@media (max-width: 599px) {
  .hero-scrim {
    background-image:
      linear-gradient(180deg, rgba(247, 249, 252, .95) 0%, rgba(247, 249, 252, .9) 55%, rgba(247, 249, 252, .74) 100%),
      linear-gradient(0deg, rgba(247, 249, 252, 1) 0%, rgba(247, 249, 252, 0) 14%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-media video { display: none; }
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--s7);
  align-items: center;
}

.hero-copy {
  max-width: 40rem;
}

.hero-copy > * + * { margin-top: var(--s4); }
.hero-copy .eyebrow { margin-bottom: 0; }
.hero-copy .lead { margin-top: var(--s5); }
.hero-copy .btn-row { margin-top: var(--s6); }

.hero h1 {
  font-size: var(--fs-hero);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.032em;
  color: var(--ink);
}

.hero .breadcrumb { margin-bottom: var(--s4); }

/* Hero bullet list */
.hero-points {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: var(--s6) 0 0;
  padding: 0;
}

.hero-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-2);
}

.hero-points li svg,
.hero-points li .icon {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 3px;
  color: var(--brand);
}

/* Fallback bullet when the markup has no inline icon.
   Browsers without :has() simply drop this rule — no double marker. */
.hero-points li:not(:has(svg))::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: 9px;
  border-radius: 50%;
  background-color: var(--accent);
}

@media (min-width: 560px) {
  .hero-points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px var(--s5); }
}

/* Home hero — two columns from 900px */
@media (min-width: 900px) {
  .hero--home { padding-block: 88px 96px; }

  .hero--home .hero-inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: var(--s8);
  }
}

@media (min-width: 1120px) {
  .hero--home .hero-inner { gap: var(--s9); }
}

.hero-visual {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--s4);
}

/* Single-column range: the hero art sits under the copy, so cap it — at full
   tablet width it otherwise pushes the next section far below the fold. */
@media (max-width: 899px) {
  .hero-visual {
    width: 100%;
    max-width: 460px;
    margin-inline: auto;
  }
}

.hero-visual > img,
.hero-visual > svg,
.hero-visual > picture,
.hero-visual > picture > img {
  width: 100%;
  height: auto;
  border-radius: var(--r-xl);
}

.hero-visual > img,
.hero-visual > svg,
.hero-visual > picture > img {
  box-shadow: var(--sh-3);
  background-color: var(--surface);
}

.hero-visual::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 8% -6% -10% -6%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(29, 73, 167, .18), rgba(29, 73, 167, 0));
  filter: blur(6px);
}

/* Inner-page hero — shorter, single column.
   The bottom is deliberately deeper than the top: the title needs to finish
   clearly before the page content starts. */
.hero--page {
  padding-block: var(--s7) var(--s8);
}

.hero--page .hero-inner {
  max-width: 830px;
  gap: var(--s5);
}

.hero--page h1 {
  font-size: var(--fs-h1);
  line-height: 1.1;
}

@media (min-width: 900px) {
  .hero--page { padding-block: var(--s8) var(--s9); }
}

/* ===== CARDS & GRIDS ==================================================== */

.card {
  position: relative;
  display: block;
  padding: var(--s5);
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition:
    transform var(--t-slow) var(--ease),
    box-shadow var(--t-slow) ease,
    border-color var(--t-slow) ease;
}

.card > * + * { margin-top: var(--s3); }

.card h3 { color: var(--ink); }

a.card,
.card a.card {
  color: inherit;
  text-decoration: none;
}

a.card:hover {
  transform: translateY(-3px);
  border-color: var(--brand-200);
  box-shadow: var(--sh-2);
}

@media (min-width: 900px) {
  .card { padding: var(--s6); }
}

/* --- Service card ------------------------------------------------------ */
.svc-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s4);
  padding-bottom: var(--s6);
  color: inherit;
  text-decoration: none;
}

.svc-card > * + * { margin-top: 0; }

.svc-card h3 {
  font-size: var(--fs-h3);
  color: var(--ink);
}

.svc-card p {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--muted);
}

.svc-card:hover {
  transform: translateY(-3px);
  border-color: var(--brand-200);
  box-shadow: var(--sh-2);
}

.svc-card:hover .svc-icon {
  background-color: var(--brand-100);
  color: var(--brand-600);
}

/* Arrow affordance, nudges on hover */
.svc-card::after {
  content: "";
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--brand);
  border-top: 2px solid var(--brand);
  transform: rotate(45deg);
  opacity: .4;
  transition: transform var(--t) ease, opacity var(--t) ease;
}

.svc-card:hover::after {
  opacity: 1;
  transform: translateX(4px) rotate(45deg);
}

/* --- Destination card -------------------------------------------------- */
.dest-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}

.dest-card > * + * { margin-top: 0; }

.dest-media {
  display: block;
}

.dest-art {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background-color: var(--brand-050);
  border-bottom: 1px solid var(--line-2);
  transition: transform 480ms var(--ease);
}

.dest-card:hover,
.dest-card:focus-within {
  transform: translateY(-3px);
  border-color: var(--brand-200);
  box-shadow: var(--sh-2);
}

.dest-card:hover .dest-art,
.dest-card:focus-within .dest-art {
  transform: scale(1.045);
}

.dest-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  padding: var(--s5);
}

.dest-body h3 {
  font-size: var(--fs-h3);
  color: var(--ink);
}

.dest-body p {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--muted);
}

.dest-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: var(--s2);
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--brand-600);
  text-decoration: none;
}

.dest-link .icon {
  width: 17px;
  height: 17px;
  transition: transform var(--t) ease;
}

.dest-link:hover {
  color: var(--brand);
  text-decoration: underline;
}

.dest-card:hover .dest-link .icon,
.dest-link:hover .icon {
  transform: translateX(4px);
}

/* --- Why card ---------------------------------------------------------- */
.why-card {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding: var(--s5);
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}

.why-card > .icon {
  box-sizing: border-box;
  width: 46px;
  height: 46px;
  padding: 11px;
  border-radius: var(--r);
  background-color: var(--accent-050);
  color: var(--accent-600);
}

.why-card h3 {
  font-size: 1.125rem;
  color: var(--ink);
}

.why-card p {
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--muted);
}

@media (min-width: 900px) {
  .why-card { padding: var(--s6); }
}

/* --- Step -------------------------------------------------------------- */
.step {
  position: relative;
  padding: var(--s6) var(--s5) var(--s5);
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  overflow: hidden;
}

.step-num {
  position: absolute;
  top: 2px;
  right: 16px;
  z-index: 0;
  display: block;
  font-family: var(--font-head);
  font-size: clamp(3.25rem, 2.6rem + 2.6vw, 4.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--brand-100);
  pointer-events: none;
  user-select: none;
}

.step > :not(.step-num) {
  position: relative;
  z-index: 1;
}

.step h3 {
  font-size: var(--fs-h3);
  color: var(--ink);
  margin-right: 62px;
}

.step p {
  margin-top: var(--s3);
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--muted);
}

@media (min-width: 900px) {
  .step { padding: var(--s7) var(--s6) var(--s6); }
}

/* --- Stat -------------------------------------------------------------- */
.stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-num {
  font-family: var(--font-head);
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--brand);
}

.stat-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- Contact card ------------------------------------------------------ */
.contact-card {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s5);
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: border-color var(--t) ease, box-shadow var(--t) ease, transform var(--t-slow) var(--ease);
}

.contact-card:hover {
  border-color: var(--brand-200);
  box-shadow: var(--sh-2);
  transform: translateY(-2px);
}

.contact-card > .icon {
  box-sizing: border-box;
  width: 46px;
  height: 46px;
  padding: 11px;
  border-radius: var(--r);
  background-color: var(--brand-050);
  color: var(--brand);
}

.contact-card h3 {
  font-size: 1.0625rem;
  color: var(--ink);
}

.contact-card p {
  font-size: var(--fs-sm);
  color: var(--muted);
}

.contact-card a {
  font-family: var(--font-head);
  font-size: 1.03125rem;
  font-weight: 600;
  color: var(--brand-600);
  overflow-wrap: anywhere;
}

.contact-card .btn { align-self: flex-start; margin-top: var(--s2); }

@media (min-width: 900px) {
  .contact-card { padding: var(--s6); }
}

/* ===== SECTIONS & BANDS ================================================= */

:is(.section--dark, .cta-band) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: rgba(255, 255, 255, .84);
  background-color: var(--brand-900);
  background-image: linear-gradient(158deg, var(--brand-900) 0%, var(--brand-700) 52%, var(--brand-600) 100%);
}

:is(.section--dark, .cta-band)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(38rem 26rem at 88% -10%, rgba(101, 205, 242, .22), rgba(101, 205, 242, 0) 62%),
    radial-gradient(42rem 32rem at 2% 120%, rgba(59, 110, 214, .26), rgba(59, 110, 214, 0) 68%);
}

:is(.section--dark, .cta-band) h1,
:is(.section--dark, .cta-band) h2,
:is(.section--dark, .cta-band) h3,
:is(.section--dark, .cta-band) h4,
:is(.section--dark, .cta-band) strong {
  color: #fff;
}

:is(.section--dark, .cta-band) .eyebrow { color: var(--accent-on-dark); }

:is(.section--dark, .cta-band) .lead,
:is(.section--dark, .cta-band) p {
  color: rgba(255, 255, 255, .84);
}

:is(.section--dark, .cta-band) a:not(.btn) {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

:is(.section--dark, .cta-band) a:not(.btn):hover { color: var(--accent-on-dark); }

:is(.section--dark, .cta-band) hr,
:is(.section--dark, .cta-band) .accordion,
:is(.section--dark, .cta-band) .acc-item {
  border-color: rgba(255, 255, 255, .18);
}

:is(.section--dark, .cta-band) :focus-visible {
  outline-color: #CDF2FF;
}

/* Dark-section component variants */
:is(.section--dark, .cta-band) .card,
:is(.section--dark, .cta-band) .why-card,
:is(.section--dark, .cta-band) .step,
:is(.section--dark, .cta-band) .contact-card {
  background-color: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .16);
  box-shadow: none;
  color: rgba(255, 255, 255, .84);
}

:is(.section--dark, .cta-band) a.card:hover,
:is(.section--dark, .cta-band) .svc-card:hover,
:is(.section--dark, .cta-band) .dest-card:hover {
  background-color: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .34);
}

:is(.section--dark, .cta-band) .why-card p,
:is(.section--dark, .cta-band) .step p,
:is(.section--dark, .cta-band) .svc-card p,
:is(.section--dark, .cta-band) .dest-body p {
  color: rgba(255, 255, 255, .78);
}

:is(.section--dark, .cta-band) .why-card > .icon {
  background-color: rgba(101, 205, 242, .20);
  color: var(--accent-on-dark);
}

:is(.section--dark, .cta-band) .svc-icon,
:is(.section--dark, .cta-band) .contact-card > .icon {
  background-color: rgba(255, 255, 255, .12);
  color: #fff;
}

:is(.section--dark, .cta-band) .step-num { color: rgba(255, 255, 255, .17); }
:is(.section--dark, .cta-band) .stat-num { color: var(--accent-on-dark); }
:is(.section--dark, .cta-band) .stat-label { color: rgba(255, 255, 255, .7); }

/* A solid brand-blue button on the brand-blue band is nearly invisible, so the
   primary CTA promotes to sky blue on dark — the one dominant action per band.
   Dark ink on sky blue clears AA; white would not. */
:is(.section--dark, .cta-band) .btn-primary {
  color: var(--ink);
  background: linear-gradient(180deg, #98DBF3, var(--accent));
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
}

:is(.section--dark, .cta-band) .btn-primary:hover {
  background: linear-gradient(180deg, #A4DFF5, #43B5DE);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .28);
}

:is(.section--dark, .cta-band) .btn-outline {
  color: #fff;
  border-color: rgba(255, 255, 255, .48);
  background-color: rgba(255, 255, 255, .07);
}

:is(.section--dark, .cta-band) .btn-outline:hover {
  background-color: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .78);
}

:is(.section--dark, .cta-band) .btn-quiet {
  background-color: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .28);
  color: #fff;
}

:is(.section--dark, .cta-band) .btn-quiet:hover {
  background-color: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .5);
  color: #fff;
}

:is(.section--dark, .cta-band) .hero-points li { color: rgba(255, 255, 255, .84); }
:is(.section--dark, .cta-band) .hero-points li svg { color: var(--accent-on-dark); }

/* --- Closing CTA band -------------------------------------------------- */
.cta-band {
  padding-block: var(--s8);
  text-align: center;
  background-image: linear-gradient(135deg, var(--brand-700) 0%, var(--brand) 52%, var(--brand-600) 100%);
}

@media (min-width: 900px) {
  .cta-band { padding-block: var(--s9); }
}

/* Two concentric dashed arcs — a flight-path motif drawn in CSS */
.cta-band::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -132%;
  z-index: -1;
  width: min(1600px, 185%);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1.5px dashed rgba(255, 255, 255, .24);
  pointer-events: none;
}

.cta-band .container {
  position: relative;
  z-index: 1;
}

.cta-band .section-head,
.cta-band .lead,
.cta-band .prose {
  margin-inline: auto;
  text-align: center;
}

.cta-band h2 {
  font-size: var(--fs-h2);
  max-width: 20ch;
  margin-inline: auto;
}

.cta-band .lead { max-width: 56ch; }

.cta-band .btn-row {
  justify-content: center;
  margin-top: var(--s6);
}

/* A second, tighter arc for depth */
.cta-band .container::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -175%;
  z-index: -1;
  width: min(1200px, 150%);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, .16);
  pointer-events: none;
}

.cta-band .btn-row + p {
  margin-top: var(--s5);
}

/* ===== ACCORDION ======================================================== */

.accordion {
  border-top: 1px solid var(--line);
  max-width: 860px;
}

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

/* The trigger is wrapped in <h2 class="acc-h"> for heading semantics, so the
   heading — not the button — carries the visual type reset. */
.acc-h {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

.acc-trigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 60px;
  padding: var(--s5) 4px;
  font-family: var(--font-head);
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.1875rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.012em;
  text-align: left;
  color: var(--ink);
  transition: color var(--t) ease;
}

.acc-trigger:hover { color: var(--brand); }

.acc-trigger::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  margin-right: 8px;
  border-right: 2.25px solid var(--brand);
  border-bottom: 2.25px solid var(--brand);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 240ms var(--ease);
}

.acc-trigger[aria-expanded="true"] {
  color: var(--brand);
}

.acc-trigger[aria-expanded="true"]::after {
  transform: translateY(2px) rotate(225deg);
}

/* The markup supplies its own chevron in .acc-icon, so the CSS pseudo-chevron
   above is only a fallback for triggers authored without one. */
.acc-trigger:has(.acc-icon)::after { content: none; }

.acc-title {
  flex: 1 1 auto;
}

.acc-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--brand);
  background: var(--brand-050);
  transition: transform 240ms var(--ease), background var(--t) ease,
              color var(--t) ease;
}

.acc-trigger:hover .acc-icon { background: var(--brand-100); }

.acc-trigger[aria-expanded="true"] .acc-icon {
  transform: rotate(180deg);
  background: var(--brand);
  color: #fff;
}

.acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms var(--ease);
}

/* Open state cannot use an adjacent-sibling selector: the trigger is nested
   inside .acc-h, so the panel is a sibling of the heading, not of the button.
   main.js sets .is-open on .acc-item; :has() covers it before JS boots. */
.acc-item.is-open > .acc-panel,
.acc-item:has(.acc-trigger[aria-expanded="true"]) > .acc-panel,
.acc-trigger[aria-expanded="true"] + .acc-panel {
  grid-template-rows: 1fr;
}

.acc-panel > * {
  min-height: 0;
  overflow: hidden;
}

.acc-panel-inner {
  min-height: 0;
  overflow: hidden;
}

.acc-panel > :last-child {
  padding-bottom: var(--s5);
}

.acc-panel p {
  max-width: 68ch;
  color: var(--ink-2);
  line-height: 1.72;
}

.acc-panel p + p { margin-top: var(--s3); }

:is(.section--dark, .cta-band) .acc-trigger { color: #fff; }
:is(.section--dark, .cta-band) .acc-trigger::after { border-color: var(--accent-on-dark); }
:is(.section--dark, .cta-band) .acc-panel p { color: rgba(255, 255, 255, .82); }
:is(.section--dark, .cta-band) .acc-icon {
  color: var(--accent-on-dark);
  background: rgba(255, 255, 255, .12);
}
:is(.section--dark, .cta-band) .acc-trigger[aria-expanded="true"] .acc-icon {
  color: var(--brand-900);
  background: var(--accent-on-dark);
}

/* ===== FORMS ============================================================ */

/* Contact page: .form-main / .form-aside are the two columns of a .grid--2. */
.form-main,
.form-aside {
  min-width: 0;
}

.form-main > h2 {
  margin-bottom: var(--s2);
}

.form-note {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--muted);
  max-width: 60ch;
}

.form-note + .form { margin-top: var(--s5); }
.form + .form-note,
.form-status + .form-note { margin-top: var(--s4); }

.form-note .req { color: var(--err); }
.form-note a { color: var(--brand); font-weight: 500; }

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4);
  margin-top: var(--s2);
}

.form-aside {
  align-self: start;
  padding: var(--s6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-1);
}

.form-aside > h2 {
  font-size: var(--fs-h3);
  margin-bottom: var(--s5);
}

@media (min-width: 900px) {
  .form-aside { position: sticky; top: calc(64px + var(--s5)); }
}

.form {
  display: grid;
  gap: var(--s6);
  max-width: 720px;
}

/* Fieldsets group related inputs for screen readers; the UA border and the
   notched legend cut-out are stripped so the grouping reads as a section. */
.form fieldset {
  display: grid;
  gap: var(--s5);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.form legend {
  display: block;
  width: 100%;
  padding: 0 0 var(--s3);
  margin-bottom: var(--s2);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-head);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--brand-600);
}

.form-row {
  display: grid;
  gap: var(--s5);
}

@media (min-width: 640px) {
  .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.field {
  display: grid;
  gap: 8px;
  min-width: 0;
}

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

.field label {
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
}

.field label .req,
.field .req {
  color: var(--err);
  margin-left: 2px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 16px; /* keeps iOS from zooming on focus */
  line-height: 1.5;
  color: var(--ink);
  background-color: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--t) ease, background-color var(--t) ease;
}

.field input::placeholder,
.field textarea::placeholder {
  color: #9AA4B5;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--brand-200);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--brand);
}

.field textarea {
  min-height: 148px;
  line-height: 1.6;
  resize: vertical;
}

/* Custom select chevron */
.field select {
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235A6478' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 20px 20px;
  cursor: pointer;
}

.field select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231D49A7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.field-hint {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--muted);
}

.field-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.45;
  color: var(--err);
}

.field-error .icon {
  width: 14px;
  height: 14px;
  margin-top: 2px;
}

/* Alert glyph when the markup supplies no inline icon.
   Dropped whole in browsers without :has() — never doubles up. */
.field-error:not(:has(svg))::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Cpath d='M12 16.6v.2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Cpath d='M12 16.6v.2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea,
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--err);
  background-color: #FDF6F5;
}

.field.has-error label { color: var(--err); }

/* Success / status panel */
.form-status {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  border: 1px solid rgba(15, 123, 79, .28);
  border-left: 4px solid var(--ok);
  border-radius: var(--r);
  background-color: #ECFAF3;
  color: #0B5C3B;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.55;
}

.form-status::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  background-color: var(--ok);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='m8 12.4 2.6 2.6L16 9.6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='m8 12.4 2.6 2.6L16 9.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.form-status strong { color: #094A2F; }

.form-status--error {
  border-color: rgba(192, 57, 43, .28);
  border-left-color: var(--err);
  background-color: #FDF3F2;
  color: #8E2A20;
}

.form-status--error::before {
  background-color: var(--err);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Cpath d='M12 16.6v.2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Cpath d='M12 16.6v.2'/%3E%3C/svg%3E");
}

.form .btn { justify-self: start; }

/* Search field (destinations filter) */
.search-field {
  position: relative;
  display: block;
  max-width: 380px;
  width: 100%;
}

.search-field input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px 12px 42px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235A6478' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 13px center;
  background-size: 19px 19px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--t) ease;
}

.search-field input:hover { border-color: var(--brand-200); }
.search-field input:focus { border-color: var(--brand); }

/* ===== CHIPS · MARQUEE · MISC =========================================== */

.chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 18px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  background-color: var(--surface);
  color: var(--ink-2);
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--t) ease,
    border-color var(--t) ease,
    color var(--t) ease,
    box-shadow var(--t) ease;
}

.chip:hover {
  color: var(--brand-700);
  background-color: var(--brand-050);
  border-color: var(--brand-200);
}

.chip[aria-pressed="true"],
.chip.is-active {
  color: #fff;
  background-color: var(--brand);
  border-color: var(--brand);
  box-shadow: var(--sh-1);
}

.chip[aria-pressed="true"]:hover,
.chip.is-active:hover {
  color: #fff;
  background-color: var(--brand-600);
  border-color: var(--brand-600);
}

/* Filter toolbar + results state (destinations page) */
.dest-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4);
  margin-bottom: var(--s5);
}

.results-count {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-bottom: var(--s5);
}

.empty-state {
  padding: var(--s7) var(--s5);
  text-align: center;
  border: 1px dashed var(--brand-200);
  border-radius: var(--r-lg);
  background-color: var(--brand-050);
  color: var(--ink-2);
}

.empty-state h3 { margin-bottom: var(--s2); }
.empty-state p { color: var(--muted); font-size: var(--fs-sm); }

/* --- Marquee ----------------------------------------------------------- */
.marquee {
  position: relative;
  overflow: hidden;
  padding-block: var(--s4);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: var(--s5);
  width: max-content;
  animation: hoy-marquee 44s linear infinite;
  will-change: transform;
}

@keyframes hoy-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track {
  animation-play-state: paused;
}

.marquee-track > * {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s5);
  font-family: var(--font-head);
  font-size: clamp(1.125rem, 1rem + .8vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--brand-700);
  white-space: nowrap;
  text-decoration: none;
}

.marquee-track > * + *::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--accent);
  opacity: .85;
}

a.marquee-item:hover,
.marquee-track > a:hover {
  color: var(--brand);
}

:is(.section--dark, .cta-band) .marquee-track > * { color: rgba(255, 255, 255, .9); }

/* --- Services sticky side nav ------------------------------------------ */
.svc-layout {
  display: grid;
  gap: var(--s6);
  align-items: start;
}

/* Second grid child — min-width:0 stops long words and the sticky index from
   forcing the column past its track. */
.svc-content {
  min-width: 0;
}

.svc-nav {
  display: none;
}

.svc-nav ul {
  list-style: none;
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
}

.svc-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-left: 2px solid transparent;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.35;
  color: var(--muted);
  text-decoration: none;
  transition: color var(--t) ease, background-color var(--t) ease, border-color var(--t) ease;
}

.svc-nav a .icon {
  width: 17px;
  height: 17px;
  opacity: .75;
}

.svc-nav a.is-current .icon { opacity: 1; }

.svc-nav a:hover {
  color: var(--brand-700);
  background-color: var(--brand-050);
}

.svc-nav a.is-current {
  color: var(--brand-700);
  background-color: var(--brand-050);
  border-left-color: var(--brand);
}

.svc-nav-title,
.svc-nav h2 {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s3);
  padding-left: 14px;
}

.svc-section + .svc-section {
  margin-top: var(--s7);
  padding-top: var(--s7);
  border-top: 1px solid var(--line);
}

.svc-section h2 {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin-bottom: var(--s4);
}

.svc-section .svc-icon { margin-bottom: var(--s4); }

@media (min-width: 1024px) {
  .svc-layout {
    grid-template-columns: 250px minmax(0, 1fr);
    gap: var(--s8);
  }

  .svc-nav {
    display: block;
    position: sticky;
    top: calc(64px + var(--s5));
    max-height: calc(100vh - 64px - var(--s7));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* --- Reveal on scroll (JS only) ---------------------------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 550ms ease, transform 550ms var(--ease);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

.js .grid > .reveal:nth-child(2) { transition-delay: 60ms; }
.js .grid > .reveal:nth-child(3) { transition-delay: 120ms; }
.js .grid > .reveal:nth-child(4) { transition-delay: 180ms; }
.js .grid > .reveal:nth-child(5) { transition-delay: 60ms; }
.js .grid > .reveal:nth-child(6) { transition-delay: 120ms; }

/* ===== FOOTER =========================================================== */

.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--s8) var(--s5);
  color: rgba(255, 255, 255, .78);
  background-color: var(--brand-900);
  background-image: linear-gradient(160deg, var(--brand-900) 0%, var(--brand-700) 70%, #143681 100%);
  font-size: var(--fs-sm);
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(36rem 24rem at 92% -14%, rgba(101, 205, 242, .18), rgba(101, 205, 242, 0) 62%),
    radial-gradient(40rem 28rem at 4% 112%, rgba(59, 110, 214, .30), rgba(59, 110, 214, 0) 66%);
}

.footer-top {
  display: grid;
  gap: var(--s6);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s5); }
  .footer-brand { grid-column: 1 / -1; }
}

@media (min-width: 900px) {
  .footer-top { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s7) var(--s5); }
}

@media (min-width: 1120px) {
  .footer-top {
    /* Last column holds the email address, which cannot hyphenate — give it
       more track than the link lists so it stays on one line. */
    grid-template-columns:
      minmax(0, 1.25fr) repeat(3, minmax(0, .9fr)) minmax(0, 1.2fr);
    gap: var(--s6) var(--s6);
  }
  .footer-brand { grid-column: auto; }
}

.footer-brand {
  max-width: 34rem;
}

/* Same lockup, white ink — the footer runs a dark blue gradient. */
.footer-logo {
  height: 50px;
  width: auto;
}

.footer-tag {
  margin-top: var(--s4);
  max-width: 32ch;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: rgba(255, 255, 255, .78);
}

.footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--s5);
}

.footer-col ul {
  list-style: none;
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
}

.footer-h {
  font-family: var(--font-head);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--s4);
}

.footer-col a {
  display: inline-block;
  color: rgba(255, 255, 255, .78);
  font-size: var(--fs-sm);
  line-height: 1.45;
  text-decoration: none;
  transition: color var(--t) ease;
}

.footer-col a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

.footer-contact li a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  overflow-wrap: anywhere;
  font-size: var(--fs-sm);
}

.footer-contact .icon {
  width: 18px;
  height: 18px;
  color: var(--accent);
}

.site-footer .btn-quiet {
  background-color: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .28);
  color: #fff;
}

.site-footer .btn-quiet:hover {
  background-color: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .52);
  color: #fff;
}

.site-footer :focus-visible {
  outline-color: #CDF2FF;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3) var(--s5);
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid rgba(255, 255, 255, .15);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, .64);
}

.footer-bottom p { margin: 0; }

.footer-made {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, .72);
}

/* ===== UTILITIES ======================================================== */

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

.text-center { text-align: center; }
.text-balance { text-wrap: balance; }
.measure { max-width: 68ch; }
.nowrap { white-space: nowrap; }
.center { margin-inline: auto; }

.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-4 { margin-top: var(--s4); }
.mt-5 { margin-top: var(--s5); }
.mt-6 { margin-top: var(--s6); }
.mt-7 { margin-top: var(--s7); }

@media (max-width: 639.98px) {
  .hide-sm { display: none !important; }
}

@media (min-width: 900px) {
  .hide-lg { display: none !important; }
}

/* ===== REDUCED MOTION =================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }

  html { scroll-behavior: auto; }

  .js .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .marquee-track {
    animation: none !important;
    transform: none !important;
  }

  .dest-card:hover .dest-art,
  .dest-card:focus-within .dest-art {
    transform: none;
  }

  .btn:hover,
  a.card:hover,
  .svc-card:hover,
  .dest-card:hover,
  .contact-card:hover {
    transform: none;
  }
}

/* ===== ENQUIRY MODAL ==================================================== */

/* The dialog is injected by assets/js/enquiry-modal.js. With JS off none of
   this matches and the triggers stay plain links to contact.html. */

.enq-modal {
  width: min(920px, calc(100vw - 2 * var(--s4)));
  max-width: 100%;
  max-height: min(92dvh, 92vh);
  padding: 0;
  border: 0;
  border-radius: var(--r-xl);
  background: transparent;
  overflow: visible;
  color: var(--ink);
}

.enq-modal::backdrop {
  background: rgba(11, 31, 77, .55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* Keep the page behind from scrolling while the dialog owns the screen. */
.has-modal,
.has-modal body { overflow: hidden; }

.enq-box {
  display: flex;
  flex-direction: column;
  max-height: min(92dvh, 92vh);
  background-color: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: 0 32px 80px rgba(11, 31, 77, .35);
  overflow: hidden;
}

/* ---- header ---- */

.enq-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s5) var(--s5) var(--s4);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--brand-050), var(--surface));
}

.enq-head .eyebrow { margin-bottom: var(--s1); }

.enq-title {
  margin: 0;
  font-size: var(--fs-h3);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.enq-close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -6px -6px 0 0;
  padding: 0;
  color: var(--ink-2);
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: var(--r);
  cursor: pointer;
  transition: background-color var(--t) ease, color var(--t) ease;
}

.enq-close:hover {
  color: var(--brand);
  background-color: #fff;
  border-color: var(--line);
}

.enq-close .icon { width: 20px; height: 20px; }

/* ---- step rail ---- */

.enq-steps {
  display: flex;
  gap: var(--s2);
  list-style: none;
  margin: 0;
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line);
}

.enq-step {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-width: 0;
  padding: 6px 10px 6px 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--muted);
  border-radius: 999px;
  transition: color var(--t) ease, background-color var(--t) ease;
}

.enq-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  background-color: var(--brand-050);
  border: 1px solid var(--line);
  border-radius: 50%;
}

.enq-step-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.enq-step.is-current {
  color: var(--brand-700);
  background-color: var(--brand-050);
}

.enq-step.is-current .enq-step-num {
  color: #fff;
  background-color: var(--brand);
  border-color: var(--brand);
}

.enq-step.is-done .enq-step-num {
  color: #fff;
  background-color: var(--accent-600);
  border-color: var(--accent-600);
}

/* Below 560px the labels crowd out; the numbers still carry the progress. */
@media (max-width: 559px) {
  .enq-steps { padding-inline: var(--s4); }
  .enq-step:not(.is-current) .enq-step-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ---- body ---- */

.enq-body {
  padding: var(--s5);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.enq-form { gap: var(--s5); }

.enq-panel {
  display: grid;
  gap: var(--s5);
}

.enq-panel[hidden] { display: none; }

.enq-grid {
  display: grid;
  gap: var(--s4);
}

@media (min-width: 640px) {
  .enq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .enq-grid .field--wide { grid-column: 1 / -1; }
}

/* `align-content` keeps a field whose neighbour carries a hint from stretching
   its own input to match the taller row. */
.enq-grid .field {
  min-width: 0;
  align-content: start;
}

.enq-grid .field[hidden] { display: none; }

/* ---- checkbox + radio groups ---- */

.choice-set {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.choice-set legend {
  display: block;
  width: 100%;
  padding: 0 0 var(--s3);
  font-family: var(--font-head);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
}

.choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* In a wrapping row each option is a self-contained pill target. */
.choice-row .choice {
  align-items: center;
  padding: 9px 14px 9px 11px;
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: border-color var(--t) ease, background-color var(--t) ease;
}

.choice-row .choice:hover { border-color: var(--brand-200); }

.choice-row .choice:has(input:checked) {
  background-color: var(--brand-050);
  border-color: var(--brand);
}

.choice input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--brand);
  cursor: pointer;
}

.choice label {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink-2);
  cursor: pointer;
}

.choice-row .choice:has(input:checked) label {
  color: var(--brand-700);
  font-weight: 600;
}

/* Checkbox and its label share one hit area of at least 44px. */
.choice-row .choice { min-height: 44px; }

.enq-inline {
  align-items: center;
  min-height: 44px;
}

.enq-inline label { font-size: var(--fs-sm); }

.choice-set.has-error legend,
.choice.has-error label { color: var(--err); }

.choice-set.has-error .choice-row .choice,
.choice.has-error input { border-color: var(--err); }

.choice-set .field-error,
.choice .field-error { margin-top: var(--s2); }

/* The error belongs under the option, not beside it, so it needs its own
   flex line rather than a third column next to the box and label. */
.choice { flex-wrap: wrap; }
.choice > .field-error { flex: 0 0 100%; }

/* ---- footer ---- */

.enq-foot {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  border-top: 1px solid var(--line);
  background-color: var(--bg);
}

.enq-foot[hidden] { display: none; }

.enq-foot-main {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin-left: auto;
}

@media (max-width: 559px) {
  .enq-foot { flex-wrap: wrap; }
  .enq-foot-main { width: 100%; justify-content: space-between; }
}

/* ---- success + discard states ---- */

.enq-done {
  padding: var(--s7) var(--s5) var(--s6);
  text-align: center;
}

.enq-done[hidden] { display: none; }

.enq-done h3 {
  margin: var(--s4) 0 var(--s3);
  font-size: var(--fs-h3);
}

.enq-done p { margin: 0 auto var(--s5); max-width: 46ch; }

.enq-done .btn-row { justify-content: center; }

.enq-done .form-note {
  margin-top: var(--s5);
  margin-bottom: 0;
}

.enq-done-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  color: #fff;
  background-color: var(--ok);
  border-radius: 50%;
}

.enq-done-mark .icon { width: 28px; height: 28px; }

.enq-discard {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  border-top: 1px solid var(--line);
  background-color: var(--accent-050);
}

.enq-discard[hidden] { display: none; }
.enq-discard p { margin: 0; font-weight: 600; }

@media (prefers-reduced-motion: no-preference) {
  .enq-modal[open] .enq-box {
    animation: enq-in 220ms var(--ease) both;
  }
}

@keyframes enq-in {
  from { opacity: 0; transform: translateY(12px) scale(.99); }
  to   { opacity: 1; transform: none; }
}

/* ===== PRINT ============================================================ */

@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body {
    font-size: 11.5pt;
    line-height: 1.45;
    background: #fff !important;
  }

  .site-header,
  .nav,
  .nav-toggle,
  .nav-scrim,
  .skip-link,
  .hero-bg,
  .hero-visual,
  .marquee,
  .cta-band,
  .svc-nav,
  .chip-row,
  .dest-filters,
  .btn,
  .footer-actions,
  .breadcrumb {
    display: none !important;
  }

  .section,
  .hero,
  .site-footer {
    padding-block: 12pt !important;
  }

  .grid {
    display: block !important;
  }

  .card,
  .svc-card,
  .dest-card,
  .why-card,
  .step,
  .contact-card {
    border: 1pt solid #999 !important;
    break-inside: avoid;
    margin-bottom: 8pt;
  }

  .acc-panel {
    display: block !important;
    grid-template-rows: none !important;
  }

  .acc-panel[hidden] {
    display: block !important;
  }

  h1, h2, h3 {
    break-after: avoid;
  }

  a[href^="http"]::after,
  a[href^="mailto:"]::after,
  a[href^="tel:"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    word-break: break-all;
  }

  .dest-art {
    max-height: 45mm;
  }
}