/*
 * Cross-page responsive safeguards.
 * Page styles remain the source of the visual design; this file only prevents
 * overflow, overlap and desktop-only hover behaviour from leaking into touch
 * layouts or unusually wide screens.
 */
:root{--site-safe-gutter:clamp(20px,6.25vw,120px);--site-content-max:1680px}
html{min-width:320px;overflow-x:clip}
body{min-width:320px;max-width:100%;overflow-x:clip}
main,section,header,footer{max-width:100%}
img,video,canvas,svg{max-width:100%}
:where(.content-width,.resource-shell,.support-shell,.contact-shell,.career-shell,.faq-shell,.service-shell,.customer-shell,.inner-shell,.footer-grid,.inner-footer-grid)>*{min-width:0}
:where(h1,h2,h3){overflow-wrap:normal;word-break:normal;hyphens:none}
:where(p){overflow-wrap:break-word}

/* Product names are labels, not prose. Keep model names intact and let the
   carousel supply horizontal room instead of splitting a final character. */
.product-row h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;word-break:keep-all}

/* A medium desktop does not have enough room for the large section heading
   and its actions on the same baseline. Preserve the design hierarchy while
   keeping controls clear of both the heading and description. */
@media (min-width:1281px) and (max-width:1500px){
  .section-head .head-actions,
  .section-head .head-single{position:static!important;margin-top:28px!important}
  .product-row h3{font-size:clamp(19px,1.55vw,22px)}

  /* Four product cards become narrower at notebook widths. Preserve the
     original 402:456 card proportion instead of keeping a 456px-tall image
     inside a ~280px column, and let the section include all product copy. */
  .products{
    height:auto!important;
    min-height:0!important;
    padding-bottom:72px!important;
  }
  .products .product-viewport,
  .products .product-row,
  .products .product-row>article{
    height:auto!important;
    min-height:0!important;
  }
  .products .product-image{
    width:100%!important;
    height:auto!important;
    aspect-ratio:402/456;
  }
  .products .product-row p{
    display:block!important;
    height:auto!important;
    min-height:48px!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
  .products .product-prev,
  .products .product-next{
    top:627px!important;
  }

  .service-specialist{
    grid-template-columns:minmax(0,52%) minmax(0,1fr)!important;
    gap:48px!important;
    padding-inline:var(--site-safe-gutter)!important;
  }
  .specialist-copy,.specialist-copy p{min-width:0!important;width:auto!important;max-width:100%!important}
}

/* 2026-09-04 follow-up: resource reliability, notebook-density service rails,
   and Figma-aligned typography/CTA artwork. */
.about-intro h2>span{display:block}
.about-intro h2>span+span{margin-top:6px}
.service-cta>img{
  opacity:.72!important;
  filter:none!important;
  clip-path:none!important;
  translate:none!important;
  scale:1!important;
}
.resource-results-fallback{min-height:310px}

@media (min-width:901px) and (max-width:1512px){
  /* The NIFCO reference uses a single pinned-looking stage with two compact,
     counter-moving card columns. Keep that visual rhythm inside one viewport. */
  .service-applications{
    height:calc(100svh - var(--global-header-height,80px))!important;
    min-height:620px!important;
    max-height:800px!important;
    margin-bottom:0!important;
  }
  .service-applications>h2{
    top:50%!important;
    left:6.25%!important;
    width:min(35vw,460px)!important;
    font-size:clamp(38px,3.7vw,50px)!important;
    line-height:1.1!important;
    transform:translateY(-50%)!important;
  }
  .application-bg{
    opacity:1!important;
    filter:none!important;
    clip-path:none!important;
    translate:none!important;
    scale:1!important;
  }
  .application-columns{
    top:50%!important;
    right:6.25%!important;
    width:min(58vw,720px)!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:14px!important;
    transform:translateY(-50%)!important;
  }
  .application-column{gap:14px!important;will-change:transform}
  .application-column-a{
    transform:translateY(calc(-18px + var(--application-scroll,0px)))!important;
  }
  .application-column-b{
    transform:translateY(calc(18px + var(--application-scroll,0px)))!important;
  }
  .application-column article{
    height:clamp(170px,21svh,200px)!important;
    padding:clamp(20px,2vw,28px)!important;
    border-radius:16px!important;
    background:rgba(18,27,43,.78)!important;
    transform:none!important;
  }
  .application-column article:hover,
  .application-column article:focus-within{
    background:rgba(47,122,240,.34)!important;
    transform:none!important;
  }
  .application-column h3{font-size:clamp(21px,2vw,28px)!important;line-height:1.08!important}
  .application-column p{
    display:-webkit-box!important;
    width:100%!important;
    margin-top:12px!important;
    overflow:hidden!important;
    font-size:clamp(13px,1.15vw,16px)!important;
    line-height:1.3!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:3!important;
  }
  .application-column a{
    bottom:clamp(18px,2vw,26px)!important;
    left:clamp(20px,2vw,28px)!important;
    font-size:14px!important;
  }

  /* Match the Figma 620:460 ratio while fitting all three cases in one row. */
  .service-cases{
    height:auto!important;
    min-height:0!important;
    padding:clamp(48px,6svh,64px) 0 clamp(56px,7svh,74px)!important;
  }
  .service-cases .cases-heading h2{
    font-size:clamp(36px,3.2vw,46px)!important;
    line-height:1.15!important;
  }
  .service-cases .cases-heading .pill{width:168px!important;height:44px!important}
  .service-cases .case-viewport{
    height:clamp(230px,21.6vw,330px)!important;
    margin-top:clamp(28px,4svh,42px)!important;
  }
  .service-cases .case-track{
    width:100%!important;
    gap:20px!important;
    padding:0 6.25%!important;
  }
  .service-cases .case-card{
    width:calc((87.5vw - 40px)/3)!important;
    height:clamp(230px,21.6vw,330px)!important;
    flex:0 0 calc((87.5vw - 40px)/3)!important;
  }
  .service-cases .case-card:hover>img{transform:none!important}
  .service-cases .case-card>div{
    right:16px!important;
    bottom:16px!important;
    left:16px!important;
    display:flex!important;
    height:44%!important;
    min-height:104px!important;
    padding:16px!important;
    flex-direction:column!important;
  }
  .service-cases .case-card h3{
    font-size:clamp(15px,1.35vw,20px)!important;
    line-height:1.15!important;
  }
  .service-cases .case-card p{
    width:calc(100% - 28px)!important;
    margin:auto 0 0!important;
    font-size:clamp(12px,1vw,14px)!important;
    line-height:1.25!important;
    -webkit-line-clamp:2!important;
  }
  .service-cases .case-card>div>span{right:16px!important;bottom:16px!important}

  .about-intro h2{
    padding-top:clamp(54px,7svh,72px)!important;
    font-size:clamp(38px,3.2vw,46px)!important;
    line-height:1.08!important;
  }
  .about-intro h2>span+span{margin-top:8px!important}
  .about-stat-grid{margin-top:clamp(38px,5svh,52px)!important}
}

/* The same four-up product rail remains narrower than its 1920px artboard on
   larger 14-inch notebook viewports. Scale the visual area with the card and
   keep every description in the section through the full intermediate range. */
@media (min-width:1501px) and (max-width:1919px){
  .products{
    height:auto!important;
    min-height:0!important;
    padding-bottom:72px!important;
  }
  .products .product-viewport,
  .products .product-row,
  .products .product-row>article{
    height:auto!important;
    min-height:0!important;
  }
  .products .product-image{
    width:100%!important;
    height:auto!important;
    aspect-ratio:402/456;
  }
  .products .product-row p{
    display:block!important;
    height:auto!important;
    min-height:48px!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
}

/* Make shared footer content consistent at every viewport without stretching
   its columns across 2K/4K displays. */
:where(.footer-inner,.footer-grid,.inner-footer-grid,.about-footer-inner,.career-footer-inner,.customer-footer-grid,.service-footer-grid,.faq-footer-grid,.support-footer-grid){max-width:var(--site-content-max);margin-inline:auto}

@media (min-width:1101px){
  footer :where(h3,h4){font-size:16px!important;line-height:1.2!important}
  footer :where(h3,h4)~a{font-size:18px!important;line-height:20px!important}
  footer :where(.footer-brand,.inner-footer-brand)>p,
  footer :where(.footer-grid,.inner-footer-grid)>div:first-child>p{font-size:16px!important;line-height:24px!important}
}

@media (min-width:2200px){
  :where(.content-width,.resource-shell,.support-shell,.contact-shell,.career-shell,.faq-shell,.service-shell,.customer-shell,.inner-shell){max-width:var(--site-content-max);margin-inline:auto}
  :where(.section-head,.why-copy,.story-intro,.case-heading,.cases-head,.faq-head)>:where(h1,h2,p){max-width:1280px}
}

@media (max-width:1280px){
  :where(.product-series-tabs,.industry-tabs,.solution-mode-toggle,.case-categories,.resource-filters){scrollbar-width:none;-webkit-overflow-scrolling:touch}
  :where(.product-series-tabs,.industry-tabs,.solution-mode-toggle,.case-categories,.resource-filters)::-webkit-scrollbar{display:none}
  :where(.product-row,.case-row,.news-grid,.case-track,.solution-case-track,.feature-track,.product-feature-track){overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}
  :where(.product-row,.case-row,.news-grid,.case-track,.solution-case-track,.feature-track,.product-feature-track)>*{scroll-snap-align:start}
  /* The JavaScript loop copies are useful for the translated desktop track,
     but native touch scrollers already loop through the real cards.  Leaving
     the copies in a CSS grid creates an accidental second row on tablets and
     phones. */
  :where(.case-row,.news-grid)>.carousel-clone{display:none!important}
}

@media (max-width:1100px){
  footer{height:auto!important;min-height:0!important;overflow:visible!important}
  :where(.footer-inner,.footer-grid,.inner-footer-grid,.about-footer-inner,.career-footer-inner,.customer-footer-grid,.service-footer-grid,.faq-footer-grid,.support-footer-grid){position:static!important;display:grid!important;width:calc(100% - 48px)!important;max-width:none!important;height:auto!important;min-height:0!important;padding:64px 0 48px!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:38px 28px!important}
  :where(.footer-inner,.footer-grid,.inner-footer-grid,.about-footer-inner,.career-footer-inner,.customer-footer-grid,.service-footer-grid,.faq-footer-grid,.support-footer-grid)>:first-child{position:static!important;grid-column:1/-1!important;width:auto!important;height:auto!important;padding:0!important}
  :where(.footer-inner,.footer-grid,.inner-footer-grid,.about-footer-inner,.career-footer-inner,.customer-footer-grid,.service-footer-grid,.faq-footer-grid,.support-footer-grid)>div:not(:first-child){position:static!important;width:auto!important;height:auto!important;padding:0!important}
  :where(.footer-inner,.footer-grid,.inner-footer-grid,.about-footer-inner,.career-footer-inner,.customer-footer-grid,.service-footer-grid,.faq-footer-grid,.support-footer-grid) :where(h3,h4){margin:0 0 16px!important;font-size:16px!important;line-height:1.2!important}
  :where(.footer-inner,.footer-grid,.inner-footer-grid,.about-footer-inner,.career-footer-inner,.customer-footer-grid,.service-footer-grid,.faq-footer-grid,.support-footer-grid) a{font-size:16px;line-height:1.35}
  :where(.inner-legal,.legal,.support-legal,.copyright){position:static!important;width:calc(100% - 48px)!important;height:auto!important;margin:0 auto!important;padding:18px 0!important;gap:18px;flex-wrap:wrap}

  /* Support cards use two balanced columns on tablet and one centered final
     card; this prevents the copy and buttons from colliding. */
  .support-services{height:auto!important;padding:80px 0!important}
  .support-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .support-grid article{height:auto!important;min-height:250px!important}
  .support-grid article:last-child{grid-column:1/-1;width:calc(50% - 12px);justify-self:center}
  .support-hero h1{left:50%;width:calc(100% - 48px);text-align:center;transform:translateX(-50%)}
}

@media (max-width:720px){
  :root{--site-safe-gutter:20px}
  :where(.footer-inner,.footer-grid,.inner-footer-grid,.about-footer-inner,.career-footer-inner,.customer-footer-grid,.service-footer-grid,.faq-footer-grid,.support-footer-grid){width:calc(100% - 40px)!important;padding:52px 0 36px!important;grid-template-columns:1fr!important;gap:28px!important}
  :where(.footer-inner,.footer-grid,.inner-footer-grid,.about-footer-inner,.career-footer-inner,.customer-footer-grid,.service-footer-grid,.faq-footer-grid,.support-footer-grid)>:first-child{grid-column:auto!important}
  :where(.inner-legal,.legal,.support-legal,.copyright){width:calc(100% - 40px)!important;align-items:flex-start!important;flex-direction:column!important}
  :where(.section-head,.why-copy,.story-intro,.case-heading,.cases-head,.faq-head) h1,
  :where(.section-head,.why-copy,.story-intro,.case-heading,.cases-head,.faq-head) h2{max-width:100%}
  :where(.section-head,.why-copy,.story-intro) h1 br,
  :where(.section-head,.why-copy,.story-intro) h2 br{display:none}
  :where(.resource-filters,.case-categories){display:flex!important;width:100%;overflow-x:auto;scroll-snap-type:x proximity}
  :where(.resource-filters,.case-categories)>*{flex:0 0 min(78vw,300px);scroll-snap-align:start}
  .hero .color-shift-reveal{padding:0;margin:0}
  .menu-toggle span{display:block!important;width:22px!important;height:2px!important;min-height:2px!important;margin:5px auto!important;background:#111!important}

  .support-grid{grid-template-columns:1fr!important}
  .support-grid article:last-child{grid-column:auto;width:100%}
  .support-services{padding:72px 20px!important}
  .support-shell{width:100%!important}
  .support-hero h1{width:calc(100% - 40px);font-size:34px!important;line-height:1.16!important}
}

/* Keep the intentional two-line composition from the desktop artboard. */
@media (min-width:1101px){
  .why-copy h2 br{display:block}
}

@media (min-width:1101px) and (max-width:1500px){
  .why-copy h2{width:calc(100% - 80px);font-size:40px!important;line-height:1.2!important}
}

/* Product-family hero: reserve a real text zone before the product lineup.
   The original late desktop override otherwise leaks into tablet/mobile and
   places the product family under the paragraph. */
@media (min-width:901px) and (max-width:1500px){
  .product-hero .hero-copy{top:120px;max-width:min(760px,64vw)}
  .product-hero .hero-copy p{width:100%;max-width:760px}
  .product-hero .industrial-lineup,
  .product-hero .hotspots{top:350px!important;height:730px!important}
}

@media (max-width:900px){
  /* These three homepage rails are native touch scrollers on phones.  The
     desktop drag implementation sets `touch-action: pan-y`; without this
     mobile override the browser rejects horizontal finger gestures before
     the overflow container can consume them. */
  :where(.product-row,.case-row,.news-grid).carousel-track{
    touch-action:pan-x pan-y!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-x:contain!important;
    scroll-snap-type:x mandatory!important;
  }
  :where(.product-row,.case-row,.news-grid).carousel-track>*{
    scroll-snap-align:start!important;
    scroll-snap-stop:always;
  }

  .contact-footer{
    padding:70px 32px 100px!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:40px 28px!important;
  }
  .contact-footer>div:first-child{grid-column:1/-1!important}
  .contact-footer>div:first-child p{width:auto!important;max-width:520px!important;margin-top:30px!important}
  .contact-footer .legal{left:32px!important;right:32px!important;bottom:48px!important}
  .contact-footer .privacy{left:32px!important;right:auto!important;bottom:20px!important}

  .product-hero{height:820px!important}
  .product-hero .hero-copy{top:108px!important;left:20px!important;width:calc(100% - 40px)!important}
  .product-hero .hero-copy h1{font-size:30px!important;line-height:1.16!important}
  .product-hero .hero-copy p{margin-top:16px!important;font-size:15px!important;line-height:1.35!important;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;overflow:hidden}
  .product-hero .industrial-lineup,
  .product-hero .hotspots{top:390px!important;left:0!important;width:100%!important;height:430px!important}
  .product-hero .industrial-lineup{object-fit:contain!important;object-position:center bottom!important}
}

/* Hover affordances are desktop-only. On touch devices the card keeps its
   geometry and uses native horizontal scrolling/tap navigation instead. */
@media (max-width:900px) and (hover:none),(max-width:900px) and (pointer:coarse){
  :where(article,a,button,img,.product-art,.line-icon):hover{transform:none!important}
  :where(.global-clickable-card,.image-card,.case-card,.catalog-card,.blog-card,.download-card,.news-related-card,.events-grid article,.contact-grid article,.support-grid article){transition:none!important}
  :where(.global-clickable-card,.image-card,.case-card,.catalog-card,.blog-card,.download-card,.news-related-card,.events-grid article,.contact-grid article,.support-grid article):active{opacity:.92}
  :where(.carousel-arrow,.case-arrow,.solution-case-arrow){display:none!important}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* 2026-08-29 medium-width component audit.
   At 1100-1280px the previous rules mixed desktop geometry with tablet grids.
   Keep horizontal content on one track and let each component own its height. */
@media (min-width:901px) and (max-width:1280px){
  /* The seven-link navigation cannot share a 1130px header with a 196px CTA. */
  :is(.site-header,.product-header,.about-header,.career-header,.contact-header,.support-header,.detail-header,.compare-header,.resource-header,.solution-header,.faq-header,.service-header){
    grid-template-columns:166px 1fr 42px!important;
    column-gap:20px!important;
  }
  :is(.site-header,.product-header,.about-header,.career-header,.contact-header,.support-header,.detail-header,.compare-header,.resource-header,.solution-header,.faq-header,.service-header)>nav,
  :is(.site-header,.product-header,.about-header,.career-header,.contact-header,.support-header,.detail-header,.compare-header,.resource-header,.solution-header,.faq-header,.service-header)>a:nth-last-of-type(1){display:none!important}
  :is(.site-header,.product-header,.about-header,.career-header,.contact-header,.support-header,.detail-header,.compare-header,.resource-header,.solution-header,.faq-header,.service-header)>button{
    position:static!important;display:flex!important;grid-column:3;grid-row:1;width:42px!important;height:42px!important;margin:0!important;padding:11px!important;border:0!important;background:transparent!important;flex-direction:column!important;justify-content:center!important;gap:6px!important
  }
  :is(.site-header,.product-header,.about-header,.career-header,.contact-header,.support-header,.detail-header,.compare-header,.resource-header,.solution-header,.faq-header,.service-header)>button span{display:block!important;width:20px!important;height:2px!important;background:#111!important}
  :is(.site-header,.product-header,.about-header,.career-header,.contact-header,.support-header,.detail-header,.compare-header,.resource-header,.solution-header,.faq-header,.service-header).open>nav,
  :is(.site-header,.product-header,.about-header,.career-header,.contact-header,.support-header,.detail-header,.compare-header,.resource-header,.solution-header,.faq-header,.service-header).menu-open>nav{
    position:absolute!important;top:80px!important;right:0!important;left:0!important;display:flex!important;height:auto!important;padding:18px 24px 26px!important;background:rgba(244,245,247,.98)!important;box-shadow:0 18px 34px rgba(15,30,55,.1)!important;flex-direction:column!important;align-items:flex-start!important;gap:0!important
  }
  :is(.site-header,.product-header,.about-header,.career-header,.contact-header,.support-header,.detail-header,.compare-header,.resource-header,.solution-header,.faq-header,.service-header).open>nav a,
  :is(.site-header,.product-header,.about-header,.career-header,.contact-header,.support-header,.detail-header,.compare-header,.resource-header,.solution-header,.faq-header,.service-header).menu-open>nav a{width:100%!important;height:48px!important;border-bottom:1px solid rgba(17,17,17,.08)!important}

  .products,.cases,.news{position:relative!important;height:auto!important;min-height:0!important;padding-bottom:72px!important}
  .product-viewport,.case-viewport,.news-viewport{overflow:hidden!important}
  .product-row,.case-row,.news-grid{display:flex!important;width:max-content!important;max-width:none!important;flex-wrap:nowrap!important;overflow:visible!important;transform:none}
  .product-row>article{width:clamp(300px,36vw,402px)!important;flex:0 0 clamp(300px,36vw,402px)!important}
  .case-row>.case-card{width:clamp(480px,56vw,620px)!important;flex:0 0 clamp(480px,56vw,620px)!important}
  .news-grid>article{width:clamp(480px,56vw,620px)!important;min-width:0!important;flex:0 0 clamp(480px,56vw,620px)!important}
  .news-grid img{width:100%!important}
  .carousel-arrow{display:flex!important;position:absolute!important;z-index:8;width:40px!important;height:40px!important;border:0!important;border-radius:50%!important;align-items:center!important;justify-content:center!important;background:#cfd3d9!important;color:#fff!important;opacity:1!important;pointer-events:auto!important}
  .carousel-next{background:var(--blue)!important}
  .carousel-prev{left:calc(6.25% + 24px)!important}
  .carousel-next{right:calc(6.25% + 24px)!important;left:auto!important}
  .product-prev,.product-next{top:520px!important}
  .case-prev,.case-next{top:510px!important}
  .news-prev,.news-next{top:480px!important}

  .resource-panels{height:auto!important;align-items:stretch}
  .resource-panels>article{height:auto!important;min-height:319px!important;padding:34px 28px!important}
  .resource-links a{min-width:0!important;gap:12px;padding-inline:18px!important}
  .resource-links a>span{flex:0 0 auto;white-space:nowrap}
  .resource-links a{line-height:1.15}
  .contact-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:24px!important}
  .contact-grid article{display:flex!important;height:auto!important;min-height:312px!important;padding:30px 28px 24px!important;flex-direction:column!important;align-items:center!important}
  .contact-grid :is(.line-icon,h3,p,.button){position:static!important;width:auto!important;transform:none!important}
  .contact-grid .line-icon{width:48px!important;height:48px!important;flex:0 0 48px}
  .contact-grid h3{margin:20px 0 0!important;text-align:center}
  .contact-grid p{margin:10px 0 24px!important;text-align:center}
  .contact-grid .button{width:min(260px,100%)!important;margin-top:auto!important}

  .support-services{height:auto!important;padding:90px 0!important}
  .support-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;align-items:stretch}
  .support-grid article{display:flex!important;height:auto!important;min-height:300px!important;padding:30px!important;flex-direction:column!important}
  .support-grid p{min-height:0!important;margin-bottom:24px!important}
  .support-grid a{margin-top:auto!important}
  .support-grid article:last-child{grid-column:auto!important;width:auto!important}

  .about-more{height:auto!important;min-height:760px!important}
  .more-grid{width:100%!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:20px!important}
  .more-grid a{width:100%!important;min-width:0!important;height:210px!important;padding-inline:28px!important}

  .resource-content{min-height:0!important}
  .result-layout{grid-template-columns:200px minmax(0,1fr)!important;gap:28px!important}
  .blog-grid{align-items:stretch!important}
  .blog-grid .blog-card{display:flex!important;width:100%!important;min-width:0!important;height:100%!important;min-height:0!important;padding:16px!important;flex-direction:column!important;gap:0!important}
  .blog-grid .blog-card img{width:100%!important;height:auto!important;aspect-ratio:16/9!important;border-radius:14px!important;object-fit:cover!important}
  .blog-grid .blog-card>div{min-width:0!important;padding-top:0!important}
  .blog-grid .blog-card :is(h3,p,small){max-width:100%!important;overflow-wrap:anywhere}
  .blog-grid .blog-card p{display:block!important;margin-top:12px!important;overflow:visible!important;font-size:14px!important;line-height:1.42!important;-webkit-line-clamp:unset!important}
}

/* At narrow desktop/tablet widths each resource panel remains beside its
   partner, but its inner two-column list becomes too narrow for labels such as
   “Machinery Manufacturing”. Use one full-width row per link so the label and
   CTA remain inside the same clickable pill. */
@media (min-width:901px) and (max-width:1279px){
  .resource-links{grid-template-columns:1fr!important}
  .resource-links a{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    min-height:56px!important;
    height:auto!important;
    padding:10px 18px!important;
    align-items:center!important;
  }
  .resource-links a span{justify-self:end!important}
}

/* Hotspot percentages are authored against the 1420 x 668 source image.
   Matching the overlay to that exact ratio removes the object-fit letterbox
   offset that left dots floating above the products. */
.product-hero .industrial-lineup,
.product-hero .hotspots{height:auto!important;aspect-ratio:1420/668!important}
.product-hero .industrial-lineup{object-fit:contain!important;object-position:center!important}

/* The approved hero treatment uses SCANOLOGY blue for both headline lines. */
.hero h1 .color-shift-text,
.hero h1 .color-shift-text *{color:#1f6fe0!important}

/* Resource results need to collapse before the narrow-phone breakpoint.
   At 768px the legacy 250px sidebar plus the desktop blog card was wider
   than the viewport and the text column was clipped off-screen. */
@media (max-width:900px){
  .resource-shell{width:calc(100% - 40px)!important;margin-inline:auto!important}
  .result-layout{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:22px!important}
  .category-box{position:static!important;width:100%!important;max-width:none!important;height:auto!important}
  .blog-list{width:100%!important;min-width:0!important}
  .blog-card{display:grid!important;width:100%!important;height:auto!important;min-height:0!important;padding:20px!important;grid-template-columns:minmax(0,1fr)!important;gap:20px!important}
  .blog-card img{width:100%!important;height:auto!important;aspect-ratio:16/9!important;object-fit:cover!important}
  .blog-card>div{width:100%!important;min-width:0!important;padding:0!important}
  .blog-card :is(h3,p,small){max-width:100%!important;overflow-wrap:anywhere!important}
  .blog-card p{display:block!important;margin-top:14px!important;overflow:visible!important}
}

/* 2026-08-29 small-copy scale pass.
   Footer navigation and the compact resource controls were visually lighter
   than the approved layouts. Raise the complete type group by two pixels and
   grow its line boxes at the same time so labels never collide. */
:where(.footer-inner,.footer-grid,.inner-footer-grid,.about-footer-inner,.career-footer-inner,.customer-footer-grid,.service-footer-grid,.faq-footer-grid,.support-footer-grid) :where(h3,h4){
  font-size:18px!important;
  line-height:1.25!important;
  margin-bottom:16px!important;
}
:where(.footer-inner,.footer-grid,.inner-footer-grid,.about-footer-inner,.career-footer-inner,.customer-footer-grid,.service-footer-grid,.faq-footer-grid,.support-footer-grid)>div:not(:first-child){
  gap:15px!important;
}
:where(.footer-inner,.footer-grid,.inner-footer-grid,.about-footer-inner,.career-footer-inner,.customer-footer-grid,.service-footer-grid,.faq-footer-grid,.support-footer-grid)>div:not(:first-child) a{
  font-size:20px!important;
  line-height:1.3!important;
}
footer :where(.footer-brand,.inner-footer-brand)>p,
footer :where(.footer-grid,.inner-footer-grid)>div:first-child>p{
  font-size:18px!important;
  line-height:1.5!important;
}

.resource-panels{height:auto!important;align-items:stretch!important}
.resource-panels>article{height:auto!important;min-height:340px!important;padding-block:38px!important}
.resource-panels h3{font-size:26px!important;line-height:32px!important;margin-bottom:24px!important}
.resource-links{gap:14px!important}
.resource-links a{
  min-height:56px!important;
  padding-inline:22px!important;
  gap:12px!important;
  font-size:18px!important;
  line-height:1.25!important;
}
.resource-links a span{flex:0 0 auto;font-size:15px!important;line-height:1.2!important;white-space:nowrap}
.contact-grid .button{font-size:15px!important}

@media (max-width:1280px){
  .resource-panels>article{padding-inline:28px!important}
  .resource-links a{padding-inline:18px!important}
}

@media (max-width:900px){
  .resource-panels{grid-template-columns:1fr!important;gap:20px!important}
  .resource-panels>article{min-height:0!important;padding:30px 24px!important}
  .resource-links a{min-width:0!important}
}

@media (max-width:560px){
  .resource-links{grid-template-columns:1fr!important}
  .resource-links a{width:100%!important}
  :where(.footer-inner,.footer-grid,.inner-footer-grid,.about-footer-inner,.career-footer-inner,.customer-footer-grid,.service-footer-grid,.faq-footer-grid,.support-footer-grid)>div:not(:first-child) a{font-size:18px!important}
}

/* Homepage resource CTA cards keep the supporting copy at every breakpoint.
   Flex layout prevents the desktop absolute coordinates from hiding the copy
   or leaving an unexplained gap above the action on narrow screens. */
.cases .case-row{margin-top:40px!important}
.resources{height:auto!important;padding-bottom:120px!important}
.contact-grid{height:auto!important;align-items:stretch!important}
.contact-grid article{
  display:flex!important;
  height:auto!important;
  min-height:312px!important;
  padding:28px 24px 24px!important;
  flex-direction:column!important;
  align-items:center!important;
}
.contact-grid .line-icon{
  position:static!important;
  width:48px!important;
  height:48px!important;
  flex:0 0 48px!important;
  margin:0 auto!important;
  transform:none!important;
}
html body .contact-grid article:is(:hover,:focus-within,:focus-visible) .line-icon{
  transform:none!important;
}
.contact-grid h3{
  position:static!important;
  width:auto!important;
  min-height:0!important;
  margin:20px 0 0!important;
  font-size:19px!important;
  line-height:23px!important;
  text-align:center!important;
  white-space:nowrap!important;
}
.contact-grid p{
  display:block!important;
  position:static!important;
  visibility:visible!important;
  width:auto!important;
  max-width:340px!important;
  height:auto!important;
  min-height:0!important;
  margin:12px auto 24px!important;
  overflow:visible!important;
  color:var(--muted)!important;
  font-size:18px!important;
  line-height:1.35!important;
  text-align:center!important;
  opacity:1!important;
  transform:none!important;
}
.contact-grid .button{
  position:static!important;
  width:min(260px,100%)!important;
  height:48px!important;
  margin-top:auto!important;
  padding-inline:18px!important;
}

/* Only the forward control starts in the active brand color. Industry controls
   stay anchored to their viewport so browser zoom cannot shift them. */
@media (min-width:901px){
  .carousel-prev{background:#cfd3d9!important}
  .carousel-next{background:var(--blue)!important}
  .carousel-arrow:disabled{opacity:.45!important}
  .industry-viewport{position:relative!important}
  .industry-viewport .industry-prev,
  .industry-viewport .industry-next{top:calc(50% + 10px)!important}
  .industry-viewport .industry-prev{right:auto!important;left:24px!important}
  .industry-viewport .industry-next{right:24px!important;left:auto!important}
}

/* Exact desktop geometry from Figma node 1940:25422. */
@media (min-width:1281px){
  .contact-grid{height:256px!important}
  .contact-grid article{
    position:relative!important;
    display:block!important;
    height:256px!important;
    min-height:256px!important;
    padding:0!important;
  }
  .contact-grid .line-icon{
    position:absolute!important;
    top:24px!important;
    left:50%!important;
    width:48px!important;
    height:48px!important;
    margin:0!important;
    transform:translateX(-50%)!important;
  }
  html body .contact-grid article:is(:hover,:focus-within,:focus-visible) .line-icon{
    transform:translateX(-50%)!important;
  }
  .contact-grid h3{
    position:absolute!important;
    top:100px!important;
    left:40px!important;
    right:40px!important;
    width:auto!important;
    margin:0!important;
    font-size:20px!important;
    line-height:24px!important;
    white-space:nowrap!important;
  }
  .contact-grid p{display:none!important}
  .contact-grid .button{
    position:absolute!important;
    top:176px!important;
    right:24px!important;
    left:24px!important;
    width:auto!important;
    max-width:260px!important;
    height:48px!important;
    margin:0 auto!important;
  }
}

@media (min-width:1281px) and (max-width:1599px){
  .contact-grid h3{right:24px!important;left:24px!important}
}

@media (max-width:900px){
  .cases .case-row{margin-top:32px!important}
  .resources{padding-bottom:90px!important}
  .contact-grid article{min-height:312px!important}
  .contact-grid p{
    display:flex!important;
    flex:1 1 auto!important;
    align-items:center!important;
    justify-content:center!important;
    margin:8px auto!important;
  }
}

@media (max-width:560px){
  .contact-grid{gap:20px!important}
  .contact-grid article{
    min-height:330px!important;
    padding:30px 28px 28px!important;
  }
  .contact-grid h3{margin-top:18px!important}
  .contact-grid p{
    max-width:310px!important;
    margin:8px auto!important;
    font-size:17px!important;
    line-height:1.4!important;
  }
  .contact-grid .button{width:100%!important}
}

/* The homepage footer previously returned to 1920px absolute coordinates on
   desktop.  Once its copy was enlarged, the Resources and Company columns
   were pushed beyond a 1440px viewport.  Keep the approved five-column
   composition, but distribute those columns inside the real content width. */
@media (min-width:1101px){
  footer .footer-inner{
    position:relative!important;
    display:grid!important;
    width:calc(100% - 180px)!important;
    max-width:1680px!important;
    height:436px!important;
    margin-inline:auto!important;
    padding:120px 0 0!important;
    grid-template-columns:minmax(320px,2.2fr) repeat(4,minmax(110px,1fr))!important;
    gap:clamp(24px,3vw,50px)!important;
  }
  footer .footer-inner>div{
    position:static!important;
    width:auto!important;
    height:auto!important;
    min-width:0!important;
    padding:0!important;
  }
  footer .footer-inner>.footer-brand{align-self:start!important}
  footer .footer-inner>.footer-brand>p{
    position:static!important;
    width:auto!important;
    max-width:400px!important;
    margin:44px 0 0!important;
  }
  footer .footer-inner>div:not(.footer-brand){
    display:flex!important;
    align-self:start!important;
    flex-direction:column!important;
    gap:15px!important;
  }
  footer .footer-inner h4{
    margin:0 0 16px!important;
    font-size:18px!important;
    line-height:1.25!important;
  }
footer .footer-inner>div:not(.footer-brand)>a{
    font-size:20px!important;
    line-height:1.3!important;
  }
}

/* Keep the primary desktop action in the same enlarged action-label tier as
   the other shared controls.  The header baseline uses an equally important
   declaration with greater specificity, so mirror that header selector here
   to make the size consistent on every template. */
:is(.site-header,.product-header,.about-header,.career-header,.contact-header,.support-header,.detail-header,.compare-header,.resource-header,.solution-header,.faq-header,.service-header)
>a:nth-last-of-type(1)[href*="contact.html?form=contact"]{
  font-size:18px!important;
  line-height:1.25!important;
}

/* 2026-08-30 mobile header and hero control audit. */
@media (max-width:600px){
  .hero .actions{
    display:grid!important;
    width:100%!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .hero .actions .button{
    width:100%!important;
    min-width:0!important;
    min-height:46px!important;
    padding:0 8px!important;
    font-size:clamp(13px,3.35vw,15px)!important;
    line-height:1!important;
    letter-spacing:0!important;
    white-space:nowrap!important;
  }
}

/* Compact laptop composition for the homepage industry rail. Keep the full
   heading, actions and cards inside a short notebook viewport. */
@media (min-width:901px) and (max-height:1050px){
  #industries.section{
    height:auto!important;
    min-height:0!important;
    padding:52px 0 56px!important;
  }
  #industries .section-head h2{
    font-size:clamp(34px,3.15vw,46px)!important;
    line-height:1.08!important;
  }
  #industries .section-head>p:not(.eyebrow){
    max-width:760px!important;
    margin-top:12px!important;
    font-size:17px!important;
    line-height:1.35!important;
  }
  #industries .section-head .head-actions{
    position:absolute!important;
    right:0!important;
    bottom:0!important;
    margin-top:0!important;
  }
  #industries .industry-grid{margin-top:34px!important}
  #industries .image-card{height:clamp(300px,46svh,370px)!important}
  #industries .image-card span{right:18px;bottom:18px;left:18px}
  #industries .image-card b{
    min-height:30px!important;
    font-size:clamp(19px,1.65vw,23px)!important;
    line-height:1.15!important;
  }
  #industries .image-card b.industry-title-single-line{font-size:clamp(18px,1.5vw,22px)!important}
  #industries .image-card small{margin-top:10px}
}

@media (min-width:901px) and (max-width:1280px){
  #industries .industry-grid{
    display:flex!important;
    width:max-content!important;
    max-width:none!important;
    overflow:visible!important;
    flex-wrap:nowrap!important;
  }
  #industries .industry-grid>.image-card{
    width:clamp(230px,22vw,282px)!important;
    flex:0 0 clamp(230px,22vw,282px)!important;
  }
}

