.elementor-kit-6{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ==========================================================================
   Utility Locators — Sitewide Stylesheet
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Custom fonts
   These fonts (Eurostile, Gotham, Montalban) are uploaded and activated in
   Elementor's Custom Fonts library. Elementor generates the actual
   @font-face rules and hosts the files automatically once a font is
   marked active there — no manual @font-face or file path is needed here.
   We just reference the fonts by the exact names shown in that library.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   0. Custom fonts — manual @font-face rules
   Elementor's Custom Fonts feature was confirmed (via browser DevTools —
   zero font requests firing on page load) to never actually generate
   @font-face CSS for these uploads, regardless of them showing as
   "Published"/"active" in the admin. These rules bypass that system
   entirely and point directly at the real, confirmed-working file URLs.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Montalban";
  src: url("https://utilitylocatorsllc.com/wp-content/uploads/2026/08/Montalban.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Eurostile";
  src: url("https://utilitylocatorsllc.com/wp-content/uploads/2026/08/eurostile-medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Gotham";
  src: url("https://utilitylocatorsllc.com/wp-content/uploads/2026/08/Gotham-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Gotham";
  src: url("https://utilitylocatorsllc.com/wp-content/uploads/2026/08/Gotham-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --ul-orange: #E8871E;
  --ul-orange-dark: #C96F14;
  --ul-dark: #17140f;
  --ul-dark-2: #1f1b14;
  --ul-navy: #21262e;
  --ul-cream: #F4EFE6;
  --ul-white: #ffffff;
  --ul-text: #2b2b2b;
  --ul-text-muted: #C9C4BA;
  --ul-border: #e7e2d8;

  /* Brand font assignments per Charles's spec.
     These names must match exactly what's shown in Elementor's Custom
     Fonts library (Fonts > Library > Custom): "Eurostile", "Gotham",
     "Montalban". Weight (Demi vs Medium, Bold vs Regular) is set via
     font-weight below — confirm with Charles which numeric weight
     corresponds to "Demi" vs "Medium" for the Eurostile file(s) uploaded,
     since both currently show as one "Eurostile" entry in the library.

     IMPORTANT: the actual TTF files' internal embedded font names do NOT
     match these friendly labels — "Gotham-Bold.ttf" is internally named
     "Gotham Bold", "Gotham-Medium.ttf" is "Gotham Medium", and
     "eurostile-medium.ttf" is "EurostileMed". If Elementor generates its
     @font-face rules using the embedded name rather than the admin label,
     the browser needs the internal name, not "Gotham"/"Eurostile" alone.
     Both are included below so whichever one is actually registered will
     match. */
  --ul-font-links: "Montalban", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ul-font-h1: "Montalban", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ul-font-h2: "Eurostile", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ul-font-h3: "Eurostile", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Kept for backward compatibility with rules elsewhere that reference
     these two variables (body copy, non-H1/H2/H3 headings, buttons, etc.) */
  --ul-font-serif: "Eurostile Medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ul-font-sans: "Helvetica Neue", Arial, sans-serif;

  --ul-container: 1160px;
  --ul-radius: 4px;
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--ul-font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ul-text);
  background: var(--ul-white);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none !important;
  transition: color 0.15s ease;
}

a:hover,
a:focus,
a:active {
  text-decoration: none !important;
}

a:hover {
  color: var(--ul-orange);
}

/* Kill the default browser focus glow/ring on links and buttons.
   Replaced with a subtle, on-brand outline for keyboard accessibility. */
a:focus,
button:focus,
.btn:focus {
  outline: none;
  box-shadow: none;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--ul-orange);
  outline-offset: 2px;
  box-shadow: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --------------------------------------------------------------------------
   Heading fonts — per Charles's brand font spec:
   H1 = Montalban Regular, H2 = Eurostile Demi, H3 = Eurostile Medium.
   H4+ fall back to Eurostile Medium since no separate spec was given for them.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.2;
}

h1 {
  font-family: var(--ul-font-h1);
}

h2 {
  font-family: var(--ul-font-h2);
  font-weight: 600 !important; /* "Demi" — adjust if this doesn't match the uploaded weight */
}

h3 {
  font-family: var(--ul-font-h3);
  font-weight: 500 !important; /* "Medium" — adjust if this doesn't match the uploaded weight */
}

h4, h5, h6 {
  font-family: var(--ul-font-h3);
}

.wrap,
.container {
  max-width: var(--ul-container);
  margin: 0 auto;
  padding: 0 24px;
}

/* --------------------------------------------------------------------------
   3. Buttons (used in header, hero, and throughout the site)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ul-font-links);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none !important;
  padding: 12px 22px;
  border-radius: var(--ul-radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.btn-lg {
  padding: 18px 28px;
  font-size: 13px;
}

.btn .ico {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.btn-primary {
  background: var(--ul-orange);
  color: #171310;
}

.btn-primary:hover {
  background: var(--ul-orange-dark);
  transform: translateY(-1px);
}

/* Ghost button on dark backgrounds (hero) */
.btn-ghost-d {
  background: transparent;
  color: var(--ul-cream);
  border-color: rgba(244, 239, 230, 0.35);
}

.btn-ghost-d:hover {
  border-color: var(--ul-orange);
  color: var(--ul-orange);
  transform: translateY(-1px);
}

.btn-ghost-d .ico {
  fill: var(--ul-orange);
}

/* Ghost button on light backgrounds (header) */
.btn-ghost-l {
  background: transparent;
  color: var(--ul-text);
  border-color: var(--ul-border);
}

.btn-ghost-l:hover {
  border-color: var(--ul-orange);
  color: var(--ul-orange);
}

/* --------------------------------------------------------------------------
   4. Top utility bar (phone / email / hours / location)
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--ul-dark);
  color: var(--ul-cream);
  font-size: 13px;
}

.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 24px;
  flex-wrap: wrap;
  gap: 8px;
}

.topbar-left,
.topbar-right {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.topbar a {
  font-family: var(--ul-font-links);
}

.topbar a:hover {
  color: var(--ul-orange);
}

.topbar-item,
.tb-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.topbar-item .ico,
.tb-item .ico,
.tb-item svg {
  width: 14px;
  height: 14px;
  fill: var(--ul-orange) !important;
  flex-shrink: 0;
}

.tb-item:hover .ico,
.tb-item:focus .ico,
.tb-item:active .ico,
.tb-item:visited .ico,
.tb-item:hover svg,
.tb-item:focus svg,
.tb-item:active svg,
.tb-item:visited svg,
.topbar a.tb-item:hover .ico {
  fill: var(--ul-orange) !important;
}

/* --------------------------------------------------------------------------
   5. Main navigation
   -------------------------------------------------------------------------- */
.navbar {
  background: var(--ul-white);
  border-bottom: 1px solid var(--ul-border);
}

.navbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  gap: 24px;
}

