
/* Layout: the terrain owns the whole stage, centered; the title sits on the bottom edge like a title card, split across both corners. Single dark look (brand navy). */
.fog-hero{
  --navy:#101d36; --navy-deep:#0a1428; --ink:#f5f8fd; --muted:#b4c2d8; --dim:#7385a2;
  --gold:#e7bb78; --sky:#c8dcf8; --line:rgba(200,220,248,.16);
  --sans:Inter,'Avenir Next',Avenir,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --serif:Georgia,'Times New Roman',serif;
  color-scheme:dark;
}
.fog-hero{background:var(--navy-deep);color:var(--ink)}
.fog-hero{font:17px/1.7 var(--sans);-webkit-font-smoothing:antialiased}
.fog-hero a{color:inherit;text-decoration:none}
.fog-hero a:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

.fog-hero .stage{position:relative;height:clamp(680px,94vh,960px);overflow:hidden;background:radial-gradient(110% 80% at 50% 40%,#15284a 0%,var(--navy) 45%,var(--navy-deep) 100%)}
.fog-hero #gl{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair;touch-action:pan-y}
.fog-hero .scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(10,20,40,.94) 0%,rgba(10,20,40,.7) 18%,rgba(10,20,40,0) 38%),linear-gradient(180deg,rgba(10,20,40,.75) 0%,rgba(10,20,40,0) 16%)}

.fog-hero .site-header{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px max(16px,5%);pointer-events:none}
.fog-hero .site-header>*{pointer-events:auto}
.fog-hero .brand img{height:clamp(72px,7.5vw,104px);width:auto;display:block}
.fog-hero .site-header nav{display:flex;align-items:center;gap:clamp(18px,2.2vw,30px);font-size:14px;font-weight:500;color:var(--muted)}
.fog-hero .site-header nav a:hover{color:var(--ink)}
.fog-hero .nav-contact{color:var(--ink);border-bottom:1px solid var(--gold);padding-bottom:2px}

.fog-hero .title{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:0 max(16px,5%) 34px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:24px 48px;align-items:start;pointer-events:none}
.fog-hero h1{margin:0;margin-top:-6px;font-weight:500;font-size:clamp(2.8rem,6.4vw,6.6rem);line-height:.98;letter-spacing:-.055em;text-wrap:balance}
.fog-hero .aside{padding-bottom:.3rem;border-top:1px solid var(--line);padding-top:18px}
.fog-hero .tag{margin:0;font-family:var(--serif);font-style:italic;font-size:clamp(1.6rem,2.4vw,2.2rem);line-height:1.1;color:var(--gold);letter-spacing:-.02em}
.fog-hero .lede{margin:12px 0 0;color:var(--muted);font-size:16px;line-height:1.65}
.fog-hero .footnote{margin:14px 0 0;font-size:12px;line-height:1.5;color:var(--dim)}

.fog-hero .hint{position:absolute;z-index:4;left:50%;top:clamp(52px,6vw,72px);transform:translateX(-50%);font-size:13px;font-style:italic;font-family:var(--serif);color:var(--sky);pointer-events:none;white-space:nowrap;opacity:.8;transition:opacity 1.2s}
.fog-hero .hint.gone{opacity:0}

@media (max-width:860px){
.fog-hero .site-header nav a:not(.nav-contact){display:none}
.fog-hero .brand img{height:64px}
.fog-hero .stage{height:auto;min-height:0;display:flex;flex-direction:column}
.fog-hero #gl{position:relative;inset:auto;height:auto;aspect-ratio:1/0.85;margin-top:96px;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 84%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 84%,transparent 100%)}
.fog-hero .scrim{display:none}
.fog-hero .title{position:relative;grid-template-columns:1fr;padding-top:8px}
.fog-hero .hint{display:none}
}

.fog-hero .site-header{max-width:none;min-height:0;margin:0;background:transparent;box-shadow:none;clip-path:none;border:0}.fog-hero .nav-contact{border:0;border-bottom:1px solid var(--gold);border-radius:0;padding:0 0 2px}.fog-hero .stage{width:100%}.fog-hero .title{pointer-events:auto}.fog-hero .hero-actions{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px;font-size:14px}.fog-hero .hero-actions a{border-bottom:1px solid var(--gold)}
@media(max-width:860px){.fog-hero .site-header{align-items:flex-start;gap:12px}.fog-hero .site-header nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px 16px;max-width:220px}.fog-hero .site-header nav a{display:block!important;font-size:12px}.fog-hero .brand img{height:54px}}

/* Keep the introductory copy in its original desktop column without a large headline. */
.fog-hero .title>.aside{grid-column:2}.fog-hero h1.tag{margin:0;font-weight:400}
@media(max-width:859px){.fog-hero .title>.aside{grid-column:1}}

/* Local daylight concept. */
.fog-hero{--navy:#e9eef2;--navy-deep:#f5f3ed;--ink:#20344b;--muted:#455b70;--dim:#596b7b;--gold:#89612c;--sky:#536f83;--line:rgba(40,65,90,.2);color-scheme:light}
.fog-hero .stage{background:radial-gradient(ellipse at 50% 35%,#e2edf3 0%,#edf1f1 50%,#f5f3ed 90%)}
.fog-hero .scrim{background:linear-gradient(0deg,#f5f3ed 0%,rgba(245,243,237,.85) 15%,transparent 38%),linear-gradient(180deg,rgba(245,243,237,.8),transparent 20%)}
