/********************************************
 * STOKES — HOME & INSIDE HEADER VARIANTS
 * Brand red: #bd0200
 ********************************************/

/* =========================
   SHARED: COMPONENT BASES
   ========================= */

/* Kill legacy sliding <span class="highlight"> (we use per-button highlights) */
header.header-wrap #survey-inline-group .highlight { display: none !important; }

/* Button group container */
header.header-wrap #survey-inline-group {
  border-radius: 0;
  overflow: hidden !important;
  background: transparent !important;
  border: 2px solid #bd0200;          /* outline tweaked per variant below */
  display: inline-grid; grid-auto-flow: column; gap: 0;
  line-height: 1; user-select: none; margin-left: auto;
}

/* Inner buttons: square, no underline/borders, no icon motion */
header.header-wrap #survey-inline-group .btn{
  position: relative; z-index: 0; display: inline-flex; align-items: center; gap: .5rem;
  padding: .35rem .7rem; line-height: 1; border-radius: 0;
  text-decoration: none !important; -webkit-text-decoration: none !important;
  text-decoration-thickness: 0 !important; text-underline-offset: 0 !important;
  border-top: none !important; border-bottom: none !important;
  background: transparent !important; color: #333; /* overridden per-variant */
}
header.header-wrap #survey-inline-group .btn:last-of-type{ border-right: none; }

/* Divider tone controlled per state below */

/* Icons: lock size/position; kill motion */
header.header-wrap #survey-inline-group .btn i{
  width: 1.1em; text-align: center; line-height: 1;
  transition: none !important; transform: none !important;
}
header.header-wrap #survey-inline-group .btn:hover i,
header.header-wrap #survey-inline-group .btn:focus-visible i{ transform: none !important; }

/* Per-button highlight (exact fit; no seams) + directional fill */
header.header-wrap #survey-inline-group .btn::before{
  content:""; position:absolute; left:0; right:0; top:0; bottom:0;
  background:#bd0200; z-index:-1; opacity:0; transform:scaleX(0);
  transform-origin:center; transition:transform .22s cubic-bezier(.2,.7,.2,1), opacity .12s linear;

  /* Anti-halo smoothing */
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0) scaleX(0);
}
/* Directional origin */
header.header-wrap #survey-inline-group .phone:hover::before,
header.header-wrap #survey-inline-group .phone:focus-visible::before{ transform-origin:left;  opacity:1; transform:scaleX(1); }
header.header-wrap #survey-inline-group .cta:hover::before,
header.header-wrap #survey-inline-group .cta:focus-visible::before  { transform-origin:right; opacity:1; transform:scaleX(1); }

/* Focus ring */
header.header-wrap #survey-inline-group .btn:focus-visible{
  outline:2px solid #bd0200; outline-offset:-2px;
}

/* Sizing (optional) */
header.header-wrap #survey-inline-group .phone{ font-size:.86rem; }
header.header-wrap #survey-inline-group .cta  { font-size:.98rem; }

/* =========================================================
   HOME HEADER (SCOPED INSIDE THE HEADER)
   .stokes-header-home is INSIDE <header>, so target like:
   header.header-wrap[STATE] .stokes-header-home ...
   ========================================================= */

/* HOME — NOT floating: white top-level; group white */
header.header-wrap:not(.floating-active) .stokes-header-home .primary_structure > li > a,
header.header-wrap:not(.floating-active) .stokes-header-home .primary_structure > li > a > span{
  color:#fff !important;
}
header.header-wrap:not(.floating-active) .stokes-header-home .primary_structure > li:hover > a,
header.header-wrap:not(.floating-active) .stokes-header-home .primary_structure > li:hover > a > span,
header.header-wrap:not(.floating-active) .stokes-header-home .primary_structure > li:focus-within > a,
header.header-wrap:not(.floating-active) .stokes-header-home .primary_structure > li:focus-within > a > span,
header.header-wrap:not(.floating-active) .stokes-header-home .primary_structure > li.current > a,
header.header-wrap:not(.floating-active) .stokes-header-home .primary_structure > li.current > a > span{
  color:#fff !important; /* stay white even if theme paints bg */
}

