:root{--mast-height:79px}
.mast[data-tone]{
  --glass-text:#122b40;
  --glass-surface:rgb(248 250 251 / .77);
  --glass-stroke:rgb(17 56 84 / .20);
  --glass-accent:#174f79;
  color:var(--glass-text);background:var(--glass-surface);
  border-color:var(--glass-stroke);backdrop-filter:blur(20px) saturate(132%);
  margin-block-end:calc(-1 * var(--mast-height));
  transition:background .28s,color .28s,border-color .28s
}
.mast[data-tone="dark"]{
  --glass-text:#f2f8ff;--glass-surface:rgb(5 19 33 / .66);
  --glass-stroke:rgb(211 232 247 / .24);--glass-accent:#b5e3ff
}
.mast .mast-brand{position:relative;display:grid;flex:none;inline-size:clamp(152px,17vw,218px)}
.mast .mast-brand img{
  grid-area:1/1;width:100%;height:auto;transition:opacity .24s;pointer-events:none
}
.mast .logo-white,.mast[data-tone="dark"] .logo-color{opacity:0}
.mast[data-tone="dark"] .logo-white{opacity:1}
.mast .mast-brand::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  mask:url(assets/brand-white.webp) center / 100% 100% no-repeat;
  background:linear-gradient(111deg,transparent 43%,#ffffffbd 50%,transparent 57%) 0 50% / 285% 100%;
  animation:mast-logo-shine 7s ease-in-out infinite;
}
@keyframes mast-logo-shine{
  0%,76%{background-position:0 50%}
  97%,100%{background-position:100% 50%}
}
@media(prefers-reduced-motion:reduce){.mast .mast-brand::after{animation:none}}
.mast .contact-link,.mast .menu-button{color:inherit;border-color:var(--glass-stroke)}
.mast .contact-link span,.mast nav a:hover,.mast .contact-link:hover{color:var(--glass-accent)}
.mast .mast-inner{min-height:calc(var(--mast-height) - 1px)}
.experience .hero{padding-block-start:var(--mast-height)}
.detail-hero{padding-block-start:calc(65px + var(--mast-height))}
.hero-dim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,#020c1875,#020c18a0 57%,#04132135);
  opacity:calc(var(--panel-focus,0) * .82)
}
@media(max-width:850px){
  .mast[data-tone] nav.open{background:var(--glass-surface);backdrop-filter:blur(22px) saturate(132%)}
  .mast nav.open a{border-color:var(--glass-stroke)}
}
@media(max-width:530px){:root{--mast-height:66px}.mast .mast-brand{inline-size:149px}}
@media(prefers-reduced-motion:reduce){.mast[data-tone],.mast .mast-brand img{transition:none}}
#scene.panel-closeup{z-index:4}

/* A color-matched, full-bleed extension of the active panel stays on the visual side. */
.hero-scene-fill{
  position:absolute;inset:var(--mast-height) 52% 0 0;overflow:hidden;pointer-events:none;
  z-index:1;opacity:var(--panel-focus,0);background:var(--scene-color,#17476e);
  mask-image:linear-gradient(90deg,#000 0% 74%,transparent 100%)
}
.hero-scene-fill img{
  position:absolute;inset:0 auto auto 0;max-width:none;height:auto;opacity:.51;
  filter:saturate(.85) brightness(.64);will-change:transform
}
.hero-scene-fill::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 27%,var(--scene-color,#17476e) 97%),
    linear-gradient(0deg,#020c1b7a,transparent 38%)
}
@media(max-width:850px){
  .hero-scene-fill{inset:auto 0 65px;height:280px;mask-image:linear-gradient(180deg,transparent,#000 16% 89%,transparent)}
}
.footer{
  position:relative;isolation:isolate;
  background:rgb(241 248 252 / .74);
  backdrop-filter:blur(22px) saturate(132%);
  border-block-start:1px solid rgb(25 68 99 / .20);
}
.footer::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(130deg,#b5d8ec46,transparent 49%,#d1e5ed59)
}
.experience .footer{
  background:rgb(8 28 47 / .93);color:#dfeef9;border-color:#a7c8de3b
}
.experience .footer::before{
  background:radial-gradient(ellipse at 75% -30%,#567d9a50,transparent 64%);
}
.experience .footer nav a:hover{color:#a8dcfb}
.footer-inner{gap:14px 24px;justify-content:space-between;padding-block:18px}
.footer .footer-brand{flex:none;inline-size:clamp(149px,17vw,218px)}
.footer .footer-brand img{display:block;width:100%;height:auto}
.footer nav.footer-social{gap:8px;flex-wrap:wrap}
.footer .footer-social a{
  display:grid;place-items:center;width:44px;height:44px;padding:0;
  color:inherit;border:1px solid currentColor;border-radius:7px;
}
.footer .footer-social a:hover,.footer .footer-social a:focus-visible{
  background:rgb(135 190 228 / .18)
}
@media(max-width:850px){.footer-inner{justify-content:flex-start}}