/* ============ Fleetsurf — website v2 ============ */
/* Overrides web.css for a continuous, blended, parallax feel. Loaded AFTER web.css. */

/* ---- one continuous sea: no per-section background blocks ---- */
html{background:#070f1c}
body{background:transparent}
.atmos{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;
  background:linear-gradient(180deg,
    #070f1c 0%,
    #0a1626 14%,
    #0c2038 34%,
    #0e2a4a 50%,
    #0b2138 66%,
    #0a1a2e 84%,
    #060d18 100%)}
.atmos .pool{position:absolute;border-radius:50%;filter:blur(140px);opacity:.4;will-change:transform;
  animation:poolDrift 26s ease-in-out infinite}
.atmos .pool:nth-child(3){animation-duration:32s;animation-delay:-6s}
.atmos .pool:nth-child(4){animation-duration:38s;animation-delay:-12s}
.atmos .pool:nth-child(5){animation-duration:30s;animation-delay:-3s}
@keyframes poolDrift{0%,100%{margin-top:0}50%{margin-top:-34px}}
.atmos .grain{position:absolute;inset:0;background-image:
  linear-gradient(rgba(120,180,200,.045) 1px,transparent 1px),
  linear-gradient(90deg,rgba(120,180,200,.045) 1px,transparent 1px);
  background-size:74px 74px;
  mask-image:radial-gradient(ellipse 120% 80% at 50% 36%,#000 26%,transparent 92%)}

/* sections become transparent panes over the sea — no hard edges anywhere */
section.band,header.hero,footer.band{background:transparent}
.band.alt{background:transparent}
.band .grid-bg{display:none}
.band > .glow{will-change:transform;opacity:.4}

/* breathing room so reveals have space to resolve before the next band */
.band{padding:clamp(124px,15vw,212px) 0}
.hero{padding-top:150px}

/* ---- smoother, longer reveals: blur + rise + faint scale ---- */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(46px) scale(.986);filter:blur(7px);
    transition:opacity 1.05s cubic-bezier(.16,.7,.2,1),
               transform 1.05s cubic-bezier(.16,.7,.2,1),
               filter 1.05s cubic-bezier(.16,.7,.2,1)}
  .reveal.in{opacity:1;transform:none;filter:none}
  .reveal.d1{transition-delay:.09s}
  .reveal.d2{transition-delay:.19s}
  .reveal.d3{transition-delay:.29s}
  .reveal.d4{transition-delay:.39s}
  .reveal.d5{transition-delay:.49s}
}

/* ============ OCEAN (animated layered waves) ============ */
.ocean{position:absolute;left:0;right:0;bottom:0;width:100%;pointer-events:none;z-index:1;overflow:hidden}
.ocean .wv-floor{position:absolute;left:0;right:0;bottom:-2px;height:42%;z-index:0}
.ocean .wv-layer{position:absolute;left:0;right:0;bottom:0;height:100%;will-change:transform}
.ocean .wv-bob{position:absolute;inset:0;animation-name:wvBob;animation-timing-function:ease-in-out;
  animation-iteration-count:infinite}
.ocean .wv-drift{position:absolute;left:0;bottom:0;width:200%;height:100%;
  animation-name:wvDrift;animation-timing-function:linear;animation-iteration-count:infinite}
.ocean .wv-drift svg{position:absolute;left:0;bottom:0;width:100%;height:100%;display:block}
@media (prefers-reduced-motion:no-preference){
  @keyframes wvDrift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @keyframes wvBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
}
@media (prefers-reduced-motion:reduce){
  .ocean .wv-drift,.ocean .wv-bob{animation:none}
}

/* hero + footer oceans are the tall framing seas */
.hero-ocean{z-index:1}
.footer-ocean{z-index:1}

/* ============ HERO COMPOSITION ============ */
.hero{
  --hero-ocean-height:clamp(220px,28svh,320px);
  min-height:100vh;
  min-height:100svh;
  display:grid;
  place-items:center;
  align-content:center;
  overflow:hidden;
  padding:clamp(92px,12svh,150px) 24px var(--hero-ocean-height);
}
.hero-copy{
  position:relative;
  z-index:5;
  width:100%;
  max-width:1040px;
  transform:translateY(-34px);
}
.hero h1{font-size:190px}
.hero .tag{font-size:30px}
.hero .codeline{font-size:20px}
.hero .cta-row{margin-top:clamp(30px,4svh,42px)}
.hero-flock{
  top:clamp(118px,19svh,188px);
  left:18%;
  right:18%;
  height:72px;
}
.hero-birds{
  position:absolute;
  left:50%;
  bottom:clamp(34px,5svh,76px);
  transform:translateX(-50%);
  width:min(1180px,calc(100% - 48px));
  max-width:none;
  height:clamp(178px,25svh,300px);
  margin:0;
  z-index:4;
  pointer-events:none;
  overflow:visible;
}
.hero-birds .bird{
  width:var(--bird-size);
  height:var(--bird-size);
}
.hero-birds .bird svg{
  width:100%!important;
  height:100%!important;
  display:block;
}
.hero-bird-heli{--bird-size:172px;left:4%;top:38%}
.hero-bird-goggles{--bird-size:150px;left:21%;top:56%}
.hero-bird-main{--bird-size:230px;left:50%;top:8%;margin-left:calc(var(--bird-size) * -0.5)}
.hero-bird-flag{--bird-size:178px;right:4%;top:40%}
.hero-bird-jetpack{--bird-size:150px;right:21%;top:58%}
.hero-ocean{height:var(--hero-ocean-height)!important}

@media (max-width:1180px){
  .hero h1{font-size:160px}
  .hero .tag{font-size:28px}
  .hero-bird-heli{--bird-size:150px}
  .hero-bird-goggles{--bird-size:132px}
  .hero-bird-main{--bird-size:204px}
  .hero-bird-flag{--bird-size:154px}
  .hero-bird-jetpack{--bird-size:132px}
}

@media (max-width:900px){
  .hero{
    --hero-ocean-height:clamp(205px,30svh,270px);
    padding-top:clamp(82px,10svh,118px);
  }
  .hero-copy{transform:translateY(-26px)}
  .hero h1{font-size:116px}
  .hero .tag{font-size:24px}
  .hero .codeline{font-size:16px}
  .hero-flock{
    top:clamp(90px,13svh,122px);
    left:20%;
    right:20%;
    height:58px;
    opacity:.5;
  }
  .hero-birds{
    bottom:clamp(28px,4svh,44px);
    width:min(720px,calc(100% - 38px));
    height:clamp(170px,24svh,220px);
  }
  .hero-bird-heli{--bird-size:124px;left:0;top:48%}
  .hero-bird-goggles{--bird-size:108px;left:24%;top:64%}
  .hero-bird-main{--bird-size:166px;top:4%}
  .hero-bird-flag{--bird-size:126px;right:0;top:50%}
  .hero-bird-jetpack{--bird-size:108px;right:24%;top:66%}
}

@media (max-width:700px){
  .nav .gh{padding:10px 14px;font-size:0;gap:0}
  .nav .gh svg{width:20px;height:20px}
  .hero{
    --hero-ocean-height:clamp(210px,31svh,250px);
    padding:78px 20px var(--hero-ocean-height);
  }
  .hero-copy{transform:translateY(-30px)}
  .hero .eyebrow{font-size:12px;letter-spacing:.2em;margin-bottom:18px}
  .hero h1{font-size:86px}
  .hero .tag{font-size:20px;margin-top:24px}
  .hero .codeline{font-size:14px;margin-top:14px}
  .hero .cta-row{gap:10px;margin-top:26px}
  .hero .gh.lg{font-size:14px;padding:13px 18px}
  .hero .gh.lg svg{width:19px;height:19px}
  .hero-flock{display:none}
  .hero-birds{
    bottom:clamp(28px,4svh,38px);
    width:calc(100% - 44px);
    height:clamp(158px,24svh,194px);
  }
  .hero-bird-goggles,
  .hero-bird-jetpack{display:none}
  .hero-bird-heli{--bird-size:108px;left:0;top:48%}
  .hero-bird-main{--bird-size:148px;top:0}
  .hero-bird-flag{--bird-size:110px;right:0;top:50%}
  .scroll-hint{display:none}
}

@media (max-width:420px){
  .hero{
    --hero-ocean-height:clamp(198px,30svh,230px);
    padding-top:74px;
  }
  .hero h1{font-size:74px}
  .hero .tag{font-size:18px}
  .hero .codeline{font-size:12px}
  .hero .gh.lg{width:100%;max-width:240px;justify-content:center}
  .hero-birds{
    width:calc(100% - 34px);
    height:clamp(148px,23svh,178px);
  }
  .hero-bird-heli{--bird-size:100px;top:50%}
  .hero-bird-main{--bird-size:136px}
  .hero-bird-flag{--bird-size:102px;top:52%}
}

@media (max-width:360px){
  .hero h1{font-size:66px}
  .hero-bird-flag{display:none}
  .hero-bird-heli{left:4%;top:48%;--bird-size:100px}
  .hero-bird-main{left:68%;top:12%;--bird-size:132px}
}

@media (max-height:760px) and (min-width:760px){
  .hero{
    --hero-ocean-height:220px;
    padding-top:88px;
  }
  .hero-copy{transform:translateY(-42px)}
  .hero h1{font-size:130px}
  .hero .tag{font-size:22px;margin-top:22px}
  .hero .codeline{font-size:15px}
  .hero .cta-row{margin-top:26px}
  .hero .gh.lg{font-size:15px;padding:13px 24px}
  .hero .gh.lg svg{width:20px;height:20px}
  .hero-birds{
    height:176px;
    bottom:38px;
  }
  .hero-bird-heli{--bird-size:118px;top:38%}
  .hero-bird-goggles{--bird-size:100px;top:56%}
  .hero-bird-main{--bird-size:158px;top:0}
  .hero-bird-flag{--bird-size:122px;top:40%}
  .hero-bird-jetpack{--bird-size:100px;top:58%}
}

/* scroll hint fades once you leave the hero */
.scroll-hint{transition:opacity .5s ease}
body.scrolled-past .scroll-hint{opacity:0;pointer-events:none}

/* ============ FOOTER (de-janked) ============ */
footer.band{position:relative;overflow:hidden;min-height:98vh;padding:clamp(120px,15vw,190px) 0 0;
  display:flex;flex-direction:column;justify-content:center;align-items:center}
.close{position:relative;z-index:4;text-align:center;padding:0;margin-bottom:clamp(40px,9vw,110px)}
.close .waveband{display:none}
.footer-ocean{height:clamp(340px,40vw,520px)}
.open-split{grid-template-columns:.9fr 1.1fr}
.footmeta{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  z-index:6;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  width:100%;max-width:1200px;padding:24px 40px 30px;margin:0;border-top:1px solid var(--line)}
.footmeta::before{content:"";position:absolute;inset:auto -50vw -1px;top:-40px;height:calc(100% + 40px);
  background:linear-gradient(180deg,transparent,rgba(5,10,20,.78));z-index:-1;pointer-events:none}

@media (max-width:900px){
  .nav .brand,
  .nav .gh{
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
  .nav .gh{
    min-width:44px;
    justify-content:center;
  }
  .footmeta a{
    display:inline-flex;
    align-items:center;
    min-height:44px;
  }
  .crew .member:last-child{
    grid-column:1/-1;
    justify-self:center;
    width:min(50%,340px);
  }
}

@media (min-width:761px) and (max-width:900px){
  .atmos .pool{
    filter:blur(104px);
    animation:none;
    will-change:auto;
  }
  .band > .glow{will-change:auto}
  @media (prefers-reduced-motion:no-preference){
    .reveal{
      transform:translateY(18px);
      filter:none;
      transition-duration:.55s,.55s,.55s;
    }
    .reveal.d1{transition-delay:.04s}
    .reveal.d2{transition-delay:.08s}
    .reveal.d3{transition-delay:.12s}
    .reveal.d4{transition-delay:.16s}
    .reveal.d5{transition-delay:.2s}
  }
  .connect-wrap{
    height:auto;
    min-height:0;
  }
  #connect{
    position:relative;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
  }
  #connect > svg{display:none}
  #connect .eco-chip{
    position:relative;
    left:auto!important;
    top:auto!important;
    transform:none;
    justify-content:flex-start;
    min-width:0;
    min-height:60px;
    gap:10px;
    padding:8px 10px;
    border-radius:14px;
  }
  #connect .eco-chip .nm{
    min-width:0;
    white-space:normal;
    font-size:15px;
    line-height:1.12;
  }
  #connect .eco-chip .logo-tile,
  #connect .eco-chip .ph{
    width:40px;
    height:40px;
    border-radius:10px;
  }
  #connect .eco-chip .logo-tile img{
    width:26px;
    height:26px;
  }
  #connect .eco-chip .logo-tile-wide img{
    width:32px;
    height:16px;
  }
  #connect .eco-chip .logo-tile-image img{
    width:32px;
    height:32px;
    border-radius:8px;
  }
  #connect .eco-chip .ph{font-size:24px}
}