@media (min-width:901px) and (max-height:700px){
  #industries.section{padding:38px 0 40px!important}
  #industries .section-head h2{font-size:34px!important}
  #industries .industry-grid{margin-top:26px!important}
  #industries .image-card{height:290px!important}
}

/* Browser responsive mode may emulate a coarse pointer even at a laptop
   viewport. Desktop-width carousels must still expose their controls. */
@media (min-width:901px){
  :where(.carousel-arrow,.case-arrow,.solution-case-arrow){display:flex!important}
}

@media (min-width:901px) and (max-width:1680px){
  #industries .section-head .head-actions{
    top:0!important;
    bottom:auto!important;
  }
}

@media (min-width:1281px){
  .cases .case-prev,
  .cases .case-next{top:470px!important}
}

/* 14-inch / compact desktop alignment audit.
   Keep heading actions clear of long titles and anchor every homepage rail
   control inside the visual portion of its cards instead of beside copy. */
@media (min-width:901px) and (max-width:1280px){
  .products .product-prev,
  .products .product-next{top:660px!important}

  .cases .case-prev,
  .cases .case-next{top:440px!important}

  .news .news-prev,
  .news .news-next{top:560px!important}

  .product-catalog .catalog-grid article{
    height:auto!important;
    min-height:339px!important;
  }
  .product-catalog .catalog-title{
    height:auto!important;
    min-height:54px!important;
    gap:10px!important;
  }
  .product-catalog .catalog-title h3{
    min-width:0!important;
    overflow-wrap:anywhere!important;
  }
  .product-catalog .catalog-title span{
    flex:0 0 24px!important;
  }
  .product-catalog .catalog-grid p{
    margin-top:12px!important;
  }
}

