:root {
  --night: #eaf6ff;      /* was near-black void; now the palest sky tint, used for rare light-panel fills */
  --navy: #0b2a4a;       /* deep navy — used sparingly: footer band, hero text-protection scrim */
  --navy-2: #0e3866;     /* secondary navy, footer gradient partner */
  --panel: #ffffff;      /* card / panel fill — white now, not dark glass */
  --wrap: #0ea5e9;       /* vivid "Miami" blue used for bold banners */
  --cyan: #0ea5e9;       /* PROMINENT hue — vivid sky blue, buttons + accents */
  --cyan-2: #0b76c9;     /* deeper blue for link text (readable on white) */
  --sky-soft: #bfe7fb;   /* SOFTER hue — pale breezy blue, section tints & pills */
  --ink: #0b2540;        /* body text — dark navy, not pale */
  --muted: #4f6b85;      /* secondary text — mid navy-grey */
  --gold: #e8b23a;
  --yelo-yellow: #ffd400;  /* Yelo's own brand yellow — used only for Yelo-specific calls to action */
  --yelo-ink: #17140a;
  --line: rgba(11, 42, 74, 0.12);
  --radius: 22px;
  --shadow: 0 20px 46px rgba(14, 60, 100, 0.14);
  --pad: clamp(20px, 7vw, 96px);
  --max: 1180px;
}

/* Page transitions — a swift push: the old page slides fully out one side
   as the new page slides fully in from the other, with a few thin
   diagonal streak lines trailing the motion for a sense of breeze/speed.
   No mascot in the transition itself — Breezy's actual animation lives in
   real, playing video elsewhere on the site (the homepage "Meet Breezy"
   hero and the testimonial hub), not faked via a CSS-rotated icon here.
   Cross-document View Transitions (Chrome 126+); browsers without support
   just get a normal instant navigation, no fallback needed. */
@view-transition {
  navigation: auto;
}
::view-transition-group(root) { animation-duration: 0.4s; }

::view-transition-old(root) {
  animation: breeze-push-out 0.32s cubic-bezier(0.6, 0, 0.85, 0.2) both;
}
::view-transition-new(root) {
  animation: breeze-push-in 0.36s cubic-bezier(0.16, 0.8, 0.28, 1) both;
  animation-delay: 0.05s;
}
@keyframes breeze-push-out {
  0% {
    transform: translateX(0);
    opacity: 1;
    box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent, 0 0 0 0 transparent;
  }
  100% {
    transform: translateX(-100%);
    opacity: 0.9;
    box-shadow: 60px 10px 24px -6px rgba(255, 255, 255, 0.55),
                90px -30px 20px -8px rgba(191, 231, 251, 0.5),
                75px 40px 18px -8px rgba(255, 255, 255, 0.4);
  }
}
@keyframes breeze-push-in {
  0% { transform: translateX(100%); opacity: 0.95; }
  100% { transform: translateX(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "DM Sans", system-ui, sans-serif;
  background:
    radial-gradient(1000px 500px at 92% -10%, rgba(14, 165, 233, 0.10), transparent 55%),
    radial-gradient(800px 420px at -10% 15%, rgba(191, 231, 251, 0.55), transparent 55%),
    #ffffff;
  color: var(--ink);
  line-height: 1.6;
  min-height: 100vh;
  position: relative;
}

/* Fluid ambient wash — the actual drifting-cloud footage from the
   inspiration board, playing perpetually behind every page instead of a
   simulated gradient. Dimmed and veiled so body text and white cards
   stay legible on top. */
.fluid-wash {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}
.fluid-wash__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 0.6;
}
.fluid-wash::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.35) 60%, #ffffff 100%);
}
@media (prefers-reduced-motion: reduce) {
  .fluid-wash__video { display: none; }
  .fluid-wash {
    background: url("/assets/sky-clouds-poster.jpg") center top / cover no-repeat;
  }
}

/* Wave divider — the silk/liquid line between sections */
.wave-divider {
  display: block;
  width: 100%;
  height: clamp(36px, 6vw, 84px);
  margin: -1px 0;
}
.wave-divider path { fill: var(--sky-soft); }
.wave-divider.is-flip path { fill: #ffffff; }

/* Scroll-reveal — sections drift and settle in like a gust passing through,
   not a hard cut. Blur-clear reads as motion settling, echoing the site's
   wind/cloud theme instead of a generic fade. */
.reveal {
  opacity: 0;
  transform: translate(-14px, 26px) rotate(-0.6deg);
  filter: blur(8px);
  transition: opacity 0.85s cubic-bezier(0.16, 0.8, 0.28, 1),
    transform 0.85s cubic-bezier(0.16, 0.8, 0.28, 1),
    filter 0.7s ease;
}
.reveal.is-visible { opacity: 1; transform: translate(0, 0) rotate(0); filter: blur(0); }
.reveal:nth-of-type(even) { transform: translate(14px, 26px) rotate(0.6deg); }
.reveal:nth-of-type(even).is-visible { transform: translate(0, 0) rotate(0); }

/* A slow, perpetual drift on small accent elements — never announces
   itself, just keeps the page faintly alive, like air moving */
@keyframes waft {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(0.6deg); }
}
.float-badge, .chat-launch {
  animation: waft 6.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .float-badge, .chat-launch { animation: none; }
}

/* Every element inside a revealed section cascades in on its own beat —
   cards, list rows, even the two halves of a split layout — like a breeze
   sweeping left to right across the row, instead of arriving as one flat block */
.reveal .grid-3 > *,
.reveal .grid-2 > *,
.reveal .stats > *,
.reveal .offer .grid-3 > *,
.reveal .quotes > *,
.reveal .split > *,
.reveal .prose-list > li,
.reveal .contact-list > li,
.reveal .steps > li {
  opacity: 0;
  transform: translate(-10px, 18px) rotate(-0.8deg);
  filter: blur(3px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 0.8, 0.28, 1), filter 0.5s ease;
}
.reveal.is-visible .grid-3 > *,
.reveal.is-visible .grid-2 > *,
.reveal.is-visible .stats > *,
.reveal.is-visible .quotes > *,
.reveal.is-visible .split > *,
.reveal.is-visible .prose-list > li,
.reveal.is-visible .contact-list > li,
.reveal.is-visible .steps > li {
  opacity: 1;
  transform: translate(0, 0) rotate(0deg);
  filter: blur(0);
}
.reveal.is-visible .grid-3 > *:nth-child(1),
.reveal.is-visible .grid-2 > *:nth-child(1),
.reveal.is-visible .stats > *:nth-child(1),
.reveal.is-visible .quotes > *:nth-child(1),
.reveal.is-visible .split > *:nth-child(1),
.reveal.is-visible .prose-list > li:nth-child(1),
.reveal.is-visible .contact-list > li:nth-child(1),
.reveal.is-visible .steps > li:nth-child(1) { transition-delay: 0.05s; }
.reveal.is-visible .grid-3 > *:nth-child(2),
.reveal.is-visible .grid-2 > *:nth-child(2),
.reveal.is-visible .stats > *:nth-child(2),
.reveal.is-visible .quotes > *:nth-child(2),
.reveal.is-visible .split > *:nth-child(2),
.reveal.is-visible .prose-list > li:nth-child(2),
.reveal.is-visible .contact-list > li:nth-child(2),
.reveal.is-visible .steps > li:nth-child(2) { transition-delay: 0.16s; }
.reveal.is-visible .grid-3 > *:nth-child(3),
.reveal.is-visible .stats > *:nth-child(3),
.reveal.is-visible .quotes > *:nth-child(3),
.reveal.is-visible .prose-list > li:nth-child(3),
.reveal.is-visible .contact-list > li:nth-child(3),
.reveal.is-visible .steps > li:nth-child(3) { transition-delay: 0.27s; }
.reveal.is-visible .grid-3 > *:nth-child(4),
.reveal.is-visible .prose-list > li:nth-child(4),
.reveal.is-visible .steps > li:nth-child(4) { transition-delay: 0.38s; }
.reveal.is-visible .prose-list > li:nth-child(5) { transition-delay: 0.48s; }
.reveal.is-visible .prose-list > li:nth-child(6) { transition-delay: 0.58s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .reveal .grid-3 > *, .reveal .grid-2 > *, .reveal .stats > *, .reveal .quotes > *,
  .reveal .split > *, .reveal .prose-list > li, .reveal .contact-list > li, .reveal .steps > li {
    opacity: 1; transform: none; transition: none;
  }
}

