/* ==========================================================
   AXISMER GLOBAL CHROME V1
   Single source of truth:
   Header + Navigation + Footer
   ========================================================== */


/* ----------------------------------------------------------
   HEADER
   ---------------------------------------------------------- */

.axismer-global-header{
  position:absolute !important;
  z-index:1000 !important;

  top:0 !important;
  left:0 !important;

  width:100% !important;
  height:92px !important;

  display:grid !important;
  grid-template-columns:1fr auto 1fr !important;
  align-items:center !important;

  padding:
    0 clamp(28px,4.3vw,76px) !important;

  border-bottom:
    1px solid rgba(255,255,255,.08) !important;

  background:transparent !important;

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif !important;
}


.axismer-global-header .brand{
  display:block !important;

  justify-self:start !important;

  margin:0 !important;
  padding:0 !important;
}


.axismer-global-header .brand-logo{
  display:block !important;

  width:164px !important;
  height:auto !important;

  max-width:none !important;

  margin:0 !important;
  padding:0 !important;

  opacity:1 !important;
}


.axismer-global-header .global-nav{
  display:flex !important;

  align-items:center !important;
  justify-content:center !important;

  gap:34px !important;

  margin:0 !important;
  padding:0 !important;
}


.axismer-global-header .global-nav a{
  position:relative !important;

  display:block !important;

  margin:0 !important;
  padding:0 !important;

  font-family:inherit !important;

  font-size:11px !important;
  font-weight:400 !important;

  line-height:1 !important;

  letter-spacing:0 !important;
  text-transform:none !important;

  color:rgba(255,255,255,.54) !important;

  transition:
    color .25s ease !important;
}


.axismer-global-header .global-nav a:hover,
.axismer-global-header .global-nav a.active{
  color:#fff !important;
}


.axismer-global-header .global-nav a.active::after{
  content:"" !important;

  position:absolute !important;

  left:0 !important;
  right:0 !important;
  bottom:-10px !important;

  height:1px !important;

  background:#d9d2c9 !important;
}


.axismer-global-header .global-cta{
  justify-self:end !important;

  display:inline-flex !important;

  align-items:center !important;
  gap:6px !important;

  margin:0 !important;

  padding:
    12px 17px !important;

  border:
    1px solid rgba(255,255,255,.18) !important;

  border-radius:999px !important;

  background:transparent !important;

  font-family:inherit !important;

  font-size:10px !important;
  font-weight:400 !important;

  line-height:1 !important;

  letter-spacing:.02em !important;
  text-transform:none !important;

  color:rgba(255,255,255,.78) !important;

  transition:
    border-color .25s ease,
    background .25s ease,
    color .25s ease !important;
}


.axismer-global-header .global-cta:hover{
  border-color:
    rgba(255,255,255,.42) !important;

  background:
    rgba(255,255,255,.04) !important;

  color:#fff !important;
}


.axismer-global-header .global-cta span{
  display:inline-block !important;

  transition:
    transform .25s ease !important;
}


.axismer-global-header .global-cta:hover span{
  transform:
    translate(2px,-2px) !important;
}



/* ----------------------------------------------------------
   FOOTER
   ---------------------------------------------------------- */

.axismer-global-footer{
  position:relative !important;

  min-height:185px !important;

  display:grid !important;

  grid-template-columns:
    1fr auto 1fr !important;

  grid-template-rows:
    1fr auto !important;

  align-items:center !important;

  padding:
    38px
    clamp(28px,4.3vw,76px)
    24px !important;

  margin:0 !important;

  background:#e8e3db !important;
  color:#151515 !important;

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif !important;
}


.axismer-global-footer .global-footer-brand{
  position:relative !important;

  justify-self:start !important;

  width:190px !important;
  height:58px !important;

  margin:0 !important;
  padding:0 !important;
}


.axismer-global-footer .global-footer-brand img{
  display:block !important;

  width:170px !important;
  height:auto !important;

  max-width:none !important;

  margin:0 !important;
  padding:0 !important;

  filter:
    grayscale(1)
    brightness(.16)
    contrast(1.35) !important;

  opacity:.96 !important;
}


.axismer-global-footer .global-footer-brand small{
  position:absolute !important;

  left:42px !important;
  top:38px !important;

  display:block !important;

  width:max-content !important;

  margin:0 !important;
  padding:0 !important;

  white-space:nowrap !important;

  font-size:9px !important;
  font-weight:400 !important;

  line-height:1 !important;

  letter-spacing:.015em !important;

  color:
    rgba(30,30,30,.48) !important;
}


.axismer-global-footer .global-footer-nav{
  justify-self:center !important;

  display:flex !important;

  align-items:center !important;

  gap:28px !important;

  margin:0 !important;
  padding:0 !important;
}


