/* =========================================================================
   ASAP — New Homepage Content Blocks
   Add-on stylesheet — load ALONGSIDE the existing asap-custom-styles.css,
   do not replace it.

   Every selector below is namespaced with "asap-" so nothing here can
   collide with NoviAMS/Bootstrap theme classes or with the existing
   asap-custom-styles.css. See asap-blocks-README.md for the full conflict
   audit.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* -------------------------------------------------------------------------
   1. Tokens
   Reuses the site's existing :root variables where the value already
   matches 1:1 (--teal, --aqua, --primary-color, --secondary-color,
   --tertiary-color, --highlight-orange, --light-gray, --white-color), so
   colors stay in sync with the rest of the site automatically. Anything
   without a sitewide equivalent gets its own --asap- prefixed token with a
   hard-coded fallback, so this file also renders correctly on its own
   (e.g. in preview.html) even without asap-custom-styles.css loaded.
   ------------------------------------------------------------------------- */
:root{
  --asap-navy: var(--primary-color, #1a1c40);
  --asap-navy-deep: #0c1230;
  --asap-navy-2: #12143a;
  --asap-tert: var(--tertiary-color, #00b8c3);
  --asap-orange: var(--highlight-orange, #ff7840);
  --asap-orange-2: var(--secondary-color, #ff6c27);
  --asap-light: var(--light-gray, #eef6f5);
  --asap-ink: #12143a;
  --asap-muted: #5a5f7e;
  --asap-line: #e6eef0;
  --asap-white: var(--white-color, #fff);
  --asap-sans: "Poppins", system-ui, sans-serif;
  --asap-body: "Inter", system-ui, sans-serif;
  /* --teal and --aqua already exist on the live site with these exact
     values, so they are used directly (var(--teal), var(--aqua)) below
     instead of being redeclared. Fallbacks are supplied at each use site
     for the standalone preview. */
}

/* -------------------------------------------------------------------------
   2. Compatibility fixes
   asap-custom-styles.css applies several sitewide, tag-level rules (some
   !important) that were written for NoviAMS's own theme markup. Left
   alone, they bleed into these new blocks. Each fix below names the
   sitewide rule it counteracts — see asap-blocks-README.md for the full
   explanation.
   ------------------------------------------------------------------------- */

/* Sitewide: h1,h2,h3,h4,h5{color:var(--dark-blue) !important}
   The hero title sits on a dark photo/scrim and must stay white. Only an
   !important of equal-or-higher specificity can beat that rule. */
/* Doubled class (not a typo) — raises specificity above
   ".single-region h1,h2,...{color:var(--dark-blue)!important}", which the
   hero's <h2> title picks up whenever it's placed inside Novi's
   .single-region wrapper (confirmed on the homepage: #about-association is
   .section.single-region). A plain single-class rule loses to that
   ancestor+tag selector since both are !important. */
.asap-hero__title.asap-hero__title{ color:#fff !important; }

/* Sitewide: h1,h2,h3,h4,h5{margin-top:60px}
   Not !important, but nothing in the original design set a margin-top on
   these headings, so the 60px was silently inheriting through. Zeroing it
   here keeps cards and section headers at their intended spacing. */
.asap-icon-card h3,
.asap-media-card h3,
.asap-sec-title{ margin-top:0; }

/* Sitewide: ul,ol{margin-bottom:14px !important}
   Adds an unwanted gap under the feature-card list and the news list;
   needs !important to win against another !important rule. */
.asap-icon-card ul,
.asap-news__list{ margin-bottom:0 !important; }

/* Sitewide: blockquote{margin:40px 0;padding:0 0 0 40px;
   border-left:5px solid var(--secondary-color)}
   The pull-quote block is centered, white-on-navy, with no border/indent
   by design — these sitewide defaults must be zeroed back out. */
.asap-quote blockquote{ margin:0; padding:0; border-left:0; }

/* Sitewide: a:hover{text-decoration:underline} (not !important, but its
   a:hover specificity still beats a plain .btn/.link class at rest state).
   Keeps buttons and card links from gaining an underline on hover. */
.asap-btn:hover,
.asap-hero__btn:hover,
.asap-media-card__link,
.asap-media-card__link:hover,
.asap-playlist__item:hover{ text-decoration:none; }

/* Sitewide: h1,h2,h3,h4,h5{color:var(--dark-blue) !important}
   Without this, the news-title hover color-shift (navy -> lighter blue)
   is silently blocked by the sitewide !important on h3 color. */
.asap-news__link:hover .asap-news__title{ color:#2E6E9C !important; }

/* Sitewide: a{color:var(--tertiary-color)} / a:hover{color:var(--tertiary-color)}
   Every button below is an <a>. None of their :hover rules originally set
   color explicitly, so on hover the sitewide a:hover rule (element+pseudo-
   class beats a plain single-class rule) won a teal text color nobody
   wanted — QA'd as "weird teal" on the hero/news buttons, and as an
   inconsistency in Who We Are where .asap-btn--ghost:hover happened to
   already set color (no leak) right next to .asap-btn--navy:hover, which
   didn't (leaked). Fixed by giving every button's :hover state its own
   explicit color — see each rule below. */

/* Sitewide: p has some margin-bottom rule (from Novi's base theme, not
   visible in this override file) that silently wins over a plain single-
   class margin-bottom — QA'd as "no padding above the buttons" in Who We
   Are and Latest News, since both sit right after a <p>. Needs !important
   to win; applied to every <p>-based lead/copy element in this file for
   consistency, not just the two reported. */
.asap-media-text__p{ margin-bottom:26px !important; }
.asap-news__lead{ margin-bottom:24px !important; }
.asap-video-list__lead{ margin-bottom:22px !important; }
.asap-cta__box p{ margin-bottom:30px !important; }
.asap-media-card p{ margin-bottom:16px !important; }
.asap-icon-cards__head p{ margin-bottom:0 !important; }

/* Template compatibility: full-bleed sections.
   Originally tried the calc(50% - 50vw) breakout asap-custom-styles.css
   uses elsewhere (.header-ribbon, .secondary-call-out) — but verified live
   on /content-block-suite that it doesn't hold up here: that trick only
   works when the element's *immediate* parent is itself centered in the
   viewport. On this template, Novi wraps injected HTML several levels deep
   (novi-content-wrapper > .well.box.inner-content > .o-column > .row),
   each level adding its own Bootstrap-style padding/negative margins, so
   "50%" no longer lines up with the true viewport center. Measured result:
   .asap-mission rendered from x:-153.75 to x:1766.25 in a 1920px-wide
   viewport — overflowing off-screen on the left, short of the edge on the
   right. That's the CSS approach removed below in favor of a small
   position-measuring script (see asap-fullbleed-fix.html) that corrects
   for whatever nesting a given template happens to use, instead of
   assuming a specific one. (Measurement noted below against the block that
   was then called .asap-mission — since renamed to .asap-statement, see
   section 5 — the measurement and fix themselves are unaffected.) */

/* -------------------------------------------------------------------------
   3. Shared utilities (used across multiple blocks below)
   ------------------------------------------------------------------------- */
.asap-wrap{ max-width:1200px; margin:0 auto; padding:0 24px; }

.asap-eyebrow{ display:inline-flex; align-items:center; gap:14px; font-family:var(--asap-sans); font-weight:600; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--asap-orange-2); }
.asap-eyebrow::before{ content:""; width:40px; height:2px; background:var(--asap-orange-2); flex:0 0 auto; }
.asap-eyebrow--center{ justify-content:center; }
.asap-eyebrow-plain{ font-family:var(--asap-sans); font-weight:600; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--asap-orange-2); }

.asap-sec-title{ font-family:var(--asap-sans); font-weight:800; color:var(--asap-navy); font-size:clamp(1.7rem,3.4vw,2.5rem); line-height:1.14; }

/* Hover language, applied consistently across every solid-fill button
   below (.asap-btn--orange, .asap-btn--navy, .asap-hero__btn,
   .asap-news__btn): invert to a white body with the button's own color as
   an outline + text on hover — orange outline/white body/orange text for
   the orange family, matching what the rest of the site's "secondary"
   button style does. Outline-at-rest buttons (.asap-btn--ghost*) already
   do the mirror-image version (invert to filled), so they're left as-is.
   Every :hover rule below sets color explicitly — without it, the
   sitewide a:hover{color:var(--tertiary-color)} rule wins instead (teal),
   which is what QA caught. */
.asap-btn{ display:inline-flex; align-items:center; gap:10px; font-family:var(--asap-sans); font-weight:600; font-size:.95rem; text-decoration:none; padding:13px 26px; border-radius:10px; transition:background .2s,transform .2s,color .2s,border-color .2s; cursor:pointer; border:2px solid transparent; }
.asap-btn svg{ width:16px; height:16px; }
.asap-btn--orange{ background:var(--asap-orange); color:#fff; }
.asap-btn--orange:hover{ background:#fff; border-color:var(--asap-orange-2); color:var(--asap-orange-2); transform:translateY(-2px); }
.asap-btn--navy{ background:var(--asap-navy); color:#fff; }
.asap-btn--navy:hover{ background:#fff; border-color:var(--asap-navy); color:var(--asap-navy); transform:translateY(-2px); }
.asap-btn--ghost{ background:transparent; border-color:var(--asap-navy); color:var(--asap-navy); }
.asap-btn--ghost:hover{ background:var(--asap-navy); color:#fff; }
.asap-btn--ghost-light{ background:transparent; border-color:rgba(255,255,255,.5); color:#fff; }
.asap-btn--ghost-light:hover{ background:#fff; color:var(--asap-navy); border-color:#fff; }

/* -------------------------------------------------------------------------
   Topbar (announcement bar)
   Not part of Novi's native header — this is new content that must render
   visually above the header even though it can only be pasted into the
   body content area, below the header in the DOM. Verified live on
   /content-block-suite: body already carries a sitewide 40px top padding
   with nothing rendered in it (header starts at y:40, unchanged), so a
   position:fixed bar pinned to top:0 slots into that existing reserved
   band exactly, without covering the header and without needing to touch
   header/body CSS at all. Side effect: because it's fixed, it stays
   visible while scrolling (persistent, not a one-time banner) — flag if
   you'd rather have it scroll away after the first screen.
   ------------------------------------------------------------------------- */
.asap-topbar{
  /* Not fixed/sticky by design — scrolls away with the page. It's moved to
     sit directly before <header> in the DOM by a script (see
     asap-fullbleed-fix.html), so it renders above the header in normal
     document flow without needing position:fixed or a space-reservation
     hack. */
  background:var(--asap-navy-deep);
  color:#c9cde6;
  font-size:.83rem;
}
.asap-topbar .asap-wrap{ display:flex; align-items:center; justify-content:center; gap:12px; padding:9px 24px; flex-wrap:wrap; text-align:center; min-height:22px; }
.asap-topbar__pill{ background:var(--asap-orange); color:#fff; font-family:var(--asap-sans); font-weight:700; font-size:.62rem; letter-spacing:.09em; padding:3px 9px; border-radius:5px; }
.asap-topbar b{ color:#fff; }
.asap-topbar a{ color:#fff; font-weight:600; text-decoration:none; }
.asap-topbar a:hover{ text-decoration:underline; }

/* -------------------------------------------------------------------------
   4. Hero carousel
   ------------------------------------------------------------------------- */
.asap-hero{ position:relative; width:100%; overflow:hidden; background:var(--asap-navy-deep); height:clamp(430px,44vw,640px); font-family:var(--asap-body); isolation:isolate; }
.asap-hero__track{ display:flex; height:100%; width:100%; transition:transform .7s cubic-bezier(.65,.02,.28,1); }
.asap-hero__slide{ position:relative; flex:0 0 100%; height:100%; overflow:hidden; }
.asap-hero__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
/* One shared look for every slide, on purpose (per Eric) — content and
   background photos will keep rotating, and slides are pasted/edited
   directly in HTML, so per-slide modifier classes (--ai, --handbook, etc.)
   just went stale the moment content changed without someone remembering
   to also update the class suffix. .asap-hero__bg is a fallback wash shown
   if a slide's photo 404s (see the img's onerror in the HTML) — it doesn't
   need to match each photo since it's rarely even visible; one on-brand
   gradient built from the existing navy tokens works for all five (or any
   future) slides. Same reasoning for the card: one opacity for every slide
   instead of two photos getting a specially-tuned .52 that the rest didn't.
   New slides need nothing beyond .asap-hero__slide — no modifier class. */
.asap-hero__bg{ position:absolute; inset:0; z-index:-1; background:linear-gradient(120deg,var(--asap-navy-deep) 0%,var(--asap-navy) 60%,#20264f 100%); }
.asap-hero__scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,rgba(10,14,38,.72) 0%,rgba(10,14,38,.45) 42%,rgba(10,14,38,.12) 68%,rgba(10,14,38,0) 100%); }
.asap-hero__inner{ position:relative; z-index:2; height:100%; max-width:1360px; margin:0 auto; padding:0 clamp(20px,5vw,72px); display:flex; align-items:center; }
.asap-hero__card{ max-width:560px; background:rgba(18,20,48,.62); backdrop-filter:blur(3px); border:1px solid rgba(255,255,255,.06); border-radius:18px; padding:clamp(22px,3vw,40px); color:#fff; }
.asap-hero__eyebrow{ display:inline-flex; align-items:center; gap:14px; font-family:var(--asap-sans); font-size:clamp(.62rem,1.1vw,.78rem); font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:#ff7a3d; margin-bottom:16px; }
.asap-hero__eyebrow::before{ content:""; width:40px; height:2px; background:#ff7a3d; flex:0 0 auto; }
.asap-hero__title{ font-family:var(--asap-sans); font-weight:800; font-size:clamp(1.7rem,4.2vw,3rem); line-height:1.08; letter-spacing:-.01em; margin:0 0 26px; }
.asap-hero__tint{ color:var(--teal,#52b5c2); }
.asap-hero__btn{ display:inline-flex; align-items:center; gap:14px; background:var(--asap-orange); color:#fff; font-family:var(--asap-sans); font-weight:600; font-size:clamp(.86rem,1.3vw,1rem); text-decoration:none; padding:14px 26px; border-radius:10px; border:2px solid transparent; transition:background .2s,transform .2s,box-shadow .2s,color .2s,border-color .2s; }
.asap-hero__btn:hover{ background:#fff; border-color:var(--asap-orange-2); color:var(--asap-orange-2); transform:translateY(-2px); }
.asap-hero__btn svg{ width:18px; height:18px; }
.asap-hero__nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:4; width:52px; height:52px; border-radius:50%; border:1px solid rgba(255,255,255,.35); background:rgba(12,16,40,.35); color:#fff; display:grid; place-items:center; cursor:pointer; transition:background .2s,border-color .2s; backdrop-filter:blur(4px); }
.asap-hero__nav:hover{ background:rgba(255,122,61,.9); border-color:transparent; }
.asap-hero__nav svg{ width:22px; height:22px; }
.asap-hero__nav--prev{ left:18px; }
.asap-hero__nav--next{ right:18px; }
.asap-hero__controls{ position:absolute; left:0; right:0; bottom:22px; z-index:4; display:flex; align-items:center; justify-content:center; gap:18px; padding:0 clamp(20px,5vw,72px); }
.asap-hero__dots{ display:flex; gap:10px; }
.asap-hero__dot{ width:11px; height:11px; border-radius:50%; border:none; cursor:pointer; padding:0; background:rgba(255,255,255,.42); transition:background .3s,width .3s,transform .2s; }
.asap-hero__dot:hover{ transform:scale(1.15); }
.asap-hero__dot.is-active{ background:var(--teal,#52b5c2); width:30px; border-radius:6px; }
.asap-hero__count{ position:absolute; right:clamp(20px,5vw,72px); font-family:var(--asap-sans); font-weight:700; color:#fff; font-size:.9rem; letter-spacing:.06em; }
.asap-hero__count b{ color:var(--aqua,#95f1f1); }
.asap-hero__progress{ position:absolute; left:0; bottom:0; height:4px; width:100%; z-index:4; background:rgba(255,255,255,.14); }
.asap-hero__progress span{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--teal,#52b5c2),var(--aqua,#95f1f1)); }
.asap-hero.is-playing .asap-hero__progress span{ animation:asapHeroBar 6s linear forwards; }
.asap-hero.is-paused .asap-hero__progress span{ animation-play-state:paused; }
@keyframes asapHeroBar{ from{ width:0; } to{ width:100%; } }

@media (max-width:720px){
  .asap-hero{ height:clamp(460px,118vw,560px); }
  .asap-hero__scrim{ background:linear-gradient(180deg,rgba(10,14,38,.35) 0%,rgba(10,14,38,.55) 55%,rgba(10,14,38,.82) 100%); }
  .asap-hero__inner{ align-items:flex-end; padding-bottom:76px; }
  .asap-hero__card{ max-width:none; width:100%; background:transparent; border:none; backdrop-filter:none; padding:0; }
  .asap-hero__nav{ display:none; }
  .asap-hero__count{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .asap-hero__track{ transition:none; }
  .asap-hero.is-playing .asap-hero__progress span{ animation:none; width:100%; }
}

/* -------------------------------------------------------------------------
   5. Statement (short centered pull-statement — was "Mission"; renamed
      because it won't always hold mission-statement copy specifically)
   ------------------------------------------------------------------------- */
.asap-statement{ background:var(--asap-light); text-align:center; }
.asap-statement .asap-wrap{ padding:56px 24px; max-width:1000px; }
.asap-statement .asap-eyebrow-plain{ margin-bottom:16px; display:inline-block; }
.asap-statement h2{ font-family:var(--asap-sans); font-weight:700; color:var(--asap-navy); font-size:clamp(1.35rem,2.7vw,2rem); line-height:1.4; margin:0; }

/* -------------------------------------------------------------------------
   6. Media + Text (two-column split — was "Who We Are"; renamed since it's
      really any image/video-plus-copy split, not always an about-us block)
   ------------------------------------------------------------------------- */
.asap-media-text .asap-wrap{ padding:72px 24px; display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.asap-media-text__h{ font-family:var(--asap-sans); font-weight:800; color:var(--asap-navy); font-size:clamp(1.9rem,3.6vw,2.7rem); line-height:1.1; margin:16px 0 18px; }
.asap-media-text__p{ color:var(--asap-muted); font-size:1rem; line-height:1.7; margin-bottom:26px; max-width:52ch; }
.asap-media-text__btns{ display:flex; gap:14px; flex-wrap:wrap; }
.asap-media-text__media{ position:relative; border-radius:14px; overflow:hidden; aspect-ratio:4/3; background:linear-gradient(135deg,#16204a,#33507e); }
.asap-media-text__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.asap-media-text__badge{ position:absolute; right:0; bottom:0; background:#fff; border-radius:14px 0 0 0; padding:16px 22px; display:flex; align-items:center; gap:12px; box-shadow:-8px -8px 26px rgba(0,0,0,.10); }
.asap-media-text__badge b{ font-family:var(--asap-sans); font-weight:800; color:var(--asap-navy); font-size:2rem; line-height:1; }
.asap-media-text__badge span{ color:var(--asap-muted); font-size:.82rem; line-height:1.25; max-width:10ch; }

@media(max-width:980px){ .asap-media-text .asap-wrap{ grid-template-columns:1fr; gap:32px; } }

/* -------------------------------------------------------------------------
   7. Stat Grid (row of number+label callouts — was "Stats"; kept close to
      the original name since "stats" was already structural, not content-
      specific, but aligned to the -grid suffix pattern used elsewhere)
   ------------------------------------------------------------------------- */
.asap-stat-grid{ background:var(--asap-navy); }
.asap-stat-grid .asap-wrap{ padding:46px 24px; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
.asap-stat-grid b{ display:block; font-family:var(--asap-sans); font-weight:800; color:var(--aqua,#95f1f1); font-size:clamp(1.9rem,4vw,2.7rem); line-height:1; }
.asap-stat-grid span{ color:#c3c8e0; font-size:.92rem; margin-top:10px; display:block; }

@media(max-width:980px){ .asap-stat-grid .asap-wrap{ grid-template-columns:repeat(2,1fr); gap:28px; } }

/* -------------------------------------------------------------------------
   8. Icon Cards (grid of cards: icon + heading + bullet list — was
      "Features"; renamed to describe the card composition itself, and to
      stay distinct from Media Cards below, which look similar at a glance
      but are structurally a different card: photo+meta+link, not icon+list)
   ------------------------------------------------------------------------- */
.asap-icon-cards .asap-wrap{ padding:70px 24px; }
.asap-icon-cards__head{ text-align:center; max-width:680px; margin:0 auto 46px; }
.asap-icon-cards__head .asap-sec-title{ margin:0 0 14px; }
.asap-icon-cards__head p{ color:var(--asap-muted); font-size:1.02rem; line-height:1.6; margin:0; }
.asap-icon-cards__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.asap-icon-card{ border:1px solid var(--asap-line); border-radius:14px; padding:30px 28px; transition:transform .25s,box-shadow .25s; background:#fff; }
.asap-icon-card:hover{ transform:translateY(-6px); box-shadow:0 16px 34px rgba(26,28,64,.09); }
.asap-icon-card__icon{ width:54px; height:54px; border-radius:12px; display:grid; place-items:center; margin-bottom:20px; color:#fff; }
.asap-icon-card__icon svg{ width:26px; height:26px; }
.asap-icon-card__icon--teal{ background:var(--teal,#52b5c2); }
.asap-icon-card__icon--orange{ background:var(--asap-orange); }
.asap-icon-card__icon--navy{ background:var(--asap-navy); }
.asap-icon-card h3{ font-family:var(--asap-sans); font-weight:700; color:var(--asap-navy); font-size:1.2rem; margin-bottom:14px; }
.asap-icon-card ul{ list-style:none; margin:0; padding:0; }
.asap-icon-card li{ display:flex; gap:10px; align-items:flex-start; color:var(--asap-muted); font-size:.95rem; line-height:1.45; padding:7px 0; }
.asap-icon-card li svg{ width:17px; height:17px; color:var(--teal,#52b5c2); flex:0 0 auto; margin-top:2px; }

@media(max-width:980px){ .asap-icon-cards__grid{ grid-template-columns:1fr; } }

/* -------------------------------------------------------------------------
   9. Media Cards (grid of cards: photo + meta row + title + link — was
      "Events"; renamed since the card shape works for any linked content
      — events, articles, resources — not just events specifically)
   ------------------------------------------------------------------------- */
.asap-media-cards{ background:var(--asap-light); }
.asap-media-cards .asap-wrap{ padding:70px 24px; }
.asap-media-cards .asap-sec-title{ text-align:center; margin:0 0 44px; }
.asap-media-cards__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.asap-media-card{ background:#fff; border-radius:14px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 4px 16px rgba(26,28,64,.05); transition:transform .25s,box-shadow .25s; }
.asap-media-card:hover{ transform:translateY(-6px); box-shadow:0 16px 34px rgba(26,28,64,.12); }
.asap-media-card__media{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.asap-media-card__fallback{ position:absolute; inset:0; background:linear-gradient(135deg,#16204a,#33507e); }
.asap-media-card__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.asap-media-card__chip{ position:absolute; left:14px; bottom:14px; background:rgba(12,16,40,.72); color:#fff; font-family:var(--asap-sans); font-weight:600; font-size:.68rem; letter-spacing:.03em; padding:5px 11px; border-radius:6px; z-index:2; }
.asap-media-card__body{ padding:20px; display:flex; flex-direction:column; flex:1; align-items:flex-start; }
.asap-media-card__meta{ display:flex; gap:16px; font-size:.78rem; color:var(--asap-muted); margin-bottom:10px; flex-wrap:wrap; }
.asap-media-card__meta span{ display:inline-flex; align-items:center; gap:6px; }
.asap-media-card__meta svg{ width:14px; height:14px; color:var(--asap-tert); }
.asap-media-card h3{ font-family:var(--asap-sans); font-weight:700; color:var(--asap-navy); font-size:1.08rem; line-height:1.3; margin-bottom:10px; margin-left:0; margin-right:0; text-align:left; }
.asap-media-card p{ color:var(--asap-muted); font-size:.9rem; line-height:1.55; margin:0 0 16px; }
.asap-media-card__link{ margin-top:auto; display:inline-flex; align-items:center; gap:7px; font-family:var(--asap-sans); font-weight:600; font-size:.85rem; color:var(--asap-tert); }
.asap-media-card__link:hover{ color:var(--asap-tert); } /* explicit, not just coincidentally teal already — see hover-color note above */
.asap-media-card__link svg{ width:15px; height:15px; }

@media(max-width:980px){ .asap-media-cards__grid{ grid-template-columns:1fr; } }

/* -------------------------------------------------------------------------
   10. Quote
   ------------------------------------------------------------------------- */
.asap-quote{ background:var(--asap-navy); }
.asap-quote .asap-wrap{ padding:74px 24px; text-align:center; max-width:920px; }
.asap-quote blockquote{ font-family:var(--asap-sans); font-weight:700; color:#fff; font-size:clamp(1.35rem,3vw,2rem); line-height:1.42; }
.asap-quote blockquote .asap-quote__accent{ color:var(--aqua,#95f1f1); }
.asap-quote__by{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:34px; }
.asap-quote__avatar{ width:54px; height:54px; border-radius:50%; background:#2a2d55; display:grid; place-items:center; color:#aeb4d6; font-family:var(--asap-sans); font-weight:700; overflow:hidden; }
.asap-quote__avatar img{ width:100%; height:100%; object-fit:cover; }
.asap-quote__by .asap-quote__text{ text-align:left; }
.asap-quote__by b{ display:block; color:#fff; font-family:var(--asap-sans); font-size:.95rem; }
.asap-quote__by span{ color:#a9adc9; font-size:.85rem; }

/* -------------------------------------------------------------------------
   11. News
   ------------------------------------------------------------------------- */
.asap-news-section .asap-wrap{ padding:60px 24px; }
.asap-news{ display:grid; grid-template-columns:minmax(260px,340px) 1fr; gap:clamp(28px,5vw,72px); align-items:start; }
.asap-news__intro{ position:sticky; top:24px; }
.asap-news__eyebrow{ display:inline-flex; align-items:center; gap:14px; font-family:var(--asap-sans); font-size:.78rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--asap-orange-2); margin-bottom:12px; }
.asap-news__eyebrow::before{ content:""; width:40px; height:2px; background:var(--asap-orange-2); flex:0 0 auto; }
.asap-news__h{ margin:0 0 14px; font-family:var(--asap-sans); color:#001062; font-size:clamp(1.7rem,3.2vw,2.4rem); line-height:1.1; }
.asap-news__lead{ margin:0 0 24px; font-family:var(--asap-body); color:var(--asap-muted); font-size:.98rem; line-height:1.6; max-width:34ch; }
.asap-news__btn{ display:inline-flex; align-items:center; gap:10px; background:var(--asap-orange-2); color:#fff; font-family:var(--asap-sans); font-weight:600; font-size:.9rem; text-decoration:none; padding:12px 22px; border-radius:10px; border:2px solid transparent; transition:background .2s,transform .2s,box-shadow .2s,color .2s,border-color .2s; }
.asap-news__btn:hover{ background:#fff; border-color:var(--asap-orange-2); color:var(--asap-orange-2); transform:translateY(-2px); }
.asap-news__btn svg{ width:16px; height:16px; }
.asap-news__list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--asap-line); }
.asap-news__item{ border-bottom:1px solid var(--asap-line); }
.asap-news__link{ display:flex; align-items:center; gap:18px; padding:20px 6px; text-decoration:none; transition:padding .2s,background .2s; }
.asap-news__link:hover{ background:#f6fafb; padding-left:14px; padding-right:0; text-decoration:none; }
.asap-news__main{ flex:1; min-width:0; }
.asap-news__meta{ display:flex; align-items:center; gap:10px; margin-bottom:6px; font-family:var(--asap-body); font-size:.76rem; }
.asap-news__date{ color:#8a90a8; }
.asap-news__category{ font-family:var(--asap-sans); font-weight:600; font-size:.66rem; letter-spacing:.05em; text-transform:uppercase; color:#2f8b99; background:#e6f6f8; padding:3px 9px; border-radius:20px; }
.asap-news__title{ font-family:var(--asap-sans); font-weight:700; font-size:1.06rem; line-height:1.3; color:#12143a; margin:0; transition:color .2s; }
.asap-news__arrow{ flex:0 0 auto; color:#cfd6e0; transition:color .2s,transform .2s; }
.asap-news__arrow svg{ width:20px; height:20px; display:block; }
.asap-news__link:hover .asap-news__arrow{ color:var(--asap-orange-2); transform:translateX(4px); }

@media (max-width:820px){
  .asap-news{ grid-template-columns:1fr; gap:22px; }
  .asap-news__intro{ position:static; }
  .asap-news__lead{ max-width:none; }
}
@media (prefers-reduced-motion:reduce){ .asap-news__link, .asap-news__arrow{ transition:none; } }

/* -------------------------------------------------------------------------
   12. Video List (video thumbnail one side, playlist-style link list the
      other — was "Watch and Listen"; renamed to describe the layout since
      it's really a media-plus-list pattern, not tied to that specific
      section title. .asap-playlist itself is left as-is — already a
      generic, structural name for a vertical list of linked items, not
      inherently video-specific)
   ------------------------------------------------------------------------- */
.asap-video-list{ background:var(--asap-light); }
.asap-video-list .asap-wrap{ padding:70px 24px; display:grid; grid-template-columns:1.05fr 1fr; gap:50px; align-items:center; }
.asap-video-list__video{ position:relative; border-radius:14px; overflow:hidden; aspect-ratio:16/9; background:linear-gradient(135deg,#12183a,#243a63 55%,#6f4433); } /* 16/9 to match Vimeo's actual video ratio (confirmed via oEmbed: 426x240) — was 16/10, which left a letterboxed gap around the embedded iframe */
.asap-video-list__play{ position:absolute; inset:0; display:grid; place-items:center; }
.asap-video-list__play span{ width:74px; height:74px; border-radius:50%; background:#fff; display:grid; place-items:center; box-shadow:0 10px 30px rgba(0,0,0,.3); }
.asap-video-list__play svg{ width:26px; height:26px; color:var(--asap-orange); margin-left:5px; }
.asap-video-list__duration{ position:absolute; right:14px; top:14px; background:rgba(12,16,40,.7); color:#fff; font-size:.72rem; padding:3px 8px; border-radius:5px; }
.asap-video-list__caption{ position:absolute; left:18px; bottom:16px; color:#fff; }
.asap-video-list__caption b{ font-family:var(--asap-sans); font-weight:700; font-size:1rem; display:block; }
.asap-video-list__caption span{ font-size:.8rem; color:#c9cde0; }
.asap-video-list__h{ margin:14px 0 14px; }
.asap-video-list__lead{ color:var(--asap-muted); line-height:1.65; margin:0 0 22px; }
.asap-playlist{ display:flex; flex-direction:column; gap:12px; }
.asap-playlist__item{ display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--asap-line); border-radius:10px; padding:12px 14px; text-decoration:none; transition:transform .2s,box-shadow .2s; }
.asap-playlist__item:hover{ transform:translateX(4px); box-shadow:0 8px 20px rgba(26,28,64,.08); }
.asap-playlist__icon{ width:40px; height:40px; border-radius:8px; background:var(--teal,#52b5c2); display:grid; place-items:center; color:#fff; flex:0 0 auto; }
.asap-playlist__icon svg{ width:15px; height:15px; margin-left:2px; }
.asap-playlist__item b{ font-family:var(--asap-sans); font-weight:600; color:var(--asap-navy); font-size:.95rem; display:block; }
.asap-playlist__item span{ color:var(--asap-muted); font-size:.8rem; }

@media(max-width:980px){ .asap-video-list .asap-wrap{ grid-template-columns:1fr; gap:28px; } }

/* -------------------------------------------------------------------------
   13. Logos
   ------------------------------------------------------------------------- */
.asap-logos .asap-wrap{ padding:56px 24px; }
.asap-logos__title{ text-align:center; font-family:var(--asap-sans); font-weight:600; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#9aa0b8; margin-bottom:34px; }
.asap-logos__row{ display:flex; align-items:center; gap:18px; }
.asap-logos__track{ display:flex; align-items:center; justify-content:space-around; gap:14px; flex:1; flex-wrap:wrap; }
.asap-logo-badge{ width:118px; height:118px; border-radius:50%; border:1px solid #eef1f5; display:grid; place-items:center; font-family:var(--asap-sans); font-weight:700; color:#8a90a8; font-size:.86rem; text-align:center; padding:12px; line-height:1.2; }
.asap-logos__arrow{ width:44px; height:44px; border-radius:50%; border:1px solid #dfe4ec; display:grid; place-items:center; color:var(--asap-navy); cursor:pointer; flex:0 0 auto; background:#fff; }
.asap-logos__arrow:hover{ border-color:var(--asap-orange-2); color:var(--asap-orange-2); }
.asap-logos__arrow svg{ width:20px; height:20px; }

@media(max-width:600px){ .asap-logo-badge{ width:92px; height:92px; font-size:.76rem; } }

/* -------------------------------------------------------------------------
   14. Call to action
   ------------------------------------------------------------------------- */
.asap-cta .asap-wrap{ padding:18px 24px 70px; }
.asap-cta__box{ background:var(--asap-navy); border-radius:18px; padding:clamp(40px,6vw,66px) 24px; text-align:center; color:#fff; }
.asap-cta__box h2{ font-family:var(--asap-sans); font-weight:800; font-size:clamp(1.7rem,3.6vw,2.6rem); margin:0 0 16px; color:#fff !important; }
.asap-cta__box p{ color:#c3c8e0 !important; max-width:620px; margin:0 auto 30px; line-height:1.6; } /* !important to beat .single-region p{color:var(--dark-blue)!important} — same fight as .asap-hero__title, this block just hadn't been QA'd inside a .single-region wrapper yet (present on the homepage, absent on /content-block-suite, which is why it only showed up there) */
.asap-cta__btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* -------------------------------------------------------------------------
   15. Strategic Alliance Roadmap
   Interactive 7-step timeline (clickable "cube" icons that expand a detail
   card). Originally supplied as a standalone page with its own <h1>/hint
   text, a page-level background, and hardcoded "Segoe UI" fonts, plus
   generic classes (.item, .detail, .cube, raw h1/body/*). Converted to a
   section-level block per Eric:
     - Dropped the <h1>"Strategic Alliance Roadmap" and "Tap or click..."
       hint entirely — this sits inside pages that already have their own
       page title, so a second <h1> would be redundant and would also lose
       a specificity fight with asap-custom-styles.css's sitewide
       h1,h2,h3,h4,h5{color:var(--dark-blue)!important} rule anyway.
     - No font-family is set anywhere below (unlike every other block in
       this file, which explicitly sets var(--asap-sans)/var(--asap-body)) —
       intentional, so labels and detail text inherit whatever font the
       surrounding page is already using instead of forcing one. Safe to do
       here specifically because every text element is a <div>/<span>, never
       a heading tag, so it isn't subject to the sitewide h1-h5 !important
       font-family override that the other blocks have to work around.
     - Every class namespaced asap-roadmap__* (the source's plain .item
       collides with Bootstrap 3's .carousel .item, which this Bootstrap-
       flavored Novi theme could plausibly still reference elsewhere).
     - Page-shell rules (*{margin:0;padding:0}, body background/layout,
       header/h1/.hint) removed — a block only owns its own subtree, not the
       page chrome. box-sizing reset is scoped to .asap-roadmap descendants
       instead of the universal selector.
     - Its own --ink token swapped for var(--asap-navy) so step labels match
       the site's existing dark-navy heading color instead of a slightly
       different one-off hex.
     - Script relocated to asap-fullbleed-fix.html — Novi strips inline
       <script> tags from pasted blocks (same reason the hero carousel's
       script lives there). This version auto-inits every .asap-roadmap
       found on the page, so it's safe if the block is reused on more than
       one page.
     - Reworked a second time (Eric: this block will appear on several pages
       — /alliance-lifecycle, the homepage, etc — with different column
       widths, and needs to "work anywhere within reason" rather than being
       re-tuned per page). The first pass (--cw sized from a vw/cqw clamp
       formula, items at a fixed calculated width) improved things on
       /content-block-suite but still overflowed on the homepage — because
       a formula that guesses "here's roughly how wide the container
       probably is" can always be wrong by a few px in either direction,
       and once cw hits its own clamp ceiling, growing the container
       further no longer shrinks anything to compensate.
       Replaced with a design that can't overflow by construction instead
       of by estimation: items are flex:1 1 0 (grow/shrink to fill
       whatever width the row actually has, floored/ceilinged by min-/
       max-width) so the 7 of them always sum to exactly the container's
       width — no guessing. Each item is its own container-query context
       (container-type:inline-size), so the cube/icon/font sizing inside
       it scales off that item's own real rendered width, not an estimate
       of the outer wrap's width. Below the items' min-width floor
       (7 * 108px = 756px), the @container breakpoint switches to the
       vertical mobile stack before anything is forced to overflow.
   ------------------------------------------------------------------------- */
/* No default background — this block appears on multiple pages
   (/alliance-lifecycle, homepage, etc.), so the background is opt-in per
   instance via a modifier class on the <section> in the HTML, not fixed
   here. Add asap-roadmap--light on pages that need separation from
   adjacent white sections; leave it off on pages that don't. */
.asap-roadmap--light{ background:var(--asap-light); } /* #eff6f5 — matches the site's --light-gray token, same background .asap-statement/.asap-media-cards/.asap-video-list use */
.asap-roadmap .asap-wrap{ padding-top:56px; padding-bottom:56px; }
.asap-roadmap, .asap-roadmap *{ box-sizing:border-box; }

/* ---------- DESKTOP: horizontal row, zigzag labels ---------- */
/* Horizontal padding sized to the label overhang: .lbl is 124.5% of its
   item, centered, so it bleeds ~12.25% of the item's width past each edge
   (up to ~19.6px at the 160px item max-width) — that's fine for interior
   items (a neighbor's slot absorbs it), but item 1's label bleeds left of
   the row's own edge and item 7's bleeds right of it. Timeline is a scroll
   container (overflow-x:auto), and content before its own scroll-start
   position is unreachable in LTR (can't scroll negative) — QA'd on
   /alliance-lifecycle: the "A" of item 1's "Alliance-Specific Strategy"
   was getting clipped for exactly this reason. This padding gives both
   ends room to bleed into without leaving the visible/scrollable box. */
.asap-roadmap__timeline{ width:100%; overflow-x:auto; overflow-y:hidden; padding:6px 24px; }
.asap-roadmap__items{ display:flex; justify-content:center; align-items:stretch; padding:0; margin:0; list-style:none; }
.asap-roadmap__item{
  container-type:inline-size;                 /* cube/icon/font below scale off THIS box's real width */
  position:relative; display:flex; flex-direction:column; align-items:center;
  flex:1 1 0; min-width:108px; max-width:160px;  /* 7 items always sum to the row's actual width — no overflow, no guessing */
  opacity:0; transform:translateY(14px); animation:asapRoadmapPop .5s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:calc(var(--i)*.09s);
}
@keyframes asapRoadmapPop{ to{ opacity:1; transform:none; } }

/* Percentages below (124.5% / 94.3%) reproduce the original design's
   proportions — label intentionally wider than its own item slot (the
   "zigzag" look, each item's z-index makes earlier labels sit on top of
   later cubes), cube slightly narrower than the slot (small gap between
   adjacent cubes). Plain % of the item's own box, not cqw — cqw is only
   needed below for properties (font-size, icon height) that can't be
   expressed as a width-relative %. */
.asap-roadmap__lbl{ width:124.5%; aspect-ratio:1.32/1.18; display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; pointer-events:none; margin:0; }
.asap-roadmap__lbl--top{ justify-content:flex-end; }
.asap-roadmap__lbl--bottom{ justify-content:flex-start; }
.asap-roadmap__ttl{ font-size:clamp(11.5px, 10.9cqw, 17.5px); font-weight:800; letter-spacing:.3px; text-transform:uppercase; line-height:1.2; color:var(--asap-navy); max-width:100%; }
.asap-roadmap__ico{ width:clamp(26px, 24.5cqw, 39px); height:clamp(26px, 24.5cqw, 39px); flex:0 0 auto; }
.asap-roadmap__ico svg{ width:100%; height:100%; display:block; }
.asap-roadmap__stem{ width:2px; height:clamp(17px, 17cqw, 26px); opacity:.85; }

.asap-roadmap__cube{ position:relative; width:94.3%; cursor:pointer; outline:none; z-index:1;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), filter .25s; }
.asap-roadmap__cube-svg{ display:block; width:100%; height:auto; filter:drop-shadow(0 8px 12px rgba(20,35,70,.16)); }
.asap-roadmap__cube:hover, .asap-roadmap__cube:focus-visible{ transform:translateY(-8px) scale(1.04); z-index:60; }
.asap-roadmap__cube:hover .asap-roadmap__cube-svg, .asap-roadmap__cube:focus-visible .asap-roadmap__cube-svg{ filter:drop-shadow(0 14px 20px rgba(20,35,70,.26)); }

.asap-roadmap__m-label{ display:none; }

/* ---------- NARROW CONTAINER: vertical stack, no overlap ----------
   @container, not @media — triggers off the block's own column width, not
   the viewport, so this also fires when the block is placed in a narrow
   template column on an otherwise-wide desktop screen.
   Threshold math (804px), precisely: the 7 items' hard floor is 7*108 =
   756px, but that floor applies to .asap-roadmap__items' own width, which
   sits INSIDE .asap-roadmap__timeline's 24px+24px padding (added earlier
   so item 1/7's overhanging labels don't clip — see .timeline's own
   comment above). So the wrap's content-box actually needs 756 + 48 = 804px
   before the row has enough room, not just 756px.
   An earlier version of this breakpoint (758px) missed that 48px and only
   accounted for the items' own floor — QA'd on /content-block-suite: its
   content-box (769.5px, see below) is above 758px so the row went
   horizontal, but only had 769.5-48=721.5px to actually give the items,
   6px short of their 756px floor — a real, if small, overflow/scrollbar
   that a quick glance at the rendered row didn't catch. 804px is the
   correct number with no slack cut out of it.
   Container query conditions are evaluated against the query container's
   CONTENT box (border-box minus its own padding), not the border-box
   width you'd see in devtools/getBoundingClientRect — e.g. on
   /content-block-suite .asap-wrap is 817.5px border-box but 769.5px
   content-box (817.5 minus its own 24px+24px padding); the 769.5px number
   is what actually gets compared against this breakpoint. */
.asap-roadmap .asap-wrap{ container-type:inline-size; container-name:asap-roadmap; }
@container asap-roadmap (max-width:804px){
  .asap-roadmap__timeline{ overflow:visible; }
  .asap-roadmap__items{ flex-direction:column; align-items:stretch; padding:0; }
  .asap-roadmap__item{ container-type:normal; flex-direction:row; align-items:center; width:100% !important; max-width:none; gap:14px; }
  .asap-roadmap__item + .asap-roadmap__item{ margin-top:10px; }   /* clear gap — no overlay */
  .asap-roadmap__item .asap-roadmap__cube{ width:clamp(104px,27cqw,140px); flex:0 0 auto; }  /* prevent shrink against the label's text */
  .asap-roadmap__lbl--top, .asap-roadmap__lbl--bottom{ display:none; }
  .asap-roadmap__m-label{ display:flex; align-items:center; gap:12px; }
  .asap-roadmap__m-label .asap-roadmap__ico{ width:34px; height:34px; }
  .asap-roadmap__m-label .asap-roadmap__ttl{ font-size:15px; text-align:left; }
}
.asap-roadmap__m-label .asap-roadmap__ttl{ font-weight:800; letter-spacing:.3px; text-transform:uppercase; line-height:1.22; color:var(--asap-navy); }

/* detail card — desktop: inline expanding card (unchanged from before).
   Mobile client feedback: on the vertical stack, tapping an early item's
   cube opens the card at the very bottom of the whole stacked list, well
   below the fold — a user would only see it "if they get lucky and scroll
   down." Below the same @container breakpoint that switches items to the
   vertical stack, .detail becomes a fixed, centered, closeable lightbox
   instead (backdrop + card), so it's visible immediately regardless of
   scroll position. Desktop keeps the original inline behavior — client
   confirmed that one's fine as-is.
   .d-panel is a new wrapper (added around the card content in the JS
   template) — on desktop it's unstyled passthrough (.detail is already the
   visible white card, exactly as before); on mobile .detail instead becomes
   the fixed backdrop and .d-panel becomes the actual visible white card
   centered inside it. Kept as two elements (rather than restyling .detail
   itself for both roles) so the backdrop can dim the whole screen behind a
   card that's independently centered/sized, and so a click on the backdrop
   (outside the card) can be told apart from a click inside it. */
.asap-roadmap__detail{ width:100%; max-width:680px; margin:22px auto 0; background:#fff; border-radius:16px; border:1px solid var(--asap-line); box-shadow:0 12px 30px rgba(20,35,70,.10); padding:0 24px; max-height:0; overflow:hidden; opacity:0; transition:max-height .4s ease, opacity .3s ease, padding .4s ease; }
.asap-roadmap__detail.is-open{ max-height:280px; opacity:1; padding:20px 24px; }
.asap-roadmap__d-panel{ position:relative; } /* unstyled on desktop — .detail itself is still the visible card */
.asap-roadmap__d-head{ display:flex; align-items:center; gap:14px; margin-bottom:8px; }
.asap-roadmap__d-badge{ width:44px; height:44px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:17px; flex:0 0 auto; }
.asap-roadmap__d-title{ font-size:17px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; }
.asap-roadmap__d-body{ color:var(--asap-muted); font-size:15px; line-height:1.55; }
.asap-roadmap__d-close{ float:right; border:none; margin:0; background:#f1f4f8; color:var(--asap-muted); width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:16px; font:inherit; flex:0 0 auto; }
.asap-roadmap__d-close:hover{ background:#e6ebf1; }

/* Mobile lightbox override — same breakpoint as the item stack, since
   that's exactly when the inline card's position becomes a problem. */
@container asap-roadmap (max-width:804px){
  .asap-roadmap__detail{
    position:fixed; inset:0; z-index:1000; width:auto; max-width:none; margin:0;
    background:rgba(10,16,40,.6); border:none; box-shadow:none; border-radius:0;
    display:flex; align-items:center; justify-content:center; padding:20px;
    max-height:none; overflow:visible; /* swap the max-height animation for opacity/visibility below */
    visibility:hidden; opacity:0; transition:opacity .25s ease, visibility 0s linear .25s;
  }
  .asap-roadmap__detail.is-open{
    /* max-height:none re-declared here (not just on the bare .detail above) —
       the desktop rule .asap-roadmap__detail.is-open{max-height:280px} (two
       classes) has higher specificity than a bare .asap-roadmap__detail
       selector, @container or not, so without this the desktop 280px cap
       silently won even inside the mobile breakpoint and clipped the
       lightbox card to a tiny scrollable strip — caught via live testing,
       not visible from reading the CSS alone. */
    max-height:none; visibility:visible; opacity:1; padding:20px; transition:opacity .25s ease;
  }
  .asap-roadmap__d-panel{
    width:100%; max-width:420px; max-height:calc(100vh - 40px); overflow-y:auto; overflow-x:hidden;
    background:#fff; border-radius:16px; box-shadow:0 20px 60px rgba(10,16,40,.35);
    padding:24px; transform:translateY(10px); transition:transform .25s ease;
  }
  /* overflow-x:hidden above (not the auto it'd inherit from matching the
     overflow-y:auto pattern) is a defensive leftover from an earlier
     negative-offset close button that briefly caused a spurious ~6px
     horizontal scrollbar; kept since horizontal scroll is never wanted
     here regardless. Vertical scroll for long descriptions still is. */
  .asap-roadmap__detail.is-open .asap-roadmap__d-panel{ transform:none; }
  /* Close button sits fully inside the panel's rounded corner (positive
     top/right, not the negative offset used on desktop's float:right)
     so it doesn't visually spill past the card edge on mobile — client
     feedback (screenshot) showed it getting clipped by the rounded
     corner when it sat partly outside the box. d-head gets matching
     right padding so the button never overlaps the title text, even
     on long titles that wrap to two lines (e.g. "Transform, Innovate,
     or Exit Gracefully"). */
  .asap-roadmap__d-close{ position:absolute; top:14px; right:14px; width:34px; height:34px; box-shadow:0 4px 10px rgba(10,16,40,.15); }
  .asap-roadmap__d-head{ padding-right:44px; }
}

/* Standard modal pattern: freeze the page behind the lightbox while it's
   open. Toggled on <html> (not scoped under .asap-roadmap — html isn't a
   descendant of it) by the init script in asap-fullbleed-fix.html, and
   only while the card is actually rendered as a fixed lightbox (checked
   via computed position at open-time, not by re-testing the 804px number
   here — one source of truth for the breakpoint, in the CSS above). */
html.asap-roadmap-lock-scroll{ overflow:hidden; }

/* -------------------------------------------------------------------------
   16. Event Hero
   Richer hero for event/summit landing pages (Biopharma, Summit NYC,
   Summit London, and — pending a simpler cut, per Eric — ASAP Locals)
   than header-ribbon's H1 + subtitle fields can reasonably support: two-
   column layout, a photo card with a location pill, and a 3-up stat row.

   This REPLACES the header-ribbon on the pages that use it, rather than
   restyling it — hide that page's ribbon in asap-custom-styles.css:
     .c-body-content__PAGE-SLUG .header-ribbon{ display:none; }
   (already added there for asap-summit and asap-biopharma-conference;
   Summit London's slug is inferred but unconfirmed on staging; Summit
   NYC and ASAP Locals slugs are still unknown — see that file's comment).

   Color: navy is the default (Summit NYC/London). Biopharma keeps its
   signature teal (#52b5c2 — already var(--teal) sitewide) via the
   .asap-event-hero--teal modifier below. Both variants are driven
   entirely by the --aeh-* custom properties declared on .asap-event-hero
   itself — to add a third variant later (e.g. a simpler Locals cut),
   override those three-to-five properties on a new modifier class rather
   than duplicating the block.

   Title is a real <h1> — the header-ribbon it replaces would otherwise
   own the page's only h1, and an event page's title is exactly what SEO
   wants that h1 to be. Unlike .asap-hero__title above (which sidesteps
   the whole h1/.single-region specificity fight by not being a heading
   tag at all — see the file-level compatibility-fixes note on it), this
   one pays the doubled-class tax below to stay a real, semantic h1.
   Eyebrow/date/venue/partner label are plain <div>/<span> rather than
   h6/p specifically so they DON'T need the same treatment — .single-region
   only forces color on h1–h6 and p (see asap-custom-styles.css), so
   anything that isn't one of those tags is unaffected by construction.

   Buttons reuse existing .asap-btn variants as-is, no new button CSS:
   navy variant → .asap-btn--orange (primary) + .asap-btn--ghost-light
   (secondary, white outline — reads fine against dark navy).
   teal variant → .asap-btn--navy (primary) + .asap-btn--ghost (secondary,
   navy outline — .asap-btn--ghost already exists above and is exactly
   this; ghost-light's white outline has less definition against the
   lighter teal, per review). Hover states for all of these are already
   covered by the file's own compatibility fix (.asap-btn:hover{text-
   decoration:none}). See asap-event-hero-snippet.html for which class
   pair goes with which section modifier.
   ------------------------------------------------------------------------- */
.asap-event-hero{
  --aeh-bg: var(--asap-navy);
  --aeh-card-bg: var(--asap-navy-2);
  --aeh-stat-bg: var(--asap-navy-deep);
  --aeh-accent: var(--aqua,#95f1f1);
  background: var(--aeh-bg);
  color: #fff;
  font-family: var(--asap-body);
  padding: clamp(48px,7vw,84px) 0;
}
/* Biopharma only. Card/stat tiles go navy instead of a darker teal so
   the two brand colors pair directly (navy-on-teal) rather than needing
   a third, invented shade — same two-color palette the rest of the site
   already uses for teal contexts (e.g. .asap-playlist__icon is teal
   against white, never a teal-on-teal tint). Eyebrow stays orange, same
   as the navy variant — every eyebrow in this file is orange regardless
   of section background (see .asap-hero__eyebrow, .asap-news__eyebrow),
   so this doesn't special-case it. */
.asap-event-hero--teal{
  --aeh-bg: var(--teal,#52b5c2);
  --aeh-card-bg: var(--asap-navy);
  --aeh-stat-bg: var(--asap-navy-deep);
  --aeh-accent: var(--asap-navy);
}
/* Teal's mid-tone background means the light-on-navy text colors used for
   the eyebrow/lead/partner-label above (chosen for contrast against dark
   navy) read too low-contrast here — caught in review on the actual
   rendered page, not guessed. All three flip to navy for this variant.
   Title/date/venue are left alone (stay white in both variants) — per
   Eric, bold/large enough to hold contrast against teal without a swap. */
.asap-event-hero--teal .asap-eyebrow{ color:var(--asap-navy); }
.asap-event-hero--teal .asap-eyebrow::before{ background:var(--asap-navy); }
.asap-event-hero--teal .asap-event-hero__lead.asap-event-hero__lead{ color:var(--asap-navy) !important; }
.asap-event-hero--teal .asap-event-hero__partner-label{ color:var(--asap-navy); }

.asap-event-hero .asap-wrap{ display:grid; grid-template-columns:1fr; gap:clamp(28px,5vw,56px); align-items:center; max-width:1240px; padding:0 clamp(22px,5vw,56px); }
@media(min-width:900px){ .asap-event-hero .asap-wrap{ grid-template-columns:1.08fr .92fr; } }

.asap-event-hero__eyebrow{ margin-bottom:20px; } /* color/line accent inherited from .asap-eyebrow */

.asap-event-hero__title.asap-event-hero__title{
  /* Neulis Neue, not Poppins/--asap-sans — matches the H1 everywhere else
     on the site (see asap-custom-styles.css's sitewide h1-h5 rule and
     .header-ribbon h1), per Eric. The rest of this block (eyebrow, date,
     stats, etc.) stays on --asap-sans, consistent with every other block
     in this file. */
  font-family: "neulis-neue", var(--font-family) !important;
  color: #fff !important;
  font-weight: 800 !important;
  line-height: 1.05;
  letter-spacing: -.01em;
  font-size: clamp(2.2rem,5vw,3.6rem);
  margin: 0 0 22px !important;
}
.asap-event-hero__title .g{ color: var(--aeh-accent); }

.asap-event-hero__lead.asap-event-hero__lead{
  color: #c9cde6 !important;
  font-family: var(--asap-body);
  font-size: clamp(1rem,1.3vw,1.12rem);
  line-height: 1.6;
  max-width: 34ch;
  margin-bottom: 28px !important;
}

/* Venue matched to date's weight/color (was a lighter, non-bold gray) —
   per review, the lighter treatment read as less legible than intended;
   both are now the same style, just different spacing below. */
.asap-event-hero__date,
.asap-event-hero__venue{ font-family:var(--asap-sans); font-weight:700; color:#fff; font-size:1.15rem; }
.asap-event-hero__date{ margin-bottom:4px; }
.asap-event-hero__venue{ margin-bottom:32px; }

.asap-event-hero__btns{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:40px; }

.asap-event-hero__partner{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.asap-event-hero__partner-label{ color:#9298b8; font-size:.9rem; }
/* No background/padding "chip" here anymore — with just placeholder text
   in it, that read as a third button (caught in review). Sized to hold a
   real <img> logo instead: capped height so partner logos of different
   aspect ratios all sit at the same visual scale, width left auto. The
   "Partner Logo" placeholder text just inherits ordinary text styling
   until a real image replaces it. */
.asap-event-hero__plogo{ display:inline-flex; align-items:center; font-family:var(--asap-sans); font-weight:700; font-size:.95rem; color:#fff; }
.asap-event-hero__plogo img{ display:block; max-height:36px; width:auto; }

.asap-event-hero__card{ background:var(--aeh-card-bg); border:1px solid rgba(255,255,255,.09); border-radius:18px; padding:20px; box-shadow:0 24px 60px rgba(0,0,0,.28); }

.asap-event-hero__photo{ position:relative; border-radius:12px; overflow:hidden; aspect-ratio:16/8.2; background:linear-gradient(160deg,#e9d9c2 0%,#c9a98a 42%,#4a5a74 100%); }
.asap-event-hero__photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.asap-event-hero__loc{ position:absolute; left:14px; bottom:12px; display:inline-flex; align-items:center; gap:7px; background:rgba(14,18,42,.55); backdrop-filter:blur(3px); color:#fff; font-size:.82rem; padding:6px 12px; border-radius:20px; }
.asap-event-hero__loc svg{ width:14px; height:14px; }

.asap-event-hero__stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:16px; }
.asap-event-hero__stat{ background:var(--aeh-stat-bg); border:1px solid rgba(255,255,255,.05); border-radius:12px; padding:20px 14px; text-align:center; }
.asap-event-hero__stat b{ display:block; font-family:var(--asap-sans); font-weight:800; font-size:clamp(1.5rem,2.6vw,1.9rem); color:#fff; line-height:1; }
.asap-event-hero__stat span{ display:block; color:#a9adc9; font-size:.85rem; margin-top:6px; }

@media(max-width:899px){ .asap-event-hero__lead{ max-width:none; } }
@media(max-width:420px){
  .asap-event-hero__stats{ gap:10px; }
  .asap-event-hero__stat{ padding:16px 8px; }
}

/* 17. Partner Formula Grid */

.asap-partner-grid{ padding-bottom:80px; }
.asap-partner-grid .asap-wrap{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px 24px;
}
@media(max-width:780px){
  .asap-partner-grid .asap-wrap{ grid-template-columns:repeat(2,1fr); gap:24px 16px; }
}

.asap-partner-card{
  border-radius:16px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  font-family:var(--asap-sans);
}

.asap-partner-row{
  padding:22px 20px;
  color:#fff;
  font-weight:500;
  font-size:1rem;
  line-height:1.3;
  text-align:center;
  position:relative; /* anchors the floating connector badge below it */
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
}
.asap-partner-row--navy{ background:var(--asap-navy); }
.asap-partner-row--teal{ background:var(--teal,#52b5c2); }
.asap-partner-row--orange{ background:var(--asap-orange); }
.asap-partner-row--aqua{ background:var(--aqua,#95f1f1); color:var(--asap-navy); }

.asap-partner-connector{
  position:relative;
  height:0;
  flex:0 0 auto;
  z-index:2;
}
.asap-partner-badge{
  position:absolute;
  top:0;
  left:50%;
  transform:translate(-50%,-50%);
  width:32px;
  height:32px;
  border-radius:50%;
  background:#fff;
  color:var(--asap-navy);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  font-weight:700;
  line-height:1;
  box-shadow:0 2px 6px rgba(0,0,0,.18);
}
#c-hp-double-region,
#calendar-button{ display:none; }