:root {
  --color-bg: #000000;
  --color-fg: #f3efe6;
  --color-muted: #9a958c;
  --color-line: #2a2a2a;
  --color-accent: #d8c7a3;
  --font-display: "Gilda Display", "Times New Roman", serif;
  --font-sans: "Lato", "Helvetica Neue", sans-serif;
}
html, body { min-height: 100%; background: var(--color-bg); color: var(--color-fg); }
body { font-family: var(--font-sans); letter-spacing: 0.01em; }
button:not(:disabled), [role="button"]:not(:disabled) { cursor: pointer; }

/* Utilities introduced in the latest source after the bundled Tailwind snapshot. */
.bg-accent{background-color:var(--color-accent)}
.h-3\.5{height:.875rem}.h-5{height:1.25rem}.h-auto{height:auto}.h-px{height:1px}
.items-end{align-items:flex-end}.leading-none{line-height:1}.origin-center{transform-origin:center}
.shadow-sm{box-shadow:0 1px 2px 0 rgb(0 0 0 / .05)}
.text-\[17px\]{font-size:17px}.text-\[8px\]{font-size:8px}
.tracking-\[0\.38em\]{letter-spacing:.38em}.tracking-\[0\.4em\]{letter-spacing:.4em}.tracking-\[0\.55em\]{letter-spacing:.55em}
.underline-offset-\[10px\]{text-underline-offset:10px}
.w-24{width:6rem}.w-5{width:1.25rem}.w-\[min\(88vw\,720px\)\]{width:min(88vw,720px)}
.mt-5{margin-top:1.25rem}.mt-\[3px\]{margin-top:3px}

/* Latest source animations. */
.logo-letter { fill: var(--color-fg); opacity: 0; animation: logo-in 1.15s cubic-bezier(0.2,0,0,1) forwards; }
.logo-letter:nth-of-type(1){animation-delay:.15s}.logo-letter:nth-of-type(2){animation-delay:.32s}.logo-letter:nth-of-type(3){animation-delay:.48s}
.logo-rule{transform:scaleX(0);animation:logo-rule .8s .9s cubic-bezier(.2,0,0,1) forwards}
.logo-sub{opacity:0;animation:logo-sub .9s 1.1s cubic-bezier(.2,0,0,1) forwards}
.bvs-logo{position:relative}.bvs-logo::after{content:"";pointer-events:none;position:absolute;inset:8% -30%;background:linear-gradient(110deg,transparent 42%,rgb(243 239 230 / .28) 50%,transparent 58%);animation:logo-sheen 5.5s 1.8s ease-in-out infinite}
@keyframes logo-in{from{opacity:0;filter:blur(8px)}to{opacity:1;filter:blur(0)}}
@keyframes logo-rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes logo-sub{from{opacity:0;letter-spacing:.9em}to{opacity:1}}
@keyframes logo-sheen{0%,55%{transform:translateX(-40%);opacity:0}70%{opacity:1}85%,100%{transform:translateX(40%);opacity:0}}
.hero-enter{opacity:0;animation:logo-sub .9s 6.2s cubic-bezier(.2,0,0,1) forwards}

/* Vanilla-static interaction helpers. */
[data-mobile-menu][hidden], [data-lightbox][hidden] { display:none !important; }
[data-lang-block][hidden] { display:none !important; }
.static-lightbox { position:fixed; inset:0; z-index:50; display:flex; flex-direction:column; background:rgb(0 0 0 / .95); }
.static-lightbox__top { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.75rem 1rem; }
.static-lightbox__stage { position:relative; display:flex; min-height:0; flex:1; align-items:center; justify-content:center; padding:0 3rem 2rem; }
.static-lightbox__stage img { max-height:100%; max-width:100%; object-fit:contain; }
.static-icon-button { display:inline-flex; width:2.75rem; height:2.75rem; align-items:center; justify-content:center; color:var(--color-fg); }
.static-prev,.static-next { position:absolute; top:50%; transform:translateY(-50%); }
.static-prev{left:.5rem}.static-next{right:.5rem}

