/* Subtle entrance for the address pill */
.hero-address{opacity:0;transform:translateY(12px)}
.hero-address.reveal{animation:fadeUp .6s ease-out .15s both}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none}}

/* Pill look + arrow nudge on hover/focus */
.hero-address a{
  --pad:.55rem .9rem;
  display:inline-flex;align-items:center;gap:.5rem;
  padding:var(--pad);border-radius:999px;
  background:rgba(0,0,0,.18);color:#ffd166;text-decoration:none;
  box-shadow:0 0.35rem 1.4rem rgba(0,0,0,.25) inset, 0 .2rem .6rem rgba(0,0,0,.25);
  backdrop-filter:saturate(120%) blur(2px);
  transform:translateZ(0);
}
.hero-address a::after{content:"→";font-weight:700;opacity:.85;transform:translateX(0);transition:transform .25s ease,opacity .25s ease}
.hero-address a:hover::after,.hero-address a:focus-visible::after{transform:translateX(4px);opacity:1}
@media (prefers-reduced-motion:reduce){.hero-address{animation:none}.hero-address a::after{transition:none}}

/* Slightly nudge titles upward (adjust if needed) */
.hero-titles{margin-top:-4.5vw}
@media (max-width:768px){.hero-titles{margin-top:-12vw}}
.hero-sub{margin-top:.4rem}
.hero-address{margin-top:.55rem}

/* Mobile logo overlap guard (shrink so it doesn’t collide) */
@media (max-width:640px){
  .site-logo,.header-logo,.nav .logo,.logo,.logo-star{max-height:30px;z-index:0}
}

/* Prevent hero image CLS if using #site-hero picture */
#site-hero{display:block}
#site-hero img{width:100%;height:auto;display:block;aspect-ratio:1280/426}
/* mobile-logo-guard */
@media (max-width:640px){
  .site-logo,.header-logo,.nav .logo,.logo,.logo-star{max-height:30px; z-index:0}
}
/* mobile-logo-guard */
@media (max-width:640px){
  .site-logo,.header-logo,.nav .logo,.logo,.logo-star{max-height:30px; z-index:0}
}
/* mobile-logo-guard */
@media (max-width:640px){
  .site-logo,.header-logo,.nav .logo,.logo,.logo-star{max-height:30px; z-index:0}
}

/* Address pill entrance */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none}}
.hero-address{opacity:0;transform:translateY(12px);animation:fadeUp .6s ease-out .15s both}

/* Pill styling + subtle arrow nudge */
.hero-address a{
  --pad:.55rem .9rem;
  display:inline-flex;align-items:center;gap:.5rem;
  padding:var(--pad);border-radius:999px;
  background:rgba(0,0,0,.18);color:#ffd166;text-decoration:none;
  box-shadow:0 0.35rem 1.4rem rgba(0,0,0,.25) inset, 0 .2rem .6rem rgba(0,0,0,.25);
  backdrop-filter:saturate(120%) blur(2px);
}
.hero-address a::after{content:"→";font-weight:700;opacity:.85;transform:translateX(0);transition:transform .25s ease,opacity .25s ease}
.hero-address a:hover::after,.hero-address a:focus-visible::after{transform:translateX(4px);opacity:1}

@media (prefers-reduced-motion:reduce){
  .hero-address{animation:none}
  .hero-address a::after{transition:none}
}
/* mobile-logo-guard */
@media (max-width:640px){
  .site-logo,.header-logo,.nav .logo,.logo,.logo-star{max-height:30px; z-index:0}
}

