/*
Theme Name: Auburn Electric
Author: Josh Yager
Author URI: https://thedevq.com/
Description: Auburn Electric - commercial electrical contractor, Cleveland / Cuyahoga County. Scaffolded from devq-starter-kit 82b277a.
Version: 1.0.0
Text Domain: devq
DevQ Kit: 485c387 (2026-08-18)
*/

/* -----------------------------------------------------------------------------
 * CSS Variables
 * -------------------------------------------------------------------------- */
:root {
  /* Note: --spacing-small, --spacing-medium, --spacing-large are set dynamically in theme-settings-css.php */

  /* Z-index layers */
  --z-index-dropdown: 3;

  /* Transitions */
  --transition-fast: all 0.1s ease-in-out;
  --transition-default: all 0.3s ease-in-out;

  /* Other */
  --video-aspect-ratio: 56.25%;
  /* 16:9 */
}

/* -----------------------------------------------------------------------------
 * Base Elements
 * -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  background: var(--ink);
  position: relative;
  font-family: var(--font2);
  font-weight: var(--body-weight, 400);
  color: var(--bone);
  line-height: var(--body-line-height, 1.6);
  -webkit-font-smoothing: antialiased;
}

p, ul, li {
  font-family: var(--font2);
  font-weight: var(--body-weight, 400);
  color: inherit;
  line-height: var(--body-line-height, 1.6);
}

img {
  max-width: 100%;
}

/* -----------------------------------------------------------------------------
 * Typography
 * -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font1);
  font-weight: var(--heading-weight, 700);
  line-height: var(--heading-line-height, 1);
  color: var(--bone);
  margin: 0 0 0.4em;
}

h1 {
  font-size: 3rem;
}

h2 {
  font-size: 2.5rem;
}

h3 {
  font-size: 2rem;
}

h4 {
  font-size: 1.5rem;
}

h5 {
  font-size: 1.25rem;
}



/* -----------------------------------------------------------------------------
 * Layout
 * -------------------------------------------------------------------------- */
.container-fluid {
  max-width: 2400px;
  margin: auto;
}

.videoWrapper {
  position: relative;
  padding-bottom: var(--video-aspect-ratio);
  height: 0;
}

.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* -----------------------------------------------------------------------------
 * Buttons
 * -------------------------------------------------------------------------- */
.btn {
  text-decoration: none;
  background: var(--primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--button-padding, 12px 28px);
  font-family: var(--font1);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  transition: var(--transition-default);
  border: 2px solid var(--primary);
  border-radius: var(--button-radius, 4px);
  cursor: pointer;
  /* Chunky by default, but never a hard floor. A flat `min-width: 250px` here
     resolves flex items' `min-width: auto` to 250px, so a .btn in a card footer
     or filter bar refuses to shrink and pushes its siblings out of the
     container. min() keeps the look and lets it collapse when space is tight. */
  min-width: min(250px, 100%);
}

.btn i {
  font-size: 14px;
}

