/* Faith · Quality · You first options — A the stage, B the stripes, C the sentence. Every class starts with va- */

/* lines split by values.js; each slides out of its own clip box */
[data-va-lines]{text-wrap:balance}
[data-va-lines] .rv{padding-bottom:.1em;margin-bottom:-.1em}
.va-pin-out .rv>i{transform:translate3d(0,-112%,0)}

/* ================================================================== A · the stage */
.va-a{background:var(--navy);color:#fff}
.va-a__pin{position:relative;height:calc(100vh + 3 * 95vh)}
.va-a__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:calc(var(--hdr) + 3vh) var(--gut) 4.5vh}
.va-a__stage::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 78% 30%,rgba(255,255,255,.06),transparent 70%);pointer-events:none}
.va-a__top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;border-bottom:1px solid var(--line-dark);padding-bottom:1rem}
.va-a__top .lbl{color:#fff}
.va-a__slogan{font-family:var(--f-it);font-style:italic;font-size:1rem;color:var(--on-dark-70)}
.va-a__slides{position:relative;display:grid}
.va-a__s{position:relative;z-index:1}
/* a real job photo behind each value: wipes up in step with the words, the camera drifting inside it */
.va-a__bg{position:absolute;z-index:0;top:2vh;bottom:2vh;right:0;width:47%;overflow:hidden;border-radius:4px;pointer-events:none}
.va-a__ph{position:absolute;inset:0;overflow:hidden;transform:translate3d(0,101%,0);transition:transform 1.15s cubic-bezier(.7,0,.2,1)}
.va-a__ph-in{position:absolute;inset:0;transform:translate3d(0,-101%,0);transition:transform 1.15s cubic-bezier(.7,0,.2,1)}
.va-a__ph.is-in,.va-a__ph.is-in .va-a__ph-in{transform:none}
.va-a__ph::after{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--red);z-index:2}
.va-a__ph img{position:absolute;left:-6%;top:-9%;width:112%;height:118%;max-width:none;object-fit:cover;transform:translate3d(var(--ix,0px),var(--iy,0px),0) scale(1.04)}
.va-a__shade{position:absolute;inset:0;z-index:3;background:linear-gradient(90deg,var(--navy) 0%,rgba(16,15,75,.62) 24%,rgba(16,15,75,.18) 60%,rgba(16,15,75,.3) 100%),linear-gradient(0deg,rgba(16,15,75,.82) 0%,rgba(16,15,75,0) 52%)}
.va-a__s{grid-area:1/1;align-self:center;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);grid-template-areas:"n n" "w w" ". m";row-gap:.6rem;pointer-events:none}
.va-a__s.is-in{pointer-events:auto}
.va-a__n{grid-area:n;font-size:.78rem;letter-spacing:.16em;color:#ff5a60;font-weight:500}
.va-a__n small{font-size:inherit;color:var(--on-dark-50)}
.va-a__w{grid-area:w;line-height:.9;white-space:nowrap}
.va-a__z{display:block;transform:scale(var(--z,1)) translate3d(var(--zx,0px),0,0);transform-origin:0 70%;will-change:transform}
.va-a__w .rv{padding-bottom:.12em;margin-bottom:-.12em}
.va-a__w .rv>i{transition-duration:1.05s}
.va-a__s--faith .va-a__w{font-family:var(--f-it);font-style:italic;font-size:clamp(6rem,19vw,19rem);letter-spacing:-.03em}
.va-a__s--quality .va-a__w{font-family:var(--f-disp);text-transform:uppercase;font-size:clamp(5rem,15.5vw,16rem);color:#ff5a60;letter-spacing:-.015em}
.va-a__s--you .va-a__w{font-family:var(--f-sans);font-weight:600;font-size:clamp(5rem,14.5vw,15rem);letter-spacing:-.055em}
.va-a__m{grid-area:m;font-family:var(--f-disp);font-size:clamp(1.35rem,2.1vw,2.2rem);line-height:1.22;color:#fff!important;margin:0;max-width:26ch}
.va-a__m .rv>i{transition-delay:calc(.35s + var(--k,0) * .12s)}
.va-a__s.va-pin-out .rv>i{transition-duration:.55s;transition-delay:calc(var(--k,0) * .04s)}
.va-a__bar{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.va-a__bar li{display:grid;grid-template-columns:auto 1fr;gap:.2rem .7rem;align-items:baseline;font-size:.78rem;color:var(--on-dark-50);transition:color .5s}
.va-a__bar li b{font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-size:.72rem}
.va-a__bar li>i{grid-column:1/-1;position:relative;height:3px;background:rgba(255,255,255,.14);border-radius:2px;overflow:hidden}
.va-a__bar li>i>i{position:absolute;inset:0;background:var(--red);transform-origin:0 50%;transform:scaleX(var(--f,0))}
.va-a__bar li:nth-child(2)>i>i{background:#fff}
.va-a__bar li:nth-child(3)>i>i{background:#8e9bd0}
.va-a__bar li.is-on{color:#fff}

/* ================================================================== B · the stripes */
.va-b{background:#fff}
.va-b__intro{max-width:var(--max);margin:0 auto;padding:clamp(5rem,13vh,8rem) var(--gut) clamp(3rem,7vh,4.5rem)}
.va-b__intro .lbl{color:var(--red);display:block;margin-bottom:1.2rem}
.va-b__pin{position:relative;height:calc(100vh + 3 * 100vh)}
.va-b__stage{--P:var(--hdr);--c:clamp(64px,10vh,96px);--B:0px;position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--navy)}
.va-b__band{position:absolute;left:0;right:0;top:0;height:100%;transform:translate3d(0,var(--t,0px),0);will-change:transform;box-shadow:0 -26px 50px -24px rgba(5,4,31,.55)}
.va-b__band[data-i="0"]{padding-top:var(--P)}
.va-b__band--faith{background:var(--navy);color:#fff}
.va-b__band--quality{background:var(--red);color:#fff}
.va-b__band--you{background:var(--paper);color:var(--navy)}
.va-b__row{height:var(--c);display:grid;grid-template-columns:5rem auto 1fr;align-items:center;gap:1.4rem;padding:0 var(--gut);border-bottom:1px solid rgba(255,255,255,.14)}
.va-b__band--you .va-b__row{border-color:var(--line)}
.va-b__n{font-size:.78rem;letter-spacing:.16em;font-weight:500;opacity:.7}
.va-b__sm{font-size:clamp(1.6rem,2.6vw,2.6rem);line-height:1;opacity:calc(1 - var(--o,0));transform:translate3d(0,calc(var(--o,0) * -30%),0)}
.va-b__band--faith .va-b__sm,.va-b__band--faith .va-b__w{font-family:var(--f-it);font-style:italic;letter-spacing:-.02em}
.va-b__band--quality .va-b__sm,.va-b__band--quality .va-b__w{font-family:var(--f-disp);text-transform:uppercase}
.va-b__band--you .va-b__sm,.va-b__band--you .va-b__w{font-family:var(--f-sans);font-weight:600;letter-spacing:-.045em}
.va-b__s{justify-self:end;font-family:var(--f-it);font-style:italic;font-size:1.05rem;opacity:.75}
.va-b__open{height:calc(100svh - var(--P) - 3 * var(--c) - var(--B));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:4vw;align-items:center;padding:3vh calc(var(--gut) + 44px) 3vh calc(var(--gut) + 5rem + 1.4rem)}
.va-b__w{font-size:clamp(4.4rem,10vw,10.5rem);line-height:.92;white-space:nowrap}
.va-b__band--you .va-b__w{color:var(--navy)}
.va-b__band--you .va-b__w em{color:var(--red)}
.va-b__w .rv{padding-bottom:.12em;margin-bottom:-.12em}
.va-b__m{font-family:var(--f-disp);font-size:clamp(1.3rem,1.9vw,2rem);line-height:1.24;margin:1.6rem 0 0;max-width:28ch}
.va-b__band--you .va-b__m{color:var(--ink)}
.va-b__m .rv>i{transition-delay:calc(.25s + var(--k,0) * .12s)}
.va-b__ph{position:relative;margin:0;height:100%;max-height:520px;overflow:hidden;border-radius:6px;background:rgba(0,0,0,.2);transform:scale(calc(.9 + var(--o,0) * .1));opacity:calc(.3 + var(--o,0) * .7)}
.va-b__ph-in{position:absolute;left:-6%;right:-6%;top:-10%;bottom:-10%;transform:translate3d(var(--ix,0px),var(--iy,0px),0)}
.va-b__ph img{width:100%;height:100%;object-fit:cover}

/* ================================================================== C · the sentence */
.va-c{background:var(--paper)}
.va-c__pin{position:relative;height:calc(100vh + 4 * 95vh)}
.va-c__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(1.6rem,4.5vh,3rem);padding:calc(var(--hdr) + 2vh) var(--gut) 6vh;text-align:center}
.va-c__lbl{color:var(--red)}
.va-c__say{margin:0;max-width:14em;font-family:var(--f-disp);font-size:clamp(2.4rem,6.2vw,6.8rem);line-height:1.06;letter-spacing:-.015em;color:var(--navy)}
.va-c__w{position:relative;display:inline-block;opacity:calc(.13 + var(--o,0) * .87);transform:translate3d(0,calc((1 - var(--o,0)) * .06em),0)}
.va-c__k{color:var(--red)}
.va-c__k--1{font-family:var(--f-it);font-style:italic;letter-spacing:-.03em}
.va-c__k--2{text-transform:uppercase}
.va-c__k--3{font-family:var(--f-sans);font-weight:600;letter-spacing:-.05em;font-size:.92em}
.va-c__u{position:absolute;left:0;right:.18em;bottom:.02em;height:.06em;min-height:3px;background:currentColor;transform-origin:0 50%;transform:scaleX(var(--u,0))}
.va-c__ex{position:relative;display:grid;width:min(100%,1100px);min-height:clamp(170px,24vh,240px)}
.va-c__one{grid-area:1/1;align-self:start;display:flex;flex-direction:column;align-items:center;gap:.9rem;pointer-events:none}
.va-c__tag{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--navy)}
.va-c__tag b{color:var(--red);font-weight:500;margin-right:.5em}
.va-c__m{font-family:var(--f-it);font-style:italic;font-size:clamp(1.25rem,1.9vw,1.9rem);line-height:1.3;color:var(--ink-70);max-width:34ch;margin:0}
.va-c__m .rv>i{transition-delay:calc(.2s + var(--k,0) * .12s)}
.va-c__all{grid-area:1/1;align-self:start;display:grid;grid-template-columns:repeat(3,1fr);gap:2.4rem;text-align:left;pointer-events:none}
.va-c__col{border-top:2px solid var(--navy);padding-top:1rem;opacity:0;transform:translate3d(0,26px,0);transition:opacity .8s var(--e-out),transform .9s var(--e-out);transition-delay:calc(var(--k) * 110ms)}
.va-c__col--faith{border-color:var(--red)}
.va-c__col--you{border-color:#8e9bd0}
.va-c__all.is-in{pointer-events:auto}
.va-c__all.is-in .va-c__col{opacity:1;transform:none}
.va-c__col b{font-size:.72rem;font-weight:500;letter-spacing:.16em;color:var(--red)}
.va-c__col h3{font-size:1.9rem;line-height:1;margin:.4rem 0 .6rem;color:var(--navy)}
.va-c__col--faith h3{font-family:var(--f-it);font-style:italic}
.va-c__col--quality h3{font-family:var(--f-disp);text-transform:uppercase}
.va-c__col--you h3{font-family:var(--f-sans);font-weight:600;letter-spacing:-.04em}
.va-c__col p{font-size:.98rem;line-height:1.5;color:var(--ink-70);margin:0}
.va-c__prog{position:absolute;left:var(--gut);right:var(--gut);bottom:3vh;height:2px;background:var(--line)}
.va-c__prog i{position:absolute;inset:0;background:var(--red);transform-origin:0 50%;transform:scaleX(var(--p,0))}

/* ================================================================== phone */
@media (max-width:899px){
  .va-a__stage{padding:calc(var(--hdr) + 1.4vh) 1rem calc(64px + 2.4vh)}
  .va-a__top{flex-direction:column;gap:.4rem}
  .va-a__slogan{font-size:.92rem}
  .va-a__s{grid-template-columns:1fr;grid-template-areas:"n" "w" "m";row-gap:1rem}
  .va-a__w{white-space:normal}
  .va-a__s--faith .va-a__w{font-size:29vw}
  .va-a__s--quality .va-a__w{font-size:17.5vw}
  .va-a__s--you .va-a__w{font-size:24vw;line-height:.86}
  .va-a__m{font-size:1.5rem;max-width:none}
  .va-a__bg{left:-1rem;right:-1rem;width:auto;top:0;bottom:0;border-radius:0}
  .va-a__ph::after{display:none}
  .va-a__shade{background:linear-gradient(180deg,rgba(16,15,75,.9) 0%,rgba(16,15,75,.64) 30%,rgba(16,15,75,.72) 60%,rgba(16,15,75,.95) 100%)}
  .va-a__bar{gap:.7rem}
  .va-a__bar li b{display:none}

  .va-b__intro{padding:4.5rem 1rem 2.6rem}
  .va-b__stage{--c:58px;--B:64px}
  .va-b__row{grid-template-columns:2.2rem auto 1fr;gap:.7rem;padding:0 1rem}
  .va-b__sm{font-size:1.45rem}
  .va-b__s{font-size:.86rem}
  .va-b__open{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:1.1rem;align-items:stretch;padding:1.6rem 1rem 1rem}
  .va-b__w{font-size:clamp(3rem,15vw,4.4rem)}
  .va-b__m{font-size:1.28rem;margin-top:.9rem}
  .va-b__ph{max-height:none}

  .va-c__stage{padding:calc(var(--hdr) + 2vh) 1rem calc(64px + 4vh);gap:1.5rem}
  .va-c__say{font-size:clamp(2.2rem,11.4vw,3.4rem);max-width:none}
  .va-c__ex{min-height:310px}
  .va-c__m{font-size:1.25rem}
  .va-c__all{grid-template-columns:1fr;gap:.9rem}
  .va-c__col{padding-top:.55rem;display:grid;grid-template-columns:auto 1fr;column-gap:.7rem;align-items:baseline}
  .va-c__col h3{font-size:1.35rem;margin:0 0 .25rem}
  .va-c__col p{grid-column:1/-1;font-size:.9rem;line-height:1.4}
  .va-c__prog{bottom:calc(64px + 1.2vh);left:1rem;right:1rem}
}

@media (prefers-reduced-motion:reduce){
  .va-a__pin,.va-b__pin,.va-c__pin{height:auto}
  .va-a__stage,.va-b__stage,.va-c__stage{position:relative;height:auto;min-height:100vh}
  .va-a__slides{gap:3rem}
  .va-a__s{grid-area:auto}
  .va-a__s .rv>i,.va-b .rv>i,.va-c .rv>i{transform:none!important}
  .va-a__bg{display:none}
  .va-b__band{position:relative;transform:none}
  .va-b__open{height:auto}
  .va-c__w{opacity:1;transform:none}
  .va-c__one{display:none}
  .va-c__col{opacity:1;transform:none}
}

/* round 4: phones show everything desktop shows */
@media (max-width:899px){ .va-a__bar li b{display:inline!important} }