/*
Theme Name: Screenr Child
Theme URI: https://www.ls-aggregates.com/
Description: Child theme of Screenr for LS Aggregates. Customizations live here so they survive parent theme updates.
Author: LS Aggregates
Template: screenr
Version: 1.10.5
Text Domain: screenr-child
*/

/* Contact page redesign: two-column layout (info card + form card),
   modern cards/icons/buttons in the site's navy/orange palette.
------------------------------*/
.contact-hero-lede {
  font-size: 19px;
  color: #4a5568;
  margin: 0 0 44px;
  line-height: 1.6;
}

.contact-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: start;
}
@media screen and (max-width: 900px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.contact-info-card,
.contact-form-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 44px;
  box-shadow: 0 12px 32px rgba(13, 59, 134, 0.08);
  border: 1px solid rgba(13, 59, 134, 0.06);
  border-top: 4px solid #F2A73B;
}
@media screen and (max-width: 600px) {
  .contact-info-card,
  .contact-form-card {
    padding: 28px 22px;
  }
}

.contact-card-heading {
  display: inline-block;
  font-size: 24px;
  font-weight: 700;
  color: #0D3B86;
  margin: 0 0 28px;
  padding-bottom: 10px;
  border-bottom: 3px solid #F2A73B;
}
.contact-form-sub {
  color: #718096;
  font-size: 15px;
  margin: -18px 0 28px;
}

.contact-info-rows {
  list-style: none;
  margin: 0 0 36px;
  padding: 0;
}
.contact-info-rows li {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid #eef1f6;
}
.contact-info-rows li:last-child {
  border-bottom: none;
}
.contact-info-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #F2A73B;
  color: #0D3B86;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  transition: transform 0.25s ease;
  box-shadow: 0 6px 14px rgba(242, 167, 59, 0.35);
}
.contact-info-icon svg {
  width: 19px;
  height: 19px;
}
.contact-info-rows li:hover .contact-info-icon {
  transform: scale(1.08) rotate(-4deg);
}
.contact-info-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 4px;
}
.contact-info-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #a0aec0;
}
.contact-info-value {
  font-size: 16px;
  font-weight: 600;
  color: #1a202c;
}
.contact-info-value a {
  color: #1a202c;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.contact-info-value a:hover {
  color: #1a202c;
  text-decoration: none;
  border-bottom-color: #F2A73B;
}

/* Full-width map block below the two-column layout. */
.contact-map-full {
  width: 100%;
  margin-top: 48px;
  line-height: 0;
}
.contact-map-full iframe {
  display: block;
  width: 100%;
}

/* Honeypot field: present in the DOM (so bots that fill every field
   still get caught by the wpcf7_spam check in functions.php) but
   moved off-screen instead of display:none, which is easy for basic
   scrapers to detect and skip. */
.contact-form-card .cf7-hp {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Contact Form 7 restyle */
.contact-form-card .wpcf7-form .row {
  display: flex;
  gap: 16px;
  margin: 0 -8px;
}
.contact-form-card .wpcf7-form .row .col-md-4 {
  flex: 1;
  padding: 0 8px;
}
.contact-form-card .wpcf7-form .large-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #718096;
  margin-bottom: 6px;
}
.contact-form-card .wpcf7-form-control-wrap {
  display: block;
}
.contact-form-card .wpcf7-form p {
  margin: 0 0 4px;
}
.contact-form-card .wpcf7-form .row {
  margin-bottom: 4px;
}
.contact-form-card .wpcf7-form-control {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 16px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font-size: 15px;
  color: #1a202c;
  background: #fbfcfe;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  margin-bottom: 20px;
}
.contact-form-card .wpcf7-form-control:focus {
  outline: none;
  border-color: #0D3B86;
  box-shadow: 0 0 0 3px rgba(13, 59, 134, 0.12);
  background: #ffffff;
}
.contact-form-card textarea.wpcf7-form-control {
  resize: vertical;
  min-height: 130px;
}
.contact-form-card .contact-submit {
  margin-top: 8px;
}
.contact-form-card .wpcf7-form-control.wpcf7-submit {
  width: auto;
  background: #0D3B86;
  color: #ffffff;
  border: none;
  padding: 14px 36px;
  border-radius: 30px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  box-shadow: 0 8px 20px rgba(13, 59, 134, 0.3);
}
.contact-form-card .wpcf7-form-control.wpcf7-submit:hover {
  background: #0a2e6b;
  transform: translateY(-2px);
}
.contact-form-card .wpcf7-spinner {
  vertical-align: middle;
  margin-left: 10px;
}
@media screen and (max-width: 600px) {
  .contact-form-card .wpcf7-form .row {
    flex-direction: column;
    gap: 0;
  }
}