/* Button group (home non-floating): white outline & white text/icons always */
header.header-wrap:not(.floating-active) .stokes-header-home #survey-inline-group{
  border-color:#fff;
}
header.header-wrap:not(.floating-active) .stokes-header-home #survey-inline-group .btn,
header.header-wrap:not(.floating-active) .stokes-header-home #survey-inline-group .btn .txt,
header.header-wrap:not(.floating-active) .stokes-header-home #survey-inline-group .btn i{
  color:#fff !important;
}
header.header-wrap:not(.floating-active) .stokes-header-home #survey-inline-group .btn:hover::before,
header.header-wrap:not(.floating-active) .stokes-header-home #survey-inline-group .btn:focus-visible::before{
  opacity:1; transform:scaleX(1); /* show red bg under, text/icons remain white */
}
/* Divider tone for dark header */
header.header-wrap:not(.floating-active) .stokes-header-home #survey-inline-group .btn{
  border-right:1px solid rgba(255,255,255,.2);
}

/* HOME — FLOATING active: gray top-level; submenu hover red */
header.header-wrap.floating-active .stokes-header-home .primary_structure > li > a,
header.header-wrap.floating-active .stokes-header-home .primary_structure > li > a > span{
  color:#333 !important;
}
header.header-wrap.floating-active .stokes-header-home .primary_structure > li:hover > a,
header.header-wrap.floating-active .stokes-header-home .primary_structure > li:hover > a > span,
header.header-wrap.floating-active .stokes-header-home .primary_structure > li:focus-within > a,
header.header-wrap.floating-active .stokes-header-home .primary_structure > li:focus-within > a > span,
header.header-wrap.floating-active .stokes-header-home .primary_structure > li.current > a,
header.header-wrap.floating-active .stokes-header-home .primary_structure > li.current > a > span{
  color:#333 !important;
}
/* Submenu: base gray, hover red */
header.header-wrap.floating-active .stokes-header-home .dnngo_slide_menu a,
header.header-wrap.floating-active .stokes-header-home .dnngo_slide_menu a > span{ color:#333 !important; }
header.header-wrap.floating-active .stokes-header-home .dnngo_slide_menu li:hover > a,
header.header-wrap.floating-active .stokes-header-home .dnngo_slide_menu li:hover > a > span,
header.header-wrap.floating-active .stokes-header-home .dnngo_slide_menu li:focus-within > a,
header.header-wrap.floating-active .stokes-header-home .dnngo_slide_menu li:focus-within > a > span{ color:#bd0200 !important; }

/* Button group (home floating): gray base; hover → red bg + white text/icons */
header.header-wrap.floating-active .stokes-header-home #survey-inline-group{
  border-color:#bd0200;
}
header.header-wrap.floating-active .stokes-header-home #survey-inline-group .btn,
header.header-wrap.floating-active .stokes-header-home #survey-inline-group .btn .txt,
header.header-wrap.floating-active .stokes-header-home #survey-inline-group .btn i{
  color:#333 !important;
}
header.header-wrap.floating-active .stokes-header-home #survey-inline-group .btn:hover,
header.header-wrap.floating-active .stokes-header-home #survey-inline-group .btn:hover .txt,
header.header-wrap.floating-active .stokes-header-home #survey-inline-group .btn:hover i,
header.header-wrap.floating-active .stokes-header-home #survey-inline-group .btn:focus-visible,
header.header-wrap.floating-active .stokes-header-home #survey-inline-group .btn:focus-visible .txt,
header.header-wrap.floating-active .stokes-header-home #survey-inline-group .btn:focus-visible i{
  color:#fff !important;
}
/* Divider tone for light header — use box-shadow to keep divider crisp with no bleed */
header.header-wrap.floating-active .stokes-header-home #survey-inline-group .btn{
  border-right:none; /* avoid double line with shadow */
}
header.header-wrap.floating-active .stokes-header-home #survey-inline-group .btn + .btn{
  box-shadow:-1px 0 0 rgba(0,0,0,.08);
}
/* Kill 1px outer-edge gap on hover (bleed under OUTER border only) */
header.header-wrap.floating-active .stokes-header-home #survey-inline-group .phone:hover::before,
header.header-wrap.floating-active .stokes-header-home #survey-inline-group .phone:focus-visible::before{
  left:-2px; right:0;
}
header.header-wrap.floating-active .stokes-header-home #survey-inline-group .cta:hover::before,
header.header-wrap.floating-active .stokes-header-home #survey-inline-group .cta:focus-visible::before{
  left:0; right:-2px;
}