.btn:hover {
  background: var(--secondary);
  color: #fff;
  border-color: var(--secondary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Button Variants */
.btn.btn-secondary {
  background: var(--secondary);
  border-color: var(--secondary);
}

.btn.btn-secondary:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.btn.btn-tertiary {
  background: var(--tertiary);
  border-color: var(--tertiary);
  color: var(--primary);
}

.btn.btn-tertiary:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.btn.btn-white {
  background: #fff;
  color: var(--primary);
  border-color: #fff;
}

.btn.btn-white:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.btn.btn-outline {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}

.btn.btn-outline:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.btn.btn-outline-secondary {
  background: transparent;
  color: #fff;
  border-color: var(--secondary);
}

.btn.btn-outline-secondary:hover {
  background: var(--secondary);
  color: #fff;
  border-color: var(--secondary);
}

.btn.btn-outline-white {
  background: transparent;
  color: #fff;
  border-color: #fff;
}

.btn.btn-outline-white:hover {
  background: #fff;
  color: var(--primary);
  border-color: #fff;
}

/* Header & navigation styles are in template-parts/header/ */
/* Footer styles are in template-parts/footer/ */
/* Mobile menu styles are in template-parts/mobile-menu/ */

/* -----------------------------------------------------------------------------
 * Utility Classes
 * -------------------------------------------------------------------------- */
.mobileonly,
.mobileOnly {
  display: none;
}

/* Section background variants */
.section-light {
  background-color: #f8f7f4;
}

.section-offwhite {
  background-color: #f5f4f0;
}

.section-dark {
  background-color: #1a1a2e;
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark h5,
.section-dark p,
.section-dark li {
  color: #fff;
}

.section-dark .cs-topper {
  color: var(--tertiary);
}

/* -----------------------------------------------------------------------------
 * Browser Customization
 * -------------------------------------------------------------------------- */
::selection {
  background: var(--tertiary);
  color: var(--secondary);
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background-color: #f5f5f5;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: var(--tertiary);
}

/* -----------------------------------------------------------------------------
 * Content Styles
 * -------------------------------------------------------------------------- */
.maincopy ul li {
  list-style: none;
  position: relative;
  margin-bottom: 15px;
}

/* -----------------------------------------------------------------------------
 * Media Queries
 * -------------------------------------------------------------------------- */
@media (max-width: 1199px) {

  /* Utility Classes */
  .mobileonly,
  .mobileOnly {
    display: initial;
  }

  .desktopOnly {
    display: none;
  }
}

/* Mobile Styles - 767px and below */
@media (max-width: 767px) {

  .btn {
    width: 100%;
    min-width: unset;
  }

  /* Typography */
  h1 {
    font-size: 2.5rem;
  }

  h2 {
    font-size: 2.25rem;
  }

  h3 {
    font-size: 2rem;
  }

  h4 {
    font-size: 1.75rem;
  }

  h5 {
    font-size: 1.5rem;
  }

  .bigger-title {
    font-size: 3rem;
  }

  .sub-title {
    font-size: 20px;
  }
}
/* -----------------------------------------------------------------------------
 * Header / Footer -- scaffold baseline
 *
 * Deliberately plain. Every site rewrites header.php / footer.php to spec and
 * replaces this block; it exists so a freshly scaffolded site is legible rather
 * than unstyled.
 * -------------------------------------------------------------------------- */

.devq-header-wrap {
  position: relative;
  background: #fff;
  z-index: 100;
}

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

.devq-header-logo a {
  display: inline-block;
  text-decoration: none;
}

.devq-header-logo img {
  display: block;
  max-height: 60px;
  width: auto;
}

.devq-header-wordmark {
  font-family: var(--font1);
  font-size: 22px;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
}

.devq-desktop-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.devq-desktop-nav li {
  position: relative;
}

.devq-desktop-nav a {
  text-decoration: none;
  color: inherit;
  font-family: var(--font2);
}

.devq-desktop-nav .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-default);
  z-index: var(--z-index-dropdown);
}

.devq-desktop-nav li:hover > .dropdown-menu {
  opacity: 1;
  visibility: visible;
}

.devq-desktop-nav .dropdown-menu a {
  display: block;
  padding: 8px 16px;
}

.devq-header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Mobile menu ------------------------------------------------------------- */

.devq-mobile-menu {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  background: #fff;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-default);
  z-index: 999;
}

.devq-mobile-menu.is-active {
  opacity: 1;
  visibility: visible;
}

.devq-menu-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
}

.devq-mobile-logo img {
  max-height: 56px;
  width: auto;
}

.devq-mobile-nav {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.devq-mobile-nav a {
  display: block;
  padding: 10px 0;
  font-size: 20px;
  text-decoration: none;
  color: inherit;
}

.devq-mobile-contact a {
  text-decoration: none;
  color: inherit;
  font-weight: 600;
}

/* Footer ------------------------------------------------------------------ */

.devq-footer {
  background: var(--secondary);
  padding: 32px 0;
  color: #fff;
}

.devq-footer a {
  color: #fff;
  text-decoration: none;
}

.devq-footer a:hover {
  opacity: 0.75;
}

.devq-footer-menu,
.devq-footer-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.devq-footer-contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-bottom: 16px;
}

.devq-footer-copyright {
  margin: 0;
  font-size: 14px;
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
}

/* =============================================================================
 * Auburn Electric — site design layer
 *
 * Dark trade/industrial: near-black ground, bone text, metallic gold accent,
 * heavy condensed display type.
 *
 * Ported from prime-flex-parks (kit 82b277a) and recoloured. The structural
 * decisions carried over deliberately: the container-overflow guard and the
 * Gravity Forms panel rules were both debugged there and are inherited here
 * rather than rediscovered.
 *
 * Palette sampled from the client logo (65,602 gold pixels). Contrast figures
 * are measured against --ink and are the reason gold never sits on white here:
 * #c38722 on #ffffff is 3.08:1 and fails AA for normal text.
 * ========================================================================== */