@media (max-width:760px){
  .connect-wrap{
    height:auto;
    min-height:0;
    margin-top:34px;
  }
  #connect{
    position:relative;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  #connect > svg{display:none}
  #connect .eco-chip{
    position:relative;
    left:auto!important;
    top:auto!important;
    transform:none;
    justify-content:flex-start;
    gap:10px;
    min-width:0;
    padding:8px 10px;
    border-radius:14px;
  }
  #connect .eco-chip .nm{
    min-width:0;
    white-space:normal;
    font-size:15px;
    line-height:1.12;
  }
  #connect .eco-chip .logo-tile,
  #connect .eco-chip .ph{
    width:42px;
    height:42px;
    border-radius:10px;
  }
  #connect .eco-chip .logo-tile img{
    width:27px;
    height:27px;
  }
  #connect .eco-chip .logo-tile-wide img{
    width:34px;
    height:17px;
  }
  #connect .eco-chip .logo-tile-image img{
    width:34px;
    height:34px;
    border-radius:8px;
  }
  #connect .eco-chip .ph{font-size:24px}
  footer.band{min-height:auto;padding-bottom:clamp(220px,52vw,300px)}
  .footmeta{flex-direction:column;gap:12px;text-align:center;padding:22px 24px 26px}
  .footmeta .links{justify-content:center}
}

