/* A single surface carries the camera from ocean into film. */
.journey{position:relative;background:#02090b;isolation:isolate}
.journey #ocean-world{position:sticky;top:0;inset-inline:0;width:100%;height:100svh;margin-bottom:-100svh;z-index:0;pointer-events:none;will-change:opacity,transform}
#arrival{position:relative;z-index:2;background:transparent!important}
#story{z-index:1;background:transparent!important;height:900svh;margin-top:-1px}
#stage{background:transparent!important}
#story-art{opacity:0;will-change:opacity}
#story-art .film-poster{height:116.2%;top:-9.7%;object-fit:cover}
#film-canvas{transition:none}
#story-art:after{background:linear-gradient(180deg,#02090b18,transparent 35%,#02090b38 65%,#02090bf5)}
#story .cap{bottom:22%;left:8%;right:12%;max-width:1050px}
#story .cap p{font-size:clamp(38px,4.5vw,78px);line-height:1.04;max-width:24ch;letter-spacing:-.035em;text-wrap:balance;color:#e5f3eb;text-shadow:0 2px 24px #0008}
#story .cap em{font:inherit;color:#a3eacf;text-shadow:0 0 35px #64dba22b}
.story-navigation{position:absolute;inset:0;pointer-events:none;z-index:7}
.story-progress{position:absolute;left:8%;bottom:7%;width:150px}
.story-chapter{font:10px/1.5 var(--font-body);letter-spacing:.24em;color:#a5caba}
.story-track{display:flex;gap:7px;margin-top:15px}.story-track>span{height:2px;flex:1;background:#c1e9dc22;overflow:hidden}.story-track i{display:block;height:100%;background:#a4f4cf;transform:scaleX(0);transform-origin:left;box-shadow:0 0 8px #78f9bf}
.story-skip{pointer-events:auto;position:absolute;right:24px;bottom:52px;display:flex;align-items:center;gap:16px;border:0;padding:5px 5px 5px 20px;border-radius:50px;background:#09221d70;backdrop-filter:blur(12px);font:12px var(--font-body);color:#d1ebdf;transition:background .2s,box-shadow .2s}
.skip-arrow{display:grid;place-items:center;width:42px;height:42px;border:1px solid #a6e5cd40;border-radius:50%;font-size:20px;transition:transform .25s}
.story-skip:hover,.story-skip:focus-visible{background:#153c32a8;box-shadow:0 0 25px #62e9b22b}.story-skip:hover .skip-arrow{transform:rotate(45deg)}
.film-status{bottom:13%;font-size:11px}
/* The signature has its own breath after the film ends. */
#signature{position:relative;min-height:85svh;display:grid;place-items:center;padding:90px 24px;background:radial-gradient(ellipse at 50% 50%,#11382c66,transparent 57%),#02090b;overflow:hidden;text-align:center}
#signature:before{content:'';position:absolute;width:min(68vw,620px);aspect-ratio:1;border:1px solid #a0e1bd14;border-radius:50%;box-shadow:0 0 90px #5ddd9f08,inset 0 0 90px #5ddd9f08;pointer-events:none}
.signature-inner{position:relative}.signature-kicker{font:10px/1.5 var(--font-body);text-transform:uppercase;letter-spacing:.24em;color:#8bb7a3}
#signature #mark{position:relative;left:auto;top:auto;transform:none;opacity:1;pointer-events:auto;margin:30px 0}
#signature #logo{background:transparent!important;border:0;border-radius:0;box-shadow:none;width:100px;height:100px;margin:0 auto 24px;filter:drop-shadow(0 0 24px #68e6a826)}
#signature #mark h2{font:clamp(55px,8vw,110px)/1 var(--font-display);color:#d8eee2;letter-spacing:-.04em}
#signature #mark .tag{opacity:1;transform:none;font:24px/1.5 var(--font-display);color:#a4cbb7}
.signature-link{display:inline-flex;gap:30px;align-items:center;padding:15px 24px;text-decoration:none;color:#c8e7d6;border:1px solid #a5e0bd30;border-radius:40px;font:12px var(--font-body);transition:box-shadow .3s}.signature-link:hover{box-shadow:0 0 30px #6befb62b}
/* Galleries retain a 16:9 canvas, with controls outside the artwork. */
.wpage .media.deck{overflow:visible;margin-bottom:84px;touch-action:pan-y}
.wpage .media.deck>img{border-radius:11px;transition:opacity .25s ease;user-select:none;-webkit-user-drag:none}
.deck-navigation{position:absolute;top:calc(100% + 14px);left:0;right:0;display:flex;align-items:center;gap:18px;height:44px}
.media.deck .deck-navigation .dprev,.media.deck .deck-navigation .dnext{position:static;transform:none;opacity:1;width:44px;height:44px;flex:none;border-radius:50%;color:#c5f0db;background:#10312855;border:1px solid #9ce5c535;font-size:22px;transition:background .2s,box-shadow .2s}
.media.deck .deck-navigation button:hover{background:#20544180;box-shadow:0 0 22px #66e5a92b}
.media.deck .deck-navigation .dcount{position:static;flex:none;background:none;font:11px var(--font-body);letter-spacing:.1em;padding:0;color:#a6c7b8}
.deck-track{display:flex;flex:1;gap:5px;align-items:center;height:44px}.deck-track button{position:relative;flex:1;border:0;background:transparent;min-width:0!important;min-height:44px;padding:0;cursor:pointer}.deck-track button:before{content:'';display:block;height:2px;background:#99cbb12b;transition:height .2s,background .2s,box-shadow .2s}.deck-track button[aria-pressed=true]:before{height:3px;background:#a7f0cd;box-shadow:0 0 12px #76eab85c}.deck-track button:hover:before{background:#d2f7e4;height:4px}
.deck-hint{position:absolute;top:calc(100% + 64px);left:0;font:10px var(--font-body);letter-spacing:.12em;color:#84ad98;text-transform:uppercase}
.work-invitation{font:12px/1.6 var(--font-body);color:#8bb3a0;letter-spacing:.07em;margin-top:10px}
.work-compass{position:fixed;right:25px;bottom:22px;z-index:12;display:flex;align-items:center;gap:14px;padding:10px 16px;border:1px solid #a5e8c533;border-radius:50px;background:#061812e8;box-shadow:0 7px 35px #0005;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .25s,transform .25s,visibility .25s;font:11px var(--font-body);color:#a4d0b8}.work-compass.is-visible{opacity:1;visibility:visible;transform:none}.work-compass button{background:none;border:0;color:#cdeada;font:11px var(--font-body);cursor:pointer;min-height:30px}.compass-track{width:45px;height:2px;background:#a3d7b529}.compass-track i{display:block;height:100%;background:#a5edc6;transform:scaleX(0);transform-origin:left}
/* Use a separate rim layer instead of filtering full-resolution media. */
.wpage.is-settled .media{animation:none!important}
.wpage .media:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;border:1px solid #a3f6ca66;box-shadow:0 0 8px #a4fac833,0 0 28px #58dbae44;opacity:0}
.wpage.is-settled .media:after{animation:soft-landing 1.2s ease-out both}
@keyframes soft-landing{0%{opacity:0}25%{opacity:1}100%{opacity:.15}}
#site-loader{position:fixed;inset:0;z-index:999;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#020b0b;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .5s,visibility .5s}
.is-loading #site-loader{opacity:1;visibility:visible;pointer-events:auto}
#site-loader img{width:80px;height:80px;filter:drop-shadow(0 0 25px #63dca52b)}#site-loader p{font:28px/1.4 var(--font-display);margin:22px 0;color:#c2ddcd}.loader-line{width:130px;height:1px;background:linear-gradient(90deg,transparent,#89dfb9,transparent);animation:paint-line 1.5s ease-in-out infinite}#site-loader button{margin-top:32px;background:none;border:0;color:#8cae9b;font:11px var(--font-body);padding:12px;cursor:pointer}
@keyframes paint-line{50%{transform:scaleX(.35);opacity:.3}}
@media(max-width:700px){#story{height:920svh}.journey #ocean-world{min-height:620px}#story .cap{left:7%;right:7%;bottom:21%}#story .cap p{font-size:clamp(32px,8.8vw,45px);max-width:22ch}#story-art .film-poster{top:10%;height:80%;object-fit:cover}.story-progress{left:7%;bottom:7%;width:90px}.story-chapter{font-size:8px;letter-spacing:.14em}.story-skip{right:16px;bottom:40px;font-size:10px;gap:9px;padding-left:14px}.skip-arrow{width:35px;height:35px;font-size:18px}#signature{min-height:72svh;padding:65px 20px}#signature #logo{width:78px;height:78px}.signature-kicker{font-size:8px}.deck-navigation{gap:10px}.deck-hint{font-size:9px}.deck-track{gap:4px}.work-compass{right:12px;bottom:12px;padding:5px 12px;gap:10px}.work-compass button{font-size:10px}.work-current{font-size:10px}.compass-track{width:28px}}
@media(prefers-reduced-motion:reduce){.journey #ocean-world{position:absolute;margin:0;transform:none!important;opacity:1!important}#story{display:none!important}.signature-inner{opacity:1!important;transform:none!important}.loader-line,.wpage.is-settled .media:after{animation:none}#site-loader,.work-compass{transition:none}}
.journey .arrival-shade{background:linear-gradient(180deg,#01081135,transparent 55%)}
#story-art{mask-image:linear-gradient(to bottom,transparent,#000 13%,#000 94%,transparent)}
#signature #logo{opacity:1!important;transform:none!important;display:block}
/* Cyan surface, extended descent and readable medallions. */
.ocean-passage{height:150svh;position:relative;pointer-events:none}
.arrival-choices a:hover .choice-arrow,.arrival-choices a:focus-visible .choice-arrow{background:transparent!important;color:#d9fbff!important;text-shadow:0 0 8px #6cecff,0 0 22px #31cfff;border:0!important}
nav .mark img,.footer-mark img,#site-loader img{background:white;border-radius:50%;padding:5px;object-fit:contain}
#signature #logo{background:white!important;border-radius:50%;padding:14px;box-sizing:content-box;filter:none}
#signature{background:radial-gradient(ellipse at center,#10313c66,transparent 60%),#02090b}
#about .seal{border:1px solid #8ed9e330;border-radius:8px;transition:border-color .25s,box-shadow .25s,background .25s}
#about .seal:hover,#about .seal:focus-visible{border-color:#a2f5ffbb;background:#112a30;box-shadow:0 0 12px #63e4ff45,0 0 35px #3fcfff35}
.seal-list{gap:12px}
.footer-links{border-top:1px solid #7fc7bb2e;padding-top:24px;margin-top:10px}
.footer-meta{border-top:0;padding-top:20px}
/* Reserve a readable final frame before the next sheet enters. */
.work-hold{height:170svh;pointer-events:none}
.wpage{padding:26px clamp(20px,4vw,64px) 24px!important}
.wpage .inner{max-width:min(1250px,calc((100svh - 290px)*1.77778));}
.wpage .whead{gap:15px;padding-bottom:12px;margin-bottom:14px;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr)) 36px}
.wpage .whead h3{font-size:clamp(24px,2.3vw,36px);line-height:1.08;max-width:none;min-width:0;text-wrap:balance}
.wpage .whead h3 .client{font-size:9px;margin-bottom:7px}
.wpage .wmeta{padding-left:10px}.wpage .wmeta b{font-size:8px}.wpage .wmeta span{font-size:10px;line-height:1.4}
.wpage .wnum{width:32px;height:32px;font-size:11px}
.wpage .wfoot{margin-top:12px}.wpage .wfoot p{font-size:11px;line-height:1.5}.wpage .stat{font-size:10px;padding:6px 10px}
.deck-navigation,.deck-hint{z-index:5;pointer-events:auto}
.wpage .media.deck>img:not(.on){pointer-events:none}
@media(max-width:900px){.wpage .inner{max-width:min(100%,calc((100svh - 265px)*1.77778))}.wpage .whead{grid-template-columns:1fr!important}.wpage .whead h3{font-size:28px}.work-hold{height:140svh}}
@media(max-width:600px){.wpage{padding-top:75px!important}.wpage .inner{max-width:100%}.wpage .whead h3{font-size:28px;line-height:1.12}.wpage .wfoot p{font-size:12px}.wpage .wfoot{gap:9px}.ocean-passage{height:130svh}}
@media(prefers-reduced-motion:reduce){.ocean-passage,.work-hold{display:none}.wpage .inner{max-width:1250px}}

/* Quiet editorial indices, echoing the supplied oversized-number reference. */
.wpage .whead{position:relative;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));padding-right:55px}
.wpage .wnum{display:block!important;position:absolute;right:0;top:-16px;width:auto;height:auto;border:0;border-radius:0;font:700 clamp(70px,8vw,112px)/1 var(--font-body);letter-spacing:-.08em;color:#a5e8ef;opacity:.09;pointer-events:none}
.wpage .wmeta{min-width:0}
/* An open, understated enquiry layout rather than a boxed form. */
#contact{background:#040c12!important}
#contact .brief-panel{padding:8px 0 0;border:0;border-radius:0!important;background:transparent!important;box-shadow:none!important}
#contact .brief-panel:before{display:none}
#kform label{font-size:10px;letter-spacing:.09em;color:#93b4b8}
#kform input,#kform select,#kform textarea{border-radius:0;background:transparent;padding:10px 0;border-bottom:1px solid #8ebcc333;font-size:15px}
#kform input:focus,#kform select:focus,#kform textarea:focus{background:transparent;border-color:#97eaf5;box-shadow:0 7px 15px -13px #75eaff;outline:none}
#kform select option{background:#07141a;color:#d8ece1}
#kform .kfields{gap:26px}#kform textarea{min-height:95px}
#contact .cta{width:auto;justify-self:start;background:transparent;border:1px solid #91dbe259;color:#d7f2f5;min-height:48px;padding:13px 24px;font-size:13px}
#contact .cta:hover{background:#8eeaff0b;box-shadow:0 0 24px #72dff526;border-color:#a9f3ff}
#contact .alt{color:#7d989d;font-size:11px;margin-top:22px}.form-note{font-size:10px;line-height:1.7;color:#829fa4}
@media(max-width:900px){.wpage .whead{padding-right:48px}.wpage .wnum{font-size:78px;top:-10px}}
@media(max-width:600px){#contact .brief-panel{padding:0!important}.wpage .wnum{font-size:68px;top:0}#contact .cta{width:100%}}