/* News cards must expose their complete copy at every rail width.  The former
   single-line title and fixed line clamps hid text and made translated reveal
   items look vertically cropped inside the carousel viewport. */
.news-grid.reveal-stagger > article{
  opacity:1!important;
  transform:none!important;
  translate:none!important;
  transition:none!important;
  will-change:auto!important;
}

.news-grid article{
  height:auto!important;
}

.news-grid h3{
  display:block!important;
  height:auto!important;
  min-height:0!important;
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:normal!important;
}

.news-grid p{
  display:block!important;
  height:auto!important;
  min-height:0!important;
  overflow:visible!important;
  -webkit-line-clamp:unset!important;
}

/* Carousel slides can begin outside the horizontal viewport. The global
   image entrance observer must not leave those images transparent forever. */
.carousel-track img.site-image-reveal{
  opacity:var(--site-image-opacity,1)!important;
  filter:none!important;
  clip-path:none!important;
  translate:none!important;
  scale:1!important;
}

/* Tablet rails show almost two products instead of stretching one card to
   78vw. Editorial cards stay larger because their headlines need more room. */
@media (min-width:601px) and (max-width:900px){
  .products .product-row,
  .cases .case-row,
  .news .news-grid{
    display:flex!important;
    width:100%!important;
    max-width:100%!important;
    flex-wrap:nowrap!important;
  }
  .products .product-row>article{
    width:clamp(300px,46vw,402px)!important;
    flex:0 0 clamp(300px,46vw,402px)!important;
  }
  .products .product-image{height:clamp(340px,46vw,400px)!important}
  .cases .case-row>.case-card,
  .news .news-grid>article{
    width:min(620px,72vw)!important;
    flex:0 0 min(620px,72vw)!important;
  }
}

@media (max-width:600px){
  .products .product-row,
  .cases .case-row,
  .news .news-grid{
    display:flex!important;
    width:100%!important;
    max-width:100%!important;
    flex-wrap:nowrap!important;
  }
  .products .product-row>article,
  .cases .case-row>.case-card,
  .news .news-grid>article{
    width:calc(100vw - 40px)!important;
    flex:0 0 calc(100vw - 40px)!important;
  }
  .products .product-image{height:min(380px,calc(100vw - 40px))!important}
}

/* 2K / 4K desktop audit.
   Keep the designed 1920px composition centred instead of stretching a
   620px carousel card across an arbitrarily large canvas.  At this size all
   three editorial cards fit at once, so duplicate loop cards and navigation
   controls are unnecessary.  Ordinary desktop and touch carousel behaviour
   remains unchanged below this breakpoint. */
