/* ============================================================
   GROWMARK — manifesto page
   One dark screen: the floating white stones (js/manifesto-scene.js,
   tinted to 15% saturation) and the manifesto's lines standing in the
   calm middle of them, below centre, four ticks framing the copy.
   Then the manifesto read down (.mf: the problem, the solution, the
   Growmark way, the call) and the foot. Everything reads the frame tokens and the shared
   .eyebrow / .tlink, so this file only adds the page.
   ============================================================ */

.manifesto-page{background:#000}

/* the nav floats with no bar the whole way down; under it a soft
   fade into the black (.mf-scrim, always there, never switched on or
   off) dissolves the copy as it goes up, so the text never runs
   through the nav. js/manifesto-read.js lifts it away with the last
   section, so it never lies over the footer's grey. */
.mf-scrim{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:59;
  height:calc(var(--nav-h, 70px) + 72px);
  pointer-events:none;
  /* eased stops, so the fade has no edge you can find */
  background:linear-gradient(to bottom,
    #000 0%,
    rgba(0,0,0,.97) 30%,
    rgba(0,0,0,.88) 45%,
    rgba(0,0,0,.7) 58%,
    rgba(0,0,0,.46) 70%,
    rgba(0,0,0,.24) 81%,
    rgba(0,0,0,.08) 91%,
    rgba(0,0,0,0) 100%);
  will-change:transform;
}

/* the scene covers the screen; the nav floats over it */
.manifesto{
  --ground:#000;
  position:relative;
  overflow:hidden;
  /* pull up under the sticky nav (14px + the 56px bar); the screen
     under the announcement band */
  margin-top:-70px;
  min-height:calc(100vh - var(--announce-h));
  min-height:calc(100svh - var(--announce-h));
  display:grid;
  /* the copy's top sits just under the middle of the screen */
  grid-template-rows:minmax(47svh, 1fr) auto;
}

.manifesto__stage{
  position:absolute;
  inset:0;
  /* the stones dissolve into the black below instead of stopping
     at the section's edge */
  -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - clamp(140px, 30svh, 320px)), transparent);
  mask-image:linear-gradient(to bottom, #000 calc(100% - clamp(140px, 30svh, 320px)), transparent);
}
.manifesto__canvas{
  display:block;
  width:100%;
  height:100%;
  opacity:0;
  transition:opacity 1.4s var(--ease-soft);
}
.manifesto__canvas.is-live{opacity:1}

.manifesto__body{
  grid-row:2;
  position:relative;
  width:100%;
  padding-bottom:clamp(56px, 11svh, 132px);
  text-align:center;
}

/* the copy, and the four ticks at the corners of its box */
.manifesto__frame{
  position:relative;
  max-width:1080px;
  margin-inline:auto;
  padding:22px clamp(8px, 4vw, 64px) 34px;
}
.manifesto__tick{
  position:absolute;
  width:15px;
  height:15px;
  margin:-7px;
  color:rgba(250,250,248,.62);
}
.manifesto__tick::before,
.manifesto__tick::after{
  content:"";
  position:absolute;
  background:currentColor;
}
.manifesto__tick::before{left:0;right:0;top:7px;height:1px}
.manifesto__tick::after{top:0;bottom:0;left:7px;width:1px}
.manifesto__tick--tl{top:0;left:0}
.manifesto__tick--tr{top:0;right:0}
.manifesto__tick--bl{bottom:0;left:0}
.manifesto__tick--br{bottom:0;right:0}

.manifesto__eyebrow{color:var(--muted)}
.manifesto__title{
  max-width:19em;
  margin:18px auto 0;
  font-size:clamp(2rem,4vw,3.55rem);
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.03em;
  text-wrap:balance;
}
.manifesto__tag{
  max-width:30em;
  margin:22px auto 0;
  font-size:clamp(1.05rem,1.45vw,1.3rem);
  font-weight:500;
  line-height:1.35;
  letter-spacing:-.012em;
  color:var(--ink);
  text-wrap:balance;
}

/* the lines come up once the page is in */
.manifesto__frame > *{animation:manifesto-rise 1.1s var(--ease-soft) both}
.manifesto__eyebrow{animation-delay:.35s}
.manifesto__title{animation-delay:.45s}
.manifesto__tag{animation-delay:.6s}
.manifesto__tick{animation-name:manifesto-fade;animation-delay:.8s}
@keyframes manifesto-rise{from{opacity:0;transform:translateY(14px)}}
@keyframes manifesto-fade{from{opacity:0}}
/* arriving through the page turn, wait for the curtain to lift */
html[data-turn="in"] .manifesto__frame > *{animation-play-state:paused}

/* ===================== the manifesto, read down =====================
   The text after the stones, on the same black, in the story's order,
   in one centred reading column, each point a paragraph (its
   lead bright, the rest grey) with its film full width under it; the
   Growmark way centred with its film, then the call.
   The words light up as they cross the reading line, and a film starts
   once the first line of its paragraph has (js/manifesto-read.js).
   The solution's points carry their step (01–03) because the order
   is the point. */