@media (min-width:768px){
  .md\:gap-16{gap:4rem}.md\:gap-20{gap:5rem}.md\:h-6{height:1.5rem}.md\:pb-20{padding-bottom:5rem}
  .md\:text-2xl{font-size:1.5rem;line-height:2rem}.md\:text-xs{font-size:.75rem;line-height:1rem}.md\:w-10{width:2.5rem}.md\:w-11{width:2.75rem}
}
@media (prefers-reduced-motion: reduce){
  .logo-letter,.logo-rule,.logo-sub,.hero-enter,.bvs-logo::after{animation:none;opacity:1;transform:none;filter:none}
  .hero-gif{display:none}.hero-still{display:block !important}
}

/* Home composition v3 — logo and controls are deliberately separated. */
.hero-page{
  box-sizing:border-box;
  min-height:100svh;
  width:100%;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:#000;
  padding:clamp(.75rem,2.2svh,1.35rem) 1rem clamp(1rem,2.8svh,1.75rem);
}
.hero-logo-window{
  flex:0 0 auto;
  width:min(92vw,760px,calc(66svh * 4 / 3));
  aspect-ratio:4 / 3;
  overflow:hidden;
  background:#000;
}
.hero-logo-media{
  display:block;
  width:100%;
  height:auto;
  max-width:none;
  background:#000;
}
.hero-bottom{
  flex:0 0 auto;
  width:min(92vw,760px);
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-top:clamp(1.75rem,4svh,2.75rem);
  color:var(--color-fg);
}
.hero-tagline{
  white-space:nowrap;
  font-family:var(--font-sans);
  font-size:clamp(.82rem,1.7vw,1.55rem);
  font-weight:300;
  line-height:1;
  letter-spacing:.38em;
  text-align:center;
  padding-left:.38em;
  opacity:0;
  animation:hero-fade .8s 4.7s ease-out forwards;
}
.hero-rule{
  width:min(100%,650px);
  height:1px;
  background:rgb(243 239 230 / .9);
  margin-top:clamp(1.2rem,2.5svh,1.7rem);
  opacity:0;
  transform:scaleX(0);
  animation:hero-rule-in .8s 5.05s cubic-bezier(.2,0,0,1) forwards;
}
.hero-enter{
  width:100%;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:clamp(3.25rem,9vw,6.5rem);
  margin-top:clamp(1rem,2.2svh,1.4rem);
  opacity:0;
  animation:hero-fade .8s 5.45s ease-out forwards;
}
.hero-language-button{
  display:flex;
  min-width:clamp(6.7rem,15vw,9.5rem);
  flex-direction:column;
  align-items:center;
  gap:.65rem;
  color:var(--color-fg);
  background:transparent;
  border:0;
  padding:0;
  font:inherit;
}
.hero-language-button span{
  font-family:var(--font-display);
  font-size:clamp(1.05rem,1.6vw,1.45rem);
  line-height:1.15;
  letter-spacing:.34em;
  text-transform:uppercase;
  padding-left:.34em;
  border-bottom:1px solid rgb(243 239 230 / .8);
  padding-bottom:.28rem;
}
.hero-flag{display:block;filter:drop-shadow(0 1px 1px rgb(0 0 0 / .25))}
.hero-flag-us{width:2.65rem;height:auto}
.hero-flag-fr{width:2.35rem;height:auto}
.hero-url{
  margin-top:clamp(1.15rem,2.7svh,1.7rem);
  font-family:var(--font-sans);
  font-size:clamp(1.05rem,1.75vw,1.55rem);
  font-weight:400;
  line-height:1;
  letter-spacing:.005em;
  color:#fff;
  opacity:0;
  animation:hero-fade .8s 5.8s ease-out forwards;
}
@keyframes hero-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes hero-rule-in{from{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}

@media (max-width:767px){
  .hero-page{justify-content:center;padding:.65rem .75rem 1.1rem}
  .hero-logo-window{width:min(96vw,520px,calc(59svh * 4 / 3));}
  .hero-bottom{width:min(94vw,520px);margin-top:clamp(1.4rem,3.2svh,2rem)}
  .hero-tagline{font-size:clamp(.72rem,3.2vw,1rem);letter-spacing:.29em;padding-left:.29em}
  .hero-rule{width:92%;margin-top:1.05rem}
  .hero-enter{gap:clamp(2.15rem,15vw,4.2rem);margin-top:.9rem}
  .hero-language-button{min-width:5.7rem;gap:.5rem}
  .hero-language-button span{font-size:clamp(.95rem,4vw,1.15rem);letter-spacing:.28em;padding-left:.28em;padding-bottom:.25rem}
  .hero-flag-us{width:2.25rem}.hero-flag-fr{width:2rem}
  .hero-url{margin-top:1.05rem;font-size:clamp(.95rem,4.2vw,1.2rem)}
}
@media (max-height:680px) and (min-width:768px){
  .hero-logo-window{width:min(78vw,650px,calc(60svh * 4 / 3));}
  .hero-bottom{margin-top:1.2rem}
  .hero-rule{margin-top:.9rem}
  .hero-enter{margin-top:.75rem}
  .hero-url{margin-top:.85rem}
}
@media (prefers-reduced-motion:reduce){
  .hero-gif{display:none!important}
  .hero-still{display:block!important}
  .hero-tagline,.hero-rule,.hero-enter,.hero-url{animation:none;opacity:1;transform:none}
}
.hero-still{display:none}
@media (prefers-reduced-motion:reduce){.hero-still{display:block!important}}


/* V4 — editorial entrance transition and photographic portfolio hub. */
.hero-logo-window{position:relative;perspective:1400px;isolation:isolate}
.hero-transition-stack{position:relative;width:100%;height:100%;transform-style:preserve-3d;will-change:transform}
.hero-logo-face{position:absolute;inset:0;overflow:hidden;background:#000;z-index:3;backface-visibility:hidden}
.hero-transition-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;z-index:2;backface-visibility:hidden;will-change:opacity,transform}
.hero-transition-photo--color{object-position:center center;transform:rotateY(180deg)}
.hero-transition-photo--bw{object-position:center center;transform:rotateY(0deg)}
.hero-page.is-entering .hero-bottom{animation:hero-bottom-exit .28s ease forwards;pointer-events:none}
.hero-page.is-entering .hero-transition-stack{animation:hero-spin-360 2.45s cubic-bezier(.22,.62,.18,1) forwards}
.hero-page.is-entering .hero-logo-face{animation:hero-logo-dissolve 2.45s ease forwards}
.hero-page.is-entering .hero-transition-photo--color{animation:hero-photo-color 2.45s ease forwards}
.hero-page.is-entering .hero-transition-photo--bw{animation:hero-photo-bw 2.45s ease forwards}
.hero-page.is-entering{animation:hero-page-exit 2.45s ease forwards}
@keyframes hero-spin-360{0%{transform:rotateY(0deg) scale(1)}100%{transform:rotateY(360deg) scale(.985)}}
@keyframes hero-logo-dissolve{0%,18%{opacity:1}29%,100%{opacity:0}}
@keyframes hero-photo-color{0%,23%{opacity:0}31%,61%{opacity:1}69%,100%{opacity:0}}
@keyframes hero-photo-bw{0%,70%{opacity:0}77%,92%{opacity:1}100%{opacity:0}}
@keyframes hero-bottom-exit{to{opacity:0;transform:translateY(10px)}}
@keyframes hero-page-exit{0%,88%{opacity:1}100%{opacity:0}}

.portfolio-page{min-height:100vh;background:#000;color:var(--color-fg)}
.portfolio-intro{max-width:72rem;margin:0 auto;padding:clamp(4.5rem,8vw,8rem) 1.25rem 2.75rem;text-align:center}
.portfolio-kicker{font-size:.68rem;letter-spacing:.34em;text-transform:uppercase;color:var(--color-muted)}
.portfolio-title{margin-top:1rem;font-family:var(--font-display);font-size:clamp(2.4rem,6vw,5.2rem);font-weight:400;letter-spacing:.025em;line-height:1.02;color:var(--color-fg)}
.portfolio-statement{max-width:46rem;margin:1.7rem auto 0;font-family:var(--font-display);font-size:clamp(1.05rem,2vw,1.35rem);font-style:italic;line-height:1.7;color:var(--color-accent)}
.portfolio-duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.75rem,2vw,1.6rem);max-width:86rem;margin:0 auto;padding:0 1.25rem}
.portfolio-duo figure{margin:0;overflow:hidden;background:#080808}
.portfolio-duo img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,0,0,1),filter 1.1s ease}
.portfolio-duo figure:hover img{transform:scale(1.018)}
.portfolio-series{max-width:72rem;margin:0 auto;padding:clamp(4.5rem,8vw,7rem) 1.25rem}
.portfolio-section-heading{display:flex;align-items:end;justify-content:space-between;gap:1rem;padding-bottom:1rem;border-bottom:1px solid var(--color-line)}
.portfolio-section-heading h2{font-family:var(--font-display);font-size:clamp(1.8rem,3vw,2.6rem);font-weight:400;letter-spacing:.025em;color:var(--color-fg)}
.portfolio-section-heading p{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--color-muted)}
.portfolio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,4vw,3.5rem) clamp(1.2rem,2.5vw,2.2rem);margin-top:2rem}
.portfolio-card{display:block;text-decoration:none;color:inherit}
.portfolio-card-media{overflow:hidden;background:#0b0b0b}
.portfolio-card-media img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .8s cubic-bezier(.2,0,0,1)}
.portfolio-card:hover .portfolio-card-media img{transform:scale(1.025)}
.portfolio-card h3{margin-top:1rem;font-family:var(--font-display);font-size:clamp(1.35rem,2.2vw,1.8rem);font-weight:400;letter-spacing:.02em;color:var(--color-fg)}
.portfolio-card p{margin-top:.3rem;font-size:.78rem;letter-spacing:.08em;color:var(--color-muted)}
.portfolio-print-cta{max-width:72rem;margin:0 auto;padding:0 1.25rem clamp(5rem,9vw,8rem);text-align:center}
.portfolio-print-cta a{display:inline-block;border:1px solid rgb(243 239 230 / .55);padding:.9rem 1.35rem;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;text-decoration:none;color:var(--color-fg);transition:border-color .25s ease,background .25s ease}
.portfolio-print-cta a:hover{border-color:var(--color-fg);background:rgb(243 239 230 / .06)}
@media(max-width:767px){
  .portfolio-intro{padding-top:4rem}
  .portfolio-duo{grid-template-columns:1fr;gap:.8rem;padding:0 .9rem}
  .portfolio-duo img{aspect-ratio:4/3}
  .portfolio-grid{grid-template-columns:1fr}
  .portfolio-section-heading{align-items:start;flex-direction:column}
  .hero-page.is-entering .hero-transition-stack{animation-duration:2.15s}
  .hero-page.is-entering .hero-logo-face,.hero-page.is-entering .hero-transition-photo--color,.hero-page.is-entering .hero-transition-photo--bw,.hero-page.is-entering{animation-duration:2.15s}
}
@media(prefers-reduced-motion:reduce){
  .hero-page.is-entering,.hero-page.is-entering .hero-transition-stack,.hero-page.is-entering .hero-logo-face,.hero-page.is-entering .hero-transition-photo--color,.hero-page.is-entering .hero-transition-photo--bw,.hero-page.is-entering .hero-bottom{animation:none!important}
  .portfolio-duo img,.portfolio-card-media img{transition:none}
}

