/* Shared AEG light navigation
   The homepage and every light inner page use this same header component. */

html,
body {
  overflow-x: clip;
}

.aorge-nav {
  --nav-ink: #202a32;
  --nav-muted: #5d6870;
  --nav-amber: #cf861f;
  --nav-deep: #9d5f12;
  --nav-line: rgba(95, 111, 116, .2);
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100vw;
  max-width: none;
  min-height: 84px;
  margin-left: calc(50% - 50vw);
  box-sizing: border-box;
  padding: 22px clamp(20px, 4vw, 56px);
  border-bottom: 1px solid rgba(95, 111, 116, .24);
  background: rgba(255, 255, 255, .66);
  box-shadow: 0 10px 28px rgba(43, 53, 55, .08);
  backdrop-filter: blur(20px) saturate(1.16);
  -webkit-backdrop-filter: blur(20px) saturate(1.16);
}

.aorge-nav .brand {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
  color: var(--nav-ink);
  text-decoration: none;
}

.aorge-nav .brand-mark {
  width: 38px;
  height: 38px;
  color: var(--nav-amber);
}

.aorge-nav .brand-image,
.page-footer .brand-image {
  display: block;
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.aorge-nav .brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.aorge-nav .brand-text strong {
  color: var(--nav-ink);
  font: 700 1.02rem/1.15 "Noto Sans SC", sans-serif;
  letter-spacing: .12em;
}

.aorge-nav .brand-text em {
  margin-top: 3px;
  color: var(--nav-muted);
  font: 400 .6rem/1.15 "Chakra Petch", "Noto Sans SC", sans-serif;
  letter-spacing: .32em;
  font-style: normal;
}

.aorge-nav .nav-links {
  position: absolute;
  left: 50%;
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.35vw, 34px);
  margin: 0;
  transform: translateX(-50%);
}

.aorge-nav .nav-mobile-toggle { display: none; }

.aorge-nav .nav-menu {
  position: relative;
  display: flex;
  align-items: center;
}

.aorge-nav .nav-menu::after {
  position: absolute;
  top: 100%;
  right: -8px;
  left: -8px;
  height: 14px;
  content: "";
}

.aorge-nav .nav-link,
.aorge-nav .nav-menu-toggle {
  color: var(--nav-muted);
  font: 400 .9rem/1.2 "Chakra Petch", "Noto Sans SC", sans-serif;
  letter-spacing: .08em;
}

.aorge-nav .nav-link {
  position: relative;
  text-decoration: none;
  white-space: nowrap;
}

.aorge-nav .nav-link::after {
  position: absolute;
  right: 0;
  bottom: -8px;
  left: 0;
  height: 1px;
  content: "";
  background: var(--nav-amber);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s ease;
}

.aorge-nav .nav-link:hover,
.aorge-nav .nav-link[aria-current="page"],
.aorge-nav .nav-menu:focus-within > .nav-link {
  color: var(--nav-ink);
}

.aorge-nav .nav-link:hover::after,
.aorge-nav .nav-link[aria-current="page"]::after,
.aorge-nav .nav-menu:focus-within > .nav-link::after {
  transform: scaleX(1);
  transform-origin: left;
}

.aorge-nav .nav-menu-toggle {
  width: 18px;
  height: 24px;
  margin-left: 3px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.aorge-nav .nav-menu-toggle::before {
  display: block;
  width: 6px;
  height: 6px;
  margin: 0 auto;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  content: "";
  transform: translateY(-2px) rotate(45deg);
  transition: transform .25s ease;
}

.aorge-nav .nav-menu-toggle[aria-expanded="true"]::before {
  transform: translateY(2px) rotate(225deg);
}

.aorge-nav .nav-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  min-width: 218px;
  padding: 8px;
  border: 1px solid var(--nav-line);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 18px 38px rgba(43, 53, 55, .13);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -8px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}

.aorge-nav .nav-dropdown::before {
  position: absolute;
  top: -6px;
  left: 50%;
  width: 10px;
  height: 10px;
  border-top: 1px solid var(--nav-line);
  border-left: 1px solid var(--nav-line);
  background: #fff;
  content: "";
  transform: translateX(-50%) rotate(45deg);
}

.aorge-nav .nav-menu:hover .nav-dropdown,
.aorge-nav .nav-menu:focus-within .nav-dropdown,
.aorge-nav .nav-menu.is-open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.aorge-nav .nav-dropdown a {
  display: block;
  padding: 10px 12px;
  color: var(--nav-muted);
  font: 400 .72rem/1.3 "Chakra Petch", "Noto Sans SC", sans-serif;
  letter-spacing: .06em;
  text-decoration: none;
  transition: color .2s ease, background .2s ease, padding .2s ease;
}

.aorge-nav .nav-dropdown a:hover,
.aorge-nav .nav-dropdown a[aria-current="page"] {
  color: var(--nav-deep);
  background: rgba(207, 134, 31, .09);
  padding-left: 16px;
}

