/* A compact floating surface, shared by the homepage and hero preview. */
.stage-masthead{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:500;
  box-sizing:border-box;width:calc(100% - 48px);max-width:1120px;
  height:37px;min-height:37px;margin:0;padding:3px 6px 3px 22px;
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:16px;
  align-items:center;color:#261a16;border:1px solid transparent;border-radius:40px;
  background:transparent;box-shadow:none;isolation:isolate;pointer-events:none;
}
/* The surface retracts independently; the contact button never changes position. */
.stage-masthead::before{
  content:'';position:absolute;z-index:-1;top:-1px;bottom:-1px;right:-1px;
  box-sizing:border-box;width:calc(100% + 2px - var(--header-retract,0px));
  border:1px solid #ffffff55;border-radius:inherit;pointer-events:none;
  background:radial-gradient(ellipse 34% 240% at 96% 50%,#e3b9b26b,transparent 75%),linear-gradient(110deg,#ba8677 0%,#ae796b 54%,#9e695d 100%);
  background-size:auto;background-position:center;
  box-shadow:0 2px 4px #643f2910,0 8px 24px #643f2914,inset 0 1px 0 #ffffff30;
}
.stage-masthead :is(a,button,nav){pointer-events:auto}
.stage-masthead :is(.masthead-brand,nav,.masthead-menu-toggle){opacity:var(--header-navigation-opacity,1)}
.stage-masthead.is-navigation-hidden :is(.masthead-brand,nav,.masthead-menu-toggle){visibility:hidden;pointer-events:none}
.stage-masthead.is-navigation-hidden nav a{pointer-events:none}
.stage-masthead .masthead-brand{justify-self:start;display:flex;min-height:28px;gap:0}
.stage-masthead .masthead-brand img{width:128px;height:auto}
.stage-masthead nav{display:flex;gap:2px;margin:0;justify-self:center}
.masthead-nav-heading,.masthead-nav-detail,.masthead-nav-arrow{display:none}
.masthead-nav-label{display:block}
.stage-masthead nav a{
  min-height:28px;padding:3px 12px;border:1px solid transparent;
  border-radius:24px;font-size:13px;font-weight:500;line-height:20px;
  color:#261a16;background:transparent;box-shadow:none;text-decoration:none;
  transition:background-color .18s,border-color .18s;
}
.stage-masthead nav a:hover{background:#fff8f144;border-color:#fff8f12e}
.stage-masthead nav a[aria-current=location]{background:#fff8f16b;border-color:#fff8f14d;box-shadow:inset 0 1px 0 #ffffff40}
.stage-masthead .masthead-contact{
  position:relative;justify-self:end;display:flex;align-items:center;gap:9px;margin:0;
  min-height:28px;box-sizing:border-box;padding:2px 3px 2px 13px;
  color:#35241e;background:linear-gradient(155deg,#fffffff5 0%,#ffffffa6 44%,#ffffff70 58%,#ffffffd4 100%),#ffffffc7;border:1px solid #fffffff2;border-radius:28px;
  font:500 12px/20px Satoshi,system-ui,sans-serif;letter-spacing:0;text-transform:none;
  box-shadow:inset 0 1px 0 #ffffffd9,inset 0 -1px 0 #94624e26,0 2px 6px #5432211a;
  backdrop-filter:blur(14px) saturate(135%);-webkit-backdrop-filter:blur(14px) saturate(135%);
  cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:background-color .18s,box-shadow .18s;
}
/* The glass and its rose rim share one stable, 44px-tall link target. */
.stage-masthead .masthead-contact::after{content:'';position:absolute;top:50%;left:-7px;right:-7px;height:44px;transform:translateY(-50%)}
.stage-masthead .masthead-contact span{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;color:#fff;background:linear-gradient(155deg,#bd8c80e6,#9e665ce6);box-shadow:inset 0 1px 0 #ffffff80,inset 0 0 0 1px #ffffff30;font-size:16px;line-height:1;pointer-events:none}
@media(hover:hover) and (pointer:fine){.stage-masthead .masthead-contact:hover{background-color:#ffffffe6;box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 #94624e26,0 3px 8px #54322120}}
.stage-masthead .masthead-contact:active{background-color:#fff;box-shadow:inset 0 1px 2px #94624e26,0 1px 3px #54322118}
.stage-masthead a:focus-visible,.stage-masthead button:focus-visible{outline:2px solid #55352a;outline-offset:3px}
.masthead-menu-toggle{display:none}
section[id],footer[id],#decisions{scroll-margin-top:104px}
#hero{scroll-margin-top:0}
@media(max-width:1000px) and (min-width:861px){
  .stage-masthead{gap:10px;padding-left:20px}
  .stage-masthead .masthead-brand img{width:120px}
  .stage-masthead nav a{font-size:13px;padding-inline:9px}
  .stage-masthead .masthead-contact{font-size:12px;gap:7px;padding-left:13px}
}
@media(max-width:860px){
  .stage-masthead{top:10px;width:calc(100% - 24px);max-width:620px;height:35px;min-height:35px;margin:0;padding:2px 4px 2px 18px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;border-radius:32px}
  .stage-masthead .masthead-brand img{width:112px}
  .stage-masthead .masthead-menu-toggle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-content:center;gap:5px;width:44px;height:28px;padding:6px;border:0;border-radius:14px;background:transparent;color:#fff8f0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  .masthead-menu-toggle span{display:block;width:18px;height:1.5px;background:currentColor;border-radius:2px;transition:transform .18s}
  .masthead-menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3.25px) rotate(45deg)}
  .masthead-menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
  .stage-masthead .masthead-contact{grid-column:2;grid-row:1;min-height:27px;padding:2px 3px 2px 11px;gap:7px;font-size:11px;line-height:18px}
  .stage-masthead .masthead-contact span{width:21px;height:21px;font-size:15px}
  .stage-masthead :is(.masthead-brand,.masthead-contact){position:relative}
  .stage-masthead :is(.masthead-brand,.masthead-menu-toggle)::after{content:'';position:absolute;top:50%;left:0;right:0;height:44px;transform:translateY(-50%)}
  .stage-masthead .masthead-contact::after{left:-5px;right:-5px}
  .stage-masthead nav{display:none;position:absolute;top:calc(100% + 10px);left:0;right:0;width:100%;max-width:440px;margin:0 auto;padding:19px 12px 12px;grid-template-columns:minmax(0,1fr);gap:4px;box-sizing:border-box;max-height:calc(100dvh - 82px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;white-space:normal;border:1px solid #e8e1dc;border-radius:25px;background:#fffdfb;box-shadow:0 8px 18px #49362e0a,0 22px 46px #49362e1c,inset 0 1px 0 #fff;transform-origin:top center}
  .stage-masthead.is-menu-open nav{display:grid;animation:open-masthead-menu .2s cubic-bezier(.22,1,.36,1)}
  .stage-masthead .masthead-nav-heading{display:block;margin:0;padding:0 14px 12px;font:600 10px/1.3 Satoshi,system-ui,sans-serif;letter-spacing:.13em;text-transform:uppercase;color:#9b8275}
  .stage-masthead nav a{display:flex;align-items:center;justify-content:space-between;gap:15px;min-height:80px;padding:14px;border:1px solid transparent;font-size:19px;line-height:1.2;border-radius:17px;box-sizing:border-box}
  .stage-masthead .masthead-nav-copy{display:flex;flex-direction:column;gap:7px;min-width:0}
  .stage-masthead .masthead-nav-label{font-weight:500;letter-spacing:-.025em;color:#2b2521}
  .stage-masthead .masthead-nav-detail{display:block;font-size:12px;line-height:1.4;font-weight:400;letter-spacing:0;color:#8a7e76}
  .stage-masthead .masthead-nav-arrow{display:grid;place-items:center;flex:none;width:32px;height:32px;border:1px solid #e8e0da;border-radius:50%;background:#fff}
  .stage-masthead .masthead-nav-arrow img{display:block;width:16px;height:16px;opacity:.6}
  .stage-masthead nav a:hover{background:#f6f1ed;border-color:transparent}
  .stage-masthead nav a[aria-current=location]{background:#f2e7df;border-color:#ead5c7;box-shadow:inset 0 1px 0 #fff}
  .stage-masthead nav a[aria-current=location] .masthead-nav-label{color:#82523e}
  .stage-masthead nav a[aria-current=location] .masthead-nav-arrow{background:#e8d5c9;border-color:#dfc4b4}
  section[id],footer[id],#decisions{scroll-margin-top:94px}
  #hero{scroll-margin-top:0}
}
@keyframes open-masthead-menu{from{opacity:0;transform:translateY(-7px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:360px){
  .stage-masthead{padding-left:16px;gap:4px}
  .stage-masthead .masthead-brand img{width:96px}
  .stage-masthead .masthead-contact{padding-left:10px;gap:5px;font-size:11px}
}
/* Reuse the former header/control space inside the mobile scene. The canvas
   stays the same size in every story phase; only the grouped copy sits lower. */
@media(max-width:760px){
  #hero{height:100svh;grid-template-rows:minmax(0,1fr)}
  #hero>.hero-motion-controls{display:none}
}
@media(max-width:760px) and (orientation:portrait){
  #hero{min-height:480px}
  #hero[data-stage=sorting]{--ordered-copy-top:calc((100% - var(--ordered-content-height))/2 + 24px)}
}
@media(prefers-reduced-motion:reduce){.stage-masthead *{transition:none!important;animation:none!important}}
@media(prefers-reduced-transparency:reduce){.stage-masthead .masthead-contact{background:#fdfcfc;backdrop-filter:none;-webkit-backdrop-filter:none}}