:root{
  --sar-nav-pine:#173b32;
  --sar-nav-pine-2:#214d40;
  --sar-nav-cream:#f7f2e8;
  --sar-nav-rust:#bd6438;
  --sar-nav-ink:#17201d;
  --sar-nav-muted:#66706b;
  --sar-nav-line:rgba(23,59,50,.14);
  --sar-nav-shadow:0 18px 50px rgba(15,42,35,.15);
}

html{scroll-padding-top:88px}

.sar-nav{
  position:sticky;
  top:0;
  z-index:1000;
  width:100%;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--sar-nav-line);
  box-shadow:0 4px 20px rgba(15,42,35,.05);
  color:var(--sar-nav-ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  backdrop-filter:blur(14px);
}

.sar-nav *{box-sizing:border-box}
.sar-nav a{color:inherit;text-decoration:none}
.sar-nav button{font:inherit}

.sar-nav__shell{
  width:min(1220px,calc(100% - 48px));
  min-height:76px;
  margin:auto;
  display:flex;
  align-items:center;
  gap:28px;
}

.sar-nav__brand{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:46px auto;
  grid-template-rows:auto auto;
  column-gap:11px;
  align-items:center;
  color:var(--sar-nav-pine);
  line-height:1;
}

.sar-nav__brand::before{
  content:"";
  grid-column:1;
  grid-row:1 / 3;
  width:46px;
  height:46px;
  background:url("/assets/springs-airport-rentals-logo.png") center/contain no-repeat;
}

.sar-nav__brand strong{
  grid-column:2;
  grid-row:1;
  font-family:Georgia,"Times New Roman",serif;
  font-size:20px;
  letter-spacing:-.025em;
}

.sar-nav__brand span{
  grid-column:2;
  grid-row:2;
  margin-top:6px;
  color:var(--sar-nav-muted);
  font-size:9px;
  font-weight:850;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.sar-nav__menu{
  min-width:0;
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:4px;
}

.sar-nav__link,.sar-nav__drop-toggle{
  min-height:44px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 12px;
  border:0;
  border-radius:12px;
  background:transparent;
  color:var(--sar-nav-pine);
  font-size:14px;
  font-weight:760;
  cursor:pointer;
  white-space:nowrap;
}

.sar-nav__link:hover,.sar-nav__drop-toggle:hover,
.sar-nav__link:focus-visible,.sar-nav__drop-toggle:focus-visible{
  background:var(--sar-nav-cream);
  outline:none;
}

.sar-nav__link[aria-current="page"],
.sar-nav__drop.is-current>.sar-nav__drop-toggle{
  color:var(--sar-nav-rust);
}

.sar-nav__chevron{
  width:7px;
  height:7px;
  border-right:1.8px solid currentColor;
  border-bottom:1.8px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform .18s ease;
}

.sar-nav__drop{position:relative}
.sar-nav__drop.is-open .sar-nav__chevron{transform:rotate(225deg) translate(-1px,-1px)}

.sar-nav__panel{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  width:300px;
  padding:10px;
  border:1px solid var(--sar-nav-line);
  border-radius:18px;
  background:#fff;
  box-shadow:var(--sar-nav-shadow);
  opacity:0;
  visibility:hidden;
  transform:translateY(-7px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s ease;
}

.sar-nav__drop:nth-last-of-type(1) .sar-nav__panel{left:auto;right:0}
.sar-nav__drop.is-open>.sar-nav__panel,
.sar-nav__drop:focus-within>.sar-nav__panel{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.sar-nav__panel a{
  display:block;
  padding:12px 13px;
  border-radius:12px;
  color:var(--sar-nav-pine);
}

.sar-nav__panel a:hover,.sar-nav__panel a:focus-visible{
  background:var(--sar-nav-cream);
  outline:none;
}

.sar-nav__panel strong{display:block;font-size:14px}
.sar-nav__panel span{
  display:block;
  margin-top:3px;
  color:var(--sar-nav-muted);
  font-size:12px;
  line-height:1.4;
}

.sar-nav__cta{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:8px;
  padding:0 17px;
  border-radius:999px;
  background:var(--sar-nav-pine);
  color:#fff!important;
  font-size:13px;
  font-weight:850;
  white-space:nowrap;
  transition:background .16s ease,transform .16s ease;
}

.sar-nav__cta:hover,.sar-nav__cta:focus-visible{
  background:var(--sar-nav-pine-2);
  transform:translateY(-1px);
  outline:none;
}

.sar-nav__mobile-toggle{
  display:none;
  width:44px;
  height:44px;
  margin-left:auto;
  padding:0;
  border:1px solid var(--sar-nav-line);
  border-radius:12px;
  background:#fff;
  color:var(--sar-nav-pine);
  cursor:pointer;
}

.sar-nav__mobile-toggle span,
.sar-nav__mobile-toggle::before,
.sar-nav__mobile-toggle::after{
  content:"";
  display:block;
  width:19px;
  height:2px;
  margin:4px auto;
  border-radius:2px;
  background:currentColor;
  transition:transform .18s ease,opacity .18s ease;
}

.sar-nav.menu-open .sar-nav__mobile-toggle span{opacity:0}
.sar-nav.menu-open .sar-nav__mobile-toggle::before{transform:translateY(6px) rotate(45deg)}
.sar-nav.menu-open .sar-nav__mobile-toggle::after{transform:translateY(-6px) rotate(-45deg)}

@media (max-width:1050px){
  .sar-nav__shell{min-height:68px}
  .sar-nav__mobile-toggle{display:block}
  .sar-nav__menu{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    max-height:calc(100vh - 68px);
    overflow:auto;
    display:none;
    padding:14px max(24px,calc((100vw - 1180px)/2 + 24px)) 22px;
    border-top:1px solid var(--sar-nav-line);
    background:#fff;
    box-shadow:0 22px 40px rgba(15,42,35,.13);
  }
  .sar-nav.menu-open .sar-nav__menu{display:block}
  .sar-nav__link,.sar-nav__drop-toggle{
    width:100%;
    min-height:48px;
    justify-content:space-between;
    padding:0 10px;
    border-bottom:1px solid rgba(23,59,50,.08);
    border-radius:0;
  }
  .sar-nav__drop{width:100%}
  .sar-nav__panel{
    position:static;
    width:auto;
    margin:0 0 8px;
    padding:5px 8px 10px 17px;
    border:0;
    border-left:2px solid #e8ded0;
    border-radius:0;
    box-shadow:none;
    opacity:1;
    visibility:visible;
    transform:none;
    display:none;
  }
  .sar-nav__drop.is-open>.sar-nav__panel{display:block}
  .sar-nav__panel a{padding:10px}
  .sar-nav__cta{width:100%;margin:14px 0 0;min-height:48px}
}

@media (max-width:580px){
  .sar-nav__shell{width:calc(100% - 30px)}
  .sar-nav__brand{grid-template-columns:38px auto;column-gap:8px}
  .sar-nav__brand::before{width:38px;height:38px}
  .sar-nav__brand strong{font-size:17px}
  .sar-nav__brand span{font-size:8px;letter-spacing:.12em}
}

@media (prefers-reduced-motion:reduce){
  .sar-nav *{scroll-behavior:auto!important;transition:none!important}
}
