/* Official SIMOTECH logo and image adjustments */
.brand img{display:block;width:174px;height:auto}.footer-logo img{width:180px}.footer-brand .brand small{display:none}
.hero{min-height:0!important;background:#071d18;line-height:0;position:relative;overflow:hidden}.hero:before,.hero-shade,.hero-inner{display:none}.hero-banner-art{width:100%;height:auto;display:block}.hero-hotspot{position:absolute;z-index:3;display:block;border-radius:7px}.hero-hotspot.product-link{left:5.1%;top:73.5%;width:14.4%;height:10.5%}.hero-hotspot.consult-link{left:20.4%;top:73.5%;width:14.3%;height:10.5%}.hero-hotspot:focus-visible{outline:4px solid #ffd34e}
.why-photo img{object-position:center;width:100%;height:100%;object-fit:cover}.why-photo:after{background:linear-gradient(90deg,rgba(4,25,20,.2),transparent)}
.product-visual{display:block;width:100%;height:100%;object-fit:cover;background:none}.industry-img{display:block;width:100%;height:150px;object-fit:cover;background:none}
.oil-visual{position:relative;overflow:hidden;min-height:210px}.oil-visual .product-visual{position:absolute;inset:0}
.cta{padding:0;background:#073623;position:relative;overflow:hidden;min-height:260px;color:#fff}.cta:before{display:none}.cta-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.cta:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,28,20,.72) 0%,rgba(4,63,38,.34) 46%,rgba(3,26,20,.08) 72%)}.cta>.cta-content{position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between;min-height:260px;line-height:1.3}.cta-content h2{font-size:clamp(2rem,3.5vw,3.5rem);margin:0}.cta-content p{margin:8px 0 0}.cta-content .btn-light{background:#fff;color:#17382c;white-space:nowrap}
.advantages{margin-top:-18px}
.logo-heading{display:flex;align-items:center;gap:.22em;flex-wrap:wrap}.logo-heading .heading-logo{display:inline-flex;align-items:center;gap:.04em}.logo-heading .heading-logo img{width:auto;height:.72em;max-width:none}.logo-heading .heading-logo b{font:inherit;color:var(--green);line-height:1}.dark-benefits .logo-heading .heading-logo img{filter:none}
.art-copy{position:absolute;z-index:4;left:0;top:0;bottom:0;width:48%;display:flex;flex-direction:column;justify-content:center;padding:4.5% 5.2%;line-height:1.2;color:#fff;background:linear-gradient(90deg,#071d18 0%,rgba(7,29,24,.98) 68%,rgba(7,29,24,.08) 100%)}.art-copy small{font-weight:700;letter-spacing:.2em}.art-copy h1{margin:12px 0 14px;font:800 clamp(3.2rem,5.2vw,6.2rem)/.82 "Barlow Condensed",Arial,sans-serif}.art-copy h1 em{display:block;color:#08d765;font-style:italic}.art-copy p{max-width:650px;margin:0;font-size:clamp(.9rem,1.35vw,1.35rem);line-height:1.35}.art-copy__features{display:flex;gap:20px;margin:24px 0 20px}.art-copy__features span{max-width:135px;padding-left:13px;border-left:3px solid var(--green);font-size:.78rem;font-weight:700}.art-copy__actions{display:flex;gap:12px}.art-copy__actions .btn-outline{border-color:#fff;color:#fff;background:rgba(0,0,0,.24)}.art-breadcrumb{margin-bottom:20px!important;font-size:.78rem!important}.art-breadcrumb a{color:inherit}.art-copy--product,.art-copy--industry{width:48%;padding-top:4%;padding-bottom:4%}.art-copy--product h1,.art-copy--industry h1{font-size:clamp(3rem,5vw,5.7rem)}.banner-copy{position:absolute;z-index:4;inset:0;display:flex;align-items:center;justify-content:space-between;padding:1.5% 6%;line-height:1.25;color:#fff;background:linear-gradient(90deg,#073b29 0%,rgba(7,59,41,.98) 70%,rgba(7,59,41,.78) 83%,rgba(7,59,41,.04) 100%)}.banner-copy h2{margin:0;font:800 clamp(1.7rem,3vw,3rem)/1 "Barlow Condensed",Arial,sans-serif}.banner-copy h2 em{color:#08df6c;font-style:italic}.banner-copy p{margin:6px 0 0}.banner-copy .btn-light{background:#fff;color:#10213d;white-space:nowrap}.solutions-banner__english{position:absolute;z-index:3;left:6%;bottom:3%;width:52%;margin:0;padding:6px 10px;background:#071b17;color:#fff;font-size:clamp(.72rem,1.5vw,1.05rem);line-height:1.3}
@media(max-width:850px){.hero{min-height:0!important}.product-visual{height:100%;object-fit:cover}.brand img{width:150px}.oil-visual{min-height:230px}}
@media(max-width:850px){.art-copy{width:60%;padding:5% 4%}.art-copy__features{display:none}.art-copy h1{font-size:clamp(2.8rem,8vw,4.8rem)}.art-copy__actions .btn{padding:8px 12px;font-size:.75rem}.banner-copy{padding:2% 4%}.banner-copy p{font-size:.78rem}}
@media(max-width:560px){.hero{min-height:520px!important}.hero-banner-art{width:100%;height:520px;max-width:100%;object-fit:cover;object-position:68% center}.art-copy{inset:0 0 auto 0;width:100%;height:62%;justify-content:flex-start;padding:36px 22px;background:linear-gradient(180deg,#071d18 0%,rgba(7,29,24,.97) 72%,rgba(7,29,24,.08) 100%)}.art-copy small{font-size:.58rem}.art-copy h1{font-size:3.35rem;margin:8px 0 10px}.art-copy p{font-size:.82rem;max-width:330px}.art-copy__actions{margin-top:16px;flex-wrap:wrap}.art-copy--product,.art-copy--industry{height:66%}.product-hero__art,.industry-hero__art{height:520px;object-fit:cover;object-position:70% center}.banner-copy{padding:16px 20px;background:linear-gradient(90deg,#073b29 0%,rgba(7,59,41,.94) 70%,rgba(7,59,41,.24) 100%)}.banner-copy h2{font-size:1.55rem}.banner-copy p{display:none}.banner-copy .btn{padding:8px 10px;font-size:.7rem}.product-cta__art,.industry-cta__art,.about-cta img{min-height:150px;object-fit:cover}.solutions-banner__english{left:6%;right:45%;bottom:4%;font-size:.7rem}.product-visual{height:180px}.advantages{margin-top:14px}.logo-heading{gap:.16em}.logo-heading .heading-logo img{height:.68em}.oil-visual{height:260px}.cta{min-height:330px}.cta>.cta-content{min-height:330px;display:grid;align-content:center;gap:22px;padding-right:28%}.cta-content h2{font-size:2.15rem}}
@media(min-width:1101px){.industry-grid{grid-template-columns:repeat(4,1fr)}}

/* CTA: keep the button next to the headline so it does not cover the SIMOTECH drum */
@media(min-width:561px){.cta>.cta-content{display:grid;justify-items:start;align-content:center;gap:22px;padding:36px 30% 36px 0}.cta-art{object-position:right center}}

/* Section-head subtitle style must not shrink the logo heading */
.section-head .logo-heading span{font-size:inherit;letter-spacing:normal;color:inherit}
.section-head.light .logo-heading{color:#fff}

/* Desktop: slightly larger text (base 16px -> 17px). Every rem/em size scales with it. Tablet/mobile unchanged. */
@media(min-width:1101px){html{font-size:106.25%}body{font-size:1rem}}
/* Keep slide-in animations and wide banners from creating sideways scroll on phones */
main{overflow-x:clip}

/* Language switcher (EN | ID) — injected by js/i18n.js */
/* Desktop: switch sits inside the menu, just before the Contact Us button */
@media(min-width:851px){.site-header nav .lang-switch{margin-left:0}.nav-wrap .brand{flex-shrink:0}}
.lang-switch{display:inline-flex;align-items:center;flex:0 0 auto;margin-left:18px;padding:3px;border:1px solid var(--line);border-radius:999px;background:#fff}
.lang-switch button{min-width:38px;height:30px;padding:0 10px;border:0;border-radius:999px;background:transparent;color:var(--muted);font:700 .78rem/1 Inter,Arial,sans-serif;letter-spacing:.04em;cursor:pointer;transition:background .2s,color .2s}
.lang-switch button:hover{color:var(--green2)}
.lang-switch button.active{background:var(--green2);color:#fff}
@media(max-width:850px){.nav-wrap .brand{min-width:0;margin-right:8px}.nav-wrap .lang-switch{order:2;margin-left:auto;margin-right:4px}.nav-wrap .search-trigger{order:3}.nav-wrap .menu-toggle{order:4}.lang-switch button{min-width:32px;height:28px;padding:0 8px;font-size:.72rem}}
@media(max-width:560px){.product-cta .banner-copy,.industry-cta .banner-copy,.about-cta .banner-copy{flex-direction:column;align-items:flex-start;justify-content:center;gap:12px}.product-cta__art,.industry-cta__art,.about-cta img{min-height:210px}}

/* Contact page: same header as the rest of the site, and banners that keep their text readable on phones */
.contact-page .nav-wrap{max-width:none}
.contact-page .site-header nav{gap:27px;font-size:.9rem}
.contact-page .site-header nav>a.active{color:inherit}
@media(min-width:851px){.contact-page .nav-wrap{justify-content:flex-start}.contact-page .nav-wrap .search-trigger{order:1;margin-left:auto;margin-right:12px}.contact-page .nav-wrap>nav{order:2}}
@media(max-width:850px){
  .contact-page .contact-hero img{height:190px;object-fit:cover;object-position:left center}
}
@media(max-width:480px){
  .nav-wrap .brand small{white-space:nowrap;font-size:.44rem;letter-spacing:.12em}
  .contact-page .nav-wrap .search-trigger{width:34px;height:34px}
  .contact-page .nav-wrap .search-trigger svg{width:22px;height:22px}
  .contact-page .nav-wrap .brand img{width:132px}
  .contact-page .lang-switch button{min-width:30px;padding:0 7px}
}

/* Contact page — solutions banner: on phones the image (text baked in) is replaced by real HTML text, so nothing gets cut off */
.solutions-banner__mobile{display:none}
@media(max-width:850px){
  .contact-page .solutions-banner>img,.contact-page .solution-hotspot,.contact-page .solutions-banner__english{display:none}
  .contact-page .solutions-banner__mobile{display:block;position:relative;overflow:hidden;padding:34px 20px 26px;line-height:1.3;color:#fff;
    background:linear-gradient(90deg,rgba(7,27,23,.97) 0%,rgba(7,27,23,.9) 55%,rgba(7,27,23,.55) 100%),url('../assets/images/13-artikel-metalworking-coolant-hd.png') right center/cover no-repeat}
  .contact-page .solutions-banner__mobile::before{content:"";position:absolute;top:-20px;left:-30px;width:70px;height:150px;background:linear-gradient(135deg,#0fa84a,#0b6e33);transform:skewX(-30deg);opacity:.9}
  .contact-page .solutions-banner__mobile h2{position:relative;margin:0;font:800 clamp(2rem,10vw,2.8rem)/.95 "Barlow Condensed",Arial,sans-serif;text-transform:uppercase}
  .contact-page .solutions-banner__mobile h2>*{display:block}
  .contact-page .solutions-banner__mobile h2 em{font-style:normal;color:#19d865}
  .contact-page .sbm-bar{display:block;width:60px;height:4px;margin:14px 0 20px;border-radius:2px;background:#19d865}
  .contact-page .sbm-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .contact-page .sbm-links a{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;color:#fff}
  .contact-page .sbm-icon{width:58px;height:58px;display:grid;place-items:center;border-radius:50%;border:2px solid #19d865;background:rgba(15,168,74,.18);box-shadow:0 0 18px rgba(25,216,101,.35);color:#fff;transition:background .2s}
  .contact-page .sbm-links a:hover .sbm-icon,.contact-page .sbm-links a:focus-visible .sbm-icon{background:#0fa84a}
  .contact-page .sbm-icon svg{width:28px;height:28px}
  .contact-page .sbm-links b{font:600 .8rem/1.25 Inter,Arial,sans-serif}
  .contact-page .solutions-banner__mobile p{margin:20px 0 0;font-size:.88rem;color:#d7e3de}
}
/* Contact page header on narrow phones: extra search icon leaves no room for the tagline */
@media(max-width:480px){.contact-page .nav-wrap .brand small{display:none}}
/* Any page, very narrow phones: never let the tagline run under the buttons */
@media(max-width:850px){.nav-wrap .brand{overflow:hidden}.nav-wrap .brand small{overflow:hidden;text-overflow:clip}}
@media(max-width:360px){.nav-wrap .brand small{display:none}}
/* Contact page — top banner: on phones the text is real HTML over the pipes photo (the image has the text baked in) */
.contact-hero__mobile{display:none}
@media(max-width:850px){
  .contact-page .contact-hero{position:relative}
  .contact-page .contact-hero>img{display:none}
  .contact-page .nav-wrap .search-trigger{margin-left:0}
  .contact-page .contact-hero__mobile{display:flex;flex-direction:column;justify-content:center;min-height:180px;padding:28px 20px;line-height:1.2;color:#fff;
    background:linear-gradient(90deg,rgba(10,16,15,.97) 0%,rgba(10,16,15,.93) 62%,rgba(10,16,15,.5) 100%),url('../assets/images/kontak/hero-kontak-mobile.jpg') right center/cover no-repeat,#10171a;position:relative;overflow:hidden}
  .contact-page .contact-hero__mobile::after{content:"";position:absolute;right:-40px;bottom:-10px;width:120px;height:120px;background:linear-gradient(135deg,#19d865,#0b6e33);transform:skewX(-35deg);opacity:.9}
  .contact-page .contact-hero__mobile strong{position:relative;z-index:1;font:800 clamp(2.2rem,11vw,3rem)/1 "Barlow Condensed",Arial,sans-serif;letter-spacing:.01em;text-transform:uppercase}
  .contact-page .contact-hero__mobile span{position:relative;z-index:1;margin-top:8px;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:#e3ece8}
  .contact-page .contact-hero__mobile i{position:relative;z-index:1;display:block;width:50px;height:4px;margin-top:14px;border-radius:2px;background:#19d865}
}

/* Footer: neat Contact column — same line icons, text aligned next to the icon */
.footer-contact .fc-item{display:grid;grid-template-columns:18px minmax(0,1fr);column-gap:10px;align-items:start;line-height:1.5;color:inherit}
.footer-contact .fc-item svg{width:18px;height:18px;margin-top:2px;color:#19d865}
.footer-contact .fc-item span{overflow-wrap:anywhere}
.footer-contact a.fc-item:hover{color:#fff}
.footer-contact a.fc-item:hover span{text-decoration:underline;text-underline-offset:3px}
@media(min-width:1101px){.footer-grid{grid-template-columns:1.25fr .8fr .8fr 1.75fr .6fr}}
.footer-contact .addr-line{display:block}

/* Service cards: images always fill the card width */
.service-card__image{width:100%}
.service-card__image img{display:block;width:100%;height:100%;object-fit:cover}

/* Home hero banner (2026): photo on the right, text and buttons in HTML on the dark left side */
.hero--banner .art-copy{width:52%;padding:0 0 0 4.9%;background:none;justify-content:center}
.hero--banner .art-copy small{font-size:clamp(.62rem,.95vw,.95rem);font-weight:500;letter-spacing:.32em;opacity:.92}
.hero--banner .art-copy h1{margin:1.1vw 0 1.3vw;font:800 clamp(2.4rem,6.9vw,8.4rem)/.86 "Barlow Condensed",Arial,sans-serif;letter-spacing:.005em;text-transform:uppercase}
.hero--banner .art-copy h1 em{display:block;color:#1ee06a;font-style:italic;background:linear-gradient(180deg,#39f07f 0%,#12b24f 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-right:.08em;text-shadow:none;filter:drop-shadow(0 3px 10px rgba(0,0,0,.45))}
.hero--banner .art-copy p{max-width:none}
.hero--banner .hero-lines{margin:0;white-space:nowrap;font:700 italic clamp(.95rem,2.05vw,2.05rem)/1.2 Inter,Arial,sans-serif;color:#fff}
.hero--banner .hero-sub{margin:.3vw 0 0;font-size:clamp(.88rem,1.75vw,1.75rem);line-height:1.3;color:#e3ebe7}
.hero--banner .art-copy__actions{margin-top:clamp(18px,2.1vw,40px);gap:clamp(10px,1.3vw,24px);flex-wrap:wrap}
.hero--banner .art-copy__actions .btn{min-height:clamp(42px,3.9vw,72px);padding:0 clamp(16px,2.4vw,44px);font-size:clamp(.85rem,1.3vw,1.3rem);border-radius:8px}
.hero--banner .art-copy__actions .btn b{font-weight:400;margin-left:.6em}
.hero--banner .art-copy__actions .btn-outline{border:1.5px solid rgba(255,255,255,.85);background:rgba(0,0,0,.28);color:#fff;font-weight:500;min-width:clamp(140px,15vw,290px)}
@media(max-width:1100px){
  .hero--banner .hero-banner-art{height:clamp(400px,50vw,520px);object-fit:cover;object-position:78% center}
  .hero--banner .art-copy{width:62%;padding-right:3%;background:linear-gradient(90deg,rgba(9,14,13,.94) 0%,rgba(9,14,13,.82) 62%,rgba(9,14,13,0) 100%)}
  .hero--banner .art-copy h1{font-size:clamp(2.4rem,7vw,5rem)}
}
@media(max-width:560px){
  .hero--banner{display:flex;flex-direction:column;min-height:0!important;background:#0b1110}
  .hero--banner .art-copy{position:relative;z-index:2;order:-1;width:100%;height:auto;padding:30px 20px 26px;justify-content:flex-start;background:linear-gradient(160deg,#101a17 0%,#0b1110 60%)}
  .hero--banner picture{display:block}
  .hero--banner .hero-banner-art{height:auto;aspect-ratio:1057/710;object-fit:cover;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%);mask-image:linear-gradient(180deg,transparent 0,#000 16%)}
  .hero--banner .art-copy small{font-size:.6rem;letter-spacing:.24em}
  .hero--banner .art-copy h1{font-size:clamp(2.4rem,13.2vw,3.3rem);margin:10px 0 12px}
  .hero--banner .hero-lines{font-size:.92rem;white-space:normal}
  .hero--banner .hero-sub{font-size:.9rem;margin-top:4px}
  .hero--banner .art-copy__actions{margin-top:18px}
  .hero--banner .art-copy__actions .btn{min-height:44px;padding:0 18px;font-size:.88rem}
  .hero--banner .art-copy__actions .btn-outline{min-width:0}
}

/* Products page top banner (2026): photo on the right, text in HTML on the dark left side */
.product-hero--banner picture{display:block}
.product-hero--banner .product-hero__art{width:100%;height:auto;display:block}
.product-hero--banner .art-copy{width:46%;padding:0 0 0 5.1%;background:none;justify-content:center}
.product-hero--banner .art-breadcrumb{margin:0 0 1.2vw!important;font-size:clamp(.8rem,1.05vw,1.1rem)!important;opacity:.95}
.product-hero--banner .art-copy h1{margin:0 0 1.4vw;font:800 clamp(2.4rem,4.7vw,6.6rem)/.9 "Barlow Condensed",Arial,sans-serif;text-transform:uppercase;letter-spacing:.005em}
.product-hero--banner .art-copy h1 span{display:block}
.product-hero--banner .art-copy h1 em{display:block;font-style:italic;background:linear-gradient(180deg,#39f07f 0%,#12b24f 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-right:.08em}
.product-hero--banner .art-copy p:last-child{max-width:34vw;margin:0;font-size:clamp(.9rem,1.6vw,1.65rem);line-height:1.3;color:#eef3f0}
@media(max-width:1100px){
  .product-hero--banner .product-hero__art{height:clamp(380px,48vw,500px);object-fit:cover;object-position:80% center}
  .product-hero--banner .art-copy{width:66%;padding-right:6%;background:linear-gradient(90deg,rgba(12,16,14,.96) 0%,rgba(12,16,14,.9) 60%,rgba(12,16,14,0) 100%)}
  .product-hero--banner .art-copy p:last-child{max-width:none}
}
@media(max-width:560px){
  .product-hero--banner{display:flex;flex-direction:column;min-height:0!important;background:#0e1311}
  .product-hero--banner .art-copy{position:relative;z-index:2;order:-1;inset:auto;width:100%;height:auto;padding:28px 20px 22px;background:linear-gradient(160deg,#141c19 0%,#0e1311 60%)}
  .product-hero--banner .product-hero__art{height:auto;aspect-ratio:1198/736;object-fit:cover;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%);mask-image:linear-gradient(180deg,transparent 0,#000 16%)}
  .product-hero--banner .art-breadcrumb{font-size:.78rem!important;margin-bottom:10px!important}
  .product-hero--banner .art-copy h1{font-size:clamp(2.3rem,12.5vw,3.2rem);margin-bottom:12px}
  .product-hero--banner .art-copy p:last-child{font-size:.92rem}
}

@media(max-width:560px){.product-hero__crumb-hotspot{display:none}}

/* Home header — process photo (milling / turning / grinding): dark gradient on the left keeps the text readable */
.hero--photo::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,rgba(6,14,11,.94) 0%,rgba(6,14,11,.86) 34%,rgba(6,14,11,.45) 55%,rgba(6,14,11,0) 72%)}
.hero--photo::before{content:"";position:absolute;left:0;bottom:0;z-index:3;width:34%;height:6px;background:linear-gradient(90deg,#12b24f,rgba(18,178,79,0));display:block}
@media(max-width:1100px){.hero--photo .hero-banner-art{object-position:62% center}}
@media(max-width:560px){.hero--photo::after,.hero--photo::before{display:none}}

/* Industry page top banner (2026): machine photo on the right, text in HTML on the dark-green left panel */
.industry-hero--banner picture{display:block}
.industry-hero--banner .industry-hero__art{width:100%;height:auto;display:block}
.industry-hero--banner .art-copy{width:37%;padding:0 0 0 5.2%;background:none;justify-content:center}
.industry-hero--banner .art-breadcrumb{margin:0 0 1.2vw!important;font-size:clamp(.8rem,1.05vw,1.1rem)!important}
.industry-hero--banner .art-copy h1{margin:0 0 1.2vw;font:800 clamp(2.4rem,4.5vw,5.8rem)/.9 "Barlow Condensed",Arial,sans-serif;text-transform:uppercase}
.industry-hero--banner .art-copy h1 span{display:block}
.industry-hero--banner .art-copy h1 em{display:block;font-style:italic;color:#19d865}
.industry-hero--banner .art-copy p:last-child{margin:0;font-size:clamp(.9rem,1.35vw,1.4rem);line-height:1.35;color:#eef3f0}
@media(max-width:1100px){
  .industry-hero--banner .industry-hero__art{height:clamp(380px,46vw,480px);object-fit:cover;object-position:62% center}
  .industry-hero--banner .art-copy{width:56%;padding-right:4%;background:linear-gradient(90deg,rgba(11,30,24,.97) 0%,rgba(11,30,24,.9) 70%,rgba(11,30,24,0) 100%)}
  .industry-hero--banner .art-copy h1{font-size:clamp(2.4rem,6vw,4.4rem)}
}
@media(max-width:560px){
  .industry-hero--banner{display:flex;flex-direction:column;min-height:0!important;background:#0c211b}
  .industry-hero--banner .art-copy{position:relative;z-index:2;order:-1;inset:auto;width:100%;height:auto;padding:28px 20px 22px;background:#0c211b}
  .industry-hero--banner .industry-hero__art{height:auto;aspect-ratio:1369/724;object-fit:cover}
  .industry-hero--banner .art-breadcrumb{font-size:.78rem!important;margin-bottom:10px!important}
  .industry-hero--banner .art-copy h1{font-size:clamp(2.3rem,12.5vw,3.2rem);margin-bottom:12px}
  .industry-hero--banner .art-copy p:last-child{font-size:.92rem}
}

/* Industry — large service card: lighter shade so the photo stays visible; dark only right behind the text */
.service-card--large:after{background:linear-gradient(0deg,rgba(4,23,18,.9) 0%,rgba(4,23,18,.72) 28%,rgba(4,23,18,.3) 50%,rgba(4,23,18,0) 68%)!important}
.service-card--large .service-card__overlay{text-shadow:0 2px 10px rgba(0,0,0,.55)}
.service-card--large .service-tags span{text-shadow:none}

/* About page header on phones: text on white above, team photo below (faces stay visible) */
@media(max-width:560px){
  .about-hero{display:flex;flex-direction:column;background:#fff}
  .about-hero__mobile-copy{position:relative!important;inset:auto!important;order:-1;padding:28px 20px 18px!important;background:#fff!important}
  .about-hero__art{height:auto!important;aspect-ratio:4/3;object-fit:cover;object-position:74% 30%!important;transform:none!important}
}

/* Careers header: team photo on the right, text on the dark panel so no one is covered */
@media(min-width:861px){
  .career-hero .career-hero__art{left:40%!important;width:60%!important;object-position:45% 30%!important;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%);mask-image:linear-gradient(90deg,transparent 0,#000 14%)}
  .career-hero .art-copy{width:44%!important;background:none!important}
}
@media(max-width:860px){
  .career-hero{display:flex!important;flex-direction:column;min-height:0!important;background:#071d18}
  .career-hero .art-copy{position:relative!important;inset:auto!important;order:-1;width:100%!important;background:#071d18!important;padding:32px 22px 26px!important}
  .career-hero .career-hero__art{position:static!important;height:auto!important;aspect-ratio:16/10;object-position:40% 30%!important}
}

/* Contact page header (2026): milling photo; the title is HTML text on desktop too (translates EN/ID) */
@media(min-width:851px){
  .contact-page .contact-hero{position:relative}
  .contact-page .contact-hero>img{display:block;width:100%;height:auto}
  .contact-page .contact-hero__copy{display:flex;flex-direction:column;justify-content:center;position:absolute;left:0;top:0;bottom:0;width:50%;padding:0 0 0 6.2%;line-height:1.2;color:#fff;background:none}
  .contact-page .contact-hero__copy strong{font:800 clamp(2.6rem,4.6vw,5.4rem)/1 Inter,Arial,sans-serif;letter-spacing:-.01em;text-transform:uppercase}
  .contact-page .contact-hero__copy span{margin-top:1.1vw;font-size:clamp(1rem,1.9vw,2.1rem);font-weight:400;letter-spacing:.01em;text-transform:uppercase;color:#e8eeec}
  .contact-page .contact-hero__copy i{display:block;width:6.4vw;height:.65vw;min-height:4px;margin-top:2.4vw;background:#19b04b}
}


/* Contact page — solutions banner: real HTML text at every width (the old image had English text baked in) */
@media(min-width:851px){
  .contact-page .solutions-banner>img,.contact-page .solution-hotspot,.contact-page .solutions-banner__english{display:none}
  .contact-page .solutions-banner__mobile{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:56px;align-items:center;position:relative;overflow:hidden;padding:56px 6.2% 50px;line-height:1.3;color:#fff;
    background:linear-gradient(90deg,rgba(7,27,23,.97) 0%,rgba(7,27,23,.9) 50%,rgba(7,27,23,.45) 100%),url('../assets/images/kontak/hero-kontak.jpg') right center/cover no-repeat}
  .contact-page .solutions-banner__mobile h2{grid-row:1/3;margin:0;font:800 clamp(2.6rem,4vw,4rem)/.95 "Barlow Condensed",Arial,sans-serif;text-transform:uppercase}
  .contact-page .solutions-banner__mobile h2>*{display:block}
  .contact-page .solutions-banner__mobile h2 em{font-style:normal;color:#19d865}
  .contact-page .sbm-bar{display:none}
  .contact-page .sbm-links{display:flex;gap:40px}
  .contact-page .sbm-links a{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;color:#fff;min-width:120px}
  .contact-page .sbm-icon{width:72px;height:72px;display:grid;place-items:center;border-radius:50%;border:2px solid #19d865;background:rgba(15,168,74,.18);box-shadow:0 0 18px rgba(25,216,101,.35);transition:background .2s}
  .contact-page .sbm-links a:hover .sbm-icon,.contact-page .sbm-links a:focus-visible .sbm-icon{background:#0fa84a}
  .contact-page .sbm-icon svg{width:34px;height:34px}
  .contact-page .sbm-links b{font:600 .95rem/1.25 Inter,Arial,sans-serif}
  .contact-page .solutions-banner__mobile p{margin:18px 0 0;font-size:1rem;color:#d7e3de}
}

/* Pop-up windows (service, product, job, forms): never taller than the screen; scroll inside when content is long */
dialog[open]{max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain}
@media(min-width:768px){
  /* Service & product details: photo stays in place on the left, the text column scrolls */
  .service-detail-dialog[open],.product-dialog[open]{overflow:hidden}
  .service-detail-layout,.product-dialog__layout{max-height:calc(100dvh - 32px)}
  .service-detail-visual,.product-dialog__visual{min-height:0!important;height:auto;max-height:calc(100dvh - 32px)}
  .service-detail-visual img,.product-dialog__visual img{height:100%;max-height:calc(100dvh - 32px);object-fit:cover}
  .service-detail-content,.product-dialog__content{max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
  .service-detail-dialog .modal-close,.product-dialog .modal-close{z-index:3}
}

/* Close buttons (×) on all pop-ups: round white button, × drawn with CSS so it sits exactly in the center */
.modal-close,.search-close{width:44px;height:44px;padding:0;border:0;border-radius:50%;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.15);font-size:0!important;line-height:0;color:#111;cursor:pointer;display:block}
.modal-close::before,.modal-close::after,.search-close::before,.search-close::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:2.6px;border-radius:2px;background:currentColor}
.search-close{position:relative;flex:0 0 44px;align-self:center}
.modal-close::before,.search-close::before{transform:translate(-50%,-50%) rotate(45deg)}
.modal-close::after,.search-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.modal-close:hover,.search-close:hover{color:var(--green2,#10a64a)}
.modal-close:focus-visible,.search-close:focus-visible{outline:2px solid var(--green2,#10a64a);outline-offset:2px}
.modal-close{z-index:3}
@media(min-width:768px){.modal-close{right:16px;top:16px}}

/* Careers "Why join" heading: official SIMOTECH logo instead of typed text */
.career-heading__brand{display:inline-flex;align-items:baseline;white-space:nowrap}
.career-heading__brand img{height:.74em;width:auto;align-self:center;transform:translateY(.02em)}
.career-heading__brand em{margin-left:.06em}

/* Same layout in English and Indonesian: column widths no longer depend on how long the text is */
@media(min-width:851px){
  .stats-layout{grid-template-columns:minmax(0,1.15fr) minmax(0,3fr)}
  .stats-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(min-width:851px){
  .contact-page .solutions-banner__mobile{grid-template-columns:minmax(0,38%) minmax(0,1fr)}
  .contact-page .sbm-links{display:grid;grid-template-columns:repeat(3,150px);gap:24px}
  .contact-page .sbm-links a{min-width:0}
}
@media(min-width:1101px){.footer-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.8fr) minmax(0,.8fr) minmax(0,1.75fr) minmax(0,.6fr)}}
@media(min-width:761px){.career-page .job-card{grid-template-columns:minmax(0,1fr) 230px}.career-page .job-card .job-actions{justify-content:flex-end}}

/* Header on tablets / small laptops (851–1199px): keep the desktop menu on one line — no word ever wraps */
header nav>a,.nav-actions .btn,.lang-switch button{white-space:nowrap}
@media(min-width:851px) and (max-width:1199px){
  .nav-wrap{width:auto;max-width:none;padding:0 clamp(16px,2vw,24px);gap:clamp(10px,1.4vw,18px)}
  .nav-wrap .brand{flex-shrink:0}
  .nav-wrap .brand img,.industry-page .nav-wrap .brand img{width:clamp(118px,13.5vw,160px)}
  .industry-page .nav-wrap{width:auto}
  .contact-page .nav-wrap .search-trigger{margin-right:0;width:34px;height:34px}
  .nav-wrap .brand small{font-size:clamp(.36rem,.5vw,.44rem);letter-spacing:.1em;white-space:nowrap}
  header nav,.industry-page .site-header nav{gap:clamp(11px,1.55vw,24px);font-size:clamp(.76rem,.95vw,.88rem)}
  header nav>a{font-size:inherit}
  header nav .lang-switch{margin-left:clamp(0px,.6vw,8px)}
  .lang-switch button{min-width:32px;height:28px;padding:0 8px;font-size:.72rem}
  .nav-actions .btn{min-height:40px;padding:8px clamp(12px,1.4vw,20px);font-size:clamp(.78rem,.95vw,.9rem)}
}
@media(min-width:851px) and (max-width:959px){
  .contact-page header nav{gap:8px;font-size:.74rem}
  .contact-page .nav-wrap{gap:8px}
  .contact-page .nav-wrap .brand img{width:104px}
  .contact-page .nav-wrap{padding:0 12px}
  .contact-page .lang-switch button{min-width:28px;padding:0 6px}
  .contact-page .nav-actions .btn{padding:8px 10px}
}

/* Footer on tablets (600–1100px): logo row on top, then the four desktop columns side by side with room for the contact details */
.fc-item[data-company-phone-link],.fc-item[data-company-email-link],footer .footer-grid>div>a:not(.fc-item){white-space:nowrap}
@media(min-width:600px) and (max-width:1100px){
  .footer-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.9fr) auto!important;gap:28px 24px}
  .footer-brand{grid-column:1/-1!important}
}
/* Buttons keep their label on one line */
.btn{white-space:nowrap}

/* Home "Metalworking Oil" card: show the whole drum and sample flask at every width (white studio photo blends into the card) */
.product-visual[src*="home-metalworking-oil"]{object-fit:contain;background:#fbfbfb}