/* =====================================================================
   Utilities
   File: css/child/tools/_utilities.css
   ===================================================================== */

/* ---------------------------------------------------------------------
   Host / State
   --------------------------------------------------------------------- */
html:not(.hs-inline-edit) [data-mode="editor"],
html:is(.hs-inline-edit) [data-mode="live"] {
  display: none!important;
}

/* ---------------------------------------------------------------------
   Display / Position
   --------------------------------------------------------------------- */
.block { display: block; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; top: 0; }



/* ---------------------------------------------------------------------
   Flexbox
   --------------------------------------------------------------------- */
.flex { display: flex; }
.inline-flex { display: inline-flex; }

.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }

.flex-wrap { flex-wrap: wrap; }

.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-stretch { align-items: stretch; }

.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

.flex-1 { flex: 1 1 auto; }
.grow { flex-grow: 1; }

/* Quick flex combos */
.u-flexgap { display: flex; gap: 1em; }
.u-flexgap-0-5em { display: flex; gap: .5em; }
.u-flexgap-2em { display: flex; gap: 2em; }

/* ---------------------------------------------------------------------
   Grid
   --------------------------------------------------------------------- */
.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

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

/* ---------------------------------------------------------------------
   Gap
   --------------------------------------------------------------------- */
.gap-025 { gap: 0.25rem; }
.gap-05 { gap: 0.5rem; }
.gap-1 { gap: 1rem; }
.gap-2 { gap: 2rem; }
.gap-3 { gap: 3rem; }

/* ---------------------------------------------------------------------
   Spacing: Padding
   --------------------------------------------------------------------- */
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.pt-5 { padding-top: 1.25rem; }
.pb-3 { padding-bottom: 0.75rem; }

/* ---------------------------------------------------------------------
   Spacing: Margin
   --------------------------------------------------------------------- */
.mt-5 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.5rem; }
.mb-6 { margin-bottom: 2rem; }

/* ---------------------------------------------------------------------
   Sizing / Overflow
   --------------------------------------------------------------------- */
.w-full { width: 100%; }
.h-full { height: 100%; }

/* ---------------------------------------------------------------------
   Typography
   --------------------------------------------------------------------- */
.font-xs { font-size: .8em; text-transform: uppercase; font-weight: 600; }
.font-sm { font-size: .88em; }
.font-md { font-size: 1em; }
.font-lg { font-size: 1.08em; }
.font-xl { font-size: 1.20em; }

.uppercase { text-transform: uppercase; }
.text-center { text-align: center; }

.lh-sm { line-height: var(--lh-sm); }
.lh-lg { line-height: var(--lh-lg); }
.lh-xxl { line-height: var(--lh-xxl); }


.stack-gap > * { margin: 0; padding: 0; }
.u-no-space { margin: 0; padding: 0; }

:focus { outline: auto; outline-color: var(--green-700); }

/* ---------------------------------------------------------------------
   Radius / Aspect
   --------------------------------------------------------------------- */
.u-radius-img { border-radius: 1em; }

[data-radius="none"]  { border-radius: var(--radius-none); }
[data-radius="xs"]    { border-radius: var(--radius-xs); }
[data-radius="sm"]    { border-radius: var(--radius-sm); }
[data-radius="md"]    { border-radius: var(--radius-md); }
[data-radius="lg"]    { border-radius: var(--radius-lg); }
[data-radius="xl"]    { border-radius: var(--radius-xl); }
[data-radius="full"]  { border-radius: var(--radius-full); }

.img-circle {
  aspect-ratio: 1 / 1; height: auto; border-radius: var(--radius-full); object-fit: cover;
}

[data-aspect-ratio="portrait"] { aspect-ratio: 4 / 5; object-fit: cover; }
[data-aspect-ratio="landscape"] { aspect-ratio: 3 / 2; object-fit: cover; }
[data-aspect-ratio="square"] { aspect-ratio: 1 / 1; object-fit: cover; }

/* ---------------------------------------------------------------------
   Shadows
   --------------------------------------------------------------------- */
.shadow-card {
  box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 4px 10px rgba(0,0,0,.06);
}

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body);
  font-size: var(--fs-xl); line-height: 1.24;
  padding: var(--btn-padding-vertical) var(--btn-padding-horizontal);
  border: 1px solid transparent; border-radius: var(--btn-radius);
  font-weight: 600; text-align: center; cursor: pointer; text-decoration: none;
  transition: all .2s ease-in-out;
}

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

.btn--ghost { background-color: transparent; border-color: var(--neutral-300); color: var(--neutral-800); }
.btn--ghost:hover { background-color: var(--neutral-100); color: var(--neutral-900); }

.btn--primary { background-color: var(--btn-bg); color: var(--btn-fg); border-color: transparent; }
.btn--primary:hover { background-color: var(--btn-hover-bg); color: var(--btn-hover-fg); }

.btn:disabled, .btn[disabled] { background-color: var(--btn-disabled-bg); color: var(--btn-disabled-fg); cursor: not-allowed; }
.btn:focus { outline: none; box-shadow: var(--btn-focus-ring-offset-box-shadow); }


/* ---------------------------------------------------------------------
   Color Utilities
   --------------------------------------------------------------------- */
.text-neutral-400 { color: var(--neutral-400); }

/* ---------------------------------------------------------------------
   State / Visibility
   --------------------------------------------------------------------- */
.hide { display: none; }
.visible { visibility: visible; }

/* ---------------------------------------------------------------------
   Data helpers
   --------------------------------------------------------------------- */
[data-weight="increase"] > span { background-color: var(--increase); }
[data-weight="neutral"]  > span { background-color: var(--neutral); }
[data-weight="decrease"] > span { background-color: var(--decrease); }

/* ---------------------------------------------------------------------
   Responsive variants
   --------------------------------------------------------------------- */
@media (min-width: 640px) {
  .sm\:grid-2 { grid-template-columns: repeat(2, 1fr); }
  .sm\:grid-3 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 768px) {
  .md\:grid-2 { grid-template-columns: repeat(2, 1fr); }
  .md\:grid-3 { grid-template-columns: repeat(3, 1fr); }
  .md\:grid-4 { grid-template-columns: repeat(4, 1fr); }

  .md\:flex-row { flex-direction: row; }
  .md\:items-center { align-items: center; }
}

@media (min-width: 1024px) {
  .lg\:grid-4 { grid-template-columns: repeat(4, 1fr); }
}
/* =========================================================
   TOKENS — desktop first (1920 baseline)
   - Reverse media (max-width) scales DOWN
   - Breakpoints: 1440, 1280, 1024, 992, 768, 600, 480, 388
   ========================================================= */
:root {
  /* -------------------------------------------------------
     Layout max widths
     ------------------------------------------------------- */
  --max-sm: 48rem;   /* ~768px */
  --max-md: 1344px;
  --max-lg: 90rem;   /* ~1440px */
  --max: var(--max-lg);

  /* -------------------------------------------------------
     Typography — PRIMARY sizes (define once)
     ------------------------------------------------------- */
  /* Captions */
  --font-size-caption-s: 0.6875rem; /* 11px */
  --font-size-caption-m: 0.75rem;   /* 12px */
  --font-size-caption-l: 0.8125rem; /* 13px */

  /* Body */
  --font-size-body-s: 0.875rem;  /* 14px */
  --font-size-body-m: 1rem;      /* 16px */
  --font-size-body-l: 1.125rem;  /* 18px */

  /* Headings */
  --font-size-h6: 1rem;      /* 16px */
  --font-size-h5: 1.08rem;   /* ~17px */
  --font-size-h4: 1.25rem;   /* 20px */
  --font-size-h3: 1.5rem;    /* 24px */
  --font-size-h2: 2rem;      /* 32px */
  --font-size-h1: 2.25rem;   /* 36px */

  /* Display hero */
  --font-size-display-sm: 2.5rem; /* 40px */
  --font-size-display-md: 3.5rem;
  --font-size-display: 4.5rem;

  /* -------------------------------------------------------
     Typography — ALIASES (keep system consistent)
     ------------------------------------------------------- */
  /* If you want body-m to always equal h6, alias it like this */
  --font-size-body-m: var(--font-size-h6);

  /* Optional aliases you may like (comment out if not needed) */
  /* --font-size-body-l: var(--font-size-h5); */

  /* -------------------------------------------------------
     Line heights
     ------------------------------------------------------- */
  --line-height-tight: 1.1;
  --line-height-heading: 1.2;
  --line-height-body: 1.48;

  /* -------------------------------------------------------
     Spacing
     ------------------------------------------------------- */
  --space-0:   0;
  --space-xxs: 0.25rem; /* 4px  */
  --space-xs:  0.5rem;  /* 8px  */
  --space-sm:  0.75rem; /* 12px */
  --space-md:  1rem;    /* 16px */
  --space-lg:  1.25rem; /* 20px */
  --space-xl:  1.5rem;  /* 24px */
  --space-xxl: 2rem;    /* 32px */

  /* -------------------------------------------------------
     Radius
     ------------------------------------------------------- */
  --radius-0:    0;
  --radius-xs:   0.125rem; /* 2px  */
  --radius-sm:   0.25rem;  /* 4px  */
  --radius-md:   0.5rem;   /* 8px  */
  --radius-lg:   0.75rem;  /* 12px */
  --radius-xl:   1rem;     /* 16px */
  --radius-xxl:  1.5rem;   /* 24px */
  --radius-full: 9999px;
  --radius-btn:  var(--radius-sm);

  /* -------------------------------------------------------
     Overlays
     ------------------------------------------------------- */
  --backdrop: rgba(0, 0, 0, 0.7);
}

/* =========================================================
   ≤ 1440px
   ========================================================= */
@media (max-width: 1440px) {
  :root {
    --max: var(--max-md);

    /* Captions */
    --font-size-caption-s: 0.6875rem;
    --font-size-caption-m: 0.75rem;
    --font-size-caption-l: 0.8125rem;

    /* Body */
    --font-size-body-s: 0.875rem;
    --font-size-body-m: var(--font-size-h6);
    --font-size-body-l: 1.0625rem; /* 17px */

    /* Headings */
    --font-size-h6: 0.9375rem; /* 15px */
    --font-size-h5: 1.0625rem; /* 17px */
    --font-size-h4: 1.1875rem; /* 19px */
    --font-size-h3: 1.4375rem; /* 23px */
    --font-size-h2: 1.875rem;  /* 30px */
    --font-size-h1: 2.125rem;  /* 34px */

    /* Display */
    --font-size-display-sm: 2.25rem;
    --font-size-display-md: 3.125rem;
    --font-size-display: 4rem;
  }
}

/* =========================================================
   ≤ 1280px
   ========================================================= */
@media (max-width: 1280px) {
  :root {
    /* Body */
    --font-size-body-l: 1.0625rem;

    /* Headings */
    --font-size-h6: 0.9375rem;
    --font-size-h5: 1.0625rem;
    --font-size-h4: 1.1875rem;
    --font-size-h3: 1.375rem; /* 22px */
    --font-size-h2: 1.75rem;  /* 28px */
    --font-size-h1: 2rem;     /* 32px */

    /* Display */
    --font-size-display-sm: 2.125rem;
    --font-size-display-md: 2.75rem;
    --font-size-display: 3.5rem;
  }
}

/* =========================================================
   ≤ 1024px
   ========================================================= */
@media (max-width: 1024px) {
  :root {
    /* Captions */
    --font-size-caption-s: 0.6875rem;
    --font-size-caption-m: 0.75rem;
    --font-size-caption-l: 0.8125rem;

    /* Body */
    --font-size-body-s: 0.875rem;
    --font-size-body-m: var(--font-size-h6);
    --font-size-body-l: 1rem;

    /* Headings */
    --font-size-h6: 0.9375rem; /* 15px */
    --font-size-h5: 1rem;      /* 16px */
    --font-size-h4: 1.125rem;  /* 18px */
    --font-size-h3: 1.375rem;  /* 22px */
    --font-size-h2: 1.625rem;  /* 26px */
    --font-size-h1: 1.875rem;  /* 30px */

    /* Display */
    --font-size-display-sm: 2rem;
    --font-size-display-md: 2.5rem;
    --font-size-display: 3rem;
  }
}

/* =========================================================
   ≤ 992px
   ========================================================= */
@media (max-width: 992px) {
  :root {
    /* Small nudge only (keeps things stable around iPad landscape-ish) */
    --font-size-h1: 1.8125rem; /* 29px */
    --font-size-display: 2.875rem;
  }
}

/* =========================================================
   ≤ 768px
   ========================================================= */
@media (max-width: 768px) {
  :root {
    /* Body */
    --font-size-body-l: 1rem;

    /* Headings */
    --font-size-h6: 0.9375rem;
    --font-size-h5: 1rem;
    --font-size-h4: 1.125rem;
    --font-size-h3: 1.25rem;  /* 20px */
    --font-size-h2: 1.5rem;   /* 24px */
    --font-size-h1: 1.75rem;  /* 28px */

    /* Display */
    --font-size-display-sm: 1.875rem;
    --font-size-display-md: 2.125rem;
    --font-size-display: 2.5rem;
  }
}

/* =========================================================
   ≤ 600px
   ========================================================= */
@media (max-width: 600px) {
  :root {
    /* Captions */
    --font-size-caption-s: 0.6875rem;
    --font-size-caption-m: 0.75rem;
    --font-size-caption-l: 0.8125rem;

    /* Body */
    --font-size-body-s: 0.875rem;
    --font-size-body-m: var(--font-size-h6);
    --font-size-body-l: 1rem;

    /* Headings */
    --font-size-h6: 0.9375rem;
    --font-size-h5: 1rem;
    --font-size-h4: 1.0625rem; /* 17px */
    --font-size-h3: 1.125rem;  /* 18px */
    --font-size-h2: 1.25rem;   /* 20px */
    --font-size-h1: 1.5rem;    /* 24px */

    /* Display */
    --font-size-display-sm: 1.5rem;
    --font-size-display-md: 1.75rem;
    --font-size-display: 2rem;
    --gutter:1rem;
  }
}

/* =========================================================
   ≤ 480px
   ========================================================= */
@media (max-width: 480px) {
  :root {
    --font-size-display: 1.875rem;
    --font-size-display-md: 1.625rem;
    --font-size-display-sm: 1.375rem;
  }
  
  .header-mobile-nav > .site-menu-item-cta {
    display:none;
  }
}

/* =========================================================
   ≤ 388px
   ========================================================= */
@media (max-width: 388px) {
  :root {
    --font-size-h1: 1.375rem;
    --font-size-display: 1.75rem;
  }
}

.dnd-section > .row-fluid {
  max-width: var(--max);
      padding-left: var(--gutter);
    padding-right: var(--gutter);
}

/* =========================================================
   Text color utilities (semantic + ramps)
   ========================================================= */

.u-text-default,
.u-text-text { color: var(--color-text); } /* alias if you want "color-text" vibe */

.u-text-body { color: var(--color-text-body); }
.u-text-muted,
.u-text-mute { color: var(--color-text-muted); }

.u-text-primary { color: var(--color-primary); }
.u-text-on-primary { color: var(--color-on-primary); }

/* If you want explicit ramps too (sometimes useful) */
.u-text-neutral-50{color:var(--neutral-50)}
.u-text-neutral-100{color:var(--neutral-100)}
.u-text-neutral-200{color:var(--neutral-200)}
.u-text-neutral-300{color:var(--neutral-300)}
.u-text-neutral-400{color:var(--neutral-400)}
.u-text-neutral-500{color:var(--neutral-500)}
.u-text-neutral-600{color:var(--neutral-600)}
.u-text-neutral-700{color:var(--neutral-700)}
.u-text-neutral-800{color:var(--neutral-800)}
.u-text-neutral-900{color:var(--neutral-900)}

/* =========================================================
   Line-height utilities
   - Token based + a few practical numeric options
   ========================================================= */

/* Token-based */
.u-lh-tight   { line-height: var(--line-height-tight) !important; }
.u-lh-heading { line-height: var(--line-height-heading) !important; }
.u-lh-body    { line-height: var(--line-height-body) !important; }

/* Numeric scale (handy for overrides) */
.u-lh-1      { line-height: 1 !important; }
.u-lh-105    { line-height: 1.05 !important; }
.u-lh-11     { line-height: 1.1 !important; }
.u-lh-12     { line-height: 1.2 !important; }
.u-lh-125    { line-height: 1.25 !important; }
.u-lh-13     { line-height: 1.3 !important; }
.u-lh-14     { line-height: 1.4 !important; }
.u-lh-145    { line-height: 1.45 !important; }
.u-lh-15     { line-height: 1.5 !important; }
.u-lh-16     { line-height: 1.6 !important; }
.u-lh-18     { line-height: 1.8 !important; }

/* Reset / inherit */
.u-lh-normal  { line-height: normal !important; }
.u-lh-inherit { line-height: inherit !important; }

/* =========================================================
   Text shadow utilities
   - Use when text sits on images/video
   ========================================================= */

/* Soft (good default for hero text) */
.u-text-shadow-sm {
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}

.u-text-shadow-md {
  text-shadow: 0 2px 8px rgba(0,0,0,.55);
}

.u-text-shadow-lg {
  text-shadow: 0 6px 20px rgba(0,0,0,.65);
}

/* “Directional” (like your example) */
.u-text-shadow-inset {
  text-shadow: -1px 1px rgba(0,0,0,.8);
}

/* High-contrast outline-ish (use sparingly) */
.u-text-shadow-outline {
  text-shadow:
    0 1px 0 rgba(0,0,0,.85),
    0 -1px 0 rgba(0,0,0,.85),
    1px 0 0 rgba(0,0,0,.85),
    -1px 0 0 rgba(0,0,0,.85);
}

/* Kill shadow when needed */
.u-text-shadow-none { text-shadow: none; }


/* =========================================================
   “Readable on media” helper (sets variables)
   ========================================================= */

:root {
  --text-shadow-on-media: 0 2px 10px rgba(0,0,0,.55);
}

.u-text-on-media {
  color: #fff;
  text-shadow: var(--text-shadow-on-media);
}

.u-relative {
  position:relative;
}

/* Optional:
html { --line-height-body: 1.64; }
*/

h1, h2, h3 {
  line-height: var(--line-height-heading);
}

h1, h2, h3, h4, h5, h6 {
  font-family:var(--font-body);
  font-weight:500;
}

.u-text-center {
  text-align:center; 
}

/* Media helper
   Enforces a square crop with responsive corner radius
   (visual only – no semantic or functional meaning) */

.u-media-square {
  aspect-ratio:1/1;
  border-radius: var(--radius-xxl);
  overflow:hidden;
}

@media (max-width: 1024px) {
  .u-media-square {
    border-radius: var(--radius-xl);
  }
}

@media (max-width: 768px) {
  .u-media-square {
    border-radius: var(--radius-lg);
  }
}

@media (max-width: 480px) {
  .u-media-square {
    border-radius: var(--radius-md);
  }
}

/* =========================================================
   Background-image container (HubSpot-safe)
   - No child selectors (>) because HS injects wrapper divs
   - Works with <img>, <picture>, <video> anywhere inside
   ========================================================= */

