/*
Theme Name: Bellco Feeders
Author: Josh Yager
Author URI: https://thedevq.com/
Description: DevQ site scaffold. Clone, rename the directory to the client slug, and build. One theme per site - no child theme, no premade blocks. Blocks are built per site and registered through the devq_blocks filter.
Version: 2.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: #fff;
  position: relative;
  font-family: var(--font2);
  font-weight: 400;
  color: #333131;
  line-height: 1.5;
}

p, ul, li {
  font-family: var(--font2);
  font-weight: 400;
  color: #333131;
  line-height: 1.5;
}

img {
  max-width: 100%;
}

/* -----------------------------------------------------------------------------
 * Typography
 * -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font1);
  font-weight: 500;
  line-height: 1;
}

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);
}

/* ==========================================================================
   Bellco Feeders — site design system
   Palette, type and button treatment lifted from the approved Figma Make
   export (Aug 2026). The export styles inline, so these are the shared
   values every block references instead of repeating literals.
   ========================================================================== */

:root {
  --bellco-bg:       #080E18; /* page background */
  --bellco-bg-alt:   #0B1220; /* alternating section / card on dark */
  --bellco-bg-card:  #0E1826; /* raised card surface */
  --bellco-mint:     #8BD9BA; /* accent — 97 uses across the design */
  --bellco-on-mint:  #0B1220; /* text sitting on mint */
  --bellco-text:     #F2F2F0;
  --bellco-muted:    rgba(242, 242, 240, 0.55);
  --bellco-dim:      rgba(242, 242, 240, 0.52);
  --bellco-divider:  rgba(255, 255, 255, 0.05);
  --bellco-hairline: rgba(255, 255, 255, 0.06);

  /*
   * The smallest type allowed anywhere on this site.
   *
   * Bellco's only note on the approved design was that some type read too
   * small, and Marissa set the floor on 2026-08-25: nothing under 12px, with
   * regular body copy at 16-18px. Every uppercase micro-label -- eyebrows,
   * chips, group labels, step numbers, breadcrumbs, footer column headings --
   * was drawn at 10 or 11 and now reads from here, so the floor is one value
   * to check rather than fourteen to remember. Grep this token before adding
   * a new label style; do not reintroduce a bare 10px or 11px.
   */
  --bellco-micro:    12px;

  /*
   * Corner radius and grid gutters.
   *
   * The block-built pages drew every card and photo box square and every grid
   * gutter as a 1px hairline -- the gutter WAS the divider, which is why the
   * cards physically touch. Jon asked on 2026-08-31 for the rounded, spaced
   * treatment on kauligracing.com across the whole site.
   *
   * Opening a real gap means the hairline no longer separates anything, so a
   * card sharing its block's background would dissolve into the page. Every
   * grid card therefore also moves to --bellco-bg-card with a hairline
   * border. Change the look here, not in a block.
   *
   * Full-bleed section backgrounds -- both heroes, the CTA bands, the
   * industry list -- stay square on purpose. A rounded corner on an
   * edge-to-edge background reads as a rendering bug, not a design.
   */
  --bellco-radius:    16px;  /* cards and content image boxes */
  --bellco-radius-sm: 10px;  /* thumbnails, small media, icon tiles */
  --bellco-gap:       24px;  /* card grids -- replaces the 1px hairline */
  --bellco-gap-sm:    12px;  /* dense strips: tab rows, 6-up industry cards */
}

body {
  background: var(--bellco-bg);
  color: var(--bellco-text);
}

/* The kit's base rule is `p, ul, li { color: #333131 }`, written for a white
   page. Overriding body alone does not undo it: an element matched by a real
   rule never inherits, so any <p>, <ul> or <li> that a block does not colour
   itself renders near-black on #080E18 -- which is how the 404 and search
   empty-state bullets came out invisible. Every block on this site sets its own
   copy colour, so this only lights up the text nothing else was styling. */
p, ul, li {
  color: var(--bellco-text);
}

/* The design is drawn on a 1440 canvas; reflex.css caps .container at 1680.
   Widened to 1650 so wide desktops use the screen instead of parking 240px of
   empty gutter either side of a 1440 column. */
.container {
  max-width: 1650px;
  padding-left: 48px;
  padding-right: 48px;
}

@media (max-width: 1199px) {
  .container {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* Headings are uppercase black Poppins throughout the design. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font1);
  color: var(--bellco-text);
  letter-spacing: -0.01em;
}

a { color: var(--bellco-mint); }

