/*
 * Homepage service colour layer.
 * Load after site.css so the four hero choices and their matching story
 * sections share one clear, accessible colour system without changing layout.
 */

.story-hero,
.level-story{
  --service-entry:#f3f3f5;
  --service-growth:#01b2fd;
  --service-scale:#7c3aed;
  --service-elite:#f5ff63;
  --service-ink:#19171c;
  --service-violet:#4c1d95;
  --service-white:#fff;
}

/* Higgsfield-directed sticker stack: real text keeps the number crisp and accessible. */
.story-hero{
  padding-top:clamp(158px,13vw,196px);
}

.hero-copy{
  padding-bottom:clamp(68px,6vw,92px);
}

.hero-copy h1{
  line-height:1.02;
  letter-spacing:-.04em;
}

.hero-title-line{
  display:block;
}

.hero-title-row{
  display:flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}

.hero-highlight.hero-sticker-stack{
  position:relative;
  display:grid;
  flex:0 0 auto;
  width:2.85em;
  min-height:1.35em;
  margin:.02em 0 0 .16em;
  padding:0;
  isolation:isolate;
  vertical-align:middle;
  text-decoration:none;
}

.hero-sticker{
  --sticker-x:0;
  --sticker-y:0;
  --sticker-r:0deg;
  --sticker-from-x:0;
  --sticker-from-y:-.34em;
  --sticker-from-r:0deg;
  grid-area:1/1;
  place-self:center;
  min-width:2.7em;
  padding:.12em .24em .14em;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:clamp(3px,.055em,6px) solid var(--service-ink);
  border-radius:12px;
  color:var(--service-ink);
  font-size:.54em;
  font-weight:850;
  line-height:.82;
  letter-spacing:-.04em;
  white-space:nowrap;
  transform:translate(var(--sticker-x),var(--sticker-y)) rotate(var(--sticker-r));
  transform-origin:50% 50%;
  box-shadow:0 6px 0 rgb(25 23 28 / .16);
  will-change:transform,opacity;
}

.hero-sticker--yellow{
  --sticker-x:-.5em;
  --sticker-y:-.38em;
  --sticker-r:-8deg;
  --sticker-from-x:-1.25em;
  --sticker-from-y:-.9em;
  --sticker-from-r:-18deg;
  z-index:1;
  background:var(--service-elite);
}

.hero-sticker--blue{
  --sticker-x:.5em;
  --sticker-y:-.23em;
  --sticker-r:7deg;
  --sticker-from-x:1.32em;
  --sticker-from-y:-.75em;
  --sticker-from-r:18deg;
  z-index:2;
  background:var(--service-growth);
}

.hero-sticker--purple{
  --sticker-x:-.46em;
  --sticker-y:.35em;
  --sticker-r:-5deg;
  --sticker-from-x:-1.18em;
  --sticker-from-y:.92em;
  --sticker-from-r:-15deg;
  z-index:3;
  background:var(--service-scale);
  color:var(--service-white);
}

.hero-sticker--ink{
  --sticker-x:.46em;
  --sticker-y:.42em;
  --sticker-r:4deg;
  --sticker-from-x:1.22em;
  --sticker-from-y:.9em;
  --sticker-from-r:14deg;
  z-index:4;
  border-radius:999px;
  background:var(--service-ink);
  color:var(--service-white);
}

.hero-sticker--cyan{
  --sticker-x:-.34em;
  --sticker-y:-.42em;
  --sticker-r:-7deg;
  --sticker-from-x:-1.16em;
  --sticker-from-y:-.92em;
  --sticker-from-r:-18deg;
  z-index:5;
  background:var(--service-growth);
  color:var(--service-ink);
}

.hero-sticker--violet{
  --sticker-x:.38em;
  --sticker-y:.31em;
  --sticker-r:6deg;
  --sticker-from-x:1.2em;
  --sticker-from-y:.86em;
  --sticker-from-r:16deg;
  z-index:6;
  background:var(--service-violet);
  color:var(--service-white);
}

.hero-sticker--lime{
  --sticker-x:-.42em;
  --sticker-y:.28em;
  --sticker-r:-4deg;
  --sticker-from-x:-1.22em;
  --sticker-from-y:.82em;
  --sticker-from-r:-14deg;
  z-index:7;
  background:var(--service-elite);
  color:var(--service-ink);
}

.hero-sticker--white{
  --sticker-x:.28em;
  --sticker-y:-.34em;
  --sticker-r:5deg;
  --sticker-from-x:1.08em;
  --sticker-from-y:-.92em;
  --sticker-from-r:15deg;
  z-index:8;
  background:var(--service-white);
  color:var(--service-ink);
}

.hero-sticker--accent{
  --sticker-x:-.26em;
  --sticker-y:.36em;
  --sticker-r:-6deg;
  --sticker-from-x:-1.12em;
  --sticker-from-y:.96em;
  --sticker-from-r:-17deg;
  z-index:9;
  background:var(--service-scale);
  color:var(--service-elite);
}

.hero-sticker--front{
  --sticker-r:-1deg;
  --sticker-from-y:-1.05em;
  --sticker-from-r:5deg;
  z-index:10;
  background:var(--service-entry);
  color:var(--service-scale);
  box-shadow:7px 7px 0 var(--service-scale);
}