@media (min-width:2200px){
  :root{
    --site-content-max:1920px;
    --max:1920px;
  }

  :where(.content-width,.resource-shell,.support-shell,.contact-shell,.career-shell,.faq-shell,.service-shell,.customer-shell,.inner-shell){
    width:min(calc(100% - 240px),1920px)!important;
    max-width:1920px!important;
    margin-inline:auto!important;
  }

  .case-row,
  .news-grid{
    display:grid!important;
    width:100%!important;
    max-width:100%!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    transform:none!important;
    cursor:auto!important;
  }
  .case-row{gap:24px!important}
  .news-grid{column-gap:49px!important}
  .case-row>.case-card,
  .news-grid>article{
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    flex:initial!important;
  }
  .news-grid img{width:100%!important}
  .case-row>.carousel-clone,
  .news-grid>.carousel-clone{display:none!important}
  .cases :is(.case-prev,.case-next),
  .news :is(.news-prev,.news-next){display:none!important}

  :where(.footer-inner,.footer-grid,.inner-footer-grid,.about-footer-inner,.career-footer-inner,.customer-footer-grid,.service-footer-grid,.faq-footer-grid,.support-footer-grid){
    max-width:1920px!important;
  }
  footer .footer-inner{
    width:min(calc(100% - 240px),1920px)!important;
    max-width:1920px!important;
    grid-template-columns:minmax(400px,2.2fr) repeat(4,minmax(150px,1fr))!important;
    gap:clamp(44px,3vw,72px)!important;
  }
  footer .footer-inner h4{font-size:20px!important}
  footer .footer-inner>div:not(.footer-brand)>a{font-size:20px!important}
  footer .footer-inner>.footer-brand>p{font-size:18px!important}
}

/* Home first-screen composition.
   Size the desktop hero around its copy and a bounded gap to the logo rail,
   avoiding a full viewport of empty space on tall screens.
   The compact trusted-company rail fades into the hero and the following
   white section instead of creating hard horizontal seams. */
@media (min-width:901px){
  .nuxt-page-shell > main > .hero:first-child{
    height:auto!important;
    min-height:0!important;
    padding-top:clamp(82px,13svh,140px);
    padding-bottom:calc(96px + clamp(120px,20svh,220px));
  }

  .nuxt-page-shell > main > .hero:first-child .hero-content{
    position:relative;
    top:0!important;
  }

  .nuxt-page-shell > main > .hero:first-child .logo-strip,
  .nuxt-page-shell > main > .hero:first-child .logo-set{
    height:96px!important;
  }

  .nuxt-page-shell > main > .hero:first-child .logo-set span{
    height:82px!important;
  }

  .nuxt-page-shell > main > .hero:first-child .hero-media{
    bottom:0!important;
  }

  .nuxt-page-shell > main > .hero:first-child .hero-pagination{
    bottom:132px!important;
  }
}

/* Extra-short desktop windows need a little less copy scale so that the
   actions never collide with the fixed logo rail. */
@media (min-width:901px) and (max-height:620px){
  .nuxt-page-shell > main > .hero:first-child{
    padding-top:72px;
  }
  .nuxt-page-shell > main > .hero:first-child .hero-content{
    top:0!important;
  }

  .nuxt-page-shell > main > .hero:first-child h1{
    font-size:38px!important;
    line-height:1.12!important;
  }

  .nuxt-page-shell > main > .hero:first-child .hero-content>p{
    margin:12px 0 22px!important;
    font-size:22px!important;
    line-height:1.25!important;
  }
}

/* 2026-08-31 breakpoint reconciliation.
   Keep the full navigation on ordinary laptop viewports.  The old 1100px
   cutover meant that a 100%-zoom browser could fall into the mobile menu,
   while the same window at 90% zoom showed the desktop navigation.  The
   compact desktop geometry below fits down to 901px; phones/tablets at 900px
   and below retain the intentional hamburger menu. */
@media (min-width:901px) and (max-width:1280px){
  :root{--global-header-height:80px;--global-header-gutter:16px}
  :is(.site-header,.product-header,.about-header,.career-header,.contact-header,.support-header,.detail-header,.compare-header,.resource-header,.solution-header,.faq-header,.service-header){
    display:grid!important;
    grid-template-columns:150px minmax(0,1fr) 132px!important;
    column-gap:14px!important;
    padding-inline:16px!important;
  }
  :is(.site-header,.product-header,.about-header,.career-header,.contact-header,.support-header,.detail-header,.compare-header,.resource-header,.solution-header,.faq-header,.service-header)>a:first-child{
    display:flex!important;
    width:150px!important;
    gap:8px!important;
  }
  :is(.site-header,.product-header,.about-header,.career-header,.contact-header,.support-header,.detail-header,.compare-header,.resource-header,.solution-header,.faq-header,.service-header)>a:first-child img:first-child{
    width:26px!important;
    height:26px!important;
  }
  :is(.site-header,.product-header,.about-header,.career-header,.contact-header,.support-header,.detail-header,.compare-header,.resource-header,.solution-header,.faq-header,.service-header)>a:first-child img:last-child{
    width:112px!important;
  }
  :is(.site-header,.product-header,.about-header,.career-header,.contact-header,.support-header,.detail-header,.compare-header,.resource-header,.solution-header,.faq-header,.service-header)>nav{
    position:static!important;
    display:flex!important;
    height:100%!important;
    padding:0!important;
    background:transparent!important;
    box-shadow:none!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:space-evenly!important;
    gap:0!important;
    font-size:clamp(13px,1.25vw,16px)!important;
  }
  :is(.site-header,.product-header,.about-header,.career-header,.contact-header,.support-header,.detail-header,.compare-header,.resource-header,.solution-header,.faq-header,.service-header)>nav a{
    width:auto!important;
    height:auto!important;
    border:0!important;
    white-space:nowrap!important;
  }
  :is(.site-header,.product-header,.about-header,.career-header,.contact-header,.support-header,.detail-header,.compare-header,.resource-header,.solution-header,.faq-header,.service-header)>a:nth-last-of-type(1){
    display:flex!important;
    width:132px!important;
    height:44px!important;
    padding-inline:14px!important;
    font-size:14px!important;
    white-space:nowrap!important;
  }
  :is(.site-header,.product-header,.about-header,.career-header,.contact-header,.support-header,.detail-header,.compare-header,.resource-header,.solution-header,.faq-header,.service-header)>button{
    display:none!important;
  }

  /* The product page keeps large artboard heights even after the artwork and
     filtered product row have ended. Match each section to its visible
     desktop content so laptop screens do not show a blank half-page. */
  .product-hero{
    height:clamp(760px,72vw,850px)!important;
  }
  .product-catalog{
    height:2320px!important;
  }
  .product-catalog[data-visible-count="2"],
  .product-catalog[data-visible-count="3"]{
    height:1920px!important;
  }
  .product-catalog .catalog-grid{
    row-gap:64px!important;
  }
}

/* Fixed-height desktop artboards must still grow when laptop-width text
   wraps. Keep the support downloads inside their white panel and section. */
@media (min-width:901px){
  .customer-filter{
    height:auto!important;
    min-height:637px!important;
  }
  .customer-filter .support-panel{
    height:auto!important;
    min-height:279px!important;
  }

  /* The sticky values scene is itself the visual canvas. It must not inherit
     the generic entrance opacity, otherwise a fast scrollbar jump can expose
     an empty grey viewport before the observer catches up. */
  .about-values-sticky.site-motion-item{
    opacity:1!important;
    filter:none!important;
    translate:0 0!important;
    transform:none!important;
  }

  /* Certification copy must not be cut to the original four-line mockup.
     Let both cards follow their real paragraph height and keep a safe gap. */
  .quality-policy{
    height:760px!important;
  }
  .quality-policy .quality-card{
    height:auto!important;
    min-height:167px!important;
  }
  .quality-policy .quality-card.left{
    top:100px!important;
  }
  .quality-policy .quality-card.right{
    top:auto!important;
    bottom:70px!important;
  }
  .quality-policy .quality-card p{
    display:block!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
    -webkit-line-clamp:unset!important;
  }
}

@media (max-width:1100px){
  :is(.site-header,.product-header,.about-header,.career-header,.contact-header,.support-header,.detail-header,.compare-header,.resource-header,.solution-header,.faq-header,.service-header).open>nav,
  :is(.site-header,.product-header,.about-header,.career-header,.contact-header,.support-header,.detail-header,.compare-header,.resource-header,.solution-header,.faq-header,.service-header).menu-open>nav{
    top:68px!important;
    z-index:1002!important;
    max-height:calc(100dvh - 68px)!important;
    overflow-y:auto!important;
    background:#f4f5f7!important;
  }
}

/* The product intro is one continuous line on the desktop artboard.  It may
   wrap normally once the compact/tablet layout begins. */
@media (min-width:1101px){
  .products .section-head>p:not(.eyebrow){
    width:100%!important;
    max-width:none!important;
    white-space:nowrap!important;
  }
}

/* A 42/58 split leaves the solution copy unusably narrow around 1024px.
   Stack the visual and copy on tablet while preserving the desktop split and
   the dedicated phone layout. */
@media (min-width:761px) and (max-width:1100px){
  .solution-showcase{
    height:auto!important;
    min-height:0!important;
    padding-bottom:80px!important;
  }
  .solution-stage{
    width:calc(100% - 84px)!important;
    height:auto!important;
    grid-template-columns:1fr!important;
    transform:none!important;
  }
  .solution-stage .solution-visual{
    width:100%!important;
    height:auto!important;
    aspect-ratio:16/9!important;
    border-radius:12px 12px 0 0!important;
  }
  .solution-stage article{
    width:100%!important;
    min-width:0!important;
    padding:38px 42px 44px!important;
    border-radius:0 0 12px 12px!important;
  }
  .solution-stage article h2{
    font-size:40px!important;
    line-height:1.12!important;
  }
  .solution-stage article p{
    width:auto!important;
    max-width:760px!important;
    margin:20px 0 36px!important;
  }
}

/* Shared tablet footers: establish a real two-column flow before the legal
   row so brand copy and navigation can never overlap. */
@media (min-width:721px) and (max-width:1100px){
  footer .footer-inner,
  .solution-footer .footer-grid{
    position:static!important;
    display:grid!important;
    width:calc(100% - 84px)!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    margin-inline:auto!important;
    padding:64px 0 48px!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:38px 32px!important;
  }
  footer .footer-inner>.footer-brand,
  .solution-footer .footer-grid>div:first-child{
    position:static!important;
    grid-column:1/-1!important;
    width:auto!important;
  }
  footer .footer-inner>.footer-brand>p,
  .solution-footer .footer-grid>div:first-child>p{
    width:auto!important;
    max-width:520px!important;
    margin:28px 0 0!important;
  }
  footer .copyright,
  .solution-footer .legal{
    position:static!important;
    width:calc(100% - 84px)!important;
    height:auto!important;
    margin:0 auto!important;
    padding:18px 0!important;
    box-sizing:border-box!important;
  }
}