/* Buttons: square, uppercase, wide-tracked. Overrides the kit's rounded default. */
.btn {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--bellco-mint);
  border-color: var(--bellco-mint);
  color: var(--bellco-on-mint);
  border-radius: 2px;
}

.btn:hover {
  background: var(--bellco-mint);
  border-color: var(--bellco-mint);
  color: var(--bellco-on-mint);
  filter: brightness(1.1);
}

/* The kit's outline hover fills with --primary (mint) and sets #fff text,
   1.65:1 here. Keep the fill, use the ink that belongs on mint. */
.btn.btn-outline:hover {
  color: var(--bellco-on-mint);
}

.btn.btn-outline-white {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  font-weight: 700;
}

.btn.btn-outline-white:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.5);
  color: #ffffff;
  filter: none;
}

/* The eyebrow — mint rule + tracked uppercase label — repeats in every section. */
.bellco-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font1);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bellco-mint);
}

.bellco-eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--bellco-mint);
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .bellco-eyebrow {
    font-size: 14px;
    letter-spacing: 0.14em;
  }
}

/* ==========================================================================
   Header + footer — Bellco Feeders
   Ported from Navbar.tsx / Footer.tsx in the approved Figma Make export.
   ========================================================================== */

.bellco-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--bellco-mint);
  color: var(--bellco-on-mint);
  padding: 12px 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.bellco-skip:focus {
  left: 0;
}

/* WordPress prints this class on labels and pagination text it expects a theme
   to hide. Neither the kit's stylesheet nor reflex defines it, so without this
   the search form's label renders as visible body copy. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.screen-reader-text:focus {
  background: var(--bellco-mint);
  clip: auto;
  clip-path: none;
  color: var(--bellco-on-mint);
  display: block;
  font-weight: 700;
  height: auto;
  left: 8px;
  padding: 12px 20px;
  top: 8px;
  width: auto;
  z-index: 200;
}

/* ── Header bar ── */

.bellco-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--bellco-bg-card);
  border-bottom: 1px solid var(--bellco-hairline);
}

.bellco-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}

.bellco-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.bellco-logo img {
  height: 58px;
  width: auto;
  object-fit: contain;
}

.bellco-wordmark {
  font-family: var(--font1);
  font-weight: 900;
  font-size: 22px;
  text-transform: uppercase;
  color: #ffffff;
  letter-spacing: 0.02em;
}

/* ── Desktop nav ── */

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

.bellco-nav-item {
  position: static; /* panel spans the full bar */
}

.bellco-nav-link {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font1);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}

.bellco-nav-link:hover,
.bellco-nav-item.is-open > .bellco-nav-link {
  color: var(--bellco-mint);
  border-bottom-color: rgba(139, 217, 186, 0.5);
}

.bellco-chevron {
  margin-top: 1px;
  transition: transform 0.2s;
}

.bellco-nav-item.is-open .bellco-chevron {
  transform: rotate(180deg);
}

/* ── Mega panel ── */

.bellco-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bellco-bg-card);
  border-top: 1px solid var(--bellco-hairline);
  border-bottom: 1px solid var(--bellco-hairline);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.bellco-nav-item.is-open .bellco-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.bellco-panel-inner {
  padding-top: 32px;
  padding-bottom: 32px;
}

.bellco-panel-cols {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}

.bellco-panel-col {
  flex: 1;
  min-width: 0;
}

.bellco-panel-label {
  font-family: var(--font1);
  font-size: var(--bellco-micro);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bellco-mint);
  margin: 0 0 16px;
}

.bellco-panel-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bellco-panel-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}

.bellco-panel-card:hover {
  background: rgba(139, 217, 186, 0.08);
  border-color: rgba(139, 217, 186, 0.3);
}

.bellco-panel-card-title {
  display: block;
  font-family: var(--font1);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(242, 242, 240, 0.8);
  line-height: 1.2;
  margin-bottom: 2px;
  transition: color 0.15s;
}

.bellco-panel-card:hover .bellco-panel-card-title {
  color: #ffffff;
}

.bellco-panel-card-desc {
  display: block;
  font-family: var(--font1);
  font-size: 13px;
  line-height: 1.4;
  color: var(--bellco-dim);
  transition: color 0.15s;
}

.bellco-panel-card:hover .bellco-panel-card-desc {
  color: rgba(255, 255, 255, 0.55);
}

.bellco-panel-card-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--bellco-dim);
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s;
}

.bellco-panel-card:hover .bellco-panel-card-arrow {
  border-color: rgba(139, 217, 186, 0.5);
  color: var(--bellco-mint);
}

