/* Continuous camera opening: the last film frame and the portfolio share one composition. */
body.view-showcase{overflow:hidden}
.home-view,.camera-journey{height:100svh;min-height:0;position:relative}
.camera-sticky{position:relative;top:auto;height:100svh;min-height:0}
.camera-visual{transform-origin:center center}
.camera-visual img,.camera-visual video{object-fit:contain}
.camera-sticky::after{display:none}
.camera-brand{display:none!important}
.journey-lettering{position:absolute;z-index:7;left:3.5vw;top:calc(76px + 30px);width:clamp(405px,32vw,640px);height:auto;max-height:none;object-fit:contain;object-position:left top;filter:drop-shadow(0 4px 20px #000b);pointer-events:none}
.journey-slogan{position:absolute;z-index:7;right:3.5vw;bottom:80px;max-width:560px;margin:0;color:var(--bone);font-family:'Arial Narrow','Helvetica Neue Condensed',Impact,sans-serif;font-size:clamp(46px,4.7vw,76px);font-stretch:condensed;font-weight:900;line-height:.9;letter-spacing:-.045em;text-transform:uppercase;text-align:right;text-shadow:0 4px 20px #000c;pointer-events:none}
.camera-scroll-cue{border:0;padding:4px 8px;background:transparent;cursor:pointer}
.camera-scroll-cue:focus-visible{outline:1px solid var(--ember);outline-offset:5px}

/* The isolated symbol leads the header; the larger lettering belongs to the stage. */
.site-header{height:76px;padding:0 clamp(24px,3vw,60px);gap:clamp(16px,2.5vw,70px);background:rgba(3,5,6,.9)}
.site-header .wordmark{display:flex;align-items:center;justify-content:flex-start;flex:0 0 54px;width:54px;min-width:0;max-width:54px;height:100%}
.site-header .wordmark .header-logo{display:block;width:54px;max-height:58px;object-fit:contain;object-position:left center}
.main-nav{flex:1;min-width:0;display:flex;justify-content:space-between;gap:clamp(7px,.7vw,24px);margin-left:0}
.main-nav a{font-size:clamp(9px,.65vw,12px);letter-spacing:.095em}
.main-nav a[data-service-nav][aria-current=page]{color:var(--ember)}
@media(max-width:1150px) and (min-width:761px){.main-nav .desktop-service{display:none}.main-nav{max-width:660px;margin-left:auto}.main-nav a{font-size:10px;letter-spacing:.14em}}

@media(max-width:760px){
  body .site-header{height:62px;padding:0 12px;display:flex;flex-direction:row;align-items:center;gap:clamp(17px,calc((100vw - 239px)/4),130px)}
  body.view-showcase .site-header .wordmark,body .site-header .wordmark{display:flex;flex:0 0 38px;width:38px;height:100%;max-width:38px;align-self:center}
  body .site-header .wordmark .header-logo{display:block;width:38px;max-height:44px;object-fit:contain;object-position:left center}
  body .main-nav{position:static;flex:1;min-width:0;width:auto;height:100%;margin:0;padding:0;display:flex;align-items:center;justify-content:space-between;gap:2px;border:0;background:transparent;backdrop-filter:none}
  body .main-nav a{font-size:clamp(7.8px,2.2vw,9px);letter-spacing:.01em;white-space:nowrap}
  body .main-nav a[aria-current=page]::after{bottom:-7px}
  body .journey-lettering{display:block;left:18px;top:78px;width:min(78vw,320px);max-height:none}
  body .journey-slogan{right:18px;bottom:calc(99px + env(safe-area-inset-bottom));max-width:260px;font-size:clamp(29px,8.2vw,40px)}
}
@media(max-width:760px) and (max-height:700px){body .journey-slogan{bottom:calc(122px + env(safe-area-inset-bottom));font-size:28px}}
@media(max-width:360px){body .site-header{gap:calc((100vw - 225px)/4)}body .main-nav a{font-size:7.8px}}

/* The playback overlay dissolves onto the same rear-camera frame, without a second scroll section. */
.showcase{position:fixed;inset:0;z-index:10;display:block;width:100vw;height:100svh;min-height:0;margin:0;overflow:hidden;background:radial-gradient(ellipse 70% 80% at 48% 52%,#111719,#030506 82%);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .5s ease,visibility 0s linear .5s}
body.is-in-showcase .showcase{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .5s ease,visibility 0s}
body.is-replaying .showcase{transition:none!important}
.showcase-device{position:absolute;inset:auto;left:calc(50% - 1.25vw);top:calc(50% - 1.25svh);width:min(97.4vw,173.16svh);height:auto;aspect-ratio:16/9;transform:translate(-50%,-50%);overflow:hidden;filter:none;-webkit-mask-image:none;mask-image:none}
.showcase-camera-body{position:absolute;inset:0;left:0;top:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;display:block}
.showcase-screen{left:31.55%;top:37.55%;width:29.15%;height:32.55%;border-radius:2px;box-shadow:0 0 0 2px rgba(0,0,0,.92),inset 0 0 14px #0008}
.showcase-copy{left:3.5vw;right:3.5vw;bottom:64px;width:auto;max-width:none;column-gap:25px}
.showcase-top,.showcase-bottom{display:contents}
.showcase-copy .showcase-eyebrow{margin-bottom:6px;font-size:9px}
.showcase-copy h1,.showcase-copy h1.is-long{font-size:clamp(31px,3.8vw,62px);line-height:.94;max-width:73vw;margin-bottom:4px}
.showcase-copy h1.is-long{font-size:clamp(29px,3.35vw,54px)}
.showcase-project{font-size:clamp(15px,1.4vw,22px)}
.showcase-actions .primary-action{min-width:150px;padding:12px 15px}
.showcase-controls{left:3.5vw;right:3.5vw;bottom:18px}
@media(min-width:761px){
  .showcase-device{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent);mask-composite:intersect}
  .journey-lettering,.journey-slogan{transition:opacity .12s linear}
  body.is-in-showcase .journey-lettering,body.is-in-showcase .journey-slogan{opacity:0}
  .showcase-panes{opacity:0;transition:opacity .2s ease .32s}
  body.is-in-showcase .showcase-panes{opacity:1}
}
@media(max-height:700px) and (min-width:761px){.showcase-copy{bottom:55px}.showcase-copy h1,.showcase-copy h1.is-long{font-size:clamp(28px,3.35vw,54px)}}
@media(max-height:760px) and (min-width:761px){.journey-lettering{top:88px}}
@media(prefers-reduced-motion:reduce){.showcase{transition:none}.journey-slogan{bottom:35px}}