/* === Address pill entrance & attention === */
.hero-address{opacity:0;transform:translateY(10px) scale(.98)}
.hero-address.reveal{animation:heroPop .60s cubic-bezier(.19,1,.22,1) .10s forwards}
@keyframes heroPop{
  0%{opacity:0;transform:translateY(12px) scale(.96)}
  60%{opacity:1;transform:translateY(0) scale(1.015)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

/* Subtle breathing glow on the pill itself (does not change layout) */
.hero-address a{
  position:relative;
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.55rem 1rem;border-radius:999px;text-decoration:none;
  transform:translateZ(0);
  box-shadow: 0 .25rem .85rem rgba(0,0,0,.28);
  animation:heroGlow 3.2s ease-in-out 1.2s infinite alternate;
}
.hero-address a::after{
  content:"→"; font-weight:700; opacity:.85;
  transition:transform .22s ease, opacity .22s ease;
}
.hero-address a:hover::after,
.hero-address a:focus-visible::after{ transform:translateX(4px); opacity:1; }

@keyframes heroGlow{
  0%  { filter: drop-shadow(0 0 0 rgba(255,209,102,.0)); }
  100%{ filter: drop-shadow(0 0 .55rem rgba(255,209,102,.55)); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
  .hero-address{animation:none;opacity:1;transform:none}
  .hero-address a{animation:none}
}
/* hero-pill-anim */
.hero .pill-reveal{
  animation: pillEnter .9s cubic-bezier(.16,1,.3,1) both,
             pillBreathe 3.2s ease-in-out 1.1s infinite;
  will-change: transform, filter, box-shadow;
}
@keyframes pillEnter{
  0%  { transform: translateY(14px) scale(.96); filter: blur(2px); opacity:0 }
  60% { transform: translateY(-2px) scale(1.015); filter: blur(0); opacity:1 }
  100%{ transform: translateY(0) scale(1); opacity:1 }
}
@keyframes pillBreathe{
  0%,100%{ box-shadow: 0 .55rem 2rem rgba(0,0,0,.35), 0 0 .65rem rgba(251,191,36,.45) inset }
  50%    { box-shadow: 0 .75rem 2.6rem rgba(0,0,0,.4), 0 0 1.1rem rgba(251,191,36,.65) inset }
}
@media (prefers-reduced-motion: reduce){
  .hero .pill-reveal{ animation:none }
}
/* mobile-logo-guard */
@media (max-width:640px){
  .logo img,.site-logo,.header-logo,.nav .logo,.logo-star{max-height:30px; z-index:0}
}
/* ==== Mobile header + hero tighten ====
   - Hide logo on small screens
   - Reduce nav height
   - Pull hero content (title/subtitle/phone) upward a bit
*/
@media (max-width: 640px){

  /* Hide the logo entirely on phones */
  .logo,
  .site-logo,
  .header-logo,
  .nav .logo,
  .logo-star {
    display: none !important;
  }

  /* Make the navbar slimmer */
  nav { padding: 0.6rem 1rem !important; }

  /* Pull the whole hero content up */
  .hero-content {
    /* was translate(-50%, -50%); move it higher by ~8% */
    transform: translate(-50%, -90%) !important;
  }

  /* Tighten subtitle and bring the phone pill closer */
  .hero-subtitle { margin-top: .25rem !important; }
  .phone-number, a[href^="tel"] { margin-top: .75rem !important; }
}

/* ==== Desktop hero tighten (move titles/phone up) ==== */
@media (min-width: 641px){
  .hero-content{
    /* default was translate(-50%, -50%) */
    transform: translate(-50%, -84%) !important; /* try -58% to start */
  }

  /* optional: tighten spacing just like mobile */
  .hero-subtitle{ margin-top: .25rem !important; }
  .phone-number, a[href^="tel"]{ margin-top: .9rem !important; }
}
/* baseline lift for mountains; tweak to taste */
.hero .mountain-road { --mountain-offset: -120px; }
/* === Footer nav alignment (desktop & mobile) === */
footer .footer-links{
  display:flex !important;
  justify-content:center !important;
  align-items:baseline !important;  /* aligns to text baselines */
  gap:2rem !important;
  flex-wrap:wrap;
}

footer .footer-links a{
  display:inline-flex !important;   /* keeps icon/text aligned */
  align-items:baseline !important;
  line-height:1 !important;         /* predictable baseline math */
  white-space:nowrap;
  text-decoration:none;
  padding:2px 0 0 0;                /* tiny top pad evens baselines */
}

/* micro-nudge the telephone link if it still sits a hair low */
footer .footer-links a[href^="tel"]{
  position:relative; top:-1px;
}