.navbar .logo img {
  height: 44px;
}

.navmenu {
  display: flex;
  align-items: center;
  gap: 32px;
}

.navmenu a {
  font-family: var(--ul-font-links);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ul-text);
}

.navmenu a:hover {
  color: var(--ul-orange);
}

.navmenu .has-dropdown {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* --------------------------------------------------------------------------
   6. Hero section
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(
      ellipse at top center,
      rgba(230, 140, 30, 0.18) 0%,
      rgba(230, 140, 30, 0) 45%
    ),
    linear-gradient(180deg, var(--ul-dark) 0%, var(--ul-dark-2) 100%);
  padding: 72px 24px 140px;
  text-align: center;
  color: var(--ul-cream);
}

/* --------------------------------------------------------------------------
   Hero background wallpaper — uses Charles's actual logo icons (bolt,
   droplet, flame, waves), composited into a repeating tile and faded to
   a subtle watermark, replacing the earlier generic placeholder pattern.
   -------------------------------------------------------------------------- */
.logopat {
  position: absolute;
  inset: 0;
  background-image:
    url("https://utilitylocatorsllc.com/wp-content/uploads/2026/08/UL-Bolt-.png"),
    url("https://utilitylocatorsllc.com/wp-content/uploads/2026/08/UL-Droplet.png"),
    url("https://utilitylocatorsllc.com/wp-content/uploads/2026/08/UL-Flame.png"),
    url("https://utilitylocatorsllc.com/wp-content/uploads/2026/08/UL-Waves.png");
  background-repeat: repeat, repeat, repeat, repeat;
  background-size: 320px 320px, 320px 320px, 320px 320px, 320px 320px;
  background-position:
    20px 10px,
    190px 30px,
    40px 170px,
    210px 190px;
  filter: brightness(0) invert(1);
  opacity: 0.1;
  pointer-events: none;
}

.hero-line-sep {
  display: inline-block;
  width: 56px;
  height: 3px;
  background: var(--ul-orange);
  border-radius: 2px;
  margin: 10px 0;
}

.hero-glow {
  position: absolute;
  top: -20%;
  left: 20%;
  width: 60%;
  height: 80%;
  background: radial-gradient(closest-side, rgba(230, 140, 30, 0.20), transparent);
  filter: blur(40px);
  pointer-events: none;
}

