/* ============================================================
   ORBIT  ·  "from search to schedule" liquid-glass animation
   ------------------------------------------------------------
   Everything is scoped under .hwb so its tokens (steel-blue) and
   its generic class names (.stage, .node, .hub ...) never touch
   the rest of the site, and every keyframe is prefixed `hwb`.
   Loaded after styles.css / partner.css. Type: Geist + Inter.

   .hwb stacks two things:
     1. the orbital animation (a frosted glass card that melts into
        the page at its top edge; five funnel cards revolve a hub)
     2. a horizontal marquee of concise offering cards below it
   ============================================================ */

/* ---- tokens + layout, scoped to the widget ---- */
.hwb{
  --paper:#f4f9fa; --bg-2:#e7eff4;
  --st-100:#dbe7ee; --st-200:#c5d6e2; --st-300:#a9c1d1; --st-400:#8ba7bd;
  --st-600:#5c7c98; --st-700:#496880; --st-800:#33526a;
  --ink:#1f303d;    --ink-soft:#4a5b68;
  --on-deep:#eef4f8;
  --glass-light: rgba(255,255,255,0.60);
  --glass-deep: rgba(73,104,128,0.50);
  --rim-inset: inset 0 1px 0 rgba(255,255,255,0.80);
  --float-shadow: 0 26px 52px -28px rgba(40,70,95,0.30);
  --float-shadow-lg: 0 40px 84px -34px rgba(28,52,72,0.40);
  --ease-spring: cubic-bezier(0.22,0.61,0.36,1);
  --orbit-dur: 36s;

  position:relative;
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(28px,4vw,56px);
  font-family:'Inter',system-ui,sans-serif;color:var(--ink);
}

/* ===========================================================================
   1. CONTAINER — liquid-glass panel that melts into the page at its top edge
   =========================================================================== */
.hwb .stage-card{
  position:relative;
  width:100%;              /* match the homepage container width (no cap) */
  min-width:0;max-width:100%;
  min-height:min(760px,80vh);
  margin-inline:auto;
  border-radius:clamp(28px,3.4vw,46px);
  overflow:hidden;
  /* opaque-ish gradient instead of a live backdrop-blur (which re-blurred the
     page behind it on every scroll frame and caused the hang) */
  background:linear-gradient(180deg,
    rgba(244,249,252,0.94) 0%,
    rgba(217,230,238,0.96) 62%,
    rgba(182,205,221,0.97) 100%);
  border:1px solid rgba(255,255,255,0.60);
  box-shadow:var(--rim-inset), 0 50px 110px -60px rgba(40,70,95,0.42);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 14%, #000 100%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 14%, #000 100%);
  display:flex;align-items:center;justify-content:center;
  animation:hwbRise 1000ms var(--ease-spring) both;
}

/* atmospheric soft steel-blue glows, clipped by the container */
.hwb .how__atmosphere{position:absolute;inset:-8%;z-index:0;pointer-events:none}
.hwb .blob{position:absolute;border-radius:50%}
.hwb .blob--1{width:52%;height:52%;left:-8%;top:-4%;
  background:radial-gradient(circle at 40% 40%, var(--st-300), transparent 62%);
  filter:blur(64px);opacity:.34;animation:hwbDrift1 19s ease-in-out infinite}
.hwb .blob--2{width:46%;height:46%;right:-10%;top:8%;
  background:radial-gradient(circle at 60% 40%, var(--st-200), transparent 60%);
  filter:blur(72px);opacity:.44;animation:hwbDrift2 23s ease-in-out infinite}
.hwb .blob--3{width:64%;height:64%;left:20%;bottom:-26%;
  background:radial-gradient(circle at 50% 50%, var(--st-400), transparent 64%);
  filter:blur(80px);opacity:.30;animation:hwbDrift3 27s ease-in-out infinite}
@keyframes hwbDrift1{50%{transform:translate(4%,3%) scale(1.08)}}
@keyframes hwbDrift2{50%{transform:translate(-3%,4%) scale(1.1)}}
@keyframes hwbDrift3{50%{transform:translate(3%,-3%) scale(1.06)}}

/* ===========================================================================
   2. THE STAGE — orbital field, --rx/--ry scale with the viewport
   =========================================================================== */