/* Plain title strip for Products/Projects/About/Contact (replaces the
   dark image banner), matching bluelineheavyequipment.com/contact/'s
   layout: breadcrumb above a left-aligned title, no colored section. */
.page-title-strip {
  /* .site-header is position:fixed (89px tall incl. its border), so it
     overlays page content rather than pushing it down -- padding-top
     needs to clear that first, then add real breathing room on top. */
  padding: 80px 0 24px;
  border-bottom: 1px solid #e9e9e9;
  margin-bottom: 40px;
}
.page-title-strip__breadcrumb {
  font-size: 13px;
  color: #66635D;
  margin-bottom: 12px;
}
.page-title-strip__breadcrumb a {
  color: #66635D;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.page-title-strip__breadcrumb a:hover {
  text-decoration: none;
  border-bottom-color: #F2A73B;
}
.page-title-strip__title {
  font-size: 40px;
  font-weight: 700;
  color: #181611;
  margin: 0;
  line-height: 1.2;
}

/* Floating multi-channel contact button (bottom-right), modeled on
   bluelineheavyequipment.com's: a toggle button that expands into
   Messenger/WhatsApp/Viber/Call icons, each in its real brand color.
------------------------------*/
.footer-float-contact {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9000;
}
.footer-float-toggle {
  position: relative;
  z-index: 2;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: #F2A73B;
  color: #0D3B86;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.footer-float-toggle:hover {
  background: #d98f2a;
  transform: translateY(-1px);
}
.footer-float-toggle svg {
  width: 26px;
  height: 26px;
  transition: transform 0.25s ease;
}
.footer-float-toggle:hover svg {
  transform: scale(1.08) rotate(-4deg);
}

/* Attention pulse: a pulsing ring behind the button plus a little
   jump on the button itself, matching bluelineheavyequipment.com's
   floating button. Triggered periodically by the script below, not
   run continuously. */
.footer-float-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #F2A73B;
  pointer-events: none;
}
.footer-float-toggle.is-attention {
  animation: footer-float-jump 0.85s ease-in-out 0s 3 normal none running;
}
.footer-float-ring.is-pulsing {
  animation: footer-float-ring 0.85s ease-out 0s 3 normal none running;
}
@keyframes footer-float-jump {
  0%, 100% { transform: translateY(0) scale(1); }
  25% { transform: translateY(-9px) scale(1.06); }
  50% { transform: translateY(0) scale(0.95); }
  75% { transform: translateY(-3px) scale(1.02); }
}
@keyframes footer-float-ring {
  0% { transform: scale(1); opacity: 0.45; }
  100% { transform: scale(1.7); opacity: 0; }
}
.footer-float-toggle .footer-float-icon-close {
  display: none;
  position: absolute;
}
.footer-float-contact.is-open .footer-float-toggle .footer-float-icon-open {
  display: none;
}
.footer-float-contact.is-open .footer-float-toggle .footer-float-icon-close {
  display: block;
}