.mf{
  --ground:#000;
  --col:880px;
  padding-block:var(--bay);
}
.mf + .mf{padding-top:calc(var(--bay) * .5)}

.mf-head{
  display:flex;
  flex-direction:column;
  gap:18px;
  max-width:var(--col);
  margin-inline:auto;
  margin-bottom:clamp(12px,2vw,24px);
}
.mf-head__title{
  font-size:clamp(2rem,4vw,3.3rem);
  font-weight:400;
  line-height:1.06;
  letter-spacing:-.03em;
  text-wrap:balance;
}
.mf-head__lede{
  max-width:34em;
  font-size:clamp(1.02rem,1.3vw,1.15rem);
  line-height:1.55;
  color:var(--muted);
  text-wrap:pretty;
}
.mf-head--centre{
  align-items:center;
  max-width:52rem;
  margin-bottom:0;
  text-align:center;
}

/* a line that stands alone (no title over it): the reading size */
.mf-head__lede--big{
  max-width:33em;
  font-size:clamp(1.25rem,1.95vw,1.65rem);
  line-height:1.38;
  letter-spacing:-.016em;
  color:rgba(250,250,248,.72);
}
.mf-head--centre .mf-head__lede--big{text-wrap:balance}

/* the villain, in its own words: the opening of the read-down */
.mf-villain{margin:0}
.mf-villain p{
  max-width:24em;
  font-size:clamp(1.6rem,3vw,2.5rem);
  font-weight:300;
  line-height:1.2;
  letter-spacing:-.025em;
  color:var(--ink);
  text-wrap:balance;
}

/* the note under the Lumna films */
.mf-note{
  margin-top:14px;
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
}

/* a point: the paragraph, then its film the column's full width */
.mf-stages{list-style:none;margin:0;padding:0}
.mf-point{
  max-width:var(--col);
  margin-inline:auto;
  padding-top:clamp(56px,8vw,120px);
}
.mf-head + .mf-point,
.mf-head + .mf-stages > .mf-point:first-child{padding-top:clamp(28px,4vw,56px)}
.mf-point__step{
  display:block;
  margin-bottom:16px;
  font-size:13px;
  font-variant-numeric:tabular-nums;
  letter-spacing:.08em;
  color:var(--muted);
}

/* the paragraph: the lead (the point's name) bright, then the grey,
   run on as one paragraph */
.mf-read{
  max-width:33em;
  font-size:clamp(1.25rem,1.95vw,1.65rem);
  line-height:1.38;
  letter-spacing:-.016em;
  color:rgba(250,250,248,.56);
  text-wrap:pretty;
}
.mf-read > *{
  display:inline;
  margin:0;
  font:inherit;
  letter-spacing:inherit;
}
.mf-read__lead{color:var(--ink);font-weight:500}

/* a word not yet read sits dim (js/manifesto-read.js sets each word's
   opacity from the reading line; without it every word is lit) */
.mf-w{opacity:1}

/* the quote: the client's words, set apart by air and a short rule */
.mf-quote{margin:26px 0 0}
.mf-quote::before{
  content:"";
  display:block;
  width:28px;
  height:1px;
  margin-bottom:18px;
  background:var(--line);
}
.mf-quote p,
.mf-quote blockquote{margin:0}
.mf-quote p{
  font-size:clamp(1.05rem,1.35vw,1.2rem);
  font-style:italic;
  font-weight:300;
  line-height:1.45;
  letter-spacing:-.01em;
  color:var(--ink);
}
.mf-quote figcaption{
  margin-top:8px;
  font-size:14px;
  color:var(--muted);
}

/* the film slot: the motion system's near-black with soft grey shapes
   behind, 16:10 (the master), square on phones (the master's central
   square). A <video muted loop playsinline preload="none" poster>
   dropped into .mf-film__screen covers it and takes the slot's card
   away; it never shows a control or a play button, even where the
   browser won't autoplay (iOS low power keeps the poster instead). */
.mf-film{margin:clamp(28px,3.5vw,44px) 0 0}
.mf-film__screen{
  position:relative;
  display:grid;
  place-items:center;
  aspect-ratio:16/10;
  overflow:hidden;
  border:1px solid rgba(250,250,248,.1);
  border-radius:10px;
  background:
    radial-gradient(38% 46% at 28% 34%, rgba(150,150,150,.16), transparent 70%),
    radial-gradient(34% 42% at 74% 70%, rgba(150,150,150,.11), transparent 70%),
    #0A0A0A;
}
.mf-film__screen video,
.mf-film__screen img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.mf-film__screen video{pointer-events:none}
.mf-film__screen video::-webkit-media-controls,
.mf-film__screen video::-webkit-media-controls-panel,
.mf-film__screen video::-webkit-media-controls-start-playback-button,
.mf-film__screen video::-webkit-media-controls-overlay-play-button{
  display:none !important;
  -webkit-appearance:none;
}
.mf-film__screen:has(video) .mf-film__card{display:none}
.mf-film__card{
  display:grid;
  justify-items:center;
  gap:6px;
  padding:22px 30px 20px;
  border:1px solid rgba(250,250,248,.14);
  border-radius:18px;
  background:rgba(250,250,248,.08);
  text-align:center;
}
.mf-film__name{
  font-size:15px;
  font-weight:500;
  letter-spacing:-.01em;
  color:var(--ink);
}
.mf-film__len{
  font-size:12.5px;
  color:var(--muted);
}
.mf-film--wide{
  max-width:var(--col);
  margin-inline:auto;
}
/* the method's step films (video/plan) are 21:9 and run the shell's
   width, wider than the copy's column, centred on it. In the hold a
   short screen narrows them through max-width (js/manifesto-read.js),
   and the translate keeps them centred */