.hwb .stage{
  position:relative;z-index:1;
  width:100%;align-self:stretch;
  display:flex;align-items:center;justify-content:center;
  --rx:clamp(240px,33vw,640px);
  --ry:clamp(104px,13vw,200px);
}

/* 2a. CENTRAL HUB — frosted liquid-glass disc */
.hwb .hub{
  position:absolute;top:50%;left:50%;
  width:clamp(200px,25vw,400px);aspect-ratio:1/1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;z-index:5;will-change:transform;
  /* opaque frosted disc (no live backdrop-blur, so it does not repaint on scroll) */
  background:linear-gradient(180deg, rgba(255,255,255,0.80), rgba(232,241,246,0.66));
  border:1px solid rgba(255,255,255,0.72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 0 46px rgba(255,255,255,0.16),
    0 30px 70px -32px rgba(40,70,95,0.36);
  animation:hwbHubFloat 8s var(--ease-spring) infinite;
}
@keyframes hwbHubFloat{50%{transform:translate(-50%,-50%) translateY(-8px) scale(1.012)}}
.hwb .hub::before{content:"";position:absolute;inset:-1px;border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0deg, rgba(255,255,255,0.42) 46deg, transparent 130deg, transparent 360deg);
  -webkit-mask:radial-gradient(circle, transparent 63%, #000 64%, #000 100%);
  mask:radial-gradient(circle, transparent 63%, #000 64%, #000 100%);
  opacity:.5;animation:hwbSpin 16s linear infinite;pointer-events:none}
@keyframes hwbSpin{to{transform:rotate(360deg)}}
.hwb .hub__pulse{position:absolute;inset:0;border-radius:50%;
  box-shadow:0 0 0 0 rgba(92,124,152,0.22);animation:hwbPulse 3.6s var(--ease-spring) infinite;pointer-events:none}
@keyframes hwbPulse{0%{box-shadow:0 0 0 0 rgba(92,124,152,0.22)}70%{box-shadow:0 0 0 32px rgba(92,124,152,0)}100%{box-shadow:0 0 0 0 rgba(92,124,152,0)}}
.hwb .hub__label{font-size:clamp(10px,0.72vw,12.5px);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--st-700);opacity:.9}
.hwb .hub__num{font-family:'Geist',sans-serif;font-weight:700;
  font-size:clamp(46px,6vw,84px);line-height:1;letter-spacing:-.03em;margin:7px 0 3px;
  background:linear-gradient(180deg,var(--st-700),var(--st-800));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hwb .hub__cap{font-size:clamp(13px,0.95vw,16.5px);font-weight:600;color:var(--ink);margin-top:2px}
.hwb .hub__cap span{color:var(--ink-soft);font-weight:500}

/* wrapper invisible on desktop so cards orbit as direct stage children */
.hwb .efforts{display:contents}

/* 2b. ORBITING STAGE CARDS — one ellipse (var --rx/--ry), depth = size only */
.hwb .node{
  position:absolute;top:50%;left:50%;
  width:clamp(190px,20vw,340px);
  animation:hwbOrbit var(--orbit-dur) linear infinite;
  will-change:transform;
}
.hwb .node--1{animation-delay:calc(var(--orbit-dur) * -0.00)}
.hwb .node--2{animation-delay:calc(var(--orbit-dur) * -0.20)}
.hwb .node--3{animation-delay:calc(var(--orbit-dur) * -0.40)}
.hwb .node--4{animation-delay:calc(var(--orbit-dur) * -0.60)}
.hwb .node--5{animation-delay:calc(var(--orbit-dur) * -0.80)}

@keyframes hwbOrbit{
  0%    {transform:translate(-50%,-50%) translate(calc(var(--rx) *  1),    calc(var(--ry) *  0))    scale(.86);z-index:4}
  8.33% {transform:translate(-50%,-50%) translate(calc(var(--rx) *  0.866),calc(var(--ry) *  0.5))  scale(.94);z-index:6}
  16.67%{transform:translate(-50%,-50%) translate(calc(var(--rx) *  0.5),  calc(var(--ry) *  0.866))scale(1.00);z-index:6}
  25%   {transform:translate(-50%,-50%) translate(calc(var(--rx) *  0),    calc(var(--ry) *  1))    scale(1.02);z-index:6}
  33.33%{transform:translate(-50%,-50%) translate(calc(var(--rx) * -0.5),  calc(var(--ry) *  0.866))scale(1.00);z-index:6}
  41.67%{transform:translate(-50%,-50%) translate(calc(var(--rx) * -0.866),calc(var(--ry) *  0.5))  scale(.94);z-index:6}
  50%   {transform:translate(-50%,-50%) translate(calc(var(--rx) * -1),    calc(var(--ry) *  0))    scale(.86);z-index:4}
  58.33%{transform:translate(-50%,-50%) translate(calc(var(--rx) * -0.866),calc(var(--ry) * -0.5))  scale(.78);z-index:2}
  66.67%{transform:translate(-50%,-50%) translate(calc(var(--rx) * -0.5),  calc(var(--ry) * -0.866))scale(.72);z-index:2}
  75%   {transform:translate(-50%,-50%) translate(calc(var(--rx) *  0),    calc(var(--ry) * -1))    scale(.70);z-index:2}
  83.33%{transform:translate(-50%,-50%) translate(calc(var(--rx) *  0.5),  calc(var(--ry) * -0.866))scale(.72);z-index:2}
  91.67%{transform:translate(-50%,-50%) translate(calc(var(--rx) *  0.866),calc(var(--ry) * -0.5))  scale(.78);z-index:2}
  100%  {transform:translate(-50%,-50%) translate(calc(var(--rx) *  1),    calc(var(--ry) *  0))    scale(.86);z-index:4}
}

/* moving cards use an opaque-ish fill (no backdrop-blur) so the 5 of them do
   not each re-blur the backdrop every frame while they orbit + the page scrolls */
.hwb .node__card{
  position:relative;
  padding:clamp(14px,1.05vw,20px) clamp(16px,1.2vw,24px);border-radius:clamp(18px,1.4vw,24px);
  background:rgba(255,255,255,0.86);
  border:1px solid rgba(255,255,255,0.85);
  box-shadow:var(--rim-inset), var(--float-shadow);
}
.hwb .node--deep .node__card{
  background:oklch(0.43 0.115 222 / 0.8);   /* Book-a-call teal (#005c7c), slightly translucent */
  border:1px solid rgba(255,255,255,0.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.34), var(--float-shadow-lg);
  color:var(--on-deep);
}

/* card internals — steel-blue accents */
.hwb .node__top{display:flex;align-items:center;gap:8px;margin-bottom:clamp(9px,0.8vw,14px)}
.hwb .node__ico{width:clamp(28px,2vw,38px);height:clamp(28px,2vw,38px);flex:none;border-radius:clamp(9px,0.7vw,12px);display:grid;place-items:center;
  background:linear-gradient(160deg,oklch(0.50 0.115 222),oklch(0.40 0.115 222));
  box-shadow:0 6px 14px -6px rgba(0,74,100,.55), inset 0 1px 0 rgba(255,255,255,.4)}
.hwb .node__ico svg{width:clamp(16px,1.15vw,21px);height:clamp(16px,1.15vw,21px);stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hwb .node--deep .node__ico{background:linear-gradient(160deg,#fff,var(--st-200))}
.hwb .node--deep .node__ico svg{stroke:var(--st-800)}
.hwb .node__kick{font-size:clamp(10px,0.78vw,13px);font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--st-700)}
.hwb .node--deep .node__kick{color:var(--st-200)}
.hwb .node__title{font-family:'Geist',sans-serif;font-weight:600;font-size:clamp(14.5px,1.25vw,20px);line-height:1.25;color:var(--ink)}
.hwb .node--deep .node__title{color:#fff}
.hwb .node__meta{font-size:clamp(12px,0.92vw,15.5px);line-height:1.4;color:var(--ink-soft);margin-top:6px}
.hwb .node--deep .node__meta{color:rgba(238,244,248,0.82)}
.hwb .node__search{display:flex;align-items:center;gap:8px;font-size:clamp(13px,1.05vw,17px);color:var(--ink);font-weight:500}
.hwb .node__search .dot{width:8px;height:8px;border-radius:50%;background:oklch(0.50 0.115 222);flex:none;
  box-shadow:0 0 8px oklch(0.50 0.115 222 / 0.7);animation:hwbBlink 1.6s ease-in-out infinite}
@keyframes hwbBlink{50%{opacity:.4}}
.hwb .node__play{position:relative;height:clamp(56px,4.4vw,76px);border-radius:12px;margin-top:10px;overflow:hidden;
  background:linear-gradient(135deg,oklch(0.40 0.115 222),oklch(0.50 0.115 222));display:grid;place-items:center}
.hwb .node__play::after{content:"";position:absolute;inset:0;
  background:radial-gradient(80% 120% at 20% 0%, rgba(255,255,255,.30), transparent 60%)}
.hwb .node__play svg{width:clamp(22px,1.6vw,30px);height:clamp(22px,1.6vw,30px);fill:#fff;stroke:none;position:relative;z-index:1;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.28))}
.hwb .node__tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.hwb .tag{font-size:clamp(10px,0.74vw,12.5px);font-weight:600;padding:3px 8px;border-radius:999px;
  background:oklch(0.43 0.115 222 / 0.10);color:oklch(0.40 0.115 222)}
.hwb .node--deep .tag{background:rgba(255,255,255,0.16);color:var(--on-deep)}
.hwb .verify{display:inline-flex;align-items:center;gap:5px;font-size:clamp(10.5px,0.78vw,13px);font-weight:600;
  color:var(--st-700);background:rgba(197,214,226,0.55);padding:4px 9px;border-radius:999px;margin-top:10px}
.hwb .verify svg{width:12px;height:12px;stroke:var(--st-600);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.hwb .node--deep .verify{background:rgba(255,255,255,0.16);color:var(--on-deep)}
.hwb .node--deep .verify svg{stroke:var(--st-200)}

/* ===========================================================================
   3. ROTATING ONE-LINER BAR — one offering at a time, sliding right-to-left.
      Aesthetic adapted from shadcn/ui Card + Badge (rounded bordered card, a
      pill badge, muted text). Pure CSS: the three items share one keyframe and
      are staggered by a third of the loop, so exactly one is centred at a time
      (each slides out left as the next slides in from the right).
   =========================================================================== */
.hwb .oneline{
  position:relative;width:100%;
  height:clamp(62px,6vw,82px);
  border-radius:14px;                         /* shadcn card radius */
  border:1px solid rgba(73,104,128,0.20);     /* shadcn border, steel */
  background:rgba(255,255,255,0.92);          /* opaque (no scroll-repainting blur) */
  box-shadow:0 1px 2px rgba(40,70,95,0.06), 0 18px 42px -30px rgba(40,70,95,0.32), var(--rim-inset);
  overflow:hidden;
}
.hwb .oneline-item{
  position:absolute;inset:0;
  display:flex;align-items:center;gap:clamp(12px,1.4vw,22px);
  padding:0 clamp(16px,1.9vw,30px);
  opacity:0;transform:translateX(110%);
  animation:hwbCycle 10.5s both infinite;
}
.hwb .oneline-item:nth-child(2){animation-delay:3.5s}
.hwb .oneline-item:nth-child(3){animation-delay:7s}
/* enter from the right, hold centred ~1/3 of the loop, exit to the left.
   Keeps rotating on hover (no pause). */
@keyframes hwbCycle{
  0%    {transform:translateX(110%); opacity:0}
  2.6%  {transform:translateX(0);    opacity:1}
  30%   {transform:translateX(0);    opacity:1}
  33.33%{transform:translateX(-110%);opacity:0}
  100%  {transform:translateX(-110%);opacity:0}
}

/* shadcn-style Badge = the offering name */
.hwb .ol-badge{
  flex:none;display:inline-flex;align-items:center;gap:7px;
  font-family:'Inter',sans-serif;font-weight:600;font-size:clamp(11px,0.86vw,13px);letter-spacing:.01em;
  padding:6px 12px;border-radius:9px;
  background:linear-gradient(160deg,var(--st-600),var(--st-800));color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 6px 14px -8px rgba(51,82,106,.6);
}
.hwb .ol-badge svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* the one-liner */
.hwb .ol-text{
  flex:1;min-width:0;
  font-family:'Geist',sans-serif;font-weight:500;font-size:clamp(13px,1.05vw,17px);
  line-height:1.25;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* right-aligned stat, muted */
.hwb .ol-stat{
  flex:none;font-family:'Inter',sans-serif;font-size:clamp(11.5px,0.88vw,14px);
  color:var(--ink-soft);font-weight:500;white-space:nowrap;
}
.hwb .ol-stat b{color:var(--st-700);font-weight:700}

/* ===========================================================================
   4. TABLET / MOBILE (<=820px) — orbit becomes a vertical funnel; hard reset
   =========================================================================== */
@media (max-width:820px){
  .hwb .hub,
  .hwb .node{position:static;inset:auto;transform:none;animation:none}

  .hwb .stage-card{
    display:block;
    width:min(500px,100%);margin-inline:auto;
    min-height:0;height:auto;
    padding:clamp(26px,6vw,40px) clamp(18px,5vw,28px);
    background:linear-gradient(180deg,
      rgba(255,255,255,0.62) 0%, rgba(213,227,236,0.50) 72%, rgba(176,199,216,0.52) 100%);
  }
  .hwb .stage{display:block;width:100%}

  .hwb .hub{
    display:flex;flex-direction:row;justify-content:space-between;align-items:center;
    width:calc(100% - 28px);margin-left:28px;aspect-ratio:auto;border-radius:22px;
    text-align:left;gap:14px;padding:22px 24px;
    background:linear-gradient(180deg, rgba(255,255,255,0.74), rgba(255,255,255,0.54));
    box-shadow:var(--rim-inset), 0 22px 46px -22px rgba(40,70,95,0.5);
  }
  .hwb .hub__pulse,.hwb .hub::before,.hwb .hub__label{display:none}
  .hwb .hub__num{font-size:clamp(44px,12vw,58px);margin:0}
  .hwb .hub__cap{text-align:right;margin:0;font-size:12.5px}

  .hwb .efforts{
    display:flex;flex-direction:column;gap:22px;
    position:relative;padding-left:28px;margin-top:24px;
  }
  .hwb .efforts::before{content:"";position:absolute;left:9px;top:-24px;bottom:24px;width:2px;
    border-radius:2px;background:linear-gradient(180deg,var(--st-400),var(--st-300));opacity:.6}
  .hwb .efforts::after{content:"";position:absolute;left:5px;top:-28px;width:10px;height:10px;
    border-radius:50%;background:var(--st-400);box-shadow:0 0 0 4px rgba(139,167,189,0.22)}

  .hwb .node{position:relative;width:100%}
  .hwb .node__card{width:100%;padding:11px 16px;border-radius:14px}
  .hwb .node__top{margin-bottom:6px}
  /* drop the video/play widget on phones (keeps the card slim) */
  .hwb .node--3 .node__play{display:none}
  .hwb .node__title{font-size:15px}
  .hwb .node__kick{font-size:10.5px}
  .hwb .node__meta{font-size:12.5px}
  .hwb .node__search{font-size:13.5px}
  .hwb .node::before{content:"";position:absolute;left:-19px;top:26px;width:17px;height:2px;
    background:var(--st-400);opacity:.6}

  /* one-liner: drop the right stat, keep badge + text */
  .hwb .oneline{height:64px}
  .hwb .oneline-item{padding:0 14px;gap:10px}
  .hwb .ol-stat{display:none}
  .hwb .ol-text{font-size:13px}
  .hwb .ol-badge{font-size:10.5px;padding:5px 9px}
}

/* ===========================================================================
   5. ENTRANCE + REDUCED MOTION (scoped)
   =========================================================================== */
@keyframes hwbRise{from{opacity:0;transform:translateY(22px) scale(.985)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .hwb *{animation:none !important;transition:none !important}
  .hwb .hub__pulse{display:none}
  /* show only the first offering, centred and static */
  .hwb .oneline-item{opacity:0;transform:none}
  .hwb .oneline-item:first-child{opacity:1}
}
@media (prefers-reduced-motion:reduce) and (min-width:821px){
  .hwb .node{transform:translate(-50%,-50%) scale(.86)}
  .hwb .node--1{transform:translate(-50%,-50%) translate(calc(var(--rx)*0),    calc(var(--ry)*1))     scale(.98)}
  .hwb .node--2{transform:translate(-50%,-50%) translate(calc(var(--rx)*-0.95),calc(var(--ry)*0.31))  scale(.86)}
  .hwb .node--3{transform:translate(-50%,-50%) translate(calc(var(--rx)*-0.59),calc(var(--ry)*-0.81)) scale(.78)}
  .hwb .node--4{transform:translate(-50%,-50%) translate(calc(var(--rx)*0.59), calc(var(--ry)*-0.81)) scale(.78)}
  .hwb .node--5{transform:translate(-50%,-50%) translate(calc(var(--rx)*0.95), calc(var(--ry)*0.31))  scale(.86)}
}