/* Shared homepage navigation. Markup comes from index.html via sync_site_layout.py. */
@import url("/theme.css");

/* The burger (#nav-hamburger, in .hero-nav) and the X (#mobile-menu-close, in the fixed
   .mobile-menu overlay) are two elements in two different layout contexts, so the X can only
   land where the burger was by being handed the same numbers. These vars are that one source.
   --nav-top/--nav-edge track .hero-nav-inner's padding, which is exactly where the burger's
   top/right edge resolves to: it is always the tallest item in that centred flex row (56/44px
   against a 52/42px brand mark), so the row's height is its own. Override them together per
   breakpoint, never one side alone - that drift is what made the icon jump open vs closed. */
.hero-nav, .mobile-menu { --container: 1240px; --nav-top: 20px; --nav-edge: clamp(20px, 4vw, 40px); --burger: 56px; --burger-radius: 14px; --burger-glyph: 36px; font-family: var(--font-family); font-size: 16px; line-height: normal; color: var(--color-forest); }

.hero-nav { position: sticky; top: 0; z-index: 30; background: var(--color-white); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid rgba(var(--color-forest-rgb), 0.07); transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.hero-nav.scrolled { background: rgba(var(--color-white-rgb), 0.92); border-bottom-color: rgba(var(--color-forest-rgb), 0.07); box-shadow: 0 4px 16px -10px rgba(var(--color-forest-rgb), 0.08); }
.hero-nav-inner { display: flex; align-items: center; padding: var(--nav-top) var(--nav-edge); max-width: var(--container); margin: 0 auto; gap: 32px; position: relative; }
.hero-nav .brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; transition: transform 0.25s ease; }
.hero-nav .brand-mark { width: 34px; height: 34px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(var(--color-forest-rgb), 0.1); display: block; flex-shrink: 0; transition: box-shadow 0.25s ease; }
.hero-nav .brand-mark picture { display: block; width: 100%; height: 100%; }
.hero-nav .brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.hero-nav .brand-name { font-family: var(--font-display); font-size: 18px; line-height: 1; color: var(--color-heading); font-weight: 500; letter-spacing: -0.01em; }
.hero-nav .brand-sub { margin-top: 3px; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.3em;  color: var(--color-swatch-cad7cf); }
.hero-nav-links { display: none; gap: 24px; align-items: center; flex-wrap: nowrap; position: absolute; left: 50%; top: 0; bottom: 0; transform: translateX(-50%); }
.hero-nav-links a { position: relative; font-size: 14px; color: var(--color-swatch-24463b); font-weight: 400; transition: color 0.2s ease; white-space: nowrap; padding: 4px 1px; }
.hero-nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--color-accent); transform: scaleX(0); transform-origin: left center; transition: transform 0.28s cubic-bezier(.4, 0, .2, 1); }
.hero-nav-links a:hover::after, .hero-nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.hero-nav-links a[aria-current="page"] { color: var(--color-brand); font-weight: 500; }
.hero-nav-links a:hover { color: var(--color-brand); }
.hero-nav-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }
.hero-nav-actions .nav-link { font-size: 14px; color: var(--color-swatch-2a4f43); transition: color 0.18s; padding: 6px 8px; }
.hero-nav-actions .nav-link:hover { color: var(--color-heading); }
.hero-nav .cta-light .glyph { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid currentColor; position: relative; }
.hero-nav .cta-light .glyph::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: currentColor; }
.hero-nav .cta-dark .arr { display: inline-block; transition: transform 0.25s ease; }
.hero-nav .cta-dark:hover .arr { transform: translateX(3px); }
.hero-nav .cta-dark .glyph { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--color-swatch-f4f6f1); position: relative; }
.hero-nav .cta-dark .glyph::after { content: ""; position: absolute; inset: 3.5px; border-radius: 50%; background: var(--color-swatch-4c6e8e); }
.hero-nav .cta { background: transparent; color: var(--color-forest); padding: 9px 18px; border-radius: 999px; font-size: 13px; border: 1px solid var(--color-forest); transition: background 0.18s, color 0.18s; display: inline-block; }
.hero-nav .cta:hover { background: var(--color-forest); color: var(--color-heading); }
@media (min-width: 900px) {
.hero-nav-links { display: flex; }}
@media (max-width: 700px) {
.hero-nav-actions .nav-link { display: none; }
.hero-nav .cta-light { display: none; }}
.hero-nav .cta-light, .hero-nav .cta-dark { position: relative; overflow: hidden; isolation: isolate; }