/* =========================================================
   INSIDE HEADER (ALWAYS LIGHT)
   .stokes-header-inside is inside the header as well
   ========================================================= */

/* Top-level menu: gray always (incl. hover) */
header.header-wrap .stokes-header-inside .primary_structure > li > a,
header.header-wrap .stokes-header-inside .primary_structure > li > a > span{
  color:#333 !important;
}
header.header-wrap .stokes-header-inside .primary_structure > li:hover > a,
header.header-wrap .stokes-header-inside .primary_structure > li:hover > a > span,
header.header-wrap .stokes-header-inside .primary_structure > li:focus-within > a,
header.header-wrap .stokes-header-inside .primary_structure > li:focus-within > a > span,
header.header-wrap .stokes-header-inside .primary_structure > li.current > a,
header.header-wrap .stokes-header-inside .primary_structure > li.current > a > span{
  color:#333 !important;
}

/* Submenu: base gray; hover red */
header.header-wrap .stokes-header-inside .dnngo_slide_menu a,
header.header-wrap .stokes-header-inside .dnngo_slide_menu a > span{ color:#333 !important; }
header.header-wrap .stokes-header-inside .dnngo_slide_menu li:hover > a,
header.header-wrap .stokes-header-inside .dnngo_slide_menu li:hover > a > span,
header.header-wrap .stokes-header-inside .dnngo_slide_menu li:focus-within > a,
header.header-wrap .stokes-header-inside .dnngo_slide_menu li:focus-within > a > span{ color:#bd0200 !important; }

/* Button group: same as floating-active */
header.header-wrap .stokes-header-inside #survey-inline-group{ border-color:#bd0200; }
header.header-wrap .stokes-header-inside #survey-inline-group .btn,
header.header-wrap .stokes-header-inside #survey-inline-group .btn .txt,
header.header-wrap .stokes-header-inside #survey-inline-group .btn i{ color:#333 !important; }
header.header-wrap .stokes-header-inside #survey-inline-group .btn:hover::before,
header.header-wrap .stokes-header-inside #survey-inline-group .btn:focus-visible::before{ opacity:1; transform:scaleX(1); }
header.header-wrap .stokes-header-inside #survey-inline-group .btn:hover,
header.header-wrap .stokes-header-inside #survey-inline-group .btn:hover .txt,
header.header-wrap .stokes-header-inside #survey-inline-group .btn:hover i,
header.header-wrap .stokes-header-inside #survey-inline-group .btn:focus-visible,
header.header-wrap .stokes-header-inside #survey-inline-group .btn:focus-visible .txt,
header.header-wrap .stokes-header-inside #survey-inline-group .btn:focus-visible i{ color:#fff !important; }

/* Use box-shadow divider in light mode to avoid bleed */
header.header-wrap .stokes-header-inside #survey-inline-group .btn{ border-right:none; }
header.header-wrap .stokes-header-inside #survey-inline-group .btn + .btn{ box-shadow:-1px 0 0 rgba(0,0,0,.08); }

/* Kill 1px outer-edge gap on hover (bleed under OUTER border only) */
header.header-wrap .stokes-header-inside #survey-inline-group .phone:hover::before,
header.header-wrap .stokes-header-inside #survey-inline-group .phone:focus-visible::before{
  left:-2px; right:0;
}
header.header-wrap .stokes-header-inside #survey-inline-group .cta:hover::before,
header.header-wrap .stokes-header-inside #survey-inline-group .cta:focus-visible::before{
  left:0; right:-2px;
}









/* ===== STOKES — Glass CTA + Service Links (Commercial) ===== */
.stokes-glass-cta{
  --red:#bd0200; --paper:#fff;
  --stroke:rgba(255,255,255,.28); --shadow:rgba(0,0,0,.35); --shadow2:rgba(0,0,0,.18);
  color:#fff;           /* default text color */
}

/* Shared glass look (near-clear), subtle rounding */
.stokes-glass-cta .glass{
  position:relative;
  background: rgba(1,0,0,1);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
          backdrop-filter: blur(14px) saturate(120%);
  border:1px solid var(--stroke);
  box-shadow: 0 20px 50px var(--shadow), inset 0 1px 0 rgba(255,255,255,.12);
  border-radius:6px;
  color:#fff;
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
}

/* Make ALL icons red by default */
.stokes-glass-cta i{ color:var(--red); }

