/* Reference-based layout and motion, implemented for Webivelo. */
.reference-site{--ink:#11100f;--paper:#f5f3ee;--muted:#94918a;background-color:var(--ink);background-image:conic-gradient(#ffffff03 25%,transparent 0 50%,#ffffff03 0 75%,transparent 0);background-size:6px 6px;font-family:Clash,Arial,sans-serif;font-weight:500}.reference-site h1,.reference-site h2,.reference-site h3{letter-spacing:-.016em;word-spacing:0}.ref-wrap{width:calc(100% - 60px);max-width:1700px;margin-inline:auto}.reference-header{height:118px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid #ffffff0c;position:relative;z-index:30}.ref-nav-left{display:flex;align-items:center;gap:34px}.reference-header .local-clock{margin:0;display:block;font:500 16px Clash,Arial,sans-serif;letter-spacing:-.03em}.local-clock time{color:var(--paper)}.small-home{font:600 22px Clash;color:var(--gold);display:none}.dot-menu{background:transparent;border:0;width:52px;height:52px;padding:16px;display:grid;grid-template-columns:4px 4px;grid-template-rows:4px 4px;gap:11px;align-content:center;justify-content:center;color:var(--paper);cursor:pointer}.dot-menu span{height:4px;width:4px;background:currentColor;border-radius:50%;transition:transform .4s}.dot-menu:hover span:nth-child(1){transform:translate(-3px,-3px)}.dot-menu:hover span:nth-child(2){transform:translate(3px,-3px)}.dot-menu:hover span:nth-child(3){transform:translate(-3px,3px)}.dot-menu:hover span:nth-child(4){transform:translate(3px,3px)}.ref-button{display:inline-grid;position:relative;border:2px solid currentColor;border-radius:99px;padding:10px 23px;font:600 18px/1.2 Clash,Arial,sans-serif;min-height:48px;overflow:hidden;align-items:center;isolation:isolate;transition:background .3s,color .3s}.ref-button>span{grid-area:1/1;transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .3s}.ref-button>span:last-child{transform:translateY(180%);opacity:0}.ref-button:hover>span:first-child{transform:translateY(-180%);opacity:0}.ref-button:hover>span:last-child{transform:translateY(0);opacity:1}.ref-button:hover{color:var(--ink);background:var(--gold);border-color:var(--gold)}.hero-title-mask{overflow:hidden;padding:48px 8px 39px}.hero-title-mask h1{font-size:18.4vw;line-height:.84;letter-spacing:-.015em;text-align:center;white-space:nowrap;margin:0;transform-origin:50% 0}.reference-meta{border-block:1px solid #ffffff0b;display:grid;grid-template-columns:repeat(3,1fr);align-items:center;padding:34px 30px 42px;gap:20px}.reference-meta>div{text-align:center}.reference-meta svg{width:23px;height:23px;margin:0 auto 12px;color:var(--gold)}.reference-meta>div:nth-child(2) svg{color:var(--paper)}.reference-meta p{font-size:12px;line-height:1.25;color:var(--paper)}.reference-meta p span{color:var(--muted)}.hero-photo-entry{padding:60px 30px 0}.reference-portrait{height:min(88vw,1080px);max-height:130vh;overflow:hidden;border-radius:10px;position:relative}.reference-portrait>img{width:100%;height:120%;position:absolute;top:-10%;object-fit:cover;object-position:center 40%;will-change:transform}.reference-label{display:grid;grid-template-columns:1fr 1fr 1fr;font-size:12px;line-height:1.4;text-transform:uppercase;padding:18px 0;border-top:1px solid #ffffff10}.reference-label>span:nth-child(2){text-align:center}.reference-label>span:last-child{text-align:right;color:var(--muted)}.reference-work{padding-top:120px}.center-title{text-align:center;font-size:clamp(64px,9.4vw,150px);line-height:.94;margin:65px 0 25px}.center-subtitle{text-align:center;font-size:14px;margin-bottom:90px;color:var(--muted)}.reference-project-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:120px 6vw}.reference-project{grid-column:span 2;min-width:0}.project-slot-2{grid-column:2/span 2}.project-slot-3{grid-column:1/span 2}.gallery-window{display:block;position:relative;overflow:hidden;border-radius:8px;height:clamp(350px,39vw,650px);background:#373b2f;isolation:isolate;touch-action:pan-y}.gallery-1{background:#3d2118}.gallery-2{background:#3a3a2f}.gallery-3{background:#50404d}.gallery-4{background:#765447}.gallery-slide{position:absolute;inset:0;height:100%;width:100%;object-fit:cover;opacity:0;transform:scale(1.07);transition:opacity .85s ease,transform 5.6s linear;pointer-events:none}.gallery-slide.is-current{opacity:1;transform:scale(1)}.gallery-slide[src*='site.webp'],.gallery-slide[src*='desktop.webp']{object-fit:contain;padding:6%;background:#c8c4b7}.gallery-slide[src*='mobile.webp']{object-fit:contain;padding:6%;background:#26352a}.gallery-1 .gallery-slide[src*='site.webp']{background:#b6957f}.gallery-2 .gallery-slide[src*='site.webp']{background:#72765f}.gallery-3 .gallery-slide[src*='site.webp']{background:#b6a5aa}.reference-project-caption{display:grid;grid-template-columns:100px 1fr 35px;gap:14px;align-items:start;margin-top:22px}.reference-project-caption h3{font-weight:500;font-size:20px;line-height:1.2;letter-spacing:0}.reference-project-caption p{font-size:11px;margin-top:5px;line-height:1.4}.project-go{font-size:26px;line-height:1;min-height:44px;display:flex;justify-content:flex-end}.slide-dots{display:flex;margin-left:-10px;margin-top:-9px}.slide-dots button{width:27px;height:38px;border:0;padding:8px;background:transparent;cursor:pointer}.slide-dots button span{display:block;border-radius:50%;height:10px;width:10px;background:#ffffff29;transition:background .3s,transform .3s}.slide-dots button[aria-pressed=true] span{background:var(--paper)}.slide-dots button:hover span{background:var(--gold);transform:scale(1.2)}.view-project{position:absolute;left:50%;top:50%;transform:translate(-50%,-35%) scale(.9);padding:20px 27px;border-radius:99px;white-space:nowrap;background:var(--gold);color:var(--ink);font-size:13px;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none}.gallery-window:hover .view-project,.gallery-window:focus-visible .view-project{opacity:1;transform:translate(-50%,-50%) scale(1)}.center-action{text-align:center;margin-top:65px}.center-action .ref-button{font-size:14px}.reference-approach{padding-top:160px}.approach-statement{font-size:clamp(40px,6.9vw,106px);line-height:1.01;text-align:center;max-width:1140px;margin:130px auto 60px}.center-copy{max-width:900px;margin:0 auto;text-align:center;font-size:18px;line-height:1.4}.reference-approach .center-copy{max-width:620px}.phase-numbers{display:flex;justify-content:space-evenly;max-width:690px;margin:50px auto 120px}.phase-numbers span{height:32px;width:32px;background:#292822;border-radius:50%;display:grid;place-items:center;font-size:12px}.reference-phases{display:grid;grid-template-columns:repeat(3,1fr);gap:7vw;text-align:center}.phase-pips{display:flex;justify-content:center;gap:6px;margin-bottom:34px}.phase-pips i{height:10px;width:10px;border-radius:50%;background:#ffffff25}.phase-pips .on{background:var(--paper)}.phase-pictures{display:flex;justify-content:center;gap:5px;margin-bottom:25px}.phase-pictures img{height:42px;width:42px;object-fit:cover;border-radius:8px;transition:transform .4s}.reference-phases article:hover .phase-pictures img:nth-child(1){transform:rotate(-12deg) translateY(-7px)}.reference-phases article:hover .phase-pictures img:nth-child(2){transform:translateY(-12px)}.reference-phases article:hover .phase-pictures img:nth-child(3){transform:rotate(12deg) translateY(-7px)}.reference-phases h3{font-size:25px;line-height:1.1;margin-bottom:16px}.reference-phases p{font-size:17px;line-height:1.4;max-width:350px;margin:auto}.filmstrip{overflow:hidden;padding:100px 0 60px;max-width:100%;border-bottom:1px solid #ffffff0b}.film-track{display:flex;width:max-content;animation:film-travel 42s linear infinite}.film-group{display:flex;gap:24px;padding-right:24px}.film-group img{height:210px;width:330px;border-radius:8px;object-fit:cover}.filmstrip:hover .film-track{animation-play-state:paused}@keyframes film-travel{to{transform:translateX(-50%)}}.reference-about{padding-top:140px;text-align:center}.about-title{font-size:clamp(60px,8.7vw,130px);line-height:.94;margin:140px auto 85px}.about-portrait{width:42%;max-width:540px;margin:0 auto 75px;overflow:hidden;border-radius:12px}.about-portrait img{width:100%;aspect-ratio:.82;object-fit:cover;object-position:50% 38%}.reference-about>h3{font-size:25px;line-height:1.08;max-width:990px;margin:0 auto 34px}.reference-about>.ref-button{margin-top:42px;background:var(--paper);color:var(--ink);border-color:var(--paper)}.reference-stats{padding-top:150px}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:25px;padding:75px 0;text-align:center}.stats-grid strong{font-size:clamp(65px,9vw,140px);line-height:.9;letter-spacing:-.045em;font-weight:500;color:var(--paper)}.stats-grid p{font-size:11px;margin-top:25px}.stat-note{max-width:650px;margin:auto;text-align:center;font-size:12px}.reference-services{padding-top:160px}.reference-service-list{margin-top:70px}.reference-service-list>a{display:grid;grid-template-columns:45px 1fr .9fr 45px;gap:25px;padding:45px 18px;align-items:center;border-top:1px solid #ffffff19;position:relative;transition:background .35s,padding .35s}.reference-service-list>a:last-child{border-bottom:1px solid #ffffff19}.reference-service-list>a:hover{background:#cfb77910;padding-inline:28px}.service-index{font-size:12px;color:var(--muted)}.reference-service-list h3{font-size:clamp(28px,3.9vw,58px);font-weight:500;line-height:1.1}.reference-service-list p{font-size:12px;line-height:1.4;max-width:340px}.service-arrow{font-size:35px;color:var(--gold);transition:transform .3s}.reference-service-list a:hover .service-arrow{transform:rotate(45deg)}.work-banner{margin-top:120px;height:650px;overflow:hidden;border-radius:8px;position:relative}.work-banner img{position:absolute;top:-10%;width:100%;height:120%;object-fit:cover;will-change:transform}.reference-experience,.reference-delivery,.reference-faq{padding-top:150px}.split-section{display:grid;grid-template-columns:1fr 1.15fr;gap:10vw;padding-top:65px}.split-section>h2{font-size:clamp(42px,5vw,77px);line-height:1.02;align-self:start;position:sticky;top:50px}.reference-records>a,.reference-records>article{display:block;border-bottom:1px solid #ffffff17;margin-bottom:45px;padding-bottom:45px}.reference-records h3{font-size:27px;margin-bottom:16px;line-height:1.1}.record-meta{display:flex;justify-content:space-between;gap:20px;font-size:10px;color:var(--muted);margin-bottom:24px}.reference-records p{font-size:17px;line-height:1.4}.reference-records a:hover h3{color:var(--gold)}.reference-quote{padding-top:100px}.reference-quote>p{font-size:clamp(40px,5.5vw,84px);line-height:1.03;color:var(--paper);font-weight:600;text-align:center;max-width:1170px;margin:110px auto 20px;letter-spacing:-.02em}.gold-phrase{color:var(--gold)}.faq-list details{border-bottom:1px solid #ffffff20}.faq-list summary{display:grid;grid-template-columns:25px 1fr 25px;gap:15px;align-items:center;cursor:pointer;list-style:none;padding:26px 0}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary>span:first-child{font-size:12px;color:var(--muted)}.faq-list h3{font-size:19px;line-height:1.15}.faq-symbol{font-size:24px;color:var(--gold);transition:transform .3s}.faq-list details[open] .faq-symbol{transform:rotate(45deg)}.faq-answer{overflow:hidden}.faq-answer>p{font-size:16px;line-height:1.5;padding:0 40px 28px}.faq-list details[open] .faq-answer{animation:answer-open .4s ease both}@keyframes answer-open{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}.reference-footer{padding-top:180px;overflow:hidden}.footer-invite{text-align:center;padding:0 30px 100px}.footer-invite h2{font-size:clamp(65px,12vw,190px);line-height:.91;max-width:1400px;margin:0 auto 40px}.footer-description{max-width:990px;display:flex;justify-content:space-between;gap:50px;margin:70px auto 35px;text-align:left}.footer-description p{font-weight:600;font-size:20px;line-height:1.1;max-width:400px;color:var(--paper)}.footer-description p:last-child{text-align:right}.bottom-wordmark{display:block;text-align:center;font-size:18.4vw;letter-spacing:-.015em;line-height:.9;font-weight:600;white-space:nowrap;border-top:1px solid #ffffff15;padding:60px 8px 35px}.footer-bottom{border-top:1px solid #ffffff15;padding:25px 30px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:12px}.footer-bottom button{font:inherit;color:var(--muted);background:transparent;border:0;cursor:pointer;padding:12px}.nav-dialog{border:0;background:#14130f;color:var(--paper);width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:30px 5vw;overflow:auto}.nav-dialog::backdrop{background:#111}.nav-dialog[open]{animation:menu-in .55s cubic-bezier(.2,.8,.2,1) both}.nav-dialog-top{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:24px;font-size:16px}.close-nav{background:none;border:0;color:inherit;font:inherit;padding:12px;cursor:pointer}.close-nav span{margin-left:25px;font-size:25px}.nav-dialog nav{max-width:1100px;margin:40px auto;display:flex;flex-direction:column}.nav-dialog nav>a{display:grid;grid-template-columns:45px 1fr 50px;align-items:center;gap:25px;font-size:clamp(35px,6vw,78px);font-weight:600;line-height:1.1;padding:15px 0}.nav-dialog nav small{font-size:12px;font-weight:500;color:var(--muted)}.nav-dialog nav>a>span{font-size:35px;color:var(--gold)}.nav-dialog nav a:hover{color:var(--gold)}.nav-email{display:block;text-align:center;font-size:16px}@keyframes menu-in{from{opacity:0;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0)}}.word-fragment{display:inline-block;color:inherit!important}.word-fragment .word-inner{display:inline-block;color:inherit!important}.motion-enabled [data-reveal]{opacity:0;transform:translateY(70px);transition:opacity .85s cubic-bezier(.16,1,.3,1),transform 1.15s cubic-bezier(.16,1,.3,1)}.motion-enabled [data-reveal].is-visible{opacity:1;transform:none}.motion-enabled [data-words] .word-inner{opacity:0;transform:translateY(30px);transition:opacity .65s ease,transform .95s cubic-bezier(.16,1,.3,1);transition-delay:var(--word-delay,0ms)}.motion-enabled [data-words].is-visible .word-inner{opacity:1;transform:none}.motion-enabled .reference-header{animation:header-enter 1.25s .4s cubic-bezier(.16,1,.3,1) both}.motion-enabled .hero-title-mask h1{animation:title-enter 1.4s cubic-bezier(.16,1,.3,1) both}.motion-enabled .reference-meta{animation:details-enter 1.1s .2s cubic-bezier(.16,1,.3,1) both}.motion-enabled .hero-photo-entry{animation:photo-enter 1.4s .4s cubic-bezier(.16,1,.3,1) both}@keyframes header-enter{from{transform:translateY(-160px)}to{transform:none}}@keyframes title-enter{from{opacity:0;transform:translateY(-400px)}to{opacity:1;transform:none}}@keyframes details-enter{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}@keyframes photo-enter{from{opacity:0;transform:translateY(160px)}to{opacity:1;transform:none}}.route-wipe{position:fixed;inset:0;background:var(--gold);z-index:1000;pointer-events:none;transform:translateX(-130%) skewX(-15deg)}.route-wipe.is-leaving{animation:route-out .55s cubic-bezier(.27,0,.51,1) forwards}.route-wipe.is-entering{animation:route-in .8s cubic-bezier(.27,0,.51,1) forwards}@keyframes route-out{to{transform:translateX(0) skewX(0)}}@keyframes route-in{from{transform:translateX(0) skewX(0)}to{transform:translateX(130%) skewX(-15deg)}}.pointer-orb{position:fixed;left:0;top:0;height:14px;width:14px;border-radius:50%;background:var(--gold);z-index:1001;pointer-events:none;transform:translate(-100px,-100px);opacity:0;transition:width .25s,height .25s,opacity .2s;mix-blend-mode:difference}.pointer-orb.is-over{height:40px;width:40px}.motion-paused .film-track{animation-play-state:paused}.motion-paused [data-reveal],.motion-paused .word-inner{opacity:1!important;transform:none!important;transition:none!important}.motion-paused [data-parallax] img{transform:none!important}.motion-paused .pointer-orb{display:none}
@media(min-width:1800px){.hero-title-mask h1,.bottom-wordmark{font-size:min(18.4vw,430px)}}
@media(max-width:1000px){.reference-header{height:100px}.reference-project-caption{grid-template-columns:65px 1fr 25px}.reference-phases{gap:35px}.reference-phases h3{font-size:21px}.reference-service-list>a{grid-template-columns:25px 1fr .8fr 30px;gap:18px}.split-section{gap:6vw}.reference-service-list p{font-size:10px}.footer-description p{font-size:17px}.reference-portrait{max-height:1000px}}
@media(max-width:760px){.ref-wrap{width:calc(100% - 36px)}.reference-header{height:88px;padding-inline:18px}.ref-nav-left{gap:10px}.dot-menu{padding:10px;width:40px;height:44px;gap:8px}.reference-header .local-clock{font-size:11px}.reference-header .ref-button{font-size:12px;padding:10px 15px;min-height:42px}.hero-title-mask{padding:42px 6px 35px}.hero-title-mask h1{font-size:18.1vw;line-height:.88}.reference-meta{padding:25px 18px 32px;gap:12px}.reference-meta svg{width:19px;height:19px;margin-bottom:12px}.reference-meta p{font-size:8px;line-height:1.4}.hero-photo-entry{padding:32px 18px 0}.reference-portrait{height:540px;max-height:85vh;border-radius:7px}.reference-portrait>img{object-position:50% 35%}.reference-label{font-size:9px;grid-template-columns:.3fr 1fr 1fr;gap:12px;padding:15px 0}.reference-label>span:nth-child(2){text-align:left}.reference-work{padding-top:75px}.center-title{font-size:clamp(46px,13vw,80px);margin:55px 0 18px}.center-subtitle{font-size:10px;margin-bottom:45px}.reference-project-grid{grid-template-columns:1fr;gap:50px}.reference-project{grid-column:auto!important}.gallery-window{height:390px;max-height:105vw;border-radius:6px}.reference-project-caption{grid-template-columns:58px 1fr 26px;gap:8px;margin-top:18px}.reference-project-caption h3{font-size:19px}.reference-project-caption p{font-size:9px}.slide-dots{margin-top:-7px;margin-left:-7px}.slide-dots button{width:24px;height:38px;padding:7px}.slide-dots button span{height:8px;width:8px}.view-project{display:none}.center-action{margin-top:40px}.center-action .ref-button{font-size:12px}.reference-approach{padding-top:90px}.approach-statement{font-size:clamp(34px,9.6vw,62px);margin:65px auto 30px;line-height:1.02}.center-copy{font-size:15px;line-height:1.5}.phase-numbers{margin:35px auto 55px}.phase-numbers span{width:26px;height:26px;font-size:10px}.reference-phases{grid-template-columns:1fr;gap:50px;max-width:400px;margin:auto}.phase-pips{margin-bottom:20px}.phase-pictures{margin-bottom:18px}.reference-phases h3{font-size:25px}.reference-phases p{font-size:15px;max-width:300px}.filmstrip{padding:70px 0 35px}.film-group{gap:14px;padding-right:14px}.film-group img{width:220px;height:145px}.reference-about{padding-top:80px}.about-title{font-size:clamp(40px,11.6vw,78px);margin:70px auto 45px}.about-portrait{width:78%;margin-bottom:38px}.reference-about>h3{font-size:19px;line-height:1.15;margin-bottom:24px}.reference-about>.ref-button{font-size:13px;margin-top:30px}.reference-stats{padding-top:85px}.stats-grid{grid-template-columns:1fr 1fr;gap:45px 20px;padding:45px 0}.stats-grid strong{font-size:72px}.stats-grid p{font-size:9px;margin-top:16px}.stat-note{font-size:11px;line-height:1.5}.reference-services{padding-top:90px}.reference-service-list{margin-top:45px}.reference-service-list>a{grid-template-columns:22px 1fr 25px;gap:10px;padding:27px 0}.reference-service-list h3{font-size:27px}.reference-service-list p{grid-column:2;grid-row:2;font-size:9px;margin-top:6px;max-width:270px}.service-arrow{grid-column:3;grid-row:1;font-size:25px}.reference-service-list>a:hover{padding-inline:0}.service-index{font-size:10px}.work-banner{margin-top:70px;height:420px}.reference-experience,.reference-delivery,.reference-faq{padding-top:85px}.split-section{grid-template-columns:1fr;gap:38px;padding-top:45px}.split-section>h2{position:static;font-size:45px}.reference-records>a,.reference-records>article{margin-bottom:28px;padding-bottom:28px}.reference-records h3{font-size:23px}.reference-records p{font-size:15px}.record-meta{font-size:9px;margin-bottom:18px}.reference-quote{padding-top:60px}.reference-quote>p{font-size:clamp(30px,8.9vw,50px);margin:65px auto 0;line-height:1.06}.faq-list h3{font-size:16px}.faq-list summary{padding:23px 0;grid-template-columns:20px 1fr 20px;gap:12px}.faq-answer>p{padding:0 30px 25px;font-size:14px}.reference-footer{padding-top:100px}.footer-invite{padding:0 18px 60px}.footer-invite h2{font-size:clamp(43px,12.3vw,90px);line-height:.98;margin-bottom:30px}.footer-invite .ref-button{font-size:15px}.footer-description{margin:50px auto 25px;gap:28px;flex-direction:column;text-align:center}.footer-description p{font-size:16px;margin:auto}.footer-description p:last-child{text-align:center}.bottom-wordmark{font-size:18vw;padding:35px 5px 22px}.footer-bottom{padding:18px;gap:15px;flex-wrap:wrap;font-size:9px}.footer-bottom button{font-size:9px;padding:8px 0}.nav-dialog{padding:20px}.nav-dialog-top{font-size:13px}.nav-dialog nav{margin:50px 0}.nav-dialog nav>a{grid-template-columns:25px 1fr 25px;gap:16px;font-size:34px;padding:18px 0}.nav-dialog nav>a>span{font-size:25px}.nav-dialog nav small{font-size:10px}.nav-email{font-size:14px}.pointer-orb{display:none}.reference-site .branch-nav{margin-top:14px}.reference-site .page-intro h1{font-size:clamp(38px,10.2vw,75px)}}
@media(prefers-reduced-motion:reduce){.film-track{animation:none}.gallery-slide{transition:none}.pointer-orb{display:none}.reference-portrait>img,.work-banner>img{transform:none!important}.route-wipe{display:none}}

@media(min-width:761px){.hero-title-mask{padding-bottom:20px}.reference-meta{padding-top:24px;padding-bottom:24px}}
@font-face{font-family:Clash;src:url('fonts/clash-display-400.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
.reference-site{font-weight:400}.reference-site h3{word-spacing:.055em}.reference-meta p,.reference-label,.record-meta,.reference-project-caption p{letter-spacing:.015em}.faq-list h3{letter-spacing:0;word-spacing:.09em}