html[data-motion="off"] .hero-nav .cta-dark { animation: none; }
@media (prefers-reduced-motion: reduce) {
.hero-nav .cta-dark { animation: none; }}
.nav-hamburger { display: none; }
.mobile-menu { display: none; }
@media (hover: none) and (pointer: coarse), (max-width: 899.98px) {
.hero-nav, .mobile-menu { --nav-top: 32px; --nav-edge: 24px; }
.hero-nav-inner { padding: var(--nav-top) var(--nav-edge) 16px; gap: 16px; flex-wrap: nowrap; }
.hero-nav .brand-name { font-size: 30px; }
.hero-nav .brand-mark { width: 52px; height: 52px; border-radius: 14px; }
.hero-nav-links { display: none !important; }
.hero-nav-actions { display: none !important; }
.nav-hamburger { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; margin-left: auto; width: var(--burger); height: var(--burger); border-radius: var(--burger-radius); background: transparent; border: 1px solid rgba(var(--color-black-rgb), 0.18); cursor: pointer; padding: 0; flex-shrink: 0; transition: background 0.18s; }
.nav-hamburger:hover { background: rgba(var(--color-black-rgb), 0.06); }
.nav-hamburger span { display: block; width: 26px; height: 3px; background: var(--color-heading); border-radius: 999px; transition: transform 0.25s ease, opacity 0.25s ease; transform-origin: center; }
.nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
.mobile-menu { display: block; position: fixed; inset: 0; z-index: 35; background: var(--color-surface); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; padding: 140px 32px 60px; overflow-y: auto; }
.mobile-menu.open { opacity: 1; visibility: visible; transition: opacity 0.3s ease; }
.mobile-menu-close { position: absolute; top: var(--nav-top); right: var(--nav-edge); width: var(--burger); height: var(--burger); border-radius: var(--burger-radius); background: transparent; border: 1px solid rgba(var(--color-black-rgb), 0.18); color: var(--color-heading); font-size: var(--burger-glyph); line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background 0.18s; }
.mobile-menu-close:hover { background: rgba(var(--color-black-rgb), 0.06); }
.mobile-menu-links { display: flex; flex-direction: column; gap: 0; max-width: 480px; margin: 0 auto; }
.mobile-menu-links a:not(.mobile-menu-cta) { font-family: var(--font-display); font-weight: 600; font-size: 26px; color: var(--color-heading); padding: 22px 0; border-bottom: 1px solid rgba(var(--color-black-rgb), 0.1); text-decoration: none; }
.mobile-menu-links a:not(.mobile-menu-cta):hover, .mobile-menu-links a[aria-current="page"] { color: var(--color-accent); }
.mobile-menu-links .mobile-menu-cta { margin-top: 28px; align-self: flex-start; }}

@media (max-width: 1199px) {
.hero-nav, .mobile-menu { --nav-top: 30px; --nav-edge: clamp(18px, 4.5vw, 40px); }
.hero-nav-inner { padding: var(--nav-top) var(--nav-edge) 14px; }}

@media (max-width: 760px) {
.hero-nav, .mobile-menu { --nav-top: 24px; --nav-edge: 18px; --burger: 44px; --burger-radius: 12px; --burger-glyph: 28px; }
.hero-nav-inner { padding: var(--nav-top) var(--nav-edge) 12px; }
.hero-nav .brand-name { font-size: 26px; }
.hero-nav .brand-mark { width: 42px; height: 42px; border-radius: 12px; }
.nav-hamburger { gap: 5px; }
.nav-hamburger span { width: 21px; height: 2.5px; }
/* Bar pitch here is 2.5px + 5px, not the 9px the base rule assumes, so the burger's own X -
   the one on show while the overlay fades in over it - needs its own offsets to close. */
.nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }}
.hero-nav .brand { transition: transform 0.1s ease; }
.hero-nav .brand:active { transform: scale(0.95); }

.hero-nav .brand-name { margin: 0; }
body.menu-open { overflow: hidden; }
.hero-nav a:focus-visible, .hero-nav button:focus-visible, .mobile-menu a:focus-visible, .mobile-menu button:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 4px; }