@keyframes hero-sticker-layer-loop{
  0%,100%{
    opacity:0;
    transform:translate(var(--sticker-from-x),var(--sticker-from-y)) rotate(var(--sticker-from-r)) scale(.72);
  }
  10%,88%{
    opacity:1;
    transform:translate(var(--sticker-x),var(--sticker-y)) rotate(var(--sticker-r)) scale(1);
  }
  96%{
    opacity:0;
    transform:translate(var(--sticker-x),var(--sticker-y)) rotate(var(--sticker-r)) scale(.98);
  }
}

@media(prefers-reduced-motion:no-preference){
  .hero-sticker:not(.hero-sticker--yellow){
    animation-name:hero-sticker-layer-loop;
    animation-duration:4s;
    animation-timing-function:var(--jitter-expo);
    animation-iteration-count:infinite;
    animation-fill-mode:both;
    animation-delay:var(--stack-delay,0s);
  }

  .hero-sticker--blue{--stack-delay:0s}
  .hero-sticker--purple{--stack-delay:.2s}
  .hero-sticker--ink{--stack-delay:.4s}
  .hero-sticker--cyan{--stack-delay:.6s}
  .hero-sticker--violet{--stack-delay:.8s}
  .hero-sticker--lime{--stack-delay:1s}
  .hero-sticker--white{--stack-delay:1.2s}
  .hero-sticker--accent{--stack-delay:1.4s}
  .hero-sticker--front{--stack-delay:1.6s}
}

/* Keep the hero photography neutral. Colour is carried by solid edges and labels. */
.story-hero .level-card{
  filter:none;
}

.story-hero .level-card::after{
  box-shadow:inset 0 0 0 3px var(--level-accent);
}

.story-hero .level-card--entry{--level-accent:var(--service-entry)}
.story-hero .level-card--growth{--level-accent:var(--service-growth)}
.story-hero .level-card--scale{--level-accent:var(--service-scale)}
.story-hero .level-card--elite{--level-accent:var(--service-elite)}

.story-hero .level-card--entry .service-pill{
  background:var(--service-entry);
  color:var(--service-ink);
}

.story-hero .level-card--growth .service-pill{
  background:var(--service-growth);
  color:var(--service-ink);
}

.story-hero .level-card--scale .service-pill{
  background:var(--service-scale);
  color:var(--service-white);
}

.story-hero .level-card--elite .service-pill{
  background:var(--service-elite);
  color:var(--service-ink);
}

/* Story cards use the same four solid service colours as the hero choices. */
.level-story .story-step--entry{--story-surface:var(--service-entry)}
.level-story .story-step--growth{--story-surface:var(--service-growth)}
.level-story .story-step--scale{--story-surface:var(--service-scale)}
.level-story .story-step--elite{--story-surface:var(--service-elite)}

.level-story .story-step .story-stack-card{
  border-radius:16px;
  background:var(--story-surface);
}

.level-story .story-step--growth .story-visual--growth{
  background:var(--service-growth);
}

.level-story .story-step--entry .story-card-level,
.level-story .story-step--growth .story-card-level,
.level-story .story-step--elite .story-card-level{
  background:var(--service-white);
  color:var(--service-ink);
}

.level-story .story-step--scale .story-card-level{
  background:var(--service-white);
  color:var(--service-violet);
}

.level-story .story-step--entry .story-card-copy h3,
.level-story .story-step--entry .story-card-copy p,
.level-story .story-step--entry .story-card-copy li,
.level-story .story-step--growth .story-card-copy h3,
.level-story .story-step--growth .story-card-copy p,
.level-story .story-step--growth .story-card-copy li,
.level-story .story-step--elite .story-card-copy h3,
.level-story .story-step--elite .story-card-copy p,
.level-story .story-step--elite .story-card-copy li{
  color:var(--service-ink);
}

.level-story .story-step--entry .story-card-copy li,
.level-story .story-step--growth .story-card-copy li,
.level-story .story-step--elite .story-card-copy li{
  border-color:rgb(25 23 28 / .28);
}

.level-story .story-step--scale .story-card-copy h3,
.level-story .story-step--scale .story-card-copy p,
.level-story .story-step--scale .story-card-copy li{
  color:var(--service-white);
}

.level-story .story-step--scale .story-card-copy li{
  border-color:rgb(255 255 255 / .42);
}

.level-story .story-step--entry .story-link{
  color:var(--service-violet);
}

.level-story .story-step--growth .story-link{
  color:var(--service-ink);
}

.level-story .story-step--scale .story-link{
  color:var(--service-elite);
}

.level-story .story-step--elite .story-link{
  color:var(--service-violet);
}

.level-story .story-step--growth .story-link,
.level-story .story-step--scale .story-link,
.level-story .story-step--elite .story-link{
  text-decoration:underline;
  text-decoration-thickness:.09em;
  text-underline-offset:.18em;
}

@media(max-width:720px){
  .story-hero{
    padding-top:112px;
  }

  .hero-copy{
    padding-bottom:46px;
  }

  .hero-copy h1{
    font-size:clamp(1.8rem,8.2vw,2.45rem);
    line-height:1.06;
  }

  .hero-title-row{
    font-size:.9em;
  }

  .hero-highlight.hero-sticker-stack{
    width:2.72em;
    min-height:1.32em;
    margin:.03em 0 0 .14em;
  }

  .hero-sticker{
    border-width:3px;
    box-shadow:0 4px 0 rgb(25 23 28 / .16);
  }

  .hero-sticker--front{
    box-shadow:5px 5px 0 var(--service-scale);
  }

  .story-hero .level-card::after{
    box-shadow:inset 0 0 0 2px var(--level-accent);
  }

  .level-story .story-step .story-stack-card{
    border-radius:14px;
  }
}