/* Brand projects: one collection unfolds from an arc into a straight column. */
.brand-projects-page{--bp-mint:#e7f1ec;--bp-ink:#27322f;--bp-accent:#285e50;--bp-warm:#eee8df;background:#f8faf8;color:var(--bp-ink);scrollbar-color:#78a897 #edf4ef}
.brand-projects-page #page-content{overflow:clip}
.brand-projects-page :is(a,button):focus-visible{outline:3px solid #285e50;outline-offset:7px}
.brand-projects-page h1,.brand-projects-page h2{letter-spacing:-.04em;text-wrap:balance}
.brand-projects-page p{color:#4d665c}
.brand-projects-page .bp-story{position:relative;background:var(--bp-mint);padding:0}
.bp-stage{position:relative;padding:clamp(42px,5vw,100px) 0 36px}
.bp-heading{text-align:center;position:relative;z-index:20;padding-inline:24px;pointer-events:none}
.bp-heading h1{font-size:clamp(48px,5.8vw,112px);line-height:1.03;font-weight:600;margin:0 auto;max-width:16ch}
.bp-heading p{font-size:clamp(15px,1.1vw,25px);line-height:1.6;max-width:48ch;margin:24px auto 0}
.bp-deck{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:64px auto 40px;width:90%}
.bp-card-shell{min-width:0;position:relative}
.bp-card{display:block;position:relative;width:100%;height:300px;border:0;padding:0;border-radius:14px;overflow:hidden;color:var(--bp-ink);background:var(--bp-warm);box-shadow:0 14px 28px -16px #233f3c48;text-decoration:none;isolation:isolate;font:inherit;text-align:inherit;cursor:zoom-in;user-select:none}
.bp-card:focus-visible{outline-offset:3px}
.bp-card img{display:block;width:100%;height:100%;object-fit:cover}
.bp-case-scene{position:absolute;inset:0;background:#eee7dd}
.bp-case-scene--fern{background:#c4d8ca}.bp-case-scene--smile{background:#d4e5de}.bp-case-scene--forma{background:#dcd6e4}
.bp-case-object{position:absolute;left:50%;top:47%;height:76%;aspect-ratio:1;max-width:88%;transform:translate(-50%,-50%)}
.bp-case-object img{object-fit:contain;filter:drop-shadow(8px 16px 10px #15221e25)}
.bp-print{position:absolute;left:10%;right:10%;top:50%;transform:translateY(-50%);text-align:center;color:#fff;line-height:1.05;font-size:clamp(21px,2.1vw,65px);font-weight:600;letter-spacing:-.04em}
.bp-print--smile span:first-child{color:#84cfbd}.bp-print--smile span:last-child{color:#ffa44e}
.bp-print--alba{font-weight:400;letter-spacing:.12em;font-size:clamp(25px,2.4vw,70px)}
.bp-print small{display:block;margin-top:.5em;font-size:.27em;letter-spacing:.15em;text-transform:uppercase;color:inherit}
.bp-print--fern{color:#dcebd5;letter-spacing:-.025em}.bp-print--forma{color:#e4b1b2;font-weight:500;letter-spacing:.05em}
.bp-card-caption{position:absolute;bottom:12px;left:12px;right:12px;text-align:center;z-index:2;color:#183b2f;font-size:clamp(11px,.8vw,20px);font-weight:500;line-height:1.35}
.bp-card--photo .bp-card-caption{color:#fff;background:#234737f5;padding:7px 10px;border-radius:7px;bottom:12px;left:10px;right:10px;width:max-content;max-width:calc(100% - 20px);margin:auto}
.bp-card-caption small{display:block;font-size:.83em;font-weight:400;margin-top:3px;color:inherit}
.bp-stage-bottom{display:flex;justify-content:space-between;gap:24px;align-items:center;position:relative;z-index:30;margin:0 auto;width:90%;font-size:clamp(13px,.9vw,22px)}
.bp-scroll-hint{display:flex;gap:14px;align-items:center;color:#32594a}
.bp-scroll-hint svg{width:20px;height:26px;flex-shrink:0}
.bp-stage-bottom a{display:inline-flex;align-items:center;gap:18px;color:#285e50;font-weight:500;text-decoration:none;padding:12px 0;border-bottom:1px solid #8fb1a2}
.bp-arrow{width:18px;height:18px;flex-shrink:0}.bp-stair-title{display:none}
.brand-projects-page .bp-stats{display:grid;grid-template-columns:.9fr 1.1fr;gap:6vw;align-content:center;align-items:center;padding:80px 5vw;min-height:calc(100svh - var(--top));background:#e7f1ec;border-top:1px solid #ccded4}
.bp-stats h2{font-size:clamp(40px,4.4vw,120px);font-weight:500;line-height:1.05;max-width:16ch}
.bp-stats-copy p{font-size:clamp(15px,1.1vw,25px);line-height:1.65;margin-top:24px;max-width:38ch}
.bp-stats .client-metrics{max-width:none}.bp-stats .client-metric{min-height:clamp(170px,24svh,450px);gap:22px;padding:clamp(25px,2.1vw,70px)}
.bp-stats .client-metric dd{font-size:clamp(34px,3.3vw,120px)}

/* CSS timelines own scroll frames. The complete static composition is the default. */
@supports (animation-timeline:view()){
 @media(min-width:1000px) and (prefers-reduced-motion:no-preference){
  .bp-motion .bp-story{height:var(--bp-story-height,520svh);min-height:var(--bp-story-height,520svh);view-timeline-name:--brand-story;view-timeline-axis:block}
  .bp-motion .bp-stage{position:sticky;top:var(--top);height:calc(100svh - var(--top));padding:0;overflow:clip}
  .bp-motion .bp-journey-marker{position:absolute;top:22%;left:0;width:1px;height:1px;scroll-margin-top:var(--top);pointer-events:none}
  .bp-motion .bp-heading{position:absolute;top:6%;left:0;right:0;animation:bp-heading-out linear both;animation-timeline:--brand-story;animation-range:contain 0% contain 100%}
  .bp-motion .bp-heading h1{font-size:clamp(64px,5.8vw,140px)}.bp-motion .bp-heading p{margin-top:22px}
  .bp-motion .bp-deck-window{position:absolute;inset:0}
  .bp-motion .bp-deck{--card-width:clamp(150px,15.2vw,460px);position:absolute;inset:0;display:block;width:auto;margin:0;animation:bp-deck-travel linear both;animation-timeline:--brand-story;animation-range:contain 0% contain 100%;pointer-events:none}
  .bp-motion .bp-card-shell{position:absolute;left:50%;top:64%;width:var(--card-width);height:clamp(190px,28svh,540px);margin-left:calc(var(--card-width)/-2);margin-top:clamp(-270px,-14svh,-95px);transform:translate(var(--arc-x),var(--arc-y)) rotate(var(--arc-r));animation:bp-card-reorder linear both;animation-timeline:--brand-story;animation-range:contain 0% contain 100%;pointer-events:none;z-index:var(--stack)}
  .bp-motion .bp-card{height:100%;pointer-events:auto;transform:translate(var(--shift-x,0px),var(--lift,0px)) rotate(var(--straighten,0deg)) scale(var(--enlarge,1));transition:transform 300ms cubic-bezier(.2,.8,.2,1),opacity 300ms cubic-bezier(.2,.8,.2,1)}
  .bp-motion .bp-card:focus-visible{--lift:-26px;--enlarge:1.07;outline:3px solid #285e50;outline-offset:4px}
  .bp-motion .bp-card-caption small{display:none}
  .bp-motion .bp-stage-bottom{position:absolute;left:5%;right:5%;bottom:4%;width:auto;margin:0}
  .bp-motion .bp-stair-title{display:block;position:absolute;left:5%;top:5%;font-size:clamp(25px,2.4vw,64px);font-weight:500;line-height:1.05;letter-spacing:-.035em;pointer-events:none;z-index:22;animation:bp-title-in linear both;animation-timeline:--brand-story;animation-range:contain 0% contain 100%}
 }
}
@keyframes bp-heading-out{0%,4%{opacity:1;transform:translateY(0)}12%,100%{opacity:0;transform:translateY(-35px)}}
@keyframes bp-deck-travel{0%,6%{transform:translateY(0)}20%{transform:translateY(var(--bp-travel-start,132svh))}94%,100%{transform:translateY(var(--bp-travel-end,-156svh))}}
@keyframes bp-card-reorder{0%,5%{transform:translate(var(--arc-x),var(--arc-y)) rotate(var(--arc-r)) scale(1)}20%,100%{transform:translate(0,var(--column-y)) rotate(0deg) scale(1.5)}}
@keyframes bp-title-in{0%,12%{opacity:0;transform:translateY(16px)}20%,100%{opacity:1;transform:translateY(0)}}
@media(min-width:1000px) and (max-height:800px){.bp-motion .bp-heading{top:4%}.bp-motion .bp-heading h1{font-size:clamp(56px,4.8vw,74px)}}
@media(max-width:999px){
 .bp-deck{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:45px}
 .bp-card-shell:nth-child(4){grid-column:1 / -1;grid-row:1}.bp-card-shell:nth-child(4) .bp-card{height:350px}
 .bp-print{font-size:clamp(24px,4vw,48px)}
 .brand-projects-page .bp-stats{grid-template-columns:1fr;gap:45px;padding-block:70px}
 .bp-stats h2{font-size:clamp(40px,5vw,70px)}.bp-stats .client-metrics{width:100%}
}
@media(max-width:600px){
 .bp-stage{padding-top:46px;padding-bottom:30px}.bp-heading h1{font-size:clamp(44px,11.2vw,62px)}
 .bp-heading p{font-size:15px;max-width:31ch;margin-top:20px}.bp-deck{gap:14px;width:90%;margin-top:35px;margin-bottom:28px}
 .bp-card{height:210px;border-radius:12px}.bp-card-shell:nth-child(4) .bp-card{height:295px}
 .bp-print{font-size:20px}.bp-card-shell:nth-child(4) .bp-print{font-size:35px}
 .bp-card-caption{font-size:11px;left:8px;right:8px;bottom:12px}.bp-card--photo .bp-card-caption{font-size:11px;left:7px;right:7px;bottom:7px;padding:6px;width:auto;max-width:none}.bp-card-caption small{font-size:11px}
 .bp-stage-bottom{font-size:12px;gap:14px}.bp-scroll-hint{gap:8px}.bp-stage-bottom a{gap:8px;white-space:nowrap}
 .bp-stats h2{font-size:46px}.bp-stats-copy p{margin-top:22px}.bp-stats .client-metric{padding:20px 14px;min-height:155px;gap:18px}.bp-stats .client-metric dd{font-size:clamp(24px,6.7vw,40px)}
}
.bp-zoom{width:min(92vw,1300px);max-width:none;max-height:92svh;padding:0;border:0;border-radius:16px;background:#f8faf8;color:#27322f;overflow:auto;box-shadow:0 24px 80px #132c244a}
.bp-zoom::backdrop{background:#172e28cf}
.bp-zoom-close{position:absolute;top:14px;right:14px;z-index:5;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:#f8faf8;color:#285e50;cursor:pointer;box-shadow:0 5px 18px #152d2526}
.bp-zoom-close svg{width:22px;height:22px}
.bp-zoom-viewer{position:relative}
.bp-zoom-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;display:grid;place-items:center;width:46px;height:46px;border:0;border-radius:50%;background:#f8faf8;color:#285e50;box-shadow:0 5px 18px #152d2526;cursor:pointer}
.bp-zoom-prev{left:16px}.bp-zoom-next{right:16px}.bp-zoom-nav svg{width:24px;height:24px}
.bp-zoom-nav:hover,.bp-zoom-close:hover{background:#dceee4}
.bp-zoom-info{display:flex;gap:20px;align-items:center;justify-content:space-between;padding:22px 28px}
.bp-zoom-info .bp-zoom-caption{padding:0}.bp-zoom-count{color:#285e50;font-size:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.bp-zoom-visual{height:min(70svh,850px);min-height:240px;position:relative;background:#e7f1ec;overflow:hidden}
.bp-zoom-visual>img{display:block;width:100%;height:100%;object-fit:contain}
.bp-zoom-visual .bp-case-object{height:78%;max-width:88%}
.bp-zoom-visual .bp-print{font-size:clamp(35px,5vw,100px)}
.bp-zoom-caption{padding:22px 28px;font-size:clamp(14px,1.05vw,23px);line-height:1.6;color:#285e50}
.bp-zoom[open]{opacity:1;transform:translateY(0);transition:transform 300ms cubic-bezier(.2,.8,.2,1),opacity 300ms cubic-bezier(.2,.8,.2,1)}
@starting-style{.bp-zoom[open]{opacity:0;transform:translateY(12px)}}
html.bp-zoom-open{overflow:hidden}
@media(max-width:600px){.bp-zoom-visual{height:58svh}.bp-zoom-visual .bp-print{font-size:32px}.bp-zoom-info{padding:18px 20px}.bp-zoom-close,.bp-zoom-nav{width:40px;height:40px}.bp-zoom-prev{left:10px}.bp-zoom-next{right:10px}}
@media(prefers-reduced-motion:reduce){.brand-projects-page *, .brand-projects-page *::before,.brand-projects-page *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}