:root {
  --ink:         #0b0b0b;  /* page ground -- matches the logo background */
  --ink-2:       #151414;  /* raised panel */
  --ink-3:       #201e1b;  /* inset panel */
  --ink-4:       #070707;  /* footer */
  --line:        #2b2823;  /* hairline */

  --gold-deep:   #683d00;  /* bevel/gradient edge only -- 2.11:1, never text */
  --gold:        #c38722;  /* primary brand gold -- 6.38:1 on --ink, AA */
  --gold-bright: #e8b54b;  /* hover / emphasis -- 10.44:1, AA */
  --gold-hi:     #fbd257;  /* highlight, thin rules -- 13.55:1, AA */

  --bone:        #f0ece3;  /* primary text -- 16.70:1, AA */
  --bone-dim:    #c1bab3;  /* secondary text */
  --bone-faint:  #8a837b;  /* tertiary / legal */
  --paper:       #ffffff;  /* form panels */
  --paper-line:  #d0ccc7;
  --paper-dim:   #6b6560;
}

/* --- Layout ---------------------------------------------------------------- */
.container { max-width: 1340px; }

/* --- Type scale ------------------------------------------------------------
 * Tighter tracking than Prime Flex and a heavier default weight: the logo is
 * bevelled condensed caps, and a 400-weight headline under it reads as though
 * the mark were borrowed from another brand.
 * -------------------------------------------------------------------------- */
h1 { font-size: 5rem;     letter-spacing: -0.02em; }
h2 { font-size: 3.875rem; letter-spacing: -0.02em; }
h3 { font-size: 2.125rem; letter-spacing: -0.01em; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

@media (max-width: 1199px) {
  h1 { font-size: 4rem; }
  h2 { font-size: 3rem; }
  h3 { font-size: 1.875rem; }
}
@media (max-width: 767px) {
  h1 { font-size: 2.75rem; }
  h2 { font-size: 2.25rem; }
  h3 { font-size: 1.5rem; }
  h4 { font-size: 1.25rem; }
}

a { color: var(--gold); }
a:hover { color: var(--gold-bright); }

/* --- Shared: section eyebrow (rule + gold caps) ---------------------------- */
.ae-eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.ae-eyebrow::before {
  content: "";
  width: 32px;
  height: 2px;
  background: var(--gold);
  flex-shrink: 0;
}
.ae-eyebrow span {
  font-family: var(--font1);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
}

/* --- Shared: display heading ----------------------------------------------- */
.ae-display { text-transform: uppercase; }
.ae-display em     { font-style: normal; color: var(--bone-dim); }
.ae-display strong { font-weight: inherit; color: var(--gold); }

/* --- Shared: lede ---------------------------------------------------------- */
.ae-lede {
  color: var(--bone-dim);
  font-weight: 400;
  font-size: 1.0625rem;
  max-width: 46rem;
}

/* --- Shared: square gold bullet list --------------------------------------- */
.ae-ticks { list-style: none; margin: 0; padding: 0; }
.ae-ticks li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 5px 0;
  color: var(--bone);
  font-size: 0.9375rem;
}
.ae-ticks li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 0.55em;
  background: var(--gold);
  flex-shrink: 0;
}

/* --- Shared: badge --------------------------------------------------------- */
.ae-badge {
  display: inline-block;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font1);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 5px 12px;
}

/* --- Shared: hairline rule ------------------------------------------------- */
.ae-rule {
  border: 0;
  height: 1px;
  background: var(--line);
  margin: 0;
}

/* --- Buttons --------------------------------------------------------------- */
.btn.btn-outline-white {
  background: transparent;
  color: var(--bone);
  border-color: #bdb8b0;
}
.btn.btn-outline-white:hover {
  background: transparent;
  color: var(--gold);
  border-color: var(--gold);
}
.btn.btn-outline {
  background: transparent;
  color: var(--gold);
  border-color: var(--gold);
}
.btn.btn-outline:hover {
  background: var(--gold);
  color: var(--ink);
}
/* Buttons sitting in constrained rows must be able to shrink. */
.ae-btnrow { display: flex; gap: 16px; flex-wrap: wrap; }
.ae-btnrow .btn { min-width: 0; flex: 1; }