.footer-float-channels {
  position: absolute;
  bottom: 68px;
  right: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.footer-float-channel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
  opacity: 0;
  transform: translateY(10px) scale(0.8);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.footer-float-contact.is-open .footer-float-channel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.footer-float-channel svg {
  width: 22px;
  height: 22px;
}
.footer-float-messenger {
  background: #0084FF;
}
.footer-float-whatsapp {
  background: #25D366;
}
.footer-float-viber {
  background: #7360F2;
}
.footer-float-call {
  background: #F2A73B;
  color: #0D3B86;
}

.footer-float-tooltip {
  position: absolute;
  right: 58px;
  top: 50%;
  transform: translateY(-50%);
  background: #161107;
  color: #ffffff;
  font-size: 13px;
  padding: 5px 10px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.footer-float-channel:hover .footer-float-tooltip {
  opacity: 1;
}
@media screen and (max-width: 600px) {
  .footer-float-tooltip {
    display: none;
  }
}

/* Footer column dividers: the 3 columns are already equal width with
   identical gutters, but "Our Products" has much shorter text than
   the other two columns, leaving dead space that makes the col2-col3
   gap look bigger than the col1-col2 gap. A subtle divider line
   anchors the eye on the actual (already-equal) gutter instead of the
   ragged text edges. */
@media screen and (min-width: 768px) {
  /* The columns' shared parent (.row) is display:block, not flex, so
     each column keeps its own natural content height (240/274/314px
     measured) -- the border-left dividers, which span their own
     column's height, came out visibly different lengths. Flexing the
     row stretches all 3 columns to equal height (flex default),
     making both dividers the same length. */
  .site-footer .footer-widgets .row {
    display: flex;
    flex-wrap: wrap;
  }
  .site-footer .footer-column + .footer-column {
    border-left: 1px solid rgba(255, 255, 255, 0.12);
  }
}

/* Footer: dark blue shades instead of black/gray.
------------------------------*/
.site-footer {
  background: #0B1F3F;
}
.site-footer .site-info {
  background: #142B52;
  border-top: 1px solid #23406e;
}

/* Footer text: white for readability, consistently across every
   footer text color (base text, links at every specificity level the
   parent theme declares them at, widget titles, and the bottom bar). */
.site-footer,
.site-footer .site-info {
  color: #FFFFFF;
}
.site-footer a,
.site-footer .sidebar .widget a,
.site-footer .site-info a {
  color: #FFFFFF;
}
.site-footer .sidebar .widget .widget-title {
  color: #FFFFFF;
  display: inline-block;
  padding-bottom: 10px;
  border-bottom: 2px solid #F2A73B;
  margin-bottom: 20px;
}

/* Footer "Our Products" list: uniform, evenly-spaced list items
   instead of a <br>-separated paragraph. */
.site-footer .footer-product-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer .footer-product-list li {
  margin-bottom: 10px;
}
.site-footer .footer-product-list li:last-child {
  margin-bottom: 0;
}
/* Hover effect matching Blueline's "Quick Links": reserved transparent
   border-bottom that turns solid on hover, alongside the text color
   change, instead of an underline that shifts layout. */
.site-footer .sidebar .widget .footer-product-list a {
  display: inline-block;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.site-footer .sidebar .widget .footer-product-list a:hover {
  color: #ffffff;
  text-decoration: none;
  border-bottom-color: #F2A73B;
}

/* Center the copyright line: the parent .site-info already has
   text-align:center, but the child's float:left (and the theme
   credit's float:right) override that and pin them to the edges
   instead. Same fix the theme itself already applies on mobile --
   just extending it to desktop too. */
.site-footer .site-info .site-copyright,
.site-footer .site-info .theme-info {
  float: none;
  text-align: center;
}

/* Footer logo (replaces the plain "LS Aggregates" widget title). */
.site-footer .footer-logo {
  max-width: 200px;
  height: auto;
  margin-bottom: 15px;
  display: block;
}

/* Footer social icons: placeholder row (links to homepage for now),
   styled similar to bluelineheavyequipment.com's footer -- circular
   badges in a horizontal row. */
.site-footer .footer-social {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}
.site-footer .footer-social-icon,
.site-footer .sidebar .widget .footer-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #F2A73B;
  color: #0D3B86;
  transition: transform 0.2s ease;
}
.site-footer .footer-social-icon:hover,
.site-footer .sidebar .widget .footer-social-icon:hover {
  transform: translateY(-1px);
  text-decoration: none;
}
.site-footer .footer-social-icon svg {
  width: 18px;
  height: 18px;
  transition: transform 0.25s ease;
}
.site-footer .footer-social-icon:hover svg {
  transform: scale(1.08) rotate(-4deg);
}

/* Footer Contact Us list: icon + label/value layout, matching
   bluelineheavyequipment.com's "Get in Touch" block. */
.site-footer .footer-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer .footer-contact-list li {
  margin-bottom: 18px;
}
.site-footer .footer-contact-list li:last-child {
  margin-bottom: 0;
}
.site-footer .footer-contact-list a,
.site-footer .footer-contact-static {
  display: flex;
  align-items: center;
  gap: 13px;
  color: #ffffff;
}
.site-footer .footer-contact-list a:hover,
.site-footer .sidebar .widget .footer-contact-list a:hover {
  text-decoration: none;
}
.site-footer .footer-contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #F2A73B;
  color: #0D3B86;
  transition: transform 0.2s ease;
}
.site-footer .footer-contact-icon svg {
  width: 16px;
  height: 16px;
}
.site-footer .footer-contact-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.site-footer .footer-contact-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.site-footer .footer-contact-value {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

/* Hover: amber underline only, no text color change. */
.site-footer .footer-contact-list a:hover .footer-contact-value {
  border-bottom-color: #F2A73B;
}
.site-footer .footer-contact-list a:hover .footer-contact-icon {
  transform: translateY(-1px);
}

/* Always-white header with blue nav text, overriding the parent
   theme's transparent/dark hero-overlay header design (which used
   white text meant for a photo background — invisible once the header
   itself is white). Covers the at-top transparent state, the
   scrolled/fixed dark-bar state, and the mobile hamburger icon.
------------------------------*/
.site-header,
.site-header.transparent,
.site-header.header-fixed.transparent,
.site-header.sticky-header.transparent {
  background: #FFFFFF;
}

/* Accent line under the header, matching bluelineheavyequipment.com's
   yellow header border (ours in brand blue). The parent theme sets
   border-bottom-color: transparent specifically when scrolled+still
   carrying the "transparent" class -- same selector specificity
   needed to keep the line visible in that state too. */
.site-header {
  border-bottom: 4px solid #0D3B86;
}
.site-header.sticky-header.transparent.header-fixed {
  border-bottom-color: #0D3B86;
}

@media screen and (min-width: 1140px) {
  /* Font size matched to breedongroup.com's main menu (16px / 600
     weight). Their hover effect is a bottom border that goes from
     transparent to solid on hover — same idea as this theme's
     existing ::after bar, just recolored/resized.
  */
  .sticky-header.transparent .nav-menu > li > a {
    color: #0D3B86;
    font-size: 16px;
  }
  .sticky-header.transparent .nav-menu > li > a::after {
    border-bottom-width: 3px;
  }
  .sticky-header.transparent .nav-menu > li:hover > a::after,
  .sticky-header.transparent .nav-menu > li.current-menu-item > a::after,
  .sticky-header.transparent .nav-menu > li.current_page_item > a::after {
    border-bottom-color: #F2A73B;
  }
  /* Keep text blue on hover too (parent theme's generic
     ".nav-menu a:hover" rule would otherwise turn it orange). */
  .nav-menu > li > a:hover {
    color: #0D3B86;
  }
  /* Fix double underline: the theme's generic ".nav-menu a:hover" rule
     doesn't reset text-decoration, so the browser's default hover
     underline was rendering on top of the ::after bar above. */
  .nav-menu > li > a:hover,
  .nav-menu > li > a:focus {
    text-decoration: none;
  }
  /* Remove the browser's default focus outline (shows as a visible box
     on click) but keep a clean version for keyboard/Tab navigation via
     :focus-visible, so accessibility for keyboard users isn't lost. */
  .nav-menu > li > a:focus {
    outline: none;
  }
  .nav-menu > li > a:focus-visible {
    outline: 2px solid #000000;
    outline-offset: 2px;
  }
}

/* Same click-focus box issue on the logo link/image. */
.custom-logo-link:focus,
.custom-logo-link img:focus,
.custom-logo:focus {
  outline: none;
}
.custom-logo-link:focus-visible {
  outline: 2px solid #0D3B86;
  outline-offset: 2px;
}
@media screen and (max-width: 1140px) {
  .transparent #nav-toggle span, .transparent #nav-toggle span:after, .transparent #nav-toggle span:before {
    background-color: #0D3B86;
  }
  .transparent #nav-toggle.nav-is-visible span:before, .transparent #nav-toggle.nav-is-visible span::after {
    background-color: #0D3B86;
  }
}

