/* Responsive adjustments loaded after the established RUNN ELECTRIC theme. */
.integration-layout{
  display:grid!important;grid-template-columns:minmax(0,1.07fr) minmax(0,.93fr);
  gap:clamp(28px,4vw,68px);align-items:start
}
.integration-layout .long-copy{grid-column:1;grid-row:1;min-width:0}
.integration-layout .integration-gallery{
  grid-column:2;grid-row:1;float:none;width:100%;min-width:0;
  margin:0;display:grid;gap:22px;align-content:start;overflow:visible
}
.integration-gallery a{display:block;min-width:0;background:#fffcf7;border-radius:9px}
.integration-gallery a:focus-visible{outline:3px solid #217a79;outline-offset:4px}
.integration-layout .integration-gallery img{
  display:block;width:100%;height:auto;max-width:100%;max-height:none;
  object-fit:contain;object-position:center;padding:10px;
  background:#fffcf7;border:1px solid #d6e5de;border-radius:9px;
  box-shadow:0 16px 38px #174f5430
}
.integration-item .integration-item-title{
  color:#176e67;font-weight:800;font-size:1.13em;line-height:1.5
}
@media(max-width:900px){
  .integration-layout{grid-template-columns:minmax(0,1fr)}
  .integration-layout .long-copy{grid-column:1;grid-row:1}
  .integration-layout .integration-gallery{
    grid-column:1;grid-row:2;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px
  }
}
@media(max-width:600px){
  .integration-layout .integration-gallery{grid-template-columns:minmax(0,1fr)}
}
.hero-copy,.hero-image,.page-hero-inner,.page-hero-photo,
.model-card>*,.accessory-card>*,.special-detail>*,.model-detail-layout>*,
.contact-layout>*,.brochure-layout>*,.service-editorial>*{min-width:0}
.brochure-page img,.blueprint-sheet,.customised-layout img{max-width:100%;height:auto}

/* Keep the split composition comfortable on laptops and large tablets. */
@media (min-width:761px) and (max-width:1180px){
  .page-hero.section-wrap{grid-template-columns:minmax(0,52%) minmax(0,48%)}
  .page-hero .page-hero-inner,.about-hero .page-hero-inner{
    padding:clamp(32px,4.5vw,56px) clamp(28px,4vw,54px)
  }
  .page-hero h1{font-size:clamp(2.6rem,4.6vw,4.3rem)}
  .buyer-guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:761px) and (max-width:980px){
  .hero-copy{padding-left:6%;padding-right:6%}
  .hero-copy h1,.hero-copy h2{font-size:clamp(2.5rem,5vw,3.8rem)}
  .hero-copy p{font-size:1rem;line-height:1.55}
  .cards-three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact-layout{grid-template-columns:minmax(0,35%) minmax(0,1fr);gap:5%}
  .model-detail-layout,.special-detail{gap:5%}
}

/* Stacked banners leave all copy visible before the image on smaller tablets. */
@media (max-width:900px){
  .page-hero.section-wrap{grid-template-columns:1fr;grid-template-rows:auto minmax(285px,34vw);min-height:0}
  .page-hero .page-hero-inner,.about-hero .page-hero-inner{
    min-height:0;padding:clamp(42px,6vw,60px) 6%
  }
  .page-hero h1{max-width:800px;font-size:clamp(2.7rem,6vw,4.5rem)}
  .page-hero p,.about-hero .page-hero-inner p{max-width:760px}
  .page-hero .page-hero-photo,.about-hero .page-hero-photo{
    width:100%;height:100%;min-height:285px
  }
  .page-hero .page-hero-photo img,.about-hero .page-hero-photo img{
    width:100%;height:100%;padding:16px 13%
  }
  .page-hero.service-hero .page-hero-photo img{padding:12px 9%}
}

@media (max-width:760px){
  .section-wrap{padding-left:6%;padding-right:6%}
  .header{padding-left:6%;padding-right:6%}
  .menu-toggle{min-width:44px;min-height:44px;align-items:center;justify-content:center}
  .nav{max-height:calc(100dvh - 75px);overscroll-behavior:contain}
  .nav>a,.nav-group>a{min-height:44px}
  .dropdown a{min-height:44px;display:flex;align-items:center}

  /* The carousel keeps its full CTA and robot image in view on phones. */
  .hero{height:clamp(850px,106svh,1000px)}
  .slide{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,59%) minmax(0,41%)}
  .hero-copy{height:100%;overflow:visible;padding:31px 6% 24px;justify-content:flex-start}
  .hero-copy h1,.hero-copy h2{font-size:clamp(2.4rem,8vw,3.75rem);line-height:1.07;
    margin:17px 0 13px;max-width:100%}
  .hero-copy p{font-size:clamp(.91rem,2.5vw,1rem);line-height:1.5;margin:0}
  .hero-copy .button{margin-top:auto;margin-bottom:0;min-height:50px;
    max-width:100%;white-space:normal;gap:13px}
  .hero-image img{inset:4% 8% 17%;width:84%;height:79%;max-width:84%;max-height:79%;padding:0}
  .hero-controls{min-height:63px}
  .hero-controls button{width:44px;height:44px;flex:none}

  .page-hero.section-wrap{grid-template-rows:auto minmax(235px,38vw)}
  .page-hero .page-hero-inner,.about-hero .page-hero-inner{padding:38px 6% 40px}
  .page-hero h1{font-size:clamp(2.25rem,8vw,4rem);line-height:1.08}
  .page-hero .page-hero-photo,.about-hero .page-hero-photo{min-height:235px}
  .page-hero .page-hero-photo img,.about-hero .page-hero-photo img{padding:13px 11%}

  .cards-three,.cards-two,.buyer-guide-grid,.legal-grid,.sitemap-grid{
    grid-template-columns:minmax(0,1fr)
  }
  .model-card,.accessory-card,.model-card:nth-child(even),.accessory-card:nth-child(even),
  .model-detail-layout,.special-detail,.contact-layout,.brochure-layout,.editorial-split{
    grid-template-columns:minmax(0,1fr)
  }
  .model-photo,.accessory-photo,.model-detail-visual,.special-detail-image{
    width:100%;height:clamp(295px,70vw,440px)
  }
  .service-editorial .service-photo{width:100%}
  .service-editorial .service-photo img{height:auto;max-height:none}
  .footer-main{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-map iframe{width:100%}
  .era-panel{max-height:calc(100dvh - 90px)}
}

@media (max-width:480px){
  .topline{letter-spacing:.09em}
  .hero{height:890px}
  .slide{grid-template-rows:minmax(0,60%) minmax(0,40%)}
  .hero-copy h1,.hero-copy h2{font-size:clamp(2.15rem,8vw,2.7rem)}
  .hero-copy .button{font-size:.76rem;line-height:1.3;padding:10px 14px}
  .hero-image img{inset:5% 6% 19%;width:88%;height:76%;max-width:88%;max-height:76%}
  .slide-label{min-width:0;max-width:calc(100% - 112px);font-size:.56rem}
  .page-hero.section-wrap{grid-template-rows:auto 235px}
  .page-hero h1{font-size:clamp(2.1rem,8.4vw,2.95rem)}
  .card-image,.special-image{height:clamp(230px,68vw,290px)}
  .model-photo,.accessory-photo,.model-detail-visual,.special-detail-image{height:clamp(280px,78vw,360px)}
  .form-grid input,.form-grid select,.form-grid textarea,
  .era-fields input,.era-fields select,.era-form textarea{font-size:16px}
  .footer-main{grid-template-columns:minmax(0,1fr)}
  .footer-main>div:first-child{grid-column:auto}
  .footer-map-heading{line-height:1.5;letter-spacing:.05em}
  .era-fields{grid-template-columns:minmax(0,1fr)}
  .era-fields label{grid-column:auto!important}
  .era-launcher{padding:7px 11px 7px 7px;gap:7px;font-size:.83rem}
  .era-launcher .era-avatar{width:37px;height:37px}
}
@media (max-width:360px){
  .hero{height:920px}
  .hero-copy h1,.hero-copy h2{font-size:2.12rem}
  .hero-copy{padding-top:27px}
  .page-hero .page-hero-inner,.about-hero .page-hero-inner{padding-top:35px;padding-bottom:35px}
}
@media (max-height:500px) and (max-width:900px){
  .nav{max-height:calc(100dvh - 72px)}
  .era-panel{height:calc(100dvh - 76px)}
}

/* Consistent studio stage from the robot cards. Use positioned images so grid
   intrinsic sizing cannot make a cutout overflow and be clipped by the frame. */
.special-machines-home .card-image,
.machine-card-photo,.machine-gallery-image,
.integration-gallery a{background:radial-gradient(circle at 47% 43%,#fff 0%,#f0ede3 63%,#dfede8 100%)}
.special-machines-home .card-image{height:clamp(260px,27vw,335px);padding:0;position:relative;overflow:hidden}
.special-machines-home .card-image img{
  position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);
  min-width:0;min-height:0;max-width:none;max-height:none;padding:0;
  object-fit:contain;object-position:center;background:transparent;
  filter:drop-shadow(0 14px 12px #29443c24)
}
.machine-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.machine-card,.machine-card:first-child{grid-column:auto;display:flex;flex-direction:column}
.machine-card-photo,.machine-card:first-child .machine-card-photo{
  position:relative;display:block;flex:0 0 auto;box-sizing:border-box;
  height:clamp(265px,27vw,340px);min-height:0;max-height:none;
  padding:0;overflow:hidden
}
.machine-card-photo img,
.machine-gallery-image img,.machine-gallery-image:not(:first-child) img{
  position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);
  min-width:0;min-height:0;max-width:none;max-height:none;padding:0;
  object-fit:contain;object-position:center;background:transparent;
  filter:drop-shadow(0 14px 12px #29443c24)
}
.machine-card-copy{flex:1;justify-content:flex-start}
.machine-gallery-image,.machine-gallery-image:not(:first-child){
  position:relative;display:block;box-sizing:border-box;
  height:clamp(250px,26vw,350px);min-height:0;padding:0;overflow:hidden
}
.machine-gallery-image:first-child{grid-column:1/-1}
/* Full available banner frame. Machine assets and photographic scenes remain
   fully visible; a softened extension fills gaps around wide scene photos. */
.page-hero .page-hero-photo,.about-hero .page-hero-photo{position:relative;overflow:hidden}
.page-hero .page-hero-photo img,.about-hero .page-hero-photo img{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;
  min-width:0;min-height:0;box-sizing:border-box;padding:clamp(8px,1vw,16px);
  object-fit:contain;object-position:center;background:transparent
}
.page-hero .page-hero-photo img[src^="/assets/generated/"],
.about-hero .page-hero-photo img[src^="/assets/generated/"]{
  inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);
  padding:0;object-fit:contain;object-position:center;filter:none;z-index:1
}
.page-hero .page-hero-photo[style*="--hero-scene"]:before{
  content:"";position:absolute;inset:-8%;z-index:0;
  background-image:var(--hero-scene);background-size:cover;background-position:center;
  filter:blur(26px) saturate(.72);opacity:.48;transform:scale(1.05);mask-image:none
}
.special-machines-hero .page-hero-photo{
  background:radial-gradient(circle at 46% 45%,#fffcf4 0 18%,#f6ecd9 58%,#e8c99e 100%)
}
.special-machines-hero .page-hero-photo img{
  position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);
  max-width:none;max-height:none;padding:0;object-fit:contain;object-position:center;
  filter:drop-shadow(0 14px 13px #29443c24)
}
.machine-application-list{padding:0;margin:0 0 36px;list-style:none;display:grid;gap:12px}
.machine-application-list li{padding:12px 0 12px 22px;border-bottom:1px solid #dfe8e2;border-left:4px solid #d4974b;font-size:1.03rem;line-height:1.6}
/* Preserve every word in the supplied integration diagrams while warming their white canvas. */
.integration-layout .integration-gallery img{background:transparent;mix-blend-mode:multiply}
.contact-hero .page-hero-photo{background:#f2e5cf}
.contact-hero .page-hero-photo img{object-position:center}
@media(max-width:980px){
  .machine-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .machine-card,.machine-card:first-child{display:flex;flex-direction:column}
  .machine-card-photo,.machine-card:first-child .machine-card-photo{height:285px;min-height:0}
}
@media(max-width:760px){
  .machine-grid{grid-template-columns:1fr}
  .machine-card-photo,.machine-card:first-child .machine-card-photo{height:300px;min-height:0}
  .machine-gallery-image,.machine-gallery-image:not(:first-child){height:clamp(225px,56vw,310px);min-height:0}
  .special-machines-home .card-image{height:clamp(230px,68vw,290px)}
}

/* 03 Oct: correct opaque white IMM product photos within their existing cards.
   The link and its image must share the studio backdrop for multiply blending. */
.model-photo:has(img.white-studio),
.model-detail-visual:has(img.white-studio){isolation:auto}
.model-photo:has(img.white-studio) .robot-drawing-link,
.model-detail-visual:has(img.white-studio) .robot-drawing-link{
  isolation:auto;background:radial-gradient(circle at 47% 43%,#fff 0%,#f0ede3 63%,#dfede8 100%)
}
.model-photo img.white-studio,.model-detail-visual img.white-studio{
  mix-blend-mode:multiply!important;background:transparent!important
}
/* Match the customised catalogue card to the other brochure photo stages. */
.customised-card .card-image{
  background:radial-gradient(circle at 47% 43%,#fff 0%,#f0ede3 63%,#dfede8 100%)
}
/* Put the machine photography across the content width, below the information.
   Images retain contain sizing so no equipment is cropped. */
.machine-detail-layout{grid-template-columns:minmax(0,1fr);gap:clamp(34px,4vw,62px)}
.machine-detail-copy{width:100%;max-width:1120px}
.machine-gallery{width:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,26px);order:0}
.machine-gallery-image:first-child{grid-column:1/-1;height:clamp(430px,52vw,700px)}
.machine-gallery-image:not(:first-child){grid-column:auto;height:clamp(310px,34vw,500px)}
.machine-gallery:has(> .machine-gallery-image:only-child) .machine-gallery-image{
  grid-column:1/-1;height:clamp(430px,54vw,760px)
}
.machine-gallery-image img,.machine-gallery-image:not(:first-child) img{
  inset:16px;width:calc(100% - 32px);height:calc(100% - 32px);
  object-fit:contain;object-position:center
}
@media(max-width:760px){
  .machine-detail-layout{grid-template-columns:minmax(0,1fr);gap:24px}
  .machine-gallery{grid-template-columns:minmax(0,1fr);order:0}
  .machine-gallery-image:first-child,.machine-gallery-image:not(:first-child),
  .machine-gallery:has(> .machine-gallery-image:only-child) .machine-gallery-image{
    grid-column:1;height:clamp(300px,75vw,450px)
  }
}