/* ============================================================
   HUBSTRIP — the contextual Wedding Hub moment.
   Self-contained (own hex tokens) so it renders identically
   inside .v8hub dark pages, .v8in cream pages and the homepage.
   Premium wedding feel: soft glass, gold hairline, quiet
   planning-card visual. Never a SaaS advert.
   ============================================================ */

.hubstrip{padding:84px 0;position:relative}
.hubstrip .hs-in{max-width:1180px;margin:0 auto;padding:0 40px;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:56px;align-items:center}

.hubstrip .hs-eyebrow{font-family:Roboto,sans-serif;font-size:var(--fs-meta);font-weight:600;letter-spacing:.14em;text-transform:none;color:#D0A54A;display:block;margin-bottom:12px}
.hubstrip .hs-heading{font-family:'ZCOOL XiaoWei',serif;font-weight:400;font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1.12;margin:0}
.hubstrip .hs-script{font-family:'Oooh Baby',cursive;font-size:.92em;color:#D0A54A;display:block}
.hubstrip .hs-intro{font-family:Lato,sans-serif;font-weight:300;font-size:1.04rem;line-height:1.7;margin:14px 0 22px;max-width:56ch}

.hubstrip .hs-features{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:16px}
.hubstrip .hs-features li{position:relative;padding-left:26px}
.hubstrip .hs-features li::before{content:"";position:absolute;left:0;top:7px;width:9px;height:9px;border-radius:50%;
  background:#D0A54A;box-shadow:0 0 0 4px rgba(208,165,74,.16)}
.hubstrip .hs-features b{font-family:'ZCOOL XiaoWei',serif;font-weight:400;font-size:var(--fs-lead);display:block;margin-bottom:2px}
.hubstrip .hs-features span{font-family:Lato,sans-serif;font-weight:300;font-size:var(--fs-body);line-height:1.6}

.hubstrip .hs-ctas{display:flex;gap:12px;flex-wrap:wrap}
.hubstrip .hs-btn{font-family:Roboto,sans-serif;font-size:var(--fs-meta);font-weight:600;letter-spacing:.02em;
  padding:12px 24px;border-radius:100px;transition:transform .2s ease,box-shadow .2s ease,background .2s ease;white-space:nowrap}
.hubstrip .hs-btn-gold{color:#0F1512;background:linear-gradient(135deg,#E9C87E,#D0A54A);
  box-shadow:0 10px 26px -12px rgba(208,165,74,.55)}
.hubstrip .hs-btn-gold:hover{transform:translateY(-1px);box-shadow:0 14px 30px -12px rgba(208,165,74,.7)}

/* ============================================================
   ANIMATED HUB DEMO — the card doesn't describe the Hub, it
   RUNS it. A calm 12s loop: the day ticks itself off (ready →
   ceremony → speeches) along a filling progress line, the
   contract chip lands, the shot list completes. Premium and
   quiet, never SaaS. Reduced-motion shows the finished state.
   ============================================================ */
.hubstrip .hs-visual{display:flex;justify-content:center;align-items:center}
.hubstrip .hs-stage{position:relative;width:100%;max-width:470px}
.hubstrip .hs-glow{position:absolute;inset:-12%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 45%,rgba(208,165,74,.16),transparent 62%)}
.hubstrip .hs-card{position:relative;width:100%;border-radius:22px;padding:20px 22px 22px;overflow:hidden}
.hubstrip .hs-card-top{display:flex;align-items:center;gap:5px;margin-bottom:12px}
.hubstrip .hs-dot{width:8px;height:8px;border-radius:50%;background:rgba(128,128,128,.35)}
.hubstrip .hs-card-url{font-family:Roboto,sans-serif;font-size:var(--fs-label);letter-spacing:.06em;margin-left:8px;opacity:.65}
.hubstrip .hs-live{margin-left:auto;font-family:Roboto,sans-serif;font-size:var(--fs-label);font-weight:700;letter-spacing:.12em;
  color:#E9C87E;border:1px solid rgba(208,165,74,.5);border-radius:100px;padding:3px 10px;
  animation:hsLivePulse 2.4s ease-in-out infinite}
@keyframes hsLivePulse{0%,100%{opacity:.55}50%{opacity:1}}

/* the day's progress line */
.hubstrip .hs-progress{height:2px;border-radius:2px;background:rgba(208,165,74,.18);margin:0 2px 14px;position:relative;overflow:hidden}
.hubstrip .hs-progress::after{content:"";position:absolute;inset:0;transform-origin:left;
  background:linear-gradient(90deg,#E9C87E,#D0A54A);transform:scaleX(0);
  animation:hsDay 12s linear infinite}
@keyframes hsDay{0%{transform:scaleX(0)}8%{transform:scaleX(0)}66%{transform:scaleX(1)}92%{transform:scaleX(1)}97%,100%{transform:scaleX(0)}}

/* timeline rows tick themselves off */
.hubstrip .hs-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;margin-bottom:9px;
  font-family:Lato,sans-serif;font-size:.96rem}
.hubstrip .hs-row .hs-label{flex:1}
.hubstrip .hs-row b{font-family:Roboto,sans-serif;font-weight:600;font-size:.86rem;color:#D0A54A}
.hubstrip .hs-tick{width:20px;height:20px;border-radius:50%;flex:0 0 20px;position:relative;
  border:1.5px solid rgba(208,165,74,.55);display:flex;align-items:center;justify-content:center}
.hubstrip .hs-tick::after{content:"✓";font-family:Roboto,sans-serif;font-size:var(--fs-label);font-weight:700;color:#0F1512;
  opacity:0;transform:scale(.4)}
.hubstrip .hs-row[data-step="1"] .hs-tick{animation:hsTickFill1 12s ease infinite}
.hubstrip .hs-row[data-step="1"] .hs-tick::after{animation:hsTickMark1 12s ease infinite}
.hubstrip .hs-row[data-step="1"]{animation:hsRowDone1 12s ease infinite}
.hubstrip .hs-row[data-step="2"] .hs-tick{animation:hsTickFill2 12s ease infinite}
.hubstrip .hs-row[data-step="2"] .hs-tick::after{animation:hsTickMark2 12s ease infinite}
.hubstrip .hs-row[data-step="2"]{animation:hsRowDone2 12s ease infinite}
.hubstrip .hs-row[data-step="3"] .hs-tick{animation:hsTickFill3 12s ease infinite}
.hubstrip .hs-row[data-step="3"] .hs-tick::after{animation:hsTickMark3 12s ease infinite}
.hubstrip .hs-row[data-step="3"]{animation:hsRowDone3 12s ease infinite}
/* fill keyframes: step 1 at ~18%, step 2 at ~38%, step 3 at ~58%; reset at 96% */
@keyframes hsTickFill1{0%,14%{background:transparent}18%,92%{background:linear-gradient(135deg,#E9C87E,#D0A54A);border-color:#D0A54A}97%,100%{background:transparent}}
@keyframes hsTickMark1{0%,14%{opacity:0;transform:scale(.4)}18%,92%{opacity:1;transform:scale(1)}97%,100%{opacity:0;transform:scale(.4)}}
@keyframes hsRowDone1{0%,14%{background:rgba(255,250,241,.06)}18%,92%{background:rgba(208,165,74,.13)}97%,100%{background:rgba(255,250,241,.06)}}
@keyframes hsTickFill2{0%,34%{background:transparent}38%,92%{background:linear-gradient(135deg,#E9C87E,#D0A54A);border-color:#D0A54A}97%,100%{background:transparent}}
@keyframes hsTickMark2{0%,34%{opacity:0;transform:scale(.4)}38%,92%{opacity:1;transform:scale(1)}97%,100%{opacity:0;transform:scale(.4)}}
@keyframes hsRowDone2{0%,34%{background:rgba(255,250,241,.06)}38%,92%{background:rgba(208,165,74,.13)}97%,100%{background:rgba(255,250,241,.06)}}
@keyframes hsTickFill3{0%,54%{background:transparent}58%,92%{background:linear-gradient(135deg,#E9C87E,#D0A54A);border-color:#D0A54A}97%,100%{background:transparent}}
@keyframes hsTickMark3{0%,54%{opacity:0;transform:scale(.4)}58%,92%{opacity:1;transform:scale(1)}97%,100%{opacity:0;transform:scale(.4)}}
@keyframes hsRowDone3{0%,54%{background:rgba(255,250,241,.06)}58%,92%{background:rgba(208,165,74,.13)}97%,100%{background:rgba(255,250,241,.06)}}

/* chips land once the day is covered */
/* Stacked and centred: the "Contract signed" chip is invisible until it pops,
   so side by side it pushed the shot-list pill off-centre (Katie, 21 Oct). */
.hubstrip .hs-chips{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:12px}
.hubstrip .hs-chip{display:inline-block;font-family:Roboto,sans-serif;font-size:var(--fs-label);font-weight:600;letter-spacing:.04em;
  padding:8px 15px;border-radius:100px;color:#0F1512;background:linear-gradient(135deg,#E9C87E,#D0A54A)}
.hubstrip .hs-chip.alt{color:inherit;background:transparent;border:1px solid rgba(208,165,74,.55)}
.hubstrip .hs-pop{animation:hsPop 12s ease infinite}
@keyframes hsPop{0%,68%{opacity:0;transform:scale(.7)}72%,93%{opacity:1;transform:scale(1)}97%,100%{opacity:0;transform:scale(.7)}}
.hubstrip .hs-swap{position:relative}
.hubstrip .hs-swap .s1,.hubstrip .hs-swap .s2{transition:none}
.hubstrip .hs-swap .s2{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#E9C87E;opacity:0;animation:hsSwapIn 12s ease infinite}
.hubstrip .hs-swap .s1{display:inline-block;animation:hsSwapOut 12s ease infinite}
@keyframes hsSwapOut{0%,76%{opacity:1}80%,93%{opacity:0}97%,100%{opacity:1}}
@keyframes hsSwapIn{0%,76%{opacity:0}80%,93%{opacity:1}97%,100%{opacity:0}}

/* ---------- DARK variant (dark-glass pages + homepage dark bands) ---------- */
.hubstrip[data-variant="dark"]{color:#FFFAF1}
.hubstrip[data-variant="dark"] .hs-heading{color:#FFFAF1}
.hubstrip[data-variant="dark"] .hs-intro,
.hubstrip[data-variant="dark"] .hs-features span{color:rgba(255,250,241,.8)}
.hubstrip[data-variant="dark"] .hs-features b{color:#FFFAF1}
.hubstrip[data-variant="dark"] .hs-in{border-radius:26px;padding:56px 52px;
  background:linear-gradient(135deg,rgba(255,250,241,.07),rgba(255,250,241,.03));
  border:1px solid rgba(208,165,74,.28);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.8)}
/* Dark variant buttons: the site-standard border-draw glass pill (same
   mechanism as the cream variant and the site .btn), not the old solid gold.
   Applies to the two dark HubStrip pages, FAQ and Contact, so they match. */
.hubstrip[data-variant="dark"] .hs-btn{position:relative;isolation:isolate;border:1px solid transparent;background:transparent;box-shadow:none;transition:color .35s ease,transform .4s cubic-bezier(.22,.61,.36,1),background .25s ease}
.hubstrip[data-variant="dark"] .hs-btn::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;border:1px solid rgba(233,200,126,.6);background:transparent;clip-path:inset(calc(100% - 1px) 22px 0 22px round 100px);-webkit-clip-path:inset(calc(100% - 1px) 22px 0 22px round 100px);transition:clip-path .3s cubic-bezier(.22,.61,.36,1) .18s;z-index:0}
.hubstrip[data-variant="dark"] .hs-btn::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:calc(100% - 44px);height:1px;background:rgba(233,200,126,.55);pointer-events:none;z-index:1;opacity:1;transition:opacity .12s linear 0s}
.hubstrip[data-variant="dark"] .hs-btn:hover:not(:disabled),
.hubstrip[data-variant="dark"] .hs-btn:focus-visible:not(:disabled){transform:scale(1.015);outline:none}
.hubstrip[data-variant="dark"] .hs-btn:hover:not(:disabled)::before,
.hubstrip[data-variant="dark"] .hs-btn:focus-visible:not(:disabled)::before{clip-path:inset(0 0 0 0 round 100px);-webkit-clip-path:inset(0 0 0 0 round 100px);transition-delay:0s}
.hubstrip[data-variant="dark"] .hs-btn:hover:not(:disabled)::after,
.hubstrip[data-variant="dark"] .hs-btn:focus-visible:not(:disabled)::after{opacity:0;transition-delay:.26s}
.hubstrip[data-variant="dark"] .hs-btn-gold{color:#E9C87E;background:transparent;box-shadow:none}
.hubstrip[data-variant="dark"] .hs-btn-gold:hover:not(:disabled),
.hubstrip[data-variant="dark"] .hs-btn-gold:focus-visible:not(:disabled){color:#F3D89A;background:linear-gradient(180deg,rgba(233,200,126,.2),rgba(208,165,74,.08));box-shadow:none}
.hubstrip[data-variant="dark"] .hs-btn-ghost{color:#FFFAF1}
.hubstrip[data-variant="dark"] .hs-btn-ghost::before{border-color:rgba(255,250,241,.5)}
.hubstrip[data-variant="dark"] .hs-btn-ghost::after{background:rgba(255,250,241,.5)}
.hubstrip[data-variant="dark"] .hs-btn-ghost:hover:not(:disabled),
.hubstrip[data-variant="dark"] .hs-btn-ghost:focus-visible:not(:disabled){color:#FFFAF1;background:rgba(255,250,241,.08)}
.hubstrip[data-variant="dark"] .hs-card{background:rgba(15,21,18,.55);border:1px solid rgba(255,250,241,.16);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.hubstrip[data-variant="dark"] .hs-row{background:rgba(255,250,241,.06);color:rgba(255,250,241,.85)}
.hubstrip[data-variant="dark"] .hs-card-url{color:rgba(255,250,241,.65)}
.hubstrip[data-variant="dark"] .hs-chip.alt{color:rgba(255,250,241,.85)}

/* ---------- CREAM variant (contact + cream pages) ---------- */
.hubstrip[data-variant="cream"]{color:#232323}
.hubstrip[data-variant="cream"] .hs-heading{color:#00603A}
.hubstrip[data-variant="cream"] .hs-intro,
.hubstrip[data-variant="cream"] .hs-features span{color:#54595F}
.hubstrip[data-variant="cream"] .hs-features b{color:#232323}
.hubstrip[data-variant="cream"] .hs-in{border-radius:26px;padding:56px 52px;
  background:linear-gradient(135deg,rgba(0,96,58,.05),rgba(208,165,74,.07));
  border:1px solid rgba(208,165,74,.35);
  box-shadow:0 34px 80px -48px rgba(0,61,36,.35)}
.hubstrip[data-variant="cream"] .hs-btn{position:relative;isolation:isolate;border:1px solid transparent;background:transparent;transition:color .35s ease,transform .4s cubic-bezier(.22,.61,.36,1),background .25s ease}
.hubstrip[data-variant="cream"] .hs-btn::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;border:1px solid rgba(168,132,47,.6);background:transparent;clip-path:inset(calc(100% - 1px) 22px 0 22px round 100px);-webkit-clip-path:inset(calc(100% - 1px) 22px 0 22px round 100px);transition:clip-path .3s cubic-bezier(.22,.61,.36,1) .18s;z-index:0}
.hubstrip[data-variant="cream"] .hs-btn::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:calc(100% - 44px);height:1px;background:rgba(168,132,47,.55);pointer-events:none;z-index:1;opacity:1;transition:opacity .12s linear 0s}
.hubstrip[data-variant="cream"] .hs-btn:hover:not(:disabled),
.hubstrip[data-variant="cream"] .hs-btn:focus-visible:not(:disabled){transform:scale(1.015);outline:none}
.hubstrip[data-variant="cream"] .hs-btn:hover:not(:disabled)::before,
.hubstrip[data-variant="cream"] .hs-btn:focus-visible:not(:disabled)::before{clip-path:inset(0 0 0 0 round 100px);-webkit-clip-path:inset(0 0 0 0 round 100px);transition-delay:0s}
.hubstrip[data-variant="cream"] .hs-btn:hover:not(:disabled)::after,
.hubstrip[data-variant="cream"] .hs-btn:focus-visible:not(:disabled)::after{opacity:0;transition-delay:.26s}
.hubstrip[data-variant="cream"] .hs-btn-gold{color:#8a6a2b;box-shadow:none}
.hubstrip[data-variant="cream"] .hs-btn-gold:hover:not(:disabled),
.hubstrip[data-variant="cream"] .hs-btn-gold:focus-visible:not(:disabled){color:#5c4518;background:linear-gradient(180deg,rgba(233,200,126,.22),rgba(208,165,74,.1));box-shadow:none}
.hubstrip[data-variant="cream"] .hs-btn-ghost{color:#00603A}
.hubstrip[data-variant="cream"] .hs-btn-ghost::before{border-color:rgba(0,96,58,.55)}
.hubstrip[data-variant="cream"] .hs-btn-ghost::after{background:rgba(0,96,58,.5)}
.hubstrip[data-variant="cream"] .hs-btn-ghost:hover:not(:disabled),
.hubstrip[data-variant="cream"] .hs-btn-ghost:focus-visible:not(:disabled){color:#003d24;background:rgba(0,96,58,.08)}
.hubstrip[data-variant="cream"] .hs-card{background:#FFFFFF;border:1px solid rgba(0,61,36,.12);
  box-shadow:0 24px 60px -34px rgba(0,61,36,.28)}
.hubstrip[data-variant="cream"] .hs-row{background:rgba(0,96,58,.05);color:#232323}
.hubstrip[data-variant="cream"] .hs-card-url{color:#54595F}
.hubstrip[data-variant="cream"] .hs-chip.alt{color:#00603A}

@media(max-width:980px){
  .hubstrip{padding:56px 0}
  /* the soft glow behind the Hub demo stays inside the screen width */
  .hubstrip .hs-glow{inset:-12% 0}
  .hubstrip .hs-in{grid-template-columns:1fr;gap:32px;padding:36px 24px}
  .hubstrip .hs-visual{order:-1}
  .hubstrip .hs-card{max-width:420px}
}
@media(prefers-reduced-motion:reduce){
  .hubstrip *,.hubstrip *::after,.hubstrip *::before{animation:none!important;transition:none!important}
  /* show the finished day, statically */
  .hubstrip .hs-progress::after{transform:scaleX(1)}
  .hubstrip .hs-tick{background:linear-gradient(135deg,#E9C87E,#D0A54A);border-color:#D0A54A}
  .hubstrip .hs-tick::after{opacity:1;transform:scale(1)}
  .hubstrip .hs-row{background:rgba(208,165,74,.13)}
  .hubstrip .hs-pop{opacity:1;transform:none}
  .hubstrip .hs-swap .s1{opacity:0}
  .hubstrip .hs-swap .s2{opacity:1}
  .hubstrip .hs-live{opacity:.8}
}