/* Top card */
.stokes-glass-cta .box-cta{
  max-width:1200px; margin:0 auto 1.25rem; padding:1.25rem;
  display:block; outline:2px solid rgba(189,2,0,.08); border-radius:6px;
}
.stokes-glass-cta .cta-left h2{
  margin:0 0 .35rem; font-size:1.9rem; line-height:1.1; font-weight:500; letter-spacing:.2px; color:#fff;
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
}
.stokes-glass-cta .cta-left .sub{
  margin:.1rem 0 1rem; color:#fff; opacity:.95; font-weight:500;
}

/* Phone button: glass/outlined so icon stays red; text white */
.stokes-glass-cta .cta-left .cta-phone{
  display:inline-flex; align-items:center; gap:.6rem; text-decoration:none;
  color:#fff; background: rgba(0,0,0,.18); padding:.65rem 1rem;
  border:2px solid var(--red); font-weight:500; border-radius:6px;
  box-shadow:0 8px 20px var(--shadow2);
  transition: background .18s ease, border-color .18s ease, transform .08s ease;
}
.stokes-glass-cta .cta-left .cta-phone .num{ font-size:1.2rem; }
.stokes-glass-cta .cta-left .cta-phone i{ width:1.2em; text-align:center; } /* icon stays red */
.stokes-glass-cta .cta-left .cta-phone:hover,
.stokes-glass-cta .cta-left .cta-phone:focus-visible{
  background: rgba(189,2,0,.14); border-color: var(--red); transform: translateY(-1px);
}

/* Points list — HANGING INDENT (text flush-left, icon in gutter) */
.stokes-glass-cta .points{
  list-style: none; padding: 0; margin: 1rem 0 .5rem;
}
.stokes-glass-cta .points li{
  position: relative; display: block;
  padding-left: 1.6rem;   /* gutter width for the icon */
  margin: .15rem 0; line-height: 1.35; color: #fff;
}
.stokes-glass-cta .points li i{
  position: absolute; left: 0; top: .18em; /* optical nudge to first line */
  width: 1.1rem; text-align: center; line-height: 1; color: #bd0200; pointer-events: none;
}

.stokes-glass-cta .note{ color:#fff; opacity:.9; font-size:.95rem; margin:.25rem 0 0; }
.stokes-glass-cta .note i{ margin-right:.4rem; }

/* Bottom links glass box */
.stokes-glass-cta .box-links{
  max-width:1200px; margin:0 auto; padding:1rem 1.25rem 1.1rem;
  outline:2px solid rgba(189,2,0,.08); border-radius:6px;
}
.stokes-glass-cta .links-title{
  margin:0 0 .75rem; font-weight:500; color:#fff; letter-spacing:.2px;
  display:flex; align-items:center; gap:.5rem; text-shadow: 0 1px 1px rgba(0,0,0,.25);
}

.stokes-glass-cta .links-grid{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:.65rem;
}
.stokes-glass-cta .links-grid .link{
  display:flex; align-items:center; gap:.6rem; text-decoration:none;
  background: rgba(0,0,0,.22); /* darker film, still glassy */
  -webkit-backdrop-filter: blur(8px) saturate(120%);
          backdrop-filter: blur(8px) saturate(120%);
  border:1px solid rgba(255,255,255,.28);
  padding:.7rem .8rem; color:#fff; font-weight:500; border-radius:6px;
  transition: background .18s ease, transform .08s ease, border-color .18s ease, color .18s ease;
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
}
.stokes-glass-cta .links-grid .link i{ width:1.1em; text-align:center; color:var(--red); } /* icons red */
.stokes-glass-cta .links-grid .link .arrow{ margin-left:auto; opacity:.85; transition: transform .18s ease, opacity .18s ease; }

.stokes-glass-cta .links-grid .link:hover,
.stokes-glass-cta .links-grid .link:focus-visible{
  background: rgba(0,0,0,.28); border-color: rgba(255,255,255,.36); transform: translateY(-1px);
}
.stokes-glass-cta .links-grid .link:hover .arrow,
.stokes-glass-cta .links-grid .link:focus-visible .arrow{
  transform: translateX(3px); opacity:1;
}

/* Responsive */
@media (max-width: 900px){
  .stokes-glass-cta .links-grid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  .stokes-glass-cta *, .stokes-glass-cta *::before, .stokes-glass-cta *::after{ transition:none !important; }
}