/* Each ride-steps row rises in on its own beat too, same wind-sweep language */
.reveal .ride-steps__list > * {
  opacity: 0;
  transform: translate(-10px, 18px) rotate(-0.8deg);
  filter: blur(3px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 0.8, 0.28, 1), filter 0.5s ease;
}
.reveal.is-visible .ride-steps__list > * {
  opacity: 1;
  transform: translate(0, 0) rotate(0deg);
  filter: blur(0);
}
.reveal.is-visible .ride-steps__list > *:nth-child(1) { transition-delay: 0.05s; }
.reveal.is-visible .ride-steps__list > *:nth-child(2) { transition-delay: 0.2s; }
.reveal.is-visible .ride-steps__list > *:nth-child(3) { transition-delay: 0.35s; }
@media (prefers-reduced-motion: reduce) {
  .reveal .ride-steps__list > * { opacity: 1; transform: none; filter: none; transition: none; }
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--cyan-2); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; }
.skip {
  position: absolute;
  left: -999px;
  top: 8px;
  background: var(--cyan);
  color: #fff;
  padding: 8px 12px;
  z-index: 40;
}
.skip:focus { left: 8px; }

/* Top strip */
.topbar {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 8px var(--pad);
  background: var(--sky-soft);
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.topbar strong { color: var(--navy); font-weight: 700; }

/* Nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px var(--pad);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
}
.brand:hover { text-decoration: none; }
.brand img {
  width: 52px;
  height: auto;
  filter: drop-shadow(0 0 10px rgba(14, 165, 233, 0.25));
}
.brand strong {
  /* Deliberately the old wordmark font — Syne pairs with the logomark
     itself better than Fraunces does. Kept ONLY here, nowhere else on the site. */
  display: block;
  font-family: "Syne", sans-serif;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
}
.brand small {
  display: block;
  color: var(--muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 10px;
}
.nav-links { display: flex; gap: 18px; align-items: center; }
.nav-links a {
  color: var(--muted);
  font-weight: 600;
  font-size: 14.5px;
}
.nav-links a:hover,
.nav-links a.is-active { color: var(--cyan-2); text-decoration: none; }
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
  position: relative;
  margin: 0 auto;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 14.5px;
}
.btn-cyan {
  background: var(--cyan);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(14, 165, 233, 0.28);
}
.btn-cyan:hover { filter: brightness(1.06); text-decoration: none; }
.btn-ghost {
  border-color: var(--line);
  color: var(--navy);
  background: #fff;
}
.btn-ghost:hover { border-color: var(--cyan); text-decoration: none; }
.btn-gold {
  background: var(--gold);
  color: #1a1406;
}
.btn-gold:hover { filter: brightness(1.05); text-decoration: none; }
/* Yelo's own yellow — reserved for the one action that actually matters:
   getting the app, since that's the only door into a Breeze ride */
.btn-yelo {
  background: var(--yelo-yellow);
  color: var(--yelo-ink);
  box-shadow: 0 12px 26px rgba(255, 212, 0, 0.35);
}
.btn-yelo:hover { filter: brightness(1.04); text-decoration: none; }
.btn-yelo--lg { padding: 16px 30px; font-size: 16px; }
.btn-yelo small .yelo-logo { filter: brightness(0); }

/* Book Now split-button + popover */
.book-now { position: relative; display: inline-flex; }
.book-now__panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 40;
  display: none;
  flex-direction: column;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 10px;
  width: 220px;
}
.book-now.is-open .book-now__panel { display: flex; }
.book-now__panel a,
.book-now__panel button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--navy);
  font-weight: 600;
  font-size: 14px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  width: 100%;
}
.book-now__panel a:hover,
.book-now__panel button:hover { background: var(--sky-soft); text-decoration: none; }
.book-now__panel small { display: block; color: var(--muted); font-weight: 400; font-size: 11px; }

/* Powered by Yelo — plain text against the background, real Yelo wordmark
   (pulled from joinyelo.com), no pill/button chrome */
.yelo-word {
  display: inline-flex;
  align-items: baseline;
  vertical-align: baseline;
}
a.yelo-word { text-decoration: none; }
a.yelo-word:hover .yelo-logo { opacity: 0.72; }
.yelo-word img.yelo-logo {
  display: inline-block;
  width: auto;
  height: 0.85em;
  max-width: none;
  margin-left: 0.32em;
  transform: translateY(0.08em);
  transition: opacity 0.15s ease;
}
.topbar .yelo-word { color: inherit; }
.yelo-word-line { color: var(--muted); font-size: 14px; margin-top: 6px; }
.book-now__panel small .yelo-logo,
.btn small .yelo-logo { height: 0.9em; }

/* Yelo wordmark recolored into Yelo's own yellow, for the one or two
   moments per page where Yelo deserves top billing rather than a quiet credit */
