/* Gate 1: all colors and foundation values come from styles.css. */
.hero-header {
  position:fixed; inset:0 0 auto; z-index:10; display:flex; align-items:center; justify-content:space-between;
  width:100%; min-height:var(--header-height); padding:var(--space-3) var(--layout-gutter); gap:var(--space-6);
  border-bottom:1px solid transparent; transition:background var(--motion-standard),border-color var(--motion-standard);
}
.hero-header.is-scrolled,.hero-header.menu-is-open {background:var(--color-glass);border-bottom-color:var(--line);backdrop-filter:blur(12px)}
.hero-header .brand {font-size:21px;letter-spacing:2px;gap:10px;color:var(--paper)}
.hero-header nav {display:flex;gap:var(--space-6);margin-inline-start:auto;font-size:var(--type-ui)}
.hero-header nav a,.hero-header .header-contact {display:flex;align-items:center;min-height:44px}
.hero-header .header-contact {font-size:var(--type-ui);padding:0}
.hero-header nav a,.hero-header .header-contact {font-weight:400;line-height:1.5;text-decoration:none;transition:color var(--motion-fast)}
.hero-header nav a:hover,.hero-header .header-contact:hover {color:var(--muted)}
.hero-header a:focus-visible {outline:2px solid var(--paper);outline-offset:5px}
.hero-header .menu-toggle {display:none}
.temple-hero {
  position:relative;isolation:isolate;background:var(--ink);min-height:max(760px,100svh);
  display:flex;flex-direction:column;padding:clamp(150px,20svh,240px) var(--layout-gutter) var(--space-5);
}
.hero-scenes,.temple-shade {position:absolute;inset:0;z-index:-1}
.hero-scene {height:100%;width:100%;object-fit:cover;object-position:50% 50%}
.temple-shade {background:linear-gradient(270deg,var(--color-scrim),transparent 65%),linear-gradient(0deg,var(--ink),transparent 43%,var(--color-shadow))}
.temple-copy {width:min(520px,46%);padding-block-end:var(--space-8)}
.temple-kicker {font-size:var(--type-small);color:var(--paper);margin-bottom:var(--space-5)}
.temple-copy h1 {font-size:var(--type-display);font-weight:500;line-height:var(--leading-heading);letter-spacing:-.035em;text-wrap:balance}
.temple-description {color:var(--paper);font-size:var(--type-body-large);line-height:var(--leading-body);margin-top:var(--space-6)}
.temple-founder {font-size:var(--type-small);color:var(--paper);margin-top:var(--space-4)}
.hero-foundation-bottom {margin-top:auto;padding-top:var(--space-7)}
.service-gateways {display:grid;grid-template-columns:1fr 1fr;max-width:600px;margin-inline:auto;padding:var(--space-2);border:1px solid var(--color-border);border-radius:var(--radius-card);background:var(--color-glass)}
.service-gateway {position:relative;display:flex;align-items:center;justify-content:center;gap:var(--space-5);min-width:0;min-height:54px;padding:var(--space-3) var(--space-5);border-radius:var(--radius-media);transition:background 200ms var(--motion-ease)}
.service-gateway + .service-gateway::before {content:"";position:absolute;inset-inline-start:0;top:25%;height:50%;width:1px;background:var(--color-border)}
.gateway-copy {font-size:20px;font-weight:500;line-height:1.4}
.gateway-arrow {font-size:22px;line-height:1;transition:transform 200ms var(--motion-ease)}
@media(hover:hover) {.service-gateway:hover {background:var(--color-hover)} .service-gateway:hover .gateway-arrow {transform:translateX(-4px)}}
.service-gateway:focus-visible {outline:2px solid var(--paper);outline-offset:-2px;background:var(--color-hover)}
.service-gateway:focus-visible .gateway-arrow {transform:translateX(-4px)}
.service-gateway:active {background:var(--ink)}
.hero-caption {display:flex;justify-content:space-between;gap:var(--space-5);align-items:center;margin-top:var(--space-5);font-size:var(--type-caption);color:var(--muted)}
.hero-caption a {color:var(--paper);display:flex;align-items:center;gap:var(--space-5);min-height:44px}
@media(max-width:1050px) {
  .hero-header {gap:var(--space-6)}
  .hero-header nav {gap:var(--space-6)}
  .temple-copy {width:min(490px,60%)}
}
@media(max-width:820px) {
  :root {--header-height:76px}
  .hero-header .brand {font-size:18px}
  .hero-header .header-contact {display:none}
  .hero-header .menu-toggle {display:flex;align-items:center;gap:var(--space-3);min-height:44px;border:0;background:transparent;font-size:var(--type-ui);padding:var(--space-2)}
  .hero-header nav {display:none;position:absolute;inset:100% 0 auto;margin:0;padding:var(--space-3) var(--layout-gutter);background:var(--panel);border-bottom:1px solid var(--line);max-height:calc(100svh - var(--header-height));overflow:auto}
  .hero-header nav.open {display:flex;flex-direction:column;gap:0}
  .hero-header nav a {padding:var(--space-3) 0}
}
@media(max-width:600px) {
  .temple-hero {min-height:100svh;padding-top:calc(var(--header-height) + var(--space-6));padding-bottom:var(--space-3)}
  .hero-scenes {bottom:100px}
  .hero-scene {object-position:50% 45%}
  .temple-shade {background:linear-gradient(0deg,var(--ink),transparent 55%,var(--color-scrim)),linear-gradient(270deg,var(--color-shadow),transparent)}
  .temple-copy {width:100%;padding-bottom:clamp(120px,20svh,200px)}
  .temple-kicker {margin-bottom:var(--space-4)}
  .temple-copy h1 {font-size:clamp(40px,10.8vw,60px);line-height:1.15}
  .temple-description {font-size:var(--type-body);margin-top:var(--space-5)}
  .temple-founder {font-size:var(--type-caption);margin-top:var(--space-3)}
  .hero-foundation-bottom {padding-top:0}
  .service-gateway {padding:var(--space-3) var(--space-2);gap:var(--space-3);min-height:48px}
  .gateway-copy {font-size:16px}
  .hero-caption {margin-top:var(--space-3);font-size:11px}
}
@media(prefers-reduced-motion:reduce) {
  .hero-header,.hero-header *,.temple-hero * {transition:none!important;animation:none!important}
  .service-gateway:hover .gateway-arrow,.service-gateway:focus-visible .gateway-arrow {transform:none}
}


/* Right-aligned emblem shares the hero text edge; navigation stays left. */
.hero-header .brand{position:static;gap:0}
.hero-header .brand .brand-icon{width:60px;height:60px;object-position:right center}
@media(max-width:820px){.hero-header .menu-toggle{margin-inline-start:auto}.hero-header .brand .brand-icon{width:48px;height:48px}}

.hero-header nav .mobile-contact{display:none}@media(max-width:820px){.hero-header nav .mobile-contact{display:flex}}