/* One page: the film is the hero; the page below keeps Codex's system, scoped under .below. */
html{scroll-behavior:smooth}
.below{position:relative;z-index:1;background:#0a0807;--bg:#0a0807}
.below .closing .apply{margin-top:40px}
.below .life{padding-top:120px}

/* nav once the film is behind you: a quiet bar, Apply back, film controls away */
.nav{transition:background .3s,border-color .3s}
body.scrolled .nav{background:#0b0a09f0;border-bottom:1px solid #ffffff10;backdrop-filter:blur(10px)}
body.past .nav .quiet{display:none!important}
body.past .nav .apply-nav{display:inline-flex!important;opacity:1!important;max-width:none!important;padding:0 20px!important;margin-left:0!important;pointer-events:auto!important;border:1px solid rgba(243,237,229,.45)!important;height:38px}

/* life: single photographs, no contact-sheet crop */
.below .moment-presence .moment-image img,.below .moment-image img{width:100%;height:100%;left:0;top:0;object-fit:cover;object-position:center}
.below .life-moment:after{inset:52% 0 0;background:linear-gradient(transparent,#06070aa8)}


/* ─── round 5: lighter difference, placeholders, reveals ─── */
.below .moment-image{background-size:cover;background-position:center}
.below .moment-image img{opacity:0;transform:scale(1.03);transition:opacity .9s ease,transform 1.6s cubic-bezier(.2,.7,.2,1)}
.below .moment-image img.ld{opacity:1;transform:none}
.no-js .below .moment-image img{opacity:1}


@media(prefers-reduced-motion:reduce){.below .moment-image img{transition:none}}

.below h2{text-wrap:balance}
/* nav touch targets on phone */
@media(max-width:700px){.nav .snd{min-width:44px;justify-content:center}.nav .wm{padding:14px 0}}
@media(max-width:700px){
  .nav .apply-nav{display:none}
  body.past .nav .apply-nav{display:inline-flex!important;padding:0 12px!important;height:34px}
}
/* care cards: three across from tablet up */
@media(min-width:701px) and (max-width:1000px){.below .care-service .care-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;gap:14px}}

/* ─── The difference: a plain comparison, our column raised ─── */
.diff{--warm:#f1c996;--ink:#f4efe7;--ink2:#c9c1b4;--mute:#8e877d;background:#0a0908;position:relative;padding:clamp(110px,15vh,170px) 6vw clamp(110px,14vh,160px)}
.cmp-head{max-width:1040px;margin:0 auto clamp(48px,7vh,76px);text-align:center}
.cmp-head .eyebrow{font-size:11px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:#b7aea1;margin:0 0 18px}
.below .cmp-head h2{font-size:clamp(34px,4vw,62px);font-weight:300;letter-spacing:-.04em;line-height:1.04;margin:0;color:var(--ink)}
.below .cmp-sub{margin:18px auto 0;max-width:44ch;font-size:clamp(16px,1.3vw,19px);color:var(--ink2);line-height:1.5;text-wrap:balance}
.cmp{position:relative;display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr) minmax(0,1fr);max-width:1080px;margin:0 auto}
.cmp-r{display:contents}
.cmp-r>.c0{grid-column:1}.cmp-r>.c1{grid-column:2}.cmp-r>.c2{grid-column:3}
.cmp-r:nth-child(2)>span{grid-row:1}.cmp-r:nth-child(3)>span{grid-row:2}.cmp-r:nth-child(4)>span{grid-row:3}.cmp-r:nth-child(5)>span{grid-row:4}.cmp-r:nth-child(6)>span{grid-row:5}.cmp-r:nth-child(7)>span{grid-row:6}.cmp-r:nth-child(8)>span{grid-row:7}.cmp-r:nth-child(9)>span{grid-row:8}
.cmp-r>span{position:relative;z-index:1;text-wrap:balance;padding:22px 26px;border-top:1px solid #ffffff14;font-size:clamp(15px,1.2vw,18px);line-height:1.35;display:flex;align-items:center}
.cmp-r>.c0{padding-left:0;color:var(--mute);font-size:clamp(13px,1vw,15px)}
.cmp-r>.c1{color:#1c160f;font-weight:400;border-top-color:#1c160f14;justify-content:center;text-align:center}
.cmp-r>.c2{color:#9d968b;justify-content:center;text-align:center}
.cmp-h>span{border-top:0;padding-top:34px;padding-bottom:20px;font-size:11px!important;font-weight:500;letter-spacing:.28em;text-transform:uppercase}
.cmp-h>.c1{color:#1c160f;letter-spacing:.32em}.cmp-h>.c2{color:#8e877d}
.cmp-lead>span{font-size:clamp(22px,2vw,30px);letter-spacing:-.02em;padding-block:26px}
.cmp-lead>.c0{font-size:clamp(13px,1vw,15px);letter-spacing:0}
.cmp-lead>.c2{color:#8f887e}
.cmp-pill{grid-column:2;grid-row:1/9;margin:0 0 -18px;border-radius:22px;z-index:0;
  background:linear-gradient(180deg,#f6f1e9 0%,#f1e3cc 55%,#e9cfa9 100%);box-shadow:0 30px 80px -30px #f1c99640,0 0 0 1px #ffffff22 inset}
.cmp:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#ffffff14}
.diff .sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* motion: the column rises, then the rows */
.js .diff.rv-armed .cmp-pill{transform:scaleY(.2);transform-origin:top;opacity:0;transition:transform 1.1s cubic-bezier(.2,.8,.2,1),opacity .6s}
.js .diff.rv-armed .cmp-r>span{opacity:0;transform:translateY(10px);transition:opacity .7s ease var(--d,0s),transform .8s cubic-bezier(.2,.8,.2,1) var(--d,0s)}
.js .diff.rv-armed.in .cmp-pill{transform:none;opacity:1}
.js .diff.rv-armed.in .cmp-r>span{opacity:1;transform:none}
@media(max-width:760px){
  .diff{padding:96px 16px 104px}
  .cmp-head{margin-bottom:40px}.below .cmp-head h2{font-size:32px}.below .cmp-sub{font-size:15px;max-width:30ch;margin-inline:auto}
  .cmp{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
  .cmp-r>.c0{display:none}
  .cmp-r>.c1{grid-column:1;flex-direction:column;align-items:center;gap:6px}.cmp-r>.c2{grid-column:2}
  .cmp-r>.c1[data-l]::before{content:attr(data-l);font-size:9px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#8a7a64}
  .cmp-pill{grid-column:1}
  .cmp-r>span{padding:16px 12px;font-size:13.5px;line-height:1.35}
  .cmp-r>.c2{padding-top:31px;color:#8f887e}
  .cmp-h>span{padding-top:22px;padding-bottom:14px;font-size:9px!important;letter-spacing:.18em}.cmp-h>.c1{letter-spacing:.2em}
  .cmp-lead>span{font-size:17px;padding-block:18px}.cmp-lead>.c0{font-size:11.5px}
  .cmp-pill{border-radius:16px;margin-bottom:-12px}
}
@media(prefers-reduced-motion:reduce){.js .diff.rv-armed .cmp-pill,.js .diff.rv-armed .cmp-r>span{opacity:1;transform:none;transition:none}}

/* ─── motion: arrivals and departures. Only transform, opacity and clip-path move. ───
   Everything here is armed by page.js, and only for what starts below the fold. */
.below{--rise:cubic-bezier(.2,.7,.2,1);--curtain:cubic-bezier(.45,0,.15,1)}
.below .mo-px{position:absolute;inset:0}
.below .pf{display:block;overflow:hidden;border-radius:12px}
.below .team-portrait{border-radius:0}

/* copy, eyebrows, small print: a short rise */
.below .rv{opacity:0;transform:translate3d(0,14px,0);transition:opacity .9s ease var(--d,0s),transform 1.1s var(--rise) var(--d,0s)}
.below .rv.in{opacity:1;transform:none}
.below .closing .apply.rv{transition:opacity .9s ease var(--d,0s),transform 1.1s var(--rise) var(--d,0s),background .18s,color .18s}

/* headings: each line rises from behind its own edge. The mask reaches past the line box (clip-path, so it
   costs no layout) and descenders, apostrophes and the tight tracking are never shaved. */
.below .ln{display:block;clip-path:inset(-.2em -.6em -.22em)}
.below .li{display:block;white-space:nowrap}
.below .rl .li{transform:translate3d(0,calc(100% + .3em),0);transition:transform 1.1s var(--rise) var(--d,0s)}
.below .rl.in .li{transform:none}

/* photographs: the frame opens upward; the picture inside settles */
.below .life-moment.rp{clip-path:inset(100% 0 0 0 round 12px);transition:clip-path 1.2s var(--curtain) var(--d,0s)}
.below .life-moment.rp.in{clip-path:inset(0 round 12px)}
.below .life-moment.rp .moment-image{transform:scale(1.12);transition:transform 1.7s var(--rise) var(--d,0s)}
.below .life-moment.rp.in .moment-image{transform:none}
.below .pf.rp{clip-path:inset(100% 0 0 0 round 12px);transition:clip-path 1.2s var(--curtain) var(--d,0s)}
.below .pf.rp.in{clip-path:inset(0 round 12px)}
.below .pf.rp .team-portrait{transform:scale(1.12);transition:transform 1.7s var(--rise) var(--d,0s)}
.below .pf.rp.in .team-portrait{transform:none}

/* care: the card rises as its picture opens */
.below .care-step.rc{opacity:0;transform:translate3d(0,32px,0);transition:opacity 1s ease var(--d,0s),transform 1.2s var(--rise) var(--d,0s)}
.below .care-step.rc.in{opacity:1;transform:none}
.below .care-step .product-card{transition:transform .7s var(--rise)}
.below .care-step.rc .product-card{clip-path:inset(100% 0 0 0 round 12px);transition:clip-path 1.2s var(--curtain) var(--d,0s),transform .7s var(--rise)}
.below .care-step.rc.in .product-card{clip-path:inset(0 round 12px)}
@media(hover:hover) and (pointer:fine){.below .care-step:hover .product-card{transform:translate3d(0,-6px,0)}}

/* departures and parallax: scroll-linked, run by the compositor where supported; nothing where not */
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .below section h2,.below .life-moment,.below .pf{animation:below-leave linear both;animation-timeline:view();animation-range:exit -22vh exit 100%}
    .below .life-moment{view-timeline:--moment block}
    .below .mo-px{inset:-4.5% 0;animation:below-drift linear both;animation-timeline:--moment;animation-range:cover}
  }
}
@keyframes below-leave{to{transform:translate3d(0,-24px,0);opacity:.8}}
@keyframes below-drift{from{transform:translate3d(0,-3.6%,0)}to{transform:translate3d(0,3.6%,0)}}

@media(prefers-reduced-motion:reduce){
  .below .rv,.below .rl .li,.below .care-step.rc,.below .rp .moment-image,.below .rp .team-portrait,.below .care-step .product-card{opacity:1;transform:none;transition:none}
  .below .life-moment.rp,.below .pf.rp,.below .care-step.rc .product-card{clip-path:none;transition:none}
}