/*
 * 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)}
  .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}
}

/* 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 (hover:none),(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:820px!important;padding-bottom:90px!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-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:230px minmax(0,1fr)!important;gap:28px!important}
  .blog-card{grid-template-columns:minmax(230px,42%) minmax(0,1fr)!important;gap:24px!important;height:auto!important;min-height:310px!important}
  .blog-card img{width:100%!important;height:262px!important}
  .blog-card>div{min-width:0!important;padding-top:0!important}
  .blog-card :is(h3,p,small){max-width:100%!important;overflow-wrap:anywhere}
  .blog-card p{margin-top:18px!important;display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:5}
}

/* 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:24px!important;
  line-height:1.2!important;
  text-align:center!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;
}

@media (max-width:900px){
  .cases .case-row{margin-top:32px!important}
  .resources{padding-bottom:90px!important}
  .contact-grid article{min-height:312px!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-top:14px!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;
  }
}

/* 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}
}

/* 2026-08-31 breakpoint reconciliation.
   The shared header switches to its compact menu at 1100px.  An older audit
   rule switched it again at 1280px, which produced a translucent menu over
   the page and squeezed unrelated tablet layouts.  Keep one breakpoint and
   give the narrow desktop header enough room for every navigation item. */
@media (min-width:1101px) and (max-width:1280px){
  :root{--global-header-gutter:24px}
  :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:170px minmax(0,1fr) 150px!important;
    column-gap:24px!important;
    padding-inline:24px!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:170px!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:flex-start!important;
    gap:clamp(14px,1.8vw,24px)!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;
    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:150px!important;
    font-size:15px!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;
  }
}

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