.aorge-nav .nav-cta {
  flex: 0 0 auto;
  padding: 10px 22px;
  border-radius: 2px;
  color: #fff;
  background: linear-gradient(135deg, var(--nav-amber), var(--nav-deep));
  box-shadow: 0 0 0 1px rgba(157, 95, 18, .25), 0 12px 32px -10px rgba(157, 95, 18, .28);
  font: 600 .85rem/1.2 "Chakra Petch", "Noto Sans SC", sans-serif;
  letter-spacing: .1em;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .3s ease;
}

.aorge-nav .nav-cta:hover,
.aorge-nav .nav-cta[aria-current="page"] {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(157, 95, 18, .45), 0 20px 44px -12px rgba(157, 95, 18, .35);
}

.aorge-nav a:focus-visible,
.aorge-nav button:focus-visible {
  outline: 2px solid var(--nav-amber);
  outline-offset: 4px;
}

@media (max-width: 1120px) {
  .aorge-nav .nav-links { gap: 16px; }
  .aorge-nav .nav-link,
  .aorge-nav .nav-menu-toggle { font-size: .78rem; }
}

@media (min-width: 961px) and (max-width: 1300px) {
  .aorge-nav .nav-links {
    gap: 14px;
    margin: 0;
  }

  .aorge-nav .nav-link,
  .aorge-nav .nav-menu-toggle { font-size: .76rem; }

  .aorge-nav .nav-cta { padding-inline: 15px; }
}

@media (max-width: 960px) {
  .aorge-nav {
    flex-wrap: wrap;
    gap: 10px 18px;
    padding-block: 16px;
  }

  .aorge-nav .nav-links {
    position: static;
    order: 3;
    flex: 1 0 100%;
    justify-content: flex-start;
    margin: 0;
    padding: 4px 0 6px;
    transform: none;
  }
}

@media (max-width: 640px) {
  .aorge-nav { position: sticky; gap: 10px 12px; }
  .aorge-nav .brand-text strong { font-size: .9rem; }
  .aorge-nav .brand-text em { font-size: .54rem; }
  .aorge-nav .nav-mobile-toggle {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding: 7px 9px;
    border: 1px solid var(--nav-line);
    color: var(--nav-muted);
    background: rgba(255,255,255,.5);
    font: 600 .64rem/1 "Chakra Petch", "Noto Sans SC", sans-serif;
    letter-spacing: .1em;
    cursor: pointer;
  }
  .aorge-nav .nav-mobile-toggle-icon { display: grid; gap: 4px; width: 16px; }
  .aorge-nav .nav-mobile-toggle-icon i { display: block; height: 1px; background: currentColor; transition: transform .25s ease, opacity .25s ease; }
  .aorge-nav.is-mobile-open .nav-mobile-toggle-icon i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .aorge-nav.is-mobile-open .nav-mobile-toggle-icon i:nth-child(2) { opacity: 0; }
  .aorge-nav.is-mobile-open .nav-mobile-toggle-icon i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
  .aorge-nav .nav-links {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
    align-items: stretch;
    flex-direction: column;
    gap: 0;
    padding: 8px clamp(16px, 4vw, 28px) 14px;
    border-bottom: 1px solid var(--nav-line);
    background: rgba(255,255,255,.97);
    box-shadow: 0 18px 30px rgba(43,53,55,.12);
    transform: none;
  }

  .aorge-nav.is-mobile-open .nav-links { display: flex; }
  .aorge-nav .nav-links > .nav-link,
  .aorge-nav .nav-menu > .nav-link { padding: 12px 4px; }
  .aorge-nav .nav-link::after { bottom: 4px; }

  .aorge-nav .nav-menu { flex-wrap: wrap; }
  .aorge-nav .nav-menu.is-open { flex-basis: 100%; }
  .aorge-nav .nav-dropdown {
    position: static;
    flex: 1 0 100%;
    min-width: 0;
    margin-top: 8px;
    padding: 5px;
    transform: none;
  }

  .aorge-nav .nav-dropdown::before { display: none; }
  .aorge-nav .nav-menu:not(.is-open) .nav-dropdown { display: none; }
  .aorge-nav .nav-menu.is-open .nav-dropdown { display: block; }
  .aorge-nav .nav-cta { padding: 9px 14px; font-size: .72rem; }
}

/* Shared brand-reveal footer — every page uses the same light closing reveal. */
.site-footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 6;
  display: grid;
  width: 100%;
  height: var(--site-footer-height, 50vh);
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(900px 480px at 50% 118%, rgba(207, 134, 31, .14), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #e8eeed 100%);
  transform: translateY(100%);
  visibility: hidden;
  will-change: transform;
  transition: transform .65s var(--ease-out, cubic-bezier(.16, 1, .3, 1)), visibility 0s .65s;
}

.site-footer.revealed {
  transform: translateY(0);
  visibility: visible;
  transition: transform .65s var(--ease-out, cubic-bezier(.16, 1, .3, 1)), visibility 0s 0s;
}

