/* GVI Christmas & holiday servicing module (temporary promo + landing page styles).
   Self-contained: uses its own --hl-* variables so it works on any GVI site. Loaded by holiday.js's host page.
   Motion: transform + opacity only (one soft ring aside), one easing curve, off for reduced motion. */
:root {
  --hl-red: #e01b2e; --hl-red-dark: #b31423; --hl-ink: #16181c; --hl-yellow: #ffc60b;
  --hl-bg: #f7f5f2; --hl-card: #fff; --hl-border: #e6e2dd; --hl-muted: #4a4f55;
  --hl-sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --hl-display: 'Bricolage Grotesque', var(--hl-sans);
  --hl-ease: cubic-bezier(.22, 1, .36, 1);
}

@keyframes hl-zoom     { from { transform: scale(1.16); } to { transform: scale(1.03); } }
@keyframes hl-rise     { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes hl-word     { from { transform: translateY(112%); } to { transform: none; } }
@keyframes hl-line     { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hl-sweep    { 0% { transform: translateX(-140%) skewX(-18deg); } 30%, 100% { transform: translateX(380%) skewX(-18deg); } }
@keyframes hl-sheen    { 0% { transform: translateX(-120%); } 24%, 100% { transform: translateX(120%); } }
@keyframes hl-ring     { 0% { box-shadow: 0 0 0 0 rgba(224,27,46,.6); } 65%, 100% { box-shadow: 0 0 0 18px rgba(224,27,46,0); } }
@keyframes hl-ring-w   { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.7); } 65%, 100% { box-shadow: 0 0 0 11px rgba(255,255,255,0); } }
@keyframes hl-drop     { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes hl-failsafe { to { opacity: 1; transform: none; } }

/* ---------- Slim bar (injected above the page by holiday.js) ---------- */
.hl-bar { position: relative; overflow: hidden; background: var(--hl-red); color: #fff; font: 14px/1.4 var(--hl-sans); animation: hl-drop .8s var(--hl-ease) .15s backwards; }
.hl-bar a { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 14px; min-height: 44px; padding: 6px 16px; color: #fff; text-align: center; text-decoration: none; }
.hl-bar a:hover { color: #fff; }
.hl-bar b { font-weight: 700; }
.hl-bar .hl-bar-text { opacity: .92; }
.hl-bar .hl-bar-cta { background: #fff; color: var(--hl-red-dark); font-weight: 700; font-size: 13px; border-radius: 999px; padding: 4px 13px; transition: background .25s ease, color .25s ease; animation: hl-ring-w 3.6s ease-out 3s 2; }
.hl-bar a:hover .hl-bar-cta { background: var(--hl-yellow); color: var(--hl-ink); }
.hl-bar::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 18%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: translateX(-140%) skewX(-18deg); animation: hl-sweep 7s var(--hl-ease) 2s 2; }
.hl-bar.hl-bar-home::after { animation-iteration-count: infinite; }
.hl-bar.hl-bar-home .hl-bar-cta { animation-iteration-count: infinite; }
@media (max-width: 700px) { .hl-bar .hl-bar-text { display: none; } }

/* ---------- Home banner (injected under the hero by holiday.js) ---------- */
.hl-band { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--hl-ink); border-top: 3px solid var(--hl-red); font-family: var(--hl-sans); }
.hl-band .hl-photo { position: absolute; inset: 0; z-index: -2; transform-origin: 68% 55%; background: var(--hl-sm) 70% 62% / cover no-repeat; }
@media (min-width: 900px) { .hl-band .hl-photo { background-image: var(--hl-lg); } }
.hl-band::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(22,24,28,.95) 0%, rgba(22,24,28,.84) 40%, rgba(22,24,28,.12) 100%); }
.hl-band::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 22%; z-index: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.12), transparent); }
.hl-band .hl-wrap { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: clamp(36px, 6vw, 60px) 24px; }
.hl-band .hl-copy { max-width: 54ch; display: flex; flex-direction: column; gap: 14px; }
.hl-band .hl-eyebrow { display: inline-flex; align-items: center; gap: 12px; color: var(--hl-yellow); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hl-band .hl-eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--hl-yellow); transform-origin: 0 50%; }
.hl-band h2 { color: #fff; font: 800 clamp(32px, 6.4vw, 52px)/.98 var(--hl-display); letter-spacing: -0.03em; margin: 0; }
.hl-band h2 .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .08em 0 .14em; margin: -.08em 0 -.14em; }
.hl-band h2 .w > span { display: inline-block; }
.hl-band p { color: rgba(255,255,255,.86); font-size: 18px; line-height: 1.5; margin: 0 0 6px; }
.hl-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hl-btn { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px; border-radius: 999px; font: 700 16px/1 var(--hl-sans); text-decoration: none; border: 1px solid transparent; transition: background .2s ease, border-color .2s ease, transform .35s var(--hl-ease); }
.hl-btn-primary { background: var(--hl-red); color: #fff; }
.hl-btn-primary:hover { background: var(--hl-red-dark); color: #fff; }
.hl-btn-ghost { border-color: rgba(255,255,255,.3); color: #fff; }
.hl-btn-ghost:hover { border-color: #fff; color: #fff; }
.hl-btn-primary::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(105deg, transparent 34%, rgba(255,255,255,.3) 50%, transparent 66%); }

/* before the banner scrolls in */
.hl-band.hl-armed .hl-copy > :not(h2), .hl-band.hl-armed .hl-copy > h2:not(.is-split) { opacity: 0; animation: hl-failsafe .01s 6s forwards; }
.hl-band.hl-armed h2 .w > span { transform: translateY(112%); animation: hl-failsafe .01s 6s forwards; }
.hl-band.hl-armed .hl-eyebrow::before { transform: scaleX(0); }
/* playing */
.hl-band.hl-live .hl-photo { animation: hl-zoom 16s ease-out both; }
.hl-band.hl-live .hl-copy > :not(h2) { animation: hl-rise .9s var(--hl-ease) both; }
.hl-band.hl-live .hl-copy > .hl-eyebrow { animation-delay: .05s; }
.hl-band.hl-live .hl-copy > p { animation-delay: .5s; }
.hl-band.hl-live .hl-copy > .hl-actions { animation-delay: .68s; }
.hl-band.hl-live .hl-eyebrow::before { animation: hl-line .9s var(--hl-ease) .25s both; }
.hl-band.hl-live h2 .w > span { animation: hl-word .95s var(--hl-ease) calc(.2s + var(--i, 0) * 85ms) both; }
.hl-band.hl-live::after { opacity: 1; animation: hl-sweep 8s var(--hl-ease) 1.8s infinite; }
.hl-band.hl-live .hl-btn-primary { animation: hl-ring 3.2s ease-out 2.4s infinite; }
.hl-band.hl-live .hl-btn-primary::before { animation: hl-sheen 6.4s var(--hl-ease) 2.8s infinite; }
.hl-band.hl-live .hl-btn-primary:hover { animation: none; }
.hl-band.hl-off .hl-photo, .hl-band.hl-off::after, .hl-band.hl-off .hl-btn-primary, .hl-band.hl-off .hl-btn-primary::before { animation-play-state: paused; }

/* ---------- Landing page ---------- */
.hl-page { font-family: var(--hl-sans); color: var(--hl-ink); }
.hl-page *, .hl-page *::before, .hl-page *::after { box-sizing: border-box; }
.hl-page .hl-sec { padding: clamp(44px, 7vw, 80px) 0; }
.hl-page .hl-sec-white { background: #fff; border-top: 1px solid var(--hl-border); border-bottom: 1px solid var(--hl-border); }
.hl-page .hl-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.hl-page .hl-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 36px; max-width: 62ch; }
.hl-page .hl-kicker { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--hl-red); }
.hl-page h2.hl-h2 { font: 800 clamp(26px, 6.1vw, 44px)/1.02 var(--hl-display); letter-spacing: -0.025em; margin: 0; color: var(--hl-ink); text-wrap: balance; }
.hl-page .hl-lead { font-size: 17.5px; line-height: 1.6; color: var(--hl-muted); margin: 0; text-wrap: pretty; }
.hl-page .hl-quick { background: #fff; border: 1px solid var(--hl-border); border-left: 4px solid var(--hl-yellow); border-radius: 14px; padding: 20px 24px; }
.hl-page .hl-quick b { display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--hl-red); margin-bottom: 6px; }
.hl-page .hl-quick p { margin: 0; font-size: 18px; line-height: 1.55; color: #2a2e33; }
.hl-page .hl-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr)); gap: 18px; }
.hl-page a.hl-card { display: flex; flex-direction: column; gap: 10px; background: #fff; border: 1px solid var(--hl-border); border-radius: 16px; padding: 24px; color: var(--hl-ink); text-decoration: none; transition: transform .45s var(--hl-ease), box-shadow .45s var(--hl-ease), border-color .25s ease; }
.hl-page a.hl-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(22,24,28,.4); border-color: #d9d4ce; color: var(--hl-ink); }
.hl-page .hl-ico-wrap { width: 52px; height: 52px; border-radius: 14px; background: rgba(224,27,46,.08); display: grid; place-items: center; margin-bottom: 4px; }
.hl-page .hl-ico { width: 34px; height: 34px; stroke: var(--hl-red); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hl-page .hl-card .hl-card-k { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--hl-red); }
.hl-page .hl-card h3 { font: 700 21px/1.18 var(--hl-display); letter-spacing: -0.01em; margin: 0; color: var(--hl-ink); }
.hl-page .hl-card p { font-size: 14.5px; line-height: 1.5; color: var(--hl-muted); margin: 0; }
.hl-page .hl-card .hl-more { margin-top: auto; padding-top: 4px; font-size: 13px; font-weight: 700; color: var(--hl-red); }
.hl-page .hl-rush { background: var(--hl-ink); color: #fff; text-align: center; }
.hl-page .hl-rush .hl-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hl-page .hl-rush .hl-kicker { color: var(--hl-yellow); }
.hl-page .hl-rush h2 { font: 800 clamp(34px, 7.4vw, 62px)/.98 var(--hl-display); letter-spacing: -0.03em; margin: 0; color: #fff; }
.hl-page .hl-rush p { font-size: 20px; line-height: 1.5; max-width: 46ch; margin: 0 0 8px; color: rgba(255,255,255,.82); }
.hl-page .hl-rush .hl-small { font-size: 15px; max-width: none; margin: 6px 0 0; }
.hl-page .hl-rush .hl-small a { color: var(--hl-yellow); }
.hl-page .hl-rush .hl-actions { justify-content: center; }
.hl-page .hl-rush .hl-btn { min-height: 60px; padding: 0 40px; font-size: 18px; }
.hl-page .hl-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; }
.hl-page .hl-feat { border-left: 3px solid var(--hl-yellow); padding-left: 14px; display: flex; flex-direction: column; gap: 5px; }
.hl-page .hl-feat b { font: 800 17px/1.25 var(--hl-display); color: var(--hl-ink); }
.hl-page .hl-feat span { font-size: 14.5px; line-height: 1.5; color: var(--hl-muted); }
.hl-page .hl-feat a { text-decoration: underline; text-decoration-color: rgba(224,27,46,.35); text-underline-offset: 3px; }
.hl-page ol.hl-steps { list-style: none; padding: 0; margin: 0; counter-reset: hl-step; display: grid; gap: 14px; max-width: 760px; }
.hl-page ol.hl-steps li { position: relative; background: #fff; border: 1px solid var(--hl-border); border-radius: 14px; padding: 18px 20px 18px 64px; font-size: 16px; line-height: 1.55; color: var(--hl-muted); counter-increment: hl-step; }
.hl-page ol.hl-steps li strong { color: var(--hl-ink); }
.hl-page ol.hl-steps li::before { content: counter(hl-step); position: absolute; left: 18px; top: 16px; width: 32px; height: 32px; border-radius: 50%; background: var(--hl-ink); color: var(--hl-yellow); display: grid; place-items: center; font: 800 15px/1 var(--hl-display); }
.hl-page ol.hl-steps a { text-decoration: underline; text-decoration-color: rgba(224,27,46,.35); text-underline-offset: 3px; }
.hl-page .hl-faq { display: grid; gap: 10px; max-width: 860px; }
.hl-page details.hl-q { background: #fff; border: 1px solid var(--hl-border); border-radius: 14px; }
.hl-page details.hl-q > summary { list-style: none; cursor: pointer; position: relative; padding: 18px 52px 18px 20px; font: 700 18px/1.25 var(--hl-display); }
.hl-page details.hl-q > summary::-webkit-details-marker { display: none; }
.hl-page details.hl-q > summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 10px; height: 10px; margin-top: -8px; border-right: 2px solid var(--hl-red); border-bottom: 2px solid var(--hl-red); transform: rotate(45deg); transition: transform .35s var(--hl-ease), margin .35s var(--hl-ease); }
.hl-page details.hl-q[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
.hl-page details.hl-q .hl-a { padding: 0 20px 18px; color: var(--hl-muted); font-size: 16px; line-height: 1.6; }
.hl-page details.hl-q .hl-a p { margin: 0 0 .7em; }
.hl-page details.hl-q .hl-a a { text-decoration: underline; text-decoration-color: rgba(224,27,46,.35); text-underline-offset: 3px; }
.hl-page details.hl-q[open] .hl-a { animation: hl-rise .45s var(--hl-ease) both; }
@media (max-width: 620px) { .hl-page .hl-feats { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .hl-bar, .hl-bar::after, .hl-bar .hl-bar-cta { animation: none !important; }
  .hl-bar::after, .hl-band::after { display: none; }
  .hl-band .hl-photo, .hl-band .hl-btn-primary, .hl-band .hl-btn-primary::before { animation: none !important; }
  .hl-band.hl-armed .hl-copy > :not(h2), .hl-band.hl-armed .hl-copy > h2:not(.is-split) { opacity: 1; }
  .hl-band.hl-armed h2 .w > span, .hl-band.hl-armed .hl-eyebrow::before { transform: none; }
  .hl-page a.hl-card:hover { transform: none; }
}