.axismer-global-footer .global-footer-nav a{
  margin:0 !important;
  padding:0 !important;

  font-family:inherit !important;

  font-size:10px !important;
  font-weight:400 !important;

  line-height:1 !important;

  letter-spacing:0 !important;
  text-transform:none !important;

  color:#66615b !important;

  transition:
    color .2s ease !important;
}


.axismer-global-footer .global-footer-nav a:hover{
  color:#151515 !important;
}


.axismer-global-footer .global-footer-signature{
  justify-self:end !important;

  margin:0 !important;
  padding:0 !important;

  font-family:inherit !important;

  font-size:13px !important;
  font-weight:400 !important;

  line-height:1.35 !important;

  letter-spacing:0 !important;
  text-transform:none !important;

  color:#514d48 !important;
}


.axismer-global-footer .global-copyright{
  grid-column:1 / -1 !important;

  justify-self:center !important;

  margin:0 !important;
  padding:0 !important;

  font-family:inherit !important;

  font-size:8px !important;
  font-weight:400 !important;

  line-height:1 !important;

  letter-spacing:0 !important;
  text-transform:none !important;

  color:#8b857e !important;
}



/* ----------------------------------------------------------
   TABLET
   ---------------------------------------------------------- */

@media(max-width:1000px){

  .axismer-global-header{
    grid-template-columns:
      1fr auto !important;
  }

  .axismer-global-header .global-nav{
    display:none !important;
  }

}



/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media(max-width:700px){

  .axismer-global-header{
    height:78px !important;

    padding:
      0 20px !important;
  }

  .axismer-global-header .brand-logo{
    width:140px !important;
  }

  .axismer-global-header .global-cta{
    padding:
      10px 12px !important;

    font-size:9px !important;
  }


  .axismer-global-footer{
    min-height:auto !important;

    display:flex !important;
    flex-direction:column !important;

    align-items:flex-start !important;

    gap:30px !important;

    padding:
      45px 22px 25px !important;
  }

  .axismer-global-footer .global-footer-brand{
    width:170px !important;
    height:54px !important;
  }

  .axismer-global-footer .global-footer-brand img{
    width:150px !important;
  }

  .axismer-global-footer .global-footer-brand small{
    left:37px !important;
    top:34px !important;

    font-size:8px !important;
  }

  .axismer-global-footer .global-footer-nav{
    justify-self:auto !important;

    flex-wrap:wrap !important;

    gap:
      18px 25px !important;
  }

  .axismer-global-footer .global-footer-signature{
    justify-self:auto !important;
  }

  .axismer-global-footer .global-copyright{
    align-self:center !important;
  }

}


/* ==========================================================
   AXISMER GLOBAL HEADER — PREMIUM V2
   ========================================================== */


/* Larger corporate lockup */

.axismer-global-header .brand-logo{
  width:205px !important;
  height:auto !important;

  filter:
    drop-shadow(0 2px 10px rgba(0,0,0,.16)) !important;

  transition:
    opacity .3s ease,
    transform .35s cubic-bezier(.22,.61,.36,1) !important;
}

.axismer-global-header .brand:hover .brand-logo{
  transform:translateY(-1px) !important;
}


/* Premium navigation */

.axismer-global-header .global-nav{
  gap:38px !important;
}

.axismer-global-header .global-nav a{
  position:relative !important;

  padding:10px 2px !important;

  font-size:10px !important;
  font-weight:500 !important;

  letter-spacing:.075em !important;

  color:rgba(246,245,243,.58) !important;

  transition:
    color .3s ease,
    opacity .3s ease !important;
}


/* Subtle metallic underline */

.axismer-global-header .global-nav a::after{
  content:"" !important;

  position:absolute !important;

  left:50% !important;
  right:auto !important;
  bottom:2px !important;

  width:0 !important;
  height:1px !important;

  transform:translateX(-50%) !important;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(217,210,201,.95),
      transparent
    ) !important;

  opacity:0 !important;

  transition:
    width .32s cubic-bezier(.22,.61,.36,1),
    opacity .32s ease !important;
}


.axismer-global-header .global-nav a:hover{
  color:#f6f5f3 !important;
}


.axismer-global-header .global-nav a:hover::after{
  width:100% !important;
  opacity:.8 !important;
}


/* Current page */

.axismer-global-header .global-nav a.active{
  color:#f6f5f3 !important;
}


.axismer-global-header .global-nav a.active::after{
  left:50% !important;
  right:auto !important;
  bottom:2px !important;

  width:100% !important;

  transform:translateX(-50%) !important;

  opacity:.65 !important;
}


/* Premium Rooted Life CTA */

