/* ==========================================================================
   Phase — services overview (services.html)
   The flow system (css/flow.css) in the poster theme (css/home.css supplies
   the palette, the sticker hero, the manifesto and the close; js/home.js
   drives them). What's particular to this page:

   - the hero's disc is black, so the manifesto it becomes is white on
     black, each service named in its own colour
   - the six services are big stacked cards in the colours and shapes of
     the homepage's "What we do" cards; each settles over the last as you
     scroll (the shared .fl-step stacking in js/flow.js). Below 901px and
     with reduced motion they simply follow one another.
   ========================================================================== */

body.services-page{--hm-ground:#0a0a0a}

/* ==========================================================================
   HERO + MANIFESTO
   ========================================================================== */
.services-page .hm-sun{--s:clamp(250px,28vw,480px);left:65%;top:55%}
.services-page .hm-hero h1{font-size:clamp(4rem,15vw,14.5rem);letter-spacing:-.06em}
/* the disc is as black as the type, so the copy blends in "difference":
   ink on the paper, flipping to white wherever it crosses the disc */
.services-page .hm-hero__copy{mix-blend-mode:difference;color:#fff}
.services-page .hm-hero__label{color:rgba(255,255,255,.6)}
.services-page .hm-manifesto{
  color:#fff;
  --fl-ink:#fff;
  --fl-faint:rgba(255,255,255,.55);
  --fl-dim:rgba(255,255,255,.75);
  --fl-line-2:rgba(255,255,255,.25);
}
.services-page .hm-manifesto .fl-manifesto__text{max-width:26ch}
/* each service in its card's colour; creative direction gets the spectrum */
.sv-hl .fl-w,
.sv-hl:not(:has(.fl-w)){color:var(--c)}
.sv-hl--spectrum .fl-w,
.sv-hl--spectrum:not(:has(.fl-w)){
  background:var(--fl-spectrum);
  background-size:300% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ==========================================================================
   THE SIX — stacked colour cards
   ========================================================================== */
.sv-stack{padding:clamp(120px,13vw,190px) 0 clamp(90px,10vw,140px)}
.sv-stack .fl-label{margin-bottom:clamp(26px,3vw,40px)}
.fl-step.sv-card{
  top:calc(var(--fl-nav) + 28px + var(--i) * 16px);
  display:grid;
  grid-template-columns:1.1fr .9fr;
  align-items:center;
  gap:clamp(20px,4vw,60px);
  min-height:min(560px,calc(100svh - var(--fl-nav) - 150px));
  margin-bottom:22vh;
  padding:clamp(30px,4vw,60px);
  border:0;
  border-radius:32px;
  color:var(--fg,#0a0a0a);
  background:var(--bg);
  box-shadow:0 -10px 40px -26px rgba(10,10,10,.35),0 40px 80px -50px rgba(10,10,10,.5);
}
.fl-step.sv-card:last-child{margin-bottom:0}
.fl-step.sv-card::before,
.fl-step.sv-card::after{display:none}
.sv-card__copy{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.sv-card__n{font-family:var(--fl-mono);font-size:.74rem;letter-spacing:.18em;opacity:.7}
.sv-card h2{font-size:clamp(2.4rem,4.8vw,4.6rem);font-weight:600;letter-spacing:-.045em;line-height:.95}
.sv-card p{max-width:38ch;font-size:clamp(1.02rem,1.25vw,1.15rem);line-height:1.55;color:inherit;opacity:.86}
.sv-card__list{display:flex;flex-wrap:wrap;gap:8px}
.sv-card__list li{
  padding:7px 13px;
  border-radius:var(--radius-pill);
  border:1px solid currentColor;
  font-family:var(--fl-mono);
  font-size:.72rem;
  letter-spacing:.06em;
  opacity:.85;
}
.sv-card__link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:6px;
  padding:13px 22px;
  border-radius:var(--radius-pill);
  font-weight:600;
  font-size:.96rem;
  color:var(--bg);
  background:var(--fg,#0a0a0a);
  transition:transform .35s var(--fl-ease);
}
.sv-card__link:hover{transform:translateY(-2px)}
.sv-card__link svg{width:15px;height:15px;transition:transform .35s var(--fl-ease)}
.sv-card__link:hover svg{transform:translateX(3px)}
.sv-card__art{justify-self:center;width:100%;max-width:380px}
.sv-card__art img{display:block;width:100%;height:auto;transform:rotate(calc(var(--r,0) * 1deg));filter:drop-shadow(0 24px 30px rgba(0,0,0,.18))}

/* ==========================================================================
   PRESS + CLOSE
   ========================================================================== */
.sv-press{padding:clamp(70px,8vw,110px) 0 0}
.sv-cta .fl-cta__title{max-width:12ch;font-size:clamp(2.8rem,7.4vw,7rem)}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:900px){
  .fl-step.sv-card{position:relative;top:auto;grid-template-columns:1fr;min-height:0;margin-bottom:18px}
  .sv-card__art{order:-1;justify-self:end;max-width:200px;margin:-8px -8px -24px 0}
}