#business-container[data-directory-mode="billboards"] {
  width: min(calc(100% - 1.5rem), 54rem);
  margin-right: auto;
  margin-left: auto;
  padding:
    clamp(0.7rem, 2vw, 1.15rem);
  border:
    1px solid
    rgb(151 186 227 / 22%);
  border-radius:
    clamp(0.8rem, 2vw, 1.2rem);
  background:
    radial-gradient(
      circle at 13% 11%,
      rgb(255 255 255 / 90%) 0 1px,
      transparent 1.5px
    ),
    radial-gradient(
      circle at 79% 18%,
      rgb(255 255 255 / 72%) 0 1px,
      transparent 1.5px
    ),
    radial-gradient(
      circle at 32% 36%,
      rgb(174 208 255 / 78%) 0 1px,
      transparent 1.5px
    ),
    radial-gradient(
      circle at 91% 45%,
      rgb(255 244 199 / 70%) 0 1.2px,
      transparent 1.8px
    ),
    radial-gradient(
      circle at 61% 67%,
      rgb(255 255 255 / 82%) 0 1px,
      transparent 1.5px
    ),
    radial-gradient(
      circle at 18% 82%,
      rgb(174 208 255 / 72%) 0 1px,
      transparent 1.5px
    ),
    radial-gradient(
      circle at 72% 88%,
      rgb(255 255 255 / 68%) 0 1px,
      transparent 1.5px
    ),
    radial-gradient(
      circle at 50% 0%,
      #162b4a 0%,
      #0a1930 42%,
      #040b17 100%
    );
  background-size:
    83px 91px,
    127px 113px,
    151px 137px,
    179px 163px,
    101px 139px,
    191px 173px,
    137px 157px,
    auto;
  box-shadow:
    0 0.9rem 2.2rem
    rgb(1 6 16 / 42%);
}

.billboard-directory-sign-wrap {
  position: relative;
  width: min(100%, 46rem);
  margin-right: auto;
  margin-left: auto;
  padding-bottom: 0.85rem;
}

.billboard-directory-sign-wrap::before,
.billboard-directory-sign-wrap::after {
  position: absolute;
  bottom: 0.2rem;
  z-index: 2;
  width: 42%;
  height: 7rem;
  background:
    linear-gradient(
      to top,
      rgb(255 246 207 / 36%) 0%,
      rgb(255 246 207 / 18%) 42%,
      rgb(255 246 207 / 5%) 72%,
      transparent 100%
    );
  content: "";
  filter: blur(2px);
  mix-blend-mode: screen;
  opacity: 0.85;
  pointer-events: none;
}

.billboard-directory-sign-wrap::before {
  left: 7%;
  clip-path:
    polygon(
      4% 100%,
      24% 100%,
      100% 0,
      50% 0
    );
}

.billboard-directory-sign-wrap::after {
  right: 7%;
  clip-path:
    polygon(
      76% 100%,
      96% 100%,
      50% 0,
      0 0
    );
}

.billboard-directory-sign {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  color: inherit;
  text-decoration: none;
}

.billboard-directory-sign::after {
  position: absolute;
  bottom: -0.45rem;
  left: 50%;
  width: min(44%, 15rem);
  height: 0.28rem;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      transparent,
      #e9e0c7 18%,
      #fff7d8 50%,
      #e9e0c7 82%,
      transparent
    );
  box-shadow:
    0 -0.35rem 1.1rem
    rgb(255 242 197 / 24%);
  content: "";
  pointer-events: none;
  transform: translateX(-50%);
}

/* ==========================================================
   IMAGE-BACKED BILLBOARD

   billboard_ad_image_path first, then image_path.
   The creative itself is the full visual.
   ========================================================== */

.billboard-directory-sign-image-mode {
  display: block;
}

.billboard-directory-sign-image-mode
  .billboard-directory-sign-bezel {
  display: block;
  width: 100%;
}

.billboard-directory-sign-image-mode
  .billboard-directory-sign-screen {
  display: grid;
  width: 100%;
  place-items: center;
  overflow: visible;
  background: transparent;
}

.billboard-directory-sign-image-mode
  .billboard-directory-sign-image {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin-right: auto;
  margin-left: auto;
  object-fit: contain;
}

.billboard-directory-sign-image-mode
  .billboard-directory-sign-support {
  display: none;
}

/* ==========================================================
   PARKWAY-SIGN TEXT FALLBACK

   Used only when neither billboard_ad_image_path nor image_path
   is available.
   ========================================================== */

.billboard-directory-sign-parkway-mode {
  padding-top:
    clamp(2.5rem, 6vw, 3.15rem);
}

.billboard-directory-phone-sign {
  position: absolute;
  top: 0;
  right:
    clamp(0.7rem, 3vw, 2rem);
  z-index: 0;
  display: flex;
  min-width:
    clamp(11rem, 36%, 16rem);
  height:
    clamp(2.5rem, 6vw, 3.15rem);
  align-items: center;
  justify-content: center;
  padding:
    0
    clamp(0.75rem, 2vw, 1.1rem);
  border:
    clamp(0.16rem, 0.42vw, 0.24rem)
    solid #fff;
  border-radius:
    0.38rem 0.38rem 0 0;
  background:
    linear-gradient(
      180deg,
      #087c69,
      #006d5d
    );
  color: #fff;
  font-family:
    "Hanken Grotesk",
    Arial,
    sans-serif;
  font-size:
    clamp(0.95rem, 2.8vw, 1.3rem);
  font-weight: 900;
  letter-spacing: 0.045em;
  line-height: 1;
  text-align: center;
  text-shadow:
    0 1px 1px
    rgb(0 0 0 / 30%);
  white-space: nowrap;
}

