/* One glass material for the fixed navigation and project action. */
.glass-surface,#tower-navigation .glass-surface{--glass-fill:linear-gradient(155deg,#ffffff72,#d9f0ff36 42%,#a9d3eb50);position:relative;isolation:isolate;border:1px solid #ffffffa8;border-radius:999px;color:#102934;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:inset 0 2px 2px #ffffffb5,inset 0 -2px 4px #e3f5ff70,0 8px 20px #193b5726,0 2px 4px #21435a1c;font-size:13px;font-weight:500;}
.glass-surface:before{content:'';position:absolute;inset:2px;border:1px solid #ffffff52;border-bottom-color:#ffffff20;border-radius:inherit;pointer-events:none;z-index:-1;background:var(--glass-fill);backdrop-filter:blur(13px) saturate(1.3);-webkit-backdrop-filter:blur(13px) saturate(1.3);clip-path:inset(0 round 999px);}
.glass-surface:hover,#tower-navigation .glass-surface:hover{--glass-fill:linear-gradient(155deg,#ffffff8c,#e0f4ff48 44%,#b7dff267);background:transparent;}
.glass-surface:focus-visible{outline:2px solid currentColor;outline-offset:4px;}
body[data-theme=night] .glass-surface,body[data-theme=night] #tower-navigation .glass-surface{--glass-fill:linear-gradient(145deg,#f0f8ff32,#8cc6e924 48%,#28496263);color:#f4faff;border-color:#edf7ff83;background:transparent;box-shadow:inset 0 2px 2px #f3fbff85,inset 0 -2px 4px #c8e8ff38,0 8px 24px #0005;}
#site-navigation{position:fixed;z-index:30;top:max(18px,env(safe-area-inset-top));left:max(18px,env(safe-area-inset-left));pointer-events:none;}
#site-menu-toggle{width:var(--menu-size,50px);height:var(--menu-size,50px);padding:0;display:grid;place-items:center;pointer-events:auto;transition:background .25s,opacity .3s;}
#site-menu-toggle path{transform-origin:12px 12px;transition:transform .32s ease,opacity .20s ease;}
body[data-menu-open=true] .menu-line-top{transform:rotate(45deg) translateY(5px);}
body[data-menu-open=true] .menu-line-middle{opacity:0;}
body[data-menu-open=true] .menu-line-bottom{transform:rotate(-45deg) translateY(-5px);}
/* The scroll container includes the full shadow falloff. Negative margins keep
   the pills aligned with the toggle without clipping them to a square box. */
#tower-navigation{--menu-width:220px;position:absolute;top:calc(var(--menu-size,50px) + 14px);left:0;display:flex;flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:10px;width:calc(var(--menu-width) + 64px);max-width:calc(100vw + 16px);max-height:calc(100dvh - 68px - env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;padding:32px;margin:-32px;transform:translateY(-9px) scaleY(.82);transform-origin:32px 32px;opacity:0;visibility:hidden;pointer-events:none;transition:transform .32s cubic-bezier(.45,0,.2,1),opacity .22s ease,visibility 0s .32s;}
#tower-navigation [data-page]{min-height:44px;text-align:left;padding:13px 20px;letter-spacing:.025em;font-size:11px;pointer-events:auto;}
#tower-navigation [data-page][aria-current=page]:after{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;position:absolute;right:19px;top:calc(50% - 2.5px);}
body[data-menu-open=true] #tower-navigation{opacity:1;visibility:visible;transform:none;transition-delay:0s;}
#menu-dismiss{position:fixed;inset:0;z-index:20;background:transparent;touch-action:none;}
#glass-page,#case-page,.work-topline,.work-caption{transition:opacity .3s ease,transform .32s ease;}
body[data-menu-open=true] #billboard-action{opacity:0!important;pointer-events:none!important;}
body:not([data-loader=done]):not([data-loader=error]) #site-navigation{opacity:0;pointer-events:none;}
.work-topline{left:84px;top:24px;}
#case-action{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:48px;padding:12px 18px;margin:0 auto 20px;pointer-events:auto;}
#work-ui.is-travelling #case-action{pointer-events:none;}
@media(min-width:621px) and (min-height:521px){.work-caption{bottom:max(16px,calc(8vh - 42px));}}
@media(max-width:620px){.work-caption{bottom:clamp(24px,calc(38vh - 192px),12vh);}.work-topline{left:80px;top:23px;}#work-back{font-size:8px;padding:10px 12px;}#case-action{margin-bottom:18px;}}
@media(max-height:520px){#site-navigation{top:12px;}#site-menu-toggle{width:var(--menu-size,44px);height:var(--menu-size,44px);}#tower-navigation{top:calc(var(--menu-size,44px) + 10px);gap:7px;width:168px;}#tower-navigation [data-page]{min-height:38px;padding:11px 18px;font-size:10px;}.work-caption{bottom:14px;}#case-action{min-height:36px;padding:8px 15px;margin-bottom:10px;font-size:12px;}.work-title-row{grid-template-columns:40px minmax(0,1fr) 40px;gap:12px;}.project-arrow{width:40px;height:40px;}#work-title{font-size:24px;}#work-counter{margin-bottom:4px;}}
@media(prefers-reduced-motion:reduce){#tower-navigation,#site-menu-toggle,#site-menu-toggle path,#glass-page,#case-page,.work-topline,.work-caption{transition:none;}}

/* The hamburger shares the title/theme/back toolbar, including on small phones. */
.page-topbar,.case-toolbar{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 24px;}
.menu-slot{display:block;width:44px;height:44px;}
#page-label,#case-label{min-width:0;line-height:1.35;overflow-wrap:normal;}
.page-tools,.case-toolbar>div{flex-wrap:nowrap;}
#close-page,#close-case{white-space:nowrap;}
#site-navigation[data-placement=reader] #tower-navigation{top:calc(var(--menu-size) + 18px);}
@media(max-width:620px){.page-topbar,.case-toolbar{grid-template-columns:40px minmax(0,1fr) auto;gap:10px;padding:12px 14px;}.menu-slot{width:40px;height:40px;}#page-label,#case-label{font-size:8px;letter-spacing:.06em;}.page-tools{gap:3px;}.page-tools .theme-toggle,.case-toolbar .theme-toggle{width:30px;height:34px;min-width:30px;}#close-page,#close-case{font-size:8px;padding:9px 10px;}}
@media(max-width:360px){.page-topbar,.case-toolbar{gap:7px;padding:10px 11px;}#page-label,#case-label{letter-spacing:0;font-size:8px;}#close-page,#close-case{padding:9px 8px;}}
#site-navigation[data-placement=reader] #site-menu-toggle{color:#17292b;}

/* Original billboard letterforms, outlined to render identically on every device. */
#tower-navigation .glass-surface,body[data-theme=night] #tower-navigation .glass-surface{--menu-glass-fill:linear-gradient(155deg,#ffffff64,#d9f0ff24 42%,#91bed442);color:#fff;display:flex;align-items:center;flex-shrink:0;min-height:54px;padding:9px 23px;border-color:#ffffffb0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:inset 0 2px 2px #ffffffa8,inset 0 -2px 4px #e3f5ff60,0 6px 16px #193b5730,0 2px 4px #21435a24;text-shadow:none;}
/* Clip only the refracted fill to the pill. Its outer shadow stays unclipped;
   the browser cannot paint the backdrop blur into a rectangular layer. */
#tower-navigation .glass-surface::before{inset:2px;z-index:-1;background:var(--menu-glass-fill);backdrop-filter:blur(14px) saturate(1.25);-webkit-backdrop-filter:blur(14px) saturate(1.25);clip-path:inset(0 round 999px);}
#tower-navigation .glass-surface:hover,body[data-theme=night] #tower-navigation .glass-surface:hover{--menu-glass-fill:linear-gradient(155deg,#ffffff80,#e0f4ff3d 44%,#b7dff25a);background:transparent;border-color:#fff;}
body[data-theme=night] #tower-navigation .glass-surface{--menu-glass-fill:linear-gradient(155deg,#f0f8ff38,#b2d9f01a 42%,#8ab5cf30);}
#tower-navigation .glass-surface:focus-visible{outline:2px solid #fff;outline-offset:2px;}
#tower-navigation .menu-label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
#tower-navigation .menu-lettering{display:block;flex:none;max-width:calc(100% - 8px);overflow:visible;filter:drop-shadow(0 1px 1.5px #173c5990) drop-shadow(0 0 .5px #173c5970);}
#tower-navigation [data-page=about] .menu-lettering{width:145px;height:36px;}
#tower-navigation [data-page=work] .menu-lettering{width:125px;height:35px;}
#tower-navigation [data-page=services] .menu-lettering{width:116px;height:30px;}
#tower-navigation [data-page=pricing] .menu-lettering{width:138px;height:40px;transform:translateY(3px);}
#tower-navigation [data-page=contact] .menu-lettering{width:146px;height:25px;}
@media(max-height:520px){#tower-navigation{--menu-width:200px;width:calc(var(--menu-width) + 64px);}#tower-navigation .glass-surface,body[data-theme=night] #tower-navigation .glass-surface{min-height:40px;padding:6px 18px;}#tower-navigation .menu-lettering{max-height:27px;}}

/* Quiet scene guidance, distinct from navigation and hidden in reading views. */
#tower-hint{position:fixed;z-index:3;left:50%;bottom:max(22px,env(safe-area-inset-bottom));transform:translateX(-50%);margin:0;display:flex;align-items:center;gap:12px;padding:9px 15px;border:1px solid #ffffff35;border-radius:999px;background:#16314712;color:#fff;font-size:11px;line-height:1.3;letter-spacing:.035em;white-space:nowrap;text-shadow:0 1px 3px #173c5980;backdrop-filter:blur(8px);pointer-events:none;opacity:0;visibility:hidden;transition:opacity .3s ease;}
body[data-loader=done][data-state=idle]:not([data-menu-open=true]) #tower-hint{opacity:1;visibility:visible;}
#tower-hint .hint-mobile{display:none;}
.hint-separator{opacity:.6;}
@media(max-width:620px),(pointer:coarse){#tower-hint .hint-desktop{display:none;}#tower-hint .hint-mobile{display:inline;}#tower-hint{font-size:10px;bottom:max(20px,env(safe-area-inset-bottom));}}
@media(prefers-reduced-motion:reduce){#tower-hint{transition:none;}}

/* Keep the supplied mark centred on the viewport, independent of toolbar widths. */
#site-brand{position:fixed;z-index:31;top:max(18px,env(safe-area-inset-top));left:50%;width:var(--brand-size,50px);height:var(--brand-size,50px);transform:translateX(-50%);pointer-events:auto;cursor:pointer;user-select:none;opacity:1;transition:opacity .3s ease;}
#site-brand:focus-visible{outline:2px solid #f2a1ca;outline-offset:5px;border-radius:5px;}
#site-brand img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 1px 2px #162e4b24);}
.view-controls{top:max(18px,env(safe-area-inset-top));right:max(18px,env(safe-area-inset-right));width:50px;min-height:50px;padding:0;}
.view-controls>.theme-toggle{top:3px;right:3px;}
.work-topline{top:max(21px,calc(env(safe-area-inset-top) + 3px));right:max(21px,calc(env(safe-area-inset-right) + 3px));}
.work-topline>.theme-toggle{margin-left:auto;}
body:not([data-loader=done]):not([data-loader=error]) #site-brand{opacity:0;pointer-events:none;}
@media(max-height:520px){#site-brand{top:12px;width:var(--brand-size,44px);height:var(--brand-size,44px);}}
@media(max-width:620px){
 /* A second, compact row keeps page labels and return actions clear of the mark. */
 .page-topbar,.case-toolbar{grid-template-columns:40px minmax(0,1fr) minmax(0,1fr) 40px;grid-template-rows:40px auto;row-gap:9px;}
 .page-topbar .menu-slot,.case-toolbar .menu-slot{grid-column:1;grid-row:1;}
 .page-tools,.case-toolbar>div{display:contents;}
 .page-tools .theme-toggle,.case-toolbar .theme-toggle{grid-column:4;grid-row:1;justify-self:end;}
 #page-label,#case-label{grid-column:1/3;grid-row:2;}
 #close-page,#close-case{grid-column:3/5;grid-row:2;justify-self:end;}
 .work-topline #work-back{position:fixed;left:max(18px,env(safe-area-inset-left));top:max(80px,calc(env(safe-area-inset-top) + 62px));}
}
@media(prefers-reduced-motion:reduce){#site-brand{transition:none;}}

/* One desktop header baseline in the scene and in both reading toolbars. */
@media(min-width:621px){
 #site-brand{top:max(34px,env(safe-area-inset-top));width:var(--brand-size,50px);height:var(--brand-size,50px);}
 #site-navigation[data-placement=scene],.view-controls{top:max(34px,env(safe-area-inset-top));}
 .work-topline{top:max(37px,calc(env(safe-area-inset-top) + 3px));}
}

/* Shared sound control sits beside the day/night control in every scene header. */
.sound-toggle{display:grid;place-items:center;flex:none;width:40px;height:40px;min-width:40px;padding:0;border:0;border-radius:50%;background:transparent;color:#13292d;cursor:pointer;}
.sound-toggle[aria-pressed=true]{background:transparent;color:#13292d;}
.sound-toggle:hover,.sound-toggle[aria-pressed=true]:hover{background:#ffffff26;}
.sound-toggle:focus-visible{outline:2px solid currentColor;outline-offset:3px;}
.sound-toggle .sound-waves{display:none;}
.sound-toggle[aria-pressed=true] .sound-waves{display:block;}
.sound-toggle[aria-pressed=true] .sound-muted{display:none;}
.sound-toggle[data-loading=true]{opacity:.5;}
body[data-theme=night] .sound-toggle,body[data-theme=night] .sound-toggle[aria-pressed=true]{color:#fff;}
.view-controls{width:94px;}
.view-controls>.sound-toggle{position:absolute;top:5px;right:50px;}
.work-topline>.sound-toggle{margin-left:auto;}
.work-topline>.theme-toggle{margin-left:3px;}
@media(max-width:620px){
 .page-topbar,.case-toolbar{grid-template-columns:40px minmax(0,1fr) minmax(0,1fr) 76px;}
 .page-tools>.sound-toggle,.case-toolbar .sound-toggle{grid-column:4;grid-row:1;justify-self:start;width:34px;min-width:34px;height:34px;}
}