/* --- Phone link: the most-clicked element on a trades site ----------------- */
.ae-tel {
  font-family: var(--font1);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--gold);
  text-decoration: none;
  white-space: nowrap;
}
.ae-tel:hover { color: var(--gold-bright); }

/* --- Forms on white panels (Gravity Forms) ---------------------------------
 * Every rule carries !important: Gravity ships high-specificity defaults from
 * its own theme that otherwise win.
 * -------------------------------------------------------------------------- */
.ae-formpanel {
  background: var(--paper);
  padding: 34px;
}
.ae-formpanel h2,
.ae-formpanel h3 {
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.ae-formpanel .ae-formnote {
  color: var(--paper-dim);
  font-size: 0.875rem;
  margin: -6px 0 22px;
}

/* Gravity drives the field grid off its own custom properties (40px row gap by
   default), so set the variables AND the longhand -- its theme sets both. */
.ae-formpanel .gform_wrapper,
.ae-formpanel .gform_wrapper .gform_fields {
  --gf-form-gap-y: 16px !important;
  --gf-form-gap-x: 16px !important;
}
.ae-formpanel .gform_wrapper .gform_fields {
  row-gap: 16px !important;
  column-gap: 16px !important;
}

.ae-formpanel .gform_wrapper .gfield_label { display: none !important; }
.ae-formpanel .gform_wrapper input[type="text"],
.ae-formpanel .gform_wrapper input[type="email"],
.ae-formpanel .gform_wrapper input[type="tel"],
.ae-formpanel .gform_wrapper select,
.ae-formpanel .gform_wrapper textarea {
  width: 100% !important;
  background: var(--paper) !important;
  border: 1px solid var(--paper-line) !important;
  border-radius: 0 !important;
  color: var(--ink) !important;
  padding: 13px 16px !important;
  font-family: var(--font2) !important;
  font-size: 0.875rem !important;
  transition: border-color 0.2s ease !important;
}
.ae-formpanel .gform_wrapper input:focus,
.ae-formpanel .gform_wrapper select:focus,
.ae-formpanel .gform_wrapper textarea:focus {
  outline: none !important;
  border-color: var(--gold) !important;
  box-shadow: none !important;
}
.ae-formpanel .gform_wrapper ::placeholder { color: #aaa5a0 !important; opacity: 1 !important; }

/* Gravity pins .gfield_select to a fixed height; with our padding that squeezes
   the selected option out of the content box and the field renders blank. Let
   it size to its content and draw our own chevron. */
.ae-formpanel .gform_wrapper select {
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.4 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  padding-right: 42px !important;
}
.ae-formpanel .gform_wrapper select option {
  color: var(--ink) !important;
  background: var(--paper) !important;
}
.ae-formpanel .gform_wrapper textarea { resize: none !important; }
.ae-formpanel .gform_wrapper .gform_footer,
.ae-formpanel .gform_wrapper .gform-footer {
  margin: 16px 0 0 !important;
  padding: 0 !important;
  display: block !important;
}

.ae-formpanel .gform_wrapper input[type="submit"],
.ae-formpanel .gform_wrapper .gform_button,
.ae-formpanel .gform_wrapper .gform-footer button,
.ae-formpanel .gform_wrapper .gform_footer button {
  width: 100% !important;
  max-width: none !important;
  background: var(--gold) !important;
  color: var(--ink) !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--font1) !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  padding: 16px 24px !important;
  cursor: pointer !important;
  transition: background 0.2s ease !important;
}
.ae-formpanel .gform_wrapper input[type="submit"]:hover,
.ae-formpanel .gform_wrapper .gform_button:hover,
.ae-formpanel .gform_wrapper .gform-footer button:hover,
.ae-formpanel .gform_wrapper .gform_footer button:hover {
  background: var(--gold-bright) !important;
}
.ae-formpanel .gform_wrapper .gform_confirmation_message {
  color: var(--ink) !important;
  font-size: 1rem !important;
}
.ae-formpanel .gform_wrapper .gfield_required { color: #b1483a !important; }
.ae-formpanel .gform_wrapper .validation_message {
  color: #b1483a !important;
  font-size: 0.8125rem !important;
  padding: 4px 0 0 !important;
  border: none !important;
  background: none !important;
}

/* ---------------------------------------------------------------------------
   Sideways overflow guard

   AOS parks a fade-left element 100px to the right of its final position until
   it scrolls into view. On a full-width block that makes the document wider
   than the viewport, so the whole page scrolls sideways -- most obvious on a
   phone, but it happens at every width.

   overflow-x: clip rather than hidden, because clip does not create a scroll
   container and so cannot break position: sticky inside a block.
--------------------------------------------------------------------------- */
.container-fluid {
  overflow-x: clip;
}

@supports not (overflow: clip) {
  .container-fluid {
    overflow-x: hidden;
  }
}

/* =============================================================================
 * Auburn Electric — header / footer
 *
 * Overrides the scaffold baseline, which is built for a white ground. Loaded
 * after it, so plain class selectors are enough; no !important needed.
 * ========================================================================== */

/* --- Header ---------------------------------------------------------------- */
.devq-header-wrap {
    background: var(--ink-4);
    border-bottom: 1px solid var(--line);
}
.devq-header {
    /* 18px read as cramped against a 62px logo -- the row had 5px of air above
       and below the mark. 26px gives the header some room without pushing the
       hero down. */
    padding: 26px 0;
    gap: 40px;
}
.devq-header-logo img {
    max-height: 62px;
}
.devq-header-wordmark {
    color: var(--gold);
}

.devq-desktop-nav {
    gap: 40px;
}
.devq-desktop-nav a {
    font-family: var(--font1);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bone);
    padding: 6px 0;
    transition: color 0.2s ease;
}
.devq-desktop-nav a:hover,
.devq-desktop-nav .current-menu-item > a,
.devq-desktop-nav .current-menu-ancestor > a {
    color: var(--gold);
}

.devq-desktop-nav .dropdown-menu {
    background: var(--ink-2);
    border: 1px solid var(--line);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
    padding: 6px 0;
}
.devq-desktop-nav .dropdown-menu li a {
    display: block;
    padding: 10px 18px;
    font-size: 0.875rem;
    letter-spacing: 0.06em;
    text-transform: none;
    white-space: nowrap;
}
.devq-desktop-nav .dropdown-menu li a:hover {
    background: var(--ink-3);
    color: var(--gold);
}

/* Header actions: CTA plus the phone, which is the point of the whole bar. */
.devq-header-actions {
    display: flex;
    align-items: center;
    gap: 22px;
}
.devq-header-phone {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    text-align: right;
    text-decoration: none;
}
.devq-header-phonelabel {
    font-family: var(--font1);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--bone-faint);
}
.devq-header-phonenum {
    font-family: var(--font1);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--gold);
    transition: color 0.2s ease;
}
.devq-header-phone:hover .devq-header-phonenum {
    color: var(--gold-bright);
}