/* Keep the case title and CTA legible at narrow widths. */
@media (max-width:760px){
  .case-heading{
    display:flex!important;
    width:100%!important;
    align-items:flex-end!important;
    justify-content:space-between!important;
    gap:16px!important;
  }
  .case-heading h2{
    min-width:0!important;
    margin:0!important;
    font-size:clamp(30px,8vw,34px)!important;
    line-height:1.08!important;
  }
  .case-heading>a{
    width:140px!important;
    min-width:140px!important;
    flex:0 0 140px!important;
    padding-inline:14px!important;
    font-size:13px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
}

@media (max-width:420px){
  .case-heading{
    align-items:flex-start!important;
    flex-direction:column!important;
  }
}

/* 2026-08-31 homepage rail height reconciliation.
   The desktop artboard gives the product/case/news sections a fixed height.
   Once the rails become native horizontal scrollers, retaining that height
   leaves hundreds of empty pixels below the first visible card. Let the
   mobile and tablet sections follow their actual content instead. */
@media (max-width:900px){
  .products,
  .cases,
  .news{
    height:auto!important;
    min-height:0!important;
    padding-bottom:clamp(44px,7vw,64px)!important;
  }

  .product-viewport,
  .case-viewport,
  .news-viewport,
  .product-row,
  .case-row,
  .news-grid{
    height:auto!important;
    min-height:0!important;
  }

  .product-row,
  .case-row,
  .news-grid{
    margin-bottom:0!important;
  }
}

@media (max-width:600px){
  .products,
  .cases,
  .news{
    padding-top:56px!important;
    padding-bottom:48px!important;
  }

  .products .product-row,
  .cases .case-row,
  .news .news-grid{
    margin-top:32px!important;
    padding-bottom:6px!important;
  }
}

/* 2026-09-03 laptop-density and component-consistency pass.
   This block intentionally comes last: older artboard-specific breakpoints
   use fixed card widths/heights that clash at 1150–1512px. */
@media (min-width:901px) and (max-width:1919px){
  /* Home: show all three editorial cards without clipping the third card. */
  .cases,
  .news{
    height:auto!important;
    min-height:0!important;
    padding-bottom:88px!important;
  }
  .cases .case-row,
  .news .news-grid{
    height:auto!important;
    min-height:0!important;
  }
  .cases .case-row{gap:24px!important}
  .cases .case-row>.case-card{
    width:calc((87.5vw - 48px)/3)!important;
    min-width:0!important;
    height:auto!important;
    aspect-ratio:620/460;
    flex:0 0 calc((87.5vw - 48px)/3)!important;
  }
  .news .news-grid{gap:49px!important}
  .news .news-grid>article{
    width:calc((87.5vw - 98px)/3)!important;
    min-width:0!important;
    flex:0 0 calc((87.5vw - 98px)/3)!important;
  }
  .news .news-grid img{
    width:100%!important;
    height:auto!important;
    aspect-ratio:620/396;
    object-fit:cover;
  }
  .news .news-grid h3{
    display:-webkit-box;
    white-space:normal!important;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }
  .news .news-grid p{height:auto!important;min-height:48px}

  /* Home industries: long heading and actions never occupy the same row. */
  #industries .section-head .head-actions{
    position:static!important;
    inset:auto!important;
    width:auto!important;
    margin-top:24px!important;
    justify-content:flex-start!important;
  }

  /* Solutions: three proportional case cards and standard-size CTA/arrows. */
  .solution-cases{
    height:auto!important;
    min-height:0!important;
    padding-top:72px!important;
    padding-bottom:84px!important;
  }
  .solution-case-viewport{width:87.5vw!important;height:auto!important;margin-top:42px!important}
  .solution-case-card{
    width:calc((87.5vw - 48px)/3)!important;
    height:auto!important;
    aspect-ratio:620/460;
    flex:0 0 calc((87.5vw - 48px)/3)!important;
  }
  .solution-case-card>span{right:16px!important;bottom:16px!important;left:16px!important;padding:18px!important}
  .solution-case-card b{height:auto!important;font-size:clamp(17px,1.35vw,22px)!important;line-height:1.15!important}
  .solution-case-arrow{
    top:50%!important;
    width:42px!important;
    height:42px!important;
    border-radius:50%!important;
    transform:translateY(-50%)!important;
  }
  .solution-case-arrow.previous{left:20px!important}
  .solution-case-arrow.next{right:20px!important}
  .solution-case-arrow:hover,
  .solution-case-arrow:focus-visible{transform:translateY(-50%) scale(1.04)!important}

  /* Product hero: enlarge the complete lineup while preserving hotspot alignment. */
  .product-hero .industrial-lineup,
  .product-hero .hotspots{
    left:2%!important;
    width:96%!important;
  }

  /* Product and solution-detail case rails: denser cards, circular controls. */
  .latest-cases{
    height:auto!important;
    min-height:0!important;
    padding-bottom:84px!important;
  }
  .latest-cases .case-viewport{height:auto!important;min-height:0!important;margin-top:42px!important}
  .latest-cases .case-track article{
    width:calc((87.5vw - 48px)/3)!important;
    height:auto!important;
    aspect-ratio:620/460;
    flex:0 0 calc((87.5vw - 48px)/3)!important;
  }
  .latest-cases .case-track article>div{
    right:16px!important;
    bottom:16px!important;
    left:16px!important;
    height:auto!important;
    min-height:116px!important;
    padding:18px!important;
  }
  .latest-cases .case-track h3{font-size:clamp(17px,1.35vw,22px)!important;line-height:1.15!important}
  .latest-cases .case-track p{width:calc(100% - 48px)!important;margin-top:28px!important;font-size:clamp(14px,1.05vw,17px)!important;line-height:1.25!important}
  .latest-cases .case-arrow,
  .sd-case-track-shell .sd-arrow{
    top:50%!important;
    width:44px!important;
    height:44px!important;
    border-radius:50%!important;
    /* The visible icon comes from ::before. Hiding the fallback glyph avoids
       the doubled arrow that appeared at notebook widths. */
    font-size:0!important;
    transform:translateY(-50%)!important;
  }
  .latest-cases .case-arrow.previous,
  .sd-case-track-shell .sd-arrow.prev{left:20px!important}
  .latest-cases .case-arrow.next,
  .sd-case-track-shell .sd-arrow.next{right:20px!important;background:#2374e1!important;color:#fff!important}
  .latest-cases .case-arrow:hover,
  .latest-cases .case-arrow:focus-visible,
  .sd-case-track-shell .sd-arrow:hover,
  .sd-case-track-shell .sd-arrow:focus-visible{transform:translateY(-50%) scale(1.04)!important}
  .latest-cases .case-arrow:disabled,
  .sd-case-track-shell .sd-arrow:disabled{display:none!important}
  .sd-case-grid article{
    width:calc((87.5vw - 48px)/3)!important;
    height:auto!important;
    aspect-ratio:620/460;
    flex:0 0 calc((87.5vw - 48px)/3)!important;
  }

  /* About: all six information actions fit in one laptop viewport. */
  .about-more{
    height:calc(100svh - 80px)!important;
    min-height:640px!important;
  }
  .about-more .about-shell{padding-top:40px!important}
  .about-more h2{font-size:clamp(34px,3vw,44px)!important;line-height:1.15!important}
  .more-grid{
    width:87.5vw!important;
    margin:32px auto 0!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:18px!important;
  }
  .more-grid a{
    height:clamp(148px,21svh,190px)!important;
    padding:0 28px 26px!important;
    font-size:clamp(19px,1.6vw,23px)!important;
  }
}

/* Careers and Support desktop hero artwork uses the requested 3:1 frame. */
@media (min-width:761px){
  .career-hero,
  .support-hero{
    height:auto!important;
    min-height:0!important;
    aspect-ratio:3/1!important;
  }
  .career-hero h1{top:auto!important;bottom:clamp(32px,4vw,72px)!important}
  .support-hero h1{top:50%!important;transform:translate(-50%,-50%)!important}
}

/* 2026-09-03 final responsive consolidation
   Keep the 14-inch desktop composition compact and make repeated controls
   behave identically across the home, product and solution carousels. */
@media (min-width:901px){
  /* Home: the complete metrics-and-globe story fits below the header. */
  #why.why{
    height:calc(100svh - 80px)!important;
    min-height:680px!important;
    max-height:900px!important;
  }
  #why .why-copy{padding-top:clamp(28px,4svh,48px)!important}
  #why .why-copy h2{font-size:clamp(34px,2.7vw,44px)!important;line-height:1.14!important}
  #why .stats{margin-top:clamp(20px,2.7svh,30px)!important}
  #why .stats article{
    height:clamp(108px,14svh,132px)!important;
    padding:clamp(18px,2.5svh,24px)!important;
  }
  #why .stats strong{font-size:clamp(44px,4vw,58px)!important;line-height:1!important}
  #why .stats sup{font-size:clamp(24px,2.3vw,32px)!important;line-height:1!important}
  #why .stats span{margin-top:8px!important;font-size:clamp(14px,1.2vw,17px)!important;line-height:1.16!important}
  #why .globe-wrap{
    top:clamp(294px,38svh,350px)!important;
    width:min(1040px,68vw,calc((100svh - 400px) * 2))!important;
  }

  /* Product catalogue: reduce the oversized visual and pull following UI up. */
  .product-catalog{
    --catalog-story-height:clamp(400px,36vw,540px);
    --catalog-story-reduction:calc(912px - var(--catalog-story-height));
    height:calc(2395px - var(--catalog-story-reduction))!important;
  }
  .product-catalog[data-visible-count="2"],
  .product-catalog[data-visible-count="3"]{
    height:calc(1920px - var(--catalog-story-reduction))!important;
  }
  .product-catalog .story-image{height:var(--catalog-story-height)!important}
  .product-catalog .story-image img{
    height:100%!important;
    object-fit:cover!important;
    transform:none!important;
  }
  .product-catalog .story-image.is-changing img{transform:scale(.985)!important}
  .product-catalog .product-series-tabs{top:calc(1296px - var(--catalog-story-reduction))!important}
  .product-catalog .compare-products{top:calc(1372px - var(--catalog-story-reduction))!important}
  .product-catalog .filters,
  .product-catalog .catalog-grid{top:calc(1496px - var(--catalog-story-reduction))!important}

  /* Inner-page banners reveal the beginning of the next section on laptops. */
  .events-hero,
  .career-hero,
  .cert-hero,
  .service-hero,
  .customer-hero,
  .faq-hero,
  .solution-detail-hero,
  .event-detail-hero{
    height:clamp(320px,42svh,460px)!important;
    min-height:0!important;
    aspect-ratio:auto!important;
  }
  .resource-hero,
  .support-hero{
    height:clamp(270px,34svh,360px)!important;
    min-height:0!important;
    aspect-ratio:auto!important;
  }
  .events-hero>img{inset:0!important;height:100%!important}
  .events-hero::after{inset:0!important}
  .events-hero>div{
    display:flex!important;
    height:100%!important;
    align-items:flex-end!important;
    padding-top:0!important;
    padding-bottom:clamp(28px,4svh,42px)!important;
  }
  .career-hero h1{top:auto!important;bottom:clamp(28px,4svh,42px)!important}
  .cert-hero-copy{top:auto!important;bottom:clamp(28px,4svh,42px)!important}
  .service-hero .hero-copy{top:50%!important;transform:translateY(-50%)!important}
  .service-hero .hero-copy .pill{margin-top:32px!important}
  .customer-hero>img,
  .faq-hero>img{
    top:0!important;
    height:100%!important;
    object-position:center!important;
  }
  .customer-hero h1,
  .faq-hero h1{
    top:auto!important;
    bottom:clamp(28px,4svh,42px)!important;
  }
  .solution-detail-hero{align-items:flex-end!important}
  .solution-detail-hero .solution-hero-copy{padding-top:0!important;padding-bottom:clamp(28px,4svh,44px)!important}
  .event-detail-copy{bottom:clamp(28px,4svh,44px)!important}
  .resource-hero h1{top:50%!important;transform:translateY(-50%)!important}
  .support-hero h1{top:50%!important;transform:translate(-50%,-50%)!important}
  .support-services{
    height:auto!important;
    min-height:0!important;
    padding:clamp(42px,6svh,68px) 0!important;
  }
  .support-grid{margin-top:clamp(26px,4svh,42px)!important}
}

/* One circular carousel control system everywhere. */
@media (min-width:761px){
  :where(
    .carousel-arrow,
    .solution-case-arrow,
    .latest-cases .case-arrow,
    .service-cases .case-arrow,
    .sd-case-track-shell .sd-arrow,
    .application-track-shell .sd-arrow
  ){
    display:flex!important;
    width:44px!important;
    height:44px!important;
    padding:0!important;
    border:0!important;
    border-radius:50%!important;
    align-items:center!important;
    justify-content:center!important;
    color:#fff!important;
    font-size:20px!important;
    line-height:1!important;
    box-shadow:none!important;
  }
  :where(
    .carousel-prev,
    .solution-case-arrow.previous,
    .latest-cases .case-arrow.previous,
    .service-cases .case-arrow.prev,
    .sd-case-track-shell .sd-arrow.prev,
    .application-track-shell .sd-arrow.prev
  ){
    background:#d3d8de!important;
  }
  :where(
    .carousel-next,
    .solution-case-arrow.next,
    .latest-cases .case-arrow.next,
    .service-cases .case-arrow.next,
    .sd-case-track-shell .sd-arrow.next,
    .application-track-shell .sd-arrow.next
  ){
    background:#2374e1!important;
  }
  :where(.solution-case-arrow,.latest-cases .case-arrow,.service-cases .case-arrow,.sd-case-track-shell .sd-arrow,.application-track-shell .sd-arrow){
    top:50%!important;
    transform:translateY(-50%)!important;
  }
  :where(.solution-case-arrow,.latest-cases .case-arrow,.service-cases .case-arrow,.sd-case-track-shell .sd-arrow,.application-track-shell .sd-arrow):hover,
  :where(.solution-case-arrow,.latest-cases .case-arrow,.service-cases .case-arrow,.sd-case-track-shell .sd-arrow,.application-track-shell .sd-arrow):focus-visible{
    transform:translateY(-50%) scale(1.04)!important;
  }
  .solution-case-arrow.previous,
  .latest-cases .case-arrow.previous,
  .service-cases .case-arrow.prev,
  .sd-case-track-shell .sd-arrow.prev,
  .application-track-shell .sd-arrow.prev{left:18px!important}
  .solution-case-arrow.next,
  .latest-cases .case-arrow.next,
  .service-cases .case-arrow.next,
  .sd-case-track-shell .sd-arrow.next,
  .application-track-shell .sd-arrow.next{right:18px!important}
  .solution-case-viewport,
  .latest-cases .case-viewport,
  .service-cases .case-viewport,
  .sd-case-track-shell,
  .application-track-shell{position:relative!important;overflow:hidden!important}

  /* Reuse the home arrow artwork instead of page-specific text glyphs. */
  :where(.solution-case-arrow,.latest-cases .case-arrow,.service-cases .case-arrow,.sd-case-track-shell .sd-arrow,.application-track-shell .sd-arrow){font-size:0!important}
  :where(.solution-case-arrow,.latest-cases .case-arrow,.service-cases .case-arrow,.sd-case-track-shell .sd-arrow,.application-track-shell .sd-arrow)::before{
    width:20px!important;
    height:20px!important;
    background:currentColor!important;
    content:""!important;
    -webkit-mask:url("/assets/figma-latest/product-card-arrow.svg") center/contain no-repeat!important;
    mask:url("/assets/figma-latest/product-card-arrow.svg") center/contain no-repeat!important;
  }
  :where(.solution-case-arrow.previous,.latest-cases .case-arrow.previous,.service-cases .case-arrow.prev,.sd-case-track-shell .sd-arrow.prev,.application-track-shell .sd-arrow.prev)::before{
    transform:rotate(180deg)!important;
  }

  /* Product arrows are anchored to the media cards, not the whole section. */
  .products .product-viewport{position:relative!important}
  .products .product-prev,
  .products .product-next{
    top:258px!important;
    transform:translateY(-50%)!important;
  }
  .products .product-prev{left:18px!important}
  .products .product-next{right:18px!important}
  .products .product-prev:hover,
  .products .product-next:hover,
  .products .product-prev:focus-visible,
  .products .product-next:focus-visible{transform:translateY(-50%) scale(1.04)!important}
}