@keyframes ul-hero-glow-sweep {
  0%   { left: -15%; opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { left: 115%; opacity: 0; }
}

.hero::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10%;
  min-width: 110px;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
  background: linear-gradient(180deg, rgba(242,135,15,0) 0%, rgba(242,135,15,0.18) 50%, rgba(242,135,15,0) 100%);
  filter: blur(22px);
  animation: ul-hero-glow-sweep 10s linear infinite;
}

.hero .wrap {
  position: relative;
  z-index: 1;
  max-width: 860px;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-lockup {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.hero-lockup img {
  width: 64px;
  height: 64px;
}

.hero-lockup .wl {
  text-align: left;
  line-height: 1.25;
}

.hero-lockup .wl b {
  display: block;
  font-family: var(--ul-font-h2);
  font-size: 22px;
  letter-spacing: 0.5px;
  color: var(--ul-cream);
}

.hero-lockup .wl span {
  display: block;
  font-family: var(--ul-font-links);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ul-orange);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ul-font-links);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ul-orange);
  margin-bottom: 22px;
}

.eyebrow::before,
.eyebrow::after {
  content: "" !important;
  width: 22px !important;
  height: 1px !important;
  background: var(--ul-orange) !important;
  flex-shrink: 0 !important;
}

.hero h1 {
  font-weight: 700;
  font-size: 56px;
  line-height: 1.15;
  margin: 0 0 24px;
  color: var(--ul-cream);
}

.hero h1 .or {
  color: var(--ul-orange);
}

.lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ul-text-muted);
  max-width: 620px;
  margin: 0 0 36px;
}

.hero-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Wave divider — sits inside .hero, overlapping its bottom edge so the
   hero's own background shows through instead of a flat fill color. */
.wave {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  line-height: 0;
}

.wave svg {
  display: block;
  width: 100%;
  height: 64px;
}

.wave .worange {
  fill: none;
  stroke: var(--ul-orange);
  stroke-width: 3;
}

.wave .wline {
  fill: none;
  stroke: transparent;
}

.wave .wfill {
  fill: var(--ul-white);
}

/* --------------------------------------------------------------------------
   7. Generic content sections (e.g. "What We Do")
   -------------------------------------------------------------------------- */
.section {
  padding: 64px 24px;
}

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ul-orange);
  margin-bottom: 12px;
}

.section-eyebrow::before {
  content: "" !important;
  width: 22px !important;
  height: 1px !important;
  background: var(--ul-orange) !important;
  flex-shrink: 0 !important;
}

.section h2 {
  font-size: 34px;
  color: var(--ul-text);
  margin-bottom: 16px;
}

.section p {
  color: #5b5b5b;
  max-width: 640px;
}

/* --------------------------------------------------------------------------
   10. Industries section
   -------------------------------------------------------------------------- */
.ind {
  background: var(--ul-navy);
  padding: 64px 24px;
}

.ind-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 32px;
  margin-top: 40px;
}

.ind-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  width: 160px;
}

.ind-card b {
  color: var(--ul-white);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.ind-badge {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(230, 140, 30, 0.15);
}

.ind-badge .ico {
  width: 26px;
  height: 26px;
  fill: var(--ul-orange);
}

@media (max-width: 600px) {
  .ind-row {
    gap: 24px;
  }

  .ind-card {
    width: 130px;
  }
}


.dual.pad {
  background: var(--ul-cream);
}

.ind .sec-head p {
  color: var(--ul-cream);
}

.dual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 40px;
}

.scard {
  position: relative;
  border-radius: var(--ul-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.scard .media {
  flex-shrink: 0;
}

.scard .media {
  position: relative;
  aspect-ratio: 16 / 9;
  height: auto;
}

.scard .media .ph {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.scard .media .filter {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.45));
}

.scard .tag {
  position: absolute;
  top: 14px;
  right: 18px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ul-white);
  z-index: 1;
}

.scard .content {
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.scard .badge {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.scard .badge .ico {
  width: 22px;
  height: 22px;
}

.scard h3 {
  font-size: 24px;
  margin-bottom: 12px;
}

.scard p {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 20px;
  max-width: none;
}

.scard ul {
  margin-bottom: 24px;
}

.scard li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  margin-bottom: 10px;
}

.scard li .ico {
  width: 14px;
  height: 14px;
  margin-top: 3px;
  flex-shrink: 0;
}

.scard .more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-family: var(--ul-font-links);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: gap 0.15s ease, opacity 0.15s ease;
}

.scard .more:hover {
  gap: 12px;
  opacity: 0.8;
}