/* The scaffold draws the hamburger in #333, which is invisible on black. */
.devq-hamburger-bar {
    background: var(--bone);
}
.devq-hamburger:hover .devq-hamburger-bar {
    background: var(--gold);
}

/* --- Mobile menu -----------------------------------------------------------
 *
 * The scaffold's drawer centres everything, never styles `.sub-menu` at all
 * (so the accordion the JS drives was permanently open), and leaves the submenu
 * toggle as a light UA button on a black ground. Rebuilt here as three fixed
 * planes -- brand bar, scrolling nav, pinned actions -- because the job of this
 * menu on a phone is route-or-call, and calling is the conversion.
 *
 * The nav reads as a panel directory: left-aligned rows on hairlines, tapping
 * off a gold bus that runs down the left edge. Deliberately NOT numbered -- a
 * circuit directory is numbered, but nav items are not circuits, and numbering
 * them would be decoration wearing the costume of structure.
 * ------------------------------------------------------------------------- */
.devq-mobile-menu {
    background: var(--ink);
    /* Override the scaffold's centred stack. */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 0;
    /* Dynamic viewport unit, so the pinned action bar is not left under mobile
       Safari's collapsing toolbar. */
    height: 100dvh;
}

/* Brand bar --------------------------------------------------------------- */
.ae-menu-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
    background: var(--ink-4);
}
.devq-mobile-logo {
    display: flex;
    align-items: center;
    /* It is a link home, so it has to clear 44px like every other target. */
    min-height: 44px;
    line-height: 0;
}
.devq-mobile-logo img {
    max-height: 46px;
    width: auto;
}
.devq-menu-close {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 44px: the smallest tap target that does not get mis-hit. */
    width: 44px;
    height: 44px;
    margin-right: -10px;
    padding: 0;
    color: var(--bone-dim);
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s ease;
}
.devq-menu-close:hover,
.devq-menu-close:focus-visible { color: var(--gold); }

