body { margin:0; background:#FAFAF8; color:#0B0B0A; font-family:'Instrument Sans',system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
  a { color:#0B0B0A; text-decoration:none; }
  a:hover { color:#55554F; }
  html { scroll-behavior:smooth; }
  [id] { scroll-margin-top:88px; }
  /* reload / back-forward: the hero appears in its final state, no intro */
  html.no-intro #top * { animation:none !important; }
  html.no-intro #splash { display:none; }
  * { box-sizing:border-box; }
  @keyframes charIn { from { opacity:0; filter:blur(10px); transform:translateY(0.12em); } to { opacity:1; filter:blur(0); transform:translateY(0); } }
  @keyframes fadeUp { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
  footer a { color:rgba(250,250,248,0.62); }
  footer a:hover { color:#FAFAF8; }
  .maplibregl-map { background:#EFEFEC; font-family:'Instrument Sans',sans-serif; }
  .maplibregl-canvas-container canvas { filter:grayscale(1) contrast(0.95) brightness(1.04); }
  .maplibregl-ctrl-attrib { font-size:10px; }
  .maplibregl-ctrl-group { border-radius:2px; box-shadow:0 2px 8px rgba(11,11,10,0.14); }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration:0.01ms !important; animation-delay:0ms !important; transition-duration:0.01ms !important; }
    html { scroll-behavior:auto; }
  }
  @media (max-width: 860px) { [data-map-title] { white-space:normal !important; font-size:clamp(30px,7.4vw,46px) !important; } }
  @media (max-width: 860px) {
    [data-nav-links], [data-nav-cta] { display:none !important; }
    [data-nav-burger] { display:flex !important; }
    [data-nav-menu] { max-height:calc(100vh - 100px); overflow-y:auto; }
    [data-map-wrap] { height:auto !important; display:flex; flex-direction:column; }
    [data-map-wrap] > div:first-child { position:relative !important; inset:auto !important; height:280px; }
    [data-contact-card] { position:static !important; transform:none !important; width:auto !important; border-radius:0 !important; border:none !important; border-top:1px solid rgba(11,11,10,0.10) !important; box-shadow:none !important; backdrop-filter:none !important; background:#FAFAF8 !important; padding:26px clamp(20px,4vw,48px) 30px !important; }
    [data-map-section] { display:flex; flex-direction:column; }
  }

/* --- added by the static conversion (was handled by the design runtime) --- */
/* Brand veil over the hero intro, shown on every load (app.js fades it out). */
#splash { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: #FAFAF8; z-index: 9999; opacity: 1; transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1); }
#splash.is-out { opacity: 0; pointer-events: none; }
/* The mark unblurs first, the wordmark follows a beat later — same easing and the
   same blur-to-sharp language as the hero title's charIn. */
#splash svg { width: 100%; height: 100%; animation: splashIn 1.25s cubic-bezier(0.22,1,0.36,1) both; }
#splash svg g { animation: splashMark 1s cubic-bezier(0.22,1,0.36,1) both; }  /* no transform here: the group's own transform attribute positions the mark */
#splash svg text { animation: splashWord 0.9s cubic-bezier(0.22,1,0.36,1) 0.24s both; }
@keyframes splashIn { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes splashMark { from { opacity: 0; filter: blur(9px); } to { opacity: 1; filter: blur(0); } }
@keyframes splashWord { from { opacity: 0; filter: blur(7px); transform: translateY(11px); } to { opacity: 1; filter: blur(0); transform: none; } }
@media (prefers-reduced-motion: reduce) {
  #splash svg, #splash svg g, #splash svg text { animation-duration: 0.01s; animation-delay: 0s; }
}
html.splash-on #top * { animation-play-state: paused !important; }

.about-tick { display: block; height: 2px; flex: 1 1 0; background: rgba(250,250,248,0.22); transition: background 0.4s ease; }
.about-tick.is-active { background: #FAFAF8; }
[data-nav-menu][hidden] { display: none !important; }  /* inline display:flex would beat plain [hidden] */
.hover-opacity:hover { opacity: 0.86; }
.team-photo:hover { filter: grayscale(0) !important; }