@media (max-width:760px){
  .atmos .pool{
    filter:blur(96px);
    animation:none;
    will-change:auto;
  }
  .band > .glow{will-change:auto}
  @media (prefers-reduced-motion:no-preference){
    .reveal{
      transform:translateY(18px);
      filter:none;
      transition-duration:.55s,.55s,.55s;
    }
    .reveal.d1{transition-delay:.04s}
    .reveal.d2{transition-delay:.08s}
    .reveal.d3{transition-delay:.12s}
    .reveal.d4{transition-delay:.16s}
    .reveal.d5{transition-delay:.2s}
  }
  section.band{padding:74px 0}
  .wrap{padding:0 24px}
  .two{
    gap:0;
    align-items:start;
  }
  .two > div:not(.figure){min-width:0}
  .two .figure{
    order:2;
    min-height:0;
    width:100%;
    max-width:280px;
    height:auto;
    margin:30px auto 0;
  }
  .two .figure .glow{
    left:50%!important;
    right:auto!important;
    top:50%!important;
    bottom:auto!important;
    width:260px!important;
    height:260px!important;
    transform:translate(-50%,-50%)!important;
    opacity:.24;
  }
  .two .figure .mascot-slot{
    width:min(260px,72vw)!important;
    height:min(260px,72vw)!important;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .two .figure .mascot-slot svg{
    width:100%!important;
    height:100%!important;
  }
  .open-split{grid-template-columns:1fr!important}
  .kick{
    font-size:12px;
    letter-spacing:.14em;
    gap:12px;
    margin-bottom:18px;
  }
  .kick::before{width:32px}
  .stmt{
    font-size:44px;
    line-height:1.02;
    letter-spacing:0;
  }
  .lead{
    font-size:18px;
    line-height:1.46;
    margin-top:18px;
  }
  .connect-wrap{margin-top:22px}
  #connect{gap:9px}
  #connect .eco-chip{
    min-height:62px;
    padding:7px 9px;
    border-radius:13px;
    gap:9px;
  }
  #connect .eco-chip .nm{font-size:14px}
  #connect .eco-chip .logo-tile,
  #connect .eco-chip .ph{
    width:38px;
    height:38px;
    border-radius:9px;
  }
  #connect .eco-chip .logo-tile img{
    width:24px;
    height:24px;
  }
  #connect .eco-chip .logo-tile-wide img{
    width:30px;
    height:15px;
  }
  #connect .eco-chip .logo-tile-image img{
    width:30px;
    height:30px;
    border-radius:7px;
  }
  .talk-stage{
    height:208px;
    margin-top:24px;
  }
  .talk-stage .bird{
    width:158px;
    height:158px;
  }
  .talk-stage .bird svg{
    width:100%!important;
    height:100%!important;
  }
  .talk-stage .b-left{
    left:4%;
    bottom:10px;
  }
  .talk-stage .b-right{
    right:4%;
    bottom:8px;
  }
  .talk-stage svg.arc{
    top:8px;
    height:176px;
  }
  .fleet-stage{
    height:282px;
    margin-top:20px;
    overflow:hidden;
  }
  .fleet-stage .bird{
    width:var(--fleet-size);
    height:var(--fleet-size);
  }
  .fleet-stage .bird svg{
    width:100%!important;
    height:100%!important;
  }
  .fleet-stage svg.path{
    top:66px;
    height:210px;
  }
  .fleet-bird-lead{
    --fleet-size:158px;
    right:4%!important;
    bottom:84px!important;
  }
  .fleet-bird-scout{
    --fleet-size:94px;
    left:4%!important;
    bottom:78px!important;
  }
  .fleet-bird-gold{
    --fleet-size:102px;
    left:31%!important;
    bottom:92px!important;
  }
  .fleet-bird-coral{
    --fleet-size:98px;
    left:56%!important;
    bottom:76px!important;
  }
  .fleet-stage .ocean{height:160px!important}
  .crew{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px 12px;
    margin-top:28px;
  }
  .crew .member{min-width:0}
  .crew .member:last-child{
    width:min(50%,170px);
  }
  .crew .member .slot{
    height:148px;
    align-items:center;
  }
  .crew .member .slot svg{
    width:138px!important;
    height:138px!important;
  }
  .crew .member .cap{
    font-size:13px;
    margin-top:4px;
  }
  footer.band{
    min-height:auto;
    padding:86px 0 205px;
  }
  .close{
    margin-bottom:42px;
  }
  .close .bird svg{
    width:156px!important;
    height:156px!important;
  }
  .close h2{
    font-size:58px;
    letter-spacing:0;
  }
  .close .tag{font-size:20px}
  .close .codeline{font-size:13px}
  .footer-ocean{height:260px}
  .footmeta{
    gap:8px;
    padding:18px 24px 22px;
    font-size:12px;
  }
  .footmeta .links{font-size:12px}
}