@media (min-width:1281px){
  .products .product-prev,
  .products .product-next{top:306px!important}
}

/* 2026-09-03 repeated viewport QA fixes.
   These rules replace remaining fixed Figma-canvas dimensions with bounded,
   aspect-safe layouts at notebook and phone sizes. */
@media (min-width:901px) and (max-width:1700px){
  .service-specialist{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    grid-template-columns:minmax(0,52%) minmax(0,1fr)!important;
    gap:clamp(28px,3.2vw,48px)!important;
    padding:clamp(64px,8svh,96px) var(--site-safe-gutter)!important;
  }
  .service-specialist .specialist-photo{
    width:100%!important;
    height:auto!important;
    aspect-ratio:817/716!important;
  }
  .service-specialist .specialist-copy,
  .service-specialist .specialist-copy p{
    min-width:0!important;
    width:auto!important;
    max-width:100%!important;
  }
}

@media (min-width:901px){
  .about-hero{
    height:clamp(400px,54svh,560px)!important;
    min-height:0!important;
  }
  .about-hero h1{
    top:auto!important;
    bottom:clamp(34px,5svh,58px)!important;
  }

  .detail-hero{
    height:clamp(460px,62svh,680px)!important;
    min-height:0!important;
  }
  .detail-hero-copy{
    top:50%!important;
    transform:translate(-50%,-50%)!important;
  }
  .related-products{
    height:auto!important;
    min-height:0!important;
    padding-top:clamp(64px,8svh,96px)!important;
    padding-bottom:clamp(64px,8svh,96px)!important;
  }
  .related-products .related-card div{
    height:clamp(280px,28vw,380px)!important;
  }
}

/* Preserve the source image ratio inside the art-directed home product crop.
   Width and position still follow the Figma composition, but height may not
   independently stretch the scanner. */
.products .product-art-kscan-e img,
.products .product-art-kscan-x img,
.products .product-art-accuarm img{
  height:auto!important;
  object-fit:contain!important;
}

@media (max-width:900px){
  .detail-hero{
    height:clamp(380px,62svh,520px)!important;
    min-height:0!important;
  }
  .detail-hero-copy{
    top:50%!important;
    transform:translateY(-50%)!important;
  }
  .related-products{
    height:auto!important;
    min-height:0!important;
  }
}

/* 2026-09-04 14-inch viewport reconciliation.
   These rules keep the affected desktop compositions inside a notebook
   viewport without changing the phone/tablet layouts. */
@media (min-width:901px) and (max-width:1512px){
  /* Home news: the complete heading and all three cards occupy one screen. */
  .news{
    --news-laptop-gap:clamp(24px,2.5vw,38px);
    height:100svh!important;
    min-height:720px!important;
    padding:clamp(44px,6svh,58px) 0!important;
    overflow:hidden!important;
  }
  .news .section-head h2{
    font-size:clamp(40px,3.2vw,48px)!important;
    line-height:1.12!important;
  }
  .news .section-head>p:not(.eyebrow){
    margin-top:12px!important;
    font-size:17px!important;
    line-height:1.3!important;
  }
  .news .head-single{
    width:176px!important;
    height:44px!important;
  }
  .news .news-grid{
    gap:var(--news-laptop-gap)!important;
    margin-top:clamp(26px,4svh,36px)!important;
  }
  .news .news-grid>article{
    width:calc((87.5vw - (var(--news-laptop-gap) * 2))/3)!important;
    flex-basis:calc((87.5vw - (var(--news-laptop-gap) * 2))/3)!important;
  }
  .news .news-grid img{
    height:clamp(185px,25svh,230px)!important;
    aspect-ratio:auto!important;
  }
  .news .news-grid time{
    margin-top:14px!important;
    font-size:15px!important;
    line-height:20px!important;
  }
  .news .news-grid h3{
    margin:7px 0 6px!important;
    font-size:clamp(18px,1.55vw,22px)!important;
    line-height:1.12!important;
  }
  .news .news-grid p{
    font-size:15px!important;
    line-height:1.28!important;
  }
  .news .news-prev,
  .news .news-next{top:clamp(350px,44svh,405px)!important}

  /* About statistics: proportional columns prevent the final column from
     escaping the page shell at widths between the authored breakpoints. */
  .about-intro{height:auto!important;min-height:0!important;padding-bottom:72px!important}
  .about-stat-grid{
    width:100%!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:clamp(18px,2vw,30px)!important;
  }
  .about-stat-grid .about-stat{
    width:100%!important;
    min-width:0!important;
  }

  /* Only overlap the partner heading inset. Pulling this section upward by a
     whole viewport covers the lower half of the sticky values canvas with an
     empty grey layer during the Vision/Core Value frames. */
  .about-values-sticky{
    height:100svh!important;
    min-height:100svh!important;
  }
  .about-partners{margin-top:-120px!important}

  /* Contact form: retain every field while fitting the complete form card in
     one notebook-height viewport after following an anchored contact link. */
  .contact-form-section{
    min-height:calc(100svh - var(--global-header-height,80px))!important;
    padding:16px 5vw 18px!important;
    scroll-margin-top:var(--global-header-height,80px)!important;
  }
  .contact-tabs{height:62px!important}
  .contact-tabs button,
  .contact-tabs button:first-child{
    height:56px!important;
    margin-top:6px!important;
    padding:0 10px 14px!important;
    font-size:14px!important;
  }
  .contact-tabs button.active{height:62px!important;margin-top:0!important}
  .contact-card{
    min-height:0!important;
    padding:18px 7vw!important;
  }
  .contact-card h2{
    margin-bottom:14px!important;
    font-size:36px!important;
    line-height:42px!important;
  }
  .field-grid{
    width:1080px!important;
    column-gap:18px!important;
    row-gap:8px!important;
  }
  .field-grid label{
    font-size:14px!important;
    line-height:18px!important;
  }
  .field-grid input,
  .field-grid select{
    height:42px!important;
    margin-top:4px!important;
    padding-inline:14px!important;
  }
  .field-grid textarea{
    height:58px!important;
    margin-top:4px!important;
    padding:10px 14px!important;
  }
  .choice-field legend,
  .choice-field label{
    font-size:14px!important;
    line-height:18px!important;
  }
  .choice-field label{display:inline-flex!important;margin:4px 26px 0 0!important}
  .choice-field input[type="radio"]{width:16px!important;height:16px!important;flex-basis:16px!important}
  .file-field .file-drop{
    height:42px!important;
    margin-top:4px!important;
    padding-inline:14px!important;
    font-size:13px!important;
  }
  .consent{
    width:1080px!important;
    margin:12px auto 14px!important;
    font-size:14px!important;
    line-height:18px!important;
  }
  .submit{height:42px!important}
}

/* The news preview is initialized while its carousel state briefly uses
   opacity .25. Never preserve that transient value as the final image tint. */
.news-main .news-preview img.site-image-reveal{
  --site-image-opacity:1!important;
  opacity:1!important;
  filter:none!important;
  clip-path:none!important;
  translate:none!important;
  scale:1!important;
}

/* 2026-09-04 notebook density and shared component pass.
   Keep action labels intact, remove artboard-only spacers and make the
   repeated header/footer/carousel patterns behave the same on every page. */
:where(
  .button,
  .pill,
  .head-single,
  .head-actions a,
  .shared-cta-actions a,
  .support-grid a,
  .resource-cta a,
  .case-heading>a,
  .cases-head>a,
  .contact-grid a,
  .about-more a,
  .submit,
  .contact-tabs button,
  .resource-filters button,
  .case-categories button,
  .back-float,
  .inner-demo,
  .contact-demo,
  .support-demo,
  .demo
){
  white-space:nowrap!important;
  word-break:keep-all!important;
  overflow-wrap:normal!important;
  text-wrap:nowrap!important;
}

/* Resource pills use a real label/action grid. Long labels may occupy two
   lines without pushing the action out of alignment or under it. */
.resource-links a{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  column-gap:12px!important;
}
.resource-links .resource-link-label{
  min-width:0!important;
  line-height:1.12!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
}
.resource-links .resource-link-action{
  justify-self:end!important;
  white-space:nowrap!important;
}

/* Every footer now receives a named inner grid. These common rules also
   prevent page-specific fixed artboards from collapsing navigation columns. */
footer.contact-footer{display:block!important}

@media (min-width:901px){
  :where(
    .product-footer,
    .resource-footer,
    .support-footer,
    .contact-footer,
    .inner-footer,
    .about-footer,
    .career-footer,
    .customer-footer,
    .service-footer,
    .faq-footer,
    .detail-footer,
    .compare-footer,
    .solution-footer,
    #footer
  ){
    height:auto!important;
    min-height:0!important;
    padding:0!important;
    overflow:visible!important;
  }
  :where(
    .footer-inner,
    .footer-grid,
    .inner-footer-grid,
    .about-footer-inner,
    .career-footer-inner,
    .customer-footer-grid,
    .service-footer-grid,
    .faq-footer-grid,
    .support-footer-grid,
    .contact-footer-grid
  ){
    position:static!important;
    display:grid!important;
    width:min(calc(100% - 12.5vw),1680px)!important;
    max-width:1680px!important;
    height:auto!important;
    min-height:0!important;
    margin:0 auto!important;
    padding:clamp(58px,6svh,76px) 0 clamp(42px,5svh,60px)!important;
    grid-template-columns:minmax(280px,2fr) repeat(4,minmax(104px,1fr))!important;
    gap:clamp(26px,3vw,58px)!important;
    align-items:start!important;
  }
  :where(
    .footer-inner,
    .footer-grid,
    .inner-footer-grid,
    .about-footer-inner,
    .career-footer-inner,
    .customer-footer-grid,
    .service-footer-grid,
    .faq-footer-grid,
    .support-footer-grid,
    .contact-footer-grid
  )>div{
    position:static!important;
    inset:auto!important;
  }
  :where(
    .footer-inner,
    .footer-grid,
    .inner-footer-grid,
    .about-footer-inner,
    .career-footer-inner,
    .customer-footer-grid,
    .service-footer-grid,
    .faq-footer-grid,
    .support-footer-grid,
    .contact-footer-grid
  )>div:not(:first-child){
    display:flex!important;
    min-width:0!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:14px!important;
  }
  :where(
    .footer-inner,
    .footer-grid,
    .inner-footer-grid,
    .about-footer-inner,
    .career-footer-inner,
    .customer-footer-grid,
    .service-footer-grid,
    .faq-footer-grid,
    .support-footer-grid,
    .contact-footer-grid
  )>div:first-child>p{
    width:auto!important;
    max-width:390px!important;
    margin:clamp(30px,4svh,52px) 0 0!important;
  }
  footer>:where(
    .copyright,
    .legal,
    .inner-legal,
    .support-legal,
    .customer-legal,
    .service-legal,
    .faq-legal,
    .about-copyright,
    .career-copyright,
    .contact-footer-legal
  ){
    position:static!important;
    display:flex!important;
    width:min(calc(100% - 12.5vw),1680px)!important;
    min-height:52px!important;
    height:auto!important;
    margin:0 auto!important;
    padding:15px 0!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:20px!important;
    flex-direction:row!important;
    border-top:1px solid rgba(90,99,106,.12)!important;
    color:rgba(0,0,0,.45)!important;
  }
}

@media (max-width:900px){
  footer.contact-footer{display:block!important;padding:0!important}
  .contact-footer-grid{
    display:grid!important;
    width:calc(100% - 40px)!important;
    margin:0 auto!important;
    padding:52px 0 36px!important;
    grid-template-columns:1fr!important;
    gap:28px!important;
  }
  .contact-footer-grid>div:not(:first-child){display:flex!important;flex-direction:column!important;gap:12px!important}
  .contact-footer-grid>div:first-child p{width:auto!important;max-width:520px!important;margin-top:28px!important}
  .contact-footer-legal{
    position:static!important;
    display:flex!important;
    width:calc(100% - 40px)!important;
    margin:0 auto!important;
    padding:18px 0!important;
    flex-direction:column!important;
    gap:12px!important;
    border-top:1px solid rgba(90,99,106,.12)!important;
  }
}

@media (min-width:1281px) and (max-width:1512px){
  /* The seven navigation items plus EN need a compact grid before the tablet
     breakpoint; otherwise EN intrudes into Contact Us around 14-inch widths. */
  :is(.site-header,.product-header,.about-header,.career-header,.contact-header,.support-header,.detail-header,.compare-header,.resource-header,.solution-header,.faq-header,.service-header){
    display:grid!important;
    grid-template-columns:180px minmax(0,1fr) 156px!important;
    column-gap:24px!important;
    padding-inline:40px!important;
  }
  :is(.site-header,.product-header,.about-header,.career-header,.contact-header,.support-header,.detail-header,.compare-header,.resource-header,.solution-header,.faq-header,.service-header)>nav{
    position:static!important;
    display:flex!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
    padding:0!important;
    align-items:center!important;
    justify-content:space-evenly!important;
    gap:8px!important;
    font-size:16px!important;
  }
  :is(.site-header,.product-header,.about-header,.career-header,.contact-header,.support-header,.detail-header,.compare-header,.resource-header,.solution-header,.faq-header,.service-header)>nav a{
    width:auto!important;
    white-space:nowrap!important;
  }
  :is(.site-header,.product-header,.about-header,.career-header,.contact-header,.support-header,.detail-header,.compare-header,.resource-header,.solution-header,.faq-header,.service-header)>a:nth-last-of-type(1){
    width:156px!important;
    min-width:156px!important;
    height:44px!important;
    margin:0!important;
    padding-inline:16px!important;
    font-size:14px!important;
    white-space:nowrap!important;
  }
}