.bellco-panel-cta {
  flex-shrink: 0;
  width: 200px;
  background: var(--bellco-mint);
  padding: 24px;
}

.bellco-panel-cta-eyebrow {
  font-family: var(--font1);
  font-size: var(--bellco-micro);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(8, 14, 24, 0.6);
  margin: 0 0 12px;
}

.bellco-panel-cta-body {
  font-family: var(--font1);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(8, 14, 24, 0.75);
  margin: 0 0 20px;
}

.bellco-panel-cta-btn {
  display: inline-block;
  font-family: var(--font1);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--bellco-on-mint);
  color: var(--bellco-mint);
  padding: 10px 18px;
  text-decoration: none;
  white-space: nowrap;
  transition: filter 0.2s;
}

.bellco-panel-cta-btn:hover {
  filter: brightness(1.25);
}

/* ── Header right ── */

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

.bellco-header-phone {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font1);
  font-weight: 600;
  font-size: 15px;
  color: rgba(242, 242, 240, 0.65);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}

.bellco-header-phone:hover {
  color: #ffffff;
}

.bellco-header-cta {
  display: inline-block;
  font-family: var(--font1);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--bellco-mint);
  color: var(--bellco-on-mint);
  padding: 10px 24px;
  text-decoration: none;
  white-space: nowrap;
  transition: filter 0.2s;
}

.bellco-header-cta:hover {
  filter: brightness(1.1);
  color: var(--bellco-on-mint);
}

/* ── Burger ── */

.bellco-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.bellco-burger-bar {
  display: block;
  width: 24px;
  height: 2px;
  background: #ffffff;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.bellco-burger.is-active .bellco-burger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.bellco-burger.is-active .bellco-burger-bar:nth-child(2) {
  opacity: 0;
}

.bellco-burger.is-active .bellco-burger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── Mobile panel ── */

/*
 * A column that hugs its content and drops from the header like a panel,
 * bounded by the viewport rather than filling it.
 *
 * It used to be pinned `bottom: 0` at a stated height. On a phone that is
 * right -- five rows and a button very nearly fill an iPhone SE -- but the
 * same rule on anything taller drew a mostly-empty box: 500px of void between
 * the last row and the CTA at 766x1024, and a 560px column in a half-empty
 * 1100x620 rectangle on a small laptop. `max-height` keeps every property the
 * pinned version had -- the panel still stops at the viewport and still
 * scrolls once an open submenu outgrows it -- without inventing height it has
 * no content for.
 *
 * The height is capped in `dvh`, not `vh`: on iOS a fixed element measured
 * against the *large* viewport puts its last rows behind the browser's own
 * toolbar. The `vh` line above it is the fallback for anything that does not
 * know the unit.
 *
 * The bottom hairline and the shadow are what stop a short panel reading as a
 * slab floating over the page -- it is attached to the bar above it.
 */
.bellco-mobile {
  position: fixed;
  top: 80px;
  left: 0;
  right: 0;
  bottom: auto;
  max-height: calc(100vh - 80px);
  max-height: calc(100dvh - 80px);
  z-index: 99;
  display: flex;
  flex-direction: column;
  background: var(--bellco-bg-card);
  border-top: 1px solid var(--bellco-hairline);
  border-bottom: 1px solid var(--bellco-hairline);
  box-shadow: 0 24px 40px rgba(0, 0, 0, 0.35);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 12px 20px 24px;
}

.bellco-mobile[hidden] {
  display: none;
}

.bellco-mobile > nav {
  flex-shrink: 0;
}

.bellco-mobile-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bellco-mobile-item {
  border-bottom: 1px solid var(--bellco-hairline);
}

/*
 * Rows carry a transparent left rule at rest so the open state can colour it
 * without the label jumping sideways.
 */
.bellco-mobile-link,
.bellco-mobile-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 13px 4px 13px 14px;
  font-family: var(--font1);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bellco-text);
  background: none;
  border: none;
  border-left: 2px solid transparent;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.bellco-mobile-toggle svg {
  transition: transform 0.2s;
  flex-shrink: 0;
}

.bellco-mobile-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/*
 * The open section. A mint rule runs unbroken from the heading down the whole
 * submenu, over the same tint the project and utility chips use for their
 * active state, so which section is open is readable at a glance rather than
 * only from the chevron.
 */
.bellco-mobile-toggle[aria-expanded="true"] {
  color: var(--bellco-mint);
  background: rgba(139, 217, 186, 0.1);
  border-left-color: var(--bellco-mint);
}