/* Fix custom logo collapsing to 0x0: the parent theme's
   ".custom-logo-link { display: block; }" combined with
   ".site-branding img, .site-branding a { width: auto; }" creates a
   circular shrink-to-fit vs. fill-available-width conflict on the
   floated .site-branding container when no site-title text is present
   (body.no-site-title, i.e. whenever a custom logo is set). Forcing the
   link to shrink-wrap and giving the image an explicit height resolves
   it the same way the theme's own logo height setting (60px) intends.
------------------------------*/
.custom-logo-link {
  display: inline-block;
}
.site-branding .custom-logo {
  height: 50px;
  width: auto;
  max-width: 240px;
}

/* Product Detail template -- same card motif (rounded corners, soft
   navy shadow, amber accent) as the rest of the site, instead of the
   parent theme's plain gray box + coral button.
------------------------------*/
.product-cta {
  margin: 40px 0;
  padding: 36px;
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid rgba(13, 59, 134, 0.06);
  border-top: 4px solid #F2A73B;
  box-shadow: 0 8px 24px rgba(13, 59, 134, 0.08);
  text-align: center;
}
.product-cta p {
  font-size: 18px;
  font-weight: 600;
  color: #181611;
  margin: 0 0 18px;
}

.related-products {
  margin: 40px 0;
  padding-top: 30px;
  border-top: 1px solid #e9e9e9;
}
.related-products__list {
  list-style: none;
  margin: 15px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.related-products__item a {
  display: inline-block;
  padding: 8px 18px;
  border: 1.5px solid rgba(242, 167, 59, 0.4);
  border-radius: 30px;
  text-decoration: none;
  color: #d98f2a;
  font-weight: 600;
  font-size: 14px;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.related-products__item a:hover {
  background: #F2A73B;
  color: #0D3B86;
  border-color: #F2A73B;
  text-decoration: none;
}

/* Product photo, added to the top of every Product Detail page
   (Gravel, Sand, etc.) via the template, paired with the page's own
   text -- same "photo + copy" idea as .split-media below, sized to sit
   directly under the title strip rather than mid-content.
------------------------------*/
.product-photo {
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 36px;
  box-shadow: 0 12px 32px rgba(13, 59, 134, 0.12);
}
.product-photo img {
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.product-photo:hover img {
  transform: scale(1.04);
}

/* Reusable "photo beside copy" block -- used on About (operations
   photo + story) and can be reused anywhere else a page pairs an
   image with a paragraph. Matches the site's card motif: rounded
   corners, soft shadow, subtle zoom-on-hover for a bit of polish
   without being distracting.
------------------------------*/
.split-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  margin: 8px 0 48px;
}
.split-media__media {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(13, 59, 134, 0.14);
}
.split-media__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.split-media__media:hover img {
  transform: scale(1.05);
}
.split-media__body p {
  font-size: 16px;
  line-height: 1.75;
  color: #4a5568;
}
@media screen and (max-width: 900px) {
  .split-media {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* Highlight chips -- 3 short capability call-outs under the About
   story (icon badge + label), same icon-badge treatment as the
   Contact page's info rows, with the same lift-on-hover as the
   product/category cards below. */
.highlight-chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 0 0 48px;
}
.highlight-chip {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #ffffff;
  border: 1px solid rgba(13, 59, 134, 0.08);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 6px 18px rgba(13, 59, 134, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.highlight-chip:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(13, 59, 134, 0.14);
}
.highlight-chip__icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #F2A73B;
  color: #0D3B86;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease;
}
.highlight-chip:hover .highlight-chip__icon {
  transform: scale(1.08) rotate(-4deg);
}
.highlight-chip__icon svg {
  width: 22px;
  height: 22px;
}
.highlight-chip__label {
  font-size: 15px;
  font-weight: 700;
  color: #181611;
}
@media screen and (max-width: 700px) {
  .highlight-chips {
    grid-template-columns: 1fr;
  }
}

/* Product card grid -- used on the Products overview page. Photo top,
   copy below, alternating blue/amber top accent like the Contact
   cards, lift + image zoom on hover.
------------------------------*/
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin: 8px 0 48px;
}
.product-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(13, 59, 134, 0.06);
  border-top: 4px solid #F2A73B;
  box-shadow: 0 8px 24px rgba(13, 59, 134, 0.08);
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(13, 59, 134, 0.18);
  text-decoration: none;
}
.product-card:focus {
  outline: none;
}
.product-card:focus-visible {
  outline: 2px solid #0D3B86;
  outline-offset: 2px;
}
.product-card__image {
  height: 170px;
  overflow: hidden;
}
.product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.product-card:hover .product-card__image img {
  transform: scale(1.08);
}
.product-card__body {
  padding: 22px 24px 26px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.product-card__title {
  font-size: 19px;
  font-weight: 700;
  color: #181611;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #F2A73B;
}
.product-card__desc {
  font-size: 14px;
  line-height: 1.6;
  color: #5a6472;
  margin: 0 0 18px;
  flex: 1;
}
.product-card__link {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #0D3B86;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.product-card__link svg {
  width: 14px;
  height: 14px;
  transition: transform 0.25s ease;
}
.product-card:hover .product-card__link svg {
  transform: translateX(4px);
}
@media screen and (max-width: 900px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 600px) {
  .product-grid {
    grid-template-columns: 1fr;
  }
}

/* Projects page: contained hero photo (replaces the removed dark
   full-bleed banner with a rounded, shadowed image so the page still
   opens with a strong visual) and a 3-up "type of work" card row,
   same icon-badge + lift-on-hover language as the highlight chips. */
.projects-hero {
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 40px;
  box-shadow: 0 16px 40px rgba(13, 59, 134, 0.18);
  position: relative;
}
.projects-hero img {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: cover;
}
.projects-hero__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px 32px;
  background: linear-gradient(0deg, rgba(11, 31, 63, 0.82) 0%, rgba(11, 31, 63, 0) 100%);
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
}
.project-type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 8px 0 48px;
}
.project-type-card {
  background: #ffffff;
  border: 1px solid rgba(13, 59, 134, 0.08);
  border-radius: 16px;
  padding: 30px 26px;
  text-align: center;
  box-shadow: 0 8px 22px rgba(13, 59, 134, 0.07);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.project-type-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(13, 59, 134, 0.16);
}
.project-type-card__icon {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: #F2A73B;
  color: #0D3B86;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  transition: transform 0.25s ease;
}
.project-type-card:hover .project-type-card__icon {
  transform: scale(1.08) rotate(-4deg);
}
.project-type-card__icon svg {
  width: 26px;
  height: 26px;
}
.project-type-card__title {
  font-size: 17px;
  font-weight: 700;
  color: #181611;
  margin: 0 0 8px;
}
.project-type-card__desc {
  font-size: 14px;
  line-height: 1.6;
  color: #5a6472;
  margin: 0;
}
@media screen and (max-width: 900px) {
  .project-type-grid {
    grid-template-columns: 1fr;
  }
}
.projects-note {
  background: #f7f9fc;
  border: 1px dashed rgba(13, 59, 134, 0.25);
  border-radius: 14px;
  padding: 22px 26px;
  color: #5a6472;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 8px;
}

