/* ==========================================================================
   Page layouts (desktop). Each page is an artboard drawn at the proportions of
   its final model; numbers inside calc(N * var(--a)) are model pixels.
   Text positions/sizes are in text.css (generated from the models).
   ========================================================================== */

.ab .t{margin:0;padding:0;white-space:nowrap;color:#fff;list-style:none}
.ab ul.t li{display:block;margin:0;padding:0}
.ab .t b{font-weight:700}

/* ================================================================ WELCOME */
.welcome{--W:6000;aspect-ratio:6000/3375;cursor:pointer;outline:none;background:#000;overflow:hidden}
.welcome .fg{left:calc(1317 * var(--a));top:calc(1246 * var(--a));width:calc(3365 * var(--a));z-index:2}
.welcome .fg img{display:block;width:100%}
.welcome .interact{z-index:2}
/* hero layers: image (oversized 4% on every side) with parallax + drift, then vignette/gradient */
.hero-par{position:absolute;inset:0;z-index:0;will-change:transform}
.hero-drift{position:absolute;inset:-4%;background:url(../assets/img/welcome-bg.webp) center/cover no-repeat;transform:scale(1.04);will-change:transform}
.hero-shade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 85% 80% at 50% 45%,rgba(0,0,0,0) 55%,rgba(0,0,0,.42) 100%),
             linear-gradient(to bottom,rgba(0,0,0,0) 62%,rgba(0,0,0,.55) 86%,#000 100%)}
.welcome .interact{left:calc(5073 * var(--a));top:calc(2787 * var(--a));width:calc(505 * var(--a));
  animation:breathe 1.27s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.44}}
.welcome:focus-visible .interact{filter:drop-shadow(0 0 6px #fff)}

/* ================================================================ CONTENTS */
.contents{--W:6000;aspect-ratio:6000/3375;background-image:url(../assets/img/contents-art.webp)}
.contents .t-toc li{height:calc(175.5 * var(--a))}
.contents .t-toc a{display:inline-block;transition:text-shadow .2s ease}
.contents .t-toc a:hover,.contents .t-toc a:focus-visible{text-shadow:0 0 4px #fff,0 0 12px rgba(255,255,255,.85),0 0 26px rgba(255,255,255,.45)}

/* ================================================================ SERVICES */
.services{--W:6000;aspect-ratio:6000/3375;background-color:transparent;background-image:url(../assets/img/services-art-a.webp)}
.services .t-exp li{height:calc(124.7 * var(--a))}
.services .t-exp a{display:inline-block;color:inherit;transition:text-shadow .2s ease,color .2s ease}
.services .t-exp a:hover,.services .t-exp a:focus-visible{color:#ff4a24;
  text-shadow:0 0 4px rgba(255,90,50,.95),0 0 12px var(--red-glow),0 0 26px rgba(255,50,20,.45)}

/* ================================================================ ABOUT */
.about{--W:4688;aspect-ratio:4688/9938;background-color:transparent;background-image:url(../assets/img/about-art-a.webp)}

/* ================================================================ PAGE BACKGROUNDS
   A fixed picture at the very back, behind the page art (whose empty black areas
   are see-through). site.js fades it in once the element named in data-from
   comes into view. */
.page-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0;will-change:opacity;
  background:#000 center/cover no-repeat}
.page-bg:not([data-from]){opacity:1}

/* ================================================================ NEXT LINK (all pages) */
.ab .nextlink{display:inline-block;transition:text-shadow .2s ease}
.ab .nextlink svg{display:inline-block;width:.807em;height:.61em;margin-left:.227em;vertical-align:-.02em;overflow:visible;transition:transform .25s ease}
.ab .nextlink:hover,.ab .nextlink:focus-visible{text-shadow:0 0 4px #fff,0 0 14px rgba(255,255,255,.6)}
.ab .nextlink:hover svg,.ab .nextlink:focus-visible svg{transform:translateX(.12em)}
.ab .t-next-k{text-transform:uppercase}

/* hello heading (thin display type kept as an image of the model's lettering) */
.about .hello-img{left:calc(2340 * var(--a));top:calc(1085 * var(--a));width:calc(1560 * var(--a))}
.about .hello-img img{width:100%}

/* ================================================================ CLICKABLE AREAS OVER ARTWORK */
.hot{display:block;border-radius:calc(8 * var(--a));transition:box-shadow .2s ease,background .2s ease}
.hot:hover,.hot:focus-visible{background:rgba(255,255,255,.05);box-shadow:0 0 0 calc(4 * var(--a)) rgba(255,255,255,.8),0 0 calc(40 * var(--a)) rgba(255,255,255,.5)}
.ytv{display:block;cursor:pointer;transition:box-shadow .2s ease}
.ytv:hover,.ytv:focus-visible{box-shadow:0 0 0 calc(5 * var(--a)) rgba(255,255,255,.85),0 0 calc(40 * var(--a)) rgba(255,255,255,.45)}
.ytv.is-playing{background:#000}
.ytv iframe{display:block;width:100%;height:100%;border:0}

/* ================================================================ WORK PAGES */
.design{--W:4688;aspect-ratio:4688/11491;background-color:transparent;background-image:url(../assets/img/design-art-a.webp)}
.web{--W:4688;aspect-ratio:4688/9137;background-color:transparent;background-image:url(../assets/img/web-art-a.webp)}
.film{--W:4688;aspect-ratio:4688/11661;background-color:transparent;background-image:url(../assets/img/film-art-a.webp)}
.photo{--W:4688;aspect-ratio:4688/5776;background-color:transparent;background-image:url(../assets/img/photo-art-a.webp)}

.film .watch{left:calc(2820 * var(--a));top:calc(4587 * var(--a));width:calc(574 * var(--a));height:calc(199 * var(--a));
  display:flex;align-items:center;justify-content:center;border:calc(8 * var(--a)) solid rgba(225,225,225,.9);
  font-size:calc(62 * var(--a));letter-spacing:.005em;color:#f2f2f2;transition:box-shadow .2s ease,text-shadow .2s ease,background .2s ease}
.film .watch.learn{left:calc(3437 * var(--a));width:calc(570 * var(--a))}
/* Learn More: shown as in the design but switched off until it has a destination */
.film .watch.off{cursor:default;pointer-events:none}
.film a.watch:hover,.film a.watch:focus-visible{background:rgba(255,255,255,.08);box-shadow:0 0 calc(24 * var(--a)) rgba(255,255,255,.6),inset 0 0 calc(24 * var(--a)) rgba(255,255,255,.2);text-shadow:0 0 6px #fff}

/* ================================================================ REFERENCES */
.refs{--W:4688;aspect-ratio:4688/4536;background-color:transparent;background-image:url(../assets/img/refs-art-a.webp)}
.refs .ref-logo{left:calc(496 * var(--a));width:calc(394 * var(--a));opacity:0}
.refs .name a{color:inherit;transition:text-shadow .2s ease,color .2s ease}
.refs .name a:hover,.refs .name a:focus-visible{color:#ff4a24;text-shadow:0 0 4px rgba(255,90,50,.95),0 0 12px var(--red-glow),0 0 24px rgba(255,50,20,.45)}

/* ================================================================ PRESS */
.press{--W:4688;aspect-ratio:4688/3615;background-color:transparent;background-image:url(../assets/img/press-art-a.webp)}
.press .pbtn{width:calc(476 * var(--a));height:calc(146 * var(--a));display:flex;align-items:center;justify-content:center;
  padding-bottom:calc(30 * var(--a));border:calc(7 * var(--a)) solid #bdbdbd;
  font-size:calc(48.6 * var(--a));letter-spacing:.018em;color:#f2f2f2;transition:box-shadow .2s ease,text-shadow .2s ease,background .2s ease}
.press .pbtn{background:rgba(0,0,0,.18)}
.press a.pbtn:hover,.press a.pbtn:focus-visible{background:rgba(255,255,255,.07);box-shadow:0 0 calc(24 * var(--a)) rgba(255,255,255,.55);text-shadow:0 0 6px #fff}
.press .pbtn.off{cursor:default}

/* ================================================================ CONTACT */
.contact{--W:4688;aspect-ratio:4688/6159;background-color:transparent;background-image:url(../assets/img/contact-art-a.webp)}
.contact .f{left:calc(2682 * var(--a));width:calc(1528 * var(--a));padding:0 calc(66 * var(--a)) calc(28 * var(--a));border:0;background:transparent;
  color:#fff;font:400 calc(52.2 * var(--a))/1.2 var(--font);letter-spacing:-.02em;outline:none;
  transition:box-shadow .2s ease,background .2s ease}
.contact textarea.f{padding-top:calc(34 * var(--a));resize:none}
.contact .f::placeholder{color:#f4f4f4;opacity:1;text-transform:uppercase;letter-spacing:-.06em;word-spacing:.02em}
.contact .f:focus{background:rgba(255,255,255,.08);box-shadow:0 0 0 calc(7 * var(--a)) rgba(255,255,255,.95),0 0 calc(30 * var(--a)) rgba(255,255,255,.45)}
.contact .f:focus::placeholder{opacity:.45}
.contact .send{left:calc(3830 * var(--a));top:calc(2715 * var(--a));width:calc(380 * var(--a));height:calc(120 * var(--a));
  border:calc(6 * var(--a)) solid rgba(235,235,235,.9);background:rgba(0,0,0,.35);color:#fff;
  font:600 calc(44 * var(--a))/1 var(--font);letter-spacing:.2em;text-transform:uppercase;transition:box-shadow .2s ease,text-shadow .2s ease,background .2s ease}
.contact .send:hover,.contact .send:focus-visible{background:rgba(255,255,255,.12);box-shadow:0 0 calc(30 * var(--a)) rgba(255,255,255,.6);text-shadow:0 0 6px #fff}
.contact .send:disabled{opacity:.6;cursor:wait}
.contact .status{left:calc(2682 * var(--a));top:calc(2730 * var(--a));width:calc(1120 * var(--a));font-size:calc(44 * var(--a));line-height:1.25;color:#fff;
  text-shadow:0 0 3px #000,0 0 10px #000;min-height:1em}

.film .t-vard .jl{display:block;white-space:nowrap;text-align:justify;text-align-last:justify}
.film .t-vard .jl.last{text-align-last:left}

/* Embedded YouTube players */
.yt-embed{display:block;border:0;background:#000}
.ribbon{pointer-events:none;z-index:2}

/* Instagram reels embedded in the phone screens (Instagram's embed code, scaled to fit by site.js) */
.ig-group{overflow:visible}
.ig{position:absolute;overflow:hidden;background:#fff;border-radius:0 0 calc(40 * var(--a)) calc(40 * var(--a))}
.ig-inner{position:absolute;left:0;top:0;width:400px;transform-origin:0 0;background:#fff}
.ig.ig-off{background:transparent}.ig.ig-off .ig-inner{display:none}
.ig-inner .instagram-media{margin:0!important;min-width:0!important}
.ig-inner a{display:block;padding:300px 30px 0;font:600 38px/1.3 Helvetica,Arial,sans-serif;color:#3897f0;text-align:center}
.ig-open{position:absolute;inset:0;z-index:2;border-radius:inherit;transition:box-shadow .2s ease}
.ig-open:hover,.ig-open:focus-visible{box-shadow:inset 0 0 0 3px rgba(255,255,255,.9),0 0 18px rgba(255,255,255,.6)}

/* Local preview (opened from a file): videos become links to YouTube */
.yt-fallback img{display:none}

/* Photography: photos sit on their own tiles above the see-through page art */
.ab .ph{overflow:hidden}
.ab .ph>img{width:100%;height:100%;object-fit:cover;display:block}