/* Homepage choreography. The about and quote pages retain their own layout. */
html.lenis{scroll-behavior:auto}
.home-page .reveal{opacity:1;transform:none;transition:none}
.home-page .hero{height:110svh;max-height:none;background:var(--ink)}
.home-page .hero-image{transform:scale(1.05);transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1)}
.home-page .hero-image.active{transform:scale(1);transition:opacity 1s .25s cubic-bezier(.22,1,.36,1),transform 1s .25s cubic-bezier(.22,1,.36,1)}
.home-page .hero-bottom{bottom:calc(10svh + var(--pad))}
.home-page .slide-tab{flex:0 1 25%;transition:flex-basis .5s cubic-bezier(.22,1,.36,1);min-width:44px;min-height:44px}
.home-page .slide-tab.active{flex-basis:50%}
.home-page .slide-tab:before,.home-page .slide-tab span{top:21px;height:3px}
.home-page .slideshow-controls{gap:20px;margin-bottom:10px}
.home-page .pause{min-width:44px;min-height:44px}
.home-page .slideshow-ready .slide-tab span{animation:none}
.home-page .hero-caption>a{transition:transform .45s cubic-bezier(.22,1,.36,1)}
.home-page .hero-caption>a:hover{transform:translateY(5px)}

/* A dark introduction followed by the client’s presentation film. */
.home-page .intro-dark{background:var(--ink);color:var(--paper);padding-bottom:clamp(40px,5vw,80px)}
.home-page .intro-stamp .eyebrow{color:var(--cala-light-text)}
.home-page .intro-stamp .large-orbit{color:var(--cala-copper)}
.home-page.motion-enabled .intro-stamp .large-orbit{animation:none}
.home-film{margin:60px 0 0;scroll-margin-top:0}
.home-film video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:var(--ink)}
.home-film video:focus-visible{outline:2px solid var(--cala-copper);outline-offset:4px}
.home-film figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding-top:18px}
.home-film figcaption>span:first-child{font-size:24px;letter-spacing:-.035em}
.home-film figcaption .eyebrow{color:var(--cala-light-text)}
@media(min-width:701px){
  .home-film{width:min(84%,1040px,calc((100svh - 220px)*16/9));margin-inline:auto}
}

/* Masking is per typographic line; the original text remains the accessible name. */
.home-page .motion-line-mask{overflow:clip;padding-block:.08em;margin-block:-.08em}
.home-page .motion-line{will-change:transform}
.home-page .motion-text-done .motion-line{will-change:auto}

.home-page .expertise,.home-page .projects{background:var(--paper);position:relative;z-index:2}
.home-page .service{position:relative;background:var(--paper);isolation:isolate}
.home-page .service-content>p{height:auto}
.home-page .service-shade{position:absolute;inset:0;z-index:4;background:var(--ink);opacity:0;pointer-events:none}
.home-page .service-media{position:absolute;inset:0;overflow:hidden}
.home-page .service-media img{position:absolute;inset:-10% 0;width:100%;height:120%;transition:none}
.home-page .service-image:hover img{transform:none}
.home-page .motion-image-cover{position:absolute;inset:0;background:var(--paper);pointer-events:none;z-index:3}
.home-page .image-link{z-index:2}

.home-page .statement{height:135svh;min-height:740px;max-height:none}
.home-page .statement-image{inset:-20% 0;clip-path:none;transform:none}
.home-page .statement-image:after{background:#0004}
.home-page .statement-copy{padding:60px var(--pad)}
.home-page .statement-credit{z-index:1}
.home-page .renovation-pair figure{isolation:isolate}
.home-page .renovation-pair figcaption{z-index:2}
.home-page .supplied-projects .renovation-pair img{transform:none!important}
.home-page .contact-paper{position:relative}

/* The image link follows the pointer only on devices that actually have one. */
@media(min-width:701px) and (hover:hover) and (pointer:fine){
  .home-page.motion-enabled .service-image{overflow:visible}
  .home-page.motion-enabled .service-image .image-link{inset:0 auto auto 0;gap:30px;white-space:nowrap;padding:13px 17px;background:var(--paper);color:var(--ink);width:max-content;opacity:0;pointer-events:none;will-change:transform}
  .home-page.motion-enabled .service-image:focus-visible .image-link{opacity:1!important;transform:none!important}
}

@media(min-width:701px){
  .home-page.motion-enabled .service{padding-bottom:8vw;min-height:580px}
  .home-page.motion-enabled .service-image{width:62%;height:clamp(235px,23vw,350px)}
  .home-page .statement h2{font-size:clamp(80px,11vw,176px)}
}

@media(max-width:700px){
  .home-film{margin-top:35px}
  .home-film figcaption{align-items:flex-start;flex-direction:column;gap:8px}
  .home-film figcaption>span:first-child{font-size:21px}
  .home-page .hero{min-height:780px}
  .home-page .hero-bottom{bottom:calc(10svh + 22px)}
  .home-page .hero h1{max-width:420px}
  .home-page.motion-enabled .intro-stamp{margin-bottom:28px}
  .home-page .statement{height:110svh;min-height:650px}
  .home-page .statement-image{inset:-15% -28%}
  .home-page .statement h2{font-size:clamp(66px,13vw,92px)}
}

@media(prefers-reduced-motion:reduce){
  .home-page .hero{height:100svh;min-height:700px}
  .home-page .hero-bottom{bottom:var(--pad)}
  .home-page .hero-image{transform:none}
  .home-page .statement{height:100svh}
  .home-page .motion-image-cover{display:none}
}

/* Space between the final project and the customer reviews. */
.home-page .projects{padding-bottom:80px}
@media(max-width:700px){.home-page .projects{padding-bottom:50px}}