/* Nav --------------------------------------------------------------------- */
/* `flex: 0 1 auto` -- shrink-and-scroll, never grow. Growing pushed the
   service-area line down to float alone above the action bar with 450px of
   black over it; keeping the nav at content height puts every bit of copy at
   the top and leaves one deliberate gap before the pinned actions. */
.devq-mobile-menu nav {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 26px 20px 0;
}
.devq-mobile-nav {
    position: relative;
    margin: 0;
    padding: 0 0 0 20px;
    list-style: none;
    text-align: left;
}
/* The bus: a hot line down the left that every row taps off. It fades as it
   runs, the way a bus drops voltage down the panel. */
.devq-mobile-nav::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: linear-gradient(180deg, var(--gold) 0%, rgba(195, 135, 34, 0.22) 100%);
}
.devq-mobile-nav > li {
    position: relative;
    border-bottom: 1px solid var(--line);
}
.devq-mobile-nav > li:last-child { border-bottom: 0; }

.devq-mobile-nav > li > a {
    position: relative;
    display: block;
    padding: 15px 44px 15px 0;
    font-family: var(--font1);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bone);
    text-decoration: none;
    transition: color 0.2s ease;
}
/* Each row's tap off the bus. */
.devq-mobile-nav > li > a::before {
    content: "";
    position: absolute;
    left: -20px;
    top: 50%;
    width: 11px;
    height: 1px;
    background: var(--line);
    transition: background-color 0.2s ease, width 0.2s ease;
}
.devq-mobile-nav > li > a:hover,
.devq-mobile-nav > li > a:focus-visible { color: var(--gold-bright); }
.devq-mobile-nav > li > a:hover::before,
.devq-mobile-nav > li > a:focus-visible::before {
    background: var(--gold);
    width: 15px;
}
/* Energised: the page you are on. */
.devq-mobile-nav > li.current-menu-item > a,
.devq-mobile-nav > li.current-menu-ancestor > a { color: var(--gold); }
.devq-mobile-nav > li.current-menu-item > a::before,
.devq-mobile-nav > li.current-menu-ancestor > a::before {
    background: var(--gold);
    width: 15px;
}

/* Submenu ----------------------------------------------------------------- */
/* Sentence case in the body face, not more condensed caps. Set in the same
   shout as its parent, "Commercial Electrical Construction" out-shouts
   "Services" purely by being longer. Case does the hierarchy that size cannot. */
.devq-mobile-nav .sub-menu {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.devq-mobile-nav .sub-menu li { border: 0; }
.devq-mobile-nav .sub-menu a {
    display: block;
    /* Uniform 13px keeps every child row at 45px. The old first/last-child
       tightening dropped the first one to 33px -- under the tap-target floor. */
    padding: 13px 0 13px 2px;
    font-family: var(--font2);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    color: var(--bone-dim);
    text-decoration: none;
    transition: color 0.2s ease;
}
.devq-mobile-nav .sub-menu { padding-bottom: 8px; }
.devq-mobile-nav .sub-menu a:hover,
.devq-mobile-nav .sub-menu a:focus-visible { color: var(--gold-bright); }
.devq-mobile-nav .sub-menu .current-menu-item > a { color: var(--gold); }

/* Submenu toggle ---------------------------------------------------------- */
.devq-submenu-toggle {
    position: absolute;
    top: 4px;
    right: -10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--bone-faint);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.devq-submenu-toggle:hover,
.devq-submenu-toggle:focus-visible { color: var(--gold); }
.submenu-open > .devq-submenu-toggle {
    transform: rotate(180deg);
    color: var(--gold);
}

/* Service-area qualifier -------------------------------------------------- */
.ae-menu-blurb {
    flex: 0 1 auto;
    margin: 0;
    padding: 22px 20px 18px;
    max-width: 30rem;
    font-family: var(--font2);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--bone-faint);
}

