/* What We Believe: a manifesto in the dark. The title shrinks into "We believe…" and each belief completes the
   sentence, beside a film strip of photographs toned in forest that come into colour one at a time. Then the
   page turns to cream and the AYA symbol draws itself as the handover. Shares only the kit from svc.css. */

/* ---------- the header joins the dark ---------- */
.svc-page.wwb-page .site-header{background:var(--ink);border-bottom-color:#faf7ef1f}
.wwb-page:not(.nav-open) .site-header .brand,.wwb-page:not(.nav-open) .site-header .nav>ul>li>.nav-top{color:var(--cream)}
.wwb-page:not(.nav-open) .site-header .nav>ul>li>.nav-top:hover{color:var(--cream);background:#faf7ef14}
.wwb-page:not(.nav-open) .site-header .nav .is-active>.nav-top{color:var(--gold)}
.wwb-page .site-header .brand img{background:var(--cream);border-radius:50%;padding:3px}
.wwb-page .site-header .header-cta{background:var(--gold);color:var(--ink);box-shadow:none}
.wwb-page:not(.nav-open) .site-header .menu-toggle{color:var(--cream);border-color:#faf7ef80}

/* ---------- the stage ---------- */
.wwb-stage{position:relative;color:var(--cream);background:radial-gradient(80% 70% at 18% 12%,#2d5737 0%,transparent 62%),radial-gradient(60% 60% at 92% 96%,#15291b 0%,transparent 60%),var(--ink)}
.wwb-pin{position:relative}
.wwb-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);grid-template-rows:auto 1fr auto;column-gap:clamp(32px,5vw,96px);padding-block:20px 22px}
.wwb-top{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:24px;padding-bottom:12px;border-bottom:1px solid #faf7ef24}

.wwb-stage .svc-index a{color:var(--cream)}
.wwb-stage .svc-index a[aria-current] b{color:var(--gold)}
.wwb-words{grid-column:1;grid-row:2;align-self:center;display:flex;flex-direction:column;padding-block:clamp(20px,4svh,48px)}

.wwb-stem{--stem:clamp(64px,min(10.5vw,18svh),190px);margin:0;max-width:7.2em;font:400 var(--stem)/.92 var(--serif);letter-spacing:-.045em;color:var(--cream);transition:font-size 1.1s var(--ease),color .7s}
.wwb-what,.wwb-in,.wwb-dot{display:inline-block;overflow:hidden;vertical-align:bottom;white-space:nowrap;transition:max-width 1.1s var(--ease),opacity .6s}
.wwb-what{max-width:4.4em}
.wwb-we{white-space:nowrap}
.wwb-dot{max-width:.4em}
.wwb-in{max-width:0;opacity:0}
.wwb-w{display:inline-grid;vertical-align:bottom}
.wwb-w>span{grid-area:1/1;transition:opacity .5s}
.wwb-w-lo{justify-self:end}
.wwb-w-up{opacity:0}

.wwb-body{display:grid;margin-top:clamp(18px,3.6svh,40px)}
.wwb-lead{grid-area:1/1;align-self:start;max-width:30ch;margin:0;font:400 clamp(20px,min(1.9vw,3.4svh),29px)/1.4 var(--serif);color:#faf7efcc;transition:opacity .6s,transform .9s var(--ease)}
.wwb-list{grid-area:1/1;display:grid;list-style:none;margin:0;padding:0}
.wwb-belief{grid-area:1/1;align-self:start}
.wwb-belief>.wwb-photo,.wwb-stem-sm{display:none}
.wwb-statement{margin:0 0 clamp(18px,3.4svh,34px);max-width:15ch;font:400 clamp(42px,min(5.4vw,9.4svh),100px)/1.02 var(--serif);letter-spacing:-.042em;color:var(--cream)}
.wwb-stage .svc-w.is-key{color:var(--gold)}
.wwb-why{max-width:46ch;margin:0;font-size:clamp(16px,1.2vw,18px);line-height:1.7;color:#faf7efb8}

/* ---------- the film strip ---------- */
.wwb-strip{grid-column:2;grid-row:2/4;position:relative;overflow:hidden;margin-top:14px;-webkit-mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent)}
.wwb-track{display:flex;flex-direction:column;gap:22px;will-change:transform}
.wwb-photo{position:relative;margin:0;overflow:hidden;aspect-ratio:5/4;border-radius:3px 26px 3px 3px;opacity:.5;transform:scale(.86);transition:transform .9s var(--ease),opacity .9s}
.wwb-photo img{display:block;width:100%;height:100%;object-fit:cover;filter:brightness(.78) contrast(1.06);transition:filter .9s,transform 6s linear}
.wwb-photo::after{content:'';position:absolute;inset:0;background:#3a7046;mix-blend-mode:color;transition:opacity .9s}

.wwb-photo.is-lit{opacity:1;transform:none}
.wwb-photo.is-lit img{filter:none;transform:scale(1.06)}
.wwb-photo.is-lit::after{opacity:0}

/* ---------- progress and cue ---------- */

/* ---------- states: 0 is the title; 1–6 complete the sentence ---------- */
.wwb-stage:not([data-state="0"]) .wwb-stem{--stem:clamp(26px,min(2.6vw,4.6svh),46px);color:var(--gold)}
.wwb-stage:not([data-state="0"]) .wwb-what,.wwb-stage:not([data-state="0"]) .wwb-dot{max-width:0;opacity:0}
.wwb-stage:not([data-state="0"]) .wwb-w-lo{opacity:0}
.wwb-stage:not([data-state="0"]) .wwb-w-up{opacity:1}
.wwb-stage[data-state="6"] .wwb-in{max-width:1.3em;opacity:1}
.wwb-stage:not([data-state="0"]) .wwb-lead{opacity:0;transform:translateY(-24px);pointer-events:none}

.js .wwb-belief .svc-w>span{transform:translateY(110%);transition:transform .9s var(--ease);transition-delay:calc(.15s + var(--i) * 45ms)}
.js .wwb-belief.is-active .svc-w>span{transform:none}
.js .wwb-belief.is-past .svc-w>span{transform:translateY(-110%);transition-duration:.55s;transition-delay:0s}
.js .wwb-why{opacity:0;transform:translateY(18px);transition:opacity .7s,transform .9s var(--ease)}
.js .wwb-belief.is-active .wwb-why{opacity:1;transform:none;transition-delay:.45s}
.js .wwb-belief.is-past .wwb-why{transform:translateY(-12px);transition-duration:.4s}
.wwb-belief:not(.is-active){pointer-events:none}

/* arrival: the title rises in, then the lead, the rails and the strip */
.js .wwb-stem{clip-path:inset(0 0 100% 0);transform:translateY(30px)}
.js .wwb-stage.is-in .wwb-stem{clip-path:inset(-20% -5% -20% -5%);transform:none;transition:clip-path 1.3s var(--ease),transform 1.3s var(--ease),font-size 1.1s var(--ease),color .7s}
.js .wwb-stage .wwb-top,.js .wwb-stage .wwb-strip{opacity:0;transition:opacity 1s .5s}
.js .wwb-stage.is-in .wwb-top,.js .wwb-stage.is-in .wwb-strip{opacity:1}
.js .wwb-stage[data-state="0"] .wwb-lead{opacity:0;transform:translateY(16px)}
.js .wwb-stage.is-in[data-state="0"] .wwb-lead{opacity:1;transform:none;transition-delay:.6s}

/* ---------- the handover: the page turns to cream and the AYA symbol draws itself ---------- */
.wwb-handover{position:relative;background:var(--cream);color:var(--ink);padding-block:clamp(80px,13svh,170px) clamp(56px,8svh,96px)}
.wwb-handover-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(32px,6vw,110px);align-items:center}
.wwb-handover h2{margin:0;max-width:16ch;font:400 clamp(36px,min(4.6vw,8svh),78px)/1.04 var(--serif);letter-spacing:-.038em;color:var(--ink)}
.wwb-handover h2 em{color:var(--gold-text)}
.wwb-aya-link{display:inline-flex;align-items:center;gap:16px;min-height:48px;margin-top:clamp(24px,4svh,44px);padding-bottom:4px;border-bottom:2px solid var(--gold);font-size:15px;font-weight:600;color:var(--ink);text-decoration:none}
.wwb-aya-link i{font-style:normal;transition:transform .45s var(--ease)}
.wwb-aya-link:hover i,.wwb-aya-link:focus-visible i{transform:translateX(8px)}
.wwb-drawing{justify-self:center;width:min(100%,360px);color:var(--ink)}
.wwb-drawing svg{display:block;width:100%;height:auto;overflow:visible}
.wwb-drawing g{stroke-width:1.5}
.wwb-drawing .dot{transition:opacity .5s}
.wwb-cta{grid-column:1/-1;justify-content:flex-start;margin-top:clamp(20px,4svh,40px)}

/* ---------- roomy screens: the stage pins and the sentence advances with scroll ---------- */
@media(min-width:901px) and (min-height:641px) and (prefers-reduced-motion:no-preference){
  .wwb-stage{height:calc(100svh + (var(--count) + .6) * 78svh)}
  .wwb-pin{position:sticky;top:var(--hh);height:calc(100svh - var(--hh))}
  .wwb-grid{height:100%}
}

/* ---------- phones, tablets, short windows and reduced motion: the beliefs are read in turn ---------- */
@media(max-width:900px),(max-height:640px),(prefers-reduced-motion:reduce){
  .wwb-grid{grid-template-columns:1fr;grid-template-rows:none;padding-block:20px clamp(48px,8svh,80px)}
  .wwb-strip{display:none}
  .wwb-words{grid-row:auto}
  .wwb-body{display:block}
  .wwb-lead{margin-bottom:clamp(48px,8svh,72px)}
  .wwb-list{display:flex;flex-direction:column;gap:clamp(56px,9svh,88px)}
  .wwb-belief{pointer-events:auto}
  .wwb-belief>.wwb-photo{display:block;margin-bottom:22px;transform:none}
  .wwb-stem-sm{display:block;margin-bottom:8px;font:italic 300 20px/1.2 var(--serif);color:var(--gold)}
  .wwb-statement{max-width:none}
  .js .wwb-belief.is-active .wwb-photo{opacity:1}
  .js .wwb-belief.is-active .wwb-photo img{filter:none}
  .js .wwb-belief.is-active .wwb-photo::after{opacity:0}

  .wwb-handover-grid{grid-template-columns:1fr}
  .wwb-drawing{grid-row:1;justify-self:start;width:min(56vw,240px)}
}
@media(max-width:600px){
  .wwb-stem{--stem:clamp(54px,16vw,80px)}
  .wwb-statement{font-size:clamp(34px,10vw,46px)}
  .wwb-handover h2{font-size:clamp(32px,9vw,42px)}
}
@media(prefers-reduced-motion:reduce){
  .js .wwb-stem,.js .wwb-belief .svc-w>span,.js .wwb-why,.js .wwb-stage .wwb-top,.js .wwb-stage .wwb-lead,.js .wwb-stage[data-state="0"] .wwb-lead{opacity:1;transform:none;clip-path:none}
  .wwb-photo{opacity:1}
  .wwb-photo img{filter:none}
  .wwb-photo::after{opacity:0}

}