.bellco-mobile-sub {
  padding: 2px 4px 16px 26px;
  border-left: 2px solid var(--bellco-mint);
  background: rgba(139, 217, 186, 0.05);
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.bellco-mobile-sub[hidden] {
  display: none;
}

.bellco-mobile-sub-label {
  font-family: var(--font1);
  font-size: var(--bellco-micro);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bellco-mint);
  margin: 10px 0 0;
}

.bellco-mobile-sub-label:first-child {
  margin-top: 4px;
}

.bellco-mobile-sub a {
  font-family: var(--font1);
  font-size: 15px;
  color: rgba(242, 242, 240, 0.65);
  text-decoration: none;
}

/*
 * The CTA and the phone follow the list. They used to be pinned to the bottom
 * of the panel with `margin-top: auto` -- a thumb-reach decision that only
 * worked while the panel was full-height, and that stranded them under 500px
 * of nothing the moment the screen was taller than a phone. Now that the panel
 * hugs its content the two sit right under the last row, which on the shortest
 * phone tested is within about 100px of where the pin put them anyway.
 *
 * It carries no rule of its own. It used to, and while the foot was pinned to
 * the bottom of a tall panel that was the only thing separating it from the
 * void above it. Now that it follows the list, the last menu row's own
 * `border-bottom` is already sitting directly above it -- a second hairline
 * 24px under the first, and narrower, just read as a doubled rule. The
 * padding is the separation.
 */
.bellco-mobile-foot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-shrink: 0;
  gap: 14px;
  /* The side autos centre it. `width` is needed with them: auto side margins on
     a flex item cancel the default `stretch`, and without it the block
     collapses to the width of the words inside the button. */
  margin: 0 auto;
  width: 100%;
  max-width: 420px;
  padding-top: 24px;
}

/*
 * The panel's own CTA. It has to re-declare `display`, because the rule that
 * takes the button out of the header bar under 767px would otherwise take this
 * copy of it with it -- which is exactly what happened: the mobile menu shipped
 * with no Get a Quote button at all, only the phone number.
 */
.bellco-mobile-foot .bellco-header-cta {
  display: block;
  text-align: center;
  padding: 15px 24px;
}

.bellco-mobile-phone {
  font-family: var(--font1);
  font-weight: 600;
  font-size: 16px;
  color: rgba(242, 242, 240, 0.65);
  text-align: center;
  text-decoration: none;
}

/*
 * The backdrop. A full-height panel needed none -- there was no page left to
 * see. One that hugs its content does: on the home page the hero's own mint
 * Get a Quote button came up directly under the panel's identical one, two of
 * the same button stacked with a hairline between them.
 *
 * Shown by the panel's own `hidden` attribute rather than by a class the JS has
 * to remember, so it cannot get out of step with the panel on any close path.
 * It starts below the header so the bar and the burger stay at full strength.
 */
.bellco-mobile-scrim {
  display: none;
  position: fixed;
  top: 80px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 98;
  background: rgba(8, 15, 24, 0.6);
}

.bellco-mobile:not([hidden]) + .bellco-mobile-scrim {
  display: block;
}

/*
 * 768-1199 still gets the burger, but on a screen wide enough that a full-bleed
 * panel has nothing to put in most of itself. Five short rows stretched across
 * 1100px read as a mega menu missing its other columns -- and that is what it
 * looked like: a 560px column of content in the left half of the panel and
 * ~490px of empty dark to the right of it.
 *
 * So above 767 it stops being a full-bleed sheet and becomes what it actually
 * is at these widths: a dropdown, anchored under the burger that opens it. The
 * eye goes to the top right, and the panel arrives there. Bounded width means
 * the content fills it, so there is no empty half to explain.
 *
 * (The previous version padded this 48px "in the same gutter the page uses".
 * It is not -- `.container` drops to 24px at 1199 and below. 24 lines the rows
 * up with the page under them.)
 *
 * The CTA is dropped here because the header bar above the panel is still
 * showing its own copy of the same button at these widths -- only below 768,
 * where the bar hides it, does the panel have to carry it.
 */
@media (min-width: 768px) {
  .bellco-mobile {
    left: auto;
    right: 0;
    width: min(420px, 100%);
    border-left: 1px solid var(--bellco-hairline);
    padding-left: 24px;
    padding-right: 24px;
  }

  /*
   * Left-aligned in the panel rather than centred in it: at this width a
   * centred phone number under a left-aligned list reads as a stray.
   */
  .bellco-mobile-foot {
    align-items: flex-start;
    margin: 0;
    max-width: none;
  }

  .bellco-mobile-foot .bellco-header-cta {
    display: none;
  }

  .bellco-mobile-phone {
    text-align: left;
  }
}