/* Pinned actions ---------------------------------------------------------- */
.ae-menu-actions {
    flex: 0 0 auto;
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    /* Clear of the home indicator on a notched phone. */
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    background: var(--ink-2);
    border-top: 1px solid var(--line);
}
.ae-menu-call {
    /* Never shrinks: the number is the reason this bar exists. */
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-decoration: none;
}
.ae-menu-call-label {
    font-family: var(--font1);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--bone-faint);
}
.ae-menu-call-num {
    font-family: var(--font1);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--gold-bright);
    white-space: nowrap;
}
.ae-menu-cta {
    /* The scaffold sets `.btn { width: 100% }` below 767, which as a flex item
       resolves the basis to the full bar and crushes the phone beside it --
       the same `.btn` sizing that overhung the desktop header. Size to content. */
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    padding: 13px 20px;
    font-size: 0.875rem;
    white-space: nowrap;
}

/* Stagger ----------------------------------------------------------------- */
/* mobile-menu.js adds .is-visible per row on a 50ms step. */
.devq-mobile-nav > li {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.28s ease, transform 0.28s ease;
}
.devq-mobile-nav > li.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .devq-mobile-nav > li,
    .devq-mobile-nav .sub-menu,
    .devq-submenu-toggle {
        transition: none;
    }
    .devq-mobile-nav > li { opacity: 1; transform: none; }
}

/* Tablet: this drawer still runs up to 1199. Left at phone metrics the rows
   stretch the full width with 24px type on a metre-long hairline, which reads
   thin and accidental. Hold the list to a column and let the type grow. */
@media (min-width: 768px) {
    .ae-menu-head,
    .ae-menu-actions { padding-left: 40px; padding-right: 40px; }
    .devq-mobile-menu nav { padding: 40px 40px 0; }
    .ae-menu-blurb { padding: 26px 40px 24px; }
    .devq-mobile-nav,
    .ae-menu-blurb { max-width: 34rem; }
    .devq-mobile-nav > li > a { font-size: 1.75rem; padding-top: 17px; padding-bottom: 17px; }
    .devq-mobile-nav .sub-menu a { font-size: 1rem; }
    .devq-mobile-logo img { max-height: 54px; }
}

/* Short phones: the list gives, not the call bar. */
@media (max-height: 700px) {
    .ae-menu-head { padding: 10px 20px; }
    .devq-mobile-logo img { max-height: 38px; }
    .devq-mobile-menu nav { padding: 16px 20px 24px; }
    .devq-mobile-nav > li > a { padding: 12px 44px 12px 0; font-size: 1.3125rem; }
}

/* --- Footer ---------------------------------------------------------------- */
.ae-footer {
    background: var(--ink-4);
    border-top: 1px solid var(--line);
    padding: 72px 0 0;
}
.ae-footer-top {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 56px;
    padding-bottom: 52px;
}
/* 260px made the stacked lockup the largest single element in the footer --
   larger than the header logo, and competing with the phone number, which is
   the thing in the footer that has to be found. The stacked mark carries the
   building, the wordmark, AND the tagline, so it needs less width than a
   horizontal lockup would to sit at the same optical weight. */
.ae-footer-logo img {
    max-width: 200px;
    height: auto;
    display: block;
    margin-bottom: 22px;
}
.ae-footer-blurb {
    color: var(--bone-dim);
    font-size: 0.9375rem;
    max-width: 34rem;
    margin: 0 0 22px;
}
.ae-footer-heading {
    margin: 0 0 18px;
    font-family: var(--font1);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--gold);
}
.ae-footer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}
.ae-footer-list a,
.ae-footer-list li {
    color: var(--bone-dim);
    font-size: 0.9375rem;
    text-decoration: none;
}
.ae-footer-list a:hover {
    color: var(--gold);
}
.ae-footer-tel {
    font-family: var(--font1);
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--gold);
    text-decoration: none;
    display: inline-block;
    margin-bottom: 6px;
}
.ae-footer-tel:hover {
    color: var(--gold-bright);
}

.ae-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 24px 0 28px;
    border-top: 1px solid var(--line);
}
.ae-footer-legal {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--bone-faint);
}
.ae-footer-legal a {
    color: var(--bone-faint);
    text-decoration: underline;
}
.ae-footer-legal a:hover {
    color: var(--gold);
}
.ae-footer-social {
    display: flex;
    gap: 16px;
}
.ae-footer-social a {
    color: var(--bone-dim);
    font-size: 1.0625rem;
    transition: color 0.2s ease;
}
.ae-footer-social a:hover {
    color: var(--gold);
}