.billboard-directory-sign-parkway-mode
  .billboard-directory-sign-bezel {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  padding: clamp(0.45rem, 1vw, 0.7rem);
  border-radius:
    clamp(0.7rem, 1.6vw, 1.05rem);
  background:
    linear-gradient(
      180deg,
      #d9dddc,
      #858b89 45%,
      #5e6462 100%
    );
  box-shadow:
    0 0.45rem 0.85rem
      rgb(0 0 0 / 22%),
    inset 0 1px 0
      rgb(255 255 255 / 58%);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

.billboard-directory-sign-parkway-mode
  .billboard-directory-sign-screen {
  position: relative;
  display: grid;
  width: 100%;
  min-height:
    clamp(12rem, 28vw, 19rem);
  place-items: center;
  overflow: hidden;
  padding:
    clamp(1.15rem, 4vw, 2.4rem)
    clamp(1rem, 5vw, 3rem);
  border:
    clamp(0.22rem, 0.65vw, 0.38rem)
    solid #fff;
  border-radius:
    clamp(0.55rem, 1.4vw, 0.9rem);
  background:
    linear-gradient(
      180deg,
      #078b74 0%,
      #007f6a 56%,
      #047663 100%
    );
  box-shadow:
    inset 0 0 0 1px
      rgb(0 0 0 / 24%);
}

.billboard-directory-sign-parkway-mode
  .billboard-directory-sign-screen::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      transparent 0 49.7%,
      rgb(255 255 255 / 3%)
        49.8% 50.2%,
      transparent 50.3% 100%
    );
  content: "";
  pointer-events: none;
}

.billboard-directory-sign-parkway-mode
  .billboard-directory-sign-copy {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(100%, 48rem);
  grid-template-areas:
    "category"
    "name"
    "location"
    "address";
  gap:
    clamp(0.5rem, 1.7vw, 1rem);
  place-items: center;
  color: #fff;
  text-align: center;
  text-shadow:
    0 2px 1px
    rgb(0 0 0 / 28%);
}

.billboard-directory-sign-parkway-mode
  .billboard-directory-sign-category {
  grid-area: category;
  padding:
    0.2rem
    clamp(0.7rem, 2vw, 1.15rem);
  border:
    2px solid
    rgb(255 255 255 / 76%);
  border-radius: 999px;
  color: #fff;
  font-size:
    clamp(0.68rem, 1.8vw, 0.92rem);
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1.15;
  text-transform: uppercase;
}

.billboard-directory-sign-parkway-mode
  .billboard-directory-sign-name {
  grid-area: name;
  max-width: 94%;
  font-family:
    "Hanken Grotesk",
    Arial,
    sans-serif;
  font-size:
    clamp(1.8rem, 6vw, 4rem);
  font-weight: 900;
  letter-spacing: 0.055em;
  line-height: 1.02;
}

.billboard-directory-sign-parkway-mode
  .billboard-directory-sign-location {
  grid-area: location;
  font-family:
    "Hanken Grotesk",
    Arial,
    sans-serif;
  font-size:
    clamp(1rem, 3vw, 1.7rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.1;
}

.billboard-directory-sign-parkway-mode
  .billboard-directory-sign-address {
  grid-area: address;
  display: inline-flex;
  min-width:
    min(80%, 24rem);
  justify-content: center;
  padding:
    0.38rem
    clamp(0.8rem, 3vw, 1.6rem);
  border-radius: 0.16rem;
  background: #f5f6f3;
  color: #202927;
  font-size:
    clamp(0.72rem, 2vw, 1rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.15;
  text-shadow: none;
  text-transform: uppercase;
}

.billboard-directory-sign-parkway-mode
  .billboard-directory-sign-support {
  display: none;
}

.billboard-directory-sign-parkway-mode:hover
  .billboard-directory-sign-bezel,
.billboard-directory-sign-parkway-mode:focus-visible
  .billboard-directory-sign-bezel {
  box-shadow:
    0 0.6rem 1rem
      rgb(0 0 0 / 28%),
    inset 0 1px 0
      rgb(255 255 255 / 62%);
  transform: translateY(-2px);
}

.billboard-directory-sign:focus-visible {
  border-radius: 0.7rem;
  outline: 4px solid #f0c84e;
  outline-offset: 4px;
}

@media (width <= 600px) {
  .billboard-directory-sign-parkway-mode
    .billboard-directory-sign-screen {
    min-height: 11rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .billboard-directory-sign-parkway-mode
    .billboard-directory-sign-bezel {
    transition: none;
  }

  .billboard-directory-sign-parkway-mode:hover
    .billboard-directory-sign-bezel,
  .billboard-directory-sign-parkway-mode:focus-visible
    .billboard-directory-sign-bezel {
    transform: none;
  }
}