/* Cavaliero Travel — site styles
   Design tokens first; then base, components and sections in page order.
   One accent (Cavaliero orange), one radius, no shadows, no gradients. */

/* ---------- Fonts (self-hosted, SIL OFL) ---------- */
@font-face {
  font-family: "Fraunces"; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url("/assets/fonts/fraunces-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces"; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url("/assets/fonts/fraunces-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces"; font-style: italic; font-weight: 300 500; font-display: swap;
  src: url("/assets/fonts/fraunces-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces"; font-style: italic; font-weight: 300 500; font-display: swap;
  src: url("/assets/fonts/fraunces-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/assets/fonts/manrope-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/assets/fonts/manrope-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Metric-matched local fallbacks: while the web fonts load, text sets at almost the same width,
   so lines don't re-wrap (and the layout doesn't shift) when Fraunces/Manrope arrive.
   Times New Roman, Liberation Serif and Tinos share identical metrics; likewise Arial / Liberation Sans / Arimo. */
@font-face { font-family: "Fraunces Fallback"; font-style: normal; src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif"), local("Tinos"); size-adjust: 90.9%; }
@font-face { font-family: "Fraunces Fallback"; font-style: italic; src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT"), local("Liberation Serif Italic"), local("Tinos Italic"); size-adjust: 83.4%; }
@font-face { font-family: "Manrope Fallback"; src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Arimo"); size-adjust: 101.5%; }

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;

  /* colour */
  --ivory: #F6F1E8;
  --paper: #EDE5D8;
  --ink: #191B2E;
  --ink-soft: #4B4D60;          /* secondary text: 7.6:1 on ivory */
  --navy: #1E2140;
  --navy-deep: #161931;
  --orange: #E06A3B;            /* the one accent */
  --orange-ink: #B54A22;        /* same hue, for small text on light surfaces (4.7:1) */
  --line: rgba(25, 27, 46, 0.14);
  --line-strong: rgba(25, 27, 46, 0.28);
  --line-inv: rgba(246, 241, 232, 0.18);
  --scrim: rgba(14, 16, 32, 0.38);

  /* type */
  --font-display: "Fraunces", "Fraunces Fallback", Georgia, serif;
  --font-body: "Manrope", "Manrope Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-display: clamp(3rem, 1.4rem + 6.4vw, 8rem);
  --t-h1: clamp(2.5rem, 1.55rem + 3.6vw, 5rem);
  --t-h2: clamp(1.875rem, 1.45rem + 1.8vw, 3rem);
  --t-h3: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  --t-body-lg: clamp(1.125rem, 1.06rem + 0.28vw, 1.3125rem);
  --t-body: 1.0625rem;
  --t-small: 0.875rem;
  --t-label: 0.75rem;
  --t-nav: 0.9375rem;

  /* shape + space */
  --r: 12px;
  --gutter: clamp(16px, 4.2vw, 56px);
  --pad-l: max(var(--gutter), env(safe-area-inset-left));    /* never under a landscape notch / Dynamic Island */
  --pad-r: max(var(--gutter), env(safe-area-inset-right));
  --col-gap: clamp(12px, 1.8vw, 28px);
  --max: 1520px;
  --section-y: clamp(5rem, 3rem + 8vw, 10rem);
  --nav-h: 64px;

  /* motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --d-micro: 180ms;
  --d-short: 320ms;
  --d-med: 600ms;
  --d-long: 1000ms;
  --d-zoom: 1200ms;
}
@media (min-width: 1024px) { :root { --nav-h: 80px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
body {
  margin: 0; background: var(--ivory); color: var(--ink);
  font-family: var(--font-body); font-size: var(--t-body); line-height: 1.65; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, picture, svg { display: block; max-width: 100%; }
/* inside a sized frame, <picture> must fill it so object-fit/position apply to the frame, not the file */
.hero__frame picture, .card__media picture, .why__frame picture, .cta__media picture { width: 100%; height: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--orange); color: var(--ink); }
:focus-visible { outline: 2px solid var(--orange-ink); outline-offset: 3px; }
.styles :focus-visible, .cta :focus-visible, .footer :focus-visible { outline-color: var(--orange); }

.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad-l) var(--pad-r); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 100; padding: 12px 18px; border-radius: var(--r);
  background: var(--ink); color: var(--ivory); transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* focal point classes: object-position without inline styles (strict CSP) */
picture img { --fx: 50%; --fy: 50%; object-position: var(--fx) var(--fy); }
.fx-0{--fx:0%}.fx-5{--fx:5%}.fx-10{--fx:10%}.fx-15{--fx:15%}.fx-20{--fx:20%}.fx-25{--fx:25%}.fx-30{--fx:30%}
.fx-35{--fx:35%}.fx-40{--fx:40%}.fx-45{--fx:45%}.fx-50{--fx:50%}.fx-55{--fx:55%}.fx-60{--fx:60%}.fx-65{--fx:65%}
.fx-70{--fx:70%}.fx-75{--fx:75%}.fx-80{--fx:80%}.fx-85{--fx:85%}.fx-90{--fx:90%}.fx-95{--fx:95%}.fx-100{--fx:100%}
.fy-0{--fy:0%}.fy-5{--fy:5%}.fy-10{--fy:10%}.fy-15{--fy:15%}.fy-20{--fy:20%}.fy-25{--fy:25%}.fy-30{--fy:30%}
.fy-35{--fy:35%}.fy-40{--fy:40%}.fy-45{--fy:45%}.fy-50{--fy:50%}.fy-55{--fy:55%}.fy-60{--fy:60%}.fy-65{--fy:65%}
.fy-70{--fy:70%}.fy-75{--fy:75%}.fy-80{--fy:80%}.fy-85{--fy:85%}.fy-90{--fy:90%}.fy-95{--fy:95%}.fy-100{--fy:100%}

/* ---------- Type scale ---------- */
.display, .h1, .h2, .h3 { font-family: var(--font-display); font-weight: 300; font-variation-settings: "SOFT" 0, "WONK" 0; text-wrap: balance; }
.display { font-size: var(--t-display); line-height: 0.94; letter-spacing: -0.025em; font-optical-sizing: auto; }
.h1 { font-size: var(--t-h1); line-height: 1; letter-spacing: -0.02em; }
.h2 { font-size: var(--t-h2); line-height: 1.08; letter-spacing: -0.015em; font-weight: 350; }
.h3 { font-size: var(--t-h3); line-height: 1.15; letter-spacing: -0.01em; font-weight: 400; }
.display em, .h1 em { font-style: italic; color: var(--orange); font-weight: 300; }
.body-lg { font-size: var(--t-body-lg); line-height: 1.55; max-width: 34em; text-wrap: pretty; }
.small { font-size: var(--t-small); line-height: 1.5; }
.label { font-size: var(--t-label); line-height: 1.3; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }

.section-label { display: flex; align-items: baseline; gap: 14px; margin-bottom: clamp(20px, 2.4vw, 32px); color: var(--orange-ink); }
.section-label__num { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1rem; letter-spacing: 0; text-transform: none; }
.section-label::after { content: ""; flex: 0 0 48px; height: 1px; background: currentColor; opacity: 0.6; align-self: center; }

/* ---------- Buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 52px; padding: 0 22px; border-radius: var(--r); border: 1px solid transparent;
  font-family: var(--font-body); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1.2;
  transition: background-color var(--d-short) var(--ease-out), color var(--d-short) var(--ease-out), border-color var(--d-short) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn .arrow { flex: none; transition: transform var(--d-short) var(--ease-out); }
.btn:hover .arrow, .btn:focus-visible .arrow { transform: translateX(4px); }
.btn--sm { min-height: 44px; padding: 0 16px; font-size: 0.875rem; gap: 10px; }
.btn--lg { min-height: 58px; padding: 0 26px; font-size: 1rem; }
.btn--primary { background: var(--orange); color: var(--ink); }
.btn--primary:hover { background: var(--ink); color: var(--ivory); }
.btn--ghost { color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--orange); }
.btn--dark { background: var(--ink); color: var(--ivory); }
.btn--outline-light { color: var(--ivory); border-color: rgba(246, 241, 232, 0.55); }
.btn--outline-light:hover { border-color: var(--orange); }
.btn__detail { font-weight: 500; opacity: 0.8; margin-left: 4px; }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav-h);
  border-bottom: 1px solid transparent;
  transition: transform var(--d-med) var(--ease-out), background-color var(--d-short) linear, border-color var(--d-short) linear;
}
.nav.is-scrolled { background: var(--ivory); border-bottom-color: var(--line); }
/* over the hero photograph the bar is solid ivory from the first frame: the pale sky can't carry small ivory text */
.nav--on-image { background: var(--ivory); border-bottom-color: var(--line); }
.nav.is-hidden { transform: translateY(-101%); }
.nav__inner { height: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad-l) var(--pad-r); display: flex; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: baseline; gap: 8px; margin-right: auto; padding: 8px 0; }
.brand__name { font-family: var(--font-body); font-weight: 700; font-size: 1.0625rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); }
.brand__sub { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.0625rem; color: var(--orange-ink); }
.brand--light .brand__name { color: var(--ivory); }
/* the client's logo: a square tile used exactly as supplied */
.brand--logo { padding: 0; align-items: center; gap: 12px; }
.brand__logo { flex: none; width: 48px; height: 48px; border-radius: var(--r); }
.brand__text { display: inline-flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.brand--logo .brand__name { font-size: 1rem; font-weight: 600; letter-spacing: 0.17em; }
.brand--logo .brand__sub { font-size: 1.1875rem; font-weight: 400; line-height: 1; }
@media (max-width: 1023px) {
  .brand__logo { width: 40px; height: 40px; }
  .brand--logo { gap: 10px; }
  .brand--logo .brand__name { font-size: 0.9375rem; letter-spacing: 0.15em; }
  .brand--logo .brand__sub { font-size: 1.0625rem; }
}
@media (max-width: 359px) {   /* small phones: a touch smaller so the lockup clears the menu button */
  .brand--logo { gap: 8px; }
  .brand__text { gap: 5px; }
  .brand--logo .brand__name { font-size: 0.8125rem; letter-spacing: 0.13em; }
  .brand--logo .brand__sub { font-size: 0.9375rem; }
}
@media (max-width: 299px) {   /* extremely narrow only: keep the logo, the link still announces the name */
  .brand__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
.brand--light .brand__sub { color: var(--orange); }
.nav__links { display: none; }
.nav__links ul { display: flex; gap: clamp(20px, 2.4vw, 40px); }
.nav__link { position: relative; display: inline-block; padding: 10px 0; font-size: var(--t-nav); font-weight: 500; }
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: var(--orange);
  transform: scaleX(0); transform-origin: right; transition: transform var(--d-short) var(--ease-out);
}
.nav__link:hover::after, .nav__link:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.nav__cta { display: none; }
.nav__toggle { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 4px 0 12px; font-size: 0.875rem; font-weight: 600; }
.nav__toggle-bars { position: relative; width: 22px; height: 10px; }
.nav__toggle-bars span { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform var(--d-short) var(--ease-out), top var(--d-short) var(--ease-out); }
.nav__toggle-bars span:first-child { top: 0; }
.nav__toggle-bars span:last-child { top: 8.5px; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars span:first-child { top: 4.25px; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars span:last-child { top: 4.25px; transform: rotate(-45deg); }
@media (min-width: 768px) { .nav__cta { display: inline-flex; } }
@media (min-width: 1024px) {
  .nav__links { display: block; }
  .nav__toggle { display: none; }
}

.menu {
  position: fixed; inset: 0; z-index: 45; background: var(--ivory);
  padding: calc(var(--nav-h) + 24px) var(--pad-r) calc(24px + env(safe-area-inset-bottom)) var(--pad-l);
  display: flex; flex-direction: column; gap: 32px; overflow-y: auto;
  opacity: 0; transition: opacity var(--d-short) var(--ease-out);
}
.menu.is-open { opacity: 1; }
.menu[hidden] { display: none; }
.menu__list { border-top: 1px solid var(--line); }
.menu__list li { border-bottom: 1px solid var(--line); overflow: hidden; }
.menu__link {
  display: block; padding: 18px 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 8vw, 2.75rem); line-height: 1.1;
  transform: translateY(100%); transition: transform var(--d-med) var(--ease-out);
}
.menu.is-open .menu__link { transform: none; }
.menu.is-open li:nth-child(2) .menu__link { transition-delay: 50ms; }
.menu.is-open li:nth-child(3) .menu__link { transition-delay: 100ms; }
.menu.is-open li:nth-child(4) .menu__link { transition-delay: 150ms; }
.menu__cta { align-self: stretch; }
.menu__contact { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: auto; font-size: var(--t-small); color: var(--ink-soft); }
.menu__contact a { display: inline-flex; align-items: center; min-height: 44px; }
html.menu-open { overflow: hidden; }
html.menu-open .nav { background: var(--ivory); transform: none; }
@media (min-width: 1024px) { .menu { display: none !important; } }

/* ---------- Hero: one full-bleed photograph ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: max(620px, 100svh); display: flex; align-items: flex-end;
  background: var(--navy); color: var(--ivory);
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__frame { position: absolute; inset: 0; overflow: hidden; background: var(--navy-deep); }
.hero__frame picture { width: 100%; height: 100%; }
.hero__frame img { width: 100%; height: 112%; object-fit: cover; transform: translate3d(0, calc(-5% + var(--py, 0%)), 0); will-change: transform; }
/* one flat, translucent layer for legibility — no gradient */
.hero__scrim { position: absolute; inset: 0; z-index: -1; background: rgba(12, 14, 30, 0.55); }
.hero__inner { padding-top: calc(var(--nav-h) + 48px); padding-bottom: clamp(56px, 10vh, 128px); }
.hero__copy { max-width: 48rem; }
.js:not(.fonts-ready):not(.reveal-all) :is(.hero__inner, .brand__text) { visibility: hidden; }   /* boot.js: until the web fonts arrive (max 1s), so the swap can't shift the layout */
.hero__eyebrow { color: var(--ivory); font-weight: 700; font-size: 0.8125rem; margin-bottom: clamp(18px, 2vw, 26px); }
.hero__title { max-width: calc(5.889em + 40px); }   /* = the approved 11ch of Fraunces at each size, expressed so it doesn't change when fonts swap (no layout shift) */
.hero__title em { color: var(--orange); }
.hero__text { margin-top: clamp(20px, 2.4vw, 30px); color: var(--ivory); max-width: 31em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(28px, 3vw, 40px); }
@media (max-width: 599px) {
  .hero__scrim { background: rgba(12, 14, 30, 0.5); }
  .hero__actions { margin-top: 32px; }   /* one CTA: natural width, aligned with the text above */
}

/* ---------- Sections (shared) ---------- */
.section { padding-block: var(--section-y); }
.section-head { display: grid; gap: 24px; margin-bottom: clamp(40px, 5vw, 80px); }
.section-head__aside { display: flex; flex-direction: column; gap: 24px; color: var(--ink-soft); }
.section-head--inverse .section-head__aside { color: rgba(246, 241, 232, 0.78); }
@media (min-width: 1024px) {
  .section-head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: end; }
  .section-head__title { grid-column: 1 / span 7; }
  .section-head__aside { grid-column: 8 / -1; justify-self: end; max-width: 30rem; }
}
.rule { display: block; height: 1px; background: var(--line); transform-origin: left; }

/* ---------- Photo cards (destinations + travel styles): text sits on the photograph ---------- */
.card { position: relative; overflow: hidden; border-radius: var(--r); background: var(--navy-deep); color: var(--ivory); isolation: isolate; min-height: 0; }
.card__media { position: absolute; inset: 0; z-index: -1; }
.card__media picture, .card__media img { width: 100%; height: 100%; }
.card__media img { object-fit: cover; transform: scale(1.001) translate3d(var(--mx, 0px), var(--my, 0px), 0); transition: transform 1400ms var(--ease-out); }
.card__media::after { content: ""; position: absolute; inset: 0; background: rgba(12, 14, 30, 0.3); transition: background-color 700ms var(--ease-out); }
.style .card__media::after { background: rgba(12, 14, 30, 0.42); }
.style.card.is-open .card__media::after, .style.card:has(.card-cta:focus-visible) .card__media::after { background-color: rgba(12, 14, 30, 0.64); }
.card__body {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  padding: clamp(20px, 2.2vw, 34px); pointer-events: none;
}
.card__more { display: grid; grid-template-rows: 1fr; }
.card__more-inner { min-height: 0; overflow: hidden; }
.card__desc { padding-top: 12px; max-width: 30ch; font-size: 0.9375rem; line-height: 1.5; font-weight: 500; color: rgba(246, 241, 232, 0.94); text-wrap: pretty; }
.dest__facts { padding-top: 6px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em; color: rgba(246, 241, 232, 0.86); }
.card-cta {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; padding-bottom: 2px;
  font-size: 0.875rem; font-weight: 600; letter-spacing: 0.01em; color: var(--ivory); pointer-events: auto;
}
.card-cta > span { position: relative; padding-bottom: 5px; }
.card-cta > span::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--orange);
  transform: scaleX(0); transform-origin: left; transition: transform var(--d-med) var(--ease-out) 120ms;
}
.card-cta .arrow { transition: transform var(--d-short) var(--ease-out); margin-top: -5px; }

/* details collapse only when JS can reopen them (no-JS visitors always see everything) */
.js .card__more { grid-template-rows: 0fr; transition: grid-template-rows 650ms var(--ease-out); }
.js .card__more-inner > * { opacity: 0; transition: opacity 380ms var(--ease-out); }
.js .card.is-open .card__more, .js .card:has(.card-cta:focus-visible) .card__more { grid-template-rows: 1fr; }
.js .card.is-open .card__more-inner > *, .js .card:has(.card-cta:focus-visible) .card__more-inner > * { opacity: 1; transition: opacity 520ms var(--ease-out) 160ms; }
.card.is-open .card__media::after, .card:has(.card-cta:focus-visible) .card__media::after { background-color: rgba(12, 14, 30, 0.56); }
.card.is-open .card-cta > span::after, .card-cta:focus-visible > span::after { transform: scaleX(1); }

/* touch: a tap target over the card opens the details; the CTA sits above it and stays a real link */
.card-toggle { position: absolute; inset: 0; z-index: 2; width: 100%; -webkit-tap-highlight-color: transparent; }
.card-toggle__icon {
  position: absolute; top: clamp(14px, 2vw, 22px); right: clamp(14px, 2vw, 22px); width: 40px; height: 40px;
  border: 1px solid rgba(246, 241, 232, 0.55); border-radius: var(--r); transition: border-color var(--d-short);
}
.card-toggle__icon::before, .card-toggle__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; margin: -0.75px 0 0 -7px; background: var(--ivory);
  transition: transform var(--d-med) var(--ease-out);
}
.card-toggle__icon::after { transform: rotate(90deg); }
/* plus turns into a close mark; the frame itself stays square */
.card-toggle[aria-expanded="true"] .card-toggle__icon { border-color: var(--orange); }
.card-toggle[aria-expanded="true"] .card-toggle__icon::before { transform: rotate(45deg); }
.card-toggle[aria-expanded="true"] .card-toggle__icon::after { transform: rotate(135deg); }
.card-toggle:focus-visible { outline-offset: -4px; }
.card .card-cta { position: relative; z-index: 3; }
@media (hover: none), (pointer: coarse) { .card-cta { min-height: 44px; margin-top: 8px; } }

/* desktop pointer: hover reveals; the whole card opens WhatsApp via the CTA's stretched hit area */
@media (hover: hover) and (pointer: fine) {
  .card-toggle { display: none; }
  .card .card-cta { position: static; }
  .card-cta::before { content: ""; position: absolute; inset: 0; z-index: 1; }
  .js .card:hover .card__more { grid-template-rows: 1fr; }
  .js .card:hover .card__more-inner > * { opacity: 1; transition: opacity 520ms var(--ease-out) 160ms; }
  .card:hover .card__media img { transform: scale(1.035) translate3d(var(--mx, 0px), var(--my, 0px), 0); }
  .card:hover .card__media::after { background-color: rgba(12, 14, 30, 0.56); }
  .style:hover .card__media::after { background-color: rgba(12, 14, 30, 0.64); }
  .card:hover .card-cta > span::after { transform: scaleX(1); }
  .card:hover .card-cta .arrow { transform: translateX(4px); }
}

/* ---------- Destinations: the departures board ---------- */
.offers { overflow: clip; padding-top: clamp(4.5rem, 2.5rem + 5vw, 7.5rem); }
.offers__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(32px, 4vw, 56px); }
.offers__head .section-label { margin-bottom: clamp(14px, 1.6vw, 22px); }
.offers .h1 { max-width: none; }
.dest-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--col-gap); }
.dest { aspect-ratio: 4 / 3; background: transparent; } /* the photo fills the card; no navy block shows before it opens */
@media (min-width: 640px) { .dest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dest { aspect-ratio: 4 / 5; } }
/* tablet: an odd last card spans the row, so the grid never ends with a gap */
@media (min-width: 640px) and (max-width: 1023px) {
  .dest:last-child:nth-child(odd) { grid-column: span 2; aspect-ratio: 16 / 9; }
}
/* desktop: three across on a 6-column track; a short last row widens to fill (any number of destinations) */
@media (min-width: 1024px) {
  .dest-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .dest { grid-column: span 2; }
  .dest--span-2, .dest-grid--n2 .dest { grid-column: span 3; aspect-ratio: 3 / 2; }
  .dest--span-3, .dest-grid--n1 .dest { grid-column: span 6; aspect-ratio: 21 / 8; }
}
.dest__label, .dest__name { overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.dest__label span, .dest__name span { display: inline-block; }
.dest__label { color: var(--ivory); font-weight: 700; margin-bottom: 8px; }
.dest__name {
  font-family: var(--font-display); font-weight: 300; line-height: 1.02; letter-spacing: -0.02em;
  font-size: clamp(2.125rem, 1.5rem + 1.9vw, 3.375rem); text-wrap: balance;
}


/* ---------- Destinations deck (enhanced from the grid above when JavaScript runs) ----------
   A fan of photographs rotating around a pivot below the cards. site.js writes each card's
   transform/opacity; CSS only sizes the stage. "reveal-all" (boot.js safety net) restores the grid. */
.deck__count { display: none; }
:is(.js:not(.reveal-all), .is-preview) .deck__count {
  display: flex; align-items: center; flex: none; padding-bottom: 0.6em;
  font-size: var(--t-label); font-weight: 600; letter-spacing: 0.14em; color: var(--ink-soft); font-variant-numeric: tabular-nums;
}
.deck__count [data-deck-current] { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.125rem; letter-spacing: 0; color: var(--orange-ink); }
.deck__sep { width: 40px; height: 1px; margin: 0 12px; background: currentColor; opacity: 0.5; }
.deck__num { display: inline-block; overflow: hidden; padding: 0 0.08em; }
.deck__num [data-deck-current] { display: inline-block; }
.deck__num .is-up { animation: deck-num-up 420ms var(--ease-out); }
.deck__num .is-down { animation: deck-num-down 420ms var(--ease-out); }
@keyframes deck-num-up { from { transform: translateY(70%); opacity: 0; } }
@keyframes deck-num-down { from { transform: translateY(-70%); opacity: 0; } }
@media (max-width: 639px) {
  .offers__head { flex-direction: column; align-items: flex-start; gap: 14px; }
  :is(.js:not(.reveal-all), .is-preview) .deck__count { padding-bottom: 0; }
}
:is(.js:not(.reveal-all), .is-preview) .deck {
  --card-w: clamp(250px, 24vw, 380px);
  position: relative; isolation: isolate;   /* card z-indexes (700-1000) stay inside the deck: header and WhatsApp button remain on top */
  touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
@media (max-width: 1023px) { :is(.js:not(.reveal-all), .is-preview) .deck { --card-w: clamp(240px, 40vw, 360px); } }
@media (max-width: 639px) { :is(.js:not(.reveal-all), .is-preview) .deck { --card-w: 68vw; } }
/* Phones held sideways: keep a whole card (4:5) within the screen below the header. */
@media (orientation: landscape) and (max-height: 560px) { :is(.js:not(.reveal-all), .is-preview) .deck { --card-w: min(40vw, 360px, calc(80svh - 70px)); } }
:is(.js:not(.reveal-all), .is-preview) .deck:focus { outline: none; }
:is(.js:not(.reveal-all), .is-preview) .deck.is-dragging { cursor: grabbing; }
:is(.js:not(.reveal-all), .is-preview) .deck .dest-grid {
  display: block; position: relative; max-width: none; padding: 0; margin: 0;
  height: calc(var(--card-w) * 1.25 + var(--card-w) * 0.34);
}
:is(.js:not(.reveal-all), .is-preview) .deck .dest {
  position: absolute; left: 50%; top: 0; width: var(--card-w); margin-left: calc(var(--card-w) / -2);
  aspect-ratio: 4 / 5; grid-column: auto; transform-origin: 50% 50%; will-change: transform, opacity; backface-visibility: hidden;
}
:is(.js:not(.reveal-all), .is-preview) .deck .dest:not(.is-active) { cursor: pointer; }
.deck .dest__shade { display: none; }
:is(.js:not(.reveal-all), .is-preview) .deck .dest__shade {
  display: block; position: absolute; inset: 0; z-index: 4; border-radius: inherit; background: var(--navy-deep); opacity: 0; pointer-events: none;
}
:is(.js:not(.reveal-all), .is-preview) .deck:focus-visible .dest.is-active { outline: 2px solid var(--orange-ink); outline-offset: 5px; }
/* rear cards: photograph and name only — no details, no links */
:is(.js:not(.reveal-all), .is-preview) .deck .dest:not(.is-active) .card__more { visibility: hidden; grid-template-rows: 0fr; }
:is(.js:not(.reveal-all), .is-preview) .deck .dest:not(.is-active) .card-toggle__icon { opacity: 0; }
:is(.js:not(.reveal-all), .is-preview) .deck .card-toggle__icon { transition: opacity var(--d-short) var(--ease-out), border-color var(--d-short); }
:is(.js:not(.reveal-all), .is-preview) .deck.is-dragging .dest { pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  :is(.js:not(.reveal-all), .is-preview) .deck .dest:not(.is-active):hover .card__media img { transform: scale(1.001); }
  :is(.js:not(.reveal-all), .is-preview) .deck .dest:not(.is-active):hover .card__media::after { background-color: rgba(12, 14, 30, 0.3); }
  :is(.js:not(.reveal-all), .is-preview) .deck .dest:not(.is-active) .card-cta::before { display: none; }
}

/* Admin preview (scripts are disabled in that frame): draw the opening fan statically from the
   server-assigned slots, using the same geometry site.js computes (step 12.5deg, radius 4.1 card widths). */
.is-preview .deck .dest { opacity: 0; }
.is-preview .deck .card__more { grid-template-rows: 0fr; }
.is-preview .deck .card__more-inner > * { opacity: 0; }
.is-preview .deck .dest--slot-p0 { opacity: 1; z-index: 1000; transform: none; }
.is-preview .deck :is(.dest--slot-p1, .dest--slot-m1) { opacity: 1; z-index: 990; }
.is-preview .deck :is(.dest--slot-p2, .dest--slot-m2) { opacity: 1; z-index: 980; }
.is-preview .deck :is(.dest--slot-p3, .dest--slot-m3) { opacity: 1; z-index: 970; }
.is-preview .deck .dest--slot-p1 { transform: translate(calc(var(--card-w) * 0.887), calc(var(--card-w) * 0.097)) rotate(12.5deg) scale(0.945); }
.is-preview .deck .dest--slot-m1 { transform: translate(calc(var(--card-w) * -0.887), calc(var(--card-w) * 0.097)) rotate(-12.5deg) scale(0.945); }
.is-preview .deck .dest--slot-p2 { transform: translate(calc(var(--card-w) * 1.733), calc(var(--card-w) * 0.384)) rotate(25deg) scale(0.89); }
.is-preview .deck .dest--slot-m2 { transform: translate(calc(var(--card-w) * -1.733), calc(var(--card-w) * 0.384)) rotate(-25deg) scale(0.89); }
.is-preview .deck .dest--slot-p3 { transform: translate(calc(var(--card-w) * 2.496), calc(var(--card-w) * 0.847)) rotate(37.5deg) scale(0.835); }
.is-preview .deck .dest--slot-m3 { transform: translate(calc(var(--card-w) * -2.496), calc(var(--card-w) * 0.847)) rotate(-37.5deg) scale(0.835); }
.is-preview .deck :is(.dest--slot-p1, .dest--slot-m1) .dest__shade { opacity: 0.18; }
.is-preview .deck :is(.dest--slot-p2, .dest--slot-m2, .dest--slot-p3, .dest--slot-m3) .dest__shade { opacity: 0.36; }
@media (max-width: 639px) {   /* phone geometry: step 11deg, radius 4.3 card widths */
  .is-preview .deck .dest--slot-p1 { transform: translate(calc(var(--card-w) * 0.820), calc(var(--card-w) * 0.079)) rotate(11deg) scale(0.94); }
  .is-preview .deck .dest--slot-m1 { transform: translate(calc(var(--card-w) * -0.820), calc(var(--card-w) * 0.079)) rotate(-11deg) scale(0.94); }
  .is-preview .deck .dest--slot-p2 { transform: translate(calc(var(--card-w) * 1.611), calc(var(--card-w) * 0.313)) rotate(22deg) scale(0.88); opacity: 0.33; }
  .is-preview .deck .dest--slot-m2 { transform: translate(calc(var(--card-w) * -1.611), calc(var(--card-w) * 0.313)) rotate(-22deg) scale(0.88); opacity: 0.33; }
  .is-preview .deck :is(.dest--slot-p3, .dest--slot-m3) { opacity: 0; }
}

/* ---------- Travel styles (editorial mosaic) ---------- */
.styles { background: var(--navy); color: var(--ivory); }
.styles .section-label { color: var(--orange); }
.styles .h1 em { color: var(--orange); }
.styles__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; grid-auto-flow: row dense; }
.style { position: relative; min-height: 0; }
/* phone: a 2-column mosaic — one wide lead, then a tall tile beside stacked squares */
.style--wide, .style--full, .style--pair-a, .style--pair-b { grid-column: span 2; aspect-ratio: 5 / 4; }
.style--tall { grid-row: span 2; }
.style--square { aspect-ratio: 4 / 5; }
.style--tall3, .style--band { aspect-ratio: 3 / 5; }
@media (min-width: 768px) {
  .styles__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--col-gap); }
  .style--wide { grid-column: span 8; aspect-ratio: 16 / 10; }
  .style--tall, .style--tall3 { grid-column: span 4; grid-row: span 2; aspect-ratio: auto; }
  .style--square { grid-column: span 4; aspect-ratio: 1 / 1; }
  .style--band { grid-column: span 8; aspect-ratio: 16 / 7; }
  .style--full { grid-column: span 12; aspect-ratio: 21 / 9; }
  .style--pair-a { grid-column: span 7; aspect-ratio: 7 / 5; }
  .style--pair-b { grid-column: span 5; aspect-ratio: auto; }
}
.style { background: var(--navy-deep); }
.style__name {
  font-family: var(--font-display); font-weight: 300; line-height: 1; letter-spacing: -0.02em;
  font-size: clamp(1.5rem, 0.9rem + 2.6vw, 3.75rem); max-width: calc(6.004em + 5px); text-wrap: balance;
}
.style--square .style__name, .style--tall .style__name, .style--tall3 .style__name, .style--band .style__name { font-size: clamp(1.5rem, 0.95rem + 1.8vw, 2.75rem); }
@media (max-width: 599px) {
  .style .card__body { padding: 16px; }
  .style .card-toggle__icon { width: 34px; height: 34px; top: 12px; right: 12px; }
  .style--square .card__desc, .style--tall .card__desc, .style--tall3 .card__desc, .style--band .card__desc { font-size: 0.8125rem; }
}

