/* =======================================================
   Crosschq Hero — Fresh CSS (tiles, QoH, CTAs, mobile)
   ======================================================= */

/* 0) Fonts */
@import url('https://fonts.googleapis.com/css2?family=Syncopate:wght@700&display=swap');

.cchq-hero__title {padding-bottom:20px;}
/* 1) Base + layout */
.cchq-hero, .cchq-hero * { box-sizing: border-box; }
.cchq-hero{
  --cchq-text: #0B1A33;
  --cchq-accent: #0A5CFF;
  --hero-a: rgba(79,174,251,.16);
  --hero-b: rgba(36,193,160,.12);
  color: var(--cchq-text);
  background:
    radial-gradient(60% 80% at 0% 8%, var(--hero-a), transparent 55%),
    radial-gradient(55% 70% at 100% 0%, var(--hero-b), transparent 58%),
    linear-gradient(135deg, var(--cchq-bg-from, #F7F9FF), var(--cchq-bg-to, #EEF3FF));
  padding: clamp(28px, 4vw, 56px) 20px;
  overflow-x: hidden;
}
@media (prefers-reduced-motion: no-preference){
  .cchq-hero{ animation: cchqHeroDrift 18s ease-in-out infinite alternate; }
  @keyframes cchqHeroDrift{
    0% { background-position: 0% 0%, 100% 0%, 0 0; }
    100%{ background-position: -6% 4%, 108% -3%, 0 0; }
  }
}
.cchq-hero__inner{
  margin: 0 auto;
  max-width: var(--cchq-maxw, 1220px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 40px);
}
.cchq-hero__left, .cchq-hero__right{ min-inline-size: 0; }
@media (min-width: 980px){
  .cchq-hero__inner{ grid-template-columns: 1.25fr 0.75fr; align-items: start; }
}

/* 2) Badge (linked vs static) */
.cchq-badge{
  display:inline-flex; gap:0px; align-items:center;
  font-weight:600; text-decoration:none;
  background: rgba(255,255,255,.65); backdrop-filter: blur(6px);
  border:1px solid rgba(0,0,0,.06); border-radius:999px;
  padding:6px 12px; margin-bottom:12px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
a.cchq-badge.cchq-badge--link:hover,
a.cchq-badge.cchq-badge--link:focus-visible{
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
  border-color: rgba(0,0,0,.12);
}
.cchq-badge--static{ cursor: default; }
.cchq-badge--static:hover{ transform:none; box-shadow:none; }
.cchq-badge--static:focus{ outline:none; }

/* 3) Headline + subhead */
.cchq-hero__title{
  font-size: clamp(28px, 4.6vw, 56px);
  line-height: 1.08; letter-spacing: -0.02em;
  margin: 6px 0 12px; word-wrap: break-word;
}
.cchq-hero__title img.cchq-star{
  height: 1.2em; width:auto; vertical-align:-0.2em; margin-right:.2em; padding-bottom:12px;
}
@media (min-width:1200px){ .cchq-hero__title img.cchq-star{ height: clamp(1.2em, 1.8vw, 70px); } }
@media (max-width:420px){ .cchq-hero__title img.cchq-star{ height: 1.1em; } }

.cchq-hero__subtitle{
  font-size: clamp(16px, 2vw, 18px);
  opacity:.85; margin:0 0 18px; max-width:60ch;
}

/* 4) CTAs — match sticky nav look */
.cchq-hero{
  --cta-fill: #F37021;          /* primary (orange) */
  --cta-secondary-fill: #4FAEFB;/* secondary (blue) */
  --cta-radius: 8px;
}
.cchq-cta-row{ display:flex; gap:16px; flex-wrap:wrap; margin:18px 0; }
.cchq-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 24px; min-height:46px;
  border-radius: var(--cta-radius); border:0;
  background: #003366; color:#fff;
  font-size:15px; font-weight:800; text-transform:uppercase; letter-spacing:.12em;
  text-decoration:none; line-height:1;
  transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.cchq-btn.is-secondary{
  background: var(--cta-secondary-fill); color:#fff; border:0;
}
.cchq-btn.is-secondary:hover, .cchq-btn.is-secondary:focus-visible{
  background: color-mix(in oklab, var(--cta-secondary-fill) 92%, black);
  box-shadow: 0 6px 14px rgba(0,0,0,.10);
}
.cchq-btn:focus-visible{
  outline:3px solid color-mix(in oklab, var(--cta-secondary-fill) 55%, white);
  outline-offset:2px;
}

/* 5) Tiles (cards) — clean, modern hover (no blob), arrow at end */
.cchq-paths{
  display:grid;
  grid-template-columns: repeat(1, minmax(0,1fr));
  gap:14px; margin-top:12px;
}
@media (min-width:640px){ .cchq-paths{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width:980px){ .cchq-paths{ grid-template-columns: repeat(3, minmax(0,1fr)); } }

.cchq-paths .cchq-card{
  position:relative; display:grid; align-content:start;
  text-decoration:none; color:inherit; cursor:pointer;
  background:#fff; border:1px solid rgba(10,30,60,.10); border-radius:18px;
  padding:18px 44px 18px 18px; min-height:120px;
  box-shadow:0 1px 3px rgba(10,30,60,.06);
  transition:
    transform .22s cubic-bezier(.2,.6,.2,1),
    border-color .22s cubic-bezier(.2,.6,.2,1),
    box-shadow .22s cubic-bezier(.2,.6,.2,1),
    background-color .22s cubic-bezier(.2,.6,.2,1);
}


/* subtle color wash cycles */
.cchq-paths .cchq-card{ background-image: radial-gradient(120% 120% at 0% 0%, rgba(79,174,251,.06), transparent 60%); }
.cchq-paths .cchq-card:nth-child(2n){ background-image: radial-gradient(120% 120% at 0% 0%, rgba(36,193,160,.06), transparent 60%); }
.cchq-paths .cchq-card:nth-child(3n){ background-image: radial-gradient(120% 120% at 0% 0%, rgba(255,163,72,.06), transparent 60%); }
.cchq-paths .cchq-card:nth-child(4n){ background-image: radial-gradient(120% 120% at 0% 0%, rgba(122,90,248,.06), transparent 60%); }

.cchq-paths .cchq-card__title{
  position:relative; margin:0; padding-right:1.6em;
  font-size:18px; line-height:1.35; letter-spacing:-0.01em; color:#0B1A33;
}
.cchq-paths .cchq-card__sub{ margin-top:6px; color: rgba(11,26,51,.72); }

/* arrow after title text */
.cchq-paths .cchq-card__title::after{
  content:"→"; position:absolute; right:0; top:.15em;
  opacity:0; transform: translateX(-6px);
  font-weight:800;
  transition: opacity .22s cubic-bezier(.2,.6,.2,1), transform .22s cubic-bezier(.2,.6,.2,1);
}

/* hover */
.cchq-paths .cchq-card:hover, .cchq-paths .cchq-card:focus-visible{
  transform: translateY(-1px);
  background: linear-gradient(180deg, #fff, #FAFCFF);
  border-color: rgba(79,174,251,.35);
  box-shadow: 0 10px 24px rgba(79,174,251,.10);
}
.cchq-paths .cchq-card:hover .cchq-card__title::after,
.cchq-paths .cchq-card:focus-visible .cchq-card__title::after{
  opacity:1; transform: translateX(2px);
}

/* mobile polish + 2-up between 390–640px */
@media (max-width:640px){
  .cchq-paths .cchq-card{ padding:16px 40px 16px 14px; min-height:112px; border-radius:14px; }
  .cchq-paths .cchq-card__title{ font-size:16px; padding-right:1.4em; }
}
@media (max-width:640px) and (min-width:390px){ .cchq-paths{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; } }
@media (max-width:389px){ .cchq-paths{ grid-template-columns: 1fr; } }

/* 6) QoH panel (glass), header pill right, sleek row hover */
.cchq-hero__right{ width:100%; }

.cchq-qoh{
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.92));
  backdrop-filter: blur(6px);
  border:1px solid rgba(79,174,251,.25);
  border-radius:20px; padding:16px;
  box-shadow:0 14px 36px rgba(79,174,251,.10);
}
.cchq-qoh__head{
  display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:10px;
}
.cchq-qoh__tag{
  font-weight:700; font-size:14px; color:#fff; border-radius:999px; padding:8px 12px;
  background: linear-gradient(180deg, #4FAEFB, #2595F7);
  box-shadow:0 6px 14px rgba(79,174,251,.22);
}
.cchq-link{ text-decoration:none; font-weight:700; color: var(--cchq-accent); }

/* list guard to avoid “bottom stretch” during swaps */
.cchq-qoh__list{
  list-style:none; margin:0; padding:0; display:grid; gap:10px;
  position:relative; overflow:hidden;
}

/* row */
.cchq-qoh__item{
  position:relative;
  display:grid;
  grid-template-columns: clamp(56px,7vw,64px) 1fr auto 16px;
  align-items:center; gap:12px;
  background:#fff; border:1px solid rgba(10,30,60,.10); border-radius:14px;
  padding:12px 14px;
  transition:
    background-color .22s cubic-bezier(.2,.6,.2,1),
    border-color .22s cubic-bezier(.2,.6,.2,1),
    transform .22s cubic-bezier(.2,.6,.2,1),
    box-shadow .22s cubic-bezier(.2,.6,.2,1);
}
.cchq-qoh__item::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:0px;
  border-radius:14px 0 0 14px;
  background: linear-gradient(180deg, var(--cchq-accent), color-mix(in oklab, var(--cchq-accent) 60%, white));
  transform: scaleY(0); transform-origin: top;
  transition: transform .24s cubic-bezier(.2,.6,.2,1);
}
.cchq-qoh__item:hover, .cchq-qoh__item:focus-visible{
  transform: translateY(-1px);
  background: linear-gradient(180deg, #fff, #fbfdff);
  border-color: rgba(79,174,251,.28);
  box-shadow: 0 8px 18px rgba(79,174,251,.08);
}
.cchq-qoh__item:hover::before, .cchq-qoh__item:focus-visible::before{ transform: scaleY(1); }

.cchq-qoh__logo img{
  width:clamp(56px,7vw,64px); height:clamp(56px,7vw,64px); object-fit:contain; display:block;
}
.cchq-qoh__placeholder{
  display:inline-grid; place-items:center;
  width:clamp(56px,7vw,64px); height:clamp(56px,7vw,64px);
  border-radius:12px; background:#eef2ff; font-weight:700;
}
.cchq-qoh__name{ font-weight:700; min-width:0; }
.cchq-qoh__scorewrap{ display:flex; flex-direction:column; align-items:flex-end; line-height:1; }
.cchq-qoh__score{
  font-family:'Syncopate', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  font-weight:700; font-size:clamp(18px,3vw,24px); letter-spacing:.02em;
  font-variant-numeric: tabular-nums; color:#003366; opacity:.95;
}
.cchq-qoh__label{ font-size:10px; text-transform:uppercase; letter-spacing:.08em; opacity:.6; margin-top:4px; text-align:right; }
.cchq-qoh__chev{ font-size:22px; opacity:.35; transition: transform .2s cubic-bezier(.2,.6,.2,1), opacity .2s; }
.cchq-qoh__item:hover .cchq-qoh__chev,
.cchq-qoh__item:focus-visible .cchq-qoh__chev{ transform: translateX(2px); opacity:.5; }

/* make whole widget feel clickable only if data-href present */
.cchq-qoh[data-href]{ cursor:pointer; }

/* overlay link should NOT block row hovers/clicks */
.cchq-stretch{ pointer-events:none; }

/* 7) Mobile specifics for QoH */
@media (max-width:979px){
  .cchq-qoh, .cchq-qoh-image{ order:3; }
  .cchq-qoh__list{ grid-auto-flow: row; }
}

/* 8) Accessibility + motion */
.cchq-card:focus-visible, .cchq-btn:focus-visible, .cchq-badge:focus-visible,
.cchq-link:focus-visible, .cchq-qoh__item:focus-visible{
  outline: 3px solid color-mix(in oklab, var(--cchq-accent) 60%, white);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
  .cchq-card, .cchq-btn, .cchq-qoh__item{ transition:none; }
  .cchq-paths .cchq-card:hover, .cchq-paths .cchq-card:focus-visible{ transform:none; box-shadow:none; }
}



/* =========================================
   HERO TILES — polished default (no hover)
   ========================================= */
.cchq-paths{
  display:grid;
  grid-template-columns: repeat(1, minmax(0,1fr));
  gap:14px;
  margin-top:12px;
}
@media (min-width: 640px){ .cchq-paths{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 980px){ .cchq-paths{ grid-template-columns: repeat(3, minmax(0,1fr)); } }

.cchq-paths .cchq-card{
  /* Brandable knobs */
  --tile-rail: #4FAEFB;
  --tile-wash: rgba(79,174,251,.08);
  --tile-border: rgba(10,30,60,.12);
  --tile-shadow: 0 1px 2px rgba(10,30,60,.10), 0 6px 14px rgba(10,30,60,.06);

  position:relative; display:grid; align-content:start;
  text-decoration:none; color:inherit; cursor:pointer;

  /* Surface (stronger than plain white, but still quiet) */
  background:
    radial-gradient(140% 120% at 12% 0%, var(--tile-wash), transparent 58%),
    #fff;
  border:1px solid var(--tile-border);
  border-radius:18px;
  padding:18px 44px 18px 18px; /* room for arrow */
  min-height:120px;
  box-shadow: var(--tile-shadow);
  transition:
    transform .22s cubic-bezier(.2,.6,.2,1),
    border-color .22s cubic-bezier(.2,.6,.2,1),
    box-shadow .22s cubic-bezier(.2,.6,.2,1),
    background-color .22s cubic-bezier(.2,.6,.2,1);
}

/* Always-on accent rail (very subtle at rest) */
.cchq-paths .cchq-card::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:3px;
  border-radius:18px 0 0 18px;
  background: linear-gradient(180deg, var(--tile-rail), color-mix(in oklab, var(--tile-rail) 55%, white));
  opacity:.18;                     /* soft at rest */
  pointer-events:none;
}

/* Arrow after the title — faint at rest so tiles feel actionable */
.cchq-paths .cchq-card__title{
  position:relative; margin:0; padding-right:1.6em;
  font-size:18px; line-height:1.35;
  letter-spacing:-0.01em;
  color:#0B1A33;
  font-weight:700;                 /* bumps scan-ability */
}
.cchq-paths .cchq-card__sub{
  margin-top:6px; color: rgba(11,26,51,.72);
}
.cchq-paths .cchq-card__title::after{
  content:"→";
  position:absolute; right:0; top:.15em;
  opacity:.28;                     /* visible at rest */
  transform: translateX(0);
  font-weight:800;
  transition: opacity .22s cubic-bezier(.2,.6,.2,1),
              transform .22s cubic-bezier(.2,.6,.2,1);
}

/* Hover/focus keeps the same style language, just enhances it */
.cchq-paths .cchq-card:hover,
.cchq-paths .cchq-card:focus-visible{
  transform: translateY(-1px);
  border-color: rgba(79,174,251,.35);
  box-shadow: 0 10px 24px rgba(79,174,251,.10);
  background:
    radial-gradient(140% 120% at 12% 0%, rgba(79,174,251,.10), transparent 60%),
    #fff;
}
.cchq-paths .cchq-card:hover::before,
.cchq-paths .cchq-card:focus-visible::before{
  opacity:.9; width:6px;           /* rail thickens on hover */
}
.cchq-paths .cchq-card:hover .cchq-card__title::after,
.cchq-paths .cchq-card:focus-visible .cchq-card__title::after{
  opacity:1; transform: translateX(3px);
}

/* Mobile polish + 2-up between 390–640px */
@media (max-width:640px){
  .cchq-paths .cchq-card{ padding:16px 40px 16px 14px; min-height:112px; border-radius:14px; }
  .cchq-paths .cchq-card__title{ font-size:16px; padding-right:1.4em; }
}
@media (max-width:640px) and (min-width:390px){
  .cchq-paths{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
}
@media (max-width:389px){
  .cchq-paths{ grid-template-columns: 1fr; }
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  .cchq-paths .cchq-card{ transition:none; }
  .cchq-paths .cchq-card:hover,
  .cchq-paths .cchq-card:focus-visible{ transform:none; box-shadow:none; }
}





/* ============================
   Crosschq Hero — Polish Pack
   ============================ */

/* Brand tokens / defaults */
.cchq-hero {
  --brand-blue: #4FAEFB;
  --brand-navy: #0B1A33;
  --brand-midnight: #0A1633;
  --accent: var(--cchq-accent, #0A5CFF);
  --surface: #ffffff;
  --ink: #0B1A33;
  --ink-soft: rgba(11,26,51,.72);

  /* CTA knobs (matches sticky nav vibe) */
  --cta-fill: #F37021;
  --cta-fill-2: #4FAEFB;
  --cta-radius: 8px;

  /* Background tints */
  --hero-a: rgba(79,174,251,.16);
  --hero-b: rgba(36,193,160,.12);

  color: var(--ink);
  background:
    radial-gradient(60% 80% at 0% 8%, var(--hero-a), transparent 55%),
    radial-gradient(55% 70% at 100% 0%, var(--hero-b), transparent 58%),
    linear-gradient(135deg, var(--cchq-bg-from, #F7F9FF), var(--cchq-bg-to, #EEF3FF));
  padding: clamp(28px, 4vw, 56px) 20px;
  overflow-x: hidden;
}

/* Dark theme toggle — add class "is-dark" on the section if you want it */
.cchq-hero.is-dark {
  --surface: rgba(255,255,255,.06);
  --ink: #E9F1FF;
  --ink-soft: rgba(233,241,255,.80);
  background:
    radial-gradient(70% 80% at 10% 0%, rgba(79,174,251,.20), transparent 58%),
    radial-gradient(60% 70% at 100% 10%, rgba(10,92,255,.18), transparent 60%),
    linear-gradient(135deg, #0B1533, #071025);
}

/* Gentle drift (turns off for prefers-reduced-motion) */
@media (prefers-reduced-motion: no-preference){
  .cchq-hero{ animation: cchqHeroDrift 18s ease-in-out infinite alternate; }
  @keyframes cchqHeroDrift{
    0%   { background-position: 0% 0%, 100% 0%, 0 0; }
    100% { background-position: -6% 4%, 108% -3%, 0 0; }
  }
}

.cchq-hero__inner {
  margin: 0 auto;
  max-width: var(--cchq-maxw, 1220px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 40px);
}
@media (min-width: 980px){
  .cchq-hero__inner { grid-template-columns: 1.25fr 0.75fr; align-items: start; }
}

/* Badge (keeps your link/static logic) */
.cchq-badge{
  display:inline-flex; gap:0px; align-items:center;
  font-weight:600; text-decoration:none;
  background: rgba(255,255,255,.65); backdrop-filter: blur(6px);
  border:1px solid rgba(0,0,0,.06); border-radius:999px;
  padding:6px 12px; margin-bottom:12px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    margin:0 0 12px;       
  font-size:16px;        
  line-height:1;         
}
a.cchq-badge.cchq-badge--link:hover,
a.cchq-badge.cchq-badge--link:focus-visible{
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
  border-color: rgba(0,0,0,.12);
}
.cchq-badge--static{ cursor: default; }

/* Headline + gradient accent on <b> (no markup changes) */
.cchq-hero__title{
  font-size: clamp(28px, 4.6vw, 56px);
  line-height: 1.08; letter-spacing: -0.02em;
  margin: 6px 0 12px; word-wrap: break-word;
  color: var(--ink);
}
.cchq-hero__title b{
  background: linear-gradient(90deg, var(--accent), #4AC8F9 60%, #24C1A0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 1px 0 rgba(255,255,255,.06);
}
.cchq-hero.is-dark .cchq-hero__title{ color:#E9F1FF; }
.cchq-hero.is-dark .cchq-hero__title b{ text-shadow: none; }

.cchq-hero__subtitle{
  font-size: clamp(16px, 2vw, 18px);
  color: var(--ink-soft);
  margin: 0 0 18px;
  max-width: 60ch;
}

/* CTAs — square, nav-like */
.cchq-cta-row{ display:flex; gap:16px; flex-wrap:wrap; margin:18px 0; }
.cchq-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 24px; min-height:46px;
  border-radius: var(--cta-radius); border:0;
  background: #003366; color:#fff !important;
  font-size:15px; font-weight:800; text-transform:uppercase; letter-spacing:.12em;
  text-decoration:none; line-height:1;
  transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.cchq-btn.is-secondary{ background: var(--cta-fill-2); }


/* Tiles — refined default (nice at rest, elegant hover) */
.cchq-paths{
  display:grid;
  grid-template-columns: repeat(1, minmax(0,1fr));
  gap:14px; margin-top:40px;
}
@media (min-width:640px){ .cchq-paths{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width:980px){ .cchq-paths{ grid-template-columns: repeat(3, minmax(0,1fr)); } }

.cchq-card{
  position:relative; display:grid; align-content:start;
  text-decoration:none; color:inherit; cursor:pointer;
  background:
    radial-gradient(140% 120% at 12% 0%, rgba(79,174,251,.08), transparent 58%),
    var(--surface);
  border:1px solid rgba(10,30,60,.12);
  border-radius:18px;
  padding:18px 44px 18px 18px; min-height:120px;
  box-shadow: 0 1px 2px rgba(10,30,60,.10), 0 6px 14px rgba(10,30,60,.06);
  transition:
    transform .22s cubic-bezier(.2,.6,.2,1),
    border-color .22s cubic-bezier(.2,.6,.2,1),
    box-shadow .22s cubic-bezier(.2,.6,.2,1),
    background-color .22s cubic-bezier(.2,.6,.2,1);
}
/* subtle left rail at rest + thicken on hover */
.cchq-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  border-radius:18px 0 0 18px;
  background: linear-gradient(180deg, var(--accent), color-mix(in oklab, var(--accent) 55%, white));
  opacity:.18; transition: width .22s ease, opacity .22s ease;
}
.cchq-card:hover::before, .cchq-card:focus-visible::before{ width:6px; opacity:.9; }

/* Title + arrow */
.cchq-card__title{
  position:relative; margin:0; padding-right:1.6em;
  font-size:18px; line-height:1.35; letter-spacing:-0.01em; color:var(--ink); font-weight:700;
}
.cchq-card__title::after{
  content:"→"; position:absolute; right:0; top:.15em;
  opacity:.28; transform: translateX(0);
  font-weight:800;
  transition: opacity .22s cubic-bezier(.2,.6,.2,1), transform .22s cubic-bezier(.2,.6,.2,1);
}
.cchq-card__sub{ margin-top:6px; color: var(--ink-soft); }

.cchq-card:hover, .cchq-card:focus-visible{
  transform: translateY(-1px);
  border-color: rgba(79,174,251,.35);
  box-shadow: 0 10px 24px rgba(79,174,251,.10);
  background:
    radial-gradient(140% 120% at 12% 0%, rgba(79,174,251,.10), transparent 60%),
    var(--surface);
}
.cchq-card:hover .cchq-card__title::after,
.cchq-card:focus-visible .cchq-card__title::after{
  opacity:1; transform: translateX(3px);
}

/* Mobile grid: 2-up between 390–640px */
@media (max-width:640px){
  .cchq-card{ padding:16px 40px 16px 14px; min-height:112px; border-radius:14px; }
  .cchq-card__title{ font-size:16px; padding-right:1.4em; }
}
@media (max-width:640px) and (min-width:390px){ .cchq-paths{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; } }
@media (max-width:389px){ .cchq-paths{ grid-template-columns: 1fr; } }

/* QoH panel — “glass” + score shine */
.cchq-hero__right{ width:100%; }

.cchq-qoh{
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.92));
  backdrop-filter: blur(6px);
  border:1px solid rgba(79,174,251,.25);
  border-radius:20px; padding:16px;
  box-shadow:0 14px 36px rgba(79,174,251,.10);
}
.cchq-hero.is-dark .cchq-qoh{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.08));
  border-color: rgba(79,174,251,.28);
}

.cchq-qoh__head{
  display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:10px;
}
.cchq-qoh__tag{
  font-weight:700; font-size:14px; color:#fff; border-radius:999px; padding:8px 12px;
  background: linear-gradient(180deg, #4FAEFB, #2595F7);
  box-shadow:0 6px 14px rgba(79,174,251,.22);
}

.cchq-qoh__list{
  list-style:none; margin:0; padding:0; display:grid; gap:10px;
  position:relative; overflow:hidden; /* avoids bottom “jump” during swaps */
}

.cchq-qoh__item{
  position:relative;
  display:grid;
  grid-template-columns: clamp(56px,7vw,64px) 1fr auto 16px;
  align-items:center; gap:12px;
  background:#fff; border:1px solid rgba(10,30,60,.10); border-radius:14px;
  padding:12px 14px;
  transition:
    background-color .22s cubic-bezier(.2,.6,.2,1),
    border-color .22s cubic-bezier(.2,.6,.2,1),
    transform .22s cubic-bezier(.2,.6,.2,1),
    box-shadow .22s cubic-bezier(.2,.6,.2,1);
}
.cchq-hero.is-dark .cchq-qoh__item{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }

.cchq-qoh__item:hover, .cchq-qoh__item:focus-visible{
  transform: translateY(-1px);
  background: linear-gradient(180deg, #fff, #fbfdff);
  border-color: rgba(79,174,251,.28);
  box-shadow: 0 8px 18px rgba(79,174,251,.08);
}

/* score (Syncopate) + subtle “shine” on row hover */
@import url('https://fonts.googleapis.com/css2?family=Syncopate:wght@700&display=swap');
.cchq-qoh__score{
  position: relative;
  font-family:'Syncopate', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-weight:700; font-size:clamp(18px,3vw,24px); letter-spacing:.02em;
  font-variant-numeric: tabular-nums; color:#003366; opacity:.95;
}
.cchq-qoh__item:hover .cchq-qoh__score::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.9) 50%, transparent 100%);
  transform: translateX(-120%) skewX(-20deg);
  animation: cchqShine 900ms ease;
}
@keyframes cchqShine{
  to { transform: translateX(120%) skewX(-20deg); }
}
.cchq-qoh__label{ font-size:10px; text-transform:uppercase; letter-spacing:.08em; opacity:.6; margin-top:4px; text-align:right; }
.cchq-qoh__chev{ font-size:22px; opacity:.35; transition: transform .2s cubic-bezier(.2,.6,.2,1), opacity .2s; }
.cchq-qoh__item:hover .cchq-qoh__chev{ transform: translateX(2px); opacity:.5; }

.cchq-qoh[data-href]{ cursor: pointer; }
.cchq-stretch{ pointer-events: none; }

/* Mobile tweaks */
@media (max-width:979px){
  .cchq-qoh, .cchq-qoh-image { order:3; }
  .cchq-qoh__list { grid-auto-flow: row; }
}

/* Focus states */
.cchq-card:focus-visible, .cchq-btn:focus-visible, .cchq-badge:focus-visible,
.cchq-link:focus-visible, .cchq-qoh__item:focus-visible {
  outline: 3px solid color-mix(in oklab, var(--accent) 60%, white);
  outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .cchq-card, .cchq-btn, .cchq-qoh__item { transition:none; }
  .cchq-card:hover, .cchq-card:focus-visible { transform:none; box-shadow:none; }
}



/* QoH container — gradient frame + glass */
.cchq-qoh{
  --frame-a: rgba(79,174,251,.65);
  --frame-b: rgba(36,193,160,.65);

  position: relative;
  border-radius: 20px;
  padding: 16px;

  /* Gradient border using layered backgrounds */
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.92)) padding-box,
    linear-gradient(135deg, var(--frame-a), var(--frame-b)) border-box;

  backdrop-filter: blur(6px);
  box-shadow:
    0 14px 36px rgba(79,174,251,.10),
    0 2px 0 rgba(255,255,255,.6) inset,
    0 -1px 0 rgba(10,30,60,.06) inset;
}

/* Subtle inner glow & hairline — makes rows feel inset */
.cchq-qoh::after{
  content:"";
  position:absolute; inset:0; border-radius: inherit;
  pointer-events:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(10,30,60,.06);
}

/* Soft corner highlight (top-right) for depth */
.cchq-qoh::before{
  content:"";
  position:absolute; right:-24px; top:-24px;
  width:220px; height:220px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(79,174,251,.18), transparent 70%);
  filter: blur(8px);
  pointer-events:none;
}

/* Dark hero refinement (if you use .cchq-hero.is-dark) */
.cchq-hero.is-dark .cchq-qoh{
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.10)) padding-box,
    linear-gradient(135deg, var(--frame-a), var(--frame-b)) border-box;
  box-shadow:
    0 16px 40px rgba(0,0,0,.35),
    0 1px 0 rgba(255,255,255,.06) inset,
    0 -1px 0 rgba(255,255,255,.04) inset;
}





/* CTA button — gradient hover that matches the title */
.cchq-hero{
  /* reuse the title gradient stops */
  --grad-a: var(--cchq-accent, #0A5CFF);
  --grad-b: #4AC8F9;
  --grad-c: #24C1A0;
}

.cchq-cta-row{ display:flex; gap:16px; flex-wrap:wrap; margin:18px 0; }

.cchq-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 24px; min-height:46px;
  border-radius: 10px;
  border: 0;
  color:#fff !important;
  font-size:15px; font-weight:800; text-transform:uppercase; letter-spacing:.12em;
  line-height:1; text-decoration:none;

  /* base fill */
  background-color:#003366;

  /* gradient layer sits “under” and animates in */
  background-image: linear-gradient(90deg, var(--grad-a), var(--grad-b) 60%, var(--grad-c));
  background-size: 0% 100%;                 /* hidden at rest */
  background-position: 0 0;
  background-repeat: no-repeat;

  transition:
    background-size .35s ease,
    box-shadow .25s ease,
    transform .15s ease;
}

.cchq-btn:hover,
.cchq-btn:focus-visible{
  /* reveal the gradient */
  background-size: 100% 100%;
  transform: translateY(0);
  box-shadow: 0 10px 24px rgba(10,92,255,.18), 0 4px 12px rgba(36,193,160,.16);
  outline: 3px solid color-mix(in oklab, var(--grad-b) 40%, white);
  outline-offset: 2px;
}

/* Secondary CTA—keeps its blue base, but adopts same gradient on hover for consistency */
.cchq-btn.is-secondary{
  background-color:#4FAEFB;
}
.cchq-btn.is-secondary:hover,
.cchq-btn.is-secondary:focus-visible{
  background-image: linear-gradient(90deg, var(--grad-a), var(--grad-b) 60%, var(--grad-c));
  background-size: 100% 100%;
}




/* ============================================
   AURORA NAVY v2 — hero, badge, CTA, tiles, QoH
   ============================================ */

/* 1) Dark hero background with aurora drift */
.cchq-hero{
  position: relative;
  isolation: isolate;
  color:#EAF2FF;
  background: linear-gradient(180deg,#041A34 0%, #0B2F5E 55%, #0A3A73 100%);
  overflow:hidden;
}
.cchq-hero::before,
.cchq-hero::after{
  content:"";
  position:absolute; inset:-20% -10% auto -10%;
  height:160%; pointer-events:none; z-index:0;
  filter: blur(54px);
  background:
    radial-gradient(45% 35% at 12% 15%, rgba(79,174,251,.40), transparent 60%),
    radial-gradient(40% 30% at 88% 10%, rgba(36,193,160,.35), transparent 65%),
    radial-gradient(55% 40% at 55% 35%, rgba(10,92,255,.22), transparent 60%);
  opacity:.55;
  transform: translate3d(0,0,0);
}
.cchq-hero::after{
  inset:auto -20% -25% -20%;
  filter: blur(60px);
  background:
    radial-gradient(55% 40% at 25% 60%, rgba(36,193,160,.30), transparent 65%),
    radial-gradient(45% 35% at 80% 55%, rgba(79,174,251,.28), transparent 60%);
  opacity:.45;
}
@media (prefers-reduced-motion: no-preference){
  @keyframes cchqAuroraDrift{ 0%{transform:translate3d(0,0,0)} 100%{transform:translate3d(-2%,2%,0)} }
  .cchq-hero::before{ animation:cchqAuroraDrift 16s ease-in-out infinite alternate; }
  .cchq-hero::after { animation:cchqAuroraDrift 20s ease-in-out infinite alternate-reverse; }
}

/* Keep content above the aurora */
.cchq-hero__inner, .cchq-hero__left, .cchq-hero__right{ position:relative; z-index:1; }

/* 2) Badge — glass/gradient pill (no gray) */
.cchq-badge{
  color:#EAF2FF;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.10));
  border:1px solid rgba(255,255,255,.28);
  box-shadow: 0 6px 14px rgba(10,92,255,.18) inset, 0 2px 10px rgba(0,0,0,.18);
  backdrop-filter: blur(6px);
}
.cchq-badge:hover, .cchq-badge:focus-visible{
  transform: translateY(-1px);
  border-color: rgba(79,174,251,.55);
  box-shadow: 0 8px 18px rgba(10,92,255,.26) inset, 0 6px 18px rgba(0,0,0,.25);
}

/* 3) Headline + gradient span (lighter blues so it pops on navy) */
.cchq-hero__title{ color:#EAF2FF; }
.cchq-hero__title b{
  background: linear-gradient(90deg,#7EC6FF 0%, #58D4E0 45%, #24C1A0 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 1px 0 rgba(0,0,0,.25); /* subtle edge on dark */
}

/* 4) CTA — not blending, strong gradient + glow */
.cchq-btn{
  background: linear-gradient(90deg,#58B0FF 0%, #24C1A0 100%);
  color:#fff !important;
  box-shadow: 0 10px 28px rgba(36,193,160,.32), 0 3px 6px rgba(0,0,0,.25);
  border:0;
}
.cchq-btn:hover, .cchq-btn:focus-visible{
  filter: saturate(1.05) brightness(1.03);
  transform: translateY(0);
  box-shadow: 0 14px 34px rgba(36,193,160,.4), 0 6px 12px rgba(0,0,0,.3);
}
.cchq-btn.is-secondary{
  background: linear-gradient(90deg,#7EC6FF 0%, #58B0FF 100%);
}

/* 5) Tiles — premium hover (gradient frame + sheen) */
.cchq-card{
  background:#fff;
  border:1px solid transparent;
  border-radius:18px;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg, rgba(79,174,251,.5), rgba(36,193,160,.5)) border-box;
  box-shadow: 0 1px 2px rgba(10,30,60,.12), 0 8px 20px rgba(10,30,60,.10);
  overflow:hidden;
}
.cchq-card::after{
  content:""; position:absolute; inset:0 0 auto 0; height:110%;
  background: radial-gradient(60% 40% at 110% -10%, rgba(79,174,251,.18), transparent 60%);
  transform: translateX(-6%); transition: transform .28s ease;
  pointer-events:none;
}
.cchq-card:hover::after, .cchq-card:focus-visible::after{ transform: translateX(0%); }
.cchq-card__title{ color:#0B1A33; }
.cchq-card__title::after{ opacity:.35; }
.cchq-card:hover .cchq-card__title::after,
.cchq-card:focus-visible .cchq-card__title::after{ opacity:.9; transform:translateX(4px); }
.cchq-card:hover, .cchq-card:focus-visible{
  box-shadow: 0 12px 28px rgba(10,92,255,.16), 0 4px 10px rgba(0,0,0,.14);
  border-image: linear-gradient(135deg, rgba(79,174,251,.85), rgba(36,193,160,.85)) 1;
}

/* 6) QoH (HubDB) — readable on dark + nicer frame */
.cchq-qoh{
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.12)) padding-box,
    linear-gradient(135deg, rgba(79,174,251,.65), rgba(36,193,160,.65)) border-box;
  backdrop-filter: blur(8px);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
}
.cchq-qoh__tag{
  background: linear-gradient(180deg,#4FAEFB,#2595F7);
  color:#fff;
  box-shadow: 0 6px 14px rgba(79,174,251,.25);
}
.cchq-qoh__list{ gap:10px; }
.cchq-qoh__item{
  background: rgba(255,255,255,.96);
  border:1px solid rgba(10,30,60,.12);
  box-shadow: 0 1px 2px rgba(10,30,60,.10);
}
.cchq-qoh__name{ color:#0B1A33; font-weight:700; }
.cchq-qoh__score{ color:#0B1A33; }
.cchq-qoh__label{ color: rgba(11,26,51,.60); }

/* Keep container obviously interactive */
.cchq-qoh[data-href]{ cursor:pointer; }

/* Don’t let any overlay block row hover; click is handled via JS */
.cchq-stretch{ pointer-events:none; }

/* 7) Subhead color on dark */
.cchq-hero__subtitle{ color: rgba(233,241,255,.88); }

/* Optional: slight bump to badge spacing on dark */
.cchq-badge{ margin-top: 4px; }



/* --- TILE HOVER v3: crisp, rounded, underlay-only (no overlay on text) --- */

/* Base: ensure all visual effects are clipped to the rounded shape */
.cchq-paths .cchq-card{
  position: relative;
  overflow: hidden;                 /* hard-clip any effects to radius */
  clip-path: inset(0 round 18px);   /* belt + suspenders for Safari quirks */
  border-radius: 18px;
  isolation: isolate;               /* keeps underlays beneath content */
  will-change: transform, box-shadow;
}

/* Keep content above the effects */
.cchq-paths .cchq-card .cchq-card__content{
  position: relative;
  z-index: 1;
}

/* We’ll use BOTH pseudos as UNDERLAYS (behind text) */
.cchq-paths .cchq-card::before,
.cchq-paths .cchq-card::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0; /* under content */
}

/* 1) Underlay wash (very subtle color; never covers text) */
.cchq-paths .cchq-card{
  --accent-1: var(--cchq-accent, #0A5CFF);
  --accent-2: #24C1A0;
}
.cchq-paths .cchq-card::before{
  opacity: 0;                        /* hidden at rest */
  background:
    radial-gradient(130% 140% at 8% -10%, color-mix(in oklab, var(--accent-1) 12%, transparent), transparent 62%),
    radial-gradient(130% 140% at 108% 120%, color-mix(in oklab, var(--accent-2) 12%, transparent), transparent 64%);
  transition: opacity .22s cubic-bezier(.2,.6,.2,1);
}

/* 2) Gradient ring (on the BORDER only) using layered backgrounds */
.cchq-paths .cchq-card::after{
  opacity: 0;                        /* appear on hover */
  border: 1px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, var(--accent-1), var(--accent-2)) border-box;
  transition: opacity .22s cubic-bezier(.2,.6,.2,1);
}

/* Hover/focus: lift + crisp glow + show ring + underlay */
.cchq-paths .cchq-card:hover,
.cchq-paths .cchq-card:focus-visible{
  transform: translateY(-2px);
  box-shadow:
    0 12px 28px rgba(0,40,120,.16),
    0 6px 14px rgba(0,0,0,.06);
  border-color: transparent;         /* ring draws the border */
}
.cchq-paths .cchq-card:hover::after,
.cchq-paths .cchq-card:focus-visible::after{ opacity: 1; }
.cchq-paths .cchq-card:hover::before,
.cchq-paths .cchq-card:focus-visible::before{ opacity: 1; }

/* Arrow motion: tasteful, not gimmicky */
.cchq-paths .cchq-card__title::after{
  opacity: .32;
  transition: opacity .18s cubic-bezier(.2,.6,.2,1),
              transform .18s cubic-bezier(.2,.6,.2,1);
}
.cchq-paths .cchq-card:hover .cchq-card__title::after,
.cchq-paths .cchq-card:focus-visible .cchq-card__title::after{
  opacity: .9;
  transform: translateX(4px);
}

/* If any older rail/wash effects are still present, neutralize them */
.cchq-paths .cchq-card[data-reset="1"]::before,
.cchq-paths .cchq-card[data-reset="1"]::after{
  /* no-op marker if you add data-reset="1" in HTML; not required */
}

/* Optional: slightly denser shadow on very large screens */
@media (min-width:1200px){
  .cchq-paths .cchq-card:hover,
  .cchq-paths .cchq-card:focus-visible{
    box-shadow:
      0 16px 34px rgba(0,40,120,.16),
      0 8px 18px rgba(0,0,0,.06);
  }
}





/* ---------------------------------------------
   TILES — vibrant hover (tinted surface + glow)
   --------------------------------------------- */

/* Base guard so effects are clipped to the rounded shape */
.cchq-paths .cchq-card{
  position: relative;
  overflow: hidden;
  clip-path: inset(0 round 18px);
  border-radius: 18px;
  isolation: isolate;                 /* keeps underlays behind content */
  background:
    radial-gradient(130% 120% at 12% 0%, rgba(79,174,251,.06), transparent 60%),
    #fff;                             /* calm white at rest */
  transition:
    background-color .22s cubic-bezier(.2,.6,.2,1),
    background .22s cubic-bezier(.2,.6,.2,1),
    transform .22s cubic-bezier(.2,.6,.2,1),
    box-shadow .22s cubic-bezier(.2,.6,.2,1);
}

/* Keep text above any effects */
.cchq-paths .cchq-card .cchq-card__content{
  position: relative;
  z-index: 1;
}

/* Underlay wash (behind content, never over text) */
.cchq-paths .cchq-card::before{
  content:"";
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  z-index:0;
  opacity:0;                          /* appear on hover */
  background:
    radial-gradient(140% 140% at 6% -8%, rgba(79,174,251,.14), transparent 62%),
    radial-gradient(140% 140% at 110% 115%, rgba(36,193,160,.12), transparent 64%);
  transition: opacity .22s cubic-bezier(.2,.6,.2,1);
}

/* Gradient border ring (crisp, still under the content) */
.cchq-paths .cchq-card::after{
  content:"";
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  z-index:0;
  opacity:0;                          /* appear on hover */
  border:1px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, var(--cchq-accent, #0A5CFF), #24C1A0) border-box;
  transition: opacity .22s cubic-bezier(.2,.6,.2,1);
}

/* A pleasant tint for the whole tile on hover (no overlay over text) */
.cchq-paths .cchq-card:hover,
.cchq-paths .cchq-card:focus-visible{
  /* subtle tinted base (fallback first) */
  background:
    radial-gradient(130% 120% at 12% 0%, rgba(79,174,251,.12), transparent 60%),
    #F6FAFF;
  /* modern browsers get a nicer mix */
}
@supports (color: color-mix(in oklab, white, black)){
  .cchq-paths .cchq-card:hover,
  .cchq-paths .cchq-card:focus-visible{
    background:
      radial-gradient(130% 120% at 12% 0%, color-mix(in oklab, var(--cchq-accent, #0A5CFF) 18%, transparent), transparent 60%),
      color-mix(in oklab, #ffffff 88%, var(--cchq-accent, #0A5CFF) 12%);
  }
}

/* Show the ring + wash and add a clean, modern glow */
.cchq-paths .cchq-card:hover::after,
.cchq-paths .cchq-card:focus-visible::after{ opacity:1; }
.cchq-paths .cchq-card:hover::before,
.cchq-paths .cchq-card:focus-visible::before{ opacity:1; }
.cchq-paths .cchq-card:hover,
.cchq-paths .cchq-card:focus-visible{
  transform: translateY(-2px);
  box-shadow:
    0 18px 34px rgba(10,92,255,.18),
    0 8px 18px rgba(0,0,0,.07);
}

/* Arrow motion stays tasteful */
.cchq-paths .cchq-card__title::after{
  opacity:.32; transform: translateX(0);
  transition: opacity .18s cubic-bezier(.2,.6,.2,1), transform .18s cubic-bezier(.2,.6,.2,1);
}
.cchq-paths .cchq-card:hover .cchq-card__title::after,
.cchq-paths .cchq-card:focus-visible .cchq-card__title::after{
  opacity:.9; transform: translateX(4px);
}


/* ---------------------------------------------
   HEADLINE GRADIENT — brighter, more vibrant
   --------------------------------------------- */

/* Apply to the gradient span inside the H1.
   Use either <b>…</b> (as you have) or <span data-gradient>…</span> */
.cchq-hero__title b,
.cchq-hero__title span[data-gradient]{
  display:inline-block;                /* helps the gradient render crisply */
  background: linear-gradient(
    92deg,
    #2D7BFF 0%,
    #00C6FF 35%,
    #00E0C1 68%,
    #9BFF70 100%
  );
  -webkit-background-clip:text;
          background-clip:text;
  -webkit-text-fill-color: transparent;
  color: transparent;

  /* extra pop */
  filter: saturate(120%) contrast(115%);
  text-shadow: 0 0 0.5px rgba(255,255,255,.35); /* keeps edges bright on dark bg */
}

/* If your hero background is very dark, deepen the edge contrast slightly */
.cchq-hero.is-dark .cchq-hero__title b,
.cchq-hero.is-dark .cchq-hero__title span[data-gradient]{
  text-shadow: 0.5px 0.5px 0 rgba(0,0,0,.25), 0 0 0.5px rgba(255,255,255,.18);
}






/* =========================================================
   CCHQ TILES — Monochrome Arrows + Subtle Radial Glow
   Paste at the END of your stylesheet.
   ========================================================= */

/* 0) Reset legacy tile effects so nothing leaks through */
.cchq-hero .cchq-paths .cchq-card{
  border-image: initial !important;
  background-image: none;
}
.cchq-hero .cchq-paths .cchq-card::before,
.cchq-hero .cchq-paths .cchq-card::after{
  content: none !important;
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* 1) Vars for the new, calm look (adjust here if needed) */
.cchq-hero{
  --tile-ui: #003366;        /* Arrow chip + dot (brand navy) */
  --tile-glow: #4FAEFB;      /* Hover glow (soft brand blue) */
  --tile-border: rgba(10,30,60,.12);
  --tile-shadow: 0 1px 2px rgba(10,30,60,.10), 0 6px 14px rgba(10,30,60,.06);
  --tile-shadow-hover: 0 12px 28px rgba(0,40,120,.16), 0 8px 18px rgba(0,0,0,.06);
}

/* 2) Grid (unchanged) */
.cchq-hero .cchq-paths{
  display:grid; gap:14px; margin-top:14px;
  grid-template-columns: repeat(1, minmax(0,1fr));
}
@media (min-width:640px){ .cchq-hero .cchq-paths{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width:980px){ .cchq-hero .cchq-paths{ grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* 3) Fresh base card (quiet at rest, no color wash) */
.cchq-hero .cchq-paths .cchq-card{
  position:relative; display:grid; align-content:start;
  text-decoration:none; color:inherit; cursor:pointer;

  background:#fff;
  border:1px solid var(--tile-border);
  border-radius:18px;
  padding:18px 44px 18px 18px; /* room for arrow chip */
  min-height:120px;
  box-shadow: var(--tile-shadow);

  transition:
    transform .22s cubic-bezier(.2,.6,.2,1),
    box-shadow .22s cubic-bezier(.2,.6,.2,1),
    border-color .22s cubic-bezier(.2,.6,.2,1),
    background .22s cubic-bezier(.2,.6,.2,1);
  overflow:hidden; isolation:isolate;
  will-change: transform, box-shadow, background;
}

/* 4) Accent dot (monochrome) */
.cchq-hero .cchq-paths .cchq-card::before{
  content: "";
  position: absolute; top:14px; left:14px;
  width:10px; height:10px; border-radius:50%;
  background: var(--tile-ui);
  opacity:.95;
  transition: transform .25s ease, opacity .25s ease;
}

/* 5) Radial GLOW (hidden by default; shown on hover ONLY on the hovered tile) */
.cchq-hero .cchq-paths .cchq-card::after{
  content:"";
  position:absolute; inset:-10% -10% -10% -10%;
  pointer-events:none; z-index:0; border-radius:24px;
  background:
    radial-gradient(85% 70% at 50% 50%,
      color-mix(in oklab, var(--tile-glow) 16%, transparent),
      transparent 60%);
  opacity:0; transform: scale(1.02);
  transition: opacity .28s ease, transform .28s ease, filter .28s ease;
}

/* 6) Content */
.cchq-hero .cchq-paths .cchq-card .cchq-card__content{ position:relative; z-index:1; }
.cchq-hero .cchq-paths .cchq-card__title{
  margin:0; padding-right:2.2em;
  font-weight:800; letter-spacing:-0.01em;
  color:#0B1A33; font-size:18px; line-height:1.35;
}
.cchq-hero .cchq-paths .cchq-card__sub{ margin-top:6px; color: rgba(11,26,51,.70); }

/* 7) Arrow CHIP — single color (brand navy) */
.cchq-hero .cchq-paths .cchq-card__title::after{
  content:"→";
  position:absolute; right:0; top:.02em;
  width:26px; height:26px; display:inline-grid; place-items:center;
  font-weight:900; font-size:14px; color:#fff;
  background: var(--tile-ui);
  border-radius:999px;
  box-shadow: 0 4px 10px color-mix(in oklab, var(--tile-ui) 28%, transparent);
  transform: translateX(0);
  transition: transform .18s cubic-bezier(.2,.6,.2,1), filter .18s, box-shadow .18s;
  opacity:.96;
}

/* 8) Hover/focus: lift + glow + subtle chip motion */
.cchq-hero .cchq-paths .cchq-card:hover,
.cchq-hero .cchq-paths .cchq-card:focus-visible{
  transform: translateY(-2px);
  box-shadow: var(--tile-shadow-hover);
  border-color: rgba(10,30,60,.18);
}
.cchq-hero .cchq-paths .cchq-card:hover::after,
.cchq-hero .cchq-paths .cchq-card:focus-visible::after{
  opacity:1; transform: scale(1.00); filter: saturate(1.03);
}
.cchq-hero .cchq-paths .cchq-card:hover::before,
.cchq-hero .cchq-paths .cchq-card:focus-visible::before{
  transform: scale(1.08);
}
.cchq-hero .cchq-paths .cchq-card:hover .cchq-card__title::after,
.cchq-hero .cchq-paths .cchq-card:focus-visible .cchq-card__title::after{
  transform: translateX(3px);
  box-shadow: 0 8px 18px color-mix(in oklab, var(--tile-ui) 30%, transparent);
}

/* 9) Mobile + a11y */
@media (max-width:640px){
  .cchq-hero .cchq-paths .cchq-card{ padding:16px 44px 16px 14px; min-height:112px; border-radius:14px; }
  .cchq-hero .cchq-paths .cchq-card__title{ font-size:16px; padding-right:2em; }
}
.cchq-hero .cchq-paths .cchq-card:focus-visible{
  outline:3px solid color-mix(in oklab, var(--tile-ui) 45%, white);
  outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  .cchq-hero .cchq-paths .cchq-card{ transition:none; }
  .cchq-hero .cchq-paths .cchq-card:hover,
  .cchq-hero .cchq-paths .cchq-card:focus-visible{
    transform:none; box-shadow: var(--tile-shadow);
  }
}

/* =========================================================
   FIX PACK — Enable single-tile radial glow on hover
   (Overrides any earlier resets that set ::after to none)
   ========================================================= */

/* Make sure each card is a positioning context */
.cchq-hero .cchq-paths .cchq-card{
  position: relative;
}

/* Re-create the glow layer even if an earlier rule used
   `content: none !important;` on ::after */
.cchq-hero .cchq-paths .cchq-card::after{
  content: "" !important;               /* re-enable the pseudo */
  position: absolute;
  inset: -12%;                           /* extend slightly past edges for softness */
  border-radius: 22px;
  pointer-events: none;
  z-index: 0;

  /* Tunable variables */
  --tile-glow: #4FAEFB;                  /* glow hue (soft brand blue) */
  --tile-glow-strength: 22%;             /* increase for stronger glow (e.g., 28%) */

  /* Radial glow centered on the tile */
  background:
    radial-gradient(
      80% 70% at 50% 50%,
      color-mix(in oklab, var(--tile-glow) var(--tile-glow-strength), transparent),
      transparent 60%
    ) !important;

  opacity: 0;
  transform: scale(0.985);
  transition:
    opacity .28s ease,
    transform .28s ease,
    filter .28s ease;
}

/* Show the glow on hover/focus (only the tile under pointer) */
.cchq-hero .cchq-paths .cchq-card:hover::after,
.cchq-hero .cchq-paths .cchq-card:focus-visible::after{
  opacity: 1;
  transform: scale(1);                   /* tiny settle-in */
  filter: saturate(1.03);
}

/* Keep your monochrome arrow + subtle lift (works with your current rules) */
.cchq-hero .cchq-paths .cchq-card:hover,
.cchq-hero .cchq-paths .cchq-card:focus-visible{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,40,120,.16), 0 8px 18px rgba(0,0,0,.06);
  border-color: rgba(10,30,60,.18);
}





/* =============  MOBILE RESCUE (keep desktop + blue arrows)  ============= */
/* Phones and small tablets */
@media (max-width: 640px){

  /* 1) One column, tighter gaps */
  .cchq-paths{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: 12px !important;
  }

  /* 2) Cards: shorter, more padding on the right for the arrow chip */
  .cchq-paths .cchq-card{
    display: block !important;                 /* prevent odd grid sizing */
    padding: 14px 48px 14px 14px !important;   /* space for arrow on the right */
    min-height: 72px !important;               /* not super-tall “squares” */
    border-radius: 14px !important;
  }

  /* 3) Title: STOP truncation/ellipsis/line-clamp, make text bigger */
  .cchq-paths .cchq-card__title{
    display: block !important;
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1.35 !important;

    /* kill any theme clamps/ellipsis that are cutting text */
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: initial !important;

    /* reserve a bit more room so text doesn’t collide with the arrow */
    padding-right: 2.8em !important;
  }

  /* 4) Subtitle: readable size/spacing */
  .cchq-paths .cchq-card__sub{
    margin-top: 4px !important;
    font-size: 14.5px !important;
    line-height: 1.4 !important;
  }

  /* 5) Arrow chip (your blue one): keep it, just place it cleanly */
  .cchq-paths .cchq-card__title::after{
    right: 12px !important;                    /* bring it in a bit */
    top: 50% !important;
    transform: translateY(-50%) !important;    /* vertically center in the tile */
  }
}

/* Optional: 2 columns for small tablets, still keeps desktop unchanged */
@media (min-width: 641px) and (max-width: 980px){
  .cchq-paths{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

/* Mobile: move the arrow toward the right edge */
@media (max-width: 640px){
  /* shrink the card's right padding so the arrow can live near the edge */
  .cchq-paths .cchq-card{
    padding-right: 18px !important;
  }
  /* keep text clear of the arrow by giving the title extra right padding */
  .cchq-paths .cchq-card__title{
    padding-right: 36px !important; /* room for the chip */
  }
  /* place the arrow chip near the edge, vertically centered */
  .cchq-paths .cchq-card__title::after{
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
}