@media (min-width:901px) and (max-width:1512px){
  /* Company-news listing: keep the back control clear while removing the
     oversized artboard spacer and keep the lead story side-by-side on laptops. */
  .news-main{padding:110px 0 72px!important}
  .news-main h1{margin-bottom:38px!important}
  .news-tools{margin-bottom:38px!important}
  .news-feature{
    height:clamp(420px,52svh,500px)!important;
    grid-template-columns:minmax(0,55%) minmax(0,45%)!important;
  }
  .news-feature>img{height:100%!important}
  .news-feature>div{padding:clamp(30px,3vw,46px)!important}
  .news-feature h2{margin-bottom:18px!important;font-size:clamp(25px,2vw,30px)!important;line-height:1.18!important}
  .news-feature p{margin-bottom:28px!important;font-size:16px!important;line-height:1.45!important}
  .feature-dots{right:clamp(30px,3vw,46px)!important;bottom:30px!important}
  .all-news-heading{margin:72px 0 40px!important}

  /* Product page: replace the original 1080/880px artboards with content-led
     sections so the next useful block follows immediately. */
  .product-hero{
    height:clamp(720px,calc(100svh - 80px),820px)!important;
    min-height:720px!important;
  }
  .product-hero .hero-copy{
    top:clamp(44px,6svh,64px)!important;
    width:min(860px,68vw)!important;
    max-width:none!important;
  }
  .product-hero .industrial-lineup,
  .product-hero .hotspots{
    top:clamp(245px,29svh,280px)!important;
    left:11%!important;
    width:78%!important;
    height:auto!important;
    aspect-ratio:1420/668!important;
  }
  .faqs{
    height:auto!important;
    min-height:0!important;
    padding:clamp(52px,6svh,68px) 6.25%!important;
  }
  .faq-list{margin-top:clamp(28px,4svh,40px)!important}
  .latest-cases{
    height:auto!important;
    min-height:0!important;
    padding-top:clamp(52px,6svh,68px)!important;
    padding-bottom:clamp(58px,7svh,78px)!important;
  }
  .applications{
    height:auto!important;
    min-height:0!important;
    padding:clamp(56px,7svh,76px) 6.25%!important;
  }
  .application-grid{margin-top:36px!important;row-gap:38px!important}

  /* Resource search starts directly under the hero rather than after a
     full artboard spacer. */
  .resource-content{
    min-height:0!important;
    padding:clamp(44px,6svh,60px) 0!important;
  }
  .resource-shell>h2{margin-bottom:30px!important}

  /* Support cards own their buttons and keep every CTA on the same baseline. */
  .support-grid article{
    display:flex!important;
    height:auto!important;
    min-height:260px!important;
    flex-direction:column!important;
  }
  .support-grid p{min-height:0!important}
  .support-grid a{margin-top:auto!important}

  /* Solution-detail media becomes a three-up notebook rail. It presents more
     content per screen without cropping text or relying on hover movement. */
  .sd-gallery,
  .sd-videos,
  .sd-cases,
  .sd-products,
  .sd-applications{
    min-height:0!important;
    padding:clamp(54px,7svh,72px) 0!important;
  }
  .sd-videos .sd-track-shell{margin-top:40px!important}
  .sd-media-card{
    width:calc((100% - 48px)/3)!important;
    height:auto!important;
    flex:0 0 calc((100% - 48px)/3)!important;
    aspect-ratio:4/3!important;
  }
  .sd-media-card::after{height:62%!important}
  .sd-media-card h3{font-size:clamp(17px,1.4vw,21px)!important;line-height:1.18!important}
  .sd-media-card p{font-size:clamp(14px,1.05vw,16px)!important;line-height:1.3!important;-webkit-line-clamp:3!important}
  .sd-case-track-shell{margin-top:40px!important}
  .sd-products-layout{
    grid-template-columns:minmax(300px,32%) minmax(0,1fr)!important;
    gap:clamp(32px,4vw,58px)!important;
  }
  .sd-products-note{width:min(390px,30vw)!important}
  .sd-products-copy strong,
  .sd-products-copy p{width:100%!important}
  .sd-products-copy strong{margin-top:42px!important}
  .sd-mini-arrows{margin-top:58px!important}
  .sd-product-grid{padding-top:72px!important}
  .sd-product-grid article{flex-basis:min(310px,28vw)!important}
  .sd-product-media{
    width:min(310px,28vw)!important;
    height:auto!important;
    aspect-ratio:402/456!important;
  }
  .application-track-shell{margin-top:40px!important}
  .sd-application-card{
    width:calc((100% - 48px)/3)!important;
    height:auto!important;
    flex:0 0 calc((100% - 48px)/3)!important;
    aspect-ratio:4/3!important;
  }
  .sd-application-card::after{height:62%!important}
  .sd-application-card h3{font-size:clamp(18px,1.45vw,22px)!important;line-height:1.15!important}
  .sd-application-card p{font-size:clamp(14px,1.05vw,16px)!important;line-height:1.28!important;-webkit-line-clamp:2!important}

  /* Entrance effects must never leave carousel media as grey placeholders. */
  :where(.sd-media-card,.sd-case-grid article,.sd-product-grid article,.sd-application-card).site-motion-item,
  :where(.sd-media-card,.sd-case-grid article,.sd-product-grid article,.sd-application-card) :where(img,video).site-image-reveal{
    opacity:1!important;
    filter:none!important;
    clip-path:none!important;
    translate:none!important;
    scale:1!important;
  }
  @media (hover:hover){
    :where(.sd-media-card,.sd-case-grid article,.sd-product-grid article,.sd-application-card):hover,
    :where(.sd-media-card,.sd-case-grid article,.sd-product-grid article,.sd-application-card):hover :where(img,video){
      transform:none!important;
      translate:none!important;
      scale:1!important;
    }
  }

  /* Product renders use their own centered crop inside the Figma card. Keep
     the entrance-effect reset from discarding that intentional translation. */
  .sd-product-grid .sd-product-media img.site-image-reveal,
  .sd-product-grid .sd-product-media img.site-image-reveal:hover{
    translate:-50% -50%!important;
  }

  /* Keep disabled edge controls visible: a grey previous and blue next button
     are part of the carousel affordance even when three cards exactly fit. */
  .latest-cases .case-arrow:disabled,
  .sd-case-track-shell .sd-arrow:disabled{
    display:flex!important;
    opacity:1!important;
  }
}

/* 2026-09-05 notebook layout corrections
   Keep content-led sections compact between 901px and 1512px, the range used
   by common 14-inch notebooks. */
.resource-links .resource-link-label{
  color:#111!important;
}
.resource-links a:hover .resource-link-label,
.resource-links a:focus-visible .resource-link-label{
  color:#fff!important;
}

@media (min-width:901px) and (max-width:1512px){
  /* Home: fixed Figma artboard heights created blank bands between sections. */
  #industries.section,
  #products.section,
  #cases.section{
    height:auto!important;
    min-height:0!important;
  }
  #industries.section{
    padding-bottom:clamp(54px,7svh,76px)!important;
  }
  #products.section,
  #cases.section{
    padding-bottom:clamp(58px,7.5svh,82px)!important;
  }

  /* About: values are a real one-screen panel, not a three-screen spacer. */
  .about-values{
    height:100svh!important;
    min-height:680px!important;
  }
  .about-values-sticky{
    height:100svh!important;
    min-height:680px!important;
  }
  .about-partners{
    margin-top:0!important;
  }

  /* Scanning-services hero copy and CTA retain a safe bottom inset. */
  .service-hero .hero-copy{
    width:min(880px,68vw)!important;
  }
  .service-hero .hero-copy h1{
    margin-bottom:14px!important;
    font-size:clamp(38px,3.35vw,48px)!important;
    line-height:1.08!important;
  }
  .service-hero .hero-copy p{
    font-size:clamp(18px,1.65vw,22px)!important;
    line-height:1.32!important;
  }
  .service-hero .hero-copy .pill{
    margin-top:clamp(18px,2.7svh,26px)!important;
  }

  /* Company-news directory: protect the title column from collapsing. */
  .news-directory{
    grid-template-columns:minmax(360px,1.15fr) minmax(150px,.42fr) minmax(340px,.95fr)!important;
    gap:clamp(20px,2.4vw,36px)!important;
  }
  .news-table-head,
  .news-row{
    grid-template-columns:minmax(0,1fr) 108px!important;
    gap:18px!important;
  }
  .news-row{
    min-height:78px!important;
    padding-right:12px!important;
  }
  .news-row a{
    display:-webkit-box!important;
    overflow:hidden!important;
    padding-right:8px!important;
    font-size:clamp(15px,1.25vw,18px)!important;
    line-height:1.3!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
  }
  .news-categories h3{
    color:#111!important;
  }
  .news-categories button{
    color:#30343a!important;
  }
  .news-categories button.active{
    color:#111!important;
  }

  /* Certificate carousel ends after its controls instead of reserving an
     additional empty artboard. */
  .certificates{
    height:auto!important;
    min-height:0!important;
    padding-bottom:clamp(58px,7svh,76px)!important;
  }

  /* Careers: both content areas follow their actual content height. */
  .career-story,
  .positions{
    height:auto!important;
    min-height:0!important;
  }
  .positions{
    padding-bottom:clamp(64px,8svh,88px)!important;
  }
}

@media (min-width:901px) and (max-width:1199px){
  .news-directory{
    grid-template-columns:minmax(340px,1fr) minmax(140px,.38fr)!important;
  }
  .news-preview{
    position:static!important;
    grid-column:1/-1!important;
    display:grid!important;
    grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr)!important;
  }
  .news-preview img{
    grid-row:1/5!important;
    height:100%!important;
    min-height:300px!important;
  }
}

/* 2026-09-06 desktop QA: loaded case artwork must never remain hidden when a
   user jumps directly to the case-study section. */
.solution-case-card>img.site-image-reveal{
  --site-image-opacity:1!important;
  opacity:1!important;
  filter:none!important;
}

/* 2026-09-08 contact-form viewport fit. Every form mode keeps all fields,
   consent and submit action inside one anchored viewport at every width. */
.contact-form-section{
  min-height:calc(100svh - var(--global-header-height,80px))!important;
  padding:clamp(8px,1.5svh,14px) clamp(12px,5vw,96px) clamp(10px,1.7svh,16px)!important;
  scroll-margin-top:var(--global-header-height,80px)!important;
}
.contact-tabs{
  width:min(1680px,100%)!important;
  height:56px!important;
}
.contact-tabs button,
.contact-tabs button:first-child{
  height:50px!important;
  margin-top:6px!important;
  padding:0 10px 12px!important;
  font-size:clamp(12px,1vw,15px)!important;
}
.contact-tabs button.active{
  height:56px!important;
  margin-top:0!important;
}
.contact-card{
  width:min(1680px,100%)!important;
  min-height:0!important;
  padding:clamp(10px,1.6svh,16px) clamp(12px,7vw,134px)!important;
}
.contact-card h2{
  margin-bottom:clamp(7px,1.2svh,12px)!important;
  font-size:clamp(24px,2.2vw,32px)!important;
  line-height:1.15!important;
}
.contact-card .field-grid{
  width:1080px!important;
  max-width:100%!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  column-gap:clamp(8px,1.3vw,18px)!important;
  row-gap:clamp(4px,.8svh,7px)!important;
}
.contact-card .field-grid .wide{grid-column:1/-1!important}
.contact-card .field-grid label,
.contact-card .choice-field legend,
.contact-card .choice-field label{
  min-width:0!important;
  font-size:clamp(11px,1vw,13px)!important;
  line-height:14px!important;
}
.contact-card .field-grid input,
.contact-card .field-grid select{
  height:38px!important;
  margin-top:3px!important;
  padding-inline:12px!important;
  border-radius:8px!important;
}
.contact-card .field-grid textarea{
  height:48px!important;
  margin-top:3px!important;
  padding:8px 12px!important;
  border-radius:8px!important;
}
.contact-card .choice-field label{
  display:inline-flex!important;
  margin:3px 22px 0 0!important;
}
.contact-card .choice-field input[type="radio"]{
  width:16px!important;
  height:16px!important;
  flex-basis:16px!important;
}
.contact-card .file-field .file-drop{
  height:38px!important;
  margin-top:3px!important;
  padding-inline:12px!important;
  border-radius:8px!important;
  font-size:11px!important;
}
.contact-card .consent{
  width:1080px!important;
  margin:clamp(6px,1svh,10px) auto clamp(7px,1svh,11px)!important;
  font-size:clamp(11px,1vw,13px)!important;
  line-height:15px!important;
}
.contact-card .submit{
  height:38px!important;
  font-size:13px!important;
}

@media(max-width:760px){
  .contact-form-section{padding-inline:12px!important}
  .contact-tabs{
    width:calc(100% + 24px)!important;
    height:50px!important;
    margin-inline:-12px!important;
    padding-inline:12px!important;
  }
  .contact-tabs button,
  .contact-tabs button:first-child{
    min-width:128px!important;
    height:46px!important;
    flex-basis:128px!important;
    margin-top:4px!important;
    padding-bottom:10px!important;
    font-size:12px!important;
  }
  .contact-tabs button.active{height:50px!important;margin-top:0!important}
  .contact-card{padding-inline:12px!important}
  .contact-card h2{font-size:24px!important}
  .contact-card .field-grid{column-gap:8px!important}
  .contact-card .field-grid label,
  .contact-card .choice-field legend,
  .contact-card .choice-field label{font-size:11px!important;line-height:13px!important}
  .contact-card .consent{font-size:11px!important;line-height:14px!important}
}