/* ==========================================================================
   Homepage rebuild (templates/../template-frontpage.php)
   Replaces the old one-page Screenr demo (slider/features/about/services/
   contact sections driven by Customizer) with a hand-built, multi-page-
   aware landing page: hero -> trust cards -> products teaser -> about
   teaser -> CTA banner -> footer. Same navy/amber motif and card language
   as the rest of the site.
   ========================================================================== */

/* Scroll-reveal: fade + rise as sections enter the viewport (see
   assets/js/reveal.js). Respects prefers-reduced-motion by never hiding
   content those users haven't scrolled to yet -- JS adds a matching
   guard, this is the CSS half. */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Hero -- full-bleed photo, navy gradient overlay (brand color instead of
   generic black), clears the fixed 89px header before the image starts. */
.home-hero {
  position: relative;
  padding-top: 89px;
  min-height: 620px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  color: #ffffff;
  overflow: hidden;
}
.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(8, 22, 46, 0.92) 0%, rgba(13, 59, 134, 0.72) 48%, rgba(13, 59, 134, 0.42) 100%);
}
.home-hero__container {
  width: 100%;
}
.home-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 700px;
  padding: 70px 0 80px;
}
.home-hero__eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 13px;
  font-weight: 700;
  color: #F2A73B;
  margin-bottom: 18px;
}
.home-hero__title {
  font-size: 46px;
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 20px;
}
.home-hero__desc {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 34px;
  max-width: 54ch;
}
.home-hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.home-hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 30px;
  border-radius: 30px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.home-hero__btn:hover {
  transform: translateY(-3px);
  text-decoration: none;
}
.home-hero__btn--primary {
  background: #F2A73B;
  color: #0D3B86;
  box-shadow: 0 10px 24px rgba(242, 167, 59, 0.35);
}
.home-hero__btn--primary:hover {
  background: #ffb84d;
  color: #0D3B86;
}
.home-hero__btn--ghost {
  background: transparent;
  color: #F2A73B;
  border: 1.5px solid #F2A73B;
}
.home-hero__btn--ghost:hover {
  background: rgba(242, 167, 59, 0.15);
  color: #F2A73B;
  border-color: #ffb84d;
}
.home-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 2;
  color: rgba(255, 255, 255, 0.85);
  animation: home-hero-bob 2.2s ease-in-out infinite;
}
.home-hero__scroll svg {
  width: 26px;
  height: 26px;
}
@keyframes home-hero-bob {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 8px); }
}
@media screen and (max-width: 700px) {
  .home-hero { min-height: 560px; }
  .home-hero__title { font-size: 32px; }
  .home-hero__desc { font-size: 16px; }
  .home-hero__inner { padding: 50px 0 60px; }
}