/* ---------- Why Cavaliero ---------- */
.why__grid { display: grid; gap: 48px; }
.why .h1 { max-width: calc(7.306em + 27px); }
.why__body { display: grid; gap: 20px; margin-top: clamp(24px, 3vw, 40px); color: var(--ink-soft); }
.why__media { position: relative; }
.why__frame { overflow: hidden; border-radius: var(--r); aspect-ratio: 4 / 5; background: var(--paper); }
.why__frame img { width: 100%; height: 115%; object-fit: cover; transform: translate3d(0, calc(-6.5% + var(--py, 0%)), 0); will-change: transform; }
@media (min-width: 600px) and (max-width: 1023px) { .why__frame { aspect-ratio: 4 / 3; } }
@media (min-width: 1024px) {
  .why__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: center; }
  .why__copy { grid-column: 1 / span 6; }
  .why__media { grid-column: 8 / -1; }
  .why__frame { aspect-ratio: 3 / 4; }
  .why__grid--noimg .why__copy { grid-column: 1 / span 9; }
}
.why .rule { margin-top: clamp(64px, 8vw, 128px); }
.reasons { display: grid; counter-reset: reason; }
.reason { padding: 28px 0 32px; border-bottom: 1px solid var(--line); display: grid; gap: 10px; align-content: start; }
.reason:last-child { border-bottom: 0; }
.reason__num { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.125rem; color: var(--orange-ink); }
.reason__text { color: var(--ink-soft); max-width: 36ch; }
@media (min-width: 768px) {
  .reasons--n2, .reasons--n3, .reasons--n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .reason { border-bottom: 0; }
}
@media (min-width: 1024px) {
  .reasons--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .reasons--n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .reason { padding: 36px clamp(16px, 2vw, 40px) 0 0; }
  .reason + .reason { border-left: 1px solid var(--line); padding-left: clamp(16px, 2vw, 40px); }
}

