/* Shared Owens Fence navigation */
.oc-nav {
  --oc-nav-black:#0f100d;
  --oc-nav-walnut:#2a1608;
  --oc-nav-oak:#e0a55c;
  --oc-nav-cream:#f3ead2;
  --oc-nav-dim:#b9b09a;
  position:sticky;
  top:0;
  z-index:1000;
  width:100%;
  background:rgba(15,16,13,.98);
  border-bottom:1px solid rgba(224,165,92,.18);
  color:var(--oc-nav-cream);
  font-family:'Inter',system-ui,sans-serif;
  -webkit-tap-highlight-color:transparent
}
.oc-skip-link {
  position:fixed;
  top:8px;
  left:8px;
  z-index:2000;
  padding:12px 16px;
  transform:translateY(-150%);
  background:#f3ead2;
  color:#2a1608;
  border:2px solid #e0a55c;
  border-radius:3px;
  font:800 .85rem/1.2 'Inter',system-ui,sans-serif;
  text-decoration:none
}
.oc-skip-link:focus {
  transform:translateY(0)
}
.oc-nav--overlay {
  position:fixed;
  left:0;
  right:0;
  background:linear-gradient(180deg,rgba(15,16,13,.9),rgba(15,16,13,.28) 72%,transparent);
  border-bottom-color:transparent;
  transition:background .2s ease,border-color .2s ease
}
.oc-nav--overlay.is-solid,
.oc-nav--overlay.is-open {
  background:rgba(15,16,13,.98);
  border-bottom-color:rgba(224,165,92,.18)
}
.oc-nav * {
  box-sizing:border-box
}
.oc-nav a {
  color:inherit
}
.oc-nav-inner {
  width:100%;
  max-width:1280px;
  min-height:76px;
  margin:0 auto;
  padding:12px 32px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:28px
}
.oc-brand {
  display:flex;
  flex-direction:column;
  text-decoration:none;
  line-height:1;
  white-space:nowrap
}
.oc-brand-main {
  font-family:'Fraunces',Georgia,serif;
  font-size:1.18rem;
  font-weight:800;
  letter-spacing:.015em
}
.oc-brand-sub {
  margin-top:5px;
  color:var(--oc-nav-oak);
  font-size:.56rem;
  font-weight:800;
  letter-spacing:.15em
}
.oc-desktop-links {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  min-width:0
}
.oc-desktop-links > a[href="careers.html"],
.oc-desktop-links > a[href="financing.html"],
.oc-desktop-links > a[href="fence-planner.html"],
.oc-desktop-links > a[href="privacy-policy.html"] {
  display:none
}
.oc-desktop-links a {
  position:relative;
  padding:10px 0;
  color:var(--oc-nav-dim);
  text-decoration:none;
  font-size:.78rem;
  font-weight:650;
  white-space:nowrap
}
.oc-desktop-links a:hover,
.oc-desktop-links a[aria-current="page"] {
  color:var(--oc-nav-cream)
}
.oc-desktop-links a[aria-current="page"]::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:2px;
  height:2px;
  background:var(--oc-nav-oak)
}
.oc-services-menu {
  position:relative;
  flex:0 0 auto
}
.oc-services-menu summary {
  position:relative;
  list-style:none;
  padding:10px 0;
  color:var(--oc-nav-dim);
  font-size:.78rem;
  font-weight:650;
  white-space:nowrap;
  cursor:pointer;
  user-select:none
}
.oc-services-menu summary::-webkit-details-marker {
  display:none
}
.oc-services-menu summary::after {
  content:"▾";
  display:inline-block;
  margin-left:6px;
  color:var(--oc-nav-oak);
  font-size:.64rem
}
.oc-services-menu[open] summary,
.oc-services-menu summary:hover,
.oc-services-menu.is-current summary {
  color:var(--oc-nav-cream)
}
.oc-services-menu.is-current summary::before {
  content:"";
  position:absolute;
  left:0;
  right:14px;
  bottom:2px;
  height:2px;
  background:var(--oc-nav-oak)
}
.oc-services-dropdown {
  position:absolute;
  top:calc(100% + 7px);
  left:50%;
  width:max-content;
  min-width:250px;
  padding:8px;
  transform:translateX(-50%);
  background:rgba(15,16,13,.995);
  border:1px solid rgba(224,165,92,.24);
  border-radius:4px;
  box-shadow:0 18px 42px rgba(0,0,0,.48)
}
.oc-utility-menu .oc-services-dropdown {
  left:auto;
  right:0;
  min-width:190px;
  transform:none
}
.oc-desktop-links .oc-services-dropdown a {
  display:block;
  padding:12px 14px;
  border-bottom:1px solid rgba(224,165,92,.12);
  color:var(--oc-nav-dim);
  font-size:.8rem;
  font-weight:700
}
.oc-desktop-links .oc-services-dropdown a:last-child {
  border-bottom:0
}
.oc-desktop-links .oc-services-dropdown a:hover,
.oc-desktop-links .oc-services-dropdown a[aria-current="page"] {
  color:var(--oc-nav-cream);
  background:rgba(224,165,92,.08)
}
.oc-desktop-links .oc-services-dropdown a[aria-current="page"]::after {
  display:none
}
.oc-nav-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  white-space:nowrap
}
.oc-call-link,
.oc-quote-link {
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 16px;
  border-radius:3px;
  text-decoration:none;
  font-size:.73rem;
  font-weight:800;
  letter-spacing:.015em
}
.oc-call-link {
  border:1px solid rgba(224,165,92,.38)
}
.oc-quote-link {
  background:var(--oc-nav-oak);
  color:var(--oc-nav-walnut)!important;
  min-height:44px;
  font-size:.875rem;
  white-space:normal;
  text-align:center
}
.oc-menu-toggle {
  display:none;
  min-height:44px;
  align-items:center;
  gap:10px;
  border:1px solid rgba(224,165,92,.38);
  border-radius:4px;
  padding:0 13px;
  background:rgba(0,0,0,.18);
  color:var(--oc-nav-cream);
  font:800 .72rem/1 'Inter',system-ui,sans-serif;
  letter-spacing:.05em;
  cursor:pointer
}
.oc-menu-bars {
  width:18px;
  display:flex;
  flex-direction:column;
  gap:4px
}
.oc-menu-bars i {
  display:block;
  width:100%;
  height:2px;
  border-radius:2px;
  background:currentColor;
  transition:transform .2s ease,opacity .2s ease
}
.oc-nav.is-open .oc-menu-bars i:nth-child(1) {
  transform:translateY(6px) rotate(45deg)
}
.oc-nav.is-open .oc-menu-bars i:nth-child(2) {
  opacity:0
}
.oc-nav.is-open .oc-menu-bars i:nth-child(3) {
  transform:translateY(-6px) rotate(-45deg)
}
.oc-mobile-menu {
  display:none
}
.oc-quote-link,
.oc-mobile-quote {
  display:none!important
}
.oc-nav :focus-visible {
  outline:3px solid var(--oc-nav-oak);
  outline-offset:3px
}
@media (max-width:1280px) {
  .oc-nav-inner {
    gap:18px
  }
  .oc-desktop-links {
    gap:15px
  }
  .oc-desktop-links a {
    font-size:.72rem
  }
  .oc-call-link {
    display:none
  }
}
@media (max-width:1280px) {
  .oc-nav-inner {
    min-height:68px;
    padding:10px max(18px,env(safe-area-inset-right)) 10px max(18px,env(safe-area-inset-left));
    grid-template-columns:minmax(0,1fr) auto;
    gap:14px
  }
  .oc-brand {
    min-width:0
  }
  .oc-brand-main {
    font-size:1rem
  }
  .oc-brand-sub {
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:.5rem;
    letter-spacing:.11em
  }
  .oc-desktop-links,
  .oc-call-link {
    display:none
  }
  .oc-quote-link {
    display:inline-flex;
    padding:0 12px
  }
  .oc-menu-toggle {
    display:inline-flex
  }
  .oc-mobile-menu:not([hidden]) {
    position:absolute;
    top:100%;
    left:0;
    right:0;
    display:grid;
    grid-template-columns:1fr;
    max-height:calc(100dvh - 68px);
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:10px max(18px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
    background:rgba(15,16,13,.995);
    border-top:1px solid rgba(224,165,92,.14);
    border-bottom:1px solid rgba(224,165,92,.22);
    box-shadow:0 20px 40px rgba(0,0,0,.38)
  }
  .oc-mobile-menu > a {
    min-height:50px;
    display:flex;
    align-items:center;
    padding:0 5px;
    border-bottom:1px solid rgba(224,165,92,.12);
    color:var(--oc-nav-cream);
    text-decoration:none;
    font-size:.94rem;
    font-weight:700
  }
  .oc-mobile-menu > a[aria-current="page"] {
    color:var(--oc-nav-oak);
    border-left:3px solid var(--oc-nav-oak);
    padding-left:12px
  }
  .oc-mobile-actions {
    display:grid;
    grid-template-columns:1fr 1.25fr;
    gap:10px;
    padding-top:16px
  }
  .oc-mobile-actions a {
    min-height:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:4px;
    text-decoration:none;
    font-size:.8rem;
    font-weight:850
  }
  .oc-mobile-call {
    border:1px solid rgba(224,165,92,.42)
  }
  .oc-mobile-quote {
    background:var(--oc-nav-oak);
    color:var(--oc-nav-walnut)!important
  }
}
@media (max-width:520px) {
  .oc-nav-inner {
    display:flex;
    flex-wrap:wrap;
    gap:8px
  }
  .oc-brand {
    flex:1 1 auto
  }
  .oc-brand-sub,
  .oc-menu-label {
    display:none
  }
  .oc-nav-actions {
    flex:1 1 auto;
    gap:8px
  }
  .oc-menu-toggle {
    justify-content:center;
    min-width:44px;
    padding:0 10px
  }
  .oc-mobile-menu:not([hidden]) {
    max-height:calc(100dvh - 140px)
  }
}
.oc-legal-links {
  max-width:1280px;
  margin:0 auto;
  padding:18px 28px max(18px,env(safe-area-inset-bottom));
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:12px 24px;
  border-top:1px solid rgba(224,165,92,.18);
  color:#b9b09a;
  font:600 .7rem/1.5 'Inter',system-ui,sans-serif
}
.oc-legal-links a {
  color:#e0a55c
}
@media (max-width:360px) {
  .oc-nav-inner {
    padding-left:14px;
    padding-right:14px
  }
  .oc-brand-main {
    font-size:.92rem
  }
  .oc-brand-sub {
    max-width:180px;
    font-size:.45rem
  }
  .oc-menu-toggle {
    padding:0 10px
  }
  .oc-menu-label {
    display:none
  }
}
@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto!important
  }
  *,
  *::before,
  *::after {
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important
  }
  .oc-nav--overlay,
  .oc-menu-bars i {
    transition:none
  }
}
