/* Home page: hero, figures strip, the release band, work cards and releases.
   Builds on the brand illustrations (slate blue, frosted glass, copper joints). */

.sr-defs{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- Hero ---------- */
.home-hero{position:relative;isolation:isolate;min-height:min(78vh,720px);padding:96px 0 104px}
.home-hero::before{ /* full-bleed atmosphere behind the content column */
  content:"";position:absolute;z-index:-3;top:0;bottom:-160px;left:50%;width:100vw;transform:translateX(-50%);
  -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent);mask-image:linear-gradient(180deg,#000 62%,transparent);
  background:
    radial-gradient(55% 65% at 76% 44%, rgba(111,152,179,.30), transparent 70%),
    radial-gradient(40% 50% at 12% 90%, rgba(185,120,74,.10), transparent 70%),
    linear-gradient(180deg,rgba(238,242,244,.0) 0%,rgba(238,242,244,.7) 55%,rgba(250,249,246,0) 100%);
}
.hero-field{ /* faint dot field, densest behind the result card */
  position:absolute;z-index:-2;top:-80px;bottom:-160px;left:50%;width:100vw;transform:translateX(-50%);pointer-events:none;
  background-image:radial-gradient(rgba(44,86,114,.22) 1px,transparent 1.4px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(42% 58% at 74% 46%,#000 0%,rgba(0,0,0,.35) 55%,transparent 100%);
  mask-image:radial-gradient(42% 58% at 74% 46%,#000 0%,rgba(0,0,0,.35) 55%,transparent 100%);
}
.hero-rings{position:absolute;z-index:-1;right:-4%;top:50%;width:min(56vw,760px);aspect-ratio:1;transform:translateY(-50%);pointer-events:none}
.hero-rings span{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(44,86,114,.16)}
.hero-rings span:nth-child(2){inset:12%;border-color:rgba(44,86,114,.12);border-style:dashed;animation:spin 120s linear infinite}
.hero-rings span:nth-child(3){inset:26%;border-color:rgba(185,120,74,.22)}
.hero-rings span:nth-child(1)::after,.hero-rings span:nth-child(3)::after{ /* copper joints riding the rings */
  content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:var(--h-copper);top:50%;left:-4px;margin-top:-4px;box-shadow:0 0 0 4px rgba(185,120,74,.12)
}
.hero-rings span:nth-child(1){animation:spin 90s linear infinite}
.hero-rings span:nth-child(3){animation:spin 60s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-glow{position:absolute;z-index:-1;top:-80px;bottom:-220px;left:50%;width:100vw;transform:translateX(-50%);pointer-events:none;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 60%,transparent);mask-image:linear-gradient(180deg,#000 60%,transparent)}
.hero-glow span{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;animation:glow-float 22s ease-in-out infinite alternate}
.hero-glow span:nth-child(1){width:360px;height:360px;left:4%;top:10%;background:rgba(44,86,114,.22)}
.hero-glow span:nth-child(2){width:260px;height:260px;left:38%;bottom:4%;background:rgba(185,120,74,.20);animation-duration:26s;animation-delay:-6s}
.hero-glow span:nth-child(3){width:220px;height:220px;right:10%;top:2%;background:rgba(111,152,179,.30);animation-duration:19s;animation-delay:-11s}
@keyframes glow-float{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(40px,-30px,0) scale(1.12)}
  100%{transform:translate3d(-30px,20px,0) scale(.95)}
}

.home-hero h1{font-size:clamp(44px,5.8vw,80px);letter-spacing:-.035em}
.home-hero h1 .accent{
  display:inline-block;
  background:linear-gradient(100deg,var(--h-slate) 0%,var(--h-slate-2) 45%,var(--h-copper) 120%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:ink-shift 9s ease-in-out infinite alternate;
}
@keyframes ink-shift{from{background-position:0% 50%}to{background-position:60% 50%}}
.hero-kicker{color:var(--h-copper-text)}
.hero-copy > *{animation:rise .9s var(--h-ease-out) both}
.hero-copy > :nth-child(2){animation-delay:.08s}
.hero-copy > :nth-child(3){animation-delay:.16s}
.hero-copy > :nth-child(4){animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}

.hero-actions .button{transition:transform .2s var(--h-ease-out),box-shadow .2s,background-color .2s,border-color .2s}
.hero-actions .button:hover{transform:translateY(-2px);box-shadow:0 10px 24px -14px rgba(14,34,51,.55)}
.hero-actions .button:not(.primary){background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* Result card: a pane of frosted glass, like the panes in the artwork */
.hero-result{
  position:relative;
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  backdrop-filter:blur(20px) saturate(150%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 30px 80px -36px rgba(14,34,51,.45),0 0 0 1px rgba(44,86,114,.08);
  animation:rise 1s .2s var(--h-ease-out) both;
}
.hero-result .hr-bar{transform-box:fill-box;transform-origin:0 50%;animation:grow 1.4s var(--h-ease-out) both}
.hero-result li:nth-child(1) .hr-bar{animation-delay:.55s}
.hero-result li:nth-child(2) .hr-bar{animation-delay:.68s}
.hero-result li:nth-child(3) .hr-bar{animation-delay:.81s}
.hero-result li:nth-child(4) .hr-bar{animation-delay:.94s}
@keyframes grow{from{transform:scaleX(0)}}
.hero-result .is-lorm .hr-bar{fill:url(#lorm-grad)}

/* ---------- Proof strip ---------- */
.proof-strip{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  margin:0 0 8px;padding:0;list-style:none;
  border-top:1px solid rgba(44,86,114,.16);border-bottom:1px solid rgba(44,86,114,.16);
}
.proof-strip li{padding:26px 24px;display:grid;gap:6px}
.proof-strip li + li{border-left:1px solid rgba(44,86,114,.16)}
.proof-strip strong{font-size:clamp(30px,3.4vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--ink,#141312);font-variant-numeric:tabular-nums}
.proof-strip strong em{font-style:normal;color:var(--h-copper)}
.proof-strip li > span{font-size:14px;color:var(--muted,#4F5A61);line-height:1.45}

/* ---------- Latest release: a deep slate band ---------- */
.home-section.band{position:relative;isolation:isolate;border-top:0;padding:88px 0 96px;margin-top:48px;color:#DCE5EB}
.home-section.band::before{
  content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);
  background:
    radial-gradient(50% 60% at 85% 0%, rgba(111,152,179,.28), transparent 70%),
    radial-gradient(40% 50% at 0% 100%, rgba(185,120,74,.16), transparent 70%),
    linear-gradient(180deg,var(--h-navy) 0%,var(--h-navy-2) 100%);
}
.home-section.band::after{ /* faint measurement grid */
  content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(70% 80% at 50% 30%,#000,transparent);
  mask-image:radial-gradient(70% 80% at 50% 30%,#000,transparent);
}
.band-intro{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px clamp(40px,5vw,72px);align-items:end;margin-bottom:40px}
.band-intro h2{white-space:nowrap}
.band-intro .section-lead{justify-self:end}
.band-intro .section-head{flex-direction:column;align-items:flex-start;gap:18px;margin:0}
.band h2{color:#fff;font-size:clamp(32px,3.6vw,48px);letter-spacing:-.025em;line-height:1.05}
.band .kicker{color:var(--h-copper-soft)}
.band .section-lead{margin:0;max-width:600px;font-size:18px;line-height:1.65;font-weight:450;color:#C6D3DC;letter-spacing:0}
.band .section-lead strong{color:#fff;font-weight:600}
.band .text-link{color:#E6C9B2;font-size:15px}
.band .text-link:hover{color:#fff}

/* The four steps read as places you can go */
.band .step-links{gap:14px;margin:0 0 28px;align-items:stretch}
.band .step-links li{display:flex}
.band .step-links li > a{flex:1}
.band .step-links a{
  position:relative;overflow:hidden;
  grid-template-columns:32px minmax(0,1fr) 36px;align-items:center;align-content:center;row-gap:2px;
  padding:20px 18px 20px 20px;border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.14);color:#fff;
  transition:transform .3s var(--h-ease-out),background-color .3s,border-color .3s,box-shadow .3s;
}
.band .step-links a::before{ /* a copper rule that draws across on hover */
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--h-copper),#E2A57A);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--h-ease-out);
}
.band .step-links a::after{ /* arrow button */
  content:"\2192";grid-column:3;grid-row:1/span 2;justify-self:end;
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);color:#fff;font-weight:600;font-size:16px;line-height:1;
  transition:transform .3s var(--h-ease-out),background-color .3s,border-color .3s;
}
.band .step-links a:hover,.band .step-links a:focus-visible{
  transform:translateY(-3px);
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.06));
  border-color:rgba(230,201,178,.45);
  box-shadow:0 22px 40px -24px rgba(0,0,0,.7);
}
.band .step-links a:hover::before,.band .step-links a:focus-visible::before{transform:none}
.band .step-links a:hover::after,.band .step-links a:focus-visible::after{background:var(--h-copper);border-color:var(--h-copper);transform:translateX(3px)}
.band .step-links a:focus-visible{outline:2px solid #E6C9B2;outline-offset:3px}
.band .step-links span{background:transparent;color:var(--h-copper-soft);border:1px solid rgba(230,201,178,.5);font-size:12px}
.band .step-links strong{font-size:17px;letter-spacing:-.01em}
.band .step-links em{color:#A9BBC8;font-size:13.5px}
.band .leaderboard{box-shadow:0 40px 90px -40px rgba(0,0,0,.6);border-color:transparent}

/* ---------- Our work: cards with the brand artwork ---------- */
.portal-card{padding:0;overflow:hidden;background:#fff;border-color:rgba(44,86,114,.14);transition:transform .35s var(--h-ease-out),box-shadow .35s,border-color .2s}
.portal-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -34px rgba(14,34,51,.45);border-color:rgba(44,86,114,.3)}
.portal-art{aspect-ratio:16/10;overflow:hidden;background:var(--h-mist)}
.portal-art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--h-ease-out)}
.portal-card:hover .portal-art img{transform:scale(1.06)}
.portal-card h3,.portal-card p,.portal-card .text-link{margin-left:24px;margin-right:24px}
.portal-card h3{margin-top:20px}
.portal-card .text-link{margin-bottom:24px;margin-top:auto;padding-top:8px}

/* ---------- Releases: a timeline ---------- */
.release-list{border-top:0}
.release-list li{position:relative;padding-left:28px;border-bottom:1px solid rgba(44,86,114,.12);transition:background-color .2s}
.release-list li:hover{background:rgba(44,86,114,.035)}
.release-list li::before{content:"";position:absolute;left:6px;top:0;bottom:0;width:1px;background:rgba(44,86,114,.2)}
.release-list li::after{content:"";position:absolute;left:2px;top:24px;width:9px;height:9px;border-radius:50%;background:var(--h-copper);box-shadow:0 0 0 4px #FAF9F6}
.release-list .type{color:var(--h-copper-text)}

/* ---------- Small screens ---------- */
@media (max-width:860px){
  .band-intro{grid-template-columns:1fr;align-items:start}
  .band-intro h2{white-space:normal}
  .band-intro .section-lead{justify-self:start}

  .home-hero{min-height:0;padding:56px 0 64px}
  .hero-rings{right:-30%;top:30%;width:120vw;opacity:.7}
  .proof-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proof-strip li:nth-child(3){border-left:0}
  .proof-strip li:nth-child(n+3){border-top:1px solid rgba(44,86,114,.16)}
  .proof-strip li{padding:20px 16px}
  .home-section.band{padding:64px 0 72px}
}