/* ==========================================================================
   Phase — homepage (index)
   A creative-agency homepage in the flow system (css/flow.css), dressed in
   a kit of shapes cut from the "abstract faces" poster set: the shards,
   discs, rainbows, scallops, lips and grain, never a whole portrait.
   (images/home/*.webp — each one is a single shape plus the sprayed grain
   that sat on it, clipped to its outline.)

   - CH 01 a pinned hero: a sticker collage around the headline; scroll
     scatters the shapes past the camera while the yellow disc behind
     "phase." swells to fill the screen and becomes the manifesto
   - CH 03 a pinned services stage: one card that changes colour, shape and
     copy for each of the six services
   - the rest borrows the shared run, stacked cards and close
   Motion: js/home.js. The palette and these pieces are the "poster" theme
   (body.poster): about and pricing (css/about.css, css/pricing.css) reuse
   the hero, the manifesto and the close with their own shapes and disc.
   ========================================================================== */

body.poster{
  --p-red:#ff4d36;
  --p-yellow:#f7d000;
  --p-green:#01ba4e;
  --p-blue:#0069f5;
  --p-pink:#f9b1d2;
  --p-cream:#ffeadd;
  --fl-bg:#f7f3ec;
  --fl-bg-2:#efe9df;
  --fl-surface:#fffdf9;
  --fl-spectrum:linear-gradient(90deg,#ff4d36 0%,#f7d000 20%,#01ba4e 40%,#0069f5 60%,#f9b1d2 80%,#ff4d36 100%);
  /* the disc's colour, which becomes the manifesto's page */
  --hm-ground:var(--p-yellow);
}
.poster ::selection{background:var(--p-yellow);color:#0a0a0a}

/* ==========================================================================
   CH 01 · HERO
   ========================================================================== */
.hm-hero{position:relative}
.js .hm-hero{height:230vh}
.hm-hero__stage{
  position:sticky;
  top:0;
  height:100vh;
  height:100svh;
  min-height:600px;
  overflow:hidden;
  isolation:isolate;
  display:grid;
  place-items:center;
  background:var(--fl-bg);
}
/* faint paper texture so the flat ground isn't dead */
.hm-hero__stage::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  opacity:.5;
  background-image:radial-gradient(rgba(10,10,10,.07) 1px,transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%,transparent 40%,#000);
  mask-image:radial-gradient(70% 70% at 50% 50%,transparent 40%,#000);
}

/* the yellow disc behind "phase." — it becomes the manifesto's page */
.hm-sun{
  --s:clamp(240px,27vw,460px);
  position:absolute;
  left:67%;
  top:50%;
  z-index:0;
  width:var(--s);
  height:var(--s);
  margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius:50%;
  background:var(--hm-ground);
  will-change:transform;
}
.hm-hero .fl-cue{z-index:5}
.hm-hero.is-moving .fl-cue{visibility:hidden}

.hm-hero__copy{
  position:relative;
  z-index:3;
  width:100%;
  max-width:1180px;
  padding:var(--fl-nav) clamp(20px,3.4vw,48px) 0;
  text-align:center;
}
.hm-hero__label{justify-content:center;margin-bottom:clamp(16px,2.4vh,26px)}
.hm-hero h1{
  font-size:clamp(3.2rem,9.4vw,10rem);
  font-weight:600;
  letter-spacing:-.055em;
  line-height:.9;
}
.hm-hero h1{transform-origin:50% 60%}
.hm-hero h1 .hm-line{display:block}
/* each word rises out of its own mask; the mask runs deep enough below the
   tight line box to keep descenders (the g in "Pricing.") whole */
.hm-word{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em .26em;margin-bottom:-.26em}
.hm-word > span{display:inline-block}
.hm-hero__sub{
  max-width:34em;
  margin:clamp(20px,3vh,30px) auto 0;
  font-size:clamp(1.02rem,1.3vw,1.22rem);
  line-height:1.55;
  color:var(--fl-dim);
}
.hm-hero .fl-actions{justify-content:center;margin-top:clamp(22px,3.4vh,34px)}

/* the shapes' layer covers the stage without taking a grid row (which
   would push the centred copy down) */
.hm-shapes{position:absolute;inset:0;pointer-events:none}

/* the sticker collage. Each shape is three nested layers so the scroll
   scatter (.hm-el), the pointer parallax (__par) and the idle float
   (__float) never fight over one transform; the centring + resting tilt
   live on __c in CSS only. */
.hm-el{
  position:absolute;
  left:var(--x);
  top:var(--y);
  z-index:2;
  width:calc(var(--w) * 1vw);
  transform-origin:0 0;
  pointer-events:none;
}
.hm-el--front{z-index:4}
.hm-el__c{transform:translate(-50%,-50%) rotate(calc(var(--r,0) * 1deg))}
.hm-el img{display:block;width:100%;height:auto;filter:drop-shadow(0 14px 18px rgba(60,40,10,.12))}

/* ==========================================================================
   CH 02 · MANIFESTO — on the disc's yellow
   ========================================================================== */
.hm-manifesto{padding-top:clamp(40px,6vw,90px);background:var(--hm-ground);--fl-faint:rgba(10,10,10,.55);--fl-dim:rgba(10,10,10,.72);--fl-line-2:rgba(10,10,10,.22)}
.hm-manifesto .fl-lit-accent .fl-w,
.hm-manifesto .fl-lit-accent:not(:has(.fl-w)){background:none;color:var(--p-blue)}
/* a scalloped hem where the coloured page meets the paper */
.hm-manifesto::after{
  content:"";
  position:absolute;
  left:0;right:0;
  top:100%;
  height:28px;
  background:radial-gradient(circle at 50% 0,var(--hm-ground) 27px,transparent 28px) 0 0/56px 28px repeat-x;
  pointer-events:none;
  z-index:1;
}
.hm-manifesto__badge{display:block;width:150px;height:auto;margin-top:2px}

/* ==========================================================================
   CH 03 · SERVICES — one card that changes for each service
   Without JS (and on small screens) the six cards simply stack;
   js/home.js adds .is-pinned to flip through them in place.
   ========================================================================== */
.hm-services{position:relative;padding:clamp(130px,14vw,200px) 0 clamp(90px,10vw,140px)}
.hm-services__grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(32px,5vw,80px);align-items:start}
.hm-services__head .fl-h2{max-width:11ch}
.hm-nav{display:none}
.hm-cards{display:flex;flex-direction:column;gap:20px}
.hm-svc{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr .8fr;
  align-items:end;
  gap:20px;
  min-height:420px;
  padding:clamp(28px,3.4vw,48px);
  border-radius:32px;
  color:var(--fg,#0a0a0a);
  background:var(--bg);
}
.hm-svc__n{font-family:var(--fl-mono);font-size:.72rem;letter-spacing:.18em;opacity:.7}
.hm-svc h3{margin-top:auto;font-size:clamp(2.2rem,4vw,3.8rem);font-weight:600;letter-spacing:-.045em;line-height:.95}
.hm-svc__copy{position:relative;z-index:2;display:flex;flex-direction:column;gap:16px;height:100%}
.hm-svc__copy p{max-width:32ch;font-size:1.05rem;line-height:1.55;color:inherit;opacity:.86}
.hm-svc .fl-tags li{color:inherit;border-color:currentColor;background:transparent;opacity:.8}
.hm-svc__link{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:4px;
  padding:12px 20px;
  border-radius:var(--radius-pill);
  font-weight:600;
  font-size:.95rem;
  color:var(--bg);
  background:var(--fg,#0a0a0a);
  transition:transform .35s var(--fl-ease);
}
.hm-svc__link:hover{transform:translateY(-2px)}
.hm-svc__link svg{width:15px;height:15px;transition:transform .35s var(--fl-ease)}
.hm-svc__link:hover svg{transform:translateX(3px)}
.hm-svc__art{position:relative;z-index:1;align-self:center;justify-self:center;width:100%;max-width:340px}
.hm-svc__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))}

/* pinned: a sticky stage; the cards stack in one spot and swap */
.hm-services.is-pinned{padding:0;height:calc(var(--n,6) * 70vh + 100vh)}
.hm-services.is-pinned .hm-services__stage{
  position:sticky;
  top:0;
  height:100vh;
  height:100svh;
  display:flex;
  align-items:center;
  padding-top:calc(var(--fl-nav) - 10px);
}
.hm-services.is-pinned .hm-services__grid{align-items:center;width:100%}
.hm-services.is-pinned .hm-nav{display:flex}
.hm-services.is-pinned .hm-cards{
  position:relative;
  display:block;
  height:min(620px,calc(100svh - var(--fl-nav) - 70px));
  border-radius:32px;
  background:var(--bg0,#0a0a0a);
  box-shadow:0 50px 100px -50px rgba(10,10,10,.5);
}
.hm-services.is-pinned .hm-svc{position:absolute;inset:0;min-height:0;background:transparent;opacity:0;visibility:hidden}
.hm-services.is-pinned .hm-svc.is-active{opacity:1;visibility:visible}

.hm-nav{flex-direction:column;gap:2px;margin-top:clamp(28px,4vh,44px)}
.hm-nav a{
  display:flex;
  align-items:baseline;
  gap:14px;
  padding:6px 0;
  font-size:clamp(1.15rem,1.7vw,1.6rem);
  font-weight:600;
  letter-spacing:-.025em;
  color:rgba(10,10,10,.26);
  transition:color .35s ease;
}
.hm-nav a span{font-family:var(--fl-mono);font-size:.68rem;font-weight:500;letter-spacing:.14em;color:rgba(10,10,10,.32)}
.hm-nav a i{align-self:center;width:9px;height:9px;border-radius:50%;background:var(--c);transform:scale(0);transition:transform .45s var(--fl-ease)}
.hm-nav a:hover{color:rgba(10,10,10,.6)}
.hm-nav a.is-active{color:var(--fl-ink)}
.hm-nav a.is-active i{transform:scale(1)}

/* ==========================================================================
   CH 04 · WORK — the shared run; just the paper behind it
   ========================================================================== */
.hm-work{background:var(--fl-bg)}
.hm-more__art{width:96px;height:auto;margin-bottom:4px;transform:rotate(10deg)}

/* ==========================================================================
   CH 05 · PROCESS — a shape peeking off each card
   ========================================================================== */
.home .fl-step{background:var(--fl-surface)}
.hm-step__art{position:absolute;right:clamp(20px,3vw,40px);bottom:clamp(18px,2.6vw,34px);width:clamp(70px,8vw,112px);height:auto;transform:rotate(calc(var(--r,0) * 1deg));pointer-events:none}
.home .fl-step p{max-width:36ch}

/* ==========================================================================
   CH 06 · PROOF
   ========================================================================== */
.hm-proof{padding:clamp(110px,12vw,180px) 0;background:var(--fl-bg-2)}
/* the one number: a green slab, the count and the curve it rides */
.hm-value{
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  align-items:center;
  gap:clamp(26px,4vw,64px);
  max-width:1180px;
  margin:0 auto;
  padding:clamp(30px,4.4vw,64px);
  border-radius:40px;
  color:#0a0a0a;
  background:var(--p-green);
  box-shadow:0 50px 90px -60px rgba(10,10,10,.55);
}
.hm-value__sticker{
  position:absolute;
  right:clamp(-34px,-2.4vw,-14px);
  top:clamp(-50px,-3.6vw,-26px);
  z-index:2;
  width:clamp(84px,9vw,136px);
  height:auto;
  transform:rotate(14deg);
  filter:drop-shadow(0 16px 20px rgba(10,10,10,.22));
}
.hm-value__copy p{color:#0a0a0a}
.hm-value__k{font-family:var(--fl-mono);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase}
.hm-value__n{
  margin-top:clamp(14px,1.6vw,22px);
  font-size:clamp(4rem,9.2vw,9.2rem);
  font-weight:600;
  letter-spacing:-.06em;
  line-height:.86;
  white-space:nowrap;
}
.hm-value__n i{font-style:normal;color:#fff}
.hm-value__t{max-width:16ch;margin-top:clamp(18px,2vw,28px);font-size:clamp(1.35rem,2.1vw,1.9rem);font-weight:600;letter-spacing:-.025em;line-height:1.12}
.hm-value__chart{position:relative;padding:clamp(16px,1.8vw,24px) clamp(16px,1.8vw,24px) clamp(34px,3.4vw,44px);border-radius:28px;background:rgba(255,255,255,.2)}
.hm-value__chart svg{display:block;width:100%;height:auto;overflow:visible}
.hm-value__grid line{stroke:rgba(10,10,10,.16);stroke-width:1.5;stroke-dasharray:4 7}
.hm-value__base{stroke:#0a0a0a;stroke-width:2.5}
.hm-value__area{fill:rgba(255,255,255,.24)}
.hm-value__line{fill:none;stroke:#0a0a0a;stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.hm-value__dot{fill:var(--p-red);stroke:#0a0a0a;stroke-width:5;transform-box:fill-box;transform-origin:center}
.hm-value__ax{position:absolute;bottom:clamp(10px,1.2vw,16px);font-family:var(--fl-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.hm-value__ax--start{left:clamp(16px,1.8vw,24px)}
.hm-value__ax--end{right:clamp(16px,1.8vw,24px)}

.hm-proof .fl-press{margin-top:clamp(70px,8vw,110px)}
.hm-proof .fl-quote{margin-top:clamp(80px,9vw,130px)}
.hm-proof .marquee{margin-top:clamp(50px,6vw,80px)}

/* ==========================================================================
   KIND WORDS (any poster page) — the long quote as a pink poster card with
   the lips stuck on its corner; the reviews as a strip of colour tiles,
   each knocked a little off straight
   ========================================================================== */
.poster .fl-quote{
  max-width:980px;
  padding:clamp(34px,5vw,66px) clamp(26px,5vw,72px) clamp(30px,4vw,52px);
  border-radius:36px;
  color:#0a0a0a;
  background:var(--p-pink);
  box-shadow:0 50px 90px -60px rgba(10,10,10,.55);
}
.poster .fl-quote::before{
  inset:auto;
  right:clamp(-40px,-3vw,-14px);
  top:clamp(-56px,-4vw,-30px);
  z-index:2;
  width:clamp(110px,13vw,190px);
  aspect-ratio:846/444;
  padding:0;
  border-radius:0;
  background:url("../images/home/lips-blue.webp") center/contain no-repeat;
  -webkit-mask:none;
  mask:none;
  transform:rotate(12deg);
  filter:drop-shadow(0 16px 20px rgba(10,10,10,.2));
}
.poster .fl-quote blockquote{font-size:clamp(1.35rem,2.4vw,2.05rem);font-weight:600;line-height:1.28;letter-spacing:-.022em;text-wrap:pretty}
.poster .fl-quote figcaption{margin-top:clamp(24px,3vw,36px)}
.poster .fl-quote figcaption img{width:48px;height:48px;border:0;box-shadow:0 0 0 3px #0a0a0a}
.poster .fl-quote figcaption span{font-size:.95rem;color:rgba(10,10,10,.72)}
.poster .fl-quote figcaption b{color:#0a0a0a}

.poster .marquee__track{gap:14px;padding:18px 0 22px}
.poster .marquee__item{
  gap:10px;
  padding:16px 24px;
  border:0;
  border-radius:20px;
  color:#0a0a0a;
  background:var(--p-yellow);
  box-shadow:0 18px 30px -22px rgba(10,10,10,.6);
  font-size:.98rem;
  transform:rotate(-1.4deg);
}
.poster .marquee__item:nth-child(even){transform:rotate(1.2deg)}
.poster .marquee__item:nth-child(4n+2){background:var(--p-pink)}
.poster .marquee__item:nth-child(4n+3){background:var(--p-green)}
.poster .marquee__item:nth-child(4n+4){color:#fff;background:var(--p-blue)}
.poster .marquee__stars{color:inherit;font-size:.78rem;letter-spacing:2px}
.poster .marquee__item q{color:inherit;font-weight:600}
.poster .marquee__item b{font-weight:500;opacity:.8}
.poster .marquee__item i{color:inherit;opacity:.62}

/* ==========================================================================
   THE PILL NAV (any poster page) — Phase's own purple stays, on the logo and
   the call to action, while the pill takes the poster's ink outline like the
   chips and cards: cream fill, a 2px ink edge, a colour bar under each link
   on hover, and a purple button with an ink edge and a hard little shadow
   ========================================================================== */
.poster .site-header.is-scrolled .nav-bar{
  background:var(--fl-surface);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  border:2px solid #0a0a0a;
  box-shadow:0 18px 34px -22px rgba(10,10,10,.55);
}
.poster .site-header.is-scrolled :is(.nav-links > a:not(.btn),.nav-services > a){position:relative;font-weight:500;border-bottom:0}
.poster .site-header.is-scrolled :is(.nav-links > a:not(.btn),.nav-services > a)::after{
  content:"";
  position:absolute;
  left:0;right:0;
  bottom:-2px;
  height:4px;
  border-radius:2px;
  background:var(--bar,var(--p-yellow));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s var(--fl-ease);
}
.poster .site-header.is-scrolled .nav-links > a:not(.btn):hover::after,
.poster .site-header.is-scrolled .nav-services:hover > a::after,
.poster .site-header.is-scrolled .nav-services:focus-within > a::after{transform:scaleX(1)}
.poster .nav-links > a:nth-of-type(1){--bar:var(--p-red)}
.poster .nav-links > .nav-services:nth-of-type(1) > a{--bar:var(--p-yellow)}
.poster .nav-links > a:nth-of-type(2){--bar:var(--p-green)}
.poster .nav-links > a:nth-of-type(3){--bar:var(--p-blue)}
.poster .nav-links > .nav-services:nth-of-type(2) > a{--bar:var(--p-pink)}
.poster .site-header.is-scrolled .nav-links .btn.btn-primary,
.poster .site-header.is-scrolled .nav-links .btn.btn-primary:visited{
  border:2px solid #0a0a0a;
  box-shadow:0 3px 0 #0a0a0a;
}
.poster .site-header.is-scrolled .nav-links .btn.btn-primary:hover,
.poster .site-header.is-scrolled .nav-links .btn.btn-primary:focus-visible{
  background:var(--accent);
  box-shadow:0 5px 0 #0a0a0a;
  transform:translateY(-2px);
}
.poster .site-header.is-scrolled .nav-links .btn.btn-primary:active{box-shadow:0 1px 0 #0a0a0a;transform:translateY(2px)}
.poster .site-header.is-scrolled .nav-search,
.poster .site-header.is-scrolled .nav-ai,
.poster .site-header.is-scrolled .burger{color:#0a0a0a;border:2px solid #0a0a0a}
.poster .site-header.is-scrolled .nav-search:hover,
.poster .site-header.is-scrolled .nav-ai:hover{color:#0a0a0a;border-color:#0a0a0a;background:var(--p-yellow)}
.poster .site-header .mega-menu{border:2px solid #0a0a0a}

/* ==========================================================================
   SELECTED WORK (any poster page) — each panel a light poster card: the copy
   on paper, the brand's logo on its own colour, a wash of the brand's tint,
   and the site in the light glass stage (css/style.css .stage) — the frosted
   frame with the phone beside it, as on the case-study pages
   ========================================================================== */
.poster .fl-panel{
  color:#0a0a0a;
  background:var(--fl-surface);
  border:1px solid var(--fl-line);
  border-radius:36px;
  box-shadow:0 40px 80px -50px rgba(10,10,10,.45);
}
.poster .fl-panel::before{background:radial-gradient(55% 75% at 82% 45%,color-mix(in srgb,var(--tint) 22%,transparent),transparent 72%)}
.poster .fl-panel::after{display:none}
.poster .fl-panel__n{color:rgba(10,10,10,.45)}
.poster .fl-panel__logo{box-sizing:content-box;max-width:70%;max-height:40px;padding:14px 18px;border-radius:16px;background:var(--bg);box-shadow:0 14px 26px -16px rgba(10,10,10,.6)}
.poster .fl-panel__logo--sm{max-height:30px}
.poster .fl-panel__wordmark img{padding:5px;background:var(--bg)}
.poster .fl-panel__desc{color:rgba(10,10,10,.7)}
.poster .fl-panel .fl-tags li{color:rgba(10,10,10,.72);border-color:rgba(10,10,10,.14);background:var(--fl-bg)}
.poster .fl-panel__link{color:#fff;background:#0a0a0a;border:0}
.poster .fl-panel__link:hover{background:#0a0a0a;box-shadow:0 12px 24px -12px rgba(10,10,10,.6)}
.poster .fl-panel__ghost{color:rgba(10,10,10,.035)}
.poster .fl-panel--more{border:1px solid var(--fl-line-2)}
.fl-stage{width:100%;aspect-ratio:4/3;--fw:80%;--ft:13%;border-radius:26px}
.fl-stage .stage__phone{width:19%;right:4%;bottom:7%}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .fl-panel:hover .fl-stage .stage__frame{transform:translateY(-4px)}
}

/* ==========================================================================
   CH 07 · CLOSE — the shapes come back for the send-off
   ========================================================================== */
.hm-cta{background:var(--fl-bg)}
.hm-cta .hm-el{z-index:0}
.hm-cta .fl-wrap{position:relative;z-index:2}
.hm-cta .fl-cta__title{max-width:11ch}
.home .hm-cta .fl-cta__title{max-width:15ch}

/* ---------- initial states for JS-driven entrances ---------- */
.js .hm-hero [data-hm-in],
.js .hm-hero .hm-el img,
.js .hm-sun{opacity:0}
.js .hm-word > span{transform:translateY(105%)}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:900px){
  .hm-value{grid-template-columns:1fr;border-radius:32px}
  .js .hm-hero{height:220vh}
  .hm-sun{--s:clamp(200px,52vw,380px);left:72%;top:54%}
  .hm-services__grid{grid-template-columns:1fr}
  .hm-svc{grid-template-columns:1fr;min-height:0}
  .hm-svc__art{order:-1;max-width:220px;justify-self:end;margin:-6px -6px -30px 0}
  .hm-svc h3{margin-top:0}
}
@media (max-width:700px){
  /* the collage, re-placed for a tall screen; the extras sit this one out */
  .hm-el{left:var(--mx,var(--x));top:var(--my,var(--y));width:calc(var(--mw,var(--w)) * 1vw)}
  .hm-el[data-hm-mobile="off"]{display:none}
  .hm-hero h1{font-size:clamp(2.9rem,15vw,4.6rem)}
  .hm-hero__sub{font-size:1rem;max-width:30em}
  .hm-hero .fl-actions{flex-wrap:nowrap;gap:10px}
  .hm-hero .fl-actions .fl-btn{flex:0 1 auto;height:50px;padding:0 20px}
}
@media (prefers-reduced-motion:reduce){
  .js .hm-hero{height:auto}
  .hm-hero__stage{position:relative}
  .js .hm-hero [data-hm-in],
  .js .hm-hero .hm-el img,
  .js .hm-sun{opacity:1}
  .js .hm-word > span{transform:none}
}