/* Shared section rhythm for the homepage's stacked sections. */
.home-section {
  padding: 76px 0;
}
.home-section--tint {
  background: #f7f9fc;
}
.home-section__head {
  max-width: 640px;
  margin: 0 0 44px;
}
.home-section__eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 13px;
  font-weight: 700;
  color: #0D3B86;
  margin-bottom: 10px;
}
.home-section__title {
  font-size: 32px;
  font-weight: 800;
  color: #181611;
  margin: 0 0 14px;
  line-height: 1.2;
}
.home-section__desc {
  font-size: 16px;
  line-height: 1.7;
  color: #5a6472;
  margin: 0;
}
.home-section__cta {
  margin-top: 40px;
  text-align: center;
}
@media screen and (max-width: 700px) {
  .home-section { padding: 56px 0; }
  .home-section__title { font-size: 26px; }
}

/* Value props ("Why Choose LS Aggregates") -- icon + title + description
   cards, same lift-on-hover language as the product/project cards. */
.value-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.value-card {
  display: block;
  background: #ffffff;
  border: 1px solid rgba(13, 59, 134, 0.08);
  border-radius: 16px;
  padding: 30px 24px;
  box-shadow: 0 8px 22px rgba(13, 59, 134, 0.06);
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
a.value-card:hover {
  text-decoration: none;
}
.value-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(13, 59, 134, 0.16);
}
.value-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #F2A73B;
  color: #0D3B86;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  transition: transform 0.25s ease;
}
.value-card:hover .value-card__icon {
  transform: scale(1.08) rotate(-4deg);
}
.value-card__icon svg {
  width: 24px;
  height: 24px;
}
.value-card__title {
  font-size: 17px;
  font-weight: 700;
  color: #181611;
  margin: 0 0 8px;
}
.value-card__desc {
  font-size: 14px;
  line-height: 1.6;
  color: #5a6472;
  margin: 0;
}
@media screen and (max-width: 900px) {
  .value-grid { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 560px) {
  .value-grid { grid-template-columns: 1fr; }
}

/* Outline button used for section-level "view all" links (Products
   teaser, etc.) -- lighter weight than the hero buttons. */
.btn-outline-navy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: 30px;
  border: 1.5px solid #F2A73B;
  color: #d98f2a;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.btn-outline-navy:hover {
  background: #F2A73B;
  color: #0D3B86;
  transform: translateY(-2px);
  text-decoration: none;
}
.btn-outline-navy svg {
  width: 16px;
  height: 16px;
}