@media(max-height:800px){
  .contact-form-section{padding-block:6px 8px!important}
  .contact-tabs{height:46px!important}
  .contact-tabs button,
  .contact-tabs button:first-child{height:42px!important;margin-top:4px!important;padding-bottom:8px!important}
  .contact-tabs button.active{height:46px!important;margin-top:0!important}
  .contact-card{padding-block:8px!important}
  .contact-card h2{margin-bottom:5px!important;font-size:22px!important}
  .contact-card .field-grid{row-gap:3px!important}
  .contact-card .field-grid input,
  .contact-card .field-grid select,
  .contact-card .file-field .file-drop{height:34px!important}
  .contact-card .field-grid textarea{height:40px!important}
  .contact-card .consent{margin:5px auto 6px!important}
  .contact-card .submit{height:34px!important}
}

@media(max-height:600px){
  .contact-form-section{padding-block:4px 6px!important}
  .contact-tabs{height:42px!important}
  .contact-tabs button,
  .contact-tabs button:first-child{height:38px!important;margin-top:4px!important;padding-bottom:6px!important;font-size:11px!important}
  .contact-tabs button.active{height:42px!important;margin-top:0!important}
  .contact-card{padding-block:6px!important}
  .contact-card h2{margin-bottom:3px!important;font-size:20px!important}
  .contact-card .field-grid{row-gap:2px!important}
  .contact-card .field-grid label,
  .contact-card .choice-field legend,
  .contact-card .choice-field label{font-size:10px!important;line-height:11px!important}
  .contact-card .field-grid input,
  .contact-card .field-grid select,
  .contact-card .file-field .file-drop{height:30px!important;margin-top:2px!important}
  .contact-card .field-grid textarea{height:34px!important;margin-top:2px!important}
  .contact-card .consent{margin:3px auto 4px!important;font-size:10px!important;line-height:12px!important}
  .contact-card .submit{height:32px!important}
}

/* 2026-09-09 desktop density reconciliation.
   The source designs use a 1920px artboard; these rules keep their hierarchy
   balanced on 1194–1512px notebook widths without scaling the whole page. */
@media (min-width:901px){
  /* Home/About metrics: numbers recede while the geographic story leads. */
  #why .stats strong{font-size:clamp(36px,3.1vw,46px)!important;letter-spacing:.02em!important}
  #why .stats sup{font-size:clamp(20px,1.8vw,27px)!important}
  #why .stats article{height:clamp(96px,12svh,116px)!important;padding:clamp(15px,2svh,20px)!important}
  #why .globe-wrap{width:min(1240px,82vw)!important}
  .about-stat strong{font-size:clamp(42px,3.6vw,54px)!important;line-height:1!important;letter-spacing:.02em!important}
  .about-stat sup{font-size:clamp(22px,2vw,29px)!important}
  .about-globe-stage{--about-globe-size:min(1120px,82vw,calc(100svh - 92px))!important;top:82px!important}

  /* Certificates should read as a compact gallery, not a full-screen poster. */
  .certificates{height:720px!important;padding-top:62px!important}
  .certificates>h2{font-size:clamp(34px,3vw,40px)!important;line-height:1.15!important}
  .certificate-stage{height:602px!important;margin-top:34px!important;transform:scale(.62)!important;transform-origin:top center!important}
  .certificate-progress{margin-top:-210px!important}
  .certificates h3{margin:26px 0 20px!important;font-size:19px!important;line-height:1.3!important}
  .quality-card h2{font-size:21px!important}
  .quality-card p{font-size:16px!important;line-height:1.45!important}
  .compliance h2{font-size:clamp(34px,3vw,40px)!important;line-height:1.18!important}
  .compliance-item button{font-size:19px!important}
  .compliance-item p{font-size:16px!important;line-height:1.45!important}

  /* Industry detail: balanced section headings, rows, tabs and content-led cards. */
  .industry-detail-hero__content h1{font-size:clamp(44px,4.1vw,56px)!important;line-height:1.06!important}
  .industry-detail-hero__content>p{font-size:16px!important}
  .industry-detail-hero__content>span{max-width:780px!important;font-size:17px!important;line-height:1.45!important}
  .industry-detail-overview,.industry-detail-applications,.industry-detail-objects,.industry-detail-cases,.industry-detail-products{padding-top:clamp(62px,7svh,78px)!important;padding-bottom:clamp(62px,7svh,78px)!important}
  .industry-detail-overview h2,.industry-detail-applications h2,.industry-detail-objects h2,.industry-detail-section-head h2{font-size:clamp(34px,3.1vw,42px)!important;line-height:1.16!important}
  .industry-detail-kicker{margin-bottom:14px!important;font-size:14px!important}
  .industry-solution-list{margin-top:34px!important}
  .industry-solution-row>button{min-height:74px!important;padding:16px 0!important;grid-template-columns:70px 1fr 38px!important}
  .industry-solution-row>button span{font-size:14px!important}
  .industry-solution-row>button strong{font-size:clamp(20px,1.8vw,24px)!important}
  .industry-solution-row>button i{font-size:24px!important}
  .industry-solution-panel{min-height:clamp(390px,31vw,460px)!important;margin-left:70px!important}
  .industry-solution-panel h3,.industry-application-feature h3{font-size:clamp(29px,2.65vw,36px)!important;line-height:1.15!important}
  .industry-solution-panel p,.industry-application-feature p{font-size:16px!important;line-height:1.48!important}
  .industry-application-tabs{margin:36px 0 32px!important}
  .industry-application-tabs button{font-size:16px!important}
  .industry-application-feature>div{padding:clamp(36px,4vw,54px)!important}
  .industry-object-tabs{margin-top:42px!important;margin-bottom:40px!important}
  .industry-object-tabs button{font-size:clamp(12px,1vw,14px)!important}
  .industry-object-copy h3{font-size:21px!important}
  .industry-object-copy p{font-size:16px!important;line-height:1.42!important}
  .industry-case-grid{margin-top:36px!important}
  .industry-case-card{height:auto!important;min-height:0!important;padding:18px!important}
  .industry-case-card>div{padding-top:14px!important}
  .industry-case-card h3{margin-bottom:8px!important;font-size:clamp(18px,1.55vw,21px)!important}
  .industry-case-card p{font-size:14px!important;line-height:1.42!important}
  .industry-product-card h3{font-size:clamp(19px,1.7vw,23px)!important}
  .industry-detail-section-copy{font-size:16px!important}
  .industry-detail-cta h2{font-size:clamp(34px,3vw,40px)!important}
  .industry-detail-cta p{font-size:17px!important;line-height:1.4!important}

  /* Solution detail and its product rail. */
  .solution-hero-copy h1{width:min(700px,100%)!important;font-size:clamp(36px,3.2vw,44px)!important;line-height:1.12!important}
  .solution-hero-summary{width:min(680px,100%)!important;font-size:16px!important;line-height:1.42!important}
  .sd-gallery h2,.sd-videos h2,.sd-section-head h2,.sd-products h2{font-size:clamp(34px,3vw,40px)!important;line-height:1.16!important}
  .sd-products-note{font-size:16px!important;line-height:1.4!important}
  .sd-products-copy strong{font-size:20px!important;line-height:1.25!important}
  .sd-products-copy p{font-size:16px!important;line-height:1.45!important}
  .sd-product-grid h3{font-size:clamp(18px,1.55vw,21px)!important;line-height:1.16!important}

  /* Product detail and catalog typography. */
  .detail-hero h1{font-size:clamp(36px,3.2vw,44px)!important;line-height:1.15!important}
  .detail-hero p{font-size:clamp(19px,1.75vw,24px)!important;line-height:1.3!important}
  .overview-copy h2{font-size:28px!important}
  .overview-copy>p{font-size:17px!important;line-height:1.5!important}
  .precision-card h3{font-size:20px!important}
  .precision-card strong,.precision-card span{font-size:16px!important;line-height:1.45!important}
  .product-features>h2,.section-head h2,.quality-applications>h2,.related-products h2,.faq-intro h2{font-size:clamp(34px,3vw,40px)!important;line-height:1.16!important}
  .feature-stories h2{font-size:clamp(30px,2.7vw,36px)!important;line-height:1.18!important}
  .feature-stories .eyebrow{font-size:16px!important}
  .feature-stories article div>p:last-child{font-size:16px!important;line-height:1.5!important}
  .related-products>div:first-child>p{font-size:16px!important;line-height:1.5!important}
  .related-card h3{font-size:20px!important;line-height:1.25!important}
  .detail-faq{min-height:0!important;padding-top:clamp(64px,8svh,90px)!important;padding-bottom:clamp(64px,8svh,90px)!important}
  .faq-list button{min-height:84px!important;font-size:18px!important}
  .faq-list p{font-size:15px!important}
  .story-intro .eyebrow{font-size:16px!important}
  .story-intro h2{font-size:clamp(34px,3vw,40px)!important;line-height:1.18!important}
  .story-intro>p:last-child{font-size:16px!important;line-height:1.45!important}
  .filters button{height:54px!important;font-size:15px!important}
  .catalog-title h3{font-size:clamp(18px,1.55vw,21px)!important;line-height:1.2!important}
  .catalog-grid p{font-size:14px!important;line-height:1.45!important}

  /* Repeated secondary-page headings share one compact ceiling. */
  .events-heading h2,.resource-shell>h2,.career-main h2,.support-services h2,.customer-main h2,.faq-main h2{font-size:clamp(34px,3vw,42px)!important;line-height:1.16!important}
  .events-heading>div>p,.events-heading>p{font-size:16px!important;line-height:1.45!important}

  /* Contact keeps every control in one viewport, with a calmer measure. */
  .contact-tabs,.contact-card{width:min(1120px,calc(100% - 48px))!important}
  .contact-card{padding-inline:clamp(28px,5vw,64px)!important}
  .contact-card .field-grid,.contact-card .consent{width:940px!important}
  .contact-card .field-grid label,.contact-card .choice-field legend,.contact-card .choice-field label{font-size:13px!important;line-height:15px!important}
  .office-copy h2{font-size:clamp(32px,2.7vw,38px)!important;line-height:1.18!important}
  .office-copy>p{font-size:16px!important;line-height:1.45!important}
  .office-card{min-height:136px!important;padding-top:15px!important;padding-bottom:14px!important}
  .office-card h3{margin-bottom:7px!important;font-size:17px!important;line-height:1.2!important}
  .office-card p,.office-card a{font-size:14px!important;line-height:1.4!important}
}

/* Final desktop composition pass: the trust strip has no blank brand slot,
   the certification band stays close to one quarter of the viewport, and
   equal-height resource cards share a clean baseline. */
@media (min-width:901px){
  .boeing-crop{position:relative!important;display:block!important;width:160px!important;height:42px!important;overflow:hidden!important}
  .boeing-crop img{position:absolute!important;left:0!important;top:-30px!important;width:160px!important;height:100px!important;max-width:none!important;max-height:none!important;object-fit:fill!important;object-position:center!important;transform:none!important}
  .core-advantages{height:clamp(210px,25svh,250px)!important;padding:clamp(24px,3.8svh,36px) 0!important}
  .core-advantage-cards{height:100%!important;gap:clamp(16px,1.5vw,24px)!important;align-items:stretch!important}
  .core-advantage-cards article{height:100%!important;min-height:150px!important;padding:16px 20px 22px!important;border-radius:16px!important}
  .core-advantage-cards img{top:10px!important;width:220px!important;height:82px!important}
  .core-advantage-cards .core-iso-17025:before{top:70px!important;width:104px!important;height:18px!important}
  .core-advantage-cards .core-iso-10360 img{top:-43px!important;width:222px!important;height:178px!important}
  .core-advantage-cards strong{font-size:clamp(18px,1.45vw,22px)!important;line-height:1.15!important}
  .core-advantage-cards .core-flatness img{inset:0!important;width:100%!important;height:100%!important}
  .blog-grid{align-items:stretch!important}
  .blog-grid .blog-card{height:100%!important;min-height:clamp(370px,29vw,430px)!important;overflow:hidden!important}
  .blog-grid .blog-card h3{display:-webkit-box!important;overflow:hidden!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:3!important}
  .blog-grid .blog-card p{display:-webkit-box!important;overflow:hidden!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:3!important}
}

/* 2026-09-09 final review: compact the secondary detail controls and keep the
   contact form content-sized.  The earlier viewport minimum left a large,
   unusable blank field below the submit action on tall desktop screens. */
@media (min-width:901px){
  .industry-detail-scroll{
    right:var(--id-pad)!important;
    bottom:34px!important;
    width:44px!important;
    height:44px!important;
    font-size:19px!important;
  }
  .industry-solution-panel{
    min-height:clamp(360px,29vw,430px)!important;
    grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)!important;
  }
  .industry-solution-panel>img{object-position:center!important}
  .industry-solution-panel>div{padding:clamp(32px,3.5vw,52px)!important}
  .industry-solution-panel h3{font-size:clamp(28px,2.45vw,34px)!important}
  .industry-solution-panel p{margin:18px 0 26px!important;font-size:15px!important;line-height:1.5!important}
  .industry-solution-panel a{width:148px!important;height:42px!important;font-size:12px!important}

  .contact-form-section{
    height:auto!important;
    min-height:0!important;
    padding:clamp(10px,1.5svh,16px) clamp(16px,5vw,72px) clamp(14px,2svh,20px)!important;
  }
  .contact-tabs,.contact-card{
    width:clamp(680px,56vw,820px)!important;
    margin-inline:auto!important;
  }
  .contact-card{padding-inline:clamp(28px,4vw,46px)!important}
  .contact-card .field-grid,.contact-card .consent{width:min(680px,100%)!important}
}

@media (max-width:760px){
  .boeing-crop{position:relative!important;width:132px!important;height:35px!important;overflow:hidden!important}
  .boeing-crop img{position:absolute!important;left:0!important;top:-25px!important;width:132px!important;height:83px!important;max-width:none!important;max-height:none!important;object-fit:fill!important;transform:none!important}
}