.mf-film--cine{
  width:min(calc(var(--shell) - 2 * var(--gutter)), calc(100vw - 2 * var(--gutter)));
  margin-left:50%;
  translate:-50% 0;
}
.mf-film--cine .mf-film__screen{aspect-ratio:21/9}

/* the call, at the head of the footer (over its night desert): the
   page ends on it, a hairline under it, then the footer's columns */
.foot__call{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding-bottom:clamp(72px,9vw,128px);
  margin-bottom:clamp(56px,6vw,88px);
  border-bottom:1px solid var(--line);
}
.foot__call .mf-head__title{max-width:14em}
.mf-call__btn{margin-top:clamp(28px,3.5vw,40px)}
.mf-call__terms{
  margin-top:20px;
  font-size:14px;
  color:var(--muted);
}
.mf-call__terms span{margin-inline:6px}

/* each block rises into place once it's on screen (js/manifesto-read.js
   sets .mf-rise only when it can bring them back) */
.mf-rise [data-rise]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .9s var(--ease-soft), transform 1.1s var(--ease-soft);
}
.mf-rise [data-rise].is-in{opacity:1;transform:none}

/* ---------------------------- the hand-off and the hold ------
   As on the landing page: the stones hold still (js/cover.js) while
   the read-down rides up over them like a sheet; the read-down is
   pinned (.mf-hold__view, a screen tall) and shows one head or point
   at a time, whole and still under the nav, while the page scrolls
   through it (js/manifesto-read.js sets .mf-held, the heights and
   each piece's place). Nothing runs under the nav, so the soft fade
   (.mf-scrim) is only for the plain read-down without it. */
.mf-handoff{position:relative;isolation:isolate}
.manifesto[data-cover-ready]{position:sticky}
.manifesto[data-cover-ready] + .mf-hold{
  position:relative;
  z-index:1;
  box-shadow:0 -2px 0 #000, 0 -24px 60px -16px rgba(0,0,0,.45);
}
.cover__dusk{
  position:absolute;
  inset:0;
  z-index:3;
  background:#000;
  opacity:0;
  pointer-events:none;
}

.mf-held .mf-scrim{display:none}
.mf-held .mf-hold{background:#000}
.mf-held .mf-hold__view{
  position:sticky;
  top:0;
  overflow:hidden;
}
/* the sections fold away; their pieces are placed on the screen */
.mf-held .mf-hold .mf{padding:0;border:0}
.mf-held .mf-hold .mf > .shell{position:relative}
.mf-held .mf-hold .mf:not(.mf--way) > .shell > .mf-head,
.mf-held .mf-hold .mf-point,
.mf-held .mf-hold .mf-head + .mf-stages > .mf-point:first-child{
  position:absolute;
  top:0;
  left:var(--gutter);
  right:var(--gutter);
  margin:0 auto;
  padding:0;
}
.mf-held .mf-hold .mf--way > .shell{
  position:absolute;
  top:0;
  left:0;
  right:0;
}
.mf-held .mf-hold [data-stage]{
  transform-origin:50% 0;
  will-change:transform, opacity;
}
/* the footer rides up over the last of it, as the sheet did */
.mf-held .foot{z-index:2}

/* the footer is the landing page's (css/footer.css) */

/* ---------------------------- phones ----------------------- */

/* upright: the pieces gather above the copy and in the two bottom
   corners (TALL in the scene), so the copy sits a little higher */
@media (max-aspect-ratio:9/10){
  .manifesto{grid-template-rows:minmax(36svh, 1fr) auto}
  .manifesto__body{padding-bottom:clamp(120px, 24svh, 220px)}
}
@media (max-width:640px){
  .manifesto__frame{padding:18px 14px 26px}
  .manifesto__title{font-size:clamp(1.65rem,7.4vw,2.2rem)}
}

/* the films go square (the 21:9 ones show their middle square, the
   same central 1000 x 1000 of the drawing) */
@media (max-width:640px){
  .mf-film__screen,
  .mf-film--cine .mf-film__screen{aspect-ratio:1/1}
  .mf-film--cine{width:auto;margin-left:0;translate:none}
  .mf-call__terms span{margin-inline:3px}
}

@media (prefers-reduced-motion:reduce){
  .manifesto__frame > *{animation:none}
  .manifesto__canvas{transition:none}
}