/* ---------- Final CTA ---------- */
.cta { position: relative; isolation: isolate; overflow: hidden; color: var(--ivory); background: var(--navy); min-height: clamp(560px, 92svh, 980px); display: grid; align-items: end; }
.cta__media { position: absolute; inset: -8% 0; z-index: -2; }
.cta__media picture, .cta__media img { width: 100%; height: 100%; }
.cta__media img { object-fit: cover; transform: translate3d(0, var(--py, 0), 0) scale(1.04); will-change: transform; }
.cta__scrim { position: absolute; inset: 0; z-index: -1; background: rgba(16, 18, 36, 0.48); }   /* 0.48: "Where to next?" measures >= 3:1 over the brightest sky at 390-1920px */
.cta--noimg .cta__scrim { display: none; }
.cta__inner { padding-block: clamp(96px, 12vw, 180px) clamp(56px, 7vw, 112px); }
.cta__title { max-width: calc(4.866em + 33px); font-size: clamp(3.5rem, 1.6rem + 8vw, 10rem); }
.cta__title em { color: var(--orange); }
.cta__text { margin-top: 24px; color: rgba(246, 241, 232, 0.88); max-width: 30em; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(32px, 4vw, 48px); }

/* ---------- Footer ---------- */
.footer { background: var(--navy); color: rgba(246, 241, 232, 0.82); padding-block: clamp(64px, 8vw, 112px) 32px; font-size: 0.9375rem; }
.footer__grid { display: grid; gap: 40px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer__brand { grid-column: 1 / -1; }
.footer__note { margin-top: 16px; max-width: 28ch; }
.footer__label { color: var(--orange); margin-bottom: 14px; }
.footer__col li + li { margin-top: 6px; }
.footer__col a { display: inline-flex; align-items: center; min-height: 44px; transition: color var(--d-micro) linear; }
.footer__col li + li { margin-top: 0; }
.footer__col a:hover { color: var(--ivory); text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 4px; }
.footer__base { display: grid; gap: 16px; margin-top: clamp(48px, 6vw, 96px); padding-top: 24px; border-top: 1px solid var(--line-inv); font-size: 0.8125rem; color: rgba(246, 241, 232, 0.64); }
.footer__creds { display: flex; flex-wrap: wrap; gap: 6px 28px; }
@media (min-width: 1024px) {
  .footer__grid { grid-template-columns: 2fr repeat(3, minmax(0, 1fr)); }
  .footer__brand { grid-column: auto; }
  .footer__base { grid-template-columns: 1fr auto; align-items: center; }
}
.footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }   /* last line scrolls clear of the WhatsApp button */

