/* ==========================================================================
   VisitOrlando.ai
   Palette from the Villatel Orlando map; structure inspired by
   austintexas.org (hard-shadow buttons, sliced imagery, layered frames).

   Motion rules used throughout:
   - Only transform and opacity are animated (GPU-composited, no layout/paint).
   - Entrance effects are one-shot keyframes with `backwards` fill, so they
     hand control back to hover transitions as soon as they finish.
   - Hover effects live inside @media (hover: hover) so taps never leave
     elements stuck in a hover state on touch screens.
   ========================================================================== */

:root {
  --navy: #0E2D5C;
  --navy-deep: #0A2248;
  --navy-70: rgba(14, 45, 92, .74);
  --coral: #F4595B;
  --coral-soft: #FF7275;
  --coral-ink: #C7333D;
  --coral-btn: #F56668;   /* coral behind navy text: 4.5:1 */
  --aqua: #5EE0CC;
  --sky: #BFE6F0;
  --sky-soft: #DDF0F4;
  --sky-ring: #A4DAEE;
  --sand: #F4EDE1;
  --blush: #F4E4DB;
  --tan: #BCA98C;
  --tan-ink: #7C6849;
  --paper: #FBF8F2;
  --white: #FFFFFF;
  --line: rgba(14, 45, 92, .14);
  --r: 12px;
  --shadow: 3px 3px 0 var(--navy);
  --shadow-md: 5px 5px 0 var(--navy);
  --box-shadow-2: 4px 4px 0 var(--navy);
  --box-shadow-3: 6px 6px 0 var(--navy);

  --f-body: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, Arial, sans-serif;
  --f-display: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, Arial, sans-serif;
  --f-serif: Georgia, "Times New Roman", serif;
  --f-title: Verdana, Geneva, Tahoma, sans-serif;

  --wrap: 1320px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 86px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --bounce: cubic-bezier(.34, 1.56, .64, 1);
  --pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 114'%3E%3Cpath d='M40 0C62 0 80 18 80 40c0 26-28 48-40 72C28 88 0 66 0 40 0 18 18 0 40 0z' fill='%23F4595B'/%3E%3Ccircle cx='40' cy='40' r='16' fill='%23fff'/%3E%3C/svg%3E");
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: var(--paper);
  color: var(--navy);
  font: 400 1.0625rem/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body.is-locked { overflow: hidden; }
img { max-width: 100%; }
.home main img, .site-header img, .site-footer img { display: block; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.home main h1, .home main h2, .home main h3, .home main p, .home main figure,
.site-header p, .site-footer p { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }
[id] { scroll-margin-top: 96px; }

/* article pages: body links stay recognisable as links */
.pages .main-wrapper .item-paragraph a,
.pages .main-wrapper .item-html a {
  color: var(--coral-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* paper grain over everything (static layer, never repainted) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.05 0 0 0 0 0.1 0 0 0 0 0.2 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* lazy images fade in once decoded instead of popping */
.js img[loading="lazy"]:not(.is-loaded) { opacity: 0; }
.js img[loading="lazy"].is-loaded { animation: imgIn .6s ease backwards; }

.wrap { width: min(var(--wrap), calc(100% - 2 * var(--gutter))); margin-inline: auto; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--coral); flex: none; }

.h2 {
  font: 700 clamp(2rem, 3.9vw, 3.5rem)/1.05 var(--f-title);
  letter-spacing: -.035em;
}
/* sized so the caps titles keep the width they had in the original type */
.h2--caps { text-transform: uppercase; letter-spacing: .005em; }

/* ---------- buttons (hard offset shadow) ----------
   Bootstrap's .btn state rules read these --bs-btn-* variables, so they are
   pointed at our own colours instead of being fought with !important. */
.btn {
  --shadow: var(--navy);
  --btn-bg: transparent;
  --btn-border: var(--navy);
  --bs-btn-color: var(--navy);
  --bs-btn-bg: var(--btn-bg);
  --bs-btn-border-color: var(--btn-border);
  --bs-btn-hover-color: var(--navy);
  --bs-btn-hover-bg: var(--btn-bg);
  --bs-btn-hover-border-color: var(--btn-border);
  --bs-btn-active-color: var(--navy);
  --bs-btn-active-bg: var(--btn-bg);
  --bs-btn-active-border-color: var(--btn-border);
  --bs-btn-active-shadow: 1px 1px 0 var(--shadow);
  --bs-btn-focus-box-shadow: 4px 4px 0 var(--shadow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 24px;
  font: 800 .95rem/1 var(--f-body);
  letter-spacing: .01em;
  color: var(--navy);
  background: var(--btn-bg);
  border: 2px solid var(--btn-border);
  border-radius: 12px;
  box-shadow: 4px 4px 0 var(--shadow);
  touch-action: manipulation;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), background-color .2s;
}
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--shadow); transition-duration: .06s; }
.btn--sm { padding: 11px 18px; font-size: .85rem; }
.btn--aqua { --btn-bg: var(--aqua); }
.btn--paper { --btn-bg: var(--paper); }
.btn--coral { --btn-bg: var(--coral-btn); }

.ctrl {
  display: grid;
  place-items: center;
  width: 46px;
  height: 36px;
  border: 2px solid var(--navy);
  border-radius: 10px;
  background: var(--paper);
  color: var(--navy);
  font: 800 1.1rem/1 var(--f-body);
  box-shadow: 3px 3px 0 var(--navy);
  user-select: none;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.ctrl:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--navy); transition-duration: .06s; }

.round {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--navy);
  background: var(--navy);
  color: #fff;
  box-shadow: 3px 3px 0 var(--aqua);
  user-select: none;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), opacity .25s;
}
.round:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--aqua); transition-duration: .06s; }
.round.is-off { opacity: .35; pointer-events: none; }
.round--light { background: var(--paper); color: var(--navy); border-color: var(--paper); box-shadow: 3px 3px 0 var(--coral); }
.round--light:active { box-shadow: 1px 1px 0 var(--coral); }

/* ---------- category marker (map-legend circle + line icon) ----------
   Icons are masks, so their colour follows `background` below. The
   per-category --icon URLs are generated by the build script. */
.cat-icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sky);
  transition: background-color .25s ease, transform .4s var(--bounce);
}
.cat-icon::before {
  content: "";
  width: 22px;
  height: 22px;
  background: var(--navy);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

/* ---------- logo (Lasso shell) ---------- */
/* logo: 170px in the header, 180px in the footer; the 360px-wide PNG stays sharp on 2x screens */
.logo { max-width: 170px; }
.logo a { display: flex; }
img.logo { width: 170px; height: auto; }
.site-footer .logo, .site-footer img.logo { max-width: 180px; width: 180px; }

/* ==========================================================================
   Header (Lasso shell: logo, nav with dropdowns, collapse toggle)
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--header-h);
  padding: 0 max(var(--gutter), calc((100% - var(--wrap)) / 2));
  background: var(--paper);
  border-bottom: 2px solid var(--navy);
}
.site-header nav { align-self: stretch; margin-left: auto; }
.nav-links { display: flex; height: 100%; margin: 0; padding: 0; list-style: none; }
.nav-item { position: relative; display: flex; }
.nav-item > a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  font: 800 .82rem/1 var(--f-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav-item > a::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 22px;
  height: 4px;
  border-radius: 4px;
  background: var(--aqua);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease-out);
}
.nav-item.is-open > a::after { transform: scaleX(1); }
.nav-caret { width: 10px; height: 6px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease-out); }
.nav-item.is-open .nav-caret { transform: rotate(180deg); }

.nav-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  z-index: 70;
  width: 440px;
  padding: 22px 24px 20px;
  background: var(--navy);
  color: #fff;
  border-radius: 0 0 18px 18px;
  box-shadow: 8px 8px 0 var(--aqua);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .2s ease, transform .3s var(--ease-out), visibility 0s .3s;
}
.nav-dropdown-right { left: auto; right: 0; }
.nav-item.is-open .nav-dropdown { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .3s var(--ease-out); }
.site-header .nav-dropdown__label { margin: 0 0 8px; font: 800 .68rem/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--sky); }
.nav-dropdown__label + ul { margin-bottom: 16px; }
.nav-dropdown__cats, .nav-dropdown__list { margin: 0; padding: 0; list-style: none; }
.nav-dropdown__cats a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  font: 700 1rem/1.2 var(--f-display);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  transition: color .2s;
}
.nav-dropdown__cats a > span:not(.cat-icon) { transition: transform .3s var(--ease-out); }
.nav-dropdown__cats .cat-icon { width: 34px; height: 34px; }
.nav-dropdown__cats .cat-icon::before { width: 19px; height: 19px; }
.nav-dropdown__cats em { margin-left: auto; font: italic 700 .85rem var(--f-body); color: var(--coral-soft); }
.nav-dropdown__list a {
  display: block;
  padding: 7px 0;
  font: 600 .92rem/1.3 var(--f-body);
  color: rgba(255, 255, 255, .86);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  transition: color .2s, transform .3s var(--ease-out);
}
.nav-dropdown__all { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font: 800 .85rem/1 var(--f-body); color: var(--aqua); }
.nav-dropdown__all svg { transition: transform .3s var(--ease-out); }

.nav-scrim {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 50;
  background: rgba(10, 34, 72, .32);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.nav-scrim.is-on { opacity: 1; }

/* collapse toggle, dressed as the coral MENU button.
   Whole-pixel bars (3px, 4px apart) so they never round unevenly; the X
   moves each outer bar exactly one bar + gap (7px) onto the middle line. */
.nav-toggle {
  display: grid;
  grid-template-rows: 3px 3px 3px auto;
  row-gap: 4px;
  justify-items: center;
  align-content: center;
  margin-left: auto;
  width: 66px;
  height: 54px;
  padding: 0;
  color: var(--navy);
  background: var(--coral-btn);
  border: 2px solid var(--navy);
  border-radius: 12px;
  box-shadow: 4px 4px 0 var(--navy);
  user-select: none;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.nav-toggle::after {
  content: "Menu";
  margin-top: 4px;
  font: 800 .66rem/1 var(--f-body);
  letter-spacing: .14em;
  text-indent: .14em; /* balances the trailing letter-spacing so the word sits centred */
  text-transform: uppercase;
}
.nav-toggle[aria-expanded="true"]::after { content: "Close"; }
.nav-toggle:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--navy); transition-duration: .06s; }
.nav-toggle-bar {
  display: block;
  width: 24px;
  height: 3px;
  border-radius: 3px;
  background: var(--navy);
  transform-origin: center;
  transition: transform .35s var(--ease-out), opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* mobile menu: Bootstrap collapse without its height animation; the panel
   drops in with transform/opacity instead (see main.js for the close). */
#mobile-menu {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 55;
  background: var(--navy);
  color: #fff;
  overflow-y: auto;
  overscroll-behavior: contain;
}
#mobile-menu.collapsing { height: auto !important; transition: none; }
#mobile-menu.show { animation: menuDrop .45s var(--ease-out) backwards; }
#mobile-menu.is-closing { animation: menuLift .26s ease forwards; }
.mobile-menu-inner { width: min(var(--wrap), calc(100% - 2 * var(--gutter))); margin-inline: auto; padding: 18px 0 64px; }
.mobile-menu-inner ul { margin: 0; padding: 0; list-style: none; }
.mobile-menu-inner > ul > li { padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
#mobile-menu.show .mobile-menu-inner > ul > li { animation: fadeUp .5s var(--ease-out) backwards; animation-delay: calc(.08s + var(--i, 0) * 35ms); }
.mobile-menu-inner > ul > li > a { font: 800 clamp(1.4rem, 5vw, 2rem)/1.1 var(--f-display); letter-spacing: -.02em; }
.mobile-sublist { display: grid; gap: 2px; margin-top: 12px !important; }
.mobile-sublist a {
  position: relative;
  display: block;
  padding: 7px 0 7px 18px;
  font: 600 .92rem/1.35 var(--f-body);
  color: rgba(255, 255, 255, .8);
}
.mobile-sublist a::before { content: ""; position: absolute; left: 2px; top: 1.05em; width: 6px; height: 6px; border-radius: 50%; background: var(--coral-soft); }
.mobile-sublist a.mobile-cat { display: flex; align-items: center; gap: 12px; padding-left: 0; font: 700 1rem/1.2 var(--f-body); color: #fff; }
.mobile-sublist a.mobile-cat::before, .mobile-sublist a.mobile-all::before { display: none; }
.mobile-sublist .cat-icon { width: 34px; height: 34px; }
.mobile-sublist .cat-icon::before { width: 19px; height: 19px; }
.mobile-sublist a.mobile-all { padding-left: 0; font-weight: 800; color: var(--aqua); }
.mobile-sublist a.mobile-all::after { content: " \2192"; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  height: clamp(540px, calc(100svh - var(--header-h)), 820px);
  overflow: hidden;
  background: var(--navy);
  color: #fff;
}
.hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; will-change: opacity; }
.hero__slide.is-active { opacity: 1; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); transition: transform 8s linear; will-change: transform; }
.hero__slide.is-active img { transform: scale(1); }
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 34, 72, .28) 0%, transparent 28%, transparent 45%, rgba(10, 34, 72, .78) 100%);
}
.hero__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(26px, 4.5vw, 56px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}
.hero__title { display: grid; margin: 0; font-weight: 400; }
/* the lettering is SVG (original Yellowtail + Unbounded 900 outlines, sized in em),
   so font-size here only scales it; no web font is downloaded */
