/* Post-migration fixes layered on the original Webflow stylesheet (kept untouched).
   Inset banner sections combine `.section{width:100%}` with 15px side margins, which
   pushed them 15px past the screen edge and caused sideways scrolling on every device
   (present on the live Webflow site too). Auto width keeps the intended 15px inset. */
.section.blog-sidebar-banner, .section.banner-career, .section.blog-details-banner,
.section.job-position-banner, .section.project-details-banner, .section.category-banner,
.section.blog-grid-banner, .section.changelog-banner, .section.banner {
  width: auto;
}

/* Service detail banners: the template's stock office photo sat on top of the page's own
   banner photo (z-index:-1). When a real photo is set, show it under a dark overlay so the
   white title stays readable. */
.section.banner-career:has(.service-details-banner-img[src]:not([src=""])) {
  background-image: linear-gradient(#00000080, #00000080);
  isolation: isolate;
}

/* Authentic IAE photos added to text-heavy pages; aspect ratios preserved. */
.iae-content-photo { display: block; width: 100%; max-width: 480px; height: auto; margin: 24px 0; }
.iae-photo-strip-section { padding: 40px 0 10px; }
.iae-photo-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.iae-strip-photo { width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; display: block; }
@media screen and (max-width: 767px) { .iae-photo-strip { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

/* Logos were stretched at tablet/phone sizes (fixed width+height boxes); keep their true shape. */
img.logo-header, img.logo-footer, img.sponser-logo { object-fit: contain; }

/* "50+ Years Experience" badge: the original phone rule (left:365px) pushed it off-screen
   and caused sideways scrolling on phones. Pin it to the right edge like the tablet rule. */
@media screen and (max-width: 767px) {
  .industrial-info:not(.left-position) { left: auto; right: 20px; }
}

/* Home reviews: on phones the two-column grid pushed the second review off-screen
   (sideways scroll). The original phone rule already sets three stacked rows; stack them. */
@media screen and (max-width: 479px) {
  .grid-9 { grid-template-columns: 1fr; }
}

/* Home hero on phones: the text column was 50% wide while the headline is 300px, so the
   headline spilled off the left edge ("entral Oregon's…"). Give the column the full width. */
@media screen and (max-width: 479px) {
  .content-banner.home { width: 100%; }
  .title-home-1.hero { max-width: 100%; }
}

/* Specials sign-up (home): the original form renders Webflow's reCAPTCHA box
   (304x78, 8px bottom margin) between the email field and Submit. That widget
   is bound to Webflow hosting and was removed, which made the row 86px shorter
   and the object-fit:cover SALE image shorter/less zoomed. Reserve the same
   space so the row and image match the original exactly. */
.iae-captcha-slot { width: 304px; max-width: 100%; height: 78px; margin-bottom: 8px; }

/* Catalog vendor logos: the original "Logo slider animation infinity" (a-302:
   0 -> -200% X over 30s, linear, loop, snap back) is only bound to the Home
   and About pages, so on the live Catalog page the strip sits still. Apply the
   same motion here; honour reduced-motion requests. */
@keyframes iae-logo-slide { from { transform: translate3d(0,0,0); } to { transform: translate3d(-200%,0,0); } }
html[data-wf-page="6ab19e78a81db5033f919d73"] .logo-slider { animation: iae-logo-slide 30s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  html[data-wf-page="6ab19e78a81db5033f919d73"] .logo-slider { animation: none; }
}

/* Home product headline marquee: the original spaces phrases with huge
   negative margins (-1559px/-1389px) plus justify-content:space-between, so
   every phrase gets the same pitch regardless of its length and the pitch
   shrinks with the viewport. Long phrases ("ZEP INDUSTRIAL STRENGTH PRODUCTS /")
   then collide with the next one (overlap of ~20-30px at 992-1200px wide, gaps
   of only 10px at 768px). Lay phrases out at their natural width with a fixed
   gap instead. The slider element itself keeps its width, so the original IX2
   motion (-200% over 30s, linear, loop) runs at the same speed. Hidden below
   768px exactly as on the original. */
.logo-slider:has(> .product-slider) { justify-content: flex-start; column-gap: 0.75em; font-size: 36px; }
.logo-slider > .product-slider { flex: 0 0 auto; margin-left: 0; margin-right: 0; }
.logo-slider > .product-slider > .slider-text { white-space: nowrap; flex: 0 0 auto; }
@media screen and (max-width: 991px) { .logo-slider:has(> .product-slider) { font-size: 28px; } }

/* ---------- Responsive QA round (Nov 2026) ---------- */

/* Header: below ~1200px the five links run into the phone/contact block
   (Catalog overlaps the envelope icon at 992-1070px), and the original
   hamburger opens no menu at all, leaving phones without page links. Switch to
   the hamburger at <=1199px and show the links (plus the phone number) as a
   drop-down panel; opened/closed by installMobileMenu() in WebflowPage.tsx. */
@media screen and (max-width: 1199px) {
  .navbar .nav-menu-wrapper { display: flex; justify-content: space-between; align-items: center; position: static; gap: 16px; padding-top: 10px; padding-bottom: 10px; }
  .navbar .div-block-6 { display: none; }
  .navbar .menu-button { display: block; margin: 0; padding: 12px; cursor: pointer; }
  .navbar .menu-button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
  .navbar .div-block-5 { display: none; }
  .navbar.iae-nav-open .div-block-5 {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 1000;
    background-color: var(--primary-dark); padding: 8px 15px 20px;
    box-shadow: 0 10px 20px #0000004d;
  }
  .navbar.iae-nav-open .navbar-links { margin: 0; padding: 14px 5px; border-bottom: 1px solid #ffffff1f; }
  .navbar.iae-nav-open .navbar-links .text-block { font-size: 18px; }
  .navbar .iae-nav-phone { display: none; }
  .navbar.iae-nav-open .iae-nav-phone { display: block; color: var(--primary); font-family: Verdana, Geneva, sans-serif; font-size: 18px; font-weight: 700; border-bottom: 0; }
}
@media screen and (min-width: 1200px) { .navbar .iae-nav-phone { display: none; } }
@media screen and (max-width: 479px) {
  .navbar .logo-header { max-width: 110px; }
}

/* Footer: at 992-1199px the link row ("Blog") collides with the logo, and
   between 480-991px the brand block is squeezed to 47%/75%. Stack brand,
   links and logo/social in one centred column with clear gaps below 1200px. */
@media screen and (max-width: 1199px) {
  .footer .footer-wrapper { flex-direction: column; align-items: center; gap: 32px; margin-bottom: 30px; }
  .footer .footer-brand-wrapper { width: 100%; max-width: 420px; align-items: center; text-align: center; margin-bottom: 0; }
  .footer .line-footer-wrap { margin: 0; padding-top: 0; width: 100%; }
  .footer .link-footer-wrap { flex-wrap: wrap; justify-content: center; gap: 8px 4px; }
  .footer .footer-links-brand { width: 100%; align-items: center; text-align: center; }
}

/* Specials sign-up (home): the 900x900 SALE artwork was forced to the row
   height with object-fit:cover, cutting off "SALE"/"Discounts" at the left
   edge; below 992px the original hides it entirely. Show it whole at its
   natural square ratio, and stack it under the form below 992px. */
.quick-stack .image-5 { height: auto; max-height: none; aspect-ratio: 1 / 1; width: 100%; object-fit: contain; }
.quick-stack .cell-2 { justify-content: center; }
@media screen and (max-width: 991px) {
  .quick-stack { grid-template-columns: 1fr !important; grid-template-rows: auto !important; }
  .quick-stack > .w-layout-cell { grid-area: auto !important; grid-column: 1 !important; grid-row: auto !important; }
  .quick-stack .cell-2 { display: flex; order: 3; }
  .quick-stack .image-5 { display: block; max-width: 520px; margin: 0 auto; }
}

/* Blog sidebar: "Blog / Post / Guide" link to category pages that the
   original CMS never filled (each shows "No items found"), so they are
   misleading dead ends. Hide the control; the pages themselves stay
   reachable (noindex) and nothing was deleted. */
.sidebar-categories { display: none; }
@media screen and (max-width: 1199px) {
  /* The hamburger artwork is dark on the dark header; make it visible. */
  .navbar .image-burger { filter: invert(1); width: 26px; height: auto; }
  .footer .footer-wrap, .footer .copyright-wrap { display: flex; justify-content: center; width: 100%; }
  .footer .info-wrapper { display: flex; flex-direction: column; align-items: center; text-align: center; }
}
@media screen and (max-width: 991px) {
  /* Stacked layout: no side-by-side row height to match, so drop the
     reserved reCAPTCHA-height gap. */
  .iae-captcha-slot { display: none; }
}

/* Phone home page: several centred white paragraphs are capped at ~250-275px
   by the original's fixed widths, leaving narrow ragged columns with wide
   empty margins inside 360px sections. Let them use the section width
   (the sections already provide 15px+ side padding). */
@media screen and (max-width: 479px) {
  .paragraph-large.white-text,
  .paragraph-large.white-text.hero,
  .paragraph-large.white-text.tracks-section { width: 100%; max-width: 100%; }
  .div-block-9 .paragraph-large.white-text.tracks-section { padding-left: 20px; padding-right: 20px; }
  .career-wrapper, .title-career, .content-career { width: 100%; max-width: 100%; }
}
@media screen and (max-width: 479px) {
  .paragraph-large.white-text { margin-left: 0; margin-right: 0; box-sizing: border-box; }
}

/* Blog: a second, never-populated CMS list under the posts shows a grey
   "No items found." box (also on the original). Hide sections whose only
   content is such an empty list. */
.section.without-top-spacing:has(> .base-container > .w-dyn-list > .w-dyn-empty:only-child) { display: none; }

/* Phone home page pass 2 (user screenshots sc1-sc6, Nov 2026).
   Original phone layout caps h1/h2 at fixed 275-300px widths, stacks an
   80px gap under the hero photo, and lets the fixed 180x200 "50+" box hang
   71px below its photo onto the next heading. */
@media screen and (max-width: 479px) {
  /* sc1: tighter photo-to-text gap, wider hero text column. */
  .banner-img-1 { margin-bottom: 0; }
  .section.banner-home-1 > .base-container { padding-top: 24px; }
  .content-banner.home .title,
  .content-banner.home .title-home-1 { width: 100%; max-width: 100%; }
  /* sc2: smaller box sized to its text, vertically centred, left-aligned,
     with clear space before the next heading. */
  .industrial-info { width: 150px; height: auto; min-height: 0; padding: 14px 18px;
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    text-align: left; top: auto; bottom: -24px; right: 12px; }
  .industrial-info .years { width: auto; font-size: 40px; line-height: 1.1; }
  .industrial-info .expierience { width: auto; font-size: 15px; line-height: 1.3; }
  .img-industrial-wrap { margin-bottom: 52px; }
  /* sc3 / sc5: headings centred across the full width. */
  .title-industrial h2, .grid-9 h2 { width: 100%; justify-content: center; text-align: center; }
  .title-industrial { text-align: center; }
  /* sc4 / sc6: CTA headings use the full width; fewer lines, shorter section. */
  .title-career h2 { width: 100%; justify-content: center; text-align: center; font-size: 34px; line-height: 1.2; }
  .career-wrapper { margin-bottom: 24px; }
  /* sc4: room above the Contact button. */
  .title-career .paragraph-large + a, .title-career a.w-button, .content-career a.w-button { margin-top: 20px; }
}
@media screen and (max-width: 374px) {
  /* 320px: hero headline ran to five lines; one step smaller keeps it to four. */
  .content-banner.home .title-home-1 { font-size: 32px; line-height: 1.2; }
  .title-career h2 { font-size: 30px; }
}
@media screen and (max-width: 479px) {
  /* sc5: 42px filled the column edge-to-edge; match the CTA heading size. */
  .grid-9 h2 { font-size: 36px; line-height: 1.2; }
}
@media screen and (max-width: 374px) {
  /* sc7: keep "Located in Bend, Oregon." on one line at 320px. */
  .footer .heading-5 { font-size: 22px; }
}

/* Catalog (and any page) intro copy at <=991px: the original Webflow CSS turns
   .paragraph-large into a centered flex row, so every text run / line break /
   phone link inside the paragraph became its own narrow column (words stacked
   vertically, phone number split). Restore normal inline paragraph flow for
   paragraphs that contain mixed inline content. */
@media screen and (max-width: 991px) {
  .paragraph-large:has(> br, > span, > a, > strong) {
    display: block;
    text-align: left;
  }
  .paragraph-large a[href^="tel:"] { white-space: nowrap; }
  .paragraph-large._w-80 { width: 100%; max-width: 100%; }
}
@media screen and (max-width: 479px) {
  .paragraph-large._w-80 { font-size: 16px; }
  .about-us-content-wrapper .about-us-img { width: 100%; max-width: 420px; height: auto; display: block; margin: 0 auto; }
}