.yelo-mark {
  display: inline-block;
  vertical-align: -0.12em;
}
.yelo-mark--yellow {
  width: 1.9em;
  height: 0.82em;
  background-color: var(--yelo-yellow);
  -webkit-mask-image: url("/assets/yelo-logo.svg");
  mask-image: url("/assets/yelo-logo.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Yelo download banner — the one place on the Ride page that says, in as
   many words, that Yelo is not optional. Breezy co-anchors it at full
   scale, thumbs-up toward the download — a representative doing his job,
   not a sticker in the corner. */
.yelo-banner {
  position: relative;
  overflow: hidden;
  padding: 80px var(--pad) 84px;
  background: radial-gradient(900px 360px at 50% -10%, rgba(255, 212, 0, 0.16), transparent 70%), var(--sky-soft);
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
  text-align: left;
}
.yelo-banner__art { display: flex; justify-content: center; }
.yelo-banner__art img {
  width: min(360px, 90%);
  filter: drop-shadow(0 30px 48px rgba(14, 60, 100, 0.22));
  animation: waft 7s ease-in-out infinite;
}
.yelo-banner .kicker { justify-content: flex-start; }
.yelo-banner h2 {
  max-width: 620px;
  margin: 0 0 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.18em;
}
.yelo-banner__copy { margin: 0 0 32px; text-align: left; max-width: 52ch; }
@media (max-width: 860px) {
  .yelo-banner { grid-template-columns: 1fr; text-align: center; }
  .yelo-banner .kicker, .yelo-banner h2 { justify-content: center; }
  .yelo-banner__copy { margin-left: auto; margin-right: auto; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .yelo-banner__art img { animation: none; }
}
.yelo-banner__ghost {
  top: -0.12em;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(140px, 24vw, 340px);
  font-style: italic;
}
/* Type — editorial, not corporate: Fraunces (a soft, warm display serif with
   a real italic, not an obliqued fake) carries every heading and every
   moment of emphasis; DM Sans stays for body so the serif reads as a
   considered choice, not the whole site shouting. */
body { font-variant-ligatures: common-ligatures; font-feature-settings: "liga" 1, "kern" 1; }
.kicker {
  position: relative;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 11px;
  color: var(--cyan-2);
  margin: 0 0 14px;
  padding-left: 30px;
  font-weight: 700;
}
.kicker::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 20px;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
h1, h2, h3 {
  font-family: "Fraunces", serif;
  font-weight: 460;
  font-style: normal;
  line-height: 0.98;
  letter-spacing: -0.015em;
  margin: 0 0 16px;
  color: var(--navy);
}
h1 em, h2 em, h3 em, .display em, em.accent {
  font-style: italic;
  font-weight: 400;
  color: var(--cyan-2);
}
h1 { font-size: clamp(42px, 8vw, 104px); letter-spacing: -0.035em; font-weight: 420; }
h2 { font-size: clamp(28px, 4.4vw, 52px); }
h3 { font-size: 21px; font-weight: 550; }
.lede { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55; color: var(--muted); max-width: 44ch; letter-spacing: -0.005em; }
/* Section labels — the eyebrow kicker text, sprawled huge and faint across
   the section it introduces, auto-generated in site.js from each .kicker's
   own text. These are section DIVIDERS, not fine print; they should read
   at a glance while staying quiet enough not to fight the real heading. */
section, .ad-band, .yelo-banner { position: relative; }
.section-label {
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: -0.06em;
  text-align: left;
  padding-left: var(--pad);
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 330;
  text-transform: uppercase;
  letter-spacing: 0;
  font-size: clamp(52px, 10vw, 168px);
  line-height: 1;
  color: var(--cyan-2);
  opacity: 0.065;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
  pointer-events: none;
  user-select: none;
}
@media (max-width: 700px) {
  .section-label { display: none; }
}

/* An oversized, near-invisible word or number sitting behind a section —
   the quiet-luxury trick of implying scale without shouting a stat box */
.ghost-word {
  position: absolute;
  z-index: 0;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 340;
  color: var(--cyan-2);
  opacity: 0.07;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  line-height: 1;
}
.wrap { width: min(var(--max), calc(100% - 2 * var(--pad) + 2 * var(--pad))); padding-left: var(--pad); padding-right: var(--pad); }
section { padding: 72px var(--pad); }
.section-tight { padding-top: 40px; padding-bottom: 40px; }

/* Hero */
.hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
  padding: 56px var(--pad) 36px;
  position: relative;
}
.hero-photo {
  min-height: 72vh;
  padding: 0;
  display: grid;
  align-items: end;
  background: var(--sky-soft) center 68% / cover no-repeat;
  position: relative;
}
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(11, 42, 74, 0.82) 6%, rgba(11, 42, 74, 0.38) 46%, rgba(11, 42, 74, 0.05) 100%),
    linear-gradient(180deg, rgba(11, 42, 74, 0.05) 0%, rgba(11, 42, 74, 0.55) 100%);
}
.hero-photo .hero-copy {
  position: relative;
  z-index: 1;
  padding: 80px var(--pad) 56px;
  max-width: 820px;
  color: #fff;
}
.hero-photo .hero-copy h1,
.hero-photo .hero-copy .kicker { color: #fff; }
.hero-photo .hero-copy .lede { color: #eaf6ff; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 28px 0; }

/* Breezy, introduced properly — full-scale, centered as a co-anchor of
   the section rather than a corner accessory. Real transparent art (an
   alpha-cut animated WebP built from the actual Canva clip, frame by
   frame — no background at all, not a mask trick), so nothing but him
   sits on the page. */
.meet-mascot {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: clamp(24px, 5vw, 64px);
  padding: 30px var(--pad) 84px;
  overflow: visible;
}
.meet-mascot__art {
  display: flex;
  justify-content: center;
}
.meet-mascot__art img {
  width: min(560px, 96%);
  filter: drop-shadow(0 34px 54px rgba(14, 60, 100, 0.24));
  animation: waft 7.5s ease-in-out infinite;
}
.meet-mascot__copy h2 {
  font-size: clamp(38px, 5.2vw, 66px);
  margin: 6px 0 18px;
}
.meet-mascot__copy .lede { max-width: 46ch; }
@media (max-width: 860px) {
  .meet-mascot { grid-template-columns: 1fr; text-align: center; padding-bottom: 60px; }
  .meet-mascot__copy .lede { margin-left: auto; margin-right: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .meet-mascot__art img { animation: none; }
}
.pills { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.pills li {
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 6px 12px;
  color: #eaf6ff;
  font-size: 13px;
  background: rgba(11, 42, 74, 0.35);
}
.hero-art { position: relative; }
.hero-art img {
  width: 100%;
  filter: drop-shadow(0 24px 40px rgba(14, 60, 100, 0.22));
}
.float-badge {
  position: absolute;
  right: 8%;
  bottom: -18px;
  width: 118px;
  filter: drop-shadow(0 12px 24px rgba(14, 60, 100, 0.25));
}

/* Stats — freed from cards: a huge italic numeral, a hairline, nothing else */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 40px;
  padding: 10px var(--pad) 70px;
}
.faq details, .form, .legal {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
/* .card / .offer article / .area article / .rule read better unboxed — a
   hairline top rule and open air instead of a floating white tile */
.card, .offer article, .area article, .rule {
  background: transparent;
  border: none;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 26px 4px 6px;
  box-shadow: none;
}
.rule h3 {
  font-size: clamp(22px, 2vw, 26px);
  font-style: italic;
  font-weight: 400;
  color: var(--cyan-2);
}
.stats article {
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.stats strong, .stat-num {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 380;
  font-size: clamp(46px, 5.4vw, 68px);
  letter-spacing: -0.02em;
  color: var(--cyan-2);
  display: block;
}
.stats p, .card p { margin: 10px 0 0; color: var(--muted); }

/* Grids */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.split img, .frame img {
  border-radius: var(--radius);
  box-shadow: none;
  width: 100%;
  height: 420px;
  object-fit: cover;
  object-position: center;
  -webkit-mask-image: radial-gradient(122% 128% at 50% 45%, #000 68%, transparent 100%);
  mask-image: radial-gradient(122% 128% at 50% 45%, #000 68%, transparent 100%);
  filter: drop-shadow(0 18px 30px rgba(14, 60, 100, 0.18));
}
img[src*="yelo-sailors"] { object-position: center 78%; }
img[src*="rides-live"] { object-position: center 28%; }
img[src*="founder-portrait"] { object-position: center 18%; }
img[src*="yelo-wedding"] { object-position: center 40%; }
/* Real transparent product renders (shuttle-hero.webp etc. already have a
   true alpha channel — no studio background baked in) — float them
   directly on the page at their own natural size. No panel, no padding,
   no box; the drop-shadow is enough to ground them. */
.split img[src$=".webp"], .vehicle-shot {
  height: auto;
  background: none;
  padding: 0;
  object-fit: contain;
  box-shadow: none;
  -webkit-mask-image: none;
  mask-image: none;
  filter: drop-shadow(0 26px 40px rgba(14, 60, 100, 0.22));
}
/* Floating, italicized ad-campaign caption sitting on the photo itself
   instead of plain text underneath it */
.frame { position: relative; }
.frame figcaption {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 22px;
  margin: 0;
  color: #fff;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: -0.005em;
  line-height: 1.3;
  padding: 10px 16px;
  background: rgba(11, 37, 64, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 14px;
  width: fit-content;
  max-width: calc(100% - 40px);
}

/* App walkthrough — sticky phone + scrolling steps, same storytelling
   mechanic as Freebee/Yelo's own sites, in Breeze colors with real
   Breeze x Yelo app screens */
.app-scroll__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  margin-top: 32px;
}
.app-scroll__sticky {
  position: sticky;
  top: 60px;
  align-self: start;
  display: flex;
  justify-content: center;
}
.app-scroll__phone {
  position: relative;
  width: min(100%, 420px);
  aspect-ratio: 531 / 864;
  filter: drop-shadow(0 30px 54px rgba(14, 60, 100, 0.32));
}
.app-scroll__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  user-select: none;
}
.app-scroll__img {
  position: absolute;
  left: 15.44%;
  top: 2.89%;
  width: 68.93%;
  height: 91.78%;
  object-fit: cover;
  z-index: 1;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.16, 0.8, 0.28, 1);
}
.app-scroll__img.is-active { opacity: 1; transform: scale(1); }
.app-scroll__steps { display: flex; flex-direction: column; gap: 0; }
.app-scroll__step {
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 0;
  opacity: 0.25;
  filter: blur(3px);
  transform: translateX(-18px);
  transition: opacity 0.55s ease, filter 0.55s ease, transform 0.55s cubic-bezier(0.16, 0.8, 0.28, 1);
}
.app-scroll__step:last-of-type { min-height: 40vh; }
.app-scroll__step.is-active { opacity: 1; filter: blur(0); transform: translateX(0); }
.app-scroll__num {
  display: block;
  color: var(--cyan-2);
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(36px, 4.2vw, 54px);
  letter-spacing: -0.01em;
  margin-bottom: 6px;
  opacity: 0.7;
}
.app-scroll__step h3 {
  margin: 0 0 14px;
  font-size: clamp(32px, 3.8vw, 48px);
  letter-spacing: -0.02em;
}
.app-scroll__step p { margin: 0; color: var(--muted); max-width: 42ch; font-size: 19px; line-height: 1.6; }
.app-scroll__cta {
  padding: 28px 0 12px;
  border-top: 1px solid var(--line);
  margin-top: 8px;
}
.app-scroll__cta .fine { margin-top: 10px; }
@media (max-width: 980px) {
  .app-scroll__grid { grid-template-columns: 1fr; gap: 24px; }
  .app-scroll__sticky { position: static; margin-bottom: 8px; }
  .app-scroll__phone { width: min(100%, 320px); margin: 0 auto; }
  .app-scroll__step { min-height: auto; opacity: 1; filter: blur(0); transform: none; padding: 10px 0; }
  .app-scroll__step:last-of-type { min-height: auto; }
}
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* Editorial, not a feature-grid — a huge outline numeral, a punchy
   eyebrow line, and an oversized italic heading per item instead of a
   small icon + regular-weight text. Same stroke-numeral technique as the
   Ride page's three steps, since this is the homepage's version of that
   same "this is the point of the site" moment. */
.offer article {
  min-height: 220px;
  transition: transform 0.35s cubic-bezier(0.16, 0.8, 0.28, 1), border-color 0.35s ease;
}
.offer article:hover { transform: translateY(-6px); border-color: var(--cyan); }
.offer__num {
  display: block;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 340;
  font-size: clamp(52px, 6vw, 84px);
  line-height: 1;
  color: var(--sky-soft);
  -webkit-text-stroke: 1.5px var(--cyan-2);
  text-stroke: 1.5px var(--cyan-2);
  margin-bottom: 6px;
  transition: transform 0.35s cubic-bezier(0.16, 0.8, 0.28, 1);
}
.offer article:hover .offer__num { transform: translateX(4px); }
.offer__eyebrow, .card__eyebrow {
  margin: 0 0 2px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  font-weight: 700;
  color: var(--cyan-2);
}
.offer article h3 {
  margin: 2px 0 10px;
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 400;
  transition: color 0.25s ease;
}
.offer article h3 em { font-style: italic; color: var(--navy); }
.offer article:hover h3 em { color: var(--cyan-2); }
.offer article p:not(.offer__eyebrow) { color: var(--muted); }

/* Same numeral/eyebrow language, dialed down a notch for denser grids
   (4-6 items) so it reads as prominent, not sprawling — every plain
   .card / .area grid sitewide opts into this by adding a .card__num
   (and optionally .card__eyebrow) as its first children instead of
   staying flat icon-less text. */
.card__num {
  display: block;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 340;
  font-size: clamp(36px, 4vw, 54px);
  line-height: 1;
  color: var(--sky-soft);
  -webkit-text-stroke: 1.2px var(--cyan-2);
  text-stroke: 1.2px var(--cyan-2);
  margin-bottom: 4px;
  transition: transform 0.35s cubic-bezier(0.16, 0.8, 0.28, 1);
}
.card:hover .card__num, .area:hover .card__num { transform: translateX(4px); }
.card h3, .area h3 {
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 500;
  font-style: italic;
  font-family: "Fraunces", serif;
  color: var(--navy);
  transition: color 0.25s ease;
}
.card:hover h3, .area:hover h3 { color: var(--cyan-2); }
.card p, .area p { font-size: 16px; line-height: 1.65; }

/* Ride page — the three steps ARE the conversion moment, so they get a
   full-width editorial treatment: huge outlined numerals, real breathing
   room, and now a real video clip per step (not a boxed player — the same
   soft-mask/drop-shadow treatment used on every real photo sitewide) so
   each step shows the actual moment instead of just describing it. */
.ride-steps__list { margin: 40px 0 0; border-top: 1px solid var(--line); }
.ride-steps__row {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
  padding: 48px 0;
  border-bottom: 1px solid var(--line);
}
.ride-steps__row--reverse { grid-template-columns: 0.95fr 1.05fr; }
.ride-steps__row--reverse .ride-steps__clip { order: -1; }
.ride-steps__copy { min-width: 0; }
.ride-steps__num {
  display: block;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 340;
  font-size: clamp(52px, 6.4vw, 92px);
  line-height: 1;
  margin-bottom: 6px;
  color: var(--sky-soft);
  -webkit-text-stroke: 1.5px var(--cyan-2);
  text-stroke: 1.5px var(--cyan-2);
}
.ride-steps__row h3 { margin: 0 0 8px; font-size: clamp(22px, 2.4vw, 30px); }
.ride-steps__row p { margin: 0; color: var(--muted); max-width: 54ch; font-size: 17px; }
.ride-steps__clip { min-width: 0; }
.ride-steps__clip video {
  width: 100%;
  height: min(42vh, 320px);
  object-fit: cover;
  display: block;
  mask-image: radial-gradient(120% 130% at 50% 45%, #000 66%, transparent 100%);
  filter: drop-shadow(0 22px 38px rgba(14, 60, 100, 0.16));
}
.ride-steps__note { margin-top: 30px; color: var(--muted); font-size: 17px; max-width: 68ch; }
@media (max-width: 860px) {
  .ride-steps__row, .ride-steps__row--reverse { grid-template-columns: 1fr; }
  .ride-steps__row--reverse .ride-steps__clip { order: 0; }
}
.ride-steps-photo { padding-top: 0; }
.frame--tall img { height: min(64vh, 620px); }

/* Coverage — each market gets its own full-width moment: a real photo,
   a huge stat, the place name set large, instead of three identical text
   cards pretending to be equal when they aren't. */
.coverage-intro { padding-bottom: 12px; }
.coverage-intro .lede { margin-top: 10px; }
.coverage-row {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  padding-top: 36px;
  padding-bottom: 36px;
}
.coverage-row--reverse { grid-template-columns: 0.85fr 1.15fr; }
.coverage-row--reverse .frame--coverage { order: 2; }
.frame--coverage img { height: min(52vh, 480px); }
.coverage-row__copy { position: relative; z-index: 1; }
.coverage-row__stat {
  display: block;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 380;
  font-size: clamp(52px, 6vw, 84px);
  line-height: 1;
  color: var(--cyan-2);
  margin-bottom: 6px;
}
.coverage-row__stat em { font-style: italic; color: var(--gold); }
.coverage-row__copy h3 { font-size: clamp(26px, 2.8vw, 36px); margin: 0 0 10px; }
.coverage-row__copy p { color: var(--muted); font-size: 17px; max-width: 46ch; margin: 0; }
.coverage-row--type {
  grid-template-columns: 1fr;
  background: var(--sky-soft);
  padding: 72px var(--pad);
  margin: 0 calc(-1 * var(--pad));
  text-align: center;
  overflow: hidden;
}
.coverage-row--type .coverage-row__copy { max-width: 640px; margin: 0 auto; }
.coverage-row--type .coverage-row__copy p { margin: 0 auto; }
.coverage-row__ghost {
  position: absolute;
  top: -0.25em;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(140px, 22vw, 320px);
}
.coverage-note { text-align: center; padding: 8px var(--pad) 48px; }

/* Safety section: the real Canva dash clip (vehicle -> solo Breezy) as a
   large, low-opacity full-bleed backdrop behind the copy — not a foreground
   character. Kept as full un-keyed footage on purpose: this source has two
   different backgrounds mid-clip (black stage, then white) plus a moving
   vehicle silhouette, which made per-frame alpha keying unreliable (visible
   flicker) — see site.js for the scroll-triggered, play-once, slow-motion
   behavior instead of fighting the keying. */
.mission-safety {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 130px var(--pad);
  isolation: isolate;
}
.mission-safety__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.mission-safety__backdrop video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 0.16;
}
.mission-safety__text {
  position: relative;
  z-index: 1;
  max-width: 640px;
}
.mission-safety__text .kicker { justify-content: flex-start; }
.mission-safety__text h2 { max-width: 14ch; font-size: clamp(34px, 4.6vw, 58px); margin: 6px 0 18px; }
.mission-safety__text .lede { max-width: 46ch; font-size: clamp(18px, 1.8vw, 21px); }
@media (max-width: 860px) {
  .mission-safety { text-align: center; padding: 100px var(--pad); }
  .mission-safety__text { max-width: none; margin: 0 auto; }
  .mission-safety__text .kicker { justify-content: center; }
  .mission-safety__text h2, .mission-safety__text .lede { max-width: none; margin-left: auto; margin-right: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .mission-safety__backdrop video { display: none; }
}

/* Mission page story beats — each a full editorial moment, not a paragraph
   buried in a list. Constrained width keeps the huge type readable;
   alternating tint gives the scroll a rhythm. */
.mission-story { padding: 90px var(--pad); }
/* Two of the four mission-story beats get a real photo alongside the
   text instead of sitting as a wall of copy pinned to the left margin
   with nothing to look at. Text styling (kicker/h2/lede) is untouched —
   this only adds a column next to it. */
.mission-story--photo {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.mission-story--reverse .mission-story__photo { order: -1; }
.mission-story__photo,
.mission-story__text {
  /* Grid items default to min-width:auto, which lets their content's
     intrinsic size (the photo's native pixel width, here) refuse to
     shrink below itself — that was silently forcing this whole section
     wider than its column. min-width:0 is the standard fix whenever a
     grid item holds an <img>. */
  min-width: 0;
}
.mission-story__photo {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
}
.mission-story__photo img {
  width: 100%;
  height: min(50vh, 420px);
  object-fit: cover;
  -webkit-mask-image: radial-gradient(122% 128% at 50% 45%, #000 68%, transparent 100%);
  mask-image: radial-gradient(122% 128% at 50% 45%, #000 68%, transparent 100%);
  filter: drop-shadow(0 20px 34px rgba(14, 60, 100, 0.2));
}
/* A real transparent product render (shuttle-hero.webp) needs the
   opposite treatment from a photo — contain, no vignette mask, since
   there's no background left to feather away. */
.mission-story__photo img[src$=".webp"] {
  height: auto;
  max-height: min(50vh, 420px);
  object-fit: contain;
  -webkit-mask-image: none;
  mask-image: none;
  filter: drop-shadow(0 26px 40px rgba(14, 60, 100, 0.2));
}
@media (max-width: 860px) {
  .mission-story--photo { grid-template-columns: 1fr; }
  .mission-story--reverse .mission-story__photo { order: 0; }
}
.mission-story h2 { max-width: 14ch; font-size: clamp(34px, 4.6vw, 58px); }
.mission-story .lede { max-width: 62ch; font-size: clamp(18px, 1.8vw, 21px); }
/* <main> has no padding of its own on this page — these sections are
   already full-width, block-level children, so the classic "escape the
   parent's padding via negative margin, then re-add it" bleed trick had
   nothing to cancel out. It was pure liability here: the negative
   margin silently forced the section (and the whole page) wider than
   the viewport, which desynced the padding math and shoved the text
   flush against the true left edge instead of matching its siblings'
   indent. A plain background is already edge-to-edge for a full-width
   block with no margin — no trick needed. */
.mission-story--tint { background: var(--sky-soft); }
.frame--portrait img { height: min(58vh, 520px); object-position: center 20%; }
/* The founder-portrait split pairs a tall photo with a short paragraph —
   center-aligning (the sitewide .split default) stranded that text in
   the middle of a huge empty column, miles below the hero. Top-align
   just this pairing so the heading picks up right where the hero left
   off instead of floating in dead space. */
.split:has(.frame--portrait) { align-items: start; padding-top: 8px; }

/* Advertise page — the blank/wrapped shuttle gets the whole screen right
   under the hero, before any more copy. This is the product. */
/* Ad-placement panels — pulled apart from one flat deck slide into real
   site cards: image, heading, one line, matching everything else on the
   page instead of a screenshot dropped in a box */
.ad-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px 24px;
  margin-top: 32px;
  align-items: start;
}
.ad-panel {
  display: flex;
  flex-direction: column;
  transition: transform 0.3s cubic-bezier(0.16, 0.8, 0.28, 1);
}
.ad-panel:hover { transform: translateY(-5px); }
/* The source diagrams were cropped from one flat deck slide and never
   shared a common aspect ratio (1.4 to 2.66 across the set) — at
   width:100% that put every card's heading and copy at a different
   height, so nothing in the row lined up. A fixed-ratio, contain-fit box
   gives every panel the same footprint regardless of its own image
   shape, so headings and text align across the whole row. */
.ad-panel__frame {
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  background: var(--sky-soft);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ad-panel img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ad-panel h3 { font-size: 19px; margin-bottom: 6px; }
.ad-panel p { color: var(--muted); font-size: 15px; margin: 0; }

.ad-hero-shot { padding: 20px 0 12px; }
.ad-hero-shot img {
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
  filter: drop-shadow(0 30px 46px rgba(14, 60, 100, 0.2));
}
.ad-hero-shot__cap {
  text-align: center;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: clamp(22px, 2.6vw, 32px);
  color: var(--navy);
  margin-top: 8px;
}
@media (max-width: 700px) {
  .mission-story { padding: 56px var(--pad); }
}
@media (max-width: 900px) {
  .coverage-row, .coverage-row--reverse { grid-template-columns: 1fr; }
  .coverage-row--reverse .frame--coverage { order: 0; }
}
@media (max-width: 700px) {
  .ride-steps__row { align-items: flex-start; gap: 18px; }
  .ride-steps__num { font-size: 44px; width: 60px; }
  .frame--tall img { height: 42vh; }
}

.steps { list-style: none; padding: 0; margin: 28px 0; }
.steps li {
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  font-size: 18px;
}
.steps span {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 340;
  font-size: 40px;
  color: var(--sky-soft);
  -webkit-text-stroke: 1.2px var(--cyan-2);
  text-stroke: 1.2px var(--cyan-2);
  width: 52px;
  flex-shrink: 0;
}
.fine { color: var(--muted); font-size: 14px; }
.prose-list { list-style: none; margin: 22px 0 28px; padding: 0; color: var(--muted); }
.prose-list li {
  position: relative;
  margin: 0;
  padding: 14px 0 14px 30px;
  border-top: 1px solid var(--line);
  font-size: 17px;
}
.prose-list li:last-child { border-bottom: 1px solid var(--line); }
/* A little breeze-swoosh instead of a plain bullet dot */
.prose-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  width: 16px;
  height: 9px;
  border-top: 2px solid var(--cyan);
  border-radius: 0 0 0 40%;
  transform: rotate(-8deg);
}
.cta-strip {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  align-items: center;
  background: none;
  border: none;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 64px var(--pad) 90px;
  box-shadow: none;
}
.cta-strip img { filter: drop-shadow(0 14px 26px rgba(14, 60, 100, 0.16)); }

/* Gallery */
.gallery {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: 220px 220px;
  gap: 12px;
}
.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}
.gallery .g-wide { grid-row: 1 / span 2; object-position: center 62%; }

/* Quotes — real pull-quotes, not testimonial cards: big italic serif,
   a soft oversized quotation mark, attribution below a hairline. Alternating
   vertical offsets so the row reads like a laid-out magazine spread instead
   of a grid of identical boxes. */
.quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 36px;
}
.quote {
  position: relative;
  min-height: auto;
  display: flex;
  flex-direction: column;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
}
.quote::before {
  content: "\201C";
  display: block;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 60px;
  line-height: 1;
  color: var(--cyan-2);
  opacity: 0.4;
  margin-bottom: -6px;
}
.quote p {
  flex: 1;
  margin: 0;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.42;
  letter-spacing: -0.008em;
  color: var(--navy);
}
.quote footer {
  margin-top: 20px;
  padding: 12px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: block;
}
.quotes .quote:nth-child(3n+2) { transform: translateY(30px); }
.quotes .quote:nth-child(3n) { transform: translateY(-10px); }
.quotes-more { margin-top: 32px; }
@media (max-width: 980px) {
  .quotes .quote:nth-child(3n+2), .quotes .quote:nth-child(3n) { transform: none; }
}

/* Testimonials as a loose cluster of bubbles — hover or tap a name, the
   quote appears. Sizes/offsets cycle over 4 variants so the cluster reads
   as organic, not a grid, without any actual randomness to fight overlaps. */
/* Testimonials orbit Breezy instead of sitting in a grid or a flat row —
   he's the hub the whole cluster is built around (--a is each bubble's
   angle around the center, baked in per-bubble at build time; --r comes
   from the ring1/ring2 modifier below). Hovering (or tapping, via
   .is-open) a bubble spins the hub's real video clip and, via :has(),
   blows every OTHER bubble further out along its own angle — clearing
   space around the one being read without any JS position math. */
.quote-cloud {
  position: relative;
  width: min(760px, 96vw);
  aspect-ratio: 1;
  margin: 12px auto 24px;
}
/* Breezy at true size, real alpha-cut art (an animated WebP built frame
   by frame from the actual Canva clip — no background at all, not a
   mask trick). He does not change size on hover/tap; only which image
   is showing changes (see site.js) — the static pose at rest, the real
   animated clip while a testimonial is open. */
.quote-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(170px, 24vw, 260px);
  transform: translate(-50%, -50%);
  z-index: 3;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}
.quote-hub__art {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 30px rgba(14, 60, 100, 0.22));
  transition: filter 0.25s ease;
}
.quote-hub:hover .quote-hub__art { filter: drop-shadow(0 22px 36px rgba(14, 60, 100, 0.3)); }
.quote-hub__cta {
  display: block;
  text-align: center;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cyan-2);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.quote-hub:hover .quote-hub__cta, .quote-hub:focus-visible .quote-hub__cta {
  opacity: 1;
  transform: translateY(0);
}

/* Leave-a-testimonial — Breezy hosts it. A floating panel like the chat
   widget (legitimate UI chrome, not a content box) rather than inline
   in the cluster. */
.quote-form {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 42, 74, 0.35);
  backdrop-filter: blur(3px);
  padding: 20px;
}
.quote-form[hidden] { display: none; }
.quote-form__panel {
  position: relative;
  width: min(420px, 100%);
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px;
}
.quote-form__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  font-size: 22px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}
.quote-form__hint { color: var(--muted); margin: 8px 0 20px; }
.quote-form label { display: block; font-size: 12px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted); margin: 16px 0 6px; }
.quote-form input, .quote-form textarea {
  width: 100%;
  padding: 10px 2px;
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: inherit;
  border-radius: 0;
}
.quote-form input:focus, .quote-form textarea:focus { outline: none; border-bottom-color: var(--cyan); }
.quote-form textarea { min-height: 90px; resize: vertical; }
.quote-form button[type="submit"] { margin-top: 22px; }
/* A freshly-added bubble whooshes in rather than just appearing */
@keyframes bubble-arrive {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--a)) translateX(0) rotate(calc(-1 * var(--a))) scale(0.3); }
  60% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--a)) translateX(calc(var(--r) + 14px)) rotate(calc(-1 * var(--a))) scale(1.08); }
  100% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a))) scale(1); }
}
.quote-bubble.is-new { animation: bubble-arrive 0.7s cubic-bezier(0.16, 0.8, 0.28, 1) both; }
.quote-bubble {
  --r: clamp(160px, 23vw, 240px);
  --push: 0px;
  --push-rot: 0deg;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(var(--a)) translateX(calc(var(--r) + var(--push))) rotate(calc(-1 * var(--a) + var(--push-rot)));
  border: none;
  cursor: pointer;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--cyan-2));
  color: #fff;
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  font-size: 15px;
  box-shadow: 0 14px 26px rgba(14, 60, 100, 0.2);
  transition: transform 0.55s cubic-bezier(0.16, 0.8, 0.28, 1), box-shadow 0.3s ease, opacity 0.4s ease;
  padding: 0;
}
.quote-bubble--ring2 { --r: clamp(220px, 31vw, 320px); }
.quote-bubble:hover, .quote-bubble:focus-visible, .quote-bubble.is-open {
  --push: -18px;
  box-shadow: 0 22px 38px rgba(14, 60, 100, 0.3);
  z-index: 6;
  outline: none;
}
/* Every other bubble gets blown outward along its own angle the moment
   one is being read — no JS, just :has() watching its siblings. */