@media (max-width:340px){
  #connect{grid-template-columns:1fr}
}

@media (max-width:420px){
  section.band{padding:64px 0}
  .stmt{font-size:38px}
  .lead{
    font-size:17px;
    line-height:1.45;
    margin-top:16px;
  }
  .connect-wrap{margin-top:20px}
  .two .figure{
    max-width:220px;
    margin-top:20px;
  }
  .two .figure .glow{
    width:212px!important;
    height:212px!important;
  }
  .two .figure .mascot-slot{
    width:min(216px,66vw)!important;
    height:min(216px,66vw)!important;
  }
  .talk-stage{
    height:186px;
  }
  .talk-stage .bird{
    width:140px;
    height:140px;
  }
  .fleet-stage{
    height:244px;
  }
  .fleet-stage svg.path{
    top:52px;
    height:174px;
  }
  .fleet-bird-lead{
    --fleet-size:132px;
    bottom:72px!important;
  }
  .fleet-bird-scout{
    --fleet-size:80px;
    bottom:66px!important;
  }
  .fleet-bird-gold{
    --fleet-size:84px;
    left:30%!important;
    bottom:78px!important;
  }
  .fleet-bird-coral{
    --fleet-size:82px;
    left:56%!important;
    bottom:64px!important;
  }
  .fleet-stage .ocean{height:136px!important}
  .crew{
    gap:18px 10px;
    margin-top:26px;
  }
  .crew .member .slot{
    height:118px;
  }
  .crew .member .slot svg{
    width:112px!important;
    height:112px!important;
  }
  .crew .member .cap{margin-top:2px}
  .close h2{font-size:52px}
  .close .tag{font-size:18px}
  .footer-ocean{height:238px}
}