/* Final CTA banner before the footer -- amber instead of navy so it
   doesn't visually merge into the dark navy footer directly below it. */
.home-cta {
  background: linear-gradient(120deg, #F2A73B 0%, #f0b556 100%);
  color: #0D3B86;
  text-align: center;
  padding: 70px 24px;
}
.home-cta__title {
  font-size: 30px;
  font-weight: 800;
  margin: 0 0 14px;
  color: #0D3B86;
}
.home-cta__desc {
  font-size: 16px;
  color: rgba(13, 59, 134, 0.85);
  margin: 0 0 32px;
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}
.home-cta .home-hero__btn {
  box-shadow: 0 10px 26px rgba(11, 31, 63, 0.25);
}
/* Kept navy here on purpose: this section's own background is the
   amber gradient above, and .home-hero__btn--primary defaults to
   amber (for contrast against the hero's dark photo overlay), so it
   needs this override to stay navy instead of disappearing into the
   section behind it. */
.home-cta .home-hero__btn--primary {
  background: #0D3B86;
  color: #ffffff;
}
.home-cta .home-hero__btn--primary:hover {
  background: #0a2e6b;
  color: #ffffff;
}
@media screen and (max-width: 700px) {
  .home-cta__title { font-size: 24px; }
}

/* Search form submit button -- sitewide (search results, 404 page,
   any search widget). */
input.search-submit {
  background: #0D3B86;
  color: #ffffff;
  transition: background-color 0.2s ease;
}
input.search-submit:hover {
  background: #0a2e6b;
}

/* 404 page: reuse the value-card grid at 3 columns without the
   homepage's 4-column default, and give the search box some room. */
.error-404__lede {
  font-size: 17px;
  color: #5a6472;
  max-width: 60ch;
}
.error-404__grid {
  grid-template-columns: repeat(3, 1fr);
  margin: 32px 0 44px;
}
.error-404 .search-form {
  max-width: 420px;
}
@media screen and (max-width: 700px) {
  .error-404__grid {
    grid-template-columns: 1fr;
  }
}

/* "Get Quote" nav item: styled as a solid CTA button instead of a
   plain text link, matching bluelineheavyequipment.com's nav treatment
   (their yellow button -> our brand amber/navy pair). */
.nav-menu .nav-quote-btn > a {
  background: #0D3B86;
  color: #ffffff !important;
  border-radius: 30px;
  padding: 8px 20px !important;
  display: inline-block;
  line-height: normal;
  vertical-align: middle;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.nav-menu .nav-quote-btn > a::after {
  display: none !important;
}
.nav-menu .nav-quote-btn > a:hover {
  background: #0a2e6b;
  color: #ffffff !important;
  transform: translateY(-1px);
}

/* In the mobile dropdown menu, every other item is a full-width,
   44px-tall tappable row -- the pill sizing above is desktop-only
   (it sits inline next to plain text links there), so on mobile it
   needs to match its siblings' size/shape instead of staying a small
   108x32px pill, which is both a cramped touch target and visually
   inconsistent with the rest of the menu. */
@media screen and (max-width: 1140px) {
  .nav-menu .nav-quote-btn > a {
    display: block;
    border-radius: 0;
    padding: 12px 20px !important;
    text-align: left;
  }
}

/* Get a Quote page: reuses the Contact page's .contact-layout grid
   and .contact-form-card/.contact-info-card cards -- form on the
   left, a "Why Buy From LS Aggregates" benefits list on the right. */
.quote-benefits {
  list-style: none;
  margin: 0;
  padding: 0;
}
.quote-benefit {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}
.quote-benefit:last-child {
  margin-bottom: 0;
}
.quote-benefit-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #F2A73B;
  color: #0D3B86;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease;
}
.quote-benefit:hover .quote-benefit-icon {
  transform: scale(1.08) rotate(-4deg);
}
.quote-benefit-icon svg {
  width: 22px;
  height: 22px;
}
.quote-benefit strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #181611;
  margin-bottom: 4px;
}
.quote-benefit p {
  font-size: 14px;
  line-height: 1.6;
  color: #5a6472;
  margin: 0;
}
.quote-products {
  margin: 0 0 20px;
}
.quote-product-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 8px 0 14px;
}
.quote-product-row {
  display: flex;
  gap: 12px;
  align-items: center;
}
.contact-form-card .quote-product-select,
.contact-form-card .quote-volume-input {
  padding: 13px 16px;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  font-size: 15px;
  color: #1a202c;
  background: #fbfcfe;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.quote-product-select {
  flex: 0 0 42%;
}
.quote-volume-input {
  flex: 1;
}
.contact-form-card .quote-product-select:focus,
.contact-form-card .quote-volume-input:focus {
  outline: none;
  border-color: #0D3B86;
  box-shadow: 0 0 0 3px rgba(13, 59, 134, 0.12);
  background: #ffffff;
}
.quote-row-remove {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid #e2e8f0;
  background: #ffffff;
  color: #a0aec0;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.quote-row-remove:hover {
  color: #c53030;
  border-color: #c53030;
}
.quote-row-remove:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.quote-row-add {
  background: none;
  cursor: pointer;
}
.quote-products-error {
  color: #c53030;
  font-size: 13px;
  font-weight: 600;
  margin: -6px 0 14px;
  display: none;
}
.quote-products-error.is-visible {
  display: block;
}
@media screen and (max-width: 600px) {
  .quote-product-row {
    flex-wrap: wrap;
  }
  .quote-product-select {
    flex: 1 0 100%;
  }
}