/* ── Header responsive ── */

/*
 * Small desktops, 1200-1365.
 *
 * The bar is three `white-space: nowrap` blocks in a space-between row, so when
 * they outgrow the container they do not reflow -- they overlap. At 1200 the
 * container gives them 1104px (1200 minus 96px of gutters) and they measured
 * 1139px, which put the logo into "SOLUTIONS" and the phone number into the
 * "RESOURCES" chevron. At 1240 the gaps were 3px.
 *
 * The 35px comes out of the logo, the nav gap and the button padding first and
 * the type last: links drop 15px -> 14px, well clear of Bellco's 12px floor, so
 * the bar reads as the same bar rather than a shrunken one. Measured, not
 * guessed -- `python .site-build/header-fit.py` prints the arithmetic per width.
 *
 * It stops at 1365 rather than 1439 so 1366, the commonest laptop width after
 * 1920, still gets the bar at its designed size. Crossing that boundary the
 * elements grow and the leftover space shrinks, which is the direction a
 * widening viewport should read.
 *
 * This is the site's only breakpoint outside 1199 / 767, and it exists because
 * the burger does not appear until 1199: everything above that has to carry the
 * full desktop bar.
 */
@media (min-width: 1200px) and (max-width: 1365px) {
  .bellco-logo img {
    height: 52px;
  }

  .bellco-nav-list {
    gap: 20px;
  }

  .bellco-nav-link {
    font-size: 14px;
    letter-spacing: 0.07em;
  }

  .bellco-header-actions {
    gap: 14px;
  }

  .bellco-header-phone {
    font-size: 14px;
  }

  .bellco-header-cta {
    font-size: 14px;
    padding: 10px 20px;
  }
}

@media (max-width: 1199px) {
  .bellco-nav,
  .bellco-header-phone {
    display: none;
  }

  .bellco-burger {
    display: flex;
  }
}

@media (max-width: 767px) {
  .bellco-header-inner {
    height: 68px;
  }

  .bellco-logo img {
    height: 42px;
  }

  /*
   * Scoped to the bar. Unscoped, this also hid the copy of the same button
   * inside the mobile panel, so the menu had no CTA on a phone at all.
   */
  .bellco-header-actions .bellco-header-cta {
    display: none;
  }

  .bellco-mobile {
    top: 68px;
    max-height: calc(100vh - 68px);
    max-height: calc(100dvh - 68px);
  }

  .bellco-mobile-scrim {
    top: 68px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Footer
   ══════════════════════════════════════════════════════════════════════════ */

.bellco-footer {
  background: var(--bellco-bg);
  border-top: 1px solid var(--bellco-hairline);
  padding: 80px 0 0;
}

.bellco-footer-top {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: 0;
  padding-bottom: 64px;
}

.bellco-footer-brand {
  padding: 24px 48px 0 0;
  border-right: 1px solid var(--bellco-hairline);
}

.bellco-footer-logo {
  display: inline-block;
  margin-bottom: 24px;
}

.bellco-footer-logo img {
  height: 48px;
  width: auto;
  object-fit: contain;
}

.bellco-footer-blurb {
  font-family: var(--font1);
  font-size: 16px;
  line-height: 1.7;
  color: var(--bellco-muted);
  max-width: 300px;
  margin: 0 0 32px;
}

.bellco-footer-contact {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}

.bellco-footer-contact a,
.bellco-footer-addr {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--font1);
  font-size: 16px;
  color: var(--bellco-muted);
  text-decoration: none;
  margin: 0;
  transition: color 0.2s;
}

.bellco-footer-contact a:hover {
  color: #ffffff;
}

.bellco-footer-contact svg {
  color: var(--bellco-mint);
  flex-shrink: 0;
  margin-top: 3px;
}

.bellco-footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
}

.bellco-footer-social a {
  font-family: var(--font1);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bellco-dim);
  text-decoration: none;
  transition: color 0.2s;
}

.bellco-footer-social a:hover {
  color: var(--bellco-mint);
}

.bellco-footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding: 24px 0 0 48px;
}

.bellco-footer-col-label {
  font-family: var(--font1);
  font-size: var(--bellco-micro);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bellco-mint);
  margin: 0 0 20px;
}

