/* ==========================================================================
   Home hero — floating mosaic. Four text slides change in step with the photo
   tiles; headline letters spring in; the big numbers roll like an odometer.
   ========================================================================== */
.hb{
  --navy:#163B65;--sky:#3988D4;--gold:#F2C66D;--soft:#E8F1FB;--ink:#0F2A5C;--hb-ease:cubic-bezier(.2,.8,.2,1);
  --c:#2A6FB8;--c2:#3988D4;--c3:#E39A1B;
  position:relative;overflow:hidden;min-height:660px;padding:52px clamp(18px,4vw,64px) 56px;color:var(--navy);
  font-family:'DM Sans',var(--body),system-ui,sans-serif;
  background:linear-gradient(135deg,#F2F7FD 0%,#fff 55%,#FFF8E8 100%);
}
.hb::before{
  content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(rgba(22,59,101,.07) 1.2px,transparent 1.3px) 0 0/28px 28px;
  -webkit-mask-image:linear-gradient(90deg,#000,transparent 70%);mask-image:linear-gradient(90deg,#000,transparent 70%);
}
.hb-grid{position:relative;max-width:1360px;margin:auto;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,60px);align-items:center}

/* ---------- copy: four slides stacked in one spot ---------- */
.hb-copy{display:grid}
.hb-cs{grid-area:1/1;align-self:center;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s .45s}
.hb-cs.on{opacity:1;visibility:visible;transition:opacity .45s ease .1s}
.hb-cs.out{opacity:0;visibility:visible}

.hb-kick{
  display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 12px;border-radius:999px;background:#fff;border:1.5px solid var(--navy);
  color:var(--navy);font:700 .76rem/1 'Plus Jakarta Sans',var(--display),sans-serif;letter-spacing:.14em;text-transform:uppercase;
}
.hb-kick i{width:9px;height:9px;border-radius:50%;background:var(--gold);animation:hb-pulse 2s infinite}
@keyframes hb-pulse{0%{box-shadow:0 0 0 0 rgba(242,198,109,.85)}70%,100%{box-shadow:0 0 0 11px transparent}}

.hb .hb-h{position:relative;margin:22px 0 18px;font:700 clamp(2.5rem,5vw,4.6rem)/1.02 var(--fx-serif),'Fraunces',Georgia,serif;letter-spacing:-.035em;color:var(--ink)}
.hb-ln{display:block}
.hb-wd{display:inline-block;white-space:nowrap}
.hb-ch{
  display:inline-block;opacity:0;transform-origin:50% 85%;color:var(--ink);
  transition:scale .3s cubic-bezier(.34,1.56,.64,1),rotate .3s cubic-bezier(.34,1.56,.64,1);
}
.hb-cs.on .hb-ch,.hb-cs.out .hb-ch{
  animation:hb-in .95s cubic-bezier(.34,1.56,.64,1) calc(.1s + var(--i,0)*.032s) both,hb-wave 3.6s ease-in-out calc(1.8s + var(--i,0)*.11s) infinite;
}
.hb-ch:hover{scale:1.2;rotate:-5deg}
@keyframes hb-in{0%{opacity:0;transform:translateY(80%) rotate(14deg) scale(.4);filter:blur(10px)}100%{opacity:1;transform:none;filter:blur(0)}}
@keyframes hb-wave{0%,100%{translate:0 0}50%{translate:0 -.055em}}
/* the italic word: a colour wave in this slide's colours runs through its letters */
.hb .hb-h em{position:relative;display:inline-block;font-style:italic;padding-right:.06em}
.hb .hb-h em .hb-ch{color:var(--c)}
.hb-cs.on em .hb-ch,.hb-cs.out em .hb-ch{
  animation:hb-in .95s cubic-bezier(.34,1.56,.64,1) calc(.1s + var(--i,0)*.032s) both,hb-hue 5s linear calc(var(--i,0)*-.32s) infinite,hb-wave 3.6s ease-in-out calc(1.8s + var(--i,0)*.11s) infinite;
}
@keyframes hb-hue{0%,100%{color:var(--c)}25%{color:var(--c2)}50%{color:var(--c3)}75%{color:var(--c2)}}
.hb .hb-h em::after{content:"";position:absolute;left:0;right:.06em;bottom:-.06em;height:.1em;border-radius:6px;background:linear-gradient(90deg,var(--gold),#FFE7A8,var(--gold));background-size:200% 100%;transform:scaleX(0);transform-origin:0 50%}
.hb-cs.on .hb-h em::after,.hb-cs.out .hb-h em::after{animation:hb-ul 1s 1.1s var(--hb-ease) forwards,hb-gleam 3s linear 2.2s infinite}
@keyframes hb-ul{to{transform:scaleX(1)}}
@keyframes hb-gleam{to{background-position:-200% 0}}
.hb-ln--acc{display:flex;align-items:flex-start;gap:.14em;width:max-content;max-width:100%}
.hb-star{width:.36em;height:.36em;flex:none;margin-top:.08em;fill:var(--gold);filter:drop-shadow(0 4px 10px rgba(242,198,109,.7));opacity:0}
.hb-cs.on .hb-star,.hb-cs.out .hb-star{animation:hb-star-in .8s cubic-bezier(.34,1.56,.64,1) 1s forwards,hb-star 3.2s ease-in-out 1.9s infinite}
@keyframes hb-star-in{from{opacity:0;transform:scale(0) rotate(-120deg)}to{opacity:1;transform:none}}
@keyframes hb-star{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.28) rotate(90deg)}}
/* marker highlight behind the last word */
.hb-hl{position:relative;display:inline-block;isolation:isolate}
.hb-hl::before{content:"";position:absolute;z-index:-1;left:-.06em;right:-.06em;bottom:.04em;height:.44em;border-radius:6px;background:linear-gradient(100deg,rgba(242,198,109,.8),rgba(255,231,168,.75));transform:scaleX(0);transform-origin:0 50%}
.hb-cs.on .hb-hl::before,.hb-cs.out .hb-hl::before{animation:hb-mark 1s 1.5s var(--hb-ease) forwards}
@keyframes hb-mark{to{transform:scaleX(1)}}
.hb-hl .hb-ch{color:var(--navy)}
/* twinkles around each headline */
.hb .hb-h::before,.hb .hb-h::after{content:"";position:absolute;pointer-events:none;background:var(--c2);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:hb-twinkle 2.8s ease-in-out infinite}
.hb .hb-h::before{width:.3em;height:.3em;right:6%;top:-.28em}
.hb .hb-h::after{width:.2em;height:.2em;left:58%;bottom:.1em;background:var(--gold);animation-delay:-1.4s}
@keyframes hb-twinkle{0%,100%{transform:scale(.4) rotate(0);opacity:.4}50%{transform:scale(1.15) rotate(90deg);opacity:1}}

.hb-lede{max-width:29em;margin:0;font:500 clamp(1.05rem,1.4vw,1.25rem)/1.55 var(--fx-serif),'Fraunces',Georgia,serif;color:#1b3354}
.hb-tags{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0;padding:0;list-style:none}
.hb-tags li{padding:9px 16px;border-radius:999px;font:700 .85rem 'Plus Jakarta Sans',var(--display),sans-serif;border:1.5px solid var(--tc);color:var(--navy);background:#fff;animation:hb-bob2 4s ease-in-out infinite}
.hb-tags li:nth-child(1){--tc:var(--c)}.hb-tags li:nth-child(2){--tc:#163B65;animation-delay:-1s}.hb-tags li:nth-child(3){--tc:#F2C66D;animation-delay:-2s}
@keyframes hb-bob2{50%{transform:translateY(-5px)}}
.hb-btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.hb-cs.on .hb-kick{animation:hb-fade .7s var(--hb-ease) .05s both}
.hb-cs.on .hb-lede{animation:hb-fade .8s var(--hb-ease) .85s both}
.hb-cs.on .hb-tags{animation:hb-fade .8s var(--hb-ease) 1s both}
.hb-cs.on .hb-btns{animation:hb-fade .8s var(--hb-ease) 1.15s both}
@keyframes hb-fade{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.hb-b1{
  position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:14px;padding:7px 7px 7px 26px;border-radius:999px;
  background:linear-gradient(100deg,#163B65,#2A6FB8 60%,#3988D4);background-size:160% 100%;color:#fff;font:700 .98rem 'Plus Jakarta Sans',var(--display),sans-serif;
  text-decoration:none;box-shadow:0 12px 26px rgba(22,59,101,.28);transition:transform .35s var(--hb-ease),box-shadow .35s,background-position .5s;
}
.hb-b1 span{width:42px;height:42px;border-radius:50%;background:var(--gold);color:var(--navy);display:grid;place-items:center;flex:none;transition:transform .4s var(--hb-ease),background-color .3s}
.hb-b1 .ic{width:20px;height:20px;stroke-width:2.2}
.hb-b1:hover{color:#fff;transform:translateY(-3px);background-position:100% 0;box-shadow:0 18px 34px rgba(22,59,101,.36)}
.hb-b1:hover span{transform:rotate(-45deg);background:#fff}
.hb-b1::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);transform:translateX(-130%);animation:hb-sweep 4.2s ease-in-out 2.4s infinite}
@keyframes hb-sweep{0%{transform:translateX(-130%)}30%,100%{transform:translateX(130%)}}
.hb-b2{display:inline-flex;align-items:center;gap:10px;padding:0 24px;height:56px;border-radius:999px;border:1.5px solid var(--navy);background:#fff;color:var(--navy);font:700 .98rem 'Plus Jakarta Sans',var(--display),sans-serif;text-decoration:none;transition:background-color .3s,color .3s,transform .3s,box-shadow .3s}
.hb-b2 .ic{width:1.05em;height:1.05em}
.hb-b2:hover{background:var(--navy);color:#fff;transform:translateY(-3px);box-shadow:0 14px 28px rgba(22,59,101,.22)}
.hb a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* ---------- mosaic ---------- */
.hb-mosaic{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:repeat(6,minmax(0,1fr));gap:14px;height:clamp(460px,52vw,600px)}
.hb-tile{position:relative;overflow:hidden;background:var(--soft);opacity:0;transform:scale(.7);animation:hb-pop .9s var(--hb-ease) forwards;box-shadow:0 18px 38px -18px rgba(22,59,101,.45)}
@keyframes hb-pop{to{opacity:1;transform:none}}
.hb-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity 1.1s ease;transform:scale(1.12)}
.hb-tile img:not(.off){animation:hb-zoom 7s ease-out forwards}
@keyframes hb-zoom{from{transform:scale(1.12)}to{transform:scale(1)}}
.hb-tile img.off{opacity:0}
.hb-t1{grid-column:1/2;grid-row:1/5;border-radius:999px 999px 28px 28px;animation-delay:.2s}
.hb-t2{grid-column:2/4;grid-row:1/3;border-radius:28px 120px 28px 28px;animation-delay:.35s}
.hb-t3{grid-column:2/3;grid-row:3/6;border-radius:28px;animation-delay:.5s}
.hb-t4{grid-column:3/4;grid-row:3/5;border-radius:50%;animation-delay:.65s}
.hb-blk{display:grid;place-items:center;text-align:center;color:#fff;font:700 1rem 'Plus Jakarta Sans',var(--display),sans-serif;padding:14px}
.hb-blk b{display:block;font:700 2.3rem/1 var(--fx-serif),'Fraunces',serif}
.hb-t5{grid-column:1/2;grid-row:5/7;border-radius:28px;background:var(--navy)}
.hb-t6{grid-column:3/4;grid-row:5/7;border-radius:28px 28px 120px 28px;background:var(--gold);color:var(--navy)}
.hb-t5,.hb-t6{animation:hb-pop .9s var(--hb-ease) forwards,hb-glow 3.2s ease-in-out 2s infinite}
.hb-t5{animation-delay:.8s,2s;--g:rgba(57,136,212,.55)}
.hb-t6{animation-delay:.95s,2.4s;--g:rgba(242,198,109,.6)}
@keyframes hb-glow{0%,100%{box-shadow:0 18px 38px -18px rgba(22,59,101,.45),0 0 0 0 transparent}50%{box-shadow:0 18px 38px -18px rgba(22,59,101,.45),0 0 0 8px var(--g,rgba(57,136,212,.3))}}

/* odometer digits */
.hb-blk b[data-odo]{display:flex;justify-content:center;align-items:center;height:1em}
.od{display:inline-flex;height:1em;line-height:1;overflow:hidden}
.od-col{display:block;width:.64em;height:1em;overflow:hidden;text-align:center}
.od-sep{display:block;height:1em;line-height:1em;width:.3em;text-align:center}
.od-sym{display:block;height:1em;line-height:1em}
.od-reel{display:flex;flex-direction:column;will-change:transform}
.od-reel span{display:block;height:1em;line-height:1em}

.hb-float{position:absolute;z-index:5;display:flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border-radius:16px;background:#fff;color:var(--navy);font:800 .85rem 'Plus Jakarta Sans',var(--display),sans-serif;box-shadow:0 16px 34px rgba(22,59,101,.22);animation:hb-bob 5s ease-in-out infinite}
.hb-float i{width:32px;height:32px;border-radius:50%;background:var(--sky);color:#fff;display:grid;place-items:center;flex:none}
.hb-float i .ic{width:16px;height:16px;stroke-width:2.1}
.hb-f1{left:-18px;top:46%}
.hb-f2{right:-8px;top:-14px;animation-delay:-2.4s}
.hb-f2 i{background:var(--gold);color:var(--navy)}
@keyframes hb-bob{50%{transform:translateY(-10px)}}

/* the Every ... pill */
.hb-t7{
  grid-column:2/3;grid-row:6/7;border-radius:999px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 7px 0 20px;overflow:hidden;position:relative;color:#fff;text-decoration:none;
  background:linear-gradient(100deg,var(--c),var(--c2) 50%,var(--c));background-size:220% 100%;
  animation:hb-pop .9s var(--hb-ease) 1.1s forwards,hb-grad 5s linear infinite,hb-ring 2.8s ease-out 2.4s infinite;
  transition:transform .35s var(--hb-ease),box-shadow .35s;
}
@keyframes hb-grad{to{background-position:-220% 0}}
@keyframes hb-ring{0%{box-shadow:0 18px 38px -18px rgba(22,59,101,.45),0 0 0 0 rgba(57,136,212,.55)}70%,100%{box-shadow:0 18px 38px -18px rgba(22,59,101,.45),0 0 0 14px rgba(57,136,212,0)}}
.hb-t7::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.4) 50%,transparent 65%);transform:translateX(-130%);animation:hb-sweep 3.6s ease-in-out 2s infinite}
.hb-t7-dot{width:10px;height:10px;border-radius:50%;background:var(--gold);flex:none;animation:hb-pulse 2s infinite}
.hb-rot{position:relative;flex:1;height:1.4em;overflow:hidden;font:800 1rem/1.4 'Plus Jakarta Sans',var(--display),sans-serif;white-space:nowrap}
.hb-rot b{position:absolute;left:0;top:0;transform:translateY(110%);opacity:0;transition:transform .6s var(--hb-ease),opacity .4s}
.hb-rot b.on{transform:none;opacity:1}
.hb-rot b.out{transform:translateY(-110%);opacity:0}
.hb-t7-go{width:36px;height:36px;border-radius:50%;background:var(--gold);color:var(--navy);display:grid;place-items:center;flex:none;transition:transform .4s var(--hb-ease),background-color .3s}
.hb-t7-go .ic{width:18px;height:18px;stroke-width:2.2}
.hb-t7:hover{transform:translateY(-4px);box-shadow:0 20px 36px -14px rgba(22,59,101,.6);color:#fff}
.hb-t7:hover .hb-t7-go{transform:rotate(-45deg);background:#fff}

@media (max-width:900px){
  .hb{padding:36px 18px 44px;min-height:0}
  .hb-grid{grid-template-columns:1fr}
  .hb-mosaic{height:460px}
  .hb .hb-h{font-size:clamp(2.2rem,9vw,3.2rem)}
}
@media (max-width:520px){
  .hb-btns{flex-direction:column;align-items:stretch}
  .hb-b2{justify-content:center}
  .hb-mosaic{height:400px;gap:10px}
  .hb-blk b{font-size:1.6rem}
  .hb-f1{left:-6px}
  .hb-rot{font-size:.9rem}
}
@media (prefers-reduced-motion:reduce){
  .hb *,.hb *::before,.hb *::after{animation:none!important;transition:none!important}
  .hb-ch,.hb-tile,.hb-star{opacity:1;transform:none}
  .hb-hl::before,.hb .hb-h em::after{transform:scaleX(1)}
  .hb-cs{visibility:hidden;opacity:0}.hb-cs.on{visibility:visible;opacity:1}
}

/* ---------- photo boxes: a proper outline with a thin golden light running round it ---------- */
@property --hb-a{syntax:'<angle>';inherits:false;initial-value:0deg}
.hb-tile[data-cycle]::before,.hb-tile[data-cycle]::after{
  content:"";position:absolute;pointer-events:none;border-radius:inherit;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
}
/* the outline itself: navy and sky */
.hb-tile[data-cycle]::after{
  inset:0;z-index:3;padding:4px;
  background:linear-gradient(135deg,#3988D4,#163B65 50%,#3988D4);
}
/* the golden line: a short bright streak with a fading tail, circling the outline */
.hb-tile[data-cycle]::before{
  inset:1px;z-index:4;padding:2px;
  background:conic-gradient(from var(--hb-a),transparent 0deg,transparent 235deg,rgba(242,198,109,.35) 270deg,#F2C66D 335deg,#FFF3CC 356deg,transparent 360deg);
  animation:hb-orbit 4.6s linear infinite;
}
.hb-t2[data-cycle]::before{animation-duration:5.4s;animation-delay:-1.4s}
.hb-t3[data-cycle]::before{animation-duration:4.2s;animation-delay:-2.6s}
.hb-t4[data-cycle]::before{animation-duration:5s;animation-delay:-.8s}
@keyframes hb-orbit{to{--hb-a:360deg}}
@media (prefers-reduced-motion:reduce){.hb-tile[data-cycle]::before{animation:none}}