.hero__title svg { display: block; max-width: 100%; height: auto; overflow: visible; fill: currentColor; }
.hero__script {
  margin: 0 0 10px 6px;
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  line-height: 1;
  color: var(--coral-soft);
  filter: drop-shadow(.045em .045em 0 var(--navy-deep));
  transform: rotate(-4deg);
  transform-origin: left;
  animation: scriptIn .8s .2s var(--ease-out) backwards;
}
.hero__line { display: block; overflow: hidden; padding-bottom: .04em; }
.hero__line > span {
  display: block;
  font-size: clamp(2.8rem, 8vw, 7.6rem);
  line-height: .92;
  animation: lineUp 1s var(--ease-out) backwards;
}
.hero__line:nth-of-type(2) > span { animation-delay: .1s; }
.hero__line:nth-of-type(3) > span { animation-delay: .22s; }
.hero__side { display: grid; justify-items: end; gap: 14px; flex: none; animation: fadeUp .8s .45s var(--ease-out) backwards; }
.hero__caption {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--navy);
  font: 800 .88rem/1 var(--f-body);
}
.hero__caption span:last-child { transition: opacity .25s ease, transform .3s var(--ease-out); }
.hero__caption.is-swapping span:last-child { opacity: 0; transform: translateY(4px); }
.hero__controls { display: flex; align-items: center; gap: 14px; }
.hero__bars { display: flex; gap: 6px; }
.hero__bars span { position: relative; width: 44px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.hero__bars span::after { content: ""; position: absolute; inset: 0; background: var(--aqua); transform: scaleX(0); transform-origin: left; }
.hero__bars span.is-done::after { transform: scaleX(1); }
.hero__bars span.is-active::after { animation: bar var(--hero-ms, 6500ms) linear forwards; }
.hero.is-paused .hero__bars span.is-active::after,
.hero.is-offscreen .hero__bars span.is-active::after { animation-play-state: paused; }
.hero.is-static .hero__controls { display: none; }
.ctrl .i-play { display: none; }
.hero.is-paused .ctrl .i-play { display: block; }
.hero.is-paused .ctrl .i-pause { display: none; }

/* ==========================================================================
   Welcome
   ========================================================================== */
.welcome {
  position: relative;
  overflow: hidden;
  padding: clamp(80px, 9vw, 130px) 0;
  background: var(--blush);
}
.halftone {
  position: absolute;
  width: 520px;
  height: 520px;
  pointer-events: none;
  background-image: radial-gradient(circle, var(--coral) 1.7px, transparent 2px);
  background-size: 9px 9px;
  opacity: .5;
}
.halftone--tr { top: -40px; right: -60px; -webkit-mask-image: radial-gradient(circle at 100% 0%, #000 0%, transparent 68%); mask-image: radial-gradient(circle at 100% 0%, #000 0%, transparent 68%); }
.halftone--bl {
  bottom: -80px;
  left: -80px;
  background-image: radial-gradient(circle, var(--aqua) 1.7px, transparent 2px);
  opacity: .7;
  -webkit-mask-image: radial-gradient(circle at 0% 100%, #000 0%, transparent 62%);
  mask-image: radial-gradient(circle at 0% 100%, #000 0%, transparent 62%);
}
.welcome__grid { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.collage {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  grid-template-rows: 1fr 1fr;
  gap: 14px;
  height: clamp(420px, 44vw, 580px);
}
.tile { position: relative; overflow: hidden; border-radius: 18px; background: var(--sky); isolation: isolate; }
.tile--c { grid-column: 2; grid-row: 1 / span 2; margin-top: -48px; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.tile::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(10, 34, 72, .75)); }
.tile__label {
  position: absolute;
  left: 18px;
  bottom: 16px;
  z-index: 1;
  color: #fff;
  font: 800 .92rem/1 var(--f-body);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.tile__label i { display: inline-block; font-style: normal; color: var(--aqua); transition: transform .3s var(--ease-out); }

.welcome__kicker { font: 800 clamp(1.2rem, 1.8vw, 1.5rem)/1 var(--f-body); }
.welcome__title {
  position: relative;
  display: inline-block;
  margin: 6px 0 30px !important;
  font: 700 clamp(3rem, 6.4vw, 6rem)/.95 var(--f-title);
  letter-spacing: -.06em;
  text-transform: uppercase;
}
.welcome__route { position: absolute; left: 0; bottom: -26px; width: 100%; height: 26px; overflow: visible; }
.welcome__route path { fill: none; stroke: var(--aqua); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 520; stroke-dashoffset: 520; transition: stroke-dashoffset 1.6s .3s var(--ease-out); }
.welcome__route circle { fill: var(--coral); transform: scale(0); transform-origin: 408px 20px; transition: transform .5s 1.5s var(--bounce); }
.welcome__copy.is-in .welcome__route path { stroke-dashoffset: 0; }
.welcome__copy.is-in .welcome__route circle { transform: scale(1); }
.welcome__copy > p { max-width: 50ch; font-size: 1.12rem; color: var(--navy-70); }
.welcome__copy > p a { color: var(--navy); font-weight: 700; text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: 4px; transition: background-color .2s; }
.welcome__actions { display: grid; justify-items: start; gap: 16px; margin-top: 34px; }

/* ==========================================================================
   Explore (sliced carousel + day/night)
   ========================================================================== */
.explore {
  position: relative;
  overflow: hidden;
  padding: clamp(80px, 9vw, 120px) 0;
  background: var(--paper);
  transition: color .6s ease;
}
/* night is a fading overlay, so the big background never repaints */
.explore::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--navy-deep);
  opacity: 0;
  transition: opacity .6s ease;
}
.explore.is-night { color: #fff; }
.explore.is-night::before { opacity: 1; }
.explore__stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .9s;
  background-image:
    radial-gradient(2.5px 2.5px at 45.3% 41.9%, var(--sky), transparent),
    radial-gradient(2px 2px at 50.8% 45.0%, var(--sky), transparent),
    radial-gradient(2px 2px at 62.7% 70.6%, var(--sky), transparent),
    radial-gradient(3px 3px at 30.7% 2.7%, #fff, transparent),
    radial-gradient(2.5px 2.5px at 59.4% 24.9%, #fff, transparent),
    radial-gradient(2px 2px at 62.1% 75.8%, #fff, transparent),
    radial-gradient(3px 3px at 4.5% 82.5%, #fff, transparent),
    radial-gradient(3px 3px at 77.3% 18.6%, #fff, transparent),
    radial-gradient(2.5px 2.5px at 51.9% 51.2%, #fff, transparent),
    radial-gradient(2.5px 2.5px at 65.9% 30.9%, var(--sky), transparent),
    radial-gradient(2px 2px at 98.8% 99.4%, rgba(255,255,255,.75), transparent),
    radial-gradient(2.5px 2.5px at 31.9% 11.0%, #fff, transparent),
    radial-gradient(2.5px 2.5px at 7.9% 67.1%, #fff, transparent),
    radial-gradient(2px 2px at 84.0% 24.0%, #fff, transparent),
    radial-gradient(2px 2px at 21.9% 89.3%, var(--sky), transparent),
    radial-gradient(2.5px 2.5px at 37.8% 59.7%, #fff, transparent),
    radial-gradient(3px 3px at 56.5% 8.8%, rgba(255,255,255,.75), transparent),
    radial-gradient(2px 2px at 34.0% 17.4%, var(--sky), transparent),
    radial-gradient(2px 2px at 75.3% 4.1%, #fff, transparent),
    radial-gradient(2.5px 2.5px at 2.1% 31.7%, #fff, transparent),
    radial-gradient(3px 3px at 67.8% 8.2%, #fff, transparent),
    radial-gradient(2.5px 2.5px at 97.6% 67.5%, var(--sky), transparent),
    radial-gradient(2px 2px at 12.4% 27.3%, #fff, transparent),
    radial-gradient(3px 3px at 27.4% 95.7%, rgba(255,255,255,.75), transparent),
    radial-gradient(2px 2px at 98.8% 0.3%, var(--sky), transparent),
    radial-gradient(3px 3px at 98.6% 46.7%, #fff, transparent),
    radial-gradient(2.5px 2.5px at 5.1% 5.6%, rgba(255,255,255,.75), transparent),
    radial-gradient(2.5px 2.5px at 1.9% 47.7%, var(--sky), transparent),
    radial-gradient(3px 3px at 8.2% 2.7%, #fff, transparent),
    radial-gradient(3px 3px at 2.5% 22.4%, var(--sky), transparent),
    radial-gradient(3px 3px at 13.5% 45.0%, #fff, transparent),
    radial-gradient(2px 2px at 85.9% 7.8%, rgba(255,255,255,.75), transparent),
    radial-gradient(2px 2px at 90.0% 74.0%, #fff, transparent),
    radial-gradient(3px 3px at 16.5% 49.9%, #fff, transparent),
    radial-gradient(2.5px 2.5px at 68.3% 24.2%, #fff, transparent),
    radial-gradient(2px 2px at 42.3% 3.3%, rgba(255,255,255,.75), transparent),
    radial-gradient(2.5px 2.5px at 24.4% 59.1%, var(--sky), transparent),
    radial-gradient(2.5px 2.5px at 81.7% 46.1%, #fff, transparent),
    radial-gradient(2px 2px at 92.1% 96.6%, #fff, transparent),
    radial-gradient(3px 3px at 48.0% 52.8%, #fff, transparent),
    radial-gradient(2px 2px at 28.5% 87.9%, #fff, transparent),
    radial-gradient(2px 2px at 7.8% 26.4%, #fff, transparent),
    radial-gradient(3px 3px at 5.6% 15.0%, #fff, transparent),
    radial-gradient(2.5px 2.5px at 10.0% 5.1%, rgba(255,255,255,.75), transparent),
    radial-gradient(3px 3px at 65.4% 57.5%, #fff, transparent),
    radial-gradient(2.5px 2.5px at 58.8% 88.8%, rgba(255,255,255,.75), transparent),
    radial-gradient(2px 2px at 69.7% 94.5%, #fff, transparent),
    radial-gradient(2.5px 2.5px at 48.3% 62.4%, #fff, transparent),
    radial-gradient(3px 3px at 98.9% 2.1%, rgba(255,255,255,.75), transparent),
    radial-gradient(3px 3px at 73.2% 85.4%, #fff, transparent),
    radial-gradient(2.5px 2.5px at 78.7% 87.5%, #fff, transparent),
    radial-gradient(2.5px 2.5px at 68.1% 85.5%, #fff, transparent);
}
/* two extra layers that twinkle out of step (opacity only, GPU-friendly) */
.explore__stars::before,
.explore__stars::after {
  content: "";
  position: absolute;
  inset: 0;
}
.explore__stars::before {
  background-image:
    radial-gradient(3.5px 3.5px at 85.6% 43.4%, var(--aqua), transparent),
    radial-gradient(3px 3px at 58.1% 47.5%, #fff, transparent),
    radial-gradient(3.5px 3.5px at 63.7% 99.0%, var(--aqua), transparent),
    radial-gradient(3.5px 3.5px at 39.1% 63.0%, var(--aqua), transparent),
    radial-gradient(3px 3px at 46.3% 39.8%, var(--aqua), transparent),
    radial-gradient(3px 3px at 59.9% 33.4%, #fff, transparent),
    radial-gradient(3.5px 3.5px at 49.7% 48.2%, var(--aqua), transparent),
    radial-gradient(3px 3px at 88.8% 22.3%, #fff, transparent),
    radial-gradient(3.5px 3.5px at 51.8% 65.4%, var(--aqua), transparent),
    radial-gradient(3.5px 3.5px at 49.8% 11.9%, var(--aqua), transparent),
    radial-gradient(3px 3px at 20.5% 28.3%, #fff, transparent),
    radial-gradient(3.5px 3.5px at 38.7% 44.5%, #fff, transparent),
    radial-gradient(3px 3px at 14.3% 35.0%, #fff, transparent),
    radial-gradient(3px 3px at 94.1% 14.6%, #fff, transparent),
    radial-gradient(3px 3px at 45.2% 14.4%, var(--aqua), transparent),
    radial-gradient(3.5px 3.5px at 38.5% 37.5%, var(--aqua), transparent),
    radial-gradient(3.5px 3.5px at 32.4% 75.4%, #fff, transparent),
    radial-gradient(3.5px 3.5px at 67.5% 14.9%, var(--aqua), transparent);
}
.explore__stars::after {
  background-image:
    radial-gradient(3.5px 3.5px at 64.6% 42.4%, #FFE9B0, transparent),
    radial-gradient(4.5px 4.5px at 45.6% 0.4%, #fff, transparent),
    radial-gradient(3.5px 3.5px at 77.4% 71.1%, #FFE9B0, transparent),
    radial-gradient(4.5px 4.5px at 11.7% 39.2%, #fff, transparent),
    radial-gradient(4.5px 4.5px at 68.1% 8.9%, #FFE9B0, transparent),
    radial-gradient(4.5px 4.5px at 18.5% 0.1%, #fff, transparent),
    radial-gradient(4.5px 4.5px at 18.6% 14.2%, #fff, transparent),
    radial-gradient(3.5px 3.5px at 39.6% 70.5%, #fff, transparent),
    radial-gradient(4.5px 4.5px at 41.2% 84.3%, #fff, transparent),
    radial-gradient(3.5px 3.5px at 45.1% 8.7%, #FFE9B0, transparent),
    radial-gradient(4.5px 4.5px at 54.9% 52.7%, #FFE9B0, transparent),
    radial-gradient(3.5px 3.5px at 33.0% 97.4%, #fff, transparent),
    radial-gradient(3.5px 3.5px at 21.9% 85.4%, #FFE9B0, transparent),
    radial-gradient(4.5px 4.5px at 53.6% 70.3%, #FFE9B0, transparent);
}
.explore.is-night .explore__stars { opacity: 1; }
.explore.is-night .explore__stars::before { animation: twinkle 3.2s ease-in-out infinite; }
.explore.is-night .explore__stars::after { animation: twinkle 4.6s ease-in-out 1.4s infinite; }
.explore__head, .explore__info { position: relative; z-index: 1; }
.explore__head { display: grid; justify-items: center; gap: 16px; text-align: center; }

.daynight { display: flex; align-items: center; gap: 10px; font: 800 .72rem/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; }
.daynight__switch {
  position: relative;
  width: 58px;
  height: 30px;
  padding: 0;
  border: 2px solid currentColor;
  border-radius: 999px;
  background: transparent;
}
.daynight__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--navy);
  color: #FFD37A;
  transition: transform .45s var(--bounce), background-color .4s;
}
.daynight__knob svg { position: absolute; transition: opacity .25s, transform .45s var(--ease-out); }
.daynight__knob .i-moon { opacity: 0; transform: rotate(-90deg) scale(.5); }
.explore.is-night .daynight__knob { transform: translateX(28px); background: var(--aqua); color: var(--navy-deep); }
.explore.is-night .daynight__knob .i-sun { opacity: 0; transform: rotate(90deg) scale(.5); }
.explore.is-night .daynight__knob .i-moon { opacity: 1; transform: none; }
.daynight__day, .daynight__night { opacity: .45; transition: opacity .3s; }
.explore:not(.is-night) .daynight__day, .explore.is-night .daynight__night { opacity: 1; }

.explore__stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr minmax(0, 2.3fr) 1fr;
  gap: clamp(14px, 2vw, 28px);
  align-items: end;
  margin-top: clamp(36px, 4vw, 56px);
  height: clamp(280px, 30vw, 440px);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.explore__peek {
  position: relative;
  height: 72%;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--sky);
  isolation: isolate;
}
.explore__peek--prev { border-radius: 0 18px 18px 0; }
.explore__peek--next { border-radius: 18px 0 0 18px; }
.explore__peek img { width: 100%; height: 100%; object-fit: cover; opacity: .55; filter: saturate(.8); transition: opacity .35s ease, transform .8s var(--ease-out); }
.explore__main { position: relative; height: 100%; }
.explore__stage .ctrl { position: absolute; top: 58%; z-index: 3; }
.ctrl--prev { left: calc(50% - (2.3 / 4.3 * 50%) - 23px - clamp(14px, 2vw, 28px) / 2); }
.ctrl--next { right: calc(50% - (2.3 / 4.3 * 50%) - 23px - clamp(14px, 2vw, 28px) / 2); }

/* sliced image strips (skyline effect). New layers rise on top of the
   previous one, so a change never flashes an empty stage. */
.strips {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  overflow: hidden;
  container-type: size;
  pointer-events: none;
}
.strip {
  position: relative;
  flex: 1;
  height: calc(100% - var(--top));
  overflow: hidden;
  animation: stripUp .85s var(--ease-out) backwards;
  animation-delay: calc(var(--i) * 40ms);
}
.strip img {
  position: absolute;
  bottom: 0;
  left: calc(var(--i) * (-100% - 3px));
  width: calc(var(--n) * 100% + (var(--n) - 1) * 3px);
  max-width: none;
  height: 100cqh;
  object-fit: cover;
}
.strips.is-static .strip { animation: none; }

.explore__label {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 2;
  padding: 12px 26px 10px;
  border-radius: 16px 16px 0 0;
  background: var(--paper);
  color: var(--navy);
  font: 700 clamp(1.05rem, 1.8vw, 1.5rem)/1.1 var(--f-title);
  letter-spacing: -.035em;
  white-space: nowrap;
  transform: translateX(-50%);
  transition: background-color .6s, color .6s;
}
.explore__label span { display: block; min-width: 4em; text-align: center; }
.explore.is-night .explore__label { background: var(--navy-deep); color: #fff; }
.explore__info { display: grid; justify-items: center; gap: 22px; margin-top: 26px; text-align: center; }
.explore__text { max-width: 62ch; font-size: 1.08rem; min-height: 3.4em; }
.explore__label span, .explore__text, .explore__cta { transition: opacity .2s ease, transform .3s var(--ease-out); }
.explore.is-swapping .explore__label span,
.explore.is-swapping .explore__text { opacity: 0; transform: translateY(6px); }
.explore.is-night .btn--paper { --shadow: var(--aqua); --btn-border: var(--paper); }

/* ==========================================================================
   Every corner of Orlando (all categories)
   ========================================================================== */
.cats { padding: clamp(80px, 9vw, 120px) 0; background: var(--navy); color: #fff; overflow: hidden; }
.cats__head { display: grid; gap: 10px; margin-bottom: clamp(32px, 4vw, 52px); }
.cats__kicker { font: 800 .78rem/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--aqua); }
.cats__grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.cats__list { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(7, auto); grid-auto-flow: column; column-gap: clamp(24px, 3vw, 44px); }
.cats__list a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  font: 700 clamp(1.02rem, 1.5vw, 1.3rem)/1.15 var(--f-display);
  letter-spacing: -.01em;
  transition: color .2s;
}
.cats__list a > span:not(.cat-icon) { transition: transform .35s var(--ease-out); }
.cats__list em { margin-left: auto; font: italic 700 .88rem/1 var(--f-body); color: var(--coral-soft); white-space: nowrap; letter-spacing: 0; }
.cats__list a.is-active { color: var(--aqua); }
.cats__list a.is-active .cat-icon { background: var(--aqua); transform: rotate(-8deg) scale(1.06); }
.cats__list a.is-active > span:not(.cat-icon) { transform: translateX(8px); }
.cats__preview { position: sticky; top: calc(var(--header-h) + 24px); aspect-ratio: 4 / 5; overflow: hidden; border-radius: 26px; box-shadow: 10px 10px 0 var(--aqua); background: var(--navy-deep); }
.cats__preview img { width: 100%; height: 100%; object-fit: cover; transition: opacity .22s ease; }
.cats__preview img.is-swapping { opacity: 0; }

/* ==========================================================================
   Trending (layered frames)
   ========================================================================== */
.trending { padding: clamp(60px, 7vw, 100px) 0 clamp(80px, 8vw, 120px); }
.trending__frame { position: relative; isolation: isolate; padding: clamp(40px, 5vw, 64px) clamp(16px, 4vw, 56px) clamp(32px, 4vw, 52px); }
.trending__frame::before,
.trending__frame::after { content: ""; position: absolute; z-index: -1; }
.trending__frame::before { inset: 0 7%; background: var(--sky-soft); }
.trending__frame::after { inset: 44% 0 10%; background: var(--sky); opacity: .7; }
.trending__head { display: grid; justify-items: center; gap: 10px; margin-bottom: clamp(26px, 3vw, 40px); text-align: center; }
.route-mark { width: 220px; height: 24px; }
.route-mark path { fill: none; stroke: var(--aqua); stroke-width: 6; stroke-linecap: round; }
.route-mark circle { fill: var(--coral); }
.trending__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 24px); padding: 10px; background: var(--paper); border: 2px solid var(--navy); box-shadow: 8px 8px 0 var(--navy); }
.trend { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; isolation: isolate; }
.trend img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.trend::after { content: ""; position: absolute; inset: 0; background: rgba(10, 34, 72, .5); opacity: .68; transition: opacity .4s ease; }
.trend__title {
  position: relative;
  z-index: 1;
  max-width: 26ch;
  padding: 0 20px;
  color: #fff;
  font: 800 clamp(1.1rem, 1.75vw, 1.6rem)/1.18 var(--f-display);
  letter-spacing: -.02em;
  text-align: center;
  text-shadow: 0 2px 18px rgba(10, 34, 72, .45);
}

/* ==========================================================================
   Marquee (two identical groups, seamless -50% loop)
   ========================================================================== */
.marquee { overflow: hidden; background: var(--coral); color: var(--paper); border-block: 2px solid var(--navy); }
.marquee__track { display: flex; width: max-content; padding: 14px 0; animation: marquee var(--marquee-dur, 30s) linear infinite; will-change: transform; }
.marquee__group { display: flex; align-items: center; flex: none; }
.marquee__group > * { margin-right: 28px; }
.marquee__group span { font: 700 clamp(1.2rem, 1.6vw, 1.35rem)/1 var(--f-title); letter-spacing: -.01em; text-transform: uppercase; white-space: nowrap; }
.marquee__group svg { width: 14px; height: 20px; flex: none; }
.marquee__group svg path { fill: var(--paper); }
.marquee__group svg circle { fill: var(--coral); }

/* ==========================================================================
   Theme park country (expanding columns)
   Images are sized to the largest a column can get, so expanding a column
   only changes its clipping and never re-scales the photo.
   ========================================================================== */
.parks { padding: clamp(80px, 9vw, 130px) 0; background: var(--navy); color: #fff; overflow: hidden; }
.parks__head { position: relative; isolation: isolate; display: grid; justify-items: center; gap: 12px; width: fit-content; margin: 0 auto clamp(40px, 5vw, 64px); padding: 30px clamp(28px, 5vw, 80px); text-align: center; }
.parks__head::before,
.parks__head::after { content: ""; position: absolute; z-index: -1; background: var(--aqua); }
.parks__head::before { inset: 0 12%; opacity: .14; }
.parks__head::after { inset: 18% 0; opacity: .1; }
.parks__head p { font: italic 700 1.05rem var(--f-body); color: var(--coral-soft); }
.parks__cols {
  --cols-h: clamp(360px, 36vw, 500px);
  --pimg-w: min(560px, 42vw);
  display: flex;
  align-items: flex-end;
  gap: 12px;
  height: var(--cols-h);
}
.pcol {
  position: relative;
  flex: 1 1 0;
  height: 78%;
  overflow: hidden;
  border-radius: 16px;
  isolation: isolate;
  transition: flex-grow .6s var(--ease-out), height .6s var(--ease-out);
}
.pcol--hero { height: 100%; }
.pcol img {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: var(--pimg-w);
  height: var(--cols-h);
  max-width: none;
  margin-left: calc(var(--pimg-w) / -2);
  object-fit: cover;
  transition: transform .9s var(--ease-out);
}
.pcol::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, rgba(10, 34, 72, .85)); }
.pcol span {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 1;
  width: max-content;
  max-width: calc(100% - 20px);
  font: 800 clamp(.72rem, 1vw, .95rem)/1.2 var(--f-body);
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
  transform: translateX(-50%);
}
.pcol--hero span { font: 700 clamp(1rem, 1.6vw, 1.4rem)/1.1 var(--f-title); letter-spacing: -.035em; text-transform: none; }
@media (min-width: 801px) {
  .parks__cols.has-active .pcol { flex-grow: .75; }
  .parks__cols .pcol.is-active { flex-grow: 2; height: 100%; }
  .pcol.is-active img { transform: scale(1.05); }
}

/* ==========================================================================
   Latest guides (horizontal track)
   ========================================================================== */
.latest { padding: clamp(80px, 9vw, 130px) 0; }
.latest__grid {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding-left: max(var(--gutter), calc((100% - var(--wrap)) / 2));
}
.latest__intro { display: grid; justify-items: start; gap: 22px; }
.latest__nav { display: flex; gap: 12px; }
.latest__track {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(250px, 24vw, 310px);
  gap: 20px;
  padding: 10px var(--gutter) 22px 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 10px;
  scrollbar-width: none;
}
.latest__track::-webkit-scrollbar { display: none; }
.gcard { scroll-snap-align: start; padding: 12px 12px 18px; border-radius: 18px; background: var(--sky-soft); transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.gcard__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; isolation: isolate; background: var(--sky); }
.gcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.gcard__title { margin: 16px 4px 12px !important; font: 800 1.08rem/1.28 var(--f-body); }
.gcard__title a { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 3px; transition: text-decoration-color .2s; }
.gcard__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 4px !important; font: 700 .82rem/1.2 var(--f-body); }
.gcard__cat { display: inline-flex; align-items: center; gap: 6px; color: var(--tan-ink); }
.gcard__cat::before { content: ""; width: 9px; height: 13px; flex: none; background: var(--pin) center / contain no-repeat; }

/* ==========================================================================
   Insider blog
   ========================================================================== */
.blog { padding: clamp(80px, 9vw, 120px) 0; background: var(--sand); }
.blog__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.blog__visual { position: relative; aspect-ratio: 4 / 5; }
.blog__visual::before { content: ""; position: absolute; top: 6%; bottom: -4%; left: -24px; width: 30%; z-index: 0; background: var(--coral); border-radius: 18px; }
.blog__visual img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; border-radius: 18px; }
.blog__label {
  position: absolute;
  top: 34px;
  left: -24px;
  z-index: 2;
  padding: 16px 28px 16px 24px;
  background: var(--coral);
  color: var(--paper);
  border-radius: 0 14px 14px 0;
  font: 700 clamp(1.5rem, 2.8vw, 2.3rem)/.95 var(--f-title);
  letter-spacing: -.04em;
  text-transform: uppercase;
}
.stamp {
  position: absolute;
  top: 16px;
  right: -26px;
  z-index: 2;
  width: clamp(100px, 10vw, 140px);
  animation: spin 22s linear infinite;
  will-change: transform;
}
.stamp > circle { fill: var(--paper); stroke: var(--navy); stroke-width: 2; }
.stamp text { font: 800 10.5px var(--f-body); letter-spacing: .24em; fill: var(--navy); }
.stamp__pin { fill: var(--coral); }
.stamp__dot { fill: var(--paper); }
.blog__list { display: grid; }
.post { display: grid; grid-template-columns: clamp(130px, 14vw, 200px) 1fr; gap: clamp(16px, 2vw, 28px); padding: 26px 0; border-bottom: 2px solid var(--line); }
.post:first-child { padding-top: 0; }
.post__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; isolation: isolate; background: var(--sky); }
.post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.post__cat { font: 800 .72rem/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--tan-ink); }
.post h3 { margin: 10px 0 8px !important; font: 800 clamp(1.15rem, 1.7vw, 1.45rem)/1.2 var(--f-display); letter-spacing: -.02em; }
.post h3 a { background: linear-gradient(var(--aqua), var(--aqua)) 0 100% / 0 6px no-repeat; transition: background-size .45s var(--ease-out); }
.post__excerpt { font-size: .98rem; color: var(--navy-70); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ==========================================================================
   Neighborhood map (the Villatel reference, made interactive)
   ========================================================================== */
.hoods { padding: clamp(64px, 7vw, 100px) 0; background: var(--navy); color: #fff; }
.hoods__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.hoods__map {
  position: relative;
  aspect-ratio: 4 / 3;
  container-type: inline-size;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 10px 10px 0 var(--aqua);
}
.map { position: absolute; inset: 0; width: 100%; height: 100%; }
.map__lakes { fill: var(--sky); }
.map__roads path { fill: none; stroke: rgba(255, 255, 255, .9); stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; }
.map__roads--minor path { stroke: rgba(255, 255, 255, .78); stroke-width: 8; }
.map__label { font: 700 13px var(--f-body); fill: var(--tan-ink); letter-spacing: .02em; }
.map__label--sm { font-size: 11px; }
.map__shield path { fill: var(--tan); }
.map__shield text { font: 800 12px var(--f-body); fill: #fff; text-anchor: middle; }
.map__route { fill: none; stroke: var(--aqua); stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 360; stroke-dashoffset: 360; transition: stroke-dashoffset 1.6s .2s var(--ease-out); }
.hoods__map.is-in .map__route { stroke-dashoffset: 0; }
.map__compass { color: var(--tan); stroke: var(--tan); }
.map__compass polygon { fill: var(--tan); stroke: none; }
.map__compass .minor { opacity: .55; }
.map__compass text { font: 700 13px var(--f-body); fill: var(--tan); stroke: none; text-anchor: middle; }

.hood-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: .15em;
  padding: 0;
  border: 0;
  background: none;
  color: var(--navy);
  font-size: clamp(9px, 2.05cqw, 15px);
  line-height: 1.1;
  text-align: center;
  transform: translate(-50%, -.55em);
}
.hood-pin--side {
  grid-template-columns: auto auto;
  justify-items: start;
  column-gap: .3em;
  text-align: left;
  transform: translate(-.55em, -50%);
}
.hood-pin--side .hood-pin__dot { grid-row: 1 / span 2; align-self: center; }
.hood-pin--side strong { padding-left: .2em; }
.hood-pin__dot {
  position: relative;
  width: 1.1em;
  height: 1.1em;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 .3em rgba(244, 89, 91, .2);
  transition: transform .35s var(--bounce);
}
/* ring pulse uses transform + opacity, not box-shadow */
.hood-pin__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--coral);
  opacity: 0;
}
.hood-pin strong { padding: .2em .45em; border-radius: 6px; font-weight: 800; white-space: nowrap; transition: background-color .25s, color .25s; }
.hood-pin em { font-style: italic; font-weight: 700; color: var(--coral-ink); }
.hood-pin.is-active { z-index: 2; }
.hood-pin.is-active strong { background: var(--navy); color: #fff; }
.hood-pin.is-active .hood-pin__dot { transform: scale(1.3); }
.hood-pin.is-active .hood-pin__dot::after { animation: pingRing 1.8s ease-out infinite; }
.hood-pin--main { transform: translate(-50%, -2.9em); }
.hood-pin--main svg { width: 2.2em; height: auto; filter: drop-shadow(0 6px 6px rgba(14, 45, 92, .25)); transition: transform .35s var(--bounce); }
.hood-pin--main svg path { fill: var(--coral); }
.hood-pin--main svg circle { fill: #fff; }
.hood-pin--main.is-active svg { transform: translateY(-4px) scale(1.08); }
.offmap {
  position: absolute;
  display: grid;
  font: 800 clamp(9px, 1.7cqw, 13px)/1.15 var(--f-body);
  color: var(--navy);
}
.offmap em { font-style: italic; font-weight: 700; color: var(--coral-ink); }
.offmap svg { width: 2em; height: 2em; margin-top: 2px; fill: none; stroke: var(--coral); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.offmap--sw { left: 2%; bottom: 2.5%; padding: 4px 8px 2px; border-radius: 8px; background: rgba(251, 248, 242, .88); }
/* non-clickable landmark on the map (airport), styled like the legend */
.map-poi {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: .15em;
  color: var(--navy);
  font-size: clamp(10px, 2.05cqw, 15px);
  line-height: 1.1;
  text-align: center;
  pointer-events: none;
  transform: translate(-50%, -1em);
}
.map-poi .cat-icon { width: 2em; height: 2em; background: var(--paper); box-shadow: 0 0 0 2px var(--sky); }
.map-poi .cat-icon::before { width: 1.2em; height: 1.2em; }
.map-poi strong { font-weight: 800; white-space: nowrap; }
.map-poi em { font-style: italic; font-weight: 700; color: var(--coral-ink); }
@container (max-width: 560px) {
  .offmap { display: none; }
  .map-poi strong, .map-poi em { display: none; }
  /* small maps: names only; the panel below shows the distance */
  .hood-pin em { display: none; }
  .map__label { display: none; }
  .hood-pin--main svg { width: 1.9em; }
}

.hoods__photo { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; margin-bottom: 26px !important; background: var(--navy-deep); }
.hoods__photo img { width: 100%; height: 100%; object-fit: cover; }
.hoods__kicker { font: 800 1.1rem/1 var(--f-body); color: var(--sky); }
.hoods__title { margin: 8px 0 18px !important; font: 700 clamp(1.8rem, 3vw, 2.7rem)/1 var(--f-title); letter-spacing: -.05em; text-transform: uppercase; }
.hoods__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font: 800 1.35rem/1.2 var(--f-display); color: var(--aqua); letter-spacing: -.01em; }
.hoods__name em { font: italic 700 1rem var(--f-body); color: var(--coral-soft); }
.hoods__text { margin-top: 10px !important; min-height: 5em; color: rgba(255, 255, 255, .82); }
.hoods__photo img, .hoods__name, .hoods__text { transition: opacity .22s ease, transform .35s var(--ease-out); }
.hoods__panel.is-swapping .hoods__photo img { opacity: 0; transform: scale(1.03); }
.hoods__panel.is-swapping .hoods__name,
.hoods__panel.is-swapping .hoods__text { opacity: 0; transform: translateY(6px); }
.hoods__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; margin-top: 26px; }
.hoods__foot .btn { --shadow: var(--paper); --btn-border: var(--paper); }
.pager { display: flex; align-items: center; gap: 14px; font: 700 .9rem/1 var(--f-body); }
.pager span { min-width: 3.4em; text-align: center; }

/* ==========================================================================
   CTA trio
   ========================================================================== */
.cta-trio { display: grid; grid-template-columns: repeat(3, 1fr); }
.cta {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  min-height: 190px;
  padding: 40px 20px;
  text-align: center;
  overflow: hidden;
}
.cta::before,
.cta::after { content: ""; position: absolute; z-index: -1; transition: transform .5s var(--ease-out); }
.cta::before { inset: 22px 10%; background: rgba(255, 255, 255, .45); }
.cta::after { inset: 38px 16%; background: rgba(255, 255, 255, .55); }
.cta--coral { background: var(--coral); }
.cta--sky { background: var(--sky-ring); }
.cta--mint { background: #9FD9B4; }
.cta__small { font: 800 .95rem/1 var(--f-body); }
.cta__big { font: 700 clamp(1.2rem, 2.2vw, 1.9rem)/1 var(--f-title); letter-spacing: -.04em; text-transform: uppercase; }

/* ==========================================================================
   Footer (Lasso shell: logo, links, disclaimer, copyright)
   ========================================================================== */
.site-footer { background: var(--navy-deep); color: #fff; }
.footer__grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 40px; align-items: center; padding: 64px 0 56px; }
.footer__grid > :nth-child(2) { justify-self: center; }
.footer__about { max-width: 34ch; font-size: .95rem; color: rgba(255, 255, 255, .78); }
/* on inner pages widgets/02-fonts-reset.css styles every `.pages p` for article text
   (navy, 17px, margins); footer and menu paragraphs outrank it with two classes */
.site-footer .footer__about p { margin: 0; font-size: inherit; line-height: inherit; color: inherit; }
.site-footer p.footer__coords { margin-top: 14px !important; font: 800 .72rem/1 var(--f-body); letter-spacing: .14em; color: var(--tan); }
.footer-links { display: grid; grid-template-columns: repeat(2, auto); justify-content: end; gap: 12px 28px; font: 700 .88rem/1.2 var(--f-body); }
.footer-links a { transition: color .2s; }
.footer__strips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; height: clamp(120px, 14vw, 190px); }
.strips--footer { position: relative; height: 100%; }
.strips--footer .strip { animation: none; }
.footer__bottom { padding: 26px 0 24px; }
.site-footer .site-disclaimer { max-width: 92ch; margin: 0 auto !important; font-size: .8rem; line-height: 1.6; text-align: center; color: rgba(255, 255, 255, .62); }
.footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .12); font: 600 .82rem/1 var(--f-body); color: rgba(255, 255, 255, .6); }

/* ==========================================================================
   Hover (mouse / trackpad only: taps on touch screens never get stuck)
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--shadow); }
  .btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--shadow); }
  .ctrl:hover, .nav-toggle:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--navy); }
  .ctrl:active, .nav-toggle:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--navy); }
  .round:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--aqua); }
  .round--light:hover { box-shadow: 5px 5px 0 var(--coral); }
  .nav-item > a:hover::after { transform: scaleX(1); }
  .nav-dropdown__cats a:hover { color: var(--aqua); }
  .nav-dropdown__cats a:hover > span:not(.cat-icon) { transform: translateX(6px); }
  .nav-dropdown__cats a:hover .cat-icon { background: var(--aqua); transform: rotate(-8deg); }
  .nav-dropdown__list a:hover { color: var(--aqua); transform: translateX(4px); }
  .nav-dropdown__all:hover svg { transform: translateX(4px); }
  .mobile-sublist a:hover { color: var(--aqua); }
  .tile:hover img { transform: scale(1.07); }
  .tile:hover .tile__label i { transform: translateX(6px); }
  .welcome__copy > p a:hover { background-color: rgba(244, 89, 91, .14); }
  .explore__peek:hover img { opacity: .8; transform: scale(1.04); }
  .trend:hover img { transform: scale(1.06); }
  .trend:hover::after { opacity: 1; }
  .gcard:hover { transform: translateY(-4px); box-shadow: 6px 6px 0 var(--navy); }
  .gcard:hover .gcard__media img { transform: scale(1.06); }
  .gcard__title a:hover { text-decoration-color: var(--coral); }
  .post:hover .post__media img { transform: scale(1.07); }
  .post:hover h3 a { background-size: 100% 6px; }
  .hood-pin:hover .hood-pin__dot { transform: scale(1.3); }
  .cta:hover::before { transform: scale(1.07, 1.16); }
  .cta:hover::after { transform: scale(1.05, 1.1); }
  .footer-links a:hover { color: var(--aqua); }
}

/* ==========================================================================
   Scroll reveals: one-shot keyframes (transform + opacity only).
   `backwards` fill means nothing lingers after they finish.
   ========================================================================== */
.js .reveal:not(.is-in),
.js .reveal-clip:not(.is-in) { opacity: 0; }
.js .reveal.is-in { animation: revealUp .8s var(--ease-out) backwards; animation-delay: var(--d, 0s); }
.js .reveal-clip.is-in { animation: revealUp .9s var(--ease-out) backwards; animation-delay: var(--d, 0s); }
.js .reveal-clip.is-in > img { animation: revealZoom 1.4s var(--ease-out) backwards; animation-delay: var(--d, 0s); }

/* ==========================================================================
   Keyframes
   ========================================================================== */
@keyframes lineUp { from { transform: translateY(105%); } }
@keyframes scriptIn { from { opacity: 0; transform: translateY(14px) rotate(-4deg); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } }
@keyframes revealUp { from { opacity: 0; transform: translateY(36px); } }
@keyframes revealZoom { from { transform: scale(1.16); } }
@keyframes imgIn { from { opacity: 0; } }
@keyframes bar { to { transform: scaleX(1); } }
@keyframes stripUp { from { transform: translateY(101%); } }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes menuDrop { from { opacity: 0; transform: translateY(-16px); } }
@keyframes menuLift { to { opacity: 0; transform: translateY(-12px); } }
@keyframes pingRing {
  0% { opacity: .55; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.6); }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1199.98px) {
  .site-header nav { display: none; }
  .nav-toggle.d-md-none { display: grid !important; }
  .nav-scrim { display: none; }
}

@media (min-width: 1200px) {
  #mobile-menu { display: none !important; }
}

@media (max-width: 1100px) {
  .welcome__grid, .blog__grid, .hoods__grid { grid-template-columns: 1fr; }
  .blog__visual { max-width: 520px; aspect-ratio: 16 / 11; margin-left: 24px; }
  .cats__grid { grid-template-columns: 1fr; }
  .cats__preview { display: none; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__grid > :nth-child(2) { grid-column: 1 / -1; grid-row: 1; margin-bottom: 12px; }
}

@media (max-width: 800px) {
  :root { --header-h: 74px; }
  [id] { scroll-margin-top: 84px; }
  .hero__content { flex-direction: column; align-items: flex-start; }
  .hero__side { justify-items: start; }
  .collage { height: 420px; }
  .explore__stage { grid-template-columns: minmax(0, 1fr); height: 300px; margin-inline: var(--gutter); }
  .explore__peek { display: none; }
  .explore__stage .ctrl { top: auto; bottom: -58px; }
  .ctrl--prev { left: 0; }
  .ctrl--next { right: 0; }
  .explore__info { margin-top: 30px; padding-inline: 56px; }
  .explore__text { min-height: 8em; }
  .cats__list { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .trending__grid { grid-template-columns: 1fr; }
  .parks__cols { display: grid; grid-template-columns: 1fr 1fr; height: auto; }
  .pcol, .pcol--hero { height: 220px; }
  .pcol--hero { grid-column: 1 / -1; height: 280px; }
  .pcol img { left: 0; width: 100%; height: 100%; margin-left: 0; }
  .latest__grid { grid-template-columns: 1fr; padding-left: var(--gutter); }
  .latest__track { grid-auto-columns: 78%; }
  .post { grid-template-columns: 110px 1fr; }
  .post__excerpt { display: none; }
  .hoods__title { font-size: 7.4vw; }
  .hoods__text { min-height: 6.6em; }
  .cta-trio { grid-template-columns: 1fr; }
  .cta { min-height: 150px; }
  .footer__grid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .footer-links { justify-content: center; }
  .footer__strips { grid-template-columns: 1fr; height: 110px; }
  .footer__strips .strips:not(:first-child) { display: none; }
}

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

/* category icons (generated) */
.cat-icon--wheel { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2210%22 r=%227%22/%3E%3Ccircle cx=%2212%22 cy=%2210%22 r=%221.4%22/%3E%3Cpath d=%22M12 3v5.6M12 11.4V17M5 10h5.6M13.4 10H19M9.4 21 12 11.4 14.6 21M7 21h10%22/%3E%3C/svg%3E"); }
.cat-icon--bed { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 6v13M3 15h18v4M11 15v-4h7a3 3 0 0 1 3 3v1%22/%3E%3Ccircle cx=%227%22 cy=%2212%22 r=%221.8%22/%3E%3C/svg%3E"); }
.cat-icon--dining { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6.5 3v5a2.5 2.5 0 0 0 5 0V3M9 3v5M9 10.5V21M17.5 21V3c-2 1.1-3.3 3.9-3.3 8h3.3%22/%3E%3C/svg%3E"); }
.cat-icon--map { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 6.5 9 4l6 2.5L21 4v13.5L15 20l-6-2.5L3 20z%22/%3E%3Cpath d=%22M9 4v13.5M15 6.5V20%22/%3E%3C/svg%3E"); }
.cat-icon--ticket { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 7h16v3a2 2 0 0 0 0 4v3H4v-3a2 2 0 0 0 0-4z%22/%3E%3Cpath d=%22M14 7.5v1.5M14 11.2v1.6M14 15v1.5%22/%3E%3C/svg%3E"); }
.cat-icon--plane { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z%22/%3E%3C/svg%3E"); }
.cat-icon--compass { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22m15.6 8.4-2.1 5.1-5.1 2.1 2.1-5.1z%22/%3E%3C/svg%3E"); }
.cat-icon--car { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 17H3.5v-4l2.1-5a2 2 0 0 1 1.9-1.3h9a2 2 0 0 1 1.9 1.3l2.1 5v4H19M9 17h6M3.5 13h17%22/%3E%3Ccircle cx=%227%22 cy=%2217%22 r=%222%22/%3E%3Ccircle cx=%2217%22 cy=%2217%22 r=%222%22/%3E%3C/svg%3E"); }
.cat-icon--house { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 11.5 12 4l9 7.5M5.5 9.5V20h13V9.5M10 20v-5.5h4V20%22/%3E%3C/svg%3E"); }
.cat-icon--palm { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 21c.3-3.7.2-7.3-.5-10.5M11.5 10.5C10 7.5 7 6.5 3.5 7.5M11.5 10.5c1.2-3 4.3-4.3 8-3.3M11.5 10.5C11 7 12.5 4.5 15 3M11.5 10.5c-2.6.2-4.8 1.8-6 4.2M11.5 10.5c2.8.1 5 1.7 6.2 4M7 21h10%22/%3E%3C/svg%3E"); }
.cat-icon--bag { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 8h14l-1.2 12.5a1.5 1.5 0 0 1-1.5 1.5H7.7a1.5 1.5 0 0 1-1.5-1.5z%22/%3E%3Cpath d=%22M9 10V6.5a3 3 0 0 1 6 0V10%22/%3E%3C/svg%3E"); }
.cat-icon--ball { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M3 12h18M12 3v18M5.6 5.6C8 7.6 9.4 9.7 9.4 12s-1.4 4.4-3.8 6.4M18.4 5.6C16 7.6 14.6 9.7 14.6 12s1.4 4.4 3.8 6.4%22/%3E%3C/svg%3E"); }
.cat-icon--sun { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%224%22/%3E%3Cpath d=%22M12 2.5v2M12 19.5v2M4.6 4.6 6 6M18 18l1.4 1.4M2.5 12h2M19.5 12h2M4.6 19.4 6 18M18 6l1.4-1.4%22/%3E%3C/svg%3E"); }
.cat-icon--cocktail { --icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 4h16l-8 9.5zM12 13.5V20M8 20h8M7.4 8h9.2M17 4l2.5-2%22/%3E%3C/svg%3E"); }

/* ==========================================================================
   Lasso widgets dressed for VisitOrlando: sublist + siblings
   The widget files (widgets/*.css) ship verbatim; this block only sits on top
   of them, so every selector starts with .item.item-* to outrank them.
   Motion: transform/opacity only; hover lives inside (hover:hover).
   ========================================================================== */
:root {
  --w-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 12'%3E%3Cpath d='M8.9 7H1a1 1 0 0 1 0-2h7.9L5.7 1.8A1 1 0 0 1 7.1.3l5 5a1 1 0 0 1 0 1.4l-5 5a1 1 0 0 1-1.4-1.4L8.9 7z' fill='%230E2D5C'/%3E%3C/svg%3E");
  --w-route: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 24'%3E%3Cpath d='M4 12 C 50 2, 90 22, 140 12 S 190 4, 200 12' fill='none' stroke='%235EE0CC' stroke-width='6' stroke-linecap='round'/%3E%3Ccircle cx='208' cy='12' r='7' fill='%23F4595B'/%3E%3C/svg%3E");
}

/* ---------- SUBLIST: numbered guide cards (category pages) ---------- */
.item.item-sublist .row { counter-reset: guide; }
.item.item-sublist .bubbles-outer {
  position: relative;
  padding: 6px 11px 13px 6px;              /* room for the hard shadow */
}
.item.item-sublist .bubbles-outer::before {  /* the shadow is its own layer, so hover only moves the card */
  content: "";
  position: absolute;
  inset: 11px 6px 8px 11px;
  border-radius: 16px;
  background: var(--navy);
}
.item.item-sublist .bubbles-chip {
  counter-increment: guide;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 86px;
  padding: 14px 14px 14px 14px;
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: 16px;
  color: var(--navy);
  font: 700 .98rem/1.3 var(--f-body);
  transition: transform .25s var(--ease-out), background-color .2s ease;
}
.item.item-sublist .bubbles-chip::before {
  content: counter(guide, decimal-leading-zero);
  content: counter(guide, decimal-leading-zero) / "";
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sky);
  color: var(--navy);
  font: 700 .82rem/1 var(--f-title);
  letter-spacing: -.03em;
}
.item.item-sublist .bubbles-chip::after {
  content: "";
  position: static;
  right: auto;
  top: auto;
  transform: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--aqua) var(--w-arrow) center / 13px 12px no-repeat;
  transition: transform .3s var(--ease-out), background-color .2s ease;
}
.item.item-sublist .bubbles-chip:hover,
.item.item-sublist .bubbles-chip:active,
.item.item-sublist .bubbles-chip:focus {
  padding-left: 14px;
  color: var(--navy);
  background: var(--white);
  border-color: var(--navy);
}
.item.item-sublist .bubbles-link:active .bubbles-chip { transform: translate(4px, 4px); transition-duration: .06s; }
.item.item-sublist .bubbles-link:focus-visible { outline: none; }
.item.item-sublist .bubbles-link:focus-visible .bubbles-chip { outline: 3px solid var(--coral); outline-offset: 3px; }

/* ---------- SIBLINGS: "Discover More" postcard (article sidebar) ---------- */
.item.item-siblings .sibling.link-button {
  padding: 24px 22px 12px;
  background: var(--sand);
  border: 2px solid var(--navy);
  border-radius: 22px;
  box-shadow: 8px 8px 0 var(--aqua);
}
.item.item-siblings .sibling.link-button h3 {
  margin: 0 0 6px;
  padding-bottom: 22px;
  background: var(--w-route) left bottom / 132px 15px no-repeat;
  font: 700 1.3rem/1 var(--f-title);
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: var(--navy);
}
.item.item-siblings .sibling .bubbles-link + .bubbles-link { border-top: 2px dashed var(--line); }
.item.item-siblings .sibling .bubbles-outer { padding: 0; }
.item.item-siblings .sibling .bubbles-chip {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) 13px;
  align-items: start;
  gap: 12px;
  position: relative;
  padding: 14px 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--navy-70);
  font: 700 .95rem/1.35 var(--f-body);
  transition: color .2s ease;
}
.item.item-siblings .sibling .bubbles-chip::before {
  content: "";
  width: 10px;
  height: 10px;
  margin-top: .38em;
  border-radius: 50%;
  background: var(--coral);
  transition: transform .3s var(--bounce);
}
.item.item-siblings .sibling .bubbles-chip::after {
  content: "";
  position: static;
  right: auto;
  top: auto;
  width: 13px;
  height: 12px;
  margin-top: .3em;
  background: var(--w-arrow) center / contain no-repeat;
  opacity: .35;
  transform: none;
  transition: transform .3s var(--ease-out), opacity .2s ease;
}
.item.item-siblings .sibling .bubbles-chip-text { transition: transform .35s var(--ease-out); }
.item.item-siblings .sibling .bubbles-chip:hover,
.item.item-siblings .sibling .bubbles-chip:active,
.item.item-siblings .sibling .bubbles-chip:focus {
  padding-left: 0;
  color: var(--navy-70);
  background: transparent;
}
.item.item-siblings .sibling .bubbles-link:focus-visible .bubbles-chip { color: var(--navy); }
.item.item-siblings .sibling .bubbles-link:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; border-radius: 6px; }

@media (hover: hover) and (pointer: fine) {
  .item.item-sublist .bubbles-link:hover .bubbles-chip { transform: translate(-3px, -3px); background: var(--paper); }
  .item.item-sublist .bubbles-link:hover .bubbles-chip::after { transform: translateX(3px); background-color: var(--coral-btn); }
  .item.item-siblings .sibling .bubbles-link:hover .bubbles-chip { color: var(--navy); }
  .item.item-siblings .sibling .bubbles-link:hover .bubbles-chip::before { transform: scale(1.4); }
  .item.item-siblings .sibling .bubbles-link:hover .bubbles-chip-text { transform: translateX(4px); }
  .item.item-siblings .sibling .bubbles-link:hover .bubbles-chip::after { opacity: 1; transform: translateX(3px); }
}

@media (max-width: 767.98px) {
  .item.item-sublist .bubbles-chip { min-height: 0; gap: 12px; font-size: .95rem; }
  .item.item-sublist .bubbles-chip::before { width: 38px; height: 38px; font-size: .78rem; }
  .item.item-sublist .bubbles-chip::after { width: 30px; height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .item.item-sublist .bubbles-chip,
  .item.item-sublist .bubbles-chip::after,
  .item.item-siblings .sibling .bubbles-chip::before,
  .item.item-siblings .sibling .bubbles-chip-text,
  .item.item-siblings .sibling .bubbles-chip::after { transition: none; }
}

/* ==========================================================================
   Article bodies: tables and lists dressed for VisitOrlando
   widgets/03-table-reset.css marks nearly everything !important, so the table
   rules here repeat !important with more specific selectors.
   Lasso's tables have no <thead>: the header is the first row, either <th>
   cells or <td><strong>…</strong></td>. main.js labels the cells so phones can
   stack each row as a card (table.has-head); without it they keep scrolling.
   ========================================================================== */

/* ---------- tables ---------- */
.pages .item-paragraph table,
.pages .item-html table {
  width: 100%;
  margin: 32px 0 !important;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: 16px;
  box-shadow: 6px 6px 0 var(--aqua);
  overflow: hidden;
  font-size: 15px;
  line-height: 1.5;
}
.pages .item-paragraph table th,
.pages .item-paragraph table td,
.pages .item-html table th,
.pages .item-html table td {
  padding: 14px 16px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  vertical-align: top;
  text-align: left;
}
.pages .item-paragraph table tr:last-child > td,
.pages .item-html table tr:last-child > td { border-bottom: 0 !important; }

/* header row: <th> cells, or a first row of bold-only cells */
.pages .item-paragraph table tr:first-child > th,
.pages .item-paragraph table tr:first-child > td:has(> strong:only-child),
.pages .item-html table tr:first-child > th,
.pages .item-html table tr:first-child > td:has(> strong:only-child) {
  background: var(--navy) !important;
  color: var(--white) !important;
  font: 700 12px/1.3 var(--f-title) !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 0 !important;
}
.pages .item-paragraph table tr:first-child > td > strong,
.pages .item-html table tr:first-child > td > strong { color: inherit; font-weight: inherit; }

/* body rows: first column names the row, the rest stay a step softer */
.pages .item-paragraph table tbody tr:nth-child(even) td,
.pages .item-html table tbody tr:nth-child(even) td { background: var(--white) !important; }
.pages .item-paragraph table tbody tr:nth-child(odd):not(:first-child) td,
.pages .item-html table tbody tr:nth-child(odd):not(:first-child) td { background: var(--sand) !important; }
.pages .item-paragraph table td,
.pages .item-html table td { color: var(--navy-70) !important; transition: background-color .15s ease; }
.pages .item-paragraph table tr:not(:first-child) > td:first-child,
.pages .item-html table tr:not(:first-child) > td:first-child { color: var(--navy) !important; font-weight: 700; }
.pages .item-paragraph table td strong,
.pages .item-html table td strong { color: var(--navy); }

@media (hover: hover) and (pointer: fine) {
  .pages .item-paragraph table tbody tr:not(:first-child):hover td,
  .pages .item-html table tbody tr:not(:first-child):hover td { background: var(--sky-soft) !important; }
}

/* tablets: the widget turns tables into a sideways scroller; keep the frame on it */
@media (max-width: 991.98px) {
  .pages .item-paragraph table,
  .pages .item-html table { border: 2px solid var(--navy) !important; }
  .pages .item-paragraph table td,
  .pages .item-html table td { min-width: 150px; }
}

/* phones: each row becomes a card, labelled from the header row */
@media (max-width: 767.98px) {
  .pages .item-paragraph table.has-head,
  .pages .item-html table.has-head {
    display: block !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .pages .item-paragraph table.has-head tbody,
  .pages .item-html table.has-head tbody { display: grid; gap: 18px; }
  .pages .item-paragraph table.has-head tr.is-head,
  .pages .item-html table.has-head tr.is-head { display: none; }
  .pages .item-paragraph table.has-head tr,
  .pages .item-html table.has-head tr {
    display: block;
    overflow: hidden;
    background: var(--white);
    border: 2px solid var(--navy);
    border-radius: 16px;
    box-shadow: 5px 5px 0 var(--aqua);
  }
  .pages .item-paragraph table.has-head tbody tr:not(:first-child) > td,
  .pages .item-html table.has-head tbody tr:not(:first-child) > td {   /* ties the zebra rule, wins on order */
    display: block;
    min-width: 0;
    padding: 10px 16px !important;
    background: transparent !important;
    border-bottom: 1px dashed var(--line) !important;
  }
  .pages .item-paragraph table.has-head tbody tr:not(:first-child) > td:first-child,
  .pages .item-html table.has-head tbody tr:not(:first-child) > td:first-child {
    padding: 13px 16px !important;
    background: var(--navy) !important;
    color: var(--white) !important;
    font: 700 16px/1.3 var(--f-title);
    letter-spacing: -.01em;
    border-bottom: 0 !important;
  }
  .pages .item-paragraph table.has-head tbody tr:not(:first-child) > td:last-child,
  .pages .item-html table.has-head tbody tr:not(:first-child) > td:last-child { border-bottom: 0 !important; }
  .pages .item-paragraph table.has-head td[data-label]:not(:first-child)::before,
  .pages .item-html table.has-head td[data-label]:not(:first-child)::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    font: 800 11px/1.2 var(--f-body);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tan-ink);
  }
}

/* ---------- lists ---------- */
.pages .item-paragraph ul,
.pages .item-html ul {
  display: grid;
  gap: 12px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}
.pages .item-paragraph ul > li,
.pages .item-html ul > li {
  position: relative;
  padding-left: 30px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--navy);
}
.pages .item-paragraph ul > li::before,
.pages .item-html ul > li::before {   /* a coral map dot with a soft ring */
  content: "";
  position: absolute;
  left: 4px;
  top: .6em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 4px var(--blush);
}
.pages .item-paragraph ul ul,
.pages .item-html ul ul { margin: 10px 0 0; gap: 8px; }
.pages .item-paragraph ul ul > li::before,
.pages .item-html ul ul > li::before { background: var(--white); box-shadow: inset 0 0 0 2px var(--aqua); }

.pages .item-paragraph ol,
.pages .item-html ol {
  display: grid;
  gap: 12px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.pages .item-paragraph ol > li,
.pages .item-html ol > li {
  position: relative;
  padding-left: 42px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--navy);
  counter-increment: step;
}
.pages .item-paragraph ol > li::before,
.pages .item-html ol > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: .12em;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--sky);
  color: var(--navy);
  font: 700 12px/1 var(--f-title);
}

@media (max-width: 768px) {
  .pages .item-paragraph ul > li,
  .pages .item-html ul > li,
  .pages .item-paragraph ol > li,
  .pages .item-html ol > li { font-size: 16px; }
}

/* ═════ widgets/00-token-map.css ═════ */
/* WIDGET TOKEN MAP
   THE ONLY FILE IN widgets/ THAT CHANGES PER SITE.

   Every other file in this folder is identical across all domains and must
   never be edited for a single site. They reference --w-* tokens only.
   This block wires those tokens to whatever the site's own palette calls
   things, so the designer keeps their own variable names.

   Right-hand side = this site's variables, taken from its :root.
   Left-hand side  = fixed. Do not rename.

   Mapping below is the visitorlando.ai palette.
*/

:root {
  --w-white:         var(--white);
  --w-bg-alt:        var(--sand);       /* page/zebra background */
  --w-bg-tint:       var(--sky-soft);   /* hover tint            */
  --w-brand:         var(--coral-ink);  /* links, accents, focus */
  --w-brand-dark:    var(--navy);       /* headings, table head  */
  --w-brand-dark-2:  var(--navy-deep);  /* active/pressed        */
  --w-highlight:     var(--aqua);
  --w-text-muted:    var(--navy-70);
  --w-border:        var(--line);
  --w-radius:        var(--r);
  --w-shadow:        var(--shadow);
  --w-shadow-md:     var(--shadow-md);
  --w-shadow-2:      var(--box-shadow-2);
  --w-shadow-3:      var(--box-shadow-3);
}

/* ═════ widgets/01-layout-reset.css ═════ */
/* LAYOUT RESET
   Shell/container resets required by the Lasso wrapper. Not a widget, but must ship with them.

   Lasso emits this markup; we only dress it. Uses --w-* tokens only —
   see 00-token-map.css. Never hardcode a hex here.

   CHANGELOG
   2026-08-16  Extracted verbatim from the atlanta.com production build.
*/

.home .container.main {
  width: 100%;
  max-width: 100%;
  padding: 0;
}

.container.layout {
  max-width: 100%;
  padding: 0;
}

.container.layout .row.layout {
  margin: 0;
}

.home .container.layout .row.layout > .cols {
  padding: 0;
}

.pages .main-wrapper .container.main {
  padding: 24px 16px;
}

/* ═════ widgets/02-fonts-reset.css ═════ */
/* FONTS RESET
   Typography inside .pages article bodies.

   Lasso emits this markup; we only dress it. Uses --w-* tokens only —
   see 00-token-map.css. Never hardcode a hex here.

   CHANGELOG
   2026-08-16  Extracted verbatim from the atlanta.com production build.
*/

.pages h1,
.pages h2 {
  font-weight: 700;
  color: var(--w-brand-dark);
}

.pages h1,
.pages h2,
.pages h3,
.pages p,
.pages strong {
  color: var(--w-brand-dark);
}

.pages h1 {
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}

.pages h2 {
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 40px 0 18px;
}

.pages h3 {
  font-size: 22px;
  line-height: 1.3;
  font-weight: 600;
  margin: 24px 0 10px;
}

.pages p {
  font-size: 17px;
  line-height: 1.7;
  margin: 0 0 16px;
}

.pages strong {
  font-weight: 700;
}

@media (max-width: 768px) {
  .pages h1 {
    font-size: 30px;
    margin-bottom: 16px;
  }

  .pages h2 {
    font-size: 25px;
    margin: 32px 0 16px;
  }

  .pages h3 {
    font-size: 20px;
    margin: 22px 0 8px;
  }

  .pages p {
    font-size: 16px;
    line-height: 1.65;
    margin-bottom: 14px;
  }
}

/* ═════ widgets/03-table-reset.css ═════ */
/* TABLE RESET
   Tables rendered inside article bodies.

   Lasso emits this markup; we only dress it. Uses --w-* tokens only —
   see 00-token-map.css. Never hardcode a hex here.

   CHANGELOG
   2026-08-16  Extracted verbatim from the atlanta.com production build.
*/

table { margin: 32px 0; }

table th, table td {
  border-color: var(--w-border) !important;
  padding: 8px 16px !important;
}

table td {
  color: var(--w-text-muted) !important;
}

table th {
  background: var(--w-brand-dark) !important;
  color: var(--w-white) !important;
  font-size: 13px !important;
  font-weight: bold !important;
}

table tbody tr:nth-child(even) td {
  background: var(--w-bg-alt) !important;
}

@media (max-width: 992px) {
  table {
    display: block !important;
    overflow-x: auto !important;
    border: 0 !important;
  }
}

@media (max-width: 768px) {
  .pages h1 {
    font-size: 30px;
    margin-bottom: 16px;
  }

  .pages h2 {
    font-size: 25px;
    margin: 32px 0 16px 0;
  }

  .pages h3 {
    font-size: 20px;
    margin: 22px 0 8px 0;
  }

  .pages p {
    font-size: 16px;
    line-height: 1.65;
    margin-bottom: 14px;
  }
}

/* ═════ widgets/04-dropdown-sublist.css ═════ */
/* DROPDOWN SUBLIST WIDGET
   Collapsible sublist panel. Pairs with the scroll-lock logic in main.js.

   Lasso emits this markup; we only dress it. Uses --w-* tokens only —
   see 00-token-map.css. Never hardcode a hex here.

   CHANGELOG
   2026-08-16  Extracted verbatim from the atlanta.com production build.
*/

/* Anchor for overlay so the panel doesn't push content down */
.col-gap:has(.dropdown-sublist):has(.bubbles-link),
.cols:has(.dropdown-sublist):has(.bubbles-link) {
  position: relative;
  margin-bottom: 32px;
}

/* Trigger button/bar */
.item-sublist:has(.bubbles-link) .dropdown-sublist {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--w-brand-dark);
  color: var(--w-white);
  border-radius: var(--w-radius);
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  transition: background 0.2s, box-shadow 0.2s;
  box-shadow: var(--w-shadow);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.item-sublist:has(.bubbles-link) .dropdown-sublist :hover {
  background: var(--w-brand-dark-2);
  box-shadow: var(--w-shadow-md);
}

/* Circular icon button with chevron */
.item-sublist:has(.bubbles-link) .dropdown-sublist::after {
  content: '';
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: var(--w-highlight);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%231A2E4A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 60%;
  background-position: center;
  transition: transform 0.25s ease, background-color 0.2s;
}

/* Open state — stays in place; JS locks page scroll */
.item-sublist:has(.bubbles-link) .dropdown-sublist.open {
  background: var(--w-brand-dark-2);
  border-radius: var(--w-radius) var(--w-radius) 0 0;
  z-index: 160;
}

.item-sublist:has(.bubbles-link) .dropdown-sublist.open::after {
  transform: rotate(180deg);
  background-color: var(--w-highlight);
}

/* Panel: scrollable within itself, max-height so trigger is always visible */
.item-sublist:has(.bubbles-link) .dropdown-sublist + * {
  position: absolute;
  left: max(0px, calc(50% - 400px));
  right: max(0px, calc(50% - 400px));
  z-index: 150;
  background: var(--w-white);
  border: 1px solid var(--w-border);
  border-top: 1px solid var(--w-bg-alt);
  border-radius: 0 0 var(--w-radius) var(--w-radius);
  box-shadow: var(--w-shadow-md);
  padding: 4px 12px 8px;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 65vh;
}

/* ═════ widgets/05-contact-form.css ═════ */
/* CONTACT US FORM
   #contact-form on the contact page.

   Lasso emits this markup; we only dress it. Uses --w-* tokens only —
   see 00-token-map.css. Never hardcode a hex here.

   CHANGELOG
   2026-08-16  Extracted verbatim from the atlanta.com production build.
*/

#contact-form {
  margin: 45px auto 0;
  max-width: 500px;
}

#contact-form input,
#contact-form textarea {
  flex: 1;
  border: 2px solid var(--bs-gray-300);
  border-radius: 6px;
  outline: 0;
  padding: 14px 18px;
  font-size: 14px;
  color: var(--w-brand-dark);
  min-width: 100%;
}

#contact-form input:active,
#contact-form input:focus,
#contact-form textarea:active,
#contact-form textarea:focus {
  border: 2px solid var(--w-brand);
}

#contact-form input::placeholder,
#contact-form textarea::placeholder {
  color: var(--bs-gray-600);
}

#contact-form button {
  background: var(--w-brand);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  padding: 16px;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 0.2s;
  white-space: nowrap;
  width: 100%;
}

#contact-form button:hover {
  background: var(--w-brand-dark);
}

/* ═════ widgets/06-widgets.css ═════ */
/* CORE WIDGETS
   item-current-image, item-sublist, item-bubbles, sublist.card.

   Lasso emits this markup; we only dress it. Uses --w-* tokens only —
   see 00-token-map.css. Never hardcode a hex here.

   CHANGELOG
   2026-08-16  Extracted verbatim from the atlanta.com production build.
*/

/* IMAGE STYLE RESET */
.item-current-image img {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
  object-fit: cover;
  box-shadow: none !important;
  border-radius: 4px !important;
  border-color: var(--bs-gray-300) !important;
  max-width: 600px;
  margin: 0 auto;
  display: block;
}

.item-html,
.item-paragraph {
  max-width: 800px;
  margin: 0 auto;
}

/* SUBLIST */
.item-sublist a {
  width: 100%;
  height: 100%;
}

.item.item-bubbles {
  margin-bottom: 32px;
}

.item-bubbles .row {
  margin: 0;
}

.bubbles-chip {
  align-items: center;
  background: var(--w-white);
  border: 1px solid var(--w-border);
  border-radius: 12px;
  color: var(--w-brand-dark);
  display: flex;
  font-weight: 500;
  height: 100%;
  padding: 16px 48px 16px 24px;
  position: relative;
  transition: padding 0.2s ease-in-out;
}

.bubbles-chip:hover {
  color: var(--w-brand-dark);
  background: var(--w-bg-tint);
  border-color: var(--w-brand);
  padding-left: 20px;
}

.bubbles-chip:active,
.bubbles-chip:focus {
  background: var(--w-brand-dark-2);
  color: var(--w-white);
}

.bubbles-link {
  display: block;
  width: 100%;
  max-width: 100%;
  text-decoration: none;
}

.bubbles-link .bubbles-outer {
  height: 100%;
  padding: 5px;
  max-width: 100%;
}


.sibling.link-button .bubbles-link .bubbles-outer,
.sibling.link-button .bubbles-chip {
  height: auto;
}

.col-gap:has(> .item-bubbles)::before {
  display: none !important;
}

.bubbles-chip::after {
  content: url("data:image/svg+xml,%3Csvg width='13' height='12' viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.87771 7.01782H1.02042C0.737361 7.01782 0.496528 6.91886 0.297917 6.72094C0.0993056 6.52317 0 6.2833 0 6.00136C0 5.71942 0.0993056 5.4781 0.297917 5.2774C0.496528 5.07657 0.737361 4.97615 1.02042 4.97615H8.87771L5.66583 1.76428C5.46111 1.55955 5.35681 1.31719 5.35292 1.03719C5.34889 0.757332 5.45076 0.510249 5.65854 0.295943C5.86632 0.0948319 6.11014 -0.00377823 6.39 0.000110661C6.66986 0.00399955 6.91236 0.108583 7.1175 0.313861L12.0713 5.27407C12.1699 5.37282 12.2464 5.4856 12.3008 5.6124C12.3551 5.73935 12.3823 5.86865 12.3823 6.00032C12.3823 6.13199 12.3551 6.26122 12.3008 6.38803C12.2464 6.51497 12.1727 6.62497 12.0798 6.71803L7.10958 11.688C6.89403 11.9037 6.65368 12.0081 6.38854 12.0012C6.12354 11.9942 5.88715 11.8862 5.67938 11.6772C5.4716 11.4629 5.36771 11.2166 5.36771 10.9382C5.36771 10.6599 5.4716 10.4192 5.67938 10.2162L8.87771 7.01782Z' fill='%231570B5'/%3E%3C/svg%3E%0A");
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  transition: 0.2s ease-in-out;
}

.bubbles-chip:hover::after {
  right: 10px;
}

/* SUBLIST CARDS */
.item-sublist:has(.sublist.card) .row > div {
  padding: 5px !important;
}

.sublist.card {
  border: none;
  border-radius: 6px;
  box-shadow: var(--w-shadow-2);
  transition: 0.2s ease-in;
}

.sublist.card:hover {
  box-shadow: var(--w-shadow-3);
  color: var(--w-brand);
  transform: translateY(-4px);
}

.sublist.card h5 {
  margin-bottom: 0;
  font-weight: 500;
}

.sublist.card .card-body {
  padding: 16px;
}

@media (max-width: 767.98px) {
  .row div:has(> .sublist.card) {
    padding: 0 !important;
  }

  .row:has(> div .sublist.card) {
    margin: 0;
    gap: 10px;
  }

  .sublist.card {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .sublist.card .card-img-top {
    border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));
    width: 120px;
    height: 90px;
    object-fit: cover;
    flex-shrink: 0;
  }

  .sublist.card .card-body {
    flex: 1;
    padding: 1rem;
  }

  .sublist.card .card-body * {
    line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .sublist.card .card-body h5 {
    font-size: 16px;
  }
}

/* ═════ widgets/07-widget-behaviors.css ═════ */
/* WIDGET & SECTION BEHAVIORS
   Cross-widget responsive behaviour.

   Lasso emits this markup; we only dress it. Uses --w-* tokens only —
   see 00-token-map.css. Never hardcode a hex here.

   CHANGELOG
   2026-08-16  Extracted verbatim from the atlanta.com production build.
*/

@media (max-width: 991px) {
  .cols:has(.sidebar-desktop){
    display:none;
  }
}

/* ═════ widgets/08-widget-min-heights.css ═════ */
/* WIDGET MIN-HEIGHTS
   CLS guards. Values are measured, not designed — do not round them.

   Lasso emits this markup; we only dress it. Uses --w-* tokens only —
   see 00-token-map.css. Never hardcode a hex here.

   CHANGELOG
   2026-08-16  Extracted verbatim from the atlanta.com production build.
*/

.loco-widget {
  min-height: 672.547px;
}

.item-external-scripts {
  min-height: 566px;
}

@media (max-width: 767.98px) {
  .loco-widget {
    min-height: 1568px;
  }

  .item-external-scripts {
    min-height: 716px;
  }
}