.quote-cloud:has(.quote-bubble:hover) .quote-bubble:not(:hover),
.quote-cloud:has(.quote-bubble.is-open) .quote-bubble:not(.is-open) {
  --push: 58px;
  opacity: 0.55;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease, box-shadow 0.3s ease;
}
.quote-cloud:has(.quote-bubble:hover) .quote-bubble:nth-child(3n):not(:hover),
.quote-cloud:has(.quote-bubble.is-open) .quote-bubble:nth-child(3n):not(.is-open) { --push-rot: 8deg; }
.quote-cloud:has(.quote-bubble:hover) .quote-bubble:nth-child(3n+1):not(:hover),
.quote-cloud:has(.quote-bubble.is-open) .quote-bubble:nth-child(3n+1):not(.is-open) { --push-rot: -7deg; }
.quote-bubble:nth-child(4n+1) { width: 116px; height: 116px; font-size: 18px; }
.quote-bubble:nth-child(4n+2) {
  width: 76px; height: 76px; font-size: 13px;
  background: linear-gradient(135deg, var(--sky-soft), var(--cyan));
  color: var(--navy);
}
.quote-bubble:nth-child(4n+3) {
  width: 98px; height: 98px;
  background: linear-gradient(135deg, var(--gold), #f3c968);
  color: #1a1406;
}
.quote-bubble:nth-child(4n) { width: 84px; height: 84px; font-size: 14px; }
/* User-submitted testimonials land on their own outer ring, gold like
   the 4n+3 static-bubble variant, so they read as a distinct "new
   arrival" rather than pretending to be original curated copy. Placed
   after the nth-child cycle so it wins regardless of final DOM position. */
.quote-bubble.quote-bubble--ring3 {
  --r: clamp(280px, 38vw, 380px);
  width: 90px;
  height: 90px;
  font-size: 14px;
  background: linear-gradient(135deg, var(--gold), #f3c968);
  color: #1a1406;
}
.quote-bubble__name { pointer-events: none; }
.quote-bubble__card {
  position: absolute;
  bottom: calc(100% + 16px);
  left: 50%;
  transform: translate(-50%, 10px);
  width: min(280px, 70vw);
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 26px 54px rgba(14, 60, 100, 0.26);
  padding: 20px 22px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 0.8, 0.28, 1);
  pointer-events: none;
  z-index: 10;
  text-align: left;
}
.quote-bubble:hover .quote-bubble__card,
.quote-bubble:focus-visible .quote-bubble__card,
.quote-bubble.is-open .quote-bubble__card {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.quote-bubble__card q {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.42;
  color: var(--navy);
  quotes: "\201C" "\201D";
}
.quote-bubble__card cite {
  display: block;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 640px) {
  .quote-bubble__card { left: auto; right: -10px; transform: translateY(10px); }
  .quote-bubble:hover .quote-bubble__card,
  .quote-bubble:focus-visible .quote-bubble__card,
  .quote-bubble.is-open .quote-bubble__card { transform: translateY(0); }
}

/* Advertise band — a real full-bleed section of the page (like everything
   else), not a rounded blue card floating in the middle of it */
.ad-band {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
  background: linear-gradient(135deg, #0ea5e9, #38bdf8 70%);
  border-radius: 0;
  padding: 100px var(--pad);
  margin: 0;
  border: none;
  color: #fff;
  overflow: hidden;
}
.ad-band .kicker, .ad-band h2 { color: #fff; }
.ad-band .kicker::before { background: #fff; opacity: 0.7; }
.ad-band p { color: #eaf6ff; }
.ad-band img {
  /* Multiply blend dissolves the photo's flat white background straight
     into the section's own blue gradient — no visible white rectangle */
  mix-blend-mode: multiply;
  justify-self: end;
  max-width: 90%;
}
.ad-band .section-label { color: #fff; opacity: 0.1; }

.watch { padding-bottom: 0; }
.watch-video { padding-top: 20px; padding-bottom: 20px; }
.watch-story { padding-top: 28px; }
.video-wrap {
  position: relative;
  padding-top: 42%;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(115% 140% at 50% 50%, #000 74%, transparent 100%);
  mask-image: radial-gradient(115% 140% at 50% 50%, #000 74%, transparent 100%);
}
.video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 700px) {
  .video-wrap { padding-top: 62%; }
}

/* Contact */
.contact-list { list-style: none; padding: 0; font-size: 18px; margin: 0; }
.contact-list li { padding: 8px 0; border-bottom: 1px solid var(--line); }

.contact-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 0 0 36px; }
.contact-options button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 16px 2px 4px;
  cursor: pointer;
  box-shadow: none;
  transition: border-color 0.25s ease, opacity 0.25s ease;
  opacity: 0.62;
}
.contact-options button strong { display: block; color: var(--navy); font-family: "Fraunces", serif; font-style: italic; font-size: 18px; margin-bottom: 4px; }
.contact-options button p { margin: 0; color: var(--muted); font-size: 13px; }
.contact-options button:hover { opacity: 0.85; }
.contact-options button.is-active { border-color: var(--cyan); opacity: 1; }

/* Forms — underline fields, no boxed panel */
.form label { display: block; font-size: 12px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted); margin: 20px 0 8px; }
.form input, .form select, .form textarea {
  width: 100%;
  padding: 10px 2px;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: inherit;
  transition: border-color 0.25s ease;
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none;
  border-bottom-color: var(--cyan);
}
.form textarea { min-height: 140px; resize: vertical; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-status {
  display: none;
  margin-top: 18px;
  padding: 4px 0 4px 14px;
  border-left: 2px solid var(--cyan);
  color: var(--navy);
}
.form-status.is-on { display: block; }

/* FAQ — hairline rows, no panel */
.faq details {
  margin-bottom: 4px;
  padding: 0;
  border-top: 1px solid var(--line);
}
.faq summary {
  cursor: pointer;
  padding: 20px 2px;
  font-weight: 650;
  list-style: none;
  color: var(--navy);
}
.faq summary::-webkit-details-marker { display: none; }
.faq details p {
  padding: 0 2px 22px;
  margin: 0;
  color: var(--muted);
  max-width: 62ch;
}
.faq details[open] summary { color: var(--cyan-2); }

.legal { max-width: 780px; }
.legal p, .legal li { color: var(--muted); }
.legal h2 { font-size: 22px; margin-top: 28px; font-family: "Fraunces", serif; font-style: italic; font-weight: 400; color: var(--navy); }

/* Ad-preview visualizer */
/* An embedded tool, not a card floating on the page — full-bleed wash
   instead of a bordered white box */
.wrap-tool {
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
.wrap-tool-section {
  background: var(--sky-soft);
  margin: 0 calc(-1 * var(--pad));
  padding: 56px var(--pad) 64px;
}
.wrap-tool__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 32px; align-items: start; }
.wrap-tool__controls label { display: block; font-size: 13px; color: var(--muted); margin: 14px 0 6px; font-weight: 600; }
.wrap-tool__controls input[type="file"],
.wrap-tool__controls input[type="url"],
.wrap-tool__controls input[type="color"] {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  font: inherit;
}
.wrap-tool__colorpicker { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.wrap-tool__colorpicker input[type="color"] {
  width: 46px;
  height: 46px;
  padding: 0;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--line);
  border-radius: 50%;
  cursor: pointer;
  background: none;
  overflow: hidden;
}
.wrap-tool__colorpicker input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.wrap-tool__colorpicker input[type="color"]::-webkit-color-swatch { border: none; border-radius: 50%; }
.wrap-tool__colorpicker input[type="text"] {
  width: 100px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  font: inherit;
  letter-spacing: 0.03em;
}
.wrap-tool__swatches { display: flex; gap: 8px; margin-top: 10px; }
.wrap-tool__swatches::before {
  content: "or a quick pick:";
  font-size: 12px;
  color: var(--muted);
  align-self: center;
  margin-right: 2px;
}
.wrap-tool__swatches button {
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); cursor: pointer;
}
.wrap-tool__placement { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.wrap-tool__placement button {
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--navy);
}
.wrap-tool__placement button.is-active { background: var(--cyan); border-color: var(--cyan); color: #fff; }
.wrap-tool__stage {
  position: relative;
  background: var(--sky-soft);
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.wrap-tool__stage img.wrap-tool__base { width: 100%; height: 100%; object-fit: contain; }
.wrap-tool__logo {
  position: absolute;
  max-width: 40%;
  max-height: 40%;
  cursor: grab;
  touch-action: none;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.25));
}
.wrap-tool__hint { color: var(--muted); font-size: 12px; margin-top: 10px; }
.wrap-tool__actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

/* Footer — light, like everything else; only the text carries navy */
.site-footer {
  padding: 40px var(--pad) 28px;
  background: var(--sky-soft);
  color: var(--muted);
  font-size: 14px;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
  gap: 28px;
  margin-bottom: 28px;
}
.site-footer h4 {
  font-family: "Fraunces", serif;
  color: var(--navy);
  margin: 0 0 12px;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin: 8px 0; }
.site-footer a { color: var(--cyan-2); }
.site-footer a:hover { color: var(--navy); }
.site-footer p { color: var(--muted); }
.foot-end {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}
.foot-end a { color: var(--cyan-2); }

/* Mobile CTA */
.mobile-cta {
  display: none;
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 25;
  justify-content: center;
  padding: 14px;
  border-radius: 999px;
  background: var(--cyan);
  color: #fff;
  font-weight: 800;
  box-shadow: var(--shadow);
  text-decoration: none;
}

.chat-launch {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 28;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  background: var(--cyan);
  color: #fff;
  cursor: pointer;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.chat-launch svg {
  width: 27px;
  height: 27px;
}
.chat-panel {
  position: fixed;
  right: 18px;
  bottom: 86px;
  width: min(360px, calc(100vw - 24px));
  height: 460px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  display: none;
  flex-direction: column;
  z-index: 28;
  overflow: hidden;
}
.chat-panel.is-open { display: flex; }
.chat-head {
  padding: 14px 16px;
  background: var(--sky-soft);
  color: var(--navy);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
}
.chat-head__who { display: flex; align-items: center; }
.chat-head button {
  background: transparent;
  border: 0;
  color: var(--navy);
  cursor: pointer;
  font-size: 18px;
}
.chat-log {
  flex: 1;
  overflow: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bubble {
  max-width: 86%;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 14px;
}
.bubble.bot { background: var(--sky-soft); color: var(--ink); align-self: flex-start; }
.bubble.me { background: var(--cyan); color: #fff; align-self: flex-end; }
.chat-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 8px; }
.chat-chips button {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--cyan-2);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
}
.chat-form {
  display: flex;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid var(--line);
}
.chat-form input {
  flex: 1;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: 999px;
  padding: 10px 12px;
}
.chat-form button {
  border: 0;
  background: var(--cyan);
  color: #fff;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
}

.page-hero {
  padding: 40px var(--pad) 8px;
}
.page-hero .lede { max-width: 56ch; }

/* Contact page only: same large, low-opacity, play-once backdrop technique
   as the Mission page's Safer Travel section (see .mission-safety) — its
   own scoped modifier rather than touching the shared .page-hero used by
   every other page's hero. */
.page-hero--breezy {
  position: relative;
  overflow: hidden;
  padding: 110px var(--pad) 90px;
  isolation: isolate;
}
.page-hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.page-hero__backdrop video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 0.16;
}
.page-hero__text {
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .page-hero__backdrop video { display: none; }
}

.sponsor-block {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  align-items: center;
  gap: clamp(24px, 5vw, 56px);
}
.sponsor-block__badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 28px 20px 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}
.sponsor-block__badge img {
  width: min(280px, 85%);
  height: auto;
}
.sponsor-block__badge span {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.4;
}
.sponsor-block__badge strong {
  color: var(--ink);
  font-weight: 700;
}
@media (max-width: 860px) {
  .sponsor-block { grid-template-columns: 1fr; }
  .sponsor-block__badge { padding-top: 8px; }
}

.partners-note {
  background: none;
  border: none;
  border-top: 1px solid var(--line);
  font-style: italic;
  color: var(--muted);
}

.rule h3 { margin-bottom: 8px; }

@media (max-width: 980px) {
  .nav-links, .nav .btn { display: none; }
  .nav-toggle { display: grid; place-items: center; }
  .nav.is-open .nav-links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    padding: 18px 20px 24px;
    border-bottom: 1px solid var(--line);
    align-items: flex-start;
    box-shadow: 0 20px 30px rgba(14, 60, 100, 0.08);
  }
  .nav.is-open .nav-links .btn { display: inline-flex; }
  .hero, .split, .stats, .grid-3, .grid-2, .quotes, .ad-band, .foot-grid, .form .row, .wrap-tool__grid, .contact-options {
    grid-template-columns: 1fr;
  }
  .gallery {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 180px 180px 180px;
  }
  .gallery .g-wide { grid-row: auto; grid-column: 1 / span 2; height: 220px; }
  .hero { padding-top: 28px; }
  .hero-photo { min-height: 88vh; }
  .ad-band { margin-left: 20px; margin-right: 20px; padding: 24px; }
  .mobile-cta { display: flex; }
  .chat-launch { bottom: 76px; }
  .chat-panel { bottom: 144px; }
  body { padding-bottom: 88px; }
  .split img, .frame img { height: 280px; }
  .split img[src$=".webp"] { height: auto; }
  .float-badge { width: 88px; }
  .cta-strip { grid-template-columns: 1fr; margin-left: 20px; margin-right: 20px; }
}

@media (max-width: 640px) {
  .gallery { grid-template-columns: 1fr; grid-template-rows: none; }
  .gallery .g-wide { grid-column: auto; height: 220px; }
  h1 { font-size: 34px; }
}