/* Fine-art offer — V7. */
.offer-page{background:#000;color:var(--color-fg)}
.offer-hero{max-width:58rem;margin:0 auto;padding:clamp(4.5rem,8vw,7rem) 1.25rem clamp(3.5rem,6vw,5rem);text-align:center}
.offer-kicker{font-size:.66rem;letter-spacing:.32em;text-transform:uppercase;color:var(--color-muted)}
.offer-hero h1{margin-top:1rem;font-family:var(--font-display);font-size:clamp(2.5rem,6vw,5rem);font-weight:400;line-height:1.05;letter-spacing:.02em}
.offer-lead{max-width:46rem;margin:1.6rem auto 0;font-family:var(--font-display);font-size:clamp(1.05rem,2vw,1.35rem);font-style:italic;line-height:1.7;color:var(--color-accent)}
.offer-scale{max-width:72rem;margin:0 auto;padding:clamp(3rem,6vw,5rem) 1.25rem;border-top:1px solid var(--color-line)}
.offer-scale__heading{text-align:center}
.offer-scale__heading h2,.offer-edition h2{margin-top:.7rem;font-family:var(--font-display);font-size:clamp(1.8rem,3.5vw,3rem);font-weight:400;letter-spacing:.02em}
.offer-scale__visual{display:flex;align-items:flex-end;justify-content:center;gap:clamp(.8rem,3vw,2.5rem);min-height:19rem;margin-top:2.5rem;overflow:hidden}
.offer-person{flex:0 0 6rem;height:17.5rem;background-image:url('/media/misc/prices.jpg');background-repeat:no-repeat;background-size:auto 17.5rem;filter:grayscale(1) brightness(.72) contrast(1.2);opacity:.75}
.offer-person--left{background-position:left center}
.offer-person--right{background-position:right center}
.offer-scale__prints{display:flex;align-items:flex-end;justify-content:center;gap:clamp(.7rem,2vw,1.5rem)}
.offer-scale__print{display:flex;align-items:center;justify-content:center;border:1px solid rgb(216 199 163 / .68);background:linear-gradient(135deg,#131313,#050505);color:var(--color-accent);font-family:var(--font-display);font-size:1rem;letter-spacing:.08em;box-shadow:0 1rem 3rem rgb(0 0 0 / .5)}
.offer-scale__print--45{width:7.2rem;aspect-ratio:3/2}
.offer-scale__print--60{width:9.6rem;aspect-ratio:3/2}
.offer-scale__print--90{width:14.4rem;aspect-ratio:3/2}
.offer-scale__note{margin-top:1.5rem;text-align:center;font-size:.72rem;line-height:1.6;letter-spacing:.08em;color:var(--color-muted)}
.offer-products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:78rem;margin:0 auto;padding:clamp(3rem,6vw,5rem) 1.25rem clamp(5rem,8vw,7rem);gap:1rem}
.offer-card{display:flex;flex-direction:column;border:1px solid var(--color-line);padding:clamp(1.5rem,3vw,2.2rem);background:#050505}
.offer-card--featured{border-color:rgb(216 199 163 / .72);background:linear-gradient(180deg,rgb(216 199 163 / .075),#050505 42%)}
.offer-card__eyebrow{font-size:.62rem;letter-spacing:.25em;text-transform:uppercase;color:var(--color-accent)}
.offer-card h2{margin-top:1rem;font-family:var(--font-display);font-size:clamp(1.45rem,2.4vw,2rem);font-weight:400;line-height:1.2}
.offer-card__price{margin-top:1.3rem;font-family:var(--font-display);font-size:2.5rem;line-height:1;color:var(--color-fg)}
.offer-card__delivery{margin-top:.65rem;min-height:2.5em;font-size:.68rem;line-height:1.5;letter-spacing:.08em;text-transform:uppercase;color:var(--color-muted)}
.offer-card__details{margin-top:1.5rem;border-top:1px solid var(--color-line)}
.offer-card__details div{display:grid;grid-template-columns:4.8rem 1fr;gap:.8rem;padding:.85rem 0;border-bottom:1px solid var(--color-line)}
.offer-card__details dt{font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;color:var(--color-muted)}
.offer-card__details dd{margin:0;font-size:.77rem;line-height:1.5;color:var(--color-fg)}
.offer-card__copy{margin:1.4rem 0 1.5rem;font-size:.8rem;line-height:1.7;color:var(--color-muted)}
.offer-button{display:inline-block;margin-top:auto;align-self:flex-start;border:1px solid var(--color-accent);padding:.85rem 1rem;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:#000;background:var(--color-accent);transition:background .25s ease,color .25s ease}
.offer-button:hover{background:transparent;color:var(--color-accent)}
.offer-button--quiet{border-color:rgb(243 239 230 / .48);background:transparent;color:var(--color-fg)}
.offer-button--quiet:hover{border-color:var(--color-fg);background:rgb(243 239 230 / .06);color:var(--color-fg)}
.offer-edition{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,7vw,7rem);max-width:72rem;margin:0 auto;padding:clamp(4rem,7vw,6rem) 1.25rem;border-top:1px solid var(--color-line)}
.offer-edition__copy{font-size:.85rem;line-height:1.8;color:var(--color-muted)}
.offer-edition__copy p+p{margin-top:1.2rem}
.fine-art-intro{max-width:46rem;margin:1.6rem auto 0;font-family:var(--font-display);font-size:clamp(1rem,2vw,1.25rem);font-style:italic;line-height:1.7;color:var(--color-accent)}
.fine-art-offer{display:flex;align-items:center;justify-content:space-between;gap:2rem;max-width:46rem;margin:2.2rem auto 0;padding:1.2rem 1.4rem;border:1px solid rgb(216 199 163 / .55);text-align:left}
.fine-art-offer>div{display:grid;grid-template-columns:auto auto;align-items:baseline;column-gap:1rem;row-gap:.25rem}
.fine-art-offer span{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--color-muted)}
.fine-art-offer strong{font-family:var(--font-display);font-size:1.75rem;font-weight:400;color:var(--color-fg)}
.fine-art-offer small{grid-column:1/-1;font-size:.64rem;line-height:1.5;color:var(--color-muted)}
.fine-art-offer .offer-button{flex:0 0 auto;margin-top:0;text-align:center}
@media(max-width:900px){
  .offer-products{grid-template-columns:1fr;max-width:40rem}
  .offer-card__delivery{min-height:0}
  .offer-scale__visual{transform:scale(.86);transform-origin:center bottom;margin-left:-8%;margin-right:-8%}
}
@media(max-width:640px){
  .offer-scale__visual{min-height:13rem;transform:none;gap:.6rem}
  .offer-person{display:none}
  .offer-scale__prints{width:100%;gap:.5rem}
  .offer-scale__print--45{width:23%}
  .offer-scale__print--60{width:31%}
  .offer-scale__print--90{width:43%}
  .offer-edition{grid-template-columns:1fr}
  .fine-art-offer{flex-direction:column;align-items:stretch;text-align:center}
  .fine-art-offer>div{justify-content:center}
  .fine-art-offer .offer-button{align-self:stretch}
}


/* V5 — synchronized intro loop + sequential photographic flips. */
/* The GIF itself is 12.1 s; the lower composition now follows the same loop. */
.hero-tagline{
  animation:hero-loop-tagline 12.1s linear infinite;
}
.hero-rule{
  animation:hero-loop-rule 12.1s linear infinite;
}
.hero-enter{
  animation:hero-loop-enter 12.1s linear infinite;
}
.hero-url{
  animation:hero-loop-url 12.1s linear infinite;
}
@keyframes hero-loop-tagline{
  0%,37%{opacity:0;transform:translateY(6px)}
  43%,88%{opacity:1;transform:translateY(0)}
  96%,100%{opacity:0;transform:translateY(2px)}
}
@keyframes hero-loop-rule{
  0%,40%{opacity:0;transform:scaleX(0)}
  47%,88%{opacity:1;transform:scaleX(1)}
  96%,100%{opacity:0;transform:scaleX(1)}
}
@keyframes hero-loop-enter{
  0%,43%{opacity:0;transform:translateY(6px)}
  50%,88%{opacity:1;transform:translateY(0)}
  96%,100%{opacity:0;transform:translateY(2px)}
}
@keyframes hero-loop-url{
  0%,46%{opacity:0;transform:translateY(6px)}
  53%,88%{opacity:1;transform:translateY(0)}
  96%,100%{opacity:0;transform:translateY(2px)}
}

/* On entry, stop the idle loop and turn the visual itself: logo -> B&W -> colour. */
.hero-page.is-entering .hero-transition-stack{
  animation:none!important;
  transform:none!important;
}
.hero-page.is-entering .hero-bottom{
  animation:hero-bottom-exit-v5 .3s ease forwards!important;
  pointer-events:none;
}
.hero-page.is-entering .hero-tagline,
.hero-page.is-entering .hero-rule,
.hero-page.is-entering .hero-enter,
.hero-page.is-entering .hero-url{
  animation-play-state:paused;
}
.hero-logo-face,
.hero-transition-photo{
  transform-origin:50% 50%;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.hero-transition-photo--first{
  z-index:2;
  opacity:1;
  transform:rotateY(-180deg);
}
.hero-transition-photo--second{
  z-index:1;
  opacity:1;
  transform:rotateY(-180deg);
}
.hero-page.is-entering .hero-logo-face{
  animation:hero-v5-logo 4.6s cubic-bezier(.22,.62,.18,1) forwards!important;
}
.hero-page.is-entering .hero-transition-photo--first{
  animation:hero-v5-first 4.6s cubic-bezier(.22,.62,.18,1) forwards!important;
}
.hero-page.is-entering .hero-transition-photo--second{
  animation:hero-v5-second 4.6s cubic-bezier(.22,.62,.18,1) forwards!important;
}
.hero-page.is-entering{
  animation:hero-v5-page 4.6s ease forwards!important;
}
@keyframes hero-v5-logo{
  0%,3%{transform:rotateY(0deg)}
  28%,100%{transform:rotateY(180deg)}
}
@keyframes hero-v5-first{
  0%,3%{transform:rotateY(-180deg)}
  28%,51%{transform:rotateY(0deg)}
  77%,100%{transform:rotateY(180deg)}
}
@keyframes hero-v5-second{
  0%,51%{transform:rotateY(-180deg)}
  77%,100%{transform:rotateY(0deg)}
}
@keyframes hero-bottom-exit-v5{
  to{opacity:0;transform:translateY(10px)}
}
@keyframes hero-v5-page{
  0%,90%{opacity:1}
  100%{opacity:0}
}

/* The two transition photographs no longer repeat on the portfolio page. */
.portfolio-intro{
  padding-bottom:clamp(1.5rem,3vw,2.5rem);
}
.portfolio-series{
  padding-top:clamp(3rem,6vw,5rem);
}

@media(max-width:767px){
  .hero-page.is-entering .hero-logo-face,
  .hero-page.is-entering .hero-transition-photo--first,
  .hero-page.is-entering .hero-transition-photo--second,
  .hero-page.is-entering{animation-duration:4.2s!important}
}
@media(prefers-reduced-motion:reduce){
  .hero-tagline,.hero-rule,.hero-enter,.hero-url{animation:none!important;opacity:1!important;transform:none!important}
  .hero-page.is-entering .hero-logo-face,
  .hero-page.is-entering .hero-transition-photo--first,
  .hero-page.is-entering .hero-transition-photo--second,
  .hero-page.is-entering{animation:none!important}
}