.footer-wheels { position: absolute; inset: 0; z-index: 1; }
.site-footer .fw {
  position: absolute;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  filter: contrast(1.12) saturate(.72) drop-shadow(0 18px 30px rgba(32, 42, 50, .18));
  mix-blend-mode: multiply;
  opacity: .46;
}
.site-footer .fw-1 { width: clamp(150px, 20vw, 260px); left: 3%; top: 50%; animation: aorge-footer-spin 46s linear infinite; opacity: .6; transform: translateY(-50%); }
.site-footer .fw-2 { width: clamp(120px, 15vw, 200px); left: 20%; top: 16%; animation: aorge-footer-spin 34s linear infinite reverse; opacity: .4; }
.site-footer .fw-3 { width: clamp(170px, 24vw, 320px); right: 4%; top: 50%; animation: aorge-footer-spin 52s linear infinite; opacity: .6; transform: translateY(-50%); }
.site-footer .fw-4 { width: clamp(110px, 13vw, 180px); right: 22%; top: 12%; animation: aorge-footer-spin 30s linear infinite reverse; opacity: .38; }
.site-footer .fw-5 { width: clamp(100px, 12vw, 160px); left: 42%; bottom: 6%; animation: aorge-footer-spin 40s linear infinite; opacity: .3; }
.footer-brand { position: relative; z-index: 2; text-align: center; }
.footer-logo {
  display: block;
  color: transparent;
  font-family: var(--font-tech, "Chakra Petch", "Noto Sans SC", sans-serif);
  font-size: clamp(3.2rem, 12vw, 9rem);
  font-weight: 700;
  letter-spacing: .22em;
  line-height: 1;
  text-indent: .22em;
  background: linear-gradient(100deg, #202a32 18%, #9d5f12 52%, #cf861f 62%, #202a32 90%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: aorge-footer-shimmer 7s ease-in-out infinite;
}
.footer-tag {
  display: block;
  margin-top: 14px;
  color: #9d5f12;
  font-family: var(--font-tech, "Chakra Petch", "Noto Sans SC", sans-serif);
  font-size: clamp(.7rem, 1.4vw, .95rem);
  letter-spacing: .55em;
  text-indent: .55em;
}

@keyframes aorge-footer-spin { to { transform: rotate(360deg); } }
@keyframes aorge-footer-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@media (max-width: 640px) {
  .site-footer .fw-2,
  .site-footer .fw-4 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .aorge-nav * { transition-duration: .01ms !important; }
}

/* Shared AEG light page footer — kept in sync with the homepage footer. */
.page-footer {
  position: relative;
  z-index: 5;
  border-top: 1px solid rgba(95, 111, 116, .2);
  background: linear-gradient(180deg, #fff 0%, #ecefeb 100%);
  padding: clamp(50px, 8vh, 88px) clamp(20px, 4vw, 56px) 0;
  color: #5d6870;
}

/* The footer component may sit inside a centered content shell. Keep its
   visible surface aligned with the homepage and the viewport edges. */
.page-footer {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
}

.page-footer .pf-inner { max-width: 1280px; margin: 0 auto; }
.page-footer .pf-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(36px, 5vh, 56px);
}

.page-footer .pf-brand .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  color: #202a32;
  text-decoration: none;
}

.page-footer .brand-mark { width: 38px; height: 38px; color: #cf861f; }
.page-footer .brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.page-footer .brand-text strong {
  color: #202a32;
  font: 700 1.02rem/1.15 "Noto Sans SC", sans-serif;
  letter-spacing: .12em;
}
.page-footer .brand-text em {
  margin-top: 3px;
  color: #5d6870;
  font: 400 .6rem/1.15 "Chakra Petch", "Noto Sans SC", sans-serif;
  letter-spacing: .32em;
  font-style: normal;
}

.page-footer .pf-desc {
  max-width: 34ch;
  color: #8b9599;
  font-size: .82rem;
  font-weight: 300;
  line-height: 1.8;
}

.page-footer .pf-col h4 {
  margin: 0 0 18px;
  color: #9d5f12;
  font: 600 .74rem/1.2 "Chakra Petch", "Noto Sans SC", sans-serif;
  letter-spacing: .22em;
}

.page-footer .pf-col ul {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-footer .pf-col li {
  color: #5d6870;
  font-size: .82rem;
  font-weight: 300;
  letter-spacing: .03em;
  line-height: 1.4;
  transition: color .3s;
}

.page-footer .pf-col li:hover { color: #202a32; }
.page-footer .pf-col a { color: inherit; text-decoration: none; }
.page-footer .pf-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  border-top: 1px solid rgba(95, 111, 116, .2);
  padding: 22px 0 26px;
  color: #8b9599;
  font: 400 .72rem/1.4 "Chakra Petch", "Noto Sans SC", sans-serif;
  letter-spacing: .12em;
}

@media (max-width: 960px) {
  .page-footer .pf-grid { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
}

@media (max-width: 640px) {
  .page-footer .pf-grid { grid-template-columns: 1fr; row-gap: 30px; }
  .page-footer .pf-bottom { justify-content: center; text-align: center; }
}