.scard .more .ico {
  width: 14px;
  height: 14px;
}

/* Dark variant — "Utility Locating" */
.scard.locate .content {
  background: var(--ul-navy);
}

.scard.locate h3 {
  color: var(--ul-white);
}

.scard.locate p,
.scard.locate li {
  color: var(--ul-text-muted);
}

.scard.locate li .ico,
.scard.locate .more {
  color: var(--ul-orange);
}

.scard.locate .badge {
  background: rgba(230, 140, 30, 0.25);
  color: var(--ul-orange);
}

/* Orange variant — "Water Leak Detection" */
.scard.leak .content {
  background: var(--ul-orange);
}

.scard.leak h3 {
  color: var(--ul-navy);
}

.scard.leak p,
.scard.leak li {
  color: rgba(33, 38, 46, 0.85);
}

.scard.leak li .ico,
.scard.leak .more {
  color: var(--ul-navy);
}

.scard.leak .badge {
  background: rgba(33, 38, 46, 0.15);
  color: var(--ul-navy);
}

@media (max-width: 768px) {
  .dual-grid {
    grid-template-columns: 1fr;
  }
}


@media (max-width: 900px) {
  .navmenu {
    display: none; /* hook up a mobile menu toggle as needed */
  }
}

@media (max-width: 768px) {
  .topbar-left,
  .topbar-right {
    gap: 14px;
  }

  .hero {
    padding: 56px 20px 110px;
  }

  .hero h1 {
    font-size: 36px;
  }

  .hero-lockup {
    flex-direction: column;
    text-align: center;
  }

  .hero-lockup .wl {
    text-align: center;
  }

  .hero-cta {
    flex-direction: column;
    width: 100%;
  }

  .hero-cta .btn {
    width: 100%;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   Industries detail cards
   -------------------------------------------------------------------------- */
.in-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 8px;
}

.in-card {
  background: var(--ul-white);
  border: 1px solid var(--ul-border);
  border-radius: 12px;
  padding: 32px 28px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.in-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.in-card-badge {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.in-card-badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.in-card h3 {
  font-size: 19px;
  margin-bottom: 10px;
  color: var(--ul-text);
}

.in-card p {
  font-size: 14px;
  line-height: 1.6;
  color: #5b5b5b;
  margin: 0;
}

@media (max-width: 1000px) {
  .in-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 620px) {
  .in-cards {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Contact page — info panel and form panel styled as matching cards
   -------------------------------------------------------------------------- */
.cu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

.cu-panel,
.cu-form-panel {
  background: var(--ul-white);
  border: 1px solid var(--ul-border);
  border-radius: 12px;
  padding: 36px 32px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

.cu-panel h3,
.cu-form-panel h3 {
  font-size: 24px;
  margin-bottom: 8px;
  color: var(--ul-text);
}

.cu-panel .sub,
.cu-form-panel .sub {
  font-size: 14px;
  color: #6b6b6b;
  margin-bottom: 24px;
}

.cu-info-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--ul-border);
}

.cu-info-row:last-of-type {
  border-bottom: none;
}

.cu-info-row .ico {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  fill: var(--ul-orange);
}

.cu-info-row a {
  display: block;
  font-family: var(--ul-font-links);
  font-weight: 700;
  color: var(--ul-text);
}

.cu-info-row a:hover {
  color: var(--ul-orange);
}

.cu-info-row small {
  display: block;
  color: #8a8a8a;
  font-size: 12px;
  margin-top: 2px;
}

.cu-map-slot {
  margin-top: 20px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--ul-border);
}

.cu-map-slot iframe {
  width: 100%;
  height: 220px;
  border: 0;
  display: block;
}

.cu-form-note {
  font-size: 13px;
  color: #8a8a8a;
  margin-top: 16px;
}

/* Fluent Forms field styling to match the card */
.cu-form-panel .ff-el-form-control,
.cu-form-panel input[type="text"],
.cu-form-panel input[type="email"],
.cu-form-panel input[type="tel"],
.cu-form-panel textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--ul-border);
  border-radius: 6px;
  font-family: var(--ul-font-sans);
  font-size: 14px;
  margin-bottom: 16px;
}

.cu-form-panel .ff-el-form-control:focus,
.cu-form-panel input:focus,
.cu-form-panel textarea:focus {
  outline: none;
  border-color: var(--ul-orange);
}

.cu-form-panel label,
.cu-form-panel .ff-el-input--label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--ul-text);
}

.cu-form-panel button[type="submit"],
.cu-form-panel .ff-btn,
.cu-form-panel .ff-btn-submit {
  margin-top: 8px;
  font-family: var(--ul-font-links);
  background: var(--ul-orange) !important;
  border-color: var(--ul-orange) !important;
  color: #171310 !important;
}