.bellco-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bellco-footer-col a {
  font-family: var(--font1);
  font-size: 15px;
  color: rgba(242, 242, 240, 0.55);
  text-decoration: none;
  transition: color 0.2s;
}

.bellco-footer-col a:hover {
  color: #ffffff;
}

.bellco-footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 0 32px;
  border-top: 1px solid var(--bellco-hairline);
  font-family: var(--font1);
  font-size: 13px;
  color: var(--bellco-dim);
}

.bellco-footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.bellco-footer-legal a {
  color: var(--bellco-dim);
  text-decoration: none;
  transition: color 0.2s;
}

.bellco-footer-legal a:hover {
  color: #ffffff;
}

@media (max-width: 1199px) {
  .bellco-footer-top {
    grid-template-columns: 1fr;
  }

  .bellco-footer-brand {
    padding: 0 0 40px;
    border-right: none;
    border-bottom: 1px solid var(--bellco-hairline);
  }

  .bellco-footer-cols {
    padding: 40px 0 0;
  }
}

@media (max-width: 767px) {
  .bellco-footer {
    padding-top: 56px;
  }

  .bellco-footer-cols {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 24px;
  }

  .bellco-footer-legal {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── Shared section header (bellco_section_head) ────────────────────────── */

.bellco-sechead {
  margin-bottom: 64px;
}

.bellco-sechead .bellco-eyebrow {
  margin: 0 0 16px;
}

.bellco-sechead-title {
  font-size: 56px;
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: #ffffff;
  text-transform: uppercase;
  margin: 0;
}

.bellco-sechead-accent {
  display: block;
  color: var(--bellco-mint);
}

.bellco-sechead-intro {
  font-size: 16px;
  line-height: 1.65;
  color: var(--bellco-muted);
  max-width: 520px;
  margin: 20px 0 0;
}

@media (max-width: 1199px) {
  .bellco-sechead {
    margin-bottom: 48px;
  }

  .bellco-sechead-title {
    font-size: 42px;
  }
}

@media (max-width: 767px) {
  .bellco-sechead {
    margin-bottom: 36px;
  }

  .bellco-sechead-title {
    font-size: 32px;
  }
}

/* -----------------------------------------------------------------------------
 * Horizontal scroll guard
 *
 * The site scrolled sideways on a phone. The cause was the on-scroll
 * animations: AOS holds a `fade-left` element at translate3d(100px,0,0) from
 * first paint until it is scrolled into view, so a column that already reaches
 * the right gutter sits 100px past the document the whole time. Measured 76px
 * of horizontal scroll on every page carrying `switchsplit` or `formpanel`
 * from 390 through 1199, and 52px at 1400.
 *
 * That cause is fixed at source -- those two blocks now enter vertically, and
 * AOS is disabled below 992 and under prefers-reduced-motion. This is the
 * backstop, so the next transform, wide table or oversized embed cannot put
 * the sideways scrollbar back.
 *
 * `clip` rather than `hidden`: `overflow: hidden` turns the element into a
 * scroll container, which would break `position: sticky` on `.formpanel-copy`
 * and any future sticky. `clip` cuts the overflow without that side effect.
 * The `hidden` fallback is scoped to browsers without `clip` (Safari < 16) and
 * to under 1200px, which is below the only min-width at which this site uses
 * sticky at all.
 * -------------------------------------------------------------------------- */
html {
  overflow-x: clip;
}

body {
  max-width: 100%;
  overflow-x: clip;
}

@supports not (overflow: clip) {
  @media (max-width: 1199px) {
    html,
    body {
      overflow-x: hidden;
    }
  }
}

/* Nothing on the page has a reason to be wider than the page. */
img,
video,
iframe,
table {
  max-width: 100%;
}

/* Someone who has asked their OS for less motion should not get a 500ms
   translate on every section, and AOS's starting transform is inert here
   whatever the JS does. */
@media (prefers-reduced-motion: reduce) {
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  html {
    scroll-behavior: auto;
  }
}


/* ==========================================================================
   Keyboard focus ring  [bellco-focus-ring]
   reflex.css kills the UA outline on every element. :focus-visible puts
   one back for keyboard users only. Specificity (0,1,0) beats the `*`
   reset and style.css loads after reflex, so this wins on both counts.
   ========================================================================== */
:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 3px solid var(--bellco-mint);
  outline-offset: 3px;
  border-radius: 2px;
}

/* The skip link lands flush to the corner; an offset ring would clip. */
.bellco-skip:focus-visible {
  outline-offset: -3px;
}