@media (max-width: 1199px) {
    .ae-footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
    }
    .devq-header-phone { display: none; }
}
@media (max-width: 767px) {
    .ae-footer {
        padding-top: 48px;
    }
    .ae-footer-top {
        grid-template-columns: 1fr;
        gap: 32px;
        padding-bottom: 34px;
    }
    .ae-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ---------------------------------------------------------------------------
   Header row fitting

   The header is a flex row of logo / nav / actions, and .btn carries
   min-width: min(250px, 100%). Inside .devq-header-actions that resolves to
   250px, which is wider than the space the row actually leaves for it -- so the
   CTA overhung the container by ~53px at every width and the phone block was
   squeezed to 68px, wrapping "24/7 EMERGENCY (000) 000-0000" onto three lines.

   The page-level overflow guard was clipping the overhang rather than fixing
   it, so it never showed up as a sideways scroll -- only as a cut-off button.

   Let the CTA size to its content, and stop the phone shrinking at all.
--------------------------------------------------------------------------- */
.devq-header-actions .btn {
    min-width: 0;
    white-space: nowrap;
    flex: 0 0 auto;
}
.devq-header-phone {
    flex: 0 0 auto;
    white-space: nowrap;
}
.devq-header-nav {
    min-width: 0;
    flex: 0 1 auto;
}
.devq-header-logo {
    flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------
   Desktop nav fitting

   The primary menu carries four top-level items -- Services, Residential,
   About, Service Area. 24/7 Emergency and Contact came out of the header on
   2026-08-21 because both were duplicate doors: the emergency number is already
   in the header actions, and the CTA points at /contact/.

   That bought back roughly 250px, so the squeeze steps below start later and
   stop shorter than they did at six items. The row is still logo + nav + phone
   + CTA and the nav is still the only flexible part of it, so the steps stay --
   they just do less work. Nothing here applies at 1199 and below, where the
   whole desktop nav is replaced by the hamburger.
--------------------------------------------------------------------------- */
.devq-desktop-nav {
    flex-wrap: nowrap;
}
.devq-desktop-nav > li > a {
    white-space: nowrap;
}

/* No min-width lower bound on either step. A viewport of 1199.5px -- which is
   what you get from Windows display scaling, browser zoom, or a fractional
   device pixel ratio -- satisfies neither `max-width: 1199px` nor
   `min-width: 1200px`, so a bounded range would drop the header into the dead
   zone between the two and render the full-size nav on top of the phone. Below
   1199.98 the desktop nav is hidden anyway, so an unbounded max-width is safe.
   See the breakpoint-gap rule below. */
@media (max-width: 1399px) {
    .devq-header { gap: 28px; }
    .devq-desktop-nav { gap: 30px; }
    .devq-desktop-nav a { letter-spacing: 0.09em; }
    .devq-header-actions { gap: 20px; }
}

@media (max-width: 1279px) {
    .devq-header { padding: 20px 0; gap: 20px; }
    .devq-desktop-nav { gap: 22px; }
    .devq-desktop-nav a { font-size: 0.875rem; letter-spacing: 0.05em; }
    .devq-header-actions { gap: 16px; }
    .devq-header-phonenum { font-size: 1.125rem; }
    .devq-header-logo img { max-height: 54px; }
}

/* ---------------------------------------------------------------------------
   Breakpoint gap at 1199 -> 1200

   The scaffold switches to the mobile menu at `max-width: 1199px` and every
   desktop rule starts at 1200. Any viewport that lands between them -- 1199.5,
   which a fractional DPR or a zoom level produces routinely -- matches neither,
   so the desktop nav stayed visible at a width it does not fit, overlapping the
   phone block.

   Re-assert the mobile switch on the half-open range so nothing falls through.
--------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .desktopOnly { display: none !important; }
    .mobileonly,
    .mobileOnly { display: block !important; }
    /* !important because the scaffold's base `.devq-hamburger { display: none }`
       lives in an inline <style> in header.php, which is later in the document
       than this stylesheet and wins on equal specificity. */
    .devq-hamburger { display: block !important; }
    .devq-header-phone { display: none; }
}