/* The container */
.u-bg-img {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

/* Optional: if you want an absolute-fill variant */
.u-bg-img--fill,
.u-bg-media--fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hs-inline-edit .u-bg-media > .inpage-editor-active-field {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* The media inside (any depth) */
.u-bg-img img,
.u-bg-img picture,
.u-bg-img video {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}

/* If <picture> wraps an <img>, ensure the img gets the fit/position */
.u-bg-img picture img {
  width: 100%;
  height: 100%;
  max-width: none;
}

/* Default fit */
.u-bg-img img,
.u-bg-img video,
.u-bg-img picture img {
  object-fit: cover;
  object-position: center;
}

/* Wash / backdrop overlay */
.u-bg-media__wash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* =========================================================
   Background media utility
   ========================================================= */

.u-editor-overlay {
  pointer-events:none;
}

.u-editor-overlay > * {
  pointer-events:auto;
}

.u-bg-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hs-inline-edit .u-bg-media {
  pointer-events: auto;
}


.u-bg-media__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.u-bg-media__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* HubSpot videoplayer often outputs an iframe/object wrapper.
   This forces it to behave like a background cover. */
.u-bg-media__video,
.u-bg-media__video > * ,
.u-bg-media__video iframe,
.u-bg-media__video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* Mobile override logic */
.u-bg-media__layer--mobile { display: none; }

@media (max-width: 768px) {
  .u-bg-media-has-mobile.u-bg-media__layer--desktop { display: none; }
  .u-bg-media__layer--mobile { display: block; }
}

/* ---------------------------------------------------------
   Fit modes (apply to container)
--------------------------------------------------------- */

.u-bg-cover  img,
.u-bg-cover  video,
.u-bg-cover  picture img { object-fit: cover; }

.u-bg-contain img,
.u-bg-contain video,
.u-bg-contain picture img { object-fit: contain; }

.u-bg-fill img,
.u-bg-fill video,
.u-bg-fill picture img { object-fit: fill; }

.u-bg-none img,
.u-bg-none video,
.u-bg-none picture img { object-fit: none; }

/* ---------------------------------------------------------
   Position modes (apply to container)
--------------------------------------------------------- */

.u-bg-pos-center img,
.u-bg-pos-center video,
.u-bg-pos-center picture img { object-position: center; }

.u-bg-pos-top img,
.u-bg-pos-top video,
.u-bg-pos-top picture img { object-position: center top; }

.u-bg-pos-bottom img,
.u-bg-pos-bottom video,
.u-bg-pos-bottom picture img { object-position: center bottom; }

.u-bg-pos-left img,
.u-bg-pos-left video,
.u-bg-pos-left picture img { object-position: left center; }

.u-bg-pos-right img,
.u-bg-pos-right video,
.u-bg-pos-right picture img { object-position: right center; }

.u-bg-pos-top-left img,
.u-bg-pos-top-left video,
.u-bg-pos-top-left picture img { object-position: top left; }

.u-bg-pos-top-right img,
.u-bg-pos-top-right video,
.u-bg-pos-top-right picture img { object-position: top right; }

.u-bg-pos-bottom-left img,
.u-bg-pos-bottom-left video,
.u-bg-pos-bottom-left picture img { object-position: bottom left; }

.u-bg-pos-bottom-right img,
.u-bg-pos-bottom-right video,
.u-bg-pos-bottom-right picture img { object-position: bottom right; }

/* ---------------------------------------------------------
   Image-level utilities (use directly on <img> if preferred)
--------------------------------------------------------- */

.u-object-cover   { object-fit: cover; }
.u-object-contain { object-fit: contain; }
.u-object-fill    { object-fit: fill; }
.u-object-none    { object-fit: none; }

.u-object-center        { object-position: center; }
.u-object-top           { object-position: center top; }
.u-object-bottom        { object-position: center bottom; }
.u-object-left          { object-position: left center; }
.u-object-right         { object-position: right center; }

.u-object-top-left      { object-position: top left; }
.u-object-top-right     { object-position: top right; }
.u-object-bottom-left   { object-position: bottom left; }
.u-object-bottom-right  { object-position: bottom right; }

/* =========================================================
   Z-index utilities
   ========================================================= */

/* Base */

.u-z-behind {
  z-index: -1;
}

.u-z-0    { z-index: 0; }
.u-z-1    { z-index: 1; }
.u-z-2    { z-index: 2; }
.u-z-3    { z-index: 3; }
.u-z-4    { z-index: 4; }
.u-z-5    { z-index: 5; }

/* UI layers */
.u-z-10   { z-index: 10; }   /* dropdowns, sticky bars */
.u-z-20   { z-index: 20; }   /* headers, nav */
.u-z-30   { z-index: 30; }   /* overlays */
.u-z-40   { z-index: 40; }   /* modals */
.u-z-50   { z-index: 50; }   /* toasts */

/* Escape hatches */
.u-z-auto { z-index: auto; }
.u-z-max  { z-index: 2147483647; } /* last resort */

/* =========================================================
   Content wrappers
   ========================================================= */

.content-wrapper {
  width:100%;
}

.content-wrapper-sm {
  width:100%;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  max-width: var(--max-sm);
}

/* Large wrapper (wide sections, data-heavy layouts) */
.content-wrapper-lg {
  width:100%:
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  max-width: var(--max-lg);
}

.content-wrapper-sm--start {
  width: 100%;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  max-width: var(--max-sm);
}

.content-wrapper-lg--start {
  width: 100%;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  max-width: var(--max-lg);
}

/* =========================================================
   TYPE CLASSES (NO font-family)
   ========================================================= */

/* Display / Heading */
.t-display {
  font-family:var(--font-heading);
  font-size: var(--font-size-display);
  line-height: var(--line-height-tight);
  font-weight:400;
}

.t-display-lg { font-size: var(--font-size-display); font-family:var(--font-heading); }
.t-display-md { font-size: var(--font-size-display-md); font-family:var(--font-heading); }
.t-display-sm { font-size: var(--font-size-display-sm); font-family:var(--font-heading); }

.t-h1 {
  font-size: var(--font-size-h1); 
  line-height: var(--line-height-heading);
}

.t-h2 {
  font-size: var(--font-size-h2); 
  line-height: var(--line-height-heading);
}

.t-h3 {
  font-size: var(--font-size-h3); 
  line-height: var(--line-height-heading);
}

/* Body headings */
.t-h4 {
  font-size: var(--font-size-h4); 
  line-height: var(--line-height-heading);
}

.t-h5 {
  font-size: var(--font-size-h5); 
  line-height: var(--line-height-heading);
}

.t-h6 {
  font-size: var(--font-size-h6); 
  line-height: var(--line-height-heading);
}

/* =========================================================
   Body text helpers (xs → xxl)
   ========================================================= */

.t-body-xs {
  font-size: var(--font-size-caption-l); /* 13px */
  line-height: 1.5;
}

.t-body-sm {
  font-size: var(--font-size-body-s); /* 14px */
  line-height: 1.48;
}

.t-body-md {
  font-size: var(--font-size-body-m); /* 16px */
  line-height: 1.46;
}

.t-body-lg {
  font-size: var(--font-size-body-l); /* 18px */
  line-height: 1.44;
}

.t-body-xl {
  font-size: var(--font-size-h4); /* ~17–18px */
  line-height: 1.42;
}

.t-body-xxl {
  font-size: var(--font-size-h5); /* 20px */
  line-height: 1.4;
}

/* Captions */
.t-caption-l {
  font-size: var(--font-size-caption-l);
  line-height: 1.4;
}

.t-caption-m {
  font-size: var(--font-size-caption-m);
  line-height: 1.4;
}

.t-caption-s {
  font-size: var(--font-size-caption-s);
  line-height: 1.4;
}

/* Article semantic styles */
.t-article-title {
  font-weight: 700;
  font-size: var(--font-size-h1); /* 36px */
  line-height: 1.22;             /* ~44px */
}

.t-lead {
  font-weight: 600;
  font-size: var(--font-size-h3); /* 24px */
  line-height: 1.33;              /* ~32px */
  color: var(--color-text);
}

.t-lead-lg,
.t-title {
  font-weight: 600;
  font-size: var(--font-size-h2);
  line-height: var(--line-height-heading);
  color: var(--color-text);
}

/* =========================================================
   t-lead size helpers
   ========================================================= */

.t-lead-lg { font-size: var(--font-size-h3); }  /* 24px */
.t-lead-md { font-size: var(--font-size-h4); }  /* 20px */
.t-lead-sm { font-size: var(--font-size-body-l); } /* 18px */

.t-subhead {
  font-weight: 600;
  font-size: var(--font-size-body-l); /* 18px */
  line-height: 1.55;                 /* ~28px */
}

.t-card-title {
  font-weight: 700;
  font-size: var(--font-size-body-m); /* 16px */
  line-height: 1.625;                /* ~26px */
  letter-spacing: -0.0125rem;        /* -0.2px */
}

.t-card-title-sm {
  font-weight: 700;
  font-size: var(--font-size-body-s); /* 14px */
  line-height: 1.625;                /* ~26px */
  letter-spacing: -0.00625rem;       /* -0.1px */
}

/* Eyebrows */
.t-eyebrow-sm {
  font-size: 0.625rem; /* 10px */
  line-height: 1.4;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
}

.t-eyebrow {
  font-weight: 400;
  font-size: var(--font-size-body-s); /* 14px */
  line-height: 1.42;
  letter-spacing: -0.00625rem;
  text-transform: uppercase;
}

/* Quotes */
.t-quote-title {
  font-weight: 600;
  font-size: var(--font-size-h3); /* 24px */
  line-height: 1.33;
}

.t-quote-author {
  font-weight: 400;
  font-size: var(--font-size-body-l); /* 18px */
  line-height: 1.4;
}

/* Micro utilities */
.t-bold {font-weight:bold;}
.fw-400,.t-fw-400 { font-weight: 400; }
.fw-500,.t-fw-500 { font-weight: 500; }
.fw-600,.t-fw-600 { font-weight: 600; }
.fw-700,.t-fw-700 { font-weight: 700; }

.t-ls-reset,.ls-reset   { letter-spacing: 0; }
.t-ls-tight,.ls-tight   { letter-spacing: -0.0125rem; }
.t-ls-tighter,.ls-tighter { letter-spacing: -0.00625rem; }

.t-uppercase,.u-uppercase { text-transform: uppercase!important; }
.t-wrap-balance { text-wrap:balance; }

/* Remove uppercase from these by default */
.t-display,
.t-h1,
.t-h2 {
  text-transform: none;
}

/* Breadcrumb */
.breadcrumb {
  font-size: var(--font-size-caption-m);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.breadcrumb__list {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.breadcrumb__item {
  color: var(--color-text-muted);
}

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

.breadcrumb__item a:hover {
  color: var(--color-text);
}

.breadcrumb__separator {
  font-size: 0.75em;
  color: var(--color-text-muted);
  margin: 0 0.5rem;
  opacity: 0.5;
  font-weight: 300;
}

.breadcrumb__item:last-child {
  color: var(--color-text-muted);
  pointer-events: none;
}


/* =========================================================
   Margin utilities (with xxs)
   ========================================================= */

/* Reset */
.u-mt-0{margin-top:0}.u-mb-0{margin-bottom:0}.u-ml-0{margin-left:0}.u-mr-0{margin-right:0}
.u-mx-0{margin-left:0;margin-right:0}.u-my-0{margin-top:0;margin-bottom:0}

/* Top */
.u-mt-xxs{margin-top:var(--space-xxs)}
.u-mt-xs{margin-top:var(--space-xs)}
.u-mt-sm{margin-top:var(--space-sm)}
.u-mt-md{margin-top:var(--space-md)}
.u-mt-lg{margin-top:var(--space-lg)}
.u-mt-xl{margin-top:var(--space-xl)}
.u-mt-xxl{margin-top:var(--space-xxl)}

/* Bottom */
.u-mb-xxs{margin-bottom:var(--space-xxs)}
.u-mb-xs{margin-bottom:var(--space-xs)}
.u-mb-sm{margin-bottom:var(--space-sm)}
.u-mb-md{margin-bottom:var(--space-md)}
.u-mb-lg{margin-bottom:var(--space-lg)}
.u-mb-xl{margin-bottom:var(--space-xl)}
.u-mb-xxl{margin-bottom:var(--space-xxl)}

/* Left */
.u-ml-xxs{margin-left:var(--space-xxs)}
.u-ml-xs{margin-left:var(--space-xs)}
.u-ml-sm{margin-left:var(--space-sm)}
.u-ml-md{margin-left:var(--space-md)}
.u-ml-lg{margin-left:var(--space-lg)}
.u-ml-xl{margin-left:var(--space-xl)}
.u-ml-xxl{margin-left:var(--space-xxl)}

/* Right */
.u-mr-xxs{margin-right:var(--space-xxs)}
.u-mr-xs{margin-right:var(--space-xs)}
.u-mr-sm{margin-right:var(--space-sm)}
.u-mr-md{margin-right:var(--space-md)}
.u-mr-lg{margin-right:var(--space-lg)}
.u-mr-xl{margin-right:var(--space-xl)}
.u-mr-xxl{margin-right:var(--space-xxl)}

/* X axis */
.u-mx-xxs{margin-left:var(--space-xxs);margin-right:var(--space-xxs)}
.u-mx-xs{margin-left:var(--space-xs);margin-right:var(--space-xs)}
.u-mx-sm{margin-left:var(--space-sm);margin-right:var(--space-sm)}
.u-mx-md{margin-left:var(--space-md);margin-right:var(--space-md)}
.u-mx-lg{margin-left:var(--space-lg);margin-right:var(--space-lg)}
.u-mx-xl{margin-left:var(--space-xl);margin-right:var(--space-xl)}
.u-mx-xxl{margin-left:var(--space-xxl);margin-right:var(--space-xxl)}

/* Y axis */
.u-my-xxs{margin-top:var(--space-xxs);margin-bottom:var(--space-xxs)}
.u-my-xs{margin-top:var(--space-xs);margin-bottom:var(--space-xs)}
.u-my-sm{margin-top:var(--space-sm);margin-bottom:var(--space-sm)}
.u-my-md{margin-top:var(--space-md);margin-bottom:var(--space-md)}
.u-my-lg{margin-top:var(--space-lg);margin-bottom:var(--space-lg)}
.u-my-xl{margin-top:var(--space-xl);margin-bottom:var(--space-xl)}
.u-my-xxl{margin-top:var(--space-xxl);margin-bottom:var(--space-xxl)}

/* Base stack (default gap = md) */
.u-stack > * { margin: 0;}

/* Reset helper (kills margins/padding inside a stack) */
.u-stack-reset > * { margin: 0; padding: 0; }

/* (optional) also allow .u-stack to be used as reset */
.u-stack.u-stack-reset > * { margin: 0; padding: 0; }

.u-stack-sm > * + *{margin-top:var(--space-sm)}
.u-stack-md > * + *{margin-top:var(--space-md)}
.u-stack-lg > * + *{margin-top:var(--space-lg)}
.u-no-space{margin:0;padding:0}

/* =========================================================
   Stack (gap-based) — ONE CLASS per size
   Usage: <div class="u-stack-xxs">...</div>
   ========================================================= */

.u-stack-xxs,
.u-stack-xs,
.u-stack-sm,
.u-stack-md,
.u-stack-lg,
.u-stack-xl,
.u-stack-xxl {
  display: flex;
  flex-direction: column;
}

.u-stack-xxs > *,
.u-stack-xs  > *,
.u-stack-sm  > *,
.u-stack-md  > *,
.u-stack-lg  > *,
.u-stack-xl  > *,
.u-stack-xxl > * {
  margin: 0;
}

/* Gap sizes */
.u-stack-xxs { gap: var(--space-xxs); }
.u-stack-xs  { gap: var(--space-xs); }
.u-stack-sm  { gap: var(--space-sm); }
.u-stack-md  { gap: var(--space-md); }
.u-stack-lg  { gap: var(--space-lg); }
.u-stack-xl  { gap: var(--space-xl); }
.u-stack-xxl { gap: var(--space-xxl); }


/* =========================================================
   Row (gap-based) — ONE CLASS per size
   Usage: <div class="u-row-sm">...</div>
   ========================================================= */

.u-row-xxs,
.u-row-xs,
.u-row-sm,
.u-row-md,
.u-row-lg,
.u-row-xl,
.u-row-xxl {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap; /* safe default */
}

.u-row-xxs { gap: var(--space-xxs); }
.u-row-xs  { gap: var(--space-xs); }
.u-row-sm  { gap: var(--space-sm); }
.u-row-md  { gap: var(--space-md); }
.u-row-lg  { gap: var(--space-lg); }
.u-row-xl  { gap: var(--space-xl); }
.u-row-xxl { gap: var(--space-xxl); }

.u-row-nowrap { flex-wrap: nowrap; }

/* =========================================================
   Large section spacing utilities
   ========================================================= */

.u-space-xl {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.u-space-2xl {
  padding-top: 10rem;
  padding-bottom: 10rem;
}

.u-space-3xl {
  padding-top: 20rem;
  padding-bottom: 20rem;
}

/* =========================================================
   Spacer utilities (vertical rhythm only)
   - No borders
   - No mt/mb variants
   - Mobile-first with responsive overrides
   ========================================================= */

/* =========================================================
   Spacer reset (visual neutral)
   ========================================================= */

[class*="u-spacer-"] {
  background: none !important;
  border: 0 !important;
  pointer-events: none;
}

/* Base (desktop default) */
.u-spacer-2  { height: 2rem; }
.u-spacer-5  { height: 5rem; }
.u-spacer-10 { height: 10rem; }
.u-spacer-20 { height: 20rem; }

/* Mobile scale-down */
@media (max-width: 768px) {
  .u-spacer-2  { height: 1.5rem; }
  .u-spacer-5  { height: 3rem; }
  .u-spacer-10 { height: 5rem; }
  .u-spacer-20 { height: 8rem; }
}

/* sm ≥ 640px */
@media (min-width: 640px) {
  .sm\:u-spacer-2  { height: 2rem; }
  .sm\:u-spacer-5  { height: 5rem; }
  .sm\:u-spacer-10 { height: 10rem; }
  .sm\:u-spacer-20 { height: 20rem; }
}

/* md ≥ 768px */
@media (min-width: 768px) {
  .md\:u-spacer-2  { height: 2rem; }
  .md\:u-spacer-5  { height: 5rem; }
  .md\:u-spacer-10 { height: 10rem; }
  .md\:u-spacer-20 { height: 20rem; }
}

/* lg ≥ 1024px */
@media (min-width: 1024px) {
  .lg\:u-spacer-2  { height: 2rem; }
  .lg\:u-spacer-5  { height: 5rem; }
  .lg\:u-spacer-10 { height: 10rem; }
  .lg\:u-spacer-20 { height: 20rem; }
}

/* =========================================================
   Padding utilities (with xxs)
   ========================================================= */

/* Reset */
.u-p-0{padding:0}
.u-pt-0{padding-top:0}
.u-pb-0{padding-bottom:0}
.u-pl-0{padding-left:0}
.u-pr-0{padding-right:0}
.u-px-0{padding-left:0;padding-right:0}
.u-py-0{padding-top:0;padding-bottom:0}

/* Y axis */
.u-py-xxs{padding-top:var(--space-xxs);padding-bottom:var(--space-xxs)}
.u-py-xs{padding-top:var(--space-xs);padding-bottom:var(--space-xs)}
.u-py-sm{padding-top:var(--space-sm);padding-bottom:var(--space-sm)}
.u-py-md{padding-top:var(--space-md);padding-bottom:var(--space-md)}
.u-py-lg{padding-top:var(--space-lg);padding-bottom:var(--space-lg)}
.u-py-xl{padding-top:var(--space-xl);padding-bottom:var(--space-xl)}
.u-py-xxl{padding-top:var(--space-xxl);padding-bottom:var(--space-xxl)}

/* X axis */
.u-px-xxs{padding-left:var(--space-xxs);padding-right:var(--space-xxs)}
.u-px-xs{padding-left:var(--space-xs);padding-right:var(--space-xs)}
.u-px-sm{padding-left:var(--space-sm);padding-right:var(--space-sm)}
.u-px-md{padding-left:var(--space-md);padding-right:var(--space-md)}
.u-px-lg{padding-left:var(--space-lg);padding-right:var(--space-lg)}
.u-px-xl{padding-left:var(--space-xl);padding-right:var(--space-xl)}
.u-px-xxl{padding-left:var(--space-xxl);padding-right:var(--space-xxl)}

/* Top */
.u-pt-xxs{padding-top:var(--space-xxs)}
.u-pt-xs{padding-top:var(--space-xs)}
.u-pt-sm{padding-top:var(--space-sm)}
.u-pt-md{padding-top:var(--space-md)}
.u-pt-lg{padding-top:var(--space-lg)}
.u-pt-xl{padding-top:var(--space-xl)}
.u-pt-xxl{padding-top:var(--space-xxl)}

/* Bottom */
.u-pb-xxs{padding-bottom:var(--space-xxs)}
.u-pb-xs{padding-bottom:var(--space-xs)}
.u-pb-sm{padding-bottom:var(--space-sm)}
.u-pb-md{padding-bottom:var(--space-md)}
.u-pb-lg{padding-bottom:var(--space-lg)}
.u-pb-xl{padding-bottom:var(--space-xl)}
.u-pb-xxl{padding-bottom:var(--space-xxl)}

/* Left */
.u-pl-xxs{padding-left:var(--space-xxs)}
.u-pl-xs{padding-left:var(--space-xs)}
.u-pl-sm{padding-left:var(--space-sm)}
.u-pl-md{padding-left:var(--space-md)}
.u-pl-lg{padding-left:var(--space-lg)}
.u-pl-xl{padding-left:var(--space-xl)}
.u-pl-xxl{padding-left:var(--space-xxl)}

/* Right */
.u-pr-xxs{padding-right:var(--space-xxs)}
.u-pr-xs{padding-right:var(--space-xs)}
.u-pr-sm{padding-right:var(--space-sm)}
.u-pr-md{padding-right:var(--space-md)}
.u-pr-lg{padding-right:var(--space-lg)}
.u-pr-xl{padding-right:var(--space-xl)}
.u-pr-xxl{padding-right:var(--space-xxl)}

/* Grid / Gap */
.u-grid{display:grid;gap:var(--space-md)}
.u-grid-1{grid-template-columns:1fr}
.u-grid-2{grid-template-columns:repeat(2,1fr)}
.u-grid-3{grid-template-columns:repeat(3,1fr)}
.u-grid-4{grid-template-columns:repeat(4,1fr)}
.u-grid-5{grid-template-columns:repeat(5,1fr)}
.u-grid-full-row{grid-column:1 / -1}

/* =========================================================
   Asymmetric grid layouts
   - Sidebar / main content patterns
   - Mobile-first: stack by default
   ========================================================= */

/* Base: stacked (mobile) */
.u-grid-1-3,
.u-grid-3-1 {
  grid-template-columns: 1fr;
}

/* md ≥ 768px */
@media (min-width: 768px) {
  /* Sidebar → content (28% / 72%) */
  .u-grid-1-3 {
    grid-template-columns: 28% 1fr;
  }

  /* Content → sidebar (72% / 28%) */
  .u-grid-3-1 {
    grid-template-columns: 1fr 28%;
  }
}

.u-gap-0{gap:0}
.u-gap-xxs{gap:var(--space-xxs)}
.u-gap-xs{gap:var(--space-xs)}
.u-gap-sm{gap:var(--space-sm)}
.u-gap-md{gap:var(--space-md)}
.u-gap-lg{gap:var(--space-lg)}
.u-gap-xl{gap:var(--space-xl)}
.u-gap-xxl{gap:var(--space-xxl)}

/* Flex */
.u-flex{display:flex}
.u-inline-flex{display:inline-flex}
.u-flex-row{display:flex;flex-direction:row}
.u-flex-col{display:flex;flex-direction:column}
.u-flex-wrap{flex-wrap:wrap}
.u-items-start{align-items:flex-start}
.u-items-center{align-items:center}
.u-items-end{align-items:flex-end}
.u-justify-start{justify-content:flex-start}
.u-justify-center{justify-content:center}
.u-justify-between{justify-content:space-between}
.u-justify-end{justify-content:flex-end}

/* Responsive variants (escaped) */
@media (min-width:640px){
  .sm\:u-grid-2{grid-template-columns:repeat(2,1fr)}
  .sm\:u-grid-3{grid-template-columns:repeat(3,1fr)}
  .sm\:u-grid-4{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:768px){
  .md\:u-grid-2{grid-template-columns:repeat(2,1fr)}
  .md\:u-grid-3{grid-template-columns:repeat(3,1fr)}
  .md\:u-grid-4{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:1024px){
  .lg\:u-grid-2{grid-template-columns:repeat(2,1fr)}
  .lg\:u-grid-3{grid-template-columns:repeat(3,1fr)}
  .lg\:u-grid-4{grid-template-columns:repeat(4,1fr)}
  .lg\:u-grid-5{grid-template-columns:repeat(5,1fr)}
}

/* Visibility / sizing / overflow */
.u-hidden{display:none!important}
.u-block{display:block!important}
.u-inline{display:inline!important}
.u-w-full{width:100%}
.u-h-full{height:100%}
.u-min-h-screen{min-height:100vh}
.u-overflow-hidden{overflow:hidden}
.u-overflow-auto{overflow:auto}
.u-overflow-scroll{overflow:scroll}
.u-overflow-x-auto{overflow-x:auto}
.u-overflow-y-auto{overflow-y:auto}

/* Colors / text (mapped to your semantic tokens) */
.u-bg-surface{background:var(--color-surface)}
.u-bg-surface-alt{background:var(--color-surface-muted)}
.u-text-main{color:var(--color-text)}
.u-text-muted{color:var(--color-text-muted)}
.u-text-primary{color:var(--color-primary)}

/* Neutral ramps */
.u-bg-neutral-50{background-color:var(--neutral-50)}
.u-bg-neutral-100{background-color:var(--neutral-100)}
.u-bg-neutral-200{background-color:var(--neutral-200)}
.u-bg-neutral-300{background-color:var(--neutral-300)}
.u-bg-neutral-400{background-color:var(--neutral-400)}
.u-bg-neutral-500{background-color:var(--neutral-500)}
.u-bg-neutral-600{background-color:var(--neutral-600)}
.u-bg-neutral-700{background-color:var(--neutral-700)}
.u-bg-neutral-800{background-color:var(--neutral-800)}
.u-bg-neutral-900{background-color:var(--neutral-900)}

/* Radius helpers */
[data-radius="none"]{border-radius:var(--radius-0)}
[data-radius="xs"]{border-radius:var(--radius-xs)}
[data-radius="sm"]{border-radius:var(--radius-sm)}
[data-radius="md"]{border-radius:var(--radius-md)}
[data-radius="lg"]{border-radius:var(--radius-lg)}
[data-radius="xl"]{border-radius:var(--radius-xl)}
[data-radius="full"]{border-radius:var(--radius-full)}


/* =========================================================
   Highlight utilities (HubSpot-safe)
   ========================================================= */

:root {
  --hl-py: 0.18em;
  --hl-px: 0.35em;
  --hl-radius: 0;

  --hl-bg-primary: var(--color-primary);
  --hl-bg-white: #fff;
  --hl-bg-dark: var(--color-btn);

  --hl-text-on-light: #111;
  --hl-text-on-dark: #fff;
}

/* Wrapper (safe around HubSpot modules) */
.u-highlight {
  display: block;
  line-height: 1.8;
}

/* OPTIONAL (preferred): target HubSpot wrappers so we don't style random nested stuff */
.u-highlight .hs_cos_wrapper,
.u-highlight > span {
  display: inline;
  background: var(--hl-bg, var(--hl-bg-primary));
  color: var(--hl-fg, var(--hl-text-on-light));
  padding: var(--hl-py) var(--hl-px);
  border-radius: var(--hl-radius);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ---------------------------------------------------------
   Variants (set CSS variables only)
--------------------------------------------------------- */
.u-highlight--primary { --hl-bg: var(--hl-bg-primary); --hl-fg: var(--hl-text-on-light); }
.u-highlight--white   { --hl-bg: var(--hl-bg-white);   --hl-fg: var(--hl-text-on-light); }
.u-highlight--dark    { --hl-bg: var(--hl-bg-dark);    --hl-fg: var(--hl-text-on-dark); }

/* ---------------------------------------------------------
   Options (affect inner “marker” via variables)
--------------------------------------------------------- */
.u-highlight--tight { --hl-py: 0.12em; --hl-px: 0.28em; }
.u-highlight--loose { --hl-py: 0.24em; --hl-px: 0.45em; }

.u-highlight--square { --hl-radius: 0; }

/* Force one chunk (won’t wrap). Use only when you really need it. */
.u-highlight--block .hs_cos_wrapper,
.u-highlight--block .hs_cos_wrapper * {
  display: inline-block;
}

/* =========================================================
   Banner utilities
   ========================================================= */

/* Desktop banner */
.u-banner {
  width: 100%;
}

.u-banner-body {
  padding-top: var(--space-xxl);
  padding-bottom: var(--space-xxl);
}

/* Mobile banner override */
@media (max-width: 768px) {
  .u-banner {
    aspect-ratio: 1;
    display:flex;
    align-items:center;
  }
  
  .u-banner-body {
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);
  }
}

@media (max-width: 480px) {
  .u-banner {
    aspect-ratio: 4 / 5;
  }
  .u-banner-body {
    padding-top: var(--space-0);
    padding-bottom: var(--space-0);
  }
}

[data-max-char] {
  display:inline-block;
}

/* =========================================================
   Divider (hr) utility — token driven
   ========================================================= */

.u-hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-xl) 0;
  width: 100%;
}

/* Spacing variants */
.u-hr-sm { margin: var(--space-md) 0; }
.u-hr-lg { margin: var(--space-xxl) 0; }

/* Strength variants */
.u-hr-strong { border-top-color: var(--color-border-strong); }

/* Optional: inset divider (nice in cards) */
.u-hr-inset {
  margin-left: var(--space-xl);
  margin-right: var(--space-xl);
}

/* =========================================================
   Border utilities
   - 1px solid
   - Token driven
   - Light / Dark safe
   ========================================================= */

/* =======================
   Base (all breakpoints)
   ======================= */

/* =========================================================
   Border utilities (token-driven)
   ========================================================= */

/* ALL */
.u-border       { border: 1px solid var(--color-border); }
.u-border-strong{ border: 1px solid var(--color-border-strong); }
.u-border-0     { border: 0; }

/* BOTTOM */
.u-bb        { border-bottom: 1px solid var(--color-border); }
.u-bb-strong { border-bottom: 1px solid var(--color-border-strong); }
.u-bb-0      { border-bottom: 0; }

/* TOP */
.u-bt        { border-top: 1px solid var(--color-border); }
.u-bt-strong { border-top: 1px solid var(--color-border-strong); }
.u-bt-0      { border-top: 0; }

/* LEFT */
.u-bl        { border-left: 1px solid var(--color-border); }
.u-bl-strong { border-left: 1px solid var(--color-border-strong); }
.u-bl-0      { border-left: 0; }

/* RIGHT */
.u-br        { border-right: 1px solid var(--color-border); }
.u-br-strong { border-right: 1px solid var(--color-border-strong); }
.u-br-0      { border-right: 0; }

/* =======================
   sm ≥ 640px
   ======================= */
@media (min-width: 640px) {
  .sm\:u-border { border: 1px solid var(--color-border); }
  .sm\:u-border-0 { border: 0; }

  .sm\:u-bb { border-bottom: 1px solid var(--color-border); }
  .sm\:u-bt { border-top: 1px solid var(--color-border); }
  .sm\:u-bl { border-left: 1px solid var(--color-border); }
  .sm\:u-br { border-right: 1px solid var(--color-border); }
}


/* =======================
   md ≥ 768px
   ======================= */
@media (min-width: 768px) {
  .md\:u-border { border: 1px solid var(--color-border); }
  .md\:u-border-0 { border: 0; }

  .md\:u-bb { border-bottom: 1px solid var(--color-border); }
  .md\:u-bt { border-top: 1px solid var(--color-border); }
  .md\:u-bl { border-left: 1px solid var(--color-border); }
  .md\:u-br { border-right: 1px solid var(--color-border); }
}


/* =======================
   lg ≥ 1024px
   ======================= */
@media (min-width: 1024px) {
  .lg\:u-border { border: 1px solid var(--color-border); }
  .lg\:u-border-0 { border: 0; }

  .lg\:u-bb { border-bottom: 1px solid var(--color-border); }
  .lg\:u-bt { border-top: 1px solid var(--color-border); }
  .lg\:u-bl { border-left: 1px solid var(--color-border); }
  .lg\:u-br { border-right: 1px solid var(--color-border); }
}
/* ---------- how much vertical space the header occupies ----------
   Two different numbers, and mixing them up is the classic bug here:
   --event-header        = the height of the visible black bar. Never changes.
   --event-header-offset = the space the page must leave clear at the top.
                           Grows by the promo ribbon's height when one is up.
   Anything positioning itself below the header (sticky sidebars, filters)
   wants the OFFSET, not the bar height, or the ribbon covers it.

   The ribbon height is NOT hardcoded as a total. A fixed total is what the
   old --event-header-promo: 128px was, and it was 17px too tall the moment
   the ribbon's copy changed. Here CSS sets a per-breakpoint starting value
   and 2026-paw.js overwrites --promo-ribbon-h with the measured height, so
   the reservation stays exact through copy changes and resizes. With no
   ribbon in the DOM the var is unset and the fallback 0px keeps every page
   byte-identical to before. */

:root {
  --event-header-offset: calc(var(--event-header) + var(--promo-ribbon-h, 0px));
}

html:has(.promo-ribbon:not([hidden])) {
  --promo-ribbon-h: 47px;
}

/* Below 1281px the ticker is hidden, so the bar is a single line and shorter. */
@media (max-width: 1280px) {
  html:has(.promo-ribbon:not([hidden])) {
    --promo-ribbon-h: 41px;
  }
}

.event-header {
  color:var(--neutral-100);
  position:relative;
  z-index:500;
  height:var(--event-header);
}

.event-header-container {
  background-color:var(--neutral-900);
  height:var(--event-header);
  box-shadow:0rem 0rem 1rem 1rem rgba(0,0,0,.25);
}

html:not(.hs-inline-edit) .event-header-container {
  width:100%;
  position:fixed;
  top:0;
}

/* Only reserve the extra space where the bar is actually fixed. In the page
   editor the container is static, so the ribbon is positioned against
   .event-header instead - growing it there would push the ribbon down and
   leave a gap, which is exactly the "extra space" symptom. */
html:not(.hs-inline-edit) .event-header {
  height:var(--event-header-offset);
}

.event-navbar {
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

.site-logo-header {
  color:var(--neutral-200);
  width:9rem;
  height:auto;
}

.site-logo-header svg,
.site-logo-header .cw-woosh{
  transition:color .5s;
}

.site-logo-header svg {
  width:100%;
  height:100%;
  display:block;
}

.site-menu {
  display:flex;
  height:100%;
}

.site-menu-item {
  display:flex;
  color:#fff;
  text-transform:uppercase;
  padding:0 1rem;
  align-items:center;
  font-weight:600;
  text-underline-offset: 4px; /* adjust this value as needed */
  text-decoration-thickness: 2px;
}
/* Default: non-home menu items are dimmed */
html:not([data-page="home"]) .site-menu-item:not(.site-menu-item-cta) {
  opacity: 0.4;
}

.site-menu-item-cta {
  background-color:var(--blue-700);
}

html:not([data-page="home"]) .site-menu-item-cta {
  background-color:var(--blue-800);
  color: var(--neutral-400);
}

/* Home page: everything fully visible */
html[data-page="home"] .site-menu-item {
  opacity: 1;
}

/* Active nav item: always white and fully visible */
.event-navbar .site-menu-item:not(.site-menu-item-cta).is-active {
  color: #fff;
  opacity: 1;
}

.site-logo-header .cw-woosh {
  color:var(--blue-500);
}

html:is(.hs-inline-edit, [data-page="home"]) .site-logo-header,
.site-logo-header:hover svg{
  color:#fff;
}
.event-footer {
  background-color: var(--neutral-200);
}

.event-footer h3,
.event-footer strong,
.event-footer .strong,
.event-footer a {
  color:currentColor;
}

.event-footer a {
  text-decoration:underline;
  text-underline-offset: 0.24em;
    text-decoration-thickness: .04em;
}

.testimonial-body blockquote {
  border:0;
  padding:0;
  margin:0;
}

.testimonial-img {
  max-width:230px;
}

.footer-copy {
  background-color: var(--neutral-300);
  color: var(--neutral-500);
}

.footer-copy .content-wrapper {
  justify-content: center;
    padding: 1rem 0;
  display:flex;
}

.footer-brand {
  width:23%;
}

.footer-brand svg {
  color:var(--neutral-600);
}

.footer-brand svg .how-swoosh {
  color:var(--neutral-600);
}

.footer-description {
  max-width:28ch;
  margin-top:2rem;
}

.footer-sitemap {
  padding: 6rem var(--gutter);
}

.footer-sitemap,
.footer-sitemap p{
  font-size: .88rem;
}

.footer-locations {
  flex:1;
      display: grid;
    gap: 0rem 2rem;
    grid-template-columns: repeat(4, 1fr);
}

.footer-social {
  width: 10%;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    align-items: flex-end;
}
/* css/child/components/_anchor-nav.css */

@media screen and (max-width: 1279px) {
  .body-container-wrapper {
    overflow-x: hidden;
  }
}

/* HubSpot editor tools menu overrides */
.hs-tools-menu[aria-expanded="false"],
.hs-tools-menu[aria-expanded="true"] {
  top: auto !important;
  bottom: 10px;
}

/* Anchor helpers */
.anchor-hidden-section,
.anchor-target {
  position: relative;
  display: block;
  height: 1px;
  width: 100%;
  overflow: hidden;
  opacity: 0;
}

[data-anchor-nav="true"] .anchor-hidden-section {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  padding: 0 !important;
}

.anchor-target {
  margin: 0 auto;
  padding: 1rem;
  border: 2px dotted #ffffffc3;
  background-color: red;
  box-shadow: 0 0 0 .5rem rgba(255, 0, 0, 0.815);
}

/* nested rules expanded */
.anchor-target h3,
.anchor-target p {
  margin: 0;
  color: #fff;
}

.anchor-hidden-section {
  background-color: rgba(255, 0, 0, 0.815);
}

.anchor-icon {
  width: 100px;
  aspect-ratio: 1;
  background-color: #fff;
  mask: url(https://cdn.prod.website-files.com/66aa37eb1a8172e38caca7c4/683ff914208d3b7b8b63c8d3_anchor.svg) center center / contain no-repeat;
}

/* editor-specific overrides */
.hs-inline-edit .anchor-hidden-section,
.hs-inline-edit .anchor-target {
  height: auto;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  opacity: 1;
}

/* buttons */
.interactive-button,
.ch2-style-compact .ch2-btn {
  border-radius: var(--btn-radius) !important;
}
/* 1. Declare .card-collection as a container */
.card-collection {
  container-type: inline-size; /* enables container queries on its inline size (width) */
}

/* 2. Default grid layouts for 1/2/3 cards */
.card-collection.card-single .cards-grid {
  display: grid;
  justify-items: center;
}

.card-collection.card-double .cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.card-collection.card-triple .cards-grid,
.speakers-collection .speakers,
[data-module="speaker-collection"] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

/* 3. When the card-collection container is narrower than 500px */
@container (max-width: 500px) {
  /* only affect non-swiper collections */
  .card-collection:not(.swiper-container) .cards-grid {
    display: flex;
    flex-direction: column;
  }

  .card-collection:not(.swiper-container) .cards-grid .card {
    width: 100%;
    display:flex;
    gap:.5rem;
  }
  
  .card-media {
    width: 88%;
    max-width: 156px;
  }
}

.card {
  padding:0;
  margin:0;
}
.kl-pricing {
  display: flex;
  align-items: stretch;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .kl-pricing {
    display: block;
  }
}

.kl-pricing__card {
  position: relative;
  padding: 36px 32px;
  border: 1px solid var(--neutral-300);
  box-shadow: 0 11px 30px rgba(0, 0, 0, 0.08);
  background-color: var(--neutral-50);
  border-radius: var(--radius-xl);
  flex: 1 1 0;
  transition: box-shadow .25s ease-in-out;
}

.kl-pricing__card--featured,
.kl-pricing__card:hover {
  box-shadow: 0 11px 30px rgba(0, 0, 0, 0.14);
}

.kl-pricing__card + .kl-pricing__card {
  margin-left: 16px;
}

@media screen and (max-width: 768px) {
  .kl-pricing__card + .kl-pricing__card {
    margin: 24px 0 0;
  }
}

.kl-pricing__badge {
  font-family: var(--font-body), sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  min-width: 120px;
  padding: 10px 16px;
  border-radius: 999px;
  background-color: var(--color-primary);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

.kl-pricing__icon {
  height: 28px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 0 0 1.5rem;
}

.kl-pricing__icon img {
  max-height: 100%;
  display: block;
}

.kl-pricing__price {
  color: var(--neutral-900);
}

.kl-pricing__price h1, .kl-pricing__price h2, .kl-pricing__price h3, .kl-pricing__price h4, .kl-pricing__price h5, .kl-pricing__price h6 {
  color: inherit;
}

.kl-pricing__description p {
  font-size: 0.875rem;
  margin: 0 0 0.75rem;
}

.kl-pricing__features {
  text-align: left;
  list-style: none;
  margin: 0 0 2.625rem;
  padding: 0;
}

.kl-pricing__features li {
  font-size: 0.875rem;
  margin: 0 0 1rem;
  display: flex;
}

.kl-pricing__bullet {
  display: block;
  width: 1rem;
  height: 1rem;
  margin: 2px 0.75rem 0 0;
  flex-shrink: 0;
}

.kl-pricing__bullet img {
  display: block;
}

.kl-pricing__button .button_cta {
  width: 100%;
}

.kl-pricing__button .button_cta a {
  padding-left: 0;
  padding-right: 0;
}

.kl-pricing__button a {
  width: 100%;
}

.kl-pricing hr {
  margin: 1.75rem 0;
  color: #d8d8d8;
  background-color: #d8d8d8;
  height: 2px;
}

/* ---- Group booking band (renders below the card grid) ---- */

.kl-pricing-groupband {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 24px;
  padding: 24px 32px;
  border-radius: var(--radius-xl);
  background-color: var(--color-primary);
  text-align: left;
}

.kl-pricing-groupband__title {
  font-weight: 700;
  font-size: 1.125rem;
  margin: 0 0 2px;
}

.kl-pricing-groupband__subtext {
  margin: 0;
  font-size: 0.9375rem;
}

.kl-pricing-groupband__button .button {
  white-space: nowrap;
}

@media screen and (max-width: 768px) {
  .kl-pricing-groupband {
    padding: 24px;
  }
}

/* ---- 4-up variant: 2x2 on tablet. Scoped to .kl-pricing--4up, which the
   module only emits when 4+ cards render — the live 3-card layout is
   deliberately untouched by these rules. ---- */

@media screen and (min-width: 769px) and (max-width: 1100px) {
  .kl-pricing--4up {
    flex-wrap: wrap;
    gap: 16px;
  }

  .kl-pricing--4up .kl-pricing__card {
    flex: 1 1 calc(50% - 8px);
  }

  .kl-pricing--4up .kl-pricing__card + .kl-pricing__card {
    margin-left: 0;
  }
}

/* ---- v2 presentation (scoped to the theme module's wrapper class so the
   live page's legacy pricing instance is untouched): tighter cards, button
   above the feature checklist, buttons aligned via flex column. ---- */

.kl-pricing-wrap--v2 .kl-pricing__card {
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
}

.kl-pricing-wrap--v2 .kl-pricing__description {
  flex: 1 1 auto;
}

.kl-pricing-wrap--v2 .kl-pricing hr {
  margin: 1.25rem 0;
}

.kl-pricing-wrap--v2 .kl-pricing__features {
  margin-bottom: 0;
}

.kl-pricing-wrap--v2 .kl-pricing-groupband {
  margin: 0 0 24px;
}

/* v2: details paragraph under the button (distinct class so it does NOT
   take the description's flex-grow — that would break button alignment) */
.kl-pricing-wrap--v2 .kl-pricing__details-below {
  margin: 0 0 1rem;
}

.kl-pricing-wrap--v2 .kl-pricing__details-below p {
  font-size: 0.875rem;
  margin: 0 0 0.75rem;
}

/* v2: group band styled as a slim member of the card family (same surface,
   border, radius and shadow as the cards) so it reads as a component, not
   stray text. The CTA carries the emphasis with its animated gradient border. */
.kl-pricing-wrap--v2 .kl-pricing-groupband {
  background-color: var(--neutral-50, #f6f6f5);
  border: 1px solid var(--neutral-300, #d8d8d8);
  border-radius: var(--radius-xl, 16px);
  box-shadow: 0 11px 30px rgba(0, 0, 0, 0.08);
  padding: 16px 24px;
  margin: 0 0 16px;
  justify-content: flex-start;
  gap: 32px;
}

.kl-pricing-wrap--v2 .kl-pricing-groupband__title {
  font-size: 1.0625rem;
}

.kl-pricing-wrap--v2 .kl-pricing-groupband__subtext {
  opacity: 0.7;
  font-size: 0.875rem;
}

/* v2: subgrid row alignment — every card shares one row skeleton
   (title / price / description / button / divider / details / features),
   so all seven rows align across cards regardless of copy length.
   Browsers without subgrid keep the flex-column fallback above. */
@supports (grid-template-rows: subgrid) {
  @media screen and (min-width: 769px) {
    .kl-pricing-wrap--v2 .kl-pricing {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }

    .kl-pricing-wrap--v2 .kl-pricing--4up {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .kl-pricing-wrap--v2 .kl-pricing__card {
      display: grid;
      grid-template-rows: subgrid;
      /* badge is absolutely positioned; icon is unused in v2 content —
         7 flow children per card keep rows in step */
      grid-row: span 7;
      align-content: start;
    }

    .kl-pricing-wrap--v2 .kl-pricing__card + .kl-pricing__card {
      margin-left: 0;
    }

    .kl-pricing-wrap--v2 .kl-pricing hr {
      align-self: center;
      width: 100%;
    }
  }

  @media screen and (min-width: 769px) and (max-width: 1100px) {
    .kl-pricing-wrap--v2 .kl-pricing--4up {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
}

.kl-pricing-wrap--v2 .kl-pricing__price {
  font-variant-numeric: tabular-nums;
}

.kl-pricing-wrap--v2 .kl-pricing-groupband__button .button {
  color: #fff;
  border: 2px solid transparent;
  background:
    linear-gradient(var(--neutral-900, #171717), var(--neutral-900, #171717)) padding-box,
    linear-gradient(120deg,
      var(--color-primary) 0%,
      rgba(214, 255, 75, 0.1) 25%,
      var(--color-primary) 50%,
      rgba(214, 255, 75, 0.1) 75%,
      var(--color-primary) 100%) border-box;
  background-size: auto, 300% 100%;
  background-position: 0 0, 0% 0;
  box-shadow: 0 0 14px rgba(182, 240, 30, 0.3);
  animation: kl-groupband-borderflow 5s linear infinite;
}

@keyframes kl-groupband-borderflow {
  to {
    background-position: 0 0, 300% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kl-pricing-wrap--v2 .kl-pricing-groupband__button .button {
    animation: none;
  }
}

/* v2: consistent CTA typography — form-connected plans render <button>,
   link/unconnected plans render <a>; normalise both to one size */
.kl-pricing-wrap--v2 .kl-pricing__button .button,
.kl-pricing-wrap--v2 .kl-pricing-groupband__button .button {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
}

.kl-pricing-wrap--v2 .kl-pricing__card .kl-pricing__button .button {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* v2: details footnote sits at the card bottom (last subgrid row) */
.kl-pricing-wrap--v2 .kl-pricing__details-below {
  margin: 0;
}

.kl-pricing-wrap--v2 .kl-pricing__details-below p {
  font-size: 0.875rem;
  margin: 0.5rem 0 0;
  opacity: 0.8;
}
/* ============================================================
   Tickets v2 pricing section (hardcoded in paw-tickets-v2.html)
   Design "D": spotlight Standard grid >=1100px, ledger rows below,
   dark group-booking row at every size.
   Namespaced .pawtix — deliberately independent from the legacy
   .kl-pricing module styles; only the form-switch classes
   (.kl-pricing, data-view, .kl-pricing-formview) are shared so
   js/components/_pricing-card.js and its analytics keep working.
   ============================================================ */

.pawtix .pawtix__view {
  /* neutralise legacy .kl-pricing flex/centering — this element only
     exists so the pricing JS finds and toggles the view */
  display: block;
  text-align: left;
}

/* form step panel: extra breathing room under the embedded form */
.pawtix .kl-pricing-formview__panel {
  padding: 2rem 2rem 4rem;
  margin-bottom: 2rem;
}

/* ---------- pricing <-> form view crossfade ---------- */
/* Both views share one grid cell so they fade in place. The switch is driven
   by the pricing JS toggling [hidden] (which we must NOT touch). Transitions
   are gated behind .is-ready (added by an inline script after first paint) so
   the pricing grid renders instantly on load — no fade, no LCP hit. Sequenced
   out-then-in (incoming waits for the outgoing) so the two dissimilar views
   never ghost through each other. */
.pawtix {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
}

.pawtix > [data-view] {
  grid-area: 1 / 1;
}

/* outgoing view: fade out immediately; allow-discrete holds display until done */
.pawtix.is-ready > [data-view] {
  transition: opacity 0.2s ease, display 0.2s allow-discrete;
}

.pawtix.is-ready > [data-view][hidden] {
  opacity: 0;
}

/* incoming view: hold at 0, then fade in only after the outgoing has cleared */
.pawtix.is-ready > [data-view]:not([hidden]) {
  opacity: 1;
  transition: opacity 0.25s ease 0.2s, display 0s;
}

@starting-style {
  .pawtix.is-ready > [data-view]:not([hidden]) { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pawtix.is-ready > [data-view],
  .pawtix.is-ready > [data-view]:not([hidden]) { transition: none; }
}

/* ---------- cards: shared skeleton ---------- */

.pawtix__card {
  --pawtix-lift: 0px;
  --pawtix-scale: 1;
  position: relative;
  background: var(--neutral-50, #f4f4f1);
  border: 1px solid var(--neutral-300, #dcdcd6);
  border-radius: var(--radius-xl, 14px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
  padding: 32px 24px 28px;
  cursor: pointer;
  transform: translateY(var(--pawtix-lift)) scale(var(--pawtix-scale));
  transition: box-shadow 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
}

.pawtix__card:hover {
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .pawtix__card { transition: none; }
}

.pawtix__title {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0;
}

.pawtix__price {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  margin: 0;
  line-height: 1.2;
}

/* module wrappers + rich-text inner tags must not re-size the price —
   the theme styles p/span/div elements directly, which beats inheritance */
.pawtix__price div,
.pawtix__price span,
.pawtix__price p {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  display: inline;
  margin: 0;
}

.pawtix__price s,
.pawtix__price span[style*="line-through"] {
  opacity: 0.45;
  font-weight: 500;
  font-size: 0.8em;
}

.pawtix__title div,
.pawtix__title span,
.pawtix__title p {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  display: inline;
  margin: 0;
}

.pawtix__desc {
  font-size: 0.85rem;
  color: var(--neutral-600, #5d5d55);
}

.pawtix__desc p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: inherit;
  margin: 0 0 0.7rem;
}
.pawtix__desc p:last-child { margin-bottom: 0; }

.pawtix__feats ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  font-size: 0.875rem;
  text-align: left;
}

.pawtix__feats li {
  padding-left: 26px;
  position: relative;
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0;
  text-wrap: balance;
}

.pawtix__feats li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: var(--color-primary, #d6f01e);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.5l2.2 2.2L11.5 6' stroke='%23171717' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 100% 100%;
}

.pawtix__cta .button {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.15;
  position: relative;
  overflow: hidden;
}

/* light streak that sweeps across the CTA when its card is hovered */
.pawtix__cta .button::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  pointer-events: none;
  opacity: 0;
}

@media (hover: hover) {
  .pawtix__card:hover .pawtix__cta .button::after {
    animation: pawtix-shine 0.85s ease forwards;
  }
}

@keyframes pawtix-shine {
  0% { left: -60%; opacity: 0; }
  15% { opacity: 1; }
  100% { left: 130%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pawtix__card:hover .pawtix__cta .button::after { animation: none; }
}

.pawtix__badge {
  background: var(--color-primary, #d6f01e);
  color: var(--neutral-900, #171717);
  font-size: 0.78rem;
  font-weight: 800;
  padding: 8px 16px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ---------- card flag: a filled strip across the card's top edge ----------
   Different job from .pawtix__badge. The badge is a floating pill that
   announces news about one card; the flag is a steer that says "choose this
   one", so it is built into the card rather than hovering over it.
   The negative margins cancel the card's own padding so the strip meets the
   border on three sides - they must track the card padding at each
   breakpoint (18px here, 24/32px from 1100px up). No margin-bottom needed:
   the card is a grid/flex container and its own gap spaces the strip. */

.pawtix__flag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: -18px -18px 0;
  padding: 8px 14px;
  border-radius: 10px 10px 0 0;
  background: var(--color-primary, #d6f01e);
  color: var(--neutral-900, #171717);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pawtix__flag::before {
  content: "";
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23171717' d='M8 0.8l1.9 4.4 4.8 0.4-3.6 3.1 1.1 4.7L8 11l-4.2 2.4 1.1-4.7L1.3 5.6l4.8-0.4z'/%3E%3C/svg%3E");
}

/* On the dark hero card, mirror what Dropbox does: a tinted strip with accent
   text, not a second block of solid lime competing with the lime CTA. */
.pawtix__card--hero .pawtix__flag {
  background: rgba(214, 240, 30, 0.15);
  color: var(--color-primary, #d6f01e);
}

.pawtix__card--hero .pawtix__flag::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23d6f01e' d='M8 0.8l1.9 4.4 4.8 0.4-3.6 3.1 1.1 4.7L8 11l-4.2 2.4 1.1-4.7L1.3 5.6l4.8-0.4z'/%3E%3C/svg%3E");
}

/* hero (Standard Pass) */
.pawtix__card--hero {
  background: var(--neutral-900, #171717);
  color: #fff;
  border-color: var(--neutral-900, #171717);
}

/* the theme colours h1-h6 dark directly — force white on dark surfaces */
.pawtix__card--hero .pawtix__title,
.pawtix__card--hero .pawtix__price {
  color: #fff;
}

.pawtix__card--hero .pawtix__desc { color: #c9c9c2; }
.pawtix__card--hero .pawtix__feats { border-color: #3a3a35; }

.pawtix__btn-lime.button {
  background-color: var(--color-primary, #d6f01e);
  border-color: var(--color-primary, #d6f01e);
  color: var(--neutral-900, #171717);
}

/* ---------- group booking footer (proposal-B style: light, centered) ---------- */

.pawtix__grouprow {
  margin-top: 32px;
  padding: 40px 0 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  text-align: center;
}

.pawtix__grouplead {
  font-weight: 800;
  font-size: 1.05rem;
}

.pawtix__groupsub {
  color: var(--neutral-600, #5d5d55);
  font-size: 0.95rem;
  margin-right: 12px;
}

.pawtix__glow.button {
  color: #fff;
  font-size: 1.05rem;
  padding: 18px 36px;
  border: 2px solid transparent;
  background:
    linear-gradient(var(--neutral-900, #171717), var(--neutral-900, #171717)) padding-box,
    linear-gradient(120deg,
      var(--color-primary, #d6f01e) 0%,
      rgba(214, 240, 30, 0.12) 30%,
      var(--color-primary, #d6f01e) 55%,
      rgba(214, 240, 30, 0.12) 80%,
      var(--color-primary, #d6f01e) 100%) border-box;
  background-size: auto, 300% 100%;
  background-position: 0 0, 0 0;
  box-shadow: 0 0 16px rgba(198, 232, 20, 0.35);
  animation: pawtix-glowflow 5s linear infinite;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

@keyframes pawtix-glowflow {
  to { background-position: 0 0, 300% 0; }
}

/* light streak that sweeps across the group-quote button every 3s */
.pawtix__glow.button::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  pointer-events: none;
  animation: pawtix-glow-shine 3s ease-in-out infinite;
}

/* sweep across in the first ~0.8s, then idle until the 3s loop repeats */
@keyframes pawtix-glow-shine {
  0% { left: -60%; opacity: 0; }
  4% { opacity: 1; }
  27% { left: 130%; opacity: 0; }
  100% { left: 130%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pawtix__glow.button { animation: none; }
  .pawtix__glow.button::after { animation: none; opacity: 0; }
}

/* ---------- >=1100px: proposal B spotlight grid ---------- */

@media screen and (min-width: 1100px) {
  .pawtix__grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr 1fr;
    gap: 14px;
    align-items: stretch;
  }

  .pawtix__grid--full {
    grid-template-columns: 1fr 1.15fr 1fr 1fr;
  }

  .pawtix__card {
    display: flex;
    flex-direction: column;
    gap: 18px;
    text-align: center;
  }

  .pawtix__cardtop {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .pawtix__desc { flex: 1 1 auto; }

  .pawtix__feats {
    border-top: 1px solid var(--neutral-300, #dcdcd6);
    padding-top: 18px;
  }

  .pawtix__card--hero {
    --pawtix-lift: -10px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
    padding-bottom: 28px;
  }

  .pawtix__badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .pawtix__flag {
    margin: -32px -24px 0;
    padding: 9px 16px;
    border-radius: 13px 13px 0 0;
    font-size: 0.75rem;
  }

  /* If a card ever carries both, the pill would land centred on top of the
     strip. Lift it clear of the card instead of hiding editor content. */
  .pawtix__card:has(.pawtix__flag) .pawtix__badge {
    transform: translate(-50%, -125%);
  }

  /* spotlight: hovering the grid shrinks the other cards while the
     hovered card lifts and scales up. lift is preserved via
     --pawtix-lift so the hero keeps its raised baseline. */
  @media (hover: hover) {
    .pawtix__grid:hover .pawtix__card {
      --pawtix-scale: 0.96;
    }

    .pawtix__grid:hover .pawtix__card:hover {
      --pawtix-scale: 1.04;
    }
  }
}

/* ---------- <1100px: proposal C ledger rows ---------- */

@media screen and (max-width: 1099px) {
  .pawtix__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .pawtix__card {
    display: grid;
    gap: 10px;
    padding: 18px 18px 16px;
    border-radius: 12px;
  }

  .pawtix__cardtop {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
  }

  .pawtix__price { font-size: 1.4rem; }

  .pawtix__badge {
    position: static;
    display: inline-block;
    font-size: 0.68rem;
    padding: 4px 10px;
    vertical-align: middle;
    /* The card is a grid at this width and the pill is one of its items, so
       without this it stretches to the full card width and reads as a bar
       rather than a pill. Applies to the hero discount badge too, which has
       never been seen at mobile size because it is switched off. */
    justify-self: start;
    margin-left: 0;
  }

  .pawtix__feats ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    font-size: 0.8rem;
  }

  .pawtix__card--hero { border: 2px solid var(--neutral-900, #171717); }

  .pawtix__cta .button { max-width: 340px; }

  .pawtix__grouprow {
    margin-top: 24px;
    flex-direction: column;
    gap: 8px;
  }

  .pawtix__grouprow .pawtix__glow.button { width: 100%; max-width: 340px; margin-top: 8px; }
}

@media screen and (max-width: 520px) {
  .pawtix__cta .button,
  .pawtix__grouprow .pawtix__glow.button { max-width: none; }
}
/**
 * Swiper 11.2.1
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2025 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: January 10, 2025
 */

 @font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide{transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:var(--swiper-navigation-top-offset,50%);width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next svg,.swiper-button-prev svg{width:100%;height:100%;object-fit:contain;transform-origin:center}.swiper-rtl .swiper-button-next svg,.swiper-rtl .swiper-button-prev svg{transform:rotate(180deg)}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset,10px);right:auto}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-lock{display:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom,8px);top:var(--swiper-pagination-top,auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius,50%);background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:var(--swiper-pagination-right,8px);left:var(--swiper-pagination-left,auto);top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,rgba(0,0,0,.25));position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:var(--swiper-pagination-progressbar-size,4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;touch-action:none;background:var(--swiper-scrollbar-bg-color,rgba(0,0,0,.1))}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:var(--swiper-scrollbar-sides-offset,1%);bottom:var(--swiper-scrollbar-bottom,4px);top:var(--swiper-scrollbar-top,auto);z-index:50;height:var(--swiper-scrollbar-size,4px);width:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;left:var(--swiper-scrollbar-left,auto);right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);z-index:50;width:var(--swiper-scrollbar-size,4px);height:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:var(--swiper-scrollbar-drag-bg-color,rgba(0,0,0,.5));border-radius:var(--swiper-scrollbar-border-radius,10px);left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move;touch-action:none}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active{pointer-events:auto}.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-cube .swiper-slide-next+.swiper-slide{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}
.testimonial-swiper {
  width:100%;
}

.testimonial-swiper .swiper-wrapper {

}

.testimonial-swiper .swiper-slide {
  width:33.333%;
}
.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__arrow{-ms-flex-align:center;align-items:center;background:#ccc;border:0;border-radius:50%;cursor:pointer;display:-ms-flexbox;display:flex;height:2em;-ms-flex-pack:center;justify-content:center;opacity:.7;padding:0;position:absolute;top:50%;transform:translateY(-50%);width:2em;z-index:1}.splide__arrow svg{fill:#000;height:1.2em;width:1.2em}.splide__arrow:hover:not(:disabled){opacity:.9}.splide__arrow:disabled{opacity:.3}.splide__arrow:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide.is-focus-in .splide__arrow:focus{outline:3px solid #0bf;outline-offset:3px}.splide__pagination{bottom:.5em;left:0;padding:0 1em;position:absolute;right:0;z-index:1}.splide__pagination__page{background:#ccc;border:0;border-radius:50%;display:inline-block;height:8px;margin:3px;opacity:.7;padding:0;position:relative;transition:transform .2s linear;width:8px}.splide__pagination__page.is-active{background:#fff;transform:scale(1.4);z-index:1}.splide__pagination__page:hover{cursor:pointer;opacity:.9}.splide__pagination__page:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__pagination__page:focus{outline:3px solid #0bf;outline-offset:3px}.splide__progress__bar{background:#ccc;height:3px}.splide__slide{-webkit-tap-highlight-color:rgba(0,0,0,0)}.splide__slide:focus{outline:0}@supports(outline-offset:-3px){.splide__slide:focus-visible{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide__slide:focus-visible{border:3px solid #0bf}}@supports(outline-offset:-3px){.splide.is-focus-in .splide__slide:focus{outline:3px solid #0bf;outline-offset:-3px}}@media screen and (-ms-high-contrast:none){.splide.is-focus-in .splide__slide:focus{border:3px solid #0bf}.splide.is-focus-in .splide__track>.splide__list>.splide__slide:focus{border-color:#0bf}}.splide__toggle{cursor:pointer}.splide__toggle:focus-visible{outline:3px solid #0bf;outline-offset:3px}.splide.is-focus-in .splide__toggle:focus{outline:3px solid #0bf;outline-offset:3px}.splide__track--nav>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer}.splide__track--nav>.splide__list>.splide__slide.is-active{border:3px solid #000}.splide__arrows--rtl .splide__arrow--prev{left:auto;right:1em}.splide__arrows--rtl .splide__arrow--prev svg{transform:scaleX(1)}.splide__arrows--rtl .splide__arrow--next{left:1em;right:auto}.splide__arrows--rtl .splide__arrow--next svg{transform:scaleX(-1)}.splide__arrows--ttb .splide__arrow{left:50%;transform:translate(-50%)}.splide__arrows--ttb .splide__arrow--prev{top:1em}.splide__arrows--ttb .splide__arrow--prev svg{transform:rotate(-90deg)}.splide__arrows--ttb .splide__arrow--next{bottom:1em;top:auto}.splide__arrows--ttb .splide__arrow--next svg{transform:rotate(90deg)}.splide__pagination--ttb{bottom:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;left:auto;padding:1em 0;right:.5em;top:0}

/* Editing any file included above is not enough on its own - HubSpot only
   recompiles this bundle when THIS file's contents change. Re-uploading it
   unchanged is a no-op and the partial's edit silently never ships. If you
   change an include and nothing moves live, make a real edit here too.

   Header spacing note: the promo ribbon's own styles are further down this
   file, but how much room the page leaves for it lives in _header.css as
   --event-header-offset. Anything sticky that sits below the header should use
   that offset, never --event-header on its own. */

/* Global pinch-zoom fix: touch-action: manipulation = pan-x + pan-y + pinch-zoom.
   Setting this on html means the browser compositor handles all three natively
   and will IGNORE any passive:false touchmove listener (Hotjar, HubSpot-injected
   scripts, Splide) that calls preventDefault() for these gestures.
   Using "manipulation" rather than "pan-y pinch-zoom" preserves pan-x so
   horizontal carousel swipes (handled by Splide JS) still work correctly. */
html {
  touch-action: manipulation;
}

/* Also explicitly set on Splide tracks: Splide registers passive:false touchmove
   listeners that call preventDefault() on its track element specifically. */
.splide__track {
  touch-action: pan-y pinch-zoom;
}

html {
  overflow-x: clip;
}

.main {
  width:100%;
  flex:1;
  margin-inline: auto;
}
html:not(.hs-inline-edit) .section-page-settings {
  display:none;
}

.extra-sponsors {
  display:none;
}

html:is(.hs-inline-edit) .extra-sponsors,
html[data-page="home"] [data-visible="home"] {
  display:grid;
}

html:is(.hs-inline-edit) .section-page-settings,
html:is(.hs-inline-edit) .event-panel,
html:is(.hs-inline-edit) .editor-panel {
  border: 1px dashed var(--neutral-400);
  border-bottom: 0px;
  padding: 3rem;
}

html:is(.hs-inline-edit) .event-panel:last-child {
  border: 1px dashed var(--neutral-400);
}

.section-page-settings h1 {
  margin:0;
  font-size:1rem;
}

html:is(.hs-inline-edit) .event-header {
  position:relative;
}

html:is(.hs-inline-edit) .card-collection {
  padding:2rem 0;
}

html:is(.hs-inline-edit) .page-details,
html:is(.hs-inline-edit) .workshop-speakers {
  display:none;
}

html:is(.hs-inline-edit) .workshop-collection {
  width:100%;
}

html:is(.hs-inline-edit) .page-media {
  width:100%;
  flex-direction:row;
  align-items: self-start;
  gap:1rem;
}

html:is(.hs-inline-edit) .workshop-logo {
  width:100%;
}

html:is(.hs-inline-edit) .speaker-page {
  display:none;
}

html:is(.hs-inline-edit) .main {
  margin-top:0;
  padding-top:1rem;
}
.page-media .speaker-title {
  display:none;
}

.workshop-speakers .speaker {
  display:flex;
  gap:.5rem;
  align-items:flex-start;
}

.speaker-body {
  margin-top:.5rem;
}

.page-wrapper {
  display:grid;
  grid-template-columns: 230px 1fr;
  gap:2rem;
  margin-bottom:2rem;
}

.workshop-speakers .speaker-body > * {
  font-size:.72rem;
  line-height: var(--lh-sm);
}

.workshop-speakers .speaker-media,
.page-media .workshop-speakers .speaker-img.placeholder {
  max-width:72px;
  flex: 1;
}

.speaker-body .workshop-speakers,
.page-media .speaker-body {
  flex:1;
}

.speakers-group-title {
  font-size: var(--fs-xs);
  font-weight:600;
  text-transform:uppercase;
}

.workshop-logo {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color:#fff;
  object-fit: contain;
  padding: .5rem;

}

.workshop-card {
  display: grid;
      align-items: center;
  grid-template-columns: max-content 1fr;
  margin:1rem 0 0;
}

.workshop-card > .workshop-logo {
  width:120px;
  padding:0;
}

.workshop-card > .workshop-logo img {
    width: 88%;
    max-height: 34px;
}

.page-media {
  order:1;
  width:230px;
 display:flex;
    flex-direction: column;
    gap: 2rem;
}

.page-media [data-workshop-speaker] .speaker-link {
  aspect-ratio:auto;
  margin-top:.25rem;
}

.speaker-page .page-media {
  width:230px;
}

.workshop {
  display:flex;
  gap:1.5rem;
}

.page-details {
  flex:1;
  order:2;
  display:flex;
  gap:1rem;
  flex-direction:column;
}

.page-details-body {
  padding:1rem 0 2rem;
}

[data-hs-cos-type="rich_text"] p,
[data-hs-cos-type="rich_text"] li,
.page-details-body p,
.page-details-body li {
  font-size: 1.1875rem;
  line-height: 1.47368;
}

.page-details-body strong,
.page-details-body b {
  font-weight:600;
}

.speaker-header {
  font-weight:600;
}

[data-section="home"] [data-hs-cos-type="rich_text"] h2 {
  font-size:var(--fs-display);
  line-height:var(--lh-sm);
}

[data-workshop-speaker] .speaker-media img {
  width:100%;
  height:auto;
  object-fit: cover;
  aspect-ratio:1/1;
}

.speaker-img.placeholder {
  width:100%;
  height:auto;
  background-color:#94a3b873;
  background-image:url(https://site.citywire.com/hubfs/raw_assets/public/cw-paw-2026/images/no-photo.svg);
  background-size: 96%;
    background-repeat: no-repeat;
    border-radius: 100%;
    background-position: center bottom;
  aspect-ratio:1/1;
}

[data-module="speaker-collection"] .speaker-label {
  font-size:var(--fs-sm);
}

.workshop-card-details p {
  font-size: var(--fs-xl);
    font-weight: 600;
        line-height: var(--lh-lg);
    text-wrap: balance;
  margin:.5rem 0;
  color:var(--neutral-800);
}
html {
  background-color: #fff;
}

/* two-column */
.main {
  display: grid;
  grid-template-columns: minmax(0,1fr) var(--aside);
  gap: var(--gap);
  max-width: calc(var(--max) - var(--gutter));
  padding: 3rem var(--gutter);
}

/* full row */
.main.row {
  display:flex;
  flex-direction:column;
  max-width:none;
  padding:0;
}

html:not(.hs-inline-edit):not([data-panels-loaded="true"]) .body-wrapper {
  opacity: 0;
  pointer-events: none;
}

html:not(.hs-inline-edit):not([data-panels-loaded="true"]) .hero-container {
  height: 0;
  overflow: hidden;
}

.hero-container {
  z-index:5;
  position:relative;
}

#sponsor-row {
  display:flex;
  align-items:center;
  position:relative;
  overflow-x:hidden;
}

.workshop-logo img {
  object-fit: contain;
  width: var(--workshop-logo-max-width, 72%);
  max-height: var(--workshop-logo-max-height, 48px);
  object-position: center center;
}

.page-media .workshop-logo img {
  width: var(--workshop-logo-max-width, 72%);
  max-height: var(--workshop-logo-max-height, 48px);
}


.workshop-logo.workshop-logo-portrait img {
  width: var(--workshop-logo-max-width, 48%);
  max-height: none;
}

.speaker-body a,
.workshop-card-details a{
  color:currentColor;
}

.speaker-body a:hover,
.workshop-card-details a:hover {
  text-decoration: none;
}

.speaker-container {
  display:flex;
  align-items:center;
  margin-bottom:.5rem;
}

.lead-section__inner {
  min-height:640px;
  padding-bottom: 4rem;
}

.lead-section__inner.lead-section__inner--no-media {
    min-height:auto;
}

.lead-section__header {
    padding-bottom: 1rem;
      position: relative;
    z-index: 3;
    mix-blend-mode: luminosity;
}

.lead-section__headline {
  font-size: var(--font-size-display);
    font-weight: 500;
    line-height: 112%;
    color: var(--neutral-500);
  letter-spacing:-.008em;
  max-width:16ch;
}

.lead-section__inner--no-media .lead-section__headline {
    max-width: none;
}

.lead-section__body {
  padding-bottom:2rem;
}

.lead-section__media-col {
    margin-top: -16rem;
    display: flex;
    justify-content: end;
}

.lead-section__media {
    max-width: 540px;
    position: absolute;
    height: 100%;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: flex-end;  
}

.title-marquee__headline {
  font-weight: 500;
  font-size: clamp(1.5rem, 6vw, 4rem);
  letter-spacing:-.008em;
  color: var(--neutral-500);
  text-transform:uppercase;
}

.title-marquee-wrapper {
  overflow: hidden;
  border-top:1px solid var(--neutral-400);
  border-bottom:1px solid var(--neutral-400);
  padding:.5rem 0;
}

.feat-slider__card {
  position:relative;
}

.feat-slider__image {
  object-fit: cover;
}

.feat-slider__content {
  position:absolute;
}

.feat-slider__slide {
  width:280px;
}

.cta-split__col {
  flex:1;
}

.feat-slider__image-placeholder {
  width:100%;
  height:100%;
  background-color:var(--neutral-200);
}

.tile-grid__tile .tile-grid__meta {
  position:absolute;
  display:flex;
  justify-content: flex-end;
    text-align: left;
    background-color: rgba(0, 0, 0, 0.2);
    background-image: linear-gradient(0deg, #0000003b, transparent);
    color: #fff;
  padding:1rem;
  height:100%;
  width:100%;
  flex-direction: column;
  opacity:0;
  transition:opacity .25s;
}

.tile-grid__tile:hover .tile-grid__meta {
  opacity:1;  
}

.tile-grid__name {
  line-height:1;
    margin-bottom:.5rem;
}

.tile-grid__job {
    margin-bottom:.32rem;
}

.tile-grid__job , .tile-grid__company {
  font-size:.8rem;
    line-height:1;
}

.tile-grid__tile {
padding: 0;
    width: 100%;
  overflow: hidden;
  position: relative;
  display:flex;
      align-items: end;
  text-align:center;
}

.tile-grid__empty {
  display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    background-color: var(--neutral-100);

}

.tile-modal {
  display:block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  z-index:5000;
  pointer-events:none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity .35s ease,
    visibility 0s linear .35s;
}

.tile-modal--open {
  pointer-events:auto;
  opacity: 1;
  visibility: visible;
  transition:
    opacity .35s ease,
    visibility 0s linear 0s;
}

.tile-modal:not(.tile-modal--open) .tile-modal__splide,
.tile-modal:not(.tile-modal--open) .tile-modal__splide .splide__track,
.tile-modal:not(.tile-modal--open) .tile-modal__splide .splide__list,
.tile-modal:not(.tile-modal--open) .tile-modal__splide .splide__slide,
.tile-modal:not(.tile-modal--open) .tile-modal__splide .splide__slide * {
  pointer-events: none !important;
}

.tile-modal--open .tile-modal__splide,
.tile-modal--open .tile-modal__splide .splide__track,
.tile-modal--open .tile-modal__splide .splide__list,
.tile-modal--open .tile-modal__splide .splide__slide,
.tile-modal--open .tile-modal__splide .splide__slide * {
  pointer-events: auto;
}

.tile-modal__header {
      padding: 1rem 2rem;
    font-size: larger;
    font-weight: bold;
    color: #fff;
}

.tile-modal__brand {
  display:flex;
  justify-content:center;
  width:100%;
  gap:1rem;
  text-align:center;
}

.tile-modal__dialog {
    height: 100%;
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
  position:relative;
}

.tile-modal__splide .splide__slide {
  width: min(960px, 88vw);
  max-height: 728px;
  height: 90vh;
  pointer-events: auto;
}

.tile-modal__media {
  padding:1rem;
}

.tile-modal__media:not([data-type="partner"]) img {
  border-radius:var(--radius-lg);
}

.tile-modal__close {
  position:absolute;
  top:1rem;
  right:1rem;
}

.agenda__stage-toggle,
.agenda__stage-toggle:hover,
.agenda__filter,
.agenda__filter:hover,
.agenda__view-btn,
.agenda__view-btn:hover {
  background-color: transparent;
  border-color: var(--neutral-300);
  color: var(--neutral-800);
  transform:none!important;
      outline: 0;
    outline-color: transparent;
  border-radius:0;
      box-shadow: none;
}

.agenda__content {
  display:grid;
  gap:2rem;
}

.agenda__stage-meta, .agenda__stage-title {
  margin:0;
}

.agenda__stage-header .agenda__stage-toggle {
  outline: 0;
}

.agenda__stage-meta {
  font-weight: 600;
  font-size: var(--fs-md);
}

.agenda__item-row {
  display: grid;
  grid-template-columns: 120px .32fr 1fr;
  gap: 1rem;
  padding: 2rem 0;
  align-items: start;
}

.agenda__item-row:not(:last-child) {
  border-bottom: 1px solid var(--neutral-300);
}

.agenda__item-row:is(:first-child) {
  padding-top:1rem;
}

.agenda__item-row:is(:last-child) {
  padding-bottom:1rem;
}

.agenda__item-time {
  color: #7586a0;
  white-space: nowrap;
}

.agenda__item-title {
  font-weight: 600;
  color: #374763;
}

.agenda__item-desc {
  color: #7d8a9c;
  line-height: 1.4;
  text-transform:none;
}

.agenda__item-desc p,
.agenda__item-desc li {
  font-size:var(--fs-md);
  line-height: 1.32;
}

.agenda__item-desc p {
  margin-bottom: 1rem;
}

.agenda__item-desc p:last-child,
.agenda__item-desc .tile-modal__agenda-body-speaker-name {
  margin-bottom: 0;
}

.agenda__item-desc li:not(:last-child) {
  margin-bottom:.5rem;
}

.agenda__item-desc ul {
  padding:.5rem 1.5rem;
}

.agenda__item-related {
  display: grid;
  gap: 1rem;
  margin-top:0;
}

.agenda__item-desc-copy {
  margin-bottom:1rem;
}

.agenda__item-partners-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
}

.agenda__item-speakers {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.agenda__item-speakers .agenda__item-speaker-card {
  margin-top: 0;
  flex: 0 1 auto;
  min-width: 0;
  width: fit-content;
}

.agenda__item-trigger {
  padding: 0;
  border: 0;
  background: transparent;
  background-color: transparent;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: opacity .15s ease;
}

.agenda__item-trigger:hover,
.agenda__item-trigger:focus,
.agenda__item-trigger:focus-visible,
.agenda__item-trigger:active {
  opacity: .8;
}

.agenda__item-partner-logo {
  color: inherit;
}

.agenda__item-partner-logo.tile-modal__sidebar-cta-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 4.75rem;
  width: 4.75rem;
  height: auto;
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: transparent;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 4px 10px rgba(0, 0, 0, .06);
  padding: .32rem;
}

.agenda__item-partner-logo.tile-modal__sidebar-cta-logo:hover,
.agenda__item-partner-logo.tile-modal__sidebar-cta-logo:focus,
.agenda__item-partner-logo.tile-modal__sidebar-cta-logo:focus-visible,
.agenda__item-partner-logo.tile-modal__sidebar-cta-logo:active {
  background-color: transparent;
  background: transparent;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 4px 10px rgba(0, 0, 0, .06);
}

.agenda__item-speaker-card {
  text-align: left;
  color: inherit;
  font: inherit;
}

.agenda__item-speaker-card.tile-modal__agenda-body-speaker-card {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin-top: .75rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  background-color: transparent;
  box-shadow: none;
  max-width: 100%;
  width: fit-content;
}

.agenda__item-speaker-card.tile-modal__agenda-body-speaker-card:hover,
.agenda__item-speaker-card.tile-modal__agenda-body-speaker-card:focus,
.agenda__item-speaker-card.tile-modal__agenda-body-speaker-card:focus-visible,
.agenda__item-speaker-card.tile-modal__agenda-body-speaker-card:active {
  background: transparent;
  background-color: transparent;
  box-shadow: none;
  outline: none;
  opacity: .8;
  transform: none;
}

.agenda__item-speaker-card:focus-visible,
.agenda__item-partner-logo:focus-visible {
  outline: 2px solid var(--green-800);
  outline-offset: 2px;
}

.agenda__item-speakers .tile-modal__agenda-body-speaker-company {
  margin: 0;
  font-size: .85rem;
  line-height: 1.2;
  color: var(--green-800);
  font-weight: 600;
}

.agenda__item-speakers .tile-modal__agenda-body-speaker-role {
  margin: 0;
  font-size: .72rem;
  line-height: 1.2;
  color: var(--neutral-600);
  text-wrap: balance;
}

/* -----------------------------------------
   MOBILE BEHAVIOUR
   ----------------------------------------- */
@media (max-width: 640px) {
  .agenda__item-row {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }

  .agenda__item-time {
    order: 1;
  }

  .agenda__item-title {
    order: 2;
  }

  .agenda__item-desc {
    order: 3;
  }
}

.agenda__view {
  display: none;
}

.agenda__view.is-active {
    display: grid;
    gap: 1rem;
}

.agenda__view-btn.is-active {
  font-weight: 600;
  text-decoration: underline;
}

.agenda__view-toggle {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
}

.agenda__view-toggle {
  display: none;
}

/* Default collapsed state */
.agenda__stage-toggle .icon-bg {
  fill: var(--neutral-700); /* dark background */
}

.agenda__stage-toggle .icon-arrow {
  fill: var(--neutral-100); /* light arrow */
  transform-origin: center;
  transition: transform 0.25s ease, fill 0.25s ease;
}

/* Expanded state */
.agenda__stage-toggle.is-open .icon-bg {
  fill: var(--neutral-100); /* light background */
}

.agenda__stage-toggle.is-open .icon-arrow {
  fill: var(--neutral-600); /* dark arrow */
  transform: rotate(180deg);
}

.agenda__stage-header {
  position:relative;
}

.agenda__stage {
  border:1px solid var(--border);
  border-left: 1.5rem solid var(--agenda-clr);
}

.agenda__stage-header .agenda__stage-toggle {
position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 1rem;
border-bottom: 1px solid var(--border);
    background-color: transparent;
}

.agenda__stage-body {
  padding:1rem 2rem;
}

.agenda__stage-body.is-collapsed {
  display:none;
}

.agenda__stage-heading {
  padding:1.5rem 1.5rem 0;
}

.agenda__stage-title {
font-size: 2.5rem;
    text-transform: uppercase;
    font-weight: 600;
  letter-spacing:-.008em;
}


.agenda__filters {
  display:grid;
  gap:1rem;
  top:calc(var(--event-header-offset) + 3rem);
  position:sticky;
}

.agenda__filter-indicator {
  width:1.25rem;
  aspect-ratio:1;
  border:2px solid var(--neutral-500);
display: flex;
    align-items: center;
    justify-content: center;
}

.is-active .agenda__filter-indicator {
  background-color: var(--agenda-clr);
  border:2px solid var(--agenda-clr);
}

.agenda__sidebar {
  width:100%;
  height: 100%;
    display: flex;
    align-items: flex-start;
}


.agenda__filter {
    justify-content: flex-start;
  box-shadow:none;
  border:0;
}

.agenda__filters .agenda__filter {
 box-shadow:none;
border: 0;
    padding: 0;
    gap: .5rem;
    line-height: 1;
}

.agenda__filter-indicator svg {
  width:1rem;
      aspect-ratio: 8 / 6;
  height:auto;
  color:#fff;
}

.agenda__stage.is-filtered-out {
  display: none;
}

.agenda__stage.is-filtered-out {
  display: none;
}

.agenda__empty-message {
  text-align: center;
  padding: 2rem 1rem;
  color: #64748B;
}

.contact-cta {
  background-color:#EFF3F6;
}

.contact-cta__inner {
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  padding:var(--gutter);
}

.contact-cta__copy h1,
.contact-cta__copy h2,
.contact-cta__copy h3 {
  font-size:var(--fs-h2);
  font-weight:600;
}

.contact-cta__people {
  padding:1rem;
}

.contact-cta__person {
  max-width:200px;
  flex:1;
}

.contact-cta__person-head {
  font-size:var(--font-size-h3);
  font-weight:800;
}

.contact-cta__person-details {
  font-size:var(--fs-md);
  font-weight:600;
  color:var(--neutral-500);
}

.contact-cta__person-details a {
  color:currentColor;
  text-decoration:underline;
}


.tile-modal__container {
   max-width: 720px;
    margin: 0 auto;
    height: 72vh;
    max-height: 800px;
    overflow: auto;
    background-color: #fff;
    padding: 2rem;
    border-radius: var(--radius-xl);
}

html.lenis-stopped {
  overflow: visible;
}

.tile-dir__media {
  z-index:2;
  position:relative;
}

.tile-dir__media img {
  width:100%;
}

[data-type="partner"] .tile-dir__media {
  position: sticky;
  top: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 1rem;
  aspect-ratio:1;
  width: 100%;
  height: auto;
  border-radius: var(--radius-xxl);
  box-shadow:0 0 0 1px rgba(0,0,0,.05), 0 4px 10px rgba(0,0,0,.06);
}

[data-type="partner"] .tile-dir__media img {
  max-height: 32%;
  max-width:72%;
  object-fit: contain;
}

[data-type="partner"] .tile-dir__media img.is-square {
  max-height:none;
  max-width:48%;
}

[data-type="partner"] .tile-dir__media img.is-portrait {
  max-width:32%;
  max-height: 72%;
}

.tile-dir__categories {
  list-style:none;
  margin:0;
  padding:0;
}

.tile-dir__category-item {
  list-style:none;
  margin:0;
  padding:0;
}

.tile-dir__groups {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.tile-dir__sidebar {
    position: sticky;
    top: calc(var(--event-header-offset) + 2rem);
}

.group-title {
  font-size:var(--fs-h4);
  margin-bottom: 0.5rem;
  color:var(--neutral-500);
}

.group-detail p,
.group-detail li {
  font-size:var(--fs-md);
}

@media (max-width:1280px){
  .footer-social a {
    width:120px;
  }
}

.text-muted {
  opacity:.8;
}

[data-workshop-speaker] .speaker-media,
[data-workshop-speaker] .speaker-link {
  aspect-ratio:1/1;
  width:100%;
  height:auto;
  display:flex;
  margin-bottom:1rem;
}

[data-workshop-speaker] .speaker-media, 
.speaker-img[data-aspect-ratio="square"],
[data-workshop-speaker] .speaker-link img {
  border-radius:100%;
  overflow:hidden;
  object-fit: cover;
      aspect-ratio: 1;
}

.page-details-body a strong {
  color:currentColor;
}

.section-label {
  padding: 0 0 1rem;  
}
[data-visible="mobile"] {
  display:none;
}

@media (max-width: 1280px) {
  .footer-container {
    padding: 0 2rem;
    flex-wrap: wrap;
    display:grid;
    grid-template-columns: repeat(3, 1fr);
  }
  
  .footer-brand {
    width:auto;
  }
  
  .footer-locations {
    width:auto;
    grid-template-columns: repeat(3, 1fr);
    grid-column: span 2;
    grid-row: span 2;
  }
  
  .footer-social {
    width:auto;
    justify-content: flex-start;
    align-items: flex-start;
  }
  
  .footer-locations {
    gap:1rem;
  }
}

@media (max-width: 991px) {
  
  body {
    --aside:18rem;
  }
  
  [data-visible="desktop"] {
    display:none;
  }
  
}

@media (max-width: 768px) {
  .footer-copy .u-flexgap {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .footer-copy .u-flexgap span {
    text-align:center;
  }
  
  .footer-copy .u-flexgap span:first-child {
    width:100%;
  }
  
}

.header-mobile-trigger {
width: auto;
    height: 100%;
    padding: 0;
    background-color: transparent;
}

.header-mobile-trigger:focus {
  background-color: transparent;
  border-color:transparent;
  outline:none;
}

.header-mobile-trigger svg {
  height: 100%;
    display: block;
    width: 1.75rem;
}

@media (max-width: 728px) {
  .site-menu {
    position: fixed;
    z-index: 60;
    height: auto;
    top: 64px;
    right: 0;
    background-color: #fff;
    color: var(--neutral-800);
  }
  .header-mobile-trigger {
    display:block;
  }
  #event-footer {
    padding-bottom:var(--mobile-bottom);
  }
  .main {
    display:block;
  }
  
  .footer-locations,
  .footer-social,
  .footer-brand {
    grid-column: 1 / -1;
  }
  
  .footer-sitemap {
    padding:2rem 0;
  }
  
  .site-menu {
    display:none;
  }
  
}

/* =========================================================
   TOKENS + THEMES + SITE RULES (CLEANED, ONE BLOCK)
   ========================================================= */

:root {
  /* -------------------------------------------------------
     Green scale
     ------------------------------------------------------- */
  --green-100: #f8ffd9;
  --green-200: #f0ffb3;
  --green-300: #e9ff8d;
  --green-400: #e1ff67;
  --green-500: #cdff01;
  --green-600: #aed901;
  --green-700: #90b201;
  --green-800: #718c01;
  --green-900: #526600;

  /* -------------------------------------------------------
     Neutral scale
     ------------------------------------------------------- */
  --neutral-50:  #f3f3f2;
  --neutral-100: #e9e9e7;
  --neutral-200: #d8d8d8; /* BODY BACKGROUND */
  --neutral-300: #c6c6c6;
  --neutral-400: #adadad;
  --neutral-500: #8f8f8f;
  --neutral-600: #6e6e6e;
  --neutral-700: #454545;
  --neutral-800: #2e2e2e;
  --neutral-900: #161616;

  /* -------------------------------------------------------
     Primary aliases
     ------------------------------------------------------- */
  --color-primary:       var(--green-500);
  --color-primary-hover: var(--green-400);
  --color-primary-press: var(--green-600);
  --color-on-primary:    #0b0b0b;

  /* -------------------------------------------------------
     Semantic tokens (LIGHT default)
     ------------------------------------------------------- */
  --color-bg:            var(--neutral-200);
  --color-surface:       var(--neutral-50);
  --color-surface-muted: var(--neutral-100);

  --color-border:        var(--neutral-400);
  --color-border-strong: var(--neutral-600);

  --color-text:          var(--neutral-900);
  --color-text-body: var(--neutral-800);
  --color-text-muted:    var(--neutral-600);

  --color-focus:         var(--neutral-500);

  /* Button tokens (neutral button) */
  --color-btn:           var(--neutral-700);
  --color-btn-hover:     var(--neutral-800);
  --color-btn-press:     var(--neutral-900);
  --color-btn-border:    var(--color-btn);
  --color-text-btn:      var(--neutral-50);

  --tile-modal-slide-width: 920px;
  --tile-modal-close-layer-width: calc(min(var(--tile-modal-slide-width), 88vw) + 2.64rem);
  --tile-modal-close-layer-height: calc(min(728px, 90vh) - 48px);

  /* “Legacy” aliases you’re using elsewhere */
  --body-text-color:     var(--color-text-body);
  --strong-color:        var(--color-text);
  --heading-text-color:  var(--color-text);
  --link-color:          var(--heading-text-color);
}

/* ---------------------------------------------------------
   Dark theme (override semantic tokens only)
   --------------------------------------------------------- */
[data-theme="dark"] {
  --color-bg:            var(--neutral-900);
  --color-surface:       var(--neutral-800);
  --color-surface-muted: var(--neutral-700);

  --color-border:        var(--neutral-700);
  --color-border-strong: var(--neutral-600);

  --color-text:          #ffffff;
  --color-text-body: var(--neutral-50);
  --color-text-muted:    var(--neutral-500);

  --color-focus:         var(--neutral-600);

  /* ✅ Neutral buttons in dark: lift for contrast */
  --color-btn:           var(--neutral-600);
  --color-btn-hover:     var(--neutral-500);
  --color-btn-press:     var(--neutral-700);
  --color-btn-border:    var(--color-btn);
  --color-text-btn:      #ffffff;
  
  --heading-text-color:var(--color-text);
  --body-text-color:var(--color-text-body);
  
  color:var(--color-text-body);
}

/* ---------------------------------------------------------
   Base rules
   --------------------------------------------------------- */
html {
  background-color: var(--color-bg);
}

.scrolling iframe,
.scrolling-fast .paw-info-hover,
.scrolling-fast [type="button"],
.scrolling-fast .tile-dir__tile {
  pointer-events:none;
}

.tile-dir__tile:hover {
  text-decoration:none;
}

/* Better focus handling (works in both themes) */
:focus {
  outline: auto;
  outline-color: var(--green-700);
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* If you still need the old :focus behavior, keep this:
[data-theme="dark"] :focus { outline-color: var(--neutral-600); }
*/

/* ---------------------------------------------------------
   Site rules
   --------------------------------------------------------- */

html:is(.hs-inline-edit) .main {
  padding-top:0;
}

.main {
  gap:0;
}

/* ✅ Primary CTA buttons */
.site-menu-item[data-register-origin="register"],
.site-menu-item-cta,
html:not([data-page="home"]) .site-menu-item-cta {
  background-color: var(--color-primary);
  color: #111;
}

.site-menu-item {
  padding-left:var(--space-xl);
  padding-right:var(--space-xl);
}

.site-menu-item-cta {
  margin-left:var(--space-md);
  padding-left:var(--space-xxl);
  padding-right:var(--space-xxl);
}

/* Optional: CTA hover/press (nice in both themes) */
.site-menu-item-cta:hover {
  background-color: var(--color-primary-hover);
}
.site-menu-item-cta:active {
  background-color: var(--color-primary-press);
}

.site-logo-header .cw-woosh {
  color: var(--color-primary);
}

.event-header-container {
  background-color: #000;
}

.event-header a:focus:not(:focus-visible),
.event-header button:focus:not(:focus-visible) {
  outline: none;
}

/* Active nav item — underline in brand primary colour */
.event-navbar .site-menu-item:not(.site-menu-item-cta).is-active {
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.lead-section__headline,
.title-marquee__headline {
  color: var(--heading-text-color);
}

.agenda__stage {
  background-color: #fff;
}

.footer-copy {
  background-color: #1a1a1a;
  color: var(--neutral-300);
  --heading-text-color: currentColor;
}

.contact-cta {
  background-color: var(--neutral-800);
  color: var(--neutral-50);
  --heading-text-color: currentColor;
}

.lead-partner-strip {
  background-color: var(--neutral-900);
  color: var(--neutral-400);
  border-bottom: 1px solid var(--neutral-800);
}

#event-footer {
  background-color: var(--neutral-900);
  color: var(--neutral-500);
  --heading-text-color: currentColor;
}

.footer-brand svg {
  color: var(--neutral-400);
}

.event-footer h3,
.event-footer strong,
.event-footer .strong,
.event-footer a {
  color: var(--neutral-400);
}

.footer-brand svg .how-swoosh {
  color: var(--color-primary);
}

.footer-social svg {
  display: block;
  width: 100%;
}

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */
.btn--paw {
  padding: 1.12rem 2.12rem;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  display: inline-flex;
  gap: 0.5rem;
  font-weight: 600;
  border: 1px solid var(--color-btn-border);
  background-color: var(--color-btn);
  border-radius: 24px;
  color: var(--color-text-btn);
  text-transform: uppercase;
  white-space: nowrap; /* replaces text-wrap-mode (not widely supported) */
}

.btn--paw:hover {
  background-color: var(--color-btn-hover);
  text-decoration:none;
}

.btn--paw:active {
  background-color: var(--color-btn-press);
}


.btn--paw-ghost {
  --color-btn:transparent;
  --color-btn-border:var(--color-text);
  --color-text-btn:var(--color-text);
}

.btn--paw-green {
  --color-btn:           var(--green-500);
  --color-btn-hover:     var(--green-400);
  --color-btn-press:     var(--green-600);
  --color-btn-border:    var(--green-500);
  --color-text-btn:      var(--green-900);
}

.u-banner .btn--paw-ghost {
  background-color: rgba(0, 0, 0, 0.4);
}

.btn--paw-ghost.btn--paw:hover {
  --color-btn-border:var(--color-btn-hover);
}

.btn--paw:active {
  --color-btn-border: var(--color-btn-press);
}

.cta-carousel-stats__figure {
  padding: 0;
  margin: 0;
}

.square-radius-xxl {
  border-radius:var(--radius-xxl);
  overflow:hidden;
  aspect-ratio:1;
}

.tile-grid__item {
  background-color:#fff;
}

[aria-pressed="false"] .agenda__filter-indicator svg {
  opacity:0;
}

[data-agenda-empty] .agenda__day-group {
  display: none;
}

.agenda__day-title {
  font-weight: 400;
}

.agenda__day-group:not([data-day-index="1"]) {
  margin-top:var(--space-xxl);
  padding-top:var(--space-xxl);
}

.cta-carousel-stats {
  margin-top:var(--space-xxl);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
}

.paw2026-home-lead {
  padding-top:4rem;
  padding-bottom:10rem;
}

.paw2026-home-key {
    padding: 20rem 0 20rem;
    margin-top: -18rem;
}

.u-bg-home-intro {
  background-color: var(--color-bg);
}

.u-bg-home-intro img {
    mix-blend-mode: multiply;
    position: absolute;
  object-position: top;
}

.paw2026-home-speakers {
  margin-top: -1.5rem;
}

.paw2026-home-agenda {
  padding:var(--space-xxl) 0;
    display: flex;
    align-items: center;
}

.card-icon img {
  max-width:156px;
}

.paw2026-travel .card-icon img {
  max-width:96px;
}

[data-dir="partners"] .tile-dir__groups {
  flex-direction: row;
    gap: 3rem;
    flex-wrap: wrap;
}

.paw-info-hover {
  pointer-events:auto;
}

.paw-info-hover-details {
  opacity:0;
  transition:opacity .5s;
  position:absolute;
  bottom:0;
  left:0;
  padding:var(--space-lg);
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  z-index:2;
  gap: .2rem;
}

.paw-info-hover-details::after {
  content:"";
  background-image: linear-gradient(
    45deg,
    var(--backdrop) 0%,
    transparent 50%
  );
  position:absolute;
  bottom:0;
  inset:0;
  left:0;
  width:100%;
  height:100%;
  z-index:-1;
}

.paw-info-hover:hover .paw-info-hover-details {
  opacity:1;
}

.tile-dir__meta {
  text-wrap:balance;
}

[data-type="partner"] .tile-dir__media {
  background-color:#fff;
}

.tile-dir__grid--isotope {
  width:100%;
  transition: height .5s;
  will-change: height;
}

.agenda__inner,
.dir-filter-on {
  display:grid;
  grid-template-columns: 24% 1fr;
  padding: var(--space-xxs) 0;
  gap:1rem;
}

.dir-filter-on .tile-dir__item {
  width:25%;
  padding: var(--space-xxs);
}

@media (max-width:1280px){
  .dir-filter-on .tile-dir__item {
    width:33.333%;
  }
}

@media (max-width:480px){
  .dir-filter-on .tile-dir__item {
    width:50%;
  }
}

.tile-dir__grid-wrapper {
  padding-bottom: var(--space-xxl);
}

.tile-dir__category-btn {
  font-size:var(--fs-xl);
  color:var(--color-text-muted);
  font-weight:600;
}

.tile-dir__category-btn.is-active {
  color: var(--color-text);
}

.hotelmap-shell {
  opacity: 0;
  transition: opacity 0.6s ease;
  position: relative;
}

/* HotelMap renders an inline Mapbox GL map (.hm_map_app / .mapboxgl-map), not an
   iframe, so the lock must target the map element to release page scroll while
   locked. iframe kept as a fallback in case the embed reverts. Only the MAP is
   locked (not the whole widget) so the hotel-list Book buttons stay interactive. */
.hotelmap-shell[data-map-lock="locked"] iframe,
.hotelmap-shell[data-map-lock="locked"] .hm_map_app {
  pointer-events: none !important;
}

.hotelmap-shell[data-map-lock="unlocked"] iframe,
.hotelmap-shell[data-map-lock="unlocked"] .hm_map_app {
  pointer-events: auto !important;
}

.hotelmap-shell__hint {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 3;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 0.875rem;
  line-height: 1;
  padding: 0.6rem 0.9rem;
  pointer-events: auto;
}

.hotelmap-shell[data-map-lock="unlocked"] .hotelmap-shell__hint {
  opacity: 0;
  visibility: hidden;
}

.header-mobile-nav {
  display:none;
}

.tile-modal__backdrop {
      background-color: #2828286e;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(19px);
    z-index: 0;
    opacity: 1;
    background-image: url("https://site.citywire.com/hubfs/raw_assets/public/cw-paw-2026/images/dust.png");
}

.tile-modal--open .tile-modal__backdrop {
  pointer-events:auto;
}

.tile-modal--speaker .tile-modal__backdrop,
.tile-modal--partner .tile-modal__backdrop {
  transition: opacity .32s ease;
  opacity: 0;
}

.tile-modal--speaker.tile-modal--open .tile-modal__backdrop,
.tile-modal--partner.tile-modal--open .tile-modal__backdrop {
  opacity: 1;
}

.tile-modal--speaker .tile-modal__body,
.tile-modal--partner .tile-modal__body {
  opacity: 0;
  transition:
    opacity .55s ease;
  will-change: opacity;
}

.tile-modal--speaker.tile-modal--body-reveal .tile-modal__body,
.tile-modal--partner.tile-modal--body-reveal .tile-modal__body {
  opacity: 1;
}

.tile-modal__nav {
    z-index: 2;
    position: absolute;
    width: 100%;
    max-width: 480px;
    top: 0;
    right: 0;
    height: 100%;
    background-color: var(--color-bg);
    pointer-events: auto;
}

.tile-modal__nav .site-menu {
  flex-direction:column;
  height:auto;
  padding-top:2rem;
}

.tile-modal__nav-content {
  position:relative;
  z-index:1;
  pointer-events: auto;
}

.tile-modal__close {
  z-index:20;
}

[data-version="paw-2026"] .tile-modal__nav .tile-modal__nav-content .site-menu-item {
  color: var(--color-text);
    padding: var(--space-sm) var(--space-md);
    font-size: var(--fs-h4);
      display: inline-flex;
    width: auto;
    align-self: baseline;
  opacity:1;
}

.tile-modal__nav-content {
      overflow-y: scroll;
    height: 100%;
  padding-bottom:2rem;
}

.tile-modal__splide {
  pointer-events:auto;
}

.tile-modal__nav .site-menu-item-cta {
  margin:var(--space-xs) var(--space-md);
  align-self: baseline;
}

@media (max-width:1280px){
  #main-hero iframe {
    pointer-events:none;
  }
  
  .event-navbar .site-menu:not(.header-mobile-nav) {
    display:none;
  }
  
  .header-mobile-nav {
    display:flex;
  }
  
  .header-mobile-nav > .site-menu-item-cta {
    margin:0;
  }
  
  .event-navbar {
    padding-right: 0;
  }
  
  .contact-cta__copy p,
  .btn--paw {
    font-size: var(--font-size-body-m);
  }
  
  .contact-cta__person-details {
    font-size: var(--font-size-body-m);
  }
  
  .contact-cta__inner {
    grid-template-columns: 1fr;
  }
}

.cta-carousel-stats__media {
  width:100%;
}

.cta-carousel-stats__slide {
  position:relative;
}

@media (max-width:1024px){
  .contact-cta__person-details {
    font-size: var(--font-size-body-s);
  }
}

@media (max-width:992px){
  .agenda__sidebar {
    padding-bottom:2rem;
  }
  
  .cta-split__inner  {
    flex-direction: column;
    align-items:stretch;
  } 
  
  .agenda__inner, .dir-filter-on {
    grid-template-columns: 1fr;
  }
  
  .tile-dir__sidebar {
    overflow-x: auto;
  }
  
  .tile-dir__categories {
    white-space: nowrap;
    flex-direction: row;
    gap: 1rem;
  }
}

@media (max-width:768px){
  .paw2026-home-lead .lead-section__actions {
    flex-direction:column;
            align-items: baseline;
  }
  
  .site-menu {
    position:relative;
    top:0;
    height:100%;
            background-color: transparent;
        color: currentColor;
    display:flex;
  }
}

.tile-modal__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0;
    background: transparent;
    width: 2rem;
    color:currentColor;
    pointer-events:auto;
}

.tile-modal__dialog .tile-modal__close {
  color:#000;
  z-index: 20;
  pointer-events: auto;
  background: transparent;
  border: 0;
  box-shadow: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.tile-modal__dialog .tile-modal__close:hover,
.tile-modal__dialog .tile-modal__close:focus,
.tile-modal__dialog .tile-modal__close:focus-visible,
.tile-modal__dialog .tile-modal__close:active {
  background: transparent;
  border: 0;
  box-shadow: none;
  outline: none;
}

.tile-modal--faqteam .tile-modal__close {
  top: .5rem;
  right: .5rem;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--neutral-800);
  background: transparent;
  border: 0;
  opacity: .82;
  z-index: 4;
  transition: opacity .2s ease;
}

.tile-modal--faqteam .tile-modal__close:hover,
.tile-modal--faqteam .tile-modal__close:focus,
.tile-modal--faqteam .tile-modal__close:active {
  background: transparent;
  border-color: transparent;
  opacity: 1;
}

.tile-modal--faqteam .tile-modal__body {
  position: relative;
  padding: 0;
  width: min(720px, 92vw);
  margin: 0 auto;
  background: #fff;
  border-radius: var(--radius-xl);
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  max-height: min(88dvh, 800px);
  height: 88dvh;
}

.tile-modal--faqteam .tile-modal__container {
  height: auto;
  max-height: none;
  overflow: visible;
  padding: 0;
  background: transparent;
  border-radius: 0;
  position: relative;
}

.tile-modal--faqteam .tile-modal__scroll-wrap {
  pointer-events: auto;
  max-height: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2rem;
}

.tile-modal--faqteam .tile-modal__close svg {
  width: 1.75rem;
  height: 1.75rem;
  mix-blend-mode: difference;
}

.tile-modal__close svg {
      display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
}

html.tile-modal-open,
html.tile-modal-open body {
  overflow: visible;
  overscroll-behavior: auto;
}

.header-mobile-trigger {
  padding:0 var(--space-xl);
}

/* ---- Safari-safe: ensure the carousel has width + a real height ---- */
.cta-carousel-stats__media.splide {
  width: 100%;
  /* Force a real box even before images load */
  aspect-ratio: 1 / 1;     /* modern + Safari OK */
  height: auto;
  min-width: 0;            /* important inside flex */
}

/* Make the internals inherit the square height */
.cta-carousel-stats__media.splide .splide__track,
.cta-carousel-stats__media.splide .splide__list,
.cta-carousel-stats__media.splide .splide__slide,
.cta-carousel-stats__media.splide .cta-carousel-stats__figure {
  height: 100%;
}

/* Ensure images actually fill the square */
.cta-carousel-stats__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


.cta-split__col--left { min-width: 0; }


/* FAQ summary layout */

.faq-team__list {
display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.faq-team__item {
    padding: var(--space-md) var(--space-xxl) var(--space-md) var(--space-xl);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}


.faq-team__q-text {
  font-size:var(--font-size-h3);
}

.faq-team__a {
font-size: var(--font-size-h4);
    padding-right: 6rem;
     color:var(--neutral-700);
  margin-top: var(--space-xxs);
  margin-bottom: var(--space-xxs);
}

.faq-team__a a {
  background-color:var(--green-600);
  text-decoration:underline;
}

.faq-team__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  list-style: none; /* helps some browsers */
    cursor:pointer;
}

.faq-team__item:not([open]):hover {
  background-color: var(--neutral-50);
}

.faq-team__item[open] .faq-team__q {
  font-weight:600;
  color:var(--green-900);
}


/* Remove default disclosure marker */
.faq-team__q::-webkit-details-marker { display: none; }
.faq-team__q::marker { content: ""; }

/* Keep icon from shrinking */
.faq-team__toggle-icon { flex: 0 0 auto; }

/* Rotate when open */
.faq-team__item .toggle-svg {
  display: block;
  width: 2rem;
  transition: transform .5s ease;
}

.faq-team__item .icon-bg {
  fill:var(--green-800);
  transition:fill .5s ease;
}

.faq-team__item .icon-arrow {
  fill:var(--green-100);
  transition:fill .5s ease;
}

.faq-team__item[open] .icon-bg {
  fill:var(--green-100);
}

.faq-team__item[open] .icon-arrow {
  fill:var(--green-800);
}

.faq-team__item[open] {
  background-color:var(--neutral-100);
}

.faq-team__item[open] .toggle-svg {
  transform: rotate(180deg);
}

details {
  border: 0;
}

summary {
  list-style: none;      /* removes marker in Firefox */
  border: 0;
  outline: none;
}

/* Remove marker (Chrome / Safari) */
summary::-webkit-details-marker {
  display: none;
}

/* Remove focus ring if browser adds one */
summary:focus {
  outline: none;
}

.tile-modal-sm .tile-modal__header {
  display:flex;
  justify-content:center;
  padding: 0 0 2rem;
}

.tile-modal__dialog {
  pointer-events:none;
}

.tile-modal--faqteam .tile-modal__body {
  pointer-events: auto;
}

.tile-modal--faqteam .tile-modal__close,
.tile-modal--faqteam .tile-modal__scroll-wrap {
  pointer-events: auto;
}

.faqteam__enquiry-row {
  display:grid;
      grid-template-columns: 1fr 1.5fr;
    gap: 1rem;
    align-items: center;
    text-wrap: balance;
    padding: var(--space-xxs) 0;
}

.faqteam__views {
  position: relative;
  overflow: hidden;
  transition: min-height .35s ease;
}

.faqteam {
  position: relative;
}

.faqteam__view {
  width: 100%;
  transition: transform .35s ease, opacity .25s ease;
}

.faqteam__view--list {
  position: relative;
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
}

.faqteam__view--form {
  position: absolute;
  inset: 0;
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  z-index: 1;
}

.faqteam__views.is-form-active .faqteam__view--list {
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  z-index: 1;
}

.faqteam__views.is-form-active .faqteam__view--form {
  position: relative;
  inset: auto;
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  z-index: 2;
}

.tile-modal--faqteam:not(.tile-modal--open) .faqteam__views.is-form-active .faqteam__view--form {
  pointer-events: none;
}

.faqteam__back {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--neutral-700);
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  margin: 0 0 var(--space-md);
}

.faqteam__view-controls {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-md);
}

.faqteam__title--form {
  margin-bottom: var(--space-sm);
}

.faqteam__form-note {
  margin-bottom: var(--space-md);
  color: var(--neutral-700);
}

.faqteam__form-inner {
  position: relative;
  padding: 0;
  min-height: 380px;
  background: var(--neutral-100);
  border-radius: var(--radius);
  margin-bottom: var(--space-xxs);
  overflow: hidden;
}

.faqteam__form-inner iframe {
  max-width: 100%;
}

.faqteam__form-skeleton {
  display: none;
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 45%, rgba(255,255,255,0) 100%),
    var(--neutral-200);
  background-size: 200% 100%, 100% 100%;
  animation: faqteamShimmer 1.15s linear infinite;
  pointer-events: none;
}

.faqteam__form-status {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: .6rem 1rem;
  border-radius: 999px;
  background: rgba(16, 16, 16, .78);
  color: #fff;
  font-size: var(--fs-sm);
  z-index: 3;
  pointer-events: none;
}

@keyframes faqteamShimmer {
  0% { background-position: 200% 0, 0 0; }
  100% { background-position: -200% 0, 0 0; }
}

.faqteam__view--form.is-loading {
  cursor: progress;
}

.faqteam__view--form.is-loading .faqteam__form-target {
  opacity: .35;
  pointer-events: none;
}

.faqteam__view--form.is-loading .faqteam__form-skeleton {
  display: block;
}

.faqteam__view--form.is-loading .faqteam__form-status {
  display: inline-flex;
}

.faqteam__form-success {
  margin: var(--space-sm) 0 0;
  padding: .625rem .875rem;
  border-radius: 999px;
  background: rgba(193, 244, 0, 0.18);
  color: var(--neutral-900);
  font-size: var(--fs-sm);
  line-height: 1.3;
}

.faqteam__form-success.is-pending {
  background: rgba(120, 134, 160, 0.18);
}

.faqteam__view--form.is-submitted .faqteam__form-inner,
.faqteam__view--form.is-submitted .faqteam__form-success {
  display: none;
}

.faqteam__submitted {
  margin-top: var(--space-md);
  background: var(--neutral-200);
  border-radius: var(--radius);
  padding: var(--space-xl);
}

.faqteam__submitted-title {
  margin: 0 0 var(--space-sm);
  font-size: var(--fs-h3);
  line-height: 1.2;
}

.faqteam__submitted-copy {
  margin: 0 0 var(--space-lg);
  color: var(--neutral-700);
}

.faqteam__submit-another {
  width: 100%;
}

.faqteam__close-form {
  margin-top: var(--space-sm);
}

.faqteam__meta {
  line-height:1;
}

.faqteam__subhead {
    font-size: var(--fs-h4);
  margin: var(--space-xl) 0;
}

.faqteam__name,
.faqteam__subhead {
    font-weight: bold;
}

.faqteam__name,
.faqteam__role,
.faqteam__email {
  margin:0;
}

.faqteam__role {
  text-wrap: balance;
}

.faqteam__name {
    font-size: var(--fs-h5);
  margin-top:var(--space-sm);
  margin-bottom:var(--space-xxs);
  line-height:1;
}

.faqteam__role,
.faqteam__email {
  font-size:var(--font-size-caption-s);
  line-height: 1.2;
}

.faqteam__avatar img {
      aspect-ratio: 1 / 1;
    border-radius: var(--radius-xxl);
}

.faqteam__avatar {
        aspect-ratio: 1 / 1;
border-radius: var(--radius-xxl);
    overflow: hidden;
}

@media (max-width: 767px) {
  .faqteam__enquiry-row {
    grid-template-columns: 1fr;
  }

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

  .faqteam__view--form {
    position: absolute;
    inset: 0;
  }

  .tile-modal--faqteam .tile-modal__close {
    top: .375rem;
    right: .375rem;
    width: 2.5rem;
    height: 2.5rem;
  }

  .tile-modal--faqteam .tile-modal__scroll-wrap {
    max-height: min(84svh, 720px);
    height: auto;
    padding: 1.5rem 1rem 1rem;
  }

  .tile-modal--faqteam .tile-modal__body {
    max-height: min(84svh, 720px);
    height: auto;
    padding: 0;
    overflow: hidden;
  }

}

@media (max-width: 767px) and (orientation: portrait) {
  .tile-modal--faqteam .tile-modal__dialog {
    justify-content: flex-end;
  }

  .tile-modal--faqteam .tile-modal__body {
    width: 100vw;
    max-width: none;
    margin: 0;
    height: 80svh;
    max-height: 80svh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    overflow: hidden;
  }

  .tile-modal--faqteam .tile-modal__scroll-wrap {
    height: 100%;
    max-height: 100%;
    padding: 1.25rem 1rem calc(1rem + env(safe-area-inset-bottom));
  }

  .tile-modal--faqteam .tile-modal__body {
    padding: 0;
  }
}


/* Allow text selection inside informational blocks */
.splide__slide .is-selectable,
.splide__slide .is-selectable * {
  user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  cursor: text;
}

.tile-modal__content {
  background-color:#fff;
  display: grid;
  height: 100%;
  border-radius: var(--radius-xl);
  overflow: auto;
  grid-template-columns: 0.5fr 1fr;
  gap: 2rem;
  padding: 2rem;
}

@media (max-width:1024px){
  .tile-modal__content {
    grid-template-columns: 0.64fr 1fr;
    gap: var(--radius-xl);
  }
}

@media (max-width:600px){
  .splide__arrows {
    opacity:0;
  }
  
  .tile-modal__splide .splide__slide {
        max-height: none;
  }
  
  .tile-modal__content {
    grid-template-columns: 1fr;
    gap: var(--radius-xl);
    /* The grid is height:100% and has collapsed to ONE column here, so photo and
       text become two auto rows. A grid's default align-content:normal behaves as
       stretch, which shares the spare height between them and drops the name block
       ~154px below the photo. Sizing the rows to their content fixes it.
       Scoped to this breakpoint on purpose: above 600px the same grid is two
       COLUMNS in one row, where stretching is what makes them fill the card. */
    align-content: start;
  }
  
  .tile-modal__text  {
    padding-top:0;
  }

  .faq-team__a {
    padding-right:1rem;
  }
}

.tile-modal__text {
  padding-right:2rem;
}

.tile-modal__text .tile-modal__title {
  margin-top: 0;
  margin-bottom: .25rem;
  font-family: var(--font-heading);
  font-size: clamp(2.1rem, 2.7vw, 3.15rem);
  line-height: .98;
  font-weight: 700;
  letter-spacing: -0.04em;
  text-wrap: balance;
  padding-bottom: 0;
}

.tile-modal__subtitle {
  padding-bottom: 0;
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.15vw, 2rem);
  line-height: 1.22;
  font-weight: 600;
  color: var(--neutral-900);
  text-wrap: balance;
}

.tile-modal__company {
  margin: 0;
  padding-bottom: 0;
  font-family: var(--font-body);
  font-size: clamp(0.98rem, 1vw, 1.1rem);
  line-height: 1.22;
  font-weight: 400;
  color: var(--neutral-800);
  text-wrap: balance;
}

.tile-modal__text .tile-modal__subtitle + .tile-modal__company {
  margin-top: -0.25rem;
}

.tile-modal__text .tile-modal__subtitle + .tile-modal__company,
.tile-modal__text .tile-modal__company + .tile-modal__body-text {
  margin-top: 0.6rem;
}

.tile-modal__body-text {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--neutral-800);
}

.tile-modal__text .tile-modal__body-text {
  padding-top: 0;
}

.tile-modal__empty-state {
  margin-top: 1rem;
  max-width: 32rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--neutral-500);
  box-shadow: none;
  text-align: left;
}

.tile-modal__empty-state-text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  text-wrap: balance;
}

.tile-modal__slide--speaker .tile-modal__text .tile-modal__title {
  font-size: 2.5rem;
  margin-bottom: .75rem;
}

.tile-modal__slide--speaker .tile-modal__text .tile-modal__company {
  margin-top: .15rem;
  font-size: clamp(1.15rem, 1.35vw, 1.45rem);
  line-height: 1.18;
  font-weight: 600;
  color: var(--neutral-800);
}

.tile-modal__slide--speaker .tile-modal__text .tile-modal__subtitle {
  font-size: clamp(.92rem, .95vw, 1.05rem);
  line-height: 1.15;
  font-weight: 600;
  margin-bottom: .25rem;
  color: var(--neutral-600);
}

.tile-modal__slide--partner .tile-modal__text .tile-modal__title {
  margin-top: 3rem;
  margin-bottom: 1rem;
  font-size: 2.5rem;
}

.tile-modal__slide--speaker .tile-modal__sidebar,
.tile-modal__slide--partner .tile-modal__sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-self: flex-start;
}

.tile-modal__slide--speaker .tile-modal__sidebar-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding:0rem 1rem;
}

.tile-modal__slide--speaker .tile-modal__media,
.tile-modal__slide--partner .tile-modal__media {
  position: static;
}

.tile-modal__media img {
  width:100%;
}

.tile-modal__sidebar-cta {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  background-color: transparent;
  box-shadow: none;
  text-align: left;
  color: var(--neutral-800);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.tile-modal__sidebar-cta:hover,
.tile-modal__sidebar-cta:focus,
.tile-modal__sidebar-cta:focus-visible,
.tile-modal__sidebar-cta:active {
  background: transparent;
  background-color: transparent;
  box-shadow: none;
  outline: none;
  color: var(--green-800);
}

.tile-modal__sidebar-cta-logo {
  flex: 0 0 4.75rem;
  width: 100%;
  height: auto;
  aspect-ratio:1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: transparent;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 4px 10px rgba(0, 0, 0, .06);
    padding: .32rem;
}

.tile-modal__sidebar-cta-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.tile-modal__sidebar-cta-img.is-square {
  object-fit: contain;
  object-position: center;
}

.tile-modal__sidebar-cta-img.is-portrait {
  object-fit: contain;
  object-position: center;
  padding: .2rem .35rem;
}

.tile-modal__sidebar-cta-img.is-landscape {
  object-fit: contain;
  object-position: center;
  padding: .25rem .15rem;
}

.tile-modal__sidebar-cta-copy {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
}

.tile-modal__sidebar-cta-kicker {
  font-size: .78rem;
  line-height: 1.1;
  font-weight: 500;
  color: var(--neutral-600);
}

.tile-modal__sidebar-cta-name {
  font-size: .98rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--neutral-800);
  text-decoration: underline;
  text-underline-offset: .15em;
}

.tile-modal__slide--speaker .tile-modal__img,
.tile-modal__slide--partner .tile-modal__img {
    position: static;
}

.tile-modal__slide--partner .tile-modal__related {
  padding:0;
}

.tile-modal__slide--partner .tile-modal__sidebar-stack--partner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0rem 1rem 1rem;
}

@media (max-width: 767px) {
  .tile-modal__slide--speaker .tile-modal__sidebar,
  .tile-modal__slide--partner .tile-modal__sidebar {
    position: static;
    top: auto;
  }

  .tile-modal__slide--speaker .tile-modal__sidebar-stack,
  .tile-modal__slide--partner .tile-modal__sidebar-stack--partner {
    padding-left: 0;
    padding-right: 0;
  }
}

.tile-modal__slide--partner .tile-modal__related-label {
  margin: 0 0 .75rem;
  font-size: .75rem;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--neutral-500);
}

.tile-modal__slide--partner .tile-modal__related-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .75rem;
}

.tile-modal__related-item {
  margin: 0;
}

.tile-modal__related-card {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  background-color: transparent;
  box-shadow: none;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.tile-modal__agenda {
  display: block;
}

.tile-modal__agenda[hidden] {
  display: none;
}

.tile-modal__agenda-label {
  margin: 0 0 .75rem;
  font-size: .75rem;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--neutral-500);
}

.tile-modal__agenda-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

.tile-modal__agenda-group {
  margin: 0;
}

.tile-modal__agenda-date {
  margin: 0 0 .5rem;
  font-size: .78rem;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--neutral-700);
}

.tile-modal__agenda-group-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .75rem;
}

.tile-modal__agenda-item {
  margin: 0;
}

.tile-modal__agenda-card {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding-left: .75rem;
  border-left: .35rem solid var(--green-500);
}

.tile-modal__agenda-time {
  margin: 0;
  font-size: .86rem;
  line-height: 1.2;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--neutral-600);
}

.tile-modal__agenda-title {
  margin: 0;
  font-size: .98rem;
  line-height: 1.25;
  font-weight: 600;
  color: var(--green-800);
}

.tile-modal__agenda-speaker {
  margin: .1rem 0 0;
  font-size: .85rem;
  line-height: 1.25;
  font-weight: 500;
  color: var(--neutral-600);
}

.tile-modal__agenda-body {
  display: grid;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

.tile-modal__agenda-body--speaker {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

.tile-modal__agenda-body--speaker .tile-modal__agenda-body {
  margin-bottom: 0rem;
}

.tile-modal__agenda-body--speaker .tile-modal__agenda-body-content {
  margin-bottom: 1rem;
}

.tile-modal__agenda-body-item {
  display: grid;
  gap: .35rem;
}

.tile-modal__agenda-body-head {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem .5rem;
  font-size: .95rem;
  line-height: 1.35;
}

.tile-modal__agenda-body-content {
  display: grid;
  gap: .35rem;
  padding-left: .85rem;
  border-left: .35rem solid var(--green-800);
}

.tile-modal__agenda-body-title {
  font-weight: 700;
  color: var(--green-800);
  line-height: 1.15;
}

.tile-modal__agenda-body-time,
.tile-modal__agenda-body-date {
  font-weight: 500;
  color: var(--neutral-600);
}

.tile-modal__agenda-body-sep {
  color: var(--neutral-400);
  font-weight: 500;
}

.tile-modal__agenda-body-speaker {
  margin: 0 0 .5rem;
  font-size: .95rem;
  line-height: 1.25;
  font-weight: 500;
  color: var(--neutral-600);
}

.tile-modal__agenda-body-desc {
  font-size: 1rem;
  line-height: 1.64;
  color: var(--neutral-800);
  margin-top:.25rem;
}

.tile-modal__agenda-body-speaker-card {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  margin-top: .75rem;
  padding: .9rem 1rem;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: var(--radius-lg);
  background: var(--neutral-50);
}

.tile-modal__agenda-body-speaker-card.is-repeated .tile-modal__agenda-body-speaker-media {
  flex-basis: 4rem;
  width: 4rem;
  height: 4rem;
}

.tile-modal__agenda-body-speaker-card.is-repeated {
  align-items: center;
}

.tile-modal__agenda-body-speaker-media {
  flex: 0 0 8rem;
  width: 8rem;
  height: 8rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--neutral-100);
}

.tile-modal__agenda-body-speaker-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tile-modal__agenda-body-speaker-copy {
  min-width: 0;
  display: grid;
  gap: .2rem;
  flex: 1;
}

.tile-modal__agenda-body-speaker-name {
  margin: 0;
  font-size: .9rem;
  line-height: 1.2;
  font-weight: 600;
  color: var(--neutral-900);
}

.tile-modal__agenda-body-speaker-role {
  margin: 0;
  font-size: .85rem;
  line-height: 1.2;
  color: var(--neutral-600);
}

.tile-modal__agenda-body-speaker-excerpt {
  margin: .25rem 0 0;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--neutral-700);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tile-modal__agenda-body-speaker-link {
  justify-self: start;
  padding: 0;
  border: 0;
  background: transparent;
  background-color: transparent;
  box-shadow: none;
  color: var(--green-800);
  font-size: .85rem;
  line-height: 1.2;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.tile-modal__agenda-body-speaker-link:hover,
.tile-modal__agenda-body-speaker-link:focus,
.tile-modal__agenda-body-speaker-link:focus-visible,
.tile-modal__agenda-body-speaker-link:active {
  background: transparent;
  background-color: transparent;
  box-shadow: none;
  outline: none;
  color: var(--green-800);
  text-decoration: underline;
  text-underline-offset: .15em;
}

.tile-modal__agenda-body-desc p {
  margin: 0;
}

.tile-modal__agenda-desc {
  margin: .15rem 0 0;
  font-size: .82rem;
  line-height: 1.4;
  color: var(--neutral-600);
}

.tile-modal__agenda-meta {
  margin: .1rem 0 0;
  font-size: .78rem;
  line-height: 1.35;
  color: var(--neutral-600);
}

.tile-modal__agenda-meta-label {
  font-weight: 600;
  color: var(--neutral-700);
}

.tile-modal__related-media {
  flex: 0 0 3.25rem;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--neutral-100);
}

.tile-modal__related-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tile-modal__related-copy {
  min-width: 0;
}

.tile-modal__related-name {
  margin: 0;
  font-size: 1rem;
  line-height: 1.2;
  font-weight: 600;
  color: var(--neutral-800);
}

.tile-modal__related-role,
.tile-modal__related-company {
  margin: .15rem 0 0;
  font-size: .85rem;
  line-height: 1.2;
  font-weight: 400;
  color: var(--neutral-600);
}

.tile-modal__related-action {
  margin-top: 0;
  color: var(--neutral-800);
  font-size: .9rem;
  line-height: 1.2;
  font-weight: 600;
}

.tile-modal__related-action:hover,
.tile-modal__related-action:focus,
.tile-modal__related-action:focus-visible,
.tile-modal__related-action:active {
  background: transparent;
  background-color: transparent;
  box-shadow: none;
  outline: none;
  color: var(--green-800);
  text-decoration: none;
}

.tile-modal__link-btn {
  padding: 0;
  border: 0;
  background: transparent;
  background-color: transparent;
  box-shadow: none;
  color: var(--neutral-800);
  cursor: pointer;
  text-align: left;
  appearance: none;
  -webkit-appearance: none;
}

.tile-modal__link-btn:hover,
.tile-modal__link-btn:focus,
.tile-modal__link-btn:focus-visible,
.tile-modal__link-btn:active {
  background: transparent;
  background-color: transparent;
  box-shadow: none;
  outline: none;
  color: var(--green-800);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.tile-modal__close-layer {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--tile-modal-close-layer-width);
  height: var(--tile-modal-close-layer-height);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 7;
}

.tile-modal__close-anchor {
  position: relative;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@media (min-width:601px){
  .tile-modal__splide .splide__arrows {
    z-index: 6;
  }

  .tile-modal__splide .splide__arrow {
    width: 3.5rem;
    height: 3.5rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: var(--green-500);
    color: #000;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
    opacity: 0.96;
    transition:
      transform 0.2s ease,
      opacity 0.2s ease,
      background-color 0.2s ease,
      box-shadow 0.2s ease;
  }

  .tile-modal__splide .splide__arrow:hover:not(:disabled),
  .tile-modal__splide .splide__arrow:focus,
  .tile-modal__splide .splide__arrow:focus-visible {
    transform: translateY(-50%) scale(1.04);
    opacity: 1;
    background: var(--green-400);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.36);
  }

  .tile-modal__splide .splide__arrow:focus,
  .tile-modal__splide .splide__arrow:focus-visible {
    outline: 2px solid var(--green-800) !important;
    outline-offset: 0 !important;
  }

  .tile-modal__splide .splide__arrow:disabled {
    opacity: 0.5;
  }

  .tile-modal__splide .splide__arrow svg {
    width: 1.45rem;
    height: 1.45rem;
    fill: currentColor;
  }

  .tile-modal__splide .splide__arrow--prev {
    left: calc(50% - min(var(--tile-modal-slide-width), 88vw) / 2 - 2.75rem);
  }

  .tile-modal__splide .splide__arrow--next {
    right: calc(50% - min(var(--tile-modal-slide-width), 88vw) / 2 - 2.75rem);
  }

}

@media (max-width:600px){
  .agenda__stage-title {
    font-size:2rem;
    word-break: normal;
    overflow-wrap: normal; /* aka word-wrap */
    hyphens: none;
  }
  
}

@media (max-width:480px){
  .agenda__stage {
    border-left-width:1rem;
  }
  
  .agenda__stage-title {
    font-size:1.5rem;
            padding-right: 2.5rem;
 }
  
  .agenda__stage-toggle-icon svg {
    width:2rem;
    
  }
}

.tile-modal__nav-content iframe {
  width:100%;
}

.contact-cta__avatar {
  background-size: cover;
  aspect-ratio: 1;
  width: 100%;
  border-radius: 1rem;
  margin-bottom: 1rem;
}


/* Ticket pricing/form parity block synced from citywire-theme-v2 */
.kl-pricing__badge {
  background-color: var(--color-primary);
  font-size: 1rem;
}


[data-template="ticket"] .lead-section__body {
 padding-bottom: 0;
    font-size: 1.2rem;
}


[data-template="ticket"] .kl-pricing__card {
  align-self:stretch;
}
  
.kl-pricing__price {
    color: var(--neutral-900);  
}

.kl-pricing__card >h4 {
  font-weight:bold;
      font-size: var(--font-size-h3);
    max-width: 11ch;
    margin: 1rem auto 1rem;
    line-height: 1.2;
 padding-bottom: 0;
}

.kl-pricing__card {
    margin-left: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-wrap: balance;
  padding-bottom: 2.5rem;
}

.kl-pricing__button button {
  width:100%;
  font-size: 1rem;
}

.kl-pricing__features {
  margin: 0 0 1.625rem;
}

.kl-pricing__button .button--outlined:hover {
  color: #fff;
}


.kl-pricing-formview__back {
  background-color:transparent;
  color:currentColor;
      padding: 0;
    opacity: .7;
    margin-bottom: 2rem;
}

.kl-pricing-formview__back:hover {
  background-color:transparent;
    color:currentColor;
  text-decoration:underline;
}

.kl-pricing-formview__title {
    font-size: var(--font-size-h2);
    text-align: center;
    margin: 0rem 0 2rem;
}

.kl-pricing-formview__panel {
padding: 2rem;
    background: var(--neutral-100);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
}

.kl-pricing-formview__panel [data-hsfc-id=Renderer] .hsfc-Form,
.kl-pricing-formview__panel [data-hs-cos-type="form"] {
background-color: #fff;
    display: block;
    border-radius: var(--radius);
  max-width: 860px;
    margin: 0 auto;
}

.kl-pricing-formview__panel [data-hs-cos-type="form"] {
  padding:2rem 4rem 3rem;
}

.kl-pricing-formview__panel .hs-button {
    background-color: var(--btn-bg);
    border: var(--btn-bg);
    border-radius: var(--btn-radius);
    color: var(--btn-fg);
    padding: var(--btn-padding-vertical) var(--btn-padding-horizontal);
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: bold;
    display: inline-block;
    width: auto;
    height: auto;
    margin: 0;
    cursor: pointer;
    line-height: 1.1;
    white-space: normal;
    word-break: break-word;
    text-align: center;
    text-decoration: none;
    position: relative;
}

.kl-pricing-formview__panel .hs-button:hover {
background-color: var(--btn-hover-bg);
    border-color: var(--btn-hover-bg);
    color: var(--btn-hover-fg);
    text-decoration: none;
    transform: scale(1.05);
      outline-color: var(--btn-bg);
}

@media (max-width:600px){
  .kl-pricing-formview__panel {
    background-color:#fff;
  }
  
  .kl-pricing-wrap {
    --hsf-default-background__padding:1rem;
  }
  
  .kl-pricing-formview__panel [data-hs-cos-type="form"] {
    padding: 1rem 1rem 1rem;
  }
  .listing_hero-v01-row-0-padding {
    padding:0;
  }
  
  .kl-pricing-formview__panel {
    padding-left:0;
    padding-right:0;
  }
  
  .kl-pricing-formview__title {
    margin:0;
    font-size:var(--font-size-h1);
  }
  
  .kl-pricing-wrap [data-hsfc-id=Renderer] .hsfc-Row {
        display: flex;
    flex-direction: column;
  }
}

/* Temporary promo test: gated by ?promo=true in 2026-paw.js */
.promo-ribbon[hidden],
.promo-modal[hidden] {
  display: none !important;
}

.promo-ribbon {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 501;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 2.75rem;
  padding: 0.6rem var(--gutter);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0;
  box-shadow: 0 0.85rem 1.35rem rgba(0, 0, 0, 0.22);
  outline:0;
}

.promo-ribbon:hover {
  color: var(--color-on-primary);
  text-decoration: none;
  background: var(--color-primary-hover);
}

.promo-ribbon__label,
.promo-ribbon__cta {
  line-height: 1.2;
}

.promo-ribbon__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.75rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.75rem;
  white-space: nowrap;
}

.promo-ribbon__divider {
  flex-shrink: 0;
  opacity: 0.45;
}

.promo-ribbon__ticker {
  overflow: hidden;
  /* Wide enough for a ~60 character message to be readable in one glance
     instead of arriving a fragment at a time; flex-shrink keeps it safe when
     the label or CTA is longer. Only applies above 1280px - the ticker is
     hidden below that, where it cannot animate. */
  max-width: 36rem;
  flex: 0 1 36rem;
  font-weight: 600;
}

.promo-ribbon__ticker-track {
  display: inline-flex;
  align-items: center;
  gap: 1.25rem;
  white-space: nowrap;
  animation: promo-ticker 16s linear infinite;
}

.promo-ribbon__ticker-sep {
  opacity: 0.45;
}

@keyframes promo-ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.promo-ribbon:hover .promo-ribbon__ticker-track,
.promo-ribbon:focus-visible .promo-ribbon__ticker-track {
  animation-play-state: paused;
}

.promo-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
}

.promo-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
}

.promo-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 34rem);
  padding: clamp(2rem, 5vw, 3.25rem);
  border-radius: var(--radius-lg);
  background: var(--neutral-50);
  color: var(--neutral-900);
  text-align: center;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.36);
}

.promo-modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: currentColor;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

.promo-modal__close:hover {
  background: var(--neutral-400);
}

.promo-modal__eyebrow {
  margin: 0 0 0.75rem;
  color: var(--neutral-700);
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
}

.promo-modal__title {
  margin: 0;
  color: var(--neutral-900);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
}

.promo-modal__desc {
  margin: 1rem auto 1.5rem;
  max-width: 30rem;
  color: var(--neutral-700);
  font-size: 1rem;
  line-height: 1.5;
  text-wrap: balance;
}

.promo-modal__cta {
  display: inline-flex;
  text-decoration: none;
}

@media (max-width: 600px) {
  .promo-ribbon {
    flex-direction: column;
    gap: 0.35rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 0.9rem;
  }

  .promo-ribbon__ticker,
  .promo-ribbon__divider {
    display: none;
  }

  /* The sticky header already shows a lime GET TICKETS directly above this
     bar, so the pill was the same call to action twice in a row. The whole
     ribbon is a link, so tapping the bar still goes to the tickets page. */
  .promo-ribbon__cta {
    display: none;
  }

  .promo-modal__dialog {
    padding: 2.5rem 1.25rem 1.5rem;
  }
}

@media (max-width: 1280px) {
  /* Remove compositor layer for closed modals on mobile — display:none takes
     the element out of the render tree entirely, eliminating GPU memory usage. */
  .tile-modal {
    transition: none;
  }
  .tile-modal:not(.tile-modal--open) {
    display: none;
  }

  /* Scroll lock: override the desktop overflow:visible rule.
     overflow:hidden on both html and body locks the scroll position in place on
     modern iOS/Android without resetting it (no position:fixed needed). */
  html.tile-modal-open,
  html.tile-modal-open body {
    overflow: hidden;
    overscroll-behavior: none;
  }

  .tile-modal__backdrop {
    background-color: rgba(18, 18, 18, 0.72);
    background-image: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .tile-modal--speaker .tile-modal__backdrop,
  .tile-modal--partner .tile-modal__backdrop {
    opacity: 1;
    transition: none;
  }

  .tile-modal--speaker .tile-modal__body,
  .tile-modal--partner .tile-modal__body {
    opacity: 1;
    transition: none;
    will-change: auto;
  }

  .faqteam__views,
  .faqteam__view {
    transition: none;
  }

  .promo-ribbon__ticker-track {
    animation: none;
    transform: none;
  }

  /* The track is frozen at these widths, and the window is only 24rem, so a
     message longer than that would sit permanently cut off mid-word. Drop the
     ticker entirely below the animating breakpoint - the headline carries the
     message and the CTA carries the action. */
  .promo-ribbon__ticker,
  .promo-ribbon__divider {
    display: none;
  }
}

.ceros-mobile-hero-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: clamp(1.5rem, 7vw, 2.75rem) var(--gutter);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.38) 38%, rgba(0, 0, 0, 0.88)),
    url("https://site.citywire.com/hubfs/image-4.png") center / cover no-repeat;
  color: #fff;
}

.ceros-mobile-hero-fallback__inner {
  width: 100%;
  max-width: 26rem;
}

.ceros-mobile-hero-fallback__eyebrow {
  margin: 0 0 0.5rem;
  color: var(--color-primary);
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
}

.ceros-mobile-hero-fallback__title {
  margin: 0;
  color: #fff;
  font-size: clamp(2.2rem, 10.5vw, 3.5rem);
  line-height: 0.95;
}

.ceros-mobile-hero-fallback__details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1.2rem 0 1.4rem;
}

.ceros-mobile-hero-fallback__details div {
  min-width: 0;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.34);
}

.ceros-mobile-hero-fallback__details dt {
  margin: 0 0 0.25rem;
  color: var(--color-primary);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.ceros-mobile-hero-fallback__details dd {
  margin: 0;
  color: #fff;
  font-size: clamp(1rem, 4.7vw, 1.35rem);
  font-weight: 700;
  line-height: 1.1;
}

.ceros-mobile-hero-fallback__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem 0.9rem;
  text-align: center;
}

.ceros-mobile-hero-fallback__stat {
  min-width: 0;
}

.ceros-mobile-hero-fallback__stat--wide {
  grid-column: 1 / -1;
}

.ceros-mobile-hero-fallback__stat strong {
  display: block;
  color: var(--color-primary);
  font-size: clamp(1.45rem, 6.5vw, 2rem);
  font-weight: 900;
  line-height: 1;
}

.ceros-mobile-hero-fallback__stat span {
  display: block;
  margin-top: 0.22rem;
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(0.75rem, 3.4vw, 0.95rem);
  font-weight: 500;
  line-height: 1.15;
  text-transform: uppercase;
}

/* =========================================================
   MOBILE: speaker + agenda rows scroll natively (<=1280px)
   Splide is NOT mounted at these widths (see paw-router.js).

   Why native rather than a JS carousel: Splide binds passive:false
   touchmove listeners and calls preventDefault(), which is what blocks
   native pinch zoom and crashes mobile Safari. A scroll-snap strip has no
   JS touch handling at all, so that whole class of bug cannot happen here.
   It also gives real iOS momentum, keeps the browser's own lazy loading
   working as you scroll, and removes the pagination - which was drawing one
   bullet per speaker, 55 of them on a phone.

   NOTE the touch-action override. The global .splide__track rule above sets
   "pan-y pinch-zoom", which tells the browser NOT to pan horizontally. Left
   in place the strip would refuse to move under a finger while still
   scrolling fine from devtools, because scrollLeft bypasses touch-action.
   ========================================================= */
@media (max-width: 1280px) {
  /* Splide's vendor CSS ships ".splide{visibility:hidden}" and only reveals it
     again via .is-initialized / .is-rendered, which the library adds on mount.
     We deliberately do not mount here, so without this the whole row is
     invisible - and it measures perfectly while being invisible, because
     getBoundingClientRect() still returns boxes for visibility:hidden. */
  .feat-slider.splide,
  .cta-carousel-stats__media.splide {
    visibility: visible;
  }

  .feat-slider.splide .splide__track,
  .cta-carousel-stats__media.splide .splide__track {
    touch-action: auto;              /* undo the global pan-y pinch-zoom */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 1rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .feat-slider.splide .splide__track::-webkit-scrollbar,
  .cta-carousel-stats__media.splide .splide__track::-webkit-scrollbar {
    display: none;
  }

  .feat-slider.splide .splide__list,
  .cta-carousel-stats__media.splide .splide__list {
    display: flex;
    flex-direction: row;
    gap: 12px;
    width: auto;
    transform: none;
  }

  /* The next card's preview is the card being narrower than the viewport -
     78% leaves roughly 74px of the following card showing. Do NOT try to do
     this with padding on .splide__list: the Splide vendor stylesheet sets
     "padding:0!important" there, so it silently loses. Gutters go on the end
     slides as margins, which the vendor leaves alone. */
  .feat-slider.splide .splide__slide,
  .cta-carousel-stats__media.splide .splide__slide {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }

  /* Line the first speaker card up with the section heading (15px), and give
     the last card the same breathing room at the end of the scroll. */
  .feat-slider.splide .splide__slide:first-child {
    margin-left: 1rem;
  }

  .feat-slider.splide .splide__slide:last-child,
  .cta-carousel-stats__media.splide .splide__slide:last-child {
    margin-right: 1rem;
  }

  /* Unmounted Splide never creates these, but a mounted-then-resized page can
     leave them behind. */
  .feat-slider.splide .splide__pagination,
  .feat-slider.splide .splide__arrows,
  .cta-carousel-stats__media.splide .splide__pagination,
  .cta-carousel-stats__media.splide .splide__arrows {
    display: none;
  }
}