/* ---------- Floating WhatsApp contact ----------
   The one place WhatsApp green appears: it identifies the action instantly. The UI palette stays
   ivory / navy / Cavaliero orange everywhere else. Fixed to the viewport, below the mobile menu (45). */
:root {
  --wa-bg: #25D366;          /* WhatsApp brand green */
  --wa-bg-hover: #20BD5A;
  --wa-fg: #0B2E1B;          /* dark text/icon: 8:1+ on the green (white would be 1.98:1) */
}
.wa-float {
  position: fixed; z-index: 40;
  right: max(24px, calc(env(safe-area-inset-right) + 16px));
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 16px));
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 22px 0 18px;
  border-radius: 999px; background: var(--wa-bg); color: var(--wa-fg);
  font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.01em; line-height: 1;
  transition: background-color var(--d-short) var(--ease-out), transform var(--d-short) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.wa-float__icon { flex: none; transition: transform var(--d-short) var(--ease-out); }
.wa-float:hover { background: var(--wa-bg-hover); transform: scale(1.02); }
.wa-float:hover .wa-float__icon { transform: translateX(-1px); }
.wa-float:focus-visible { outline: 3px solid var(--orange-ink); outline-offset: 3px; }
@media (max-width: 1023px) { .wa-float { right: max(16px, calc(env(safe-area-inset-right) + 12px)); bottom: max(16px, calc(env(safe-area-inset-bottom) + 12px)); } }
@media (max-width: 380px) {   /* very small phones: icon only, still a 52px tap target */
  .wa-float { padding: 0; width: 52px; justify-content: center; }
  .wa-float__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* one short entrance once the hero has started; never repeated */
.js:not(.is-ready) .wa-float { opacity: 0; }
.js.is-ready .wa-float { animation: wa-in 520ms var(--ease-out) 1100ms both; }
@keyframes wa-in { from { opacity: 0; transform: translateY(8px); } }
.is-preview .wa-float { position: absolute; }

/* ---------- Motion: one language, a different expression per section (only when JS runs) ---------- */
/* section headings: words rise out of a mask */
.js .split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.js .split .w > span { display: inline-block; transform: translate3d(0, 108%, 0); transition: transform 1100ms var(--ease-out); }
.js .split.is-in .w > span { transform: none; }
/* Why Cavaliero: a calmer typographic reveal — words simply come into focus */
.js .split--fade .w > span { transform: none; opacity: 0; transition: opacity 1000ms var(--ease-out); }
.js .split--fade.is-in .w > span { opacity: 1; }
/* supporting copy */
.js [data-reveal="rise"] { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity var(--d-med) var(--ease-out), transform var(--d-long) var(--ease-out); }
.js [data-reveal="rise"].is-in { opacity: 1; transform: none; }
.js [data-reveal="fade"] { opacity: 0; transition: opacity 1600ms var(--ease-out); }
.js [data-reveal="fade"].is-in { opacity: 1; }
.js [data-reveal="line"] { transform: scaleX(0); transition: transform 1200ms var(--ease-io); }
.js [data-reveal="line"].is-in { transform: scaleX(1); }

/* Travel styles: the editorial mosaic opens top-down; titles follow */
.js [data-reveal="mask"] .style__media { clip-path: inset(0 0 100% 0); transition: clip-path 1100ms var(--ease-io) var(--d, 0ms); }
.js [data-reveal="mask"] .style__media img { scale: 1.1; transition: scale 1600ms var(--ease-out) var(--d, 0ms), transform 1400ms var(--ease-out); }
.js [data-reveal="mask"] .card__body { opacity: 0; transition: opacity 700ms var(--ease-out) calc(var(--d, 0ms) + 600ms); }
.js [data-reveal="mask"].is-in .style__media { clip-path: inset(0 0 0 0); }
.js [data-reveal="mask"].is-in .style__media img { scale: 1; }
.js [data-reveal="mask"].is-in .card__body { opacity: 1; }
/* Keyboard focus never waits for an animation: a block holding focus, and details revealed by focus, show at once. */
.js [data-reveal]:focus-within, .js [data-reveal]:focus-within .card__body { opacity: 1; transform: none; transition: none; }
.js .card:has(.card-cta:focus-visible) .card__more, .js .card:has(.card-cta:focus-visible) .card__more-inner > * { transition: none; }


/* Hero: the photograph opens from a framed window to full bleed and settles; then headline, copy, actions */
.js .hero__frame { clip-path: inset(9% 7% 9% 7% round var(--r)); transition: clip-path 1500ms var(--ease-io); }
.js .hero__frame img { scale: 1.06; transition: scale 2600ms var(--ease-out); }
.js .hero__scrim { opacity: 0; transition: opacity 1400ms var(--ease-out) 250ms; }
.js .hero__eyebrow, .js .hero__text, .js .hero__actions { opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity 900ms var(--ease-out), transform 1100ms var(--ease-out); }
.js.is-ready .hero__frame { clip-path: inset(0 0 0 0 round 0); }
.js.is-ready .hero__frame img { scale: 1; }
.js.is-ready .hero__scrim { opacity: 1; }
.js.is-ready .hero__eyebrow, .js.is-ready .hero__text, .js.is-ready .hero__actions { opacity: 1; transform: none; }
.js.is-ready .hero__eyebrow { transition-delay: 450ms; }
.js.is-ready .hero__text { transition-delay: 1100ms; }
.js.is-ready .hero__actions { transition-delay: 1300ms; }

/* safety net from boot.js: if site.js never ran, show everything */
.js.reveal-all [data-reveal], .js.reveal-all [data-reveal] *, .js.reveal-all .split .w > span, .js.reveal-all .hero__frame, .js.reveal-all .hero__scrim, .js.reveal-all .hero__copy > * { opacity: 1; transform: none; clip-path: none; }
.js.reveal-all img { scale: 1; }

/* preview inside the admin iframe (scripts disabled): show everything */
.is-preview .nav { position: absolute; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; transition-delay: 0ms !important; animation: none !important; }
  .js .split .w > span, .js [data-reveal], .js [data-reveal] *, .js .hero__frame, .js .hero__scrim, .js .hero__copy > * { transform: none !important; opacity: 1 !important; clip-path: none !important; }
  .js img { scale: 1 !important; }

  .hero__frame img, .why__frame img, .cta__media img, .card__media img { transform: none !important; }
  .hero__frame img { height: 100%; }
}

@media print {
  .nav, .menu, .wa-float, .card-toggle { display: none !important; }
  .js [data-reveal], .js [data-reveal] *, .js .split .w > span, .js .hero__frame, .js .hero__copy > * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .js .card__more { grid-template-rows: 1fr; }
}

/* ---------- 404 page ---------- */
.notfound { min-height: 100svh; display: grid; place-items: center; padding: 24px var(--pad-r) 24px var(--pad-l); }
.notfound__main { max-width: 34rem; display: grid; gap: 20px; justify-items: start; }
.notfound__label { color: var(--orange-ink); }
.notfound__text { color: var(--ink-soft); }