/* Shared homepage navigation material and geometry, scoped to the navigation. */
#site-header{
  --nav-progress:0;
  --nav-target-inset:max(24px,calc((100% - 840px)/2));
  --nav-target-top:14px;
  --nav-start-height:76px;
  --nav-target-height:56px;
  --nav-target-padding:18px;
  --nav-glass-tint:rgba(244,239,225,.12);
  --nav-glass-edge:rgba(255,255,255,.84);
  --nav-glass-highlight:rgba(255,255,255,.98);
  --nav-glass-shadow:rgba(8,24,43,.09);
  --nav-action-hover:var(--mineral,#315d78);
  position:fixed;
  top:calc(var(--nav-progress)*var(--nav-target-top));
  right:calc(var(--nav-progress)*var(--nav-target-inset));
  bottom:auto;
  left:calc(var(--nav-progress)*var(--nav-target-inset));
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  height:calc(var(--nav-start-height) + (var(--nav-target-height) - var(--nav-start-height))*var(--nav-progress));
  padding:0 calc(var(--gutter) + (var(--nav-target-padding) - var(--gutter))*var(--nav-progress));
  border:0;
  border-radius:calc(42px*var(--nav-progress));
  background:transparent;
  color:#fff4df;
  box-shadow:none;
  isolation:isolate;
  overflow:visible;
  transition:color .22s ease;
}
#site-header::before{
  content:'';
  display:block;
  position:absolute;
  inset:0;
  z-index:-1;
  border:1px solid var(--nav-glass-edge);
  border-top-color:var(--nav-glass-highlight);
  border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,0) 35%,rgba(255,255,255,0) 67%,rgba(255,255,255,.035)),var(--nav-glass-tint);
  box-shadow:inset 0 1px 0 var(--nav-glass-highlight),inset 1px 0 0 rgba(255,255,255,.35),inset -1px -1px 1px rgba(24,40,53,.045),0 4px 14px var(--nav-glass-shadow);
  -webkit-backdrop-filter:blur(11px) saturate(120%);
  backdrop-filter:blur(11px) saturate(120%);
  opacity:var(--nav-progress);
  pointer-events:none;
  transition:background .22s ease,border-color .22s ease,box-shadow .22s ease;
}
html.nav-optics-ready #site-header.is-docked:not(.menu-open)::before{
  -webkit-backdrop-filter:blur(8px) url('#nav-liquid-filter') saturate(125%);
  backdrop-filter:blur(8px) url('#nav-liquid-filter') saturate(125%);
}
#site-header::after{
  content:'';
  position:absolute;
  inset:0 0 -35px;
  z-index:-2;
  border-radius:inherit;
  background:linear-gradient(180deg,rgba(43,32,25,.45),rgba(43,32,25,.38) 62%,transparent);
  opacity:calc(1 - var(--nav-progress));
  pointer-events:none;
}
#site-header.is-docked:not(.menu-open),#site-header.scrolled:not(.menu-open){
  --nav-glass-tint:rgba(250,252,253,.62);
  --nav-glass-edge:rgba(255,255,255,.88);
  --nav-glass-highlight:rgba(255,255,255,1);
  --nav-glass-shadow:rgba(20,46,80,.09);
  color:var(--ink,#142e50);
}
#site-header.scrolled::after{opacity:0}
#site-header .wordmark,#site-header .desktop-nav,#site-header .menu-toggle{position:relative;z-index:1}
#site-header .wordmark{
  display:inline-flex;
  align-items:center;
  flex-shrink:0;
  gap:0;
  min-height:44px;
  font-family:var(--serif,Cormorant,Georgia,serif);
  font-size:calc(29px - 4px*var(--nav-progress));
  font-weight:400;
  line-height:1.05;
  letter-spacing:-.035em;
  white-space:nowrap;
  color:inherit;
}
#site-header .brand-surname{
  display:block;
  max-width:calc(2.4em*(1 - var(--nav-progress)));
  white-space:pre;
  overflow:hidden;
  opacity:calc(1 - 2*var(--nav-progress));
}
#site-header .desktop-nav{display:flex;align-items:center;flex-shrink:0;gap:24px;font-size:13px;font-weight:400;line-height:1.4}
#site-header .desktop-nav>a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:8px 0;color:inherit;text-decoration:none}
#site-header .desktop-nav>a::after{content:'';position:absolute;bottom:7px;left:0;right:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease,cubic-bezier(.22,.65,.25,1))}
#site-header .desktop-nav>a:hover::after,#site-header .desktop-nav>a.active::after{transform:scaleX(1)}
#site-header .desktop-nav>.nav-contact{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  min-height:44px;
  margin-left:0;
  padding:9px 17px;
  border:1px solid rgba(255,244,223,.65);
  border-radius:50px;
  background:rgba(38,28,22,.12);
  color:#fff4df;
  font-size:12px;
  font-weight:500;
  line-height:1.35;
  white-space:nowrap;
  text-align:center;
  transition:background .25s,border-color .25s,color .25s;
}
#site-header .nav-contact::after{display:none}
#site-header .nav-contact:hover{background:#fff4df;border-color:#fff4df;color:var(--ink,#142e50)}
#site-header .nav-contact .icon{filter:invert(1)}
#site-header .nav-contact:hover .icon{filter:none}
#site-header .menu-toggle{display:none;align-items:center;justify-content:center;flex-shrink:0;gap:10px;min-height:44px;padding:8px 0;border:0;background:none;color:inherit;font-size:13px;line-height:1.35;cursor:pointer}
#site-header .menu-toggle .icon{display:inline-block;width:22px;height:22px;object-fit:contain;filter:invert(1)}
body:not(.bodywork-page) #site-header:not(.scrolled):not(.is-docked):not(.menu-open) .wordmark,
body:not(.bodywork-page) #site-header:not(.scrolled):not(.is-docked):not(.menu-open) .desktop-nav>a,
body:not(.bodywork-page) #site-header:not(.scrolled):not(.is-docked):not(.menu-open) .menu-toggle{text-shadow:0 1px 4px rgba(7,17,28,.72),0 1px 12px rgba(7,17,28,.36)}
#site-header:not(.scrolled):not(.is-docked):not(.menu-open) .nav-contact:hover{text-shadow:none}
#site-header :focus-visible{outline:2px solid var(--ink,#142e50);outline-offset:6px}
#site-header:not(.scrolled):not(.is-docked):not(.menu-open) :focus-visible{outline-color:#fff4df}
#site-header.is-docked:not(.menu-open) .nav-contact,#site-header.scrolled:not(.menu-open) .nav-contact{background:var(--ink,#142e50);border-color:var(--ink,#142e50);color:var(--paper,#f4efe1);text-shadow:none}
#site-header.is-docked:not(.menu-open) .nav-contact:hover,#site-header.scrolled:not(.menu-open) .nav-contact:hover{background:var(--nav-action-hover);border-color:var(--nav-action-hover);color:var(--paper,#f4efe1)}
#site-header.is-docked:not(.menu-open) .nav-contact .icon,#site-header.scrolled:not(.menu-open) .nav-contact .icon{filter:invert(1)}
#site-header.is-docked:not(.menu-open) .menu-toggle .icon,#site-header.scrolled:not(.menu-open) .menu-toggle .icon,#site-header.menu-open .menu-toggle .icon{filter:none}
#site-header.menu-open{top:0;right:0;left:0;height:var(--nav-start-height);padding:0 var(--gutter);border:0;border-radius:0;background:var(--paper,#f4efe1);color:var(--ink,#142e50);box-shadow:none}
#site-header.menu-open::before,#site-header.menu-open::after{display:none}
#mobile-nav{display:none}
body.menu-open{overflow:hidden}
/* A light service-page photograph keeps the same navigation in readable indigo. */
.bodywork-page #site-header{color:var(--ink,#142e50)}
.bodywork-page #site-header::after{display:none}
.bodywork-page #site-header .wordmark,.bodywork-page #site-header .desktop-nav>a,.bodywork-page #site-header .menu-toggle{text-shadow:none}
.bodywork-page #site-header .nav-contact{background:var(--ink,#142e50);border-color:var(--ink,#142e50);color:var(--paper,#f4efe1)}
.bodywork-page #site-header .nav-contact:hover{background:var(--nav-action-hover);border-color:var(--nav-action-hover);color:var(--paper,#f4efe1)}
.bodywork-page #site-header .nav-contact .icon,.bodywork-page #site-header .nav-contact:hover .icon{filter:invert(1)}
.bodywork-page #site-header .menu-toggle .icon{filter:none}
.bodywork-page #site-header :focus-visible{outline-color:var(--ink,#142e50)}
@media(max-width:900px){
  #site-header{
    --nav-target-inset:12px;--nav-target-top:10px;--nav-target-padding:18px;--nav-start-height:68px;
    top:calc(env(safe-area-inset-top,0px) + var(--nav-progress)*var(--nav-target-top));
    padding-left:max(calc(var(--gutter) + (var(--nav-target-padding) - var(--gutter))*var(--nav-progress)),calc(env(safe-area-inset-left,0px) + 16px));
    padding-right:max(calc(var(--gutter) + (var(--nav-target-padding) - var(--gutter))*var(--nav-progress)),calc(env(safe-area-inset-right,0px) + 16px));
  }
  #site-header .desktop-nav{display:none}
  #site-header .menu-toggle{display:inline-flex}
  #site-header.menu-open{
    top:env(safe-area-inset-top,0px);
    padding-left:max(var(--gutter),calc(env(safe-area-inset-left,0px) + 16px));
    padding-right:max(var(--gutter),calc(env(safe-area-inset-right,0px) + 16px));
  }
  #mobile-nav{
    display:flex;position:fixed;inset:0;z-index:25;flex-direction:column;justify-content:center;gap:5px;
    padding-top:max(120px,calc(env(safe-area-inset-top,0px) + 68px));
    padding-right:max(var(--gutter),calc(env(safe-area-inset-right,0px) + 16px));
    padding-bottom:max(60px,calc(env(safe-area-inset-bottom,0px) + 24px));
    padding-left:max(var(--gutter),calc(env(safe-area-inset-left,0px) + 16px));
    overflow-y:auto;background:var(--paper,#f4efe1);color:var(--ink,#142e50);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;
  }
  #mobile-nav.open{opacity:1;visibility:visible}
  #mobile-nav>a{display:block;min-height:60px;padding:12px 0;border-bottom:1px solid var(--line,#c2cbd0);font-family:var(--serif,Cormorant,Georgia,serif);font-size:42px;font-weight:400;line-height:1.2;text-decoration:none}
  #mobile-nav>p{margin-top:24px;font-size:12px;color:var(--muted,#4e6474)}
  #mobile-nav :focus-visible{outline:2px solid var(--ink,#142e50);outline-offset:6px}
}
@media(max-width:720px){#site-header{--nav-start-height:68px;--nav-target-height:56px}}
@media(max-height:430px){
  #site-header{--nav-start-height:56px;--nav-target-height:56px}
  #mobile-nav{justify-content:flex-start;padding-top:max(78px,calc(env(safe-area-inset-top,0px) + 56px));padding-bottom:max(25px,calc(env(safe-area-inset-bottom,0px) + 16px))}
}
@media(min-width:901px) and (max-width:1100px) and (max-height:430px){
  #site-header{
    --nav-start-height:calc(56px + env(safe-area-inset-top,0px));
    --nav-target-top:calc(14px + env(safe-area-inset-top,0px));
    --nav-target-inset:max(24px,calc((100% - 840px)/2),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));
    --nav-start-left:max(var(--gutter),calc(env(safe-area-inset-left,0px) + 16px));
    --nav-start-right:max(var(--gutter),calc(env(safe-area-inset-right,0px) + 16px));
    padding-top:calc((1 - var(--nav-progress))*env(safe-area-inset-top,0px));
    padding-left:calc(var(--nav-start-left) + (var(--nav-target-padding) - var(--nav-start-left))*var(--nav-progress));
    padding-right:calc(var(--nav-start-right) + (var(--nav-target-padding) - var(--nav-start-right))*var(--nav-progress));
  }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #site-header{--nav-glass-tint:rgba(244,239,225,.23)}
  #site-header.is-docked:not(.menu-open),#site-header.scrolled:not(.menu-open){--nav-glass-tint:rgba(250,252,253,.88)}
}
@media(prefers-reduced-motion:reduce){#site-header,#site-header::before,#site-header::after,#site-header .nav-contact,#site-header .desktop-nav>a::after,#mobile-nav{transition:none}}
body.no-motion #site-header,body.no-motion #site-header::before,body.no-motion #site-header::after,
body.reduced-motion #site-header,body.reduced-motion #site-header::before,body.reduced-motion #site-header::after,
body.reduced-motion #site-header .nav-contact,body.reduced-motion #site-header .desktop-nav>a::after,body.reduced-motion #mobile-nav{transition:none}
@media print{#site-header,#mobile-nav{display:none}}