@media (min-width:380px) and (max-width:560px){
  .crew{
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:16px 10px;
  }
  .crew .member{
    grid-column:span 2;
  }
  .crew .member:nth-child(4){
    grid-column:2/span 2;
  }
  .crew .member:last-child{
    grid-column:4/span 2;
    width:auto;
  }
  .crew .member .slot{
    height:108px;
  }
  .crew .member .slot svg{
    width:102px!important;
    height:102px!important;
  }
}

@media (max-height:480px) and (max-width:900px){
  @media (prefers-reduced-motion:no-preference){
    .reveal{
      transform:translateY(18px);
      filter:none;
      transition-duration:.55s,.55s,.55s;
    }
    .reveal.d1{transition-delay:.04s}
    .reveal.d2{transition-delay:.08s}
    .reveal.d3{transition-delay:.12s}
    .reveal.d4{transition-delay:.16s}
    .reveal.d5{transition-delay:.2s}
  }
  .nav{padding:10px 22px}
  .nav.scrolled{padding:8px 22px}
  .hero{
    --hero-ocean-height:132px;
    min-height:100svh;
    padding:56px 18px var(--hero-ocean-height);
    align-content:start;
  }
  .hero-copy{
    max-width:620px;
    transform:none;
  }
  .hero .eyebrow{
    font-size:11px;
    letter-spacing:.18em;
    margin-bottom:7px;
  }
  .hero h1{
    font-size:68px;
    line-height:.86;
  }
  .hero .tag{
    max-width:32ch;
    font-size:16px;
    line-height:1.28;
    margin-top:12px;
  }
  .hero .codeline{display:none}
  .hero .cta-row{
    gap:10px;
    margin-top:14px;
  }
  .hero .gh.lg{
    width:auto;
    min-height:44px;
    max-width:none;
    padding:10px 16px;
    font-size:13px;
  }
  .hero .gh.lg svg{
    width:18px;
    height:18px;
  }
  .hero-birds{
    bottom:-4px;
    width:calc(100% - 56px);
    height:100px;
  }
  .hero-bird-goggles,
  .hero-bird-jetpack{display:none}
  .hero-bird-heli{--bird-size:72px;left:9%;top:43%}
  .hero-bird-main{--bird-size:88px;top:21%}
  .hero-bird-flag{--bird-size:74px;right:9%;top:44%}
  .hero-ocean{height:var(--hero-ocean-height)!important}
  section.band{padding:56px 0}
  .kick{
    margin-bottom:14px;
  }
  .stmt{
    font-size:38px;
    line-height:1;
  }
  .lead{
    font-size:17px;
    line-height:1.45;
    margin-top:16px;
  }
  .two .figure{
    max-width:206px;
    margin-top:18px;
  }
  .two .figure .glow{
    width:196px!important;
    height:196px!important;
  }
  .two .figure .mascot-slot{
    width:min(196px,40vw)!important;
    height:min(196px,40vw)!important;
  }
  .connect-wrap{
    height:auto;
    min-height:0;
    margin-top:20px;
  }
  #connect{
    position:relative;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
  }
  #connect > svg{display:none}
  #connect .eco-chip{
    position:relative;
    left:auto!important;
    top:auto!important;
    transform:none;
    justify-content:flex-start;
    min-width:0;
    min-height:52px;
    gap:8px;
    padding:6px 8px;
  }
  #connect .eco-chip .nm{
    font-size:13px;
    line-height:1.08;
  }
  #connect .eco-chip .logo-tile,
  #connect .eco-chip .ph{
    width:34px;
    height:34px;
    border-radius:8px;
  }
  #connect .eco-chip .logo-tile img{
    width:22px;
    height:22px;
  }
  #connect .eco-chip .logo-tile-wide img{
    width:28px;
    height:14px;
  }
  #connect .eco-chip .logo-tile-image img{
    width:27px;
    height:27px;
    border-radius:7px;
  }
  .talk-stage{
    height:170px;
    margin-top:20px;
  }
  .talk-stage .bird{
    width:126px;
    height:126px;
  }
  .fleet-stage{
    height:220px;
    margin-top:18px;
  }
  .fleet-stage svg.path{
    top:42px;
    height:166px;
  }
  .fleet-bird-lead{
    --fleet-size:116px;
    bottom:62px!important;
  }
  .fleet-bird-scout{
    --fleet-size:72px;
    bottom:58px!important;
  }
  .fleet-bird-gold{
    --fleet-size:78px;
    bottom:70px!important;
  }
  .fleet-bird-coral{
    --fleet-size:76px;
    bottom:56px!important;
  }
  .fleet-stage .ocean{height:116px!important}
  .crew{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px 10px;
  }
  .crew .member:last-child{
    grid-column:auto;
    width:auto;
  }
  .crew .member .slot{
    height:110px;
  }
  .crew .member .slot svg{
    width:104px!important;
    height:104px!important;
  }
  footer.band{
    padding:58px 0 168px;
  }
  .close .bird svg{
    width:132px!important;
    height:132px!important;
  }
  .close h2{font-size:46px}
  .close .tag{font-size:17px}
  .footer-ocean{height:206px}
}