.axismer-global-header .global-cta{
  position:relative !important;

  overflow:hidden !important;

  min-width:158px !important;

  justify-content:center !important;

  padding:
    13px 19px !important;

  border:
    1px solid rgba(217,210,201,.32) !important;

  border-radius:999px !important;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.075),
      rgba(255,255,255,.018)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 8px 30px rgba(0,0,0,.10) !important;

  backdrop-filter:
    blur(12px) !important;

  -webkit-backdrop-filter:
    blur(12px) !important;

  font-size:10px !important;
  font-weight:500 !important;

  letter-spacing:.045em !important;

  color:rgba(246,245,243,.88) !important;

  transition:
    border-color .3s ease,
    background .3s ease,
    box-shadow .3s ease,
    transform .3s cubic-bezier(.22,.61,.36,1) !important;
}


/* Soft metallic light */

.axismer-global-header .global-cta::before{
  content:"" !important;

  position:absolute !important;

  top:0 !important;
  left:-65% !important;

  width:45% !important;
  height:100% !important;

  transform:skewX(-22deg) !important;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.13),
      transparent
    ) !important;

  transition:
    left .55s cubic-bezier(.22,.61,.36,1) !important;

  pointer-events:none !important;
}


.axismer-global-header .global-cta:hover{
  transform:translateY(-1px) !important;

  border-color:
    rgba(217,210,201,.58) !important;

  background:
    linear-gradient(
      135deg,
      rgba(217,210,201,.12),
      rgba(255,255,255,.035)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 10px 35px rgba(0,0,0,.18),
    0 0 24px rgba(217,210,201,.045) !important;
}


.axismer-global-header .global-cta:hover::before{
  left:125% !important;
}


.axismer-global-header .global-cta span{
  margin-left:2px !important;

  font-size:12px !important;

  color:#d9d2c9 !important;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media(max-width:1000px){

  .axismer-global-header .brand-logo{
    width:190px !important;
  }

}


@media(max-width:700px){

  .axismer-global-header .brand-logo{
    width:160px !important;
  }

  .axismer-global-header .global-cta{
    min-width:auto !important;

    padding:
      10px 13px !important;

    font-size:8.5px !important;
  }

}


/* ==========================================================
   AXISMER GLOBAL NAV — HERO TYPOGRAPHIC LANGUAGE
   ========================================================== */

.axismer-global-header .global-nav{
  gap:40px !important;
}


/* Same typographic family as AXISMER hero */

.axismer-global-header .global-nav a{
  font-family:
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif !important;

  font-size:14px !important;
  font-weight:400 !important;

  line-height:1 !important;

  letter-spacing:-.035em !important;

  color:#d9d2c9 !important;

  opacity:.72 !important;

  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;

  transition:
    color .3s ease,
    opacity .3s ease,
    transform .3s cubic-bezier(.22,.61,.36,1) !important;
}


/* Ivory / warm-stone interaction */

.axismer-global-header .global-nav a:hover{
  color:#f6f5f3 !important;

  opacity:1 !important;

  transform:translateY(-1px) !important;
}


/* Current section */

.axismer-global-header .global-nav a.active{
  color:#f6f5f3 !important;

  opacity:1 !important;
}


/* Remove conventional underline */

.axismer-global-header .global-nav a::after{
  display:none !important;
}


/* Very subtle glow on hover */

.axismer-global-header .global-nav a:hover{
  text-shadow:
    0 0 18px rgba(246,245,243,.10) !important;
}


/* CTA follows same typography */

.axismer-global-header .global-cta{
  font-family:
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif !important;

  font-size:13px !important;
  font-weight:400 !important;

  letter-spacing:-.025em !important;

  color:#e7e1d9 !important;
}


.axismer-global-header .global-cta span{
  color:#d9d2c9 !important;
}


/* Responsive */

@media(max-width:1100px){

  .axismer-global-header .global-nav{
    gap:30px !important;
  }

  .axismer-global-header .global-nav a{
    font-size:13px !important;
  }

}


/* ==========================================================
   AXISMER GLOBAL NAV — CONNECTION NODES V1
   ========================================================== */

.axismer-global-header .global-nav{
  gap:0 !important;
}


/* Each menu item becomes part of a connected sequence */

.axismer-global-header .global-nav a{
  display:flex !important;
  align-items:center !important;

  overflow:visible !important;
}


/* spacing after every item except the last */

.axismer-global-header .global-nav a:not(:last-child){
  margin-right:38px !important;
}


/* Connection node */

.axismer-global-header .global-nav a:not(:last-child)::after{
  content:"" !important;

  display:block !important;

  position:absolute !important;

  top:50% !important;
  left:calc(100% + 18px) !important;

  width:3px !important;
  height:3px !important;

  margin:0 !important;

  border-radius:50% !important;

  transform:translate(-50%,-50%) !important;

  background:#d9d2c9 !important;

  opacity:.38 !important;

  box-shadow:
    0 0 0 3px rgba(217,210,201,.025),
    0 0 9px rgba(217,210,201,.12) !important;

  transition:
    opacity .35s ease,
    box-shadow .35s ease,
    transform .35s cubic-bezier(.22,.61,.36,1) !important;

  pointer-events:none !important;
}


/* The network subtly wakes up when interacting with nav */

.axismer-global-header .global-nav:hover
a:not(:last-child)::after{
  opacity:.62 !important;

  box-shadow:
    0 0 0 3px rgba(217,210,201,.04),
    0 0 12px rgba(217,210,201,.20) !important;
}


/* Node next to the item being explored */

.axismer-global-header .global-nav
a:not(:last-child):hover::after{
  opacity:1 !important;

  transform:
    translate(-50%,-50%)
    scale(1.35) !important;

  box-shadow:
    0 0 0 4px rgba(217,210,201,.045),
    0 0 15px rgba(217,210,201,.32) !important;
}


/* Active page influences its following node */

.axismer-global-header .global-nav
a.active:not(:last-child)::after{
  opacity:.8 !important;

  box-shadow:
    0 0 0 3px rgba(217,210,201,.04),
    0 0 12px rgba(217,210,201,.24) !important;
}


@media(max-width:1100px){

  .axismer-global-header .global-nav
  a:not(:last-child){
    margin-right:30px !important;
  }

  .axismer-global-header .global-nav
  a:not(:last-child)::after{
    left:calc(100% + 14px) !important;
  }

}


/* ==========================================================
   AXISMER GLOBAL NAV — UPPERCASE
   ========================================================== */

.axismer-global-header .global-nav a{
  font-family:
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif !important;

  font-size:11px !important;
  font-weight:400 !important;

  letter-spacing:.095em !important;

  text-transform:uppercase !important;
}


/* Keep CTA slightly distinct from primary navigation */

.axismer-global-header .global-cta{
  font-family:
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif !important;

  font-size:12px !important;
  font-weight:400 !important;

  letter-spacing:.01em !important;

  text-transform:none !important;
}


/* ==========================================================
   AXISMER GLOBAL NAV — ACTIVE AXIS NODE V2
   ========================================================== */


/* Base connection nodes */

.axismer-global-header .global-nav
a:not(:last-child)::after{
  width:3px !important;
  height:3px !important;

  background:rgba(217,210,201,.65) !important;

  opacity:.42 !important;

  box-shadow:
    0 0 0 0 rgba(217,210,201,0),
    0 0 6px rgba(217,210,201,.08) !important;
}


/* Active page typography */

.axismer-global-header .global-nav a.active{
  color:#f6f5f3 !important;
  opacity:1 !important;

  text-shadow:
    0 0 16px rgba(246,245,243,.08) !important;
}


/* Active AXIS node */

.axismer-global-header .global-nav
a.active:not(:last-child)::after{
  width:4px !important;
  height:4px !important;

  background:#f6f5f3 !important;

  opacity:1 !important;

  box-shadow:
    0 0 0 3px rgba(217,210,201,.055),
    0 0 8px rgba(246,245,243,.30),
    0 0 18px rgba(217,210,201,.20) !important;

  animation:
    axismer-node-breathe 3.8s ease-in-out infinite !important;
}


/* Hovered node */

.axismer-global-header .global-nav
a:not(:last-child):hover::after{
  width:4px !important;
  height:4px !important;

  background:#e9e3da !important;

  opacity:.9 !important;

  box-shadow:
    0 0 0 3px rgba(217,210,201,.04),
    0 0 10px rgba(217,210,201,.22) !important;
}


/* Very restrained breathing effect */

@keyframes axismer-node-breathe{

  0%,
  100%{
    transform:
      translate(-50%,-50%)
      scale(1);

    box-shadow:
      0 0 0 3px rgba(217,210,201,.045),
      0 0 7px rgba(246,245,243,.24),
      0 0 15px rgba(217,210,201,.14);
  }

  50%{
    transform:
      translate(-50%,-50%)
      scale(1.18);

    box-shadow:
      0 0 0 4px rgba(217,210,201,.07),
      0 0 10px rgba(246,245,243,.38),
      0 0 22px rgba(217,210,201,.23);
  }

}


/* Accessibility */

@media(prefers-reduced-motion:reduce){

  .axismer-global-header .global-nav
  a.active:not(:last-child)::after{
    animation:none !important;
  }

}