.cu-form-panel button[type="submit"]:hover,
.cu-form-panel .ff-btn:hover,
.cu-form-panel .ff-btn-submit:hover {
  background: var(--ul-orange-dark) !important;
  border-color: var(--ul-orange-dark) !important;
}

@media (max-width: 860px) {
  .cu-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   FAQ page
   -------------------------------------------------------------------------- */
.fq-layout {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 40px;
  align-items: start;
}

.fq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fq-item {
  background: var(--ul-white);
  border: 1px solid var(--ul-border);
  border-radius: 10px;
  padding: 4px 20px;
}

.fq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  font-family: var(--ul-font-h3);
  font-weight: 700;
  font-size: 15px;
  color: var(--ul-text);
  cursor: pointer;
  list-style: none;
}

/* Hide the browser's native disclosure triangle so only our + shows */
.fq-item summary::-webkit-details-marker {
  display: none;
}

.fq-item summary::marker {
  content: "";
}

.fq-plus {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(230, 140, 30, 0.12);
  color: var(--ul-orange);
  font-size: 18px;
  line-height: 1;
  transition: transform 0.2s ease;
}

.fq-item[open] .fq-plus {
  transform: rotate(45deg);
}

.fq-a {
  font-size: 14px;
  line-height: 1.65;
  color: #5b5b5b;
  padding-bottom: 20px;
  margin: 0;
}

.fq-a li {
  margin-bottom: 6px;
}

.fq-a ~ .fq-a {
  margin-top: -8px;
}

.fq-colorcode {
  background: var(--ul-white);
  border: 1px solid var(--ul-border);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  position: sticky;
  top: 24px;
}

.fq-colorcode .slot {
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--ul-border);
  margin-bottom: 16px;
  display: block;
}

.fq-colorcode h4 {
  font-size: 16px;
  margin-bottom: 8px;
  color: var(--ul-text);
}

.fq-colorcode p {
  font-size: 13px;
  color: #8a8a8a;
  margin: 0;
}

@media (max-width: 900px) {
  .fq-layout {
    grid-template-columns: 1fr;
  }

  .fq-colorcode {
    position: static;
  }
}

/* --------------------------------------------------------------------------
   Global header — fixes the header being covered by page content.
   Root cause: header had no `position`, so it defaulted to `position: static`.
   Positioned elements (even without z-index) always paint above static
   elements, so later sections with position:relative decorations were
   stacking on top of it. Making the header sticky + positioned fixes this.
   -------------------------------------------------------------------------- */
header {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 9999 !important;
  background: var(--ul-white);
  box-shadow: 0 1px 0 var(--ul-border);
}

.topbar {
  position: relative;
  z-index: 1001;
}

header .nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 10px 24px;
}

.brand-logo {
  height: 38px !important;
  width: auto;
  display: block;
}

.menu {
  display: flex;
  align-items: center;
  gap: 28px;
}

.menu > a {
  font-family: var(--ul-font-links);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ul-text);
}

.menu > a:hover {
  color: var(--ul-orange);
}

.has-drop {
  position: relative;
}

.has-drop > a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.caret {
  width: 10px;
  height: 10px;
  transition: transform 0.15s ease;
}

.has-drop:hover .caret,
.has-drop:focus-within .caret {
  transform: rotate(180deg);
}

.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: var(--ul-white);
  border: 1px solid var(--ul-border);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
  padding: 8px;
  z-index: 9999 !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}

.has-drop:hover .dropdown,
.has-drop:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown a {
  display: block;
  font-family: var(--ul-font-links);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ul-text);
}

.dropdown a:hover {
  background: rgba(230, 140, 30, 0.08);
  color: var(--ul-orange);
}

.hamb {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
}

.hamb .ico {
  width: 24px;
  height: 24px;
}

.mobile-menu {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: var(--ul-white);
  border-top: 1px solid var(--ul-border);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
  padding: 8px 24px 16px;
  z-index: 1000;
}

.mobile-menu.open {
  display: flex;
}

.mobile-menu a {
  font-family: var(--ul-font-links);
  padding: 12px 0;
  font-weight: 700;
  font-size: 14px;
  border-bottom: 1px solid var(--ul-border);
}

.mobile-menu a.sub {
  padding-left: 16px;
  font-weight: 600;
  color: #6b6b6b;
  border-bottom: none;
}

@media (max-width: 900px) {
  .menu {
    display: none;
  }

  .hamb {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}/* End custom CSS */