@font-face{font-family:'Roboto Condensed';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/roboto-condensed-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Roboto Condensed';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/roboto-condensed-cyrillic-500-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Roboto Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/roboto-condensed-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Roboto Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/roboto-condensed-cyrillic-600-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Roboto Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/roboto-condensed-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Roboto Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/roboto-condensed-cyrillic-700-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/inter-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/inter-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/inter-cyrillic-400-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/inter-cyrillic-ext-400-normal.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/inter-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/inter-latin-ext-500-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/inter-cyrillic-500-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/inter-cyrillic-ext-500-normal.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/inter-latin-600-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/inter-latin-ext-600-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/inter-cyrillic-600-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/inter-cyrillic-ext-600-normal.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/inter-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/inter-latin-ext-700-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/inter-cyrillic-700-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/inter-cyrillic-ext-700-normal.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/jetbrains-mono-cyrillic-400-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/jetbrains-mono-cyrillic-500-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
/* ============ SELF-HOSTED FONTS ============
   Served from this domain instead of fonts.gstatic.com: no visitor IP is sent
   to Google (LG München 3 O 17493/20) and the render-blocking round trip to
   Google's CSS endpoint disappears. Subsets: latin + latin-ext, which together
   cover Polish, Romanian, Turkish and every other language on this site. */
/* ============================================================
   CNC SPINDLE SERVICE — Design tokens
   Palette: Deep industrial blue + steel navy + light precision gray
   Type: Barlow Semi Condensed (display/technical) + Inter (body) + JetBrains Mono (data)
   ============================================================ */
:root{
  --blue-900:#062b52;
  --blue-800:#0a3d70;
  --blue-700:#0d4c8a;
  --blue-600:#1364ad;
  --blue-500:#1e7fd8;
  --blue-400:#4b9de8;
  --blue-100:#e6f0fb;
  --steel-900:#1a2230;
  --steel-700:#2b3646;
  --steel-500:#5b6b80;
  --gray-100:#f4f7fb;
  --gray-200:#e9eef4;
  --white:#ffffff;
  --amber:#f2a93b;
  --ok:#2fa66a;

  --font-display:'Roboto Condensed', 'Arial Narrow', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  --radius:10px;
  --radius-lg:18px;
  --shadow-sm:0 2px 8px rgba(6,43,82,.08);
  --shadow-md:0 10px 30px rgba(6,43,82,.14);
  --shadow-lg:0 20px 50px rgba(6,43,82,.22);
  --container:calc(1240px + 4cm);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--steel-700);
  background:var(--white);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
  word-break:break-word;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--blue-900);margin:0 0 .4em;font-weight:600;letter-spacing:.5px;line-height:1.15;}
h1{font-size:clamp(2.4rem,5vw,4.2rem);text-transform:uppercase;letter-spacing:.5px;}
h2{font-size:clamp(1.9rem,3.4vw,2.7rem);text-transform:uppercase;}
h3{font-size:1.3rem;text-transform:uppercase;}
h4{font-size:1.05rem;text-transform:uppercase;color:var(--blue-700);}
p{margin:0 0 1em;}
.container{max-width:var(--container);margin:0 auto;padding:0 24px;}
.eyebrow{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--blue-600);
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--amber);display:inline-block;}
.section{padding:88px 0;}
.section-lead{max-width:720px;margin:0 0 48px;color:var(--steel-500);font-size:1.08rem;}
#brands .section-lead,#services .section-lead,#about .section-lead,#countries .section-lead,#gallery .section-lead,#types .section-lead,#problems .section-lead,#why .section-lead{max-width:none;}
#about .section-lead{font-size:1rem;color:var(--steel-700);}
#contact .section-lead{margin-bottom:1.5cm;}
@media(max-width:600px){
  #contact .section-lead{margin-bottom:calc(48px - 1cm);}
}
#services .section-lead{margin-bottom:24px;}
@media(max-width:600px){
  #services .section-lead{margin-bottom:24px;}
}
@media(min-width:961px){
  #contact{padding-top:calc(88px - 2cm);}
  #problems{padding-bottom:calc(88px - 2cm);}
  #services{padding-top:calc(88px - 2cm);}
}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:12px;}

/* focus visibility */
a:focus,button:focus,input:focus,textarea:focus,select:focus{outline:none;}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--amber); outline-offset:2px;
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 26px;border-radius:6px;font-family:var(--font-display);
  font-size:1.05rem;letter-spacing:.5px;text-transform:uppercase;
  border:2px solid transparent;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;
}
.btn-primary{background:var(--amber);color:var(--blue-900);}
.btn-primary:hover{transform:translateY(-2px);}
.btn-outline{border-color:rgba(255,255,255,.55);color:#fff;background:transparent;}
.btn-outline:hover{background:rgba(255,255,255,.12);transform:translateY(-2px);}
.btn-ghost{border-color:var(--blue-600);color:var(--blue-700);background:#fff;}
.btn-ghost:hover{background:var(--blue-700);color:#fff;transform:translateY(-2px);}

/* ============ TOPBAR / HEADER ============ */
.topbar{background:var(--steel-900);color:#cfd9e6;font-family:var(--font-mono);font-size:.8rem;}
.topbar .container{display:flex;justify-content:space-between;align-items:center;padding-top:8px;padding-bottom:8px;flex-wrap:wrap;gap:6px;}
.topbar-left span{margin-right:18px;}
.topbar-right a{margin-left:18px;color:#e9eef4;transition:color .15s;}
.topbar-right a:hover{color:var(--amber);}

.site-header{
  position:sticky;top:0;z-index:80;
  background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--gray-200);
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding-top:11px;padding-bottom:11px;gap:clamp(10px,1.2vw,20px);position:relative;flex-wrap:nowrap;min-width:0;}

/* ---- Primary nav menu ---- */
.main-nav{
  position:absolute;top:100%;left:50%;
  width:100vw;max-width:100vw;
  transform:translateX(-50%);
  background:#fff;border-bottom:1px solid var(--gray-200);box-shadow:var(--shadow-md);
  max-height:0;overflow:hidden;transition:max-height .3s ease;
  box-sizing:border-box;
}
.main-nav ul{display:flex;flex-direction:column;padding:6px 24px 12px;max-width:var(--container);margin:0 auto;box-sizing:border-box;}
.main-nav a{display:block;padding:14px 4px;border-bottom:1px solid var(--gray-200);font-family:var(--font-mono);font-size:1rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--steel-700);transition:color .15s;}
.main-nav a:hover{color:var(--blue-600);}
.main-nav li:last-child a{border-bottom:none;}
.main-nav.open{max-height:520px;}

.menu-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;background:none;border:1.5px solid var(--gray-200);border-radius:6px;
  cursor:pointer;color:var(--blue-800);flex-shrink:0;transition:border-color .15s,background .15s;
}
@media(hover:hover){
  .menu-toggle:hover{border-color:var(--blue-400);background:var(--blue-100);}
}
.menu-toggle .icon-close{display:none;}
.menu-toggle.open .icon-burger{display:none;}
.menu-toggle.open .icon-close{display:block;}

/* ---- Language Switcher ---- */
.lang-switcher{position:relative;display:none;flex:0 0 auto;}
@media(min-width:1200px){.lang-switcher{display:inline-block;margin-left:clamp(4px,0.6vw,14px);}}
.lang-current{
  display:inline-flex;align-items:center;gap:8px;
  background:none;border:1.5px solid var(--gray-200);border-radius:6px;
  padding:9px 14px;cursor:pointer;color:var(--blue-800);
  font-family:var(--font-mono);font-size:.82rem;letter-spacing:.5px;text-transform:uppercase;
  white-space:nowrap;flex:0 0 auto;
  transition:border-color .15s,background .15s;
}
.lang-current:hover{border-color:var(--blue-400);background:var(--blue-100);}
.lang-current img{width:20px;height:14px;border-radius:2px;display:block;object-fit:cover;}
.lang-current svg{transition:transform .2s ease;}
.lang-switcher.open .lang-current svg{transform:rotate(180deg);}
.lang-menu{
  position:absolute;top:calc(100% + 8px);right:0;min-width:170px;
  background:#fff;border:1px solid var(--gray-200);border-radius:8px;box-shadow:var(--shadow-md);
  padding:6px;display:none;flex-direction:column;gap:2px;z-index:90;
}
.lang-switcher.open .lang-menu{display:flex;}
.lang-menu a{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:6px;
  font-family:var(--font-body);font-size:.9rem;color:var(--steel-700);transition:background .15s;
}
.lang-menu a:hover{background:var(--blue-100);color:var(--blue-700);}
.lang-menu a.active{background:var(--blue-100);color:var(--blue-700);font-weight:600;}
.lang-menu img{width:20px;height:14px;border-radius:2px;object-fit:cover;flex-shrink:0;}

/* Mobile language block inside hamburger dropdown */
.lang-mobile{display:none;}
@media(max-width:1199px){
  .lang-mobile{
    display:block;margin-top:16px;padding-top:16px;border-top:1px solid var(--gray-200);
  }
  .lang-mobile .lang-heading{
    font-family:var(--font-mono);font-size:.72rem;letter-spacing:1.2px;text-transform:uppercase;
    color:var(--steel-500);margin:0 4px 10px;font-weight:600;
  }
  .lang-mobile-grid{display:flex;flex-wrap:wrap;gap:6px;}
  .lang-mobile-grid a{
    display:flex;align-items:center;justify-content:center;padding:3px;border-radius:4px;
    -webkit-tap-highlight-color:transparent;outline:none;
  }
  .lang-mobile-grid a.active img{box-shadow:0 0 0 2px var(--blue-500);border-radius:5px;}
  .lang-mobile-grid img{width:28px;height:19px;border-radius:3px;object-fit:cover;flex-shrink:0;display:block;}
}

/* ---- Desktop "Menu" dropdown trigger (between logo and contact info) ---- */
.menu-trigger-desktop{
  display:none;align-items:center;gap:8px;
  background:none;border:1.5px solid var(--gray-200);border-radius:6px;
  padding:9px 16px;cursor:pointer;color:var(--blue-800);
  font-family:var(--font-mono);font-size:.85rem;letter-spacing:1px;text-transform:uppercase;
  white-space:nowrap;flex:0 0 auto;
  transition:border-color .15s,background .15s;
}
.menu-trigger-desktop:hover{border-color:var(--blue-400);background:var(--blue-100);}
.menu-trigger-desktop .chevron-bounce{animation:chevron-float 1.6s ease-in-out infinite;}
.menu-trigger-desktop.open .chevron-bounce{animation:none;transform:rotate(180deg);}
@keyframes chevron-float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(4px);}
}
.main-nav.nav-compact{
  left:auto;right:auto;width:max-content;max-width:320px;transform:none;
  border-radius:8px;border:1px solid var(--gray-200);
}
.main-nav.nav-compact ul{max-width:none;margin:0;padding:8px 4px;}
.main-nav.nav-compact a{padding:13px 22px;white-space:nowrap;font-size:1.05rem;font-weight:700;text-align:left;}
.main-nav.nav-compact.open{max-height:600px;}

.header-cta{display:none;}
@media(max-width:899px){
  .header-cta{display:none !important;}
  .menu-trigger-desktop{display:none !important;}
  .menu-toggle{display:inline-flex !important;}
}
@media(min-width:900px){
  .menu-toggle{display:none;}
  .menu-trigger-desktop{display:inline-flex;margin-left:clamp(8px,1.5vw,34px);}
}
@media(min-width:1200px){
  .header-cta{display:inline-flex;}
}
/* Full inline navigation only on screens genuinely wide enough for the
   longest translations (measured: Spanish needs ~2200px of header content once the
   two hub entries are in the bar). */
@media(min-width:2700px){
  .menu-trigger-desktop{display:none;}
  /* the header may use the full screen width here, the rest of the page stays centred */
  .site-header .container{max-width:none;padding-left:clamp(24px,2vw,56px);padding-right:clamp(24px,2vw,56px);}
  .main-nav{position:static;max-height:none;overflow:visible;box-shadow:none;background:none;border-bottom:none;
            width:auto;max-width:none;transform:none;flex:0 0 auto;}
  .main-nav ul{flex-direction:row;flex-wrap:nowrap;padding:0;margin:0;max-width:none;gap:clamp(10px,.8vw,18px);}
  .main-nav a{padding:0;border-bottom:none;white-space:nowrap;font-size:.74rem;}
  .menu-toggle{display:none;}
}
.logo{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.logo-mark{width:52px;height:52px;flex-shrink:0;}
.logo-mark .ring{animation:spin 14s linear infinite;transform-origin:26px 26px;}
.logo:hover .ring{animation-duration:2.2s;}
@keyframes spin{to{transform:rotate(360deg);}}
.logo-text{line-height:1.15;}
.logo-text .name{font-family:var(--font-display);font-weight:700;font-size:1.62rem;color:var(--blue-900);letter-spacing:.4px;text-transform:uppercase;white-space:nowrap;}
.logo-text .tag{font-family:var(--font-mono);font-size:.72rem;letter-spacing:1.6px;color:var(--blue-500);text-transform:uppercase;}
.header-contact{display:flex;align-items:center;gap:clamp(10px,1.1vw,22px);flex:0 0 auto;margin-left:auto;min-width:0;}
.header-contact a{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:clamp(.82rem,.62rem + .3vw,.92rem);color:var(--steel-700);transition:color .15s;white-space:nowrap;flex:0 0 auto;}
.header-contact .phone-placeholder{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:clamp(.82rem,.62rem + .3vw,.92rem);color:var(--steel-700);transition:color .15s;white-space:nowrap;flex:0 0 auto;}
.header-contact a:not(.btn):hover{color:var(--blue-600);}
.header-contact svg{color:var(--blue-600);}
.header-contact .btn-ghost:hover,.header-contact .btn-ghost:hover *{color:#fff !important;}

/* ============ HERO ============ */
.hero{
  position:relative;overflow:hidden;
  background:radial-gradient(1200px 600px at 80% -10%, var(--blue-700), var(--blue-900) 60%);
  color:#fff;padding:110px 0 90px;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom, black, transparent 85%);
  pointer-events:none;
}
.hero .container{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;}
@media(max-width:960px){.hero .container{grid-template-columns:1fr;}}
.hero-copy .eyebrow{color:var(--amber);}
.hero-copy .eyebrow::before{background:#fff;}
.hero h1{color:#fff;margin-bottom:.3em;}
.hero h1 em{font-style:normal;color:var(--amber);}
.hero-sub{color:#cfe0f5;font-size:1.15rem;max-width:560px;margin-bottom:32px;}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:0;}
.hero-visual{display:flex;flex-direction:column;align-items:center;}
.hero-stats{display:grid;grid-template-columns:repeat(3,auto);gap:22px;margin-top:18px;}
.hero-stats div{border-left:2px solid rgba(255,255,255,.25);padding-left:12px;}
.hero-stats b{display:block;font-family:var(--font-display);font-size:1.7rem;color:#fff;}
.hero-stats span{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.8px;text-transform:uppercase;color:#a9c3e0;}

@media(min-width:961px){
  .hero{padding-top:calc(110px - 1cm - 1.5cm);}
  .hero h1{font-size:clamp(2.28rem,4.75vw,3.99rem);}
  .gauge-wrap{transform:translateY(1cm);}
  .hero .container{align-items:stretch;}
  .hero-visual{height:100%;justify-content:flex-start;}
  .hero-stats{margin-top:auto;}
}

/* Spindle gauge - signature element */
.gauge-wrap{display:flex;justify-content:center;}
.spindle-gauge{width:100%;max-width:380px;filter:drop-shadow(0 20px 40px rgba(0,0,0,.35));}
@media(min-width:961px){
  .spindle-gauge{max-width:502px;}
}
.spindle-gauge .spin-slow{animation:spin 8s linear infinite;transform-origin:200px 200px;}
.spindle-gauge .spin-rev{animation:spin 11s linear infinite reverse;transform-origin:200px 200px;}
.spindle-gauge .needle{animation:sweep 4.5s ease-in-out infinite;transform-origin:200px 200px;}
@keyframes sweep{
  0%,100%{transform:rotate(-58deg);}
  50%{transform:rotate(58deg);}
}

/* ============ ABOUT ============ */
.about-copy h2{margin-bottom:14px;}
/* text left, photo right — photo column always as tall as the text */
#about > .container{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);column-gap:48px;align-items:stretch;}
#about > .container > .eyebrow{grid-column:1 / -1;}
.about-photo{position:relative;margin-top:0;min-height:420px;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);background:var(--gray-200);}
.about-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:75% 50%;display:block;}
@media(max-width:880px){
  #about > .container{display:block;}
  .about-photo{margin-top:28px;min-height:0;}
  .about-photo img{position:static;height:auto;aspect-ratio:4/3;object-position:50% 25%;}
}

/* ============ LAYOUT WITH SIDEBAR ============ */
.machines-wrap{background:var(--gray-100);}
.machines-grid{display:grid;grid-template-columns:280px 1fr;gap:40px;}
@media(max-width:880px){.machines-grid{grid-template-columns:1fr;}}
.brand-nav{
  background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-lg);
  padding:20px;align-self:start;position:sticky;top:96px;box-shadow:var(--shadow-sm);
}
.brand-nav h3{font-size:1rem;display:flex;align-items:center;gap:8px;color:var(--blue-800);margin-bottom:6px;}
.brand-nav p{font-family:var(--font-mono);font-size:.72rem;color:var(--steel-500);margin-bottom:14px;}
.brand-list{display:flex;flex-direction:column;gap:2px;max-height:520px;overflow-y:auto;padding-right:4px;}
.brand-list::-webkit-scrollbar{width:6px;}
.brand-list::-webkit-scrollbar-thumb{background:var(--gray-200);border-radius:3px;}
.brand-btn{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;text-align:left;background:none;border:none;cursor:pointer;
  padding:9px 10px;border-radius:6px;font-family:var(--font-body);font-size:.92rem;
  color:var(--steel-700);transition:background .15s,color .15s,padding-left .15s;
  border-left:3px solid transparent;
}
.brand-btn:hover{background:var(--blue-100);color:var(--blue-700);padding-left:14px;}
.brand-btn.active{background:var(--blue-100);color:var(--blue-700);border-left-color:var(--blue-600);font-weight:600;}
.brand-btn .count{font-family:var(--font-mono);font-size:.68rem;color:var(--steel-500);}
.brand-all{margin-top:12px;width:100%;}

.badge-row{display:flex;align-items:center;gap:10px;margin-bottom:22px;flex-wrap:wrap;}
.machines-panel .badge-current{
  display:inline-flex;align-items:center;gap:8px;background:var(--blue-700);color:#fff;
  padding:8px 16px;border-radius:30px;font-family:var(--font-mono);font-size:.78rem;letter-spacing:1px;margin-bottom:0;
}
.badge-clear{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;border:1.5px solid var(--gray-200);background:#fff;
  color:var(--steel-700);cursor:pointer;transition:border-color .15s,background .15s,color .15s;
}
.badge-clear:hover{border-color:#e0554f;background:#fdecec;color:#e0554f;}
.machine-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;}
.machine-card{
  background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);
  padding:18px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
  display:none;
}
.machine-card.show{display:block;}
.machine-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--blue-400);}
.machine-card .mc-top{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.machine-card svg{color:var(--blue-600);flex-shrink:0;}
.machine-card h4{margin:0;color:var(--blue-900);font-size:1rem;}
.machine-card p{font-size:.86rem;color:var(--steel-500);margin:0;}
.brand-fact-box{
  display:flex;gap:12px;align-items:flex-start;margin-top:22px;padding:18px 20px;
  background:var(--blue-100);border-radius:var(--radius);border-left:3px solid var(--amber);
}
.brand-fact-box svg{color:var(--blue-700);flex-shrink:0;margin-top:2px;}
.brand-fact-box p{font-size:.92rem;color:var(--blue-900);margin:0;line-height:1.55;}
.brand-fact-box p b{color:var(--blue-700);}

/* ============ SERVICE CARDS ============ */
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;}
.svc-card{
  background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-lg);
  padding:28px 24px;position:relative;overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.svc-card::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:4px;
  background:linear-gradient(90deg,var(--blue-500),var(--amber));
  transform:scaleX(0);transform-origin:left;transition:transform .3s ease;
}
.svc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:transparent;}
.svc-card:hover::after{transform:scaleX(1);}
.svc-card:hover h3{color:var(--blue-600);}
.svc-icon{
  width:54px;height:54px;border-radius:12px;background:var(--blue-100);color:var(--blue-700);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;transition:background .25s,color .25s,transform .25s;
}
.svc-card:hover .svc-icon{background:var(--blue-700);color:#fff;transform:rotate(-6deg) scale(1.06);}
.svc-card h3{font-size:1.15rem;margin-bottom:8px;transition:color .2s;letter-spacing:1.1px;font-weight:700;}
.svc-card p{color:var(--steel-500);font-size:.94rem;margin:0;}
/* icon left, title to the right of it; text and link below across the full card */
.svc-card{display:grid;grid-template-columns:54px minmax(0,1fr);column-gap:16px;align-content:start;}
.svc-card .svc-icon{grid-column:1;grid-row:1;margin-bottom:16px;align-self:center;}
.svc-card h3{grid-column:2;grid-row:1;align-self:center;margin:0 0 16px;line-height:1.2;}
.svc-card > :not(.svc-icon):not(h3){grid-column:1 / -1;}
@media(max-width:600px){
  .svc-card{grid-template-columns:46px minmax(0,1fr);column-gap:13px;}
  .svc-card .svc-icon{width:46px;height:46px;}
}

/* ============ PROCESS ============ */
.process-strip{background:var(--blue-900);color:#000;position:relative;}
.process-strip::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(900px 400px at 10% 0%, var(--blue-700), transparent 60%);
}
.process-strip .container{position:relative;}
.process-strip h2, .process-strip .eyebrow, .process-strip .section-lead{color:#fff;}
.process-strip .eyebrow::before{background:var(--amber);}
.process-strip .section-lead{color:#dce8f7;}
.process-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:step;position:relative;}
.p-step{
  background:#fff;border-radius:var(--radius);padding:32px 26px 28px;position:relative;
  transition:transform .2s ease,box-shadow .2s ease;margin:0 4px 0;
}
.p-step:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);}
.p-step .num{
  font-family:var(--font-display);font-size:3rem;color:var(--blue-100);
  -webkit-text-stroke:1.5px var(--blue-500);font-weight:700;line-height:1;margin-bottom:14px;
}
.p-step h3{color:var(--blue-800);margin-bottom:8px;font-size:1.2rem;letter-spacing:1px;font-weight:700;text-transform:uppercase;}
.p-step p{font-size:.95rem;color:var(--steel-500);margin:0;}

/* ============ WHY US ============ */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.why-card{
  display:flex;gap:16px;padding:28px 24px;border-radius:var(--radius);background:var(--gray-100);
  transition:background .2s,transform .2s;
}
.why-card:hover{background:var(--blue-100);transform:translateX(4px);}
.why-card svg{color:var(--blue-600);flex-shrink:0;width:32px;height:32px;}
.why-card h3{margin-bottom:6px;font-size:1.1rem;letter-spacing:1px;font-weight:700;text-transform:uppercase;}
.why-card p{font-size:.92rem;color:var(--steel-500);margin:0;}

/* ============ COUNTRIES ============ */
.countries-wrap{background:var(--blue-800);color:#000;}
.countries-wrap h2,.countries-wrap .eyebrow{color:#fff;}
.countries-wrap .eyebrow::before{background:var(--amber);}
.countries-wrap .section-lead{color:#dce8f7;}
.country-groups{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;}
/* 5th card (odd one out) spans the whole row instead of hanging alone */
.country-group:nth-child(5):last-child{grid-column:1 / -1;}
@media(max-width:1100px) and (min-width:881px){.country-groups{grid-template-columns:repeat(2,minmax(0,1fr));}}
.country-group{background:rgba(255,255,255,.94);border-radius:var(--radius);padding:22px;}
.country-group h3{display:flex;align-items:center;gap:8px;color:var(--blue-800);letter-spacing:.8px;font-weight:700;font-size:1.05rem;text-transform:uppercase;}
.country-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.country-tags span{
  background:var(--blue-100);color:var(--blue-800);font-family:var(--font-mono);
  font-size:.76rem;padding:6px 10px;border-radius:20px;transition:background .15s,color .15s,transform .15s;
}
.country-tags span:hover{background:var(--blue-700);color:#fff;transform:translateY(-2px);}

/* ============ GALLERY SLIDER ============ */
/* square photos; 3 visible on desktop, 2 on tablet, 1 on phone; arrows scroll one photo */
.gallery{position:relative;--per:3;--gap:22px;}
.slider{position:relative;overflow:hidden;overflow:clip;padding:6px 0 22px;margin:-6px 0 -22px;}
.slider-track{display:flex;gap:var(--gap);transition:transform .5s cubic-bezier(.65,0,.35,1);will-change:transform;}
.slide{flex:0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));min-width:0;position:relative;
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 10px 26px rgba(6,43,82,.16);background:var(--gray-200);}
.slide img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;}
.slide-cap{
  position:absolute;left:0;bottom:0;right:0;padding:40px 18px 16px;
  background:linear-gradient(to top, rgba(6,43,82,.88), transparent);
  color:#fff;font-family:var(--font-mono);font-size:.8rem;letter-spacing:.3px;line-height:1.35;
}
.slider-btn{
  position:absolute;top:calc(50% - 8px);translate:0 -50%;z-index:5;width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.95);border:none;display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--blue-800);box-shadow:var(--shadow-sm);transition:background .2s,transform .2s,opacity .2s;
}
.slider-btn:hover{background:var(--amber);transform:scale(1.08);}
.slider-btn:disabled{opacity:.35;cursor:default;background:rgba(255,255,255,.95);transform:none;}
.slider-btn[hidden]{display:none;}
.slider-btn.prev{left:12px;}
.slider-btn.next{right:12px;}
.slider-dots{display:flex;gap:8px;justify-content:center;margin-top:18px;}
.slider-dots button{width:9px;height:9px;padding:0;margin:0;flex-shrink:0;border-radius:50%;border:none;background:var(--gray-200);cursor:pointer;transition:background .2s,transform .2s;display:block;}
.slider-dots button.active{background:var(--blue-600);transform:scale(1.3);}
@media(max-width:880px){ .gallery{--per:2;--gap:16px;} }
@media(max-width:600px){
  .gallery{--per:1;--gap:12px;}
  .slider-btn{width:40px;height:40px;}
}

/* ============ FAQ ============ */
#faq .eyebrow,#faq h2{text-align:center;justify-content:center;width:100%;}
#faq .section-lead{text-align:center;margin-left:auto;margin-right:auto;}
.faq-list{max-width:820px;margin:0 auto;}
.faq-item{border-bottom:1px solid var(--gray-200);}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:none;border:none;text-align:left;padding:22px 4px;cursor:pointer;
  font-family:var(--font-display);font-size:1.35rem;font-weight:700;text-transform:uppercase;color:var(--blue-900);
  transition:color .15s;
}
.faq-q:hover{color:var(--blue-600);}
.faq-q svg{flex-shrink:0;transition:transform .25s ease;color:var(--blue-600);}
.faq-item.open .faq-q svg{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.faq-item.open .faq-a{max-height:320px;}
.faq-a p{padding:0 4px 22px;color:var(--steel-700);font-size:1.05rem;font-weight:500;line-height:1.6;}

/* ============ CONTACT ============ */
.contact-wrap{background:var(--gray-100);}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
@media(max-width:880px){.contact-grid{grid-template-columns:1fr;}}
.contact-info-card{background:var(--blue-900);color:#000;border-radius:var(--radius-lg);padding:36px;position:relative;overflow:hidden;}
.contact-info-card h3, .contact-info-card p, .contact-info-card a, .contact-info-card li{color:#000;}
.contact-info-card::before{
  content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.12), transparent 70%);
}
.info-row{display:flex;gap:14px;align-items:flex-start;margin-bottom:22px;}
.info-row svg{color:var(--amber);flex-shrink:0;margin-top:2px;}
.info-row b{display:block;font-family:var(--font-mono);font-size:.7rem;letter-spacing:1.5px;text-transform:uppercase;color:#d8dbdd;margin-bottom:3px;}
.info-row a:hover{color:var(--amber) !important;}
.onsite-box{background:rgba(255,255,255,.9);border-radius:var(--radius);padding:16px 18px;margin-top:26px;color:var(--steel-700) !important;}
.onsite-box *{color:var(--steel-700) !important;}
.onsite-box strong{color:var(--blue-800) !important;}

.contact-form{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:36px;box-shadow:var(--shadow-sm);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:520px){.form-row{grid-template-columns:1fr;}}
.field{margin-bottom:16px;}
.field label{display:block;font-family:var(--font-mono);font-size:.72rem;letter-spacing:1px;text-transform:uppercase;color:var(--steel-500);margin-bottom:6px;}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--gray-200);border-radius:6px;
  font-family:var(--font-body);font-size:.95rem;color:var(--steel-700);transition:border-color .15s,box-shadow .15s;background:#fff;
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--blue-400);}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue-600);box-shadow:0 0 0 3px var(--blue-100);outline:none;}
.field textarea{resize:vertical;min-height:110px;}
.form-note{font-size:.78rem;color:var(--steel-500);margin-top:10px;}

.impressum-block p{color:var(--steel-700);line-height:1.7;margin-bottom:16px;}
.impressum-block a{color:var(--blue-600);text-decoration:underline;}

/* ============ FOOTER ============ */
.site-footer{background:var(--steel-900);color:#c9d3df;padding:60px 0 24px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;margin-bottom:44px;}
.footer-grid h4,.footer-grid h3{color:#fff;font-size:.85rem;margin-bottom:14px;text-transform:uppercase;letter-spacing:.5px;}
.footer-grid ul li{margin-bottom:9px;}
.footer-grid a{color:#a9b6c6;font-size:.9rem;transition:color .15s;}
.footer-grid a:hover{color:var(--amber);}
.footer-about p{color:#a9b6c6;font-size:.88rem;max-width:320px;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.8rem;color:#7d8ba0;font-family:var(--font-mono);}

/* ============ BACK TO TOP ============ */
.back-to-top{
  position:fixed;right:24px;bottom:24px;z-index:70;
  width:48px;height:48px;border-radius:50%;border:none;
  background:var(--blue-700);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-md);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .25s ease,transform .25s ease,background .2s ease,visibility .25s;
}
.back-to-top.show{opacity:1;visibility:visible;transform:translateY(0);}
.back-to-top:hover{background:var(--amber);}
@media(max-width:600px){
  .back-to-top{right:16px;bottom:16px;width:44px;height:44px;}
}

/* ============ FLOATING QUOTE BUTTON (phones & tablets only) ============ */
.float-quote{display:none;}
@media(max-width:880px){
  .float-quote{
    position:fixed;left:16px;bottom:16px;z-index:70;
    display:inline-flex;align-items:center;gap:8px;max-width:calc(100vw - 100px);
    height:46px;padding:0 20px 0 16px;border-radius:999px;border:none;cursor:pointer;
    background:var(--amber);color:var(--blue-900);
    font-family:var(--font-display);font-size:.98rem;letter-spacing:.4px;text-transform:uppercase;font-weight:700;
    box-shadow:0 10px 26px rgba(6,43,82,.32);
    opacity:0;visibility:hidden;transform:translateY(14px);
    transition:opacity .25s ease,transform .25s ease,visibility .25s;
  }
  .float-quote span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .float-quote svg{flex:0 0 auto;}
  .float-quote.show{opacity:1;visibility:visible;transform:translateY(0);}
  .float-quote:active{transform:scale(.97);}
  body.qm-open .float-quote{opacity:0;visibility:hidden;}
}
@media(max-width:600px){ .float-quote{height:44px;} }
@media print{ .float-quote{display:none!important;} }

/* ============ MOBILE NAV TOGGLE for brand list ============ */
.brand-toggle{display:none;width:100%;margin-bottom:14px;}
@media(max-width:880px){
  .brand-toggle{display:inline-flex;}
  .brand-nav{position:static;}
  .brand-list{max-height:0;overflow:hidden;transition:max-height .3s ease;}
  .brand-nav.open .brand-list{max-height:600px;}
}

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ============================================================
   RESPONSIVE — Tablet landscape / Tablet portrait / Mobile
   ============================================================ */

/* ---- Tablet landscape (≤1024px, e.g. iPad landscape) ---- */
@media(max-width:1024px){
  .container{padding:0 20px;}
  .section{padding:64px 0;}
  .services-grid,.why-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
  .hero{padding-top:88px;padding-bottom:64px;}
  .hero .container{gap:32px;}
  .gauge-wrap{transform:none;}
  .spindle-gauge{max-width:300px;}
}

/* ---- Tablet portrait (≤880px, e.g. iPad portrait) ---- */
@media(max-width:880px){
  .topbar .container{flex-direction:column;align-items:flex-start;gap:4px;padding-top:6px;padding-bottom:6px;}
  .topbar-right a{margin-left:0;margin-right:18px;}
  .header-contact{gap:14px;}
  .header-contact a span{display:none;}
  .header-contact a{gap:0;}
  .hero .container{grid-template-columns:1fr;text-align:left;}
  .hero-stats{grid-template-columns:repeat(3,auto);gap:20px;}
  .gauge-wrap{order:-1;margin-bottom:12px;}
  .spindle-gauge{max-width:240px;}
  .process-steps{grid-template-columns:repeat(2,1fr);}
  .country-groups{grid-template-columns:1fr 1fr;}
  .contact-info-card{padding:28px;}
  .contact-form{padding:28px;}
}

/* ---- Mobile (≤600px) ---- */
@media(max-width:600px){
  .topbar .container{flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:8px;}
  .topbar-left{min-width:0;flex:1 1 auto;overflow:hidden;position:relative;}
  .topbar-left span{margin-right:0;display:inline-block;white-space:nowrap;font-size:.72rem;animation:topbar-marquee 10s linear infinite;}
  @keyframes topbar-marquee{
    0%{transform:translateX(100%);}
    100%{transform:translateX(-100%);}
  }
  .topbar-right{flex-shrink:0;display:flex;gap:0;}
  .topbar-right a{margin-left:14px;margin-right:0;font-weight:700;font-size:.72rem;white-space:nowrap;}
  .section{padding:52px 0;}
  h1{font-size:clamp(2rem,9vw,2.6rem)!important;}
  h2{font-size:1.7rem;}
  .hero-actions{flex-direction:column;align-items:stretch;}
  .hero-actions .btn{width:100%;}
  .hero-stats{grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px;}
  .hero-stats div{border-left:2px solid rgba(255,255,255,.25);padding-left:8px;}
  .hero-stats b{font-size:1.15rem;}
  .hero-stats span{font-size:.56rem;letter-spacing:.3px;line-height:1.3;display:block;}
  .logo-mark{width:42px;height:42px;}
  .logo-text .name{font-size:1.2rem;}
  .logo-text .tag{font-size:.58rem;letter-spacing:.4px;}
  .header-contact a:not(.header-cta) span{display:none;}
  .header-contact .phone-placeholder span{display:none;}
  .header-contact a[href^="mailto"]{display:none;}
  .process-steps{grid-template-columns:1fr;}
  .country-groups{grid-template-columns:1fr;}
  .machine-cards{grid-template-columns:1fr;}
  .services-grid,.why-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column;align-items:flex-start;}
}

/* ---- Small phones (≤380px) ---- */
@media(max-width:380px){
  .container{padding:0 16px;}
  .logo-text .tag{display:none;}
}

/* ---- Phone landscape (short height, wide width — width-based breakpoints alone don't catch this) ---- */
@media(max-height:500px) and (orientation:landscape){
  .hero{padding-top:24px;padding-bottom:24px;}
  .hero .container{grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;}
  .hero h1{font-size:clamp(1.6rem,4.5vw,2.4rem)!important;}
  .hero-sub{font-size:.92rem;margin-bottom:16px;}
  .hero-actions{margin-bottom:8px;}
  .hero-stats{margin-top:12px;}
  .gauge-wrap{transform:none!important;order:0;margin-bottom:0;}
  .spindle-gauge{max-width:160px!important;}
  .site-header .container{padding-top:6px;padding-bottom:6px;}
  .main-nav.open{max-height:70vh;overflow-y:auto;}
  .section{padding:32px 0;}
}

/* ============ HEADER FIT (multilingual safety) ============
   Long UI labels (ES "Solicitar presupuesto", NL "Offerte aanvragen", ...)
   used to wrap onto two lines and push the header past its container.
   Everything below keeps the header on ONE line at every width. */
.site-header .container > *{min-width:0;}
.header-cta{
  white-space:nowrap;flex:0 0 auto;
  padding:11px 18px;font-size:.94rem;letter-spacing:.3px;
}
@media(min-width:1600px){
  .header-cta{padding:13px 22px;font-size:1rem;}
}
/* Below 1500px the email label is dropped (icon stays clickable) so the
   phone number and the quote button always keep their full text. */
@media(max-width:1499px){
  .header-contact a[href^="mailto"] span{display:none;}
  .header-contact a[href^="mailto"]{gap:0;}
}
/* Narrow desktops / tablets: icons only, so nothing can push the header out.
   The phone icon stays a working tel: link. */
@media(max-width:1023px){
  .header-contact{gap:14px;}
  .header-contact a[href^="tel"] span,
  .header-contact .phone-placeholder span{display:none;}
  .header-contact a[href^="tel"]{gap:0;}
}

/* Very small phones: scale the logo down so the header always fits. */
@media(max-width:430px){
  .site-header .container{padding-left:12px;padding-right:12px;gap:8px;}
  .logo{gap:8px;}
  .logo-mark{width:40px;height:40px;}
  .logo-text .name{font-size:1.02rem;letter-spacing:.2px;}
  .logo-text .tag{font-size:.58rem;letter-spacing:.8px;}
}
@media(max-width:340px){
  .logo-text .name{font-size:.94rem;}
  .logo-mark{width:36px;height:36px;}
}


/* ============ CONSENT BOX + LEGAL PAGES ============ */
.contact-form .consent{
  display:flex;align-items:flex-start;gap:10px;
  margin:4px 0 16px;font-size:.86rem;line-height:1.5;color:var(--steel-600,#5a6b7d);
}
.contact-form .consent input[type=checkbox]{
  flex:0 0 auto;width:18px;height:18px;margin-top:2px;accent-color:var(--blue-600);cursor:pointer;
}
.contact-form .consent a{color:var(--blue-600);text-decoration:underline;}
.legal-text h2{font-size:1.24rem;margin:30px 0 10px;}
.legal-text h3{font-size:1.05rem;margin:22px 0 8px;}
.legal-text p{margin-bottom:12px;}
.legal-text ul{margin:0 0 14px 20px;list-style:disc;}
.legal-text li{margin-bottom:5px;}
.legal-text code{font-family:var(--font-mono);font-size:.88em;background:var(--gray-100,#f1f4f7);padding:1px 5px;border-radius:3px;}
.legal-text .privacy-intro{font-size:1.02rem;color:var(--steel-700);}
.legal-text .privacy-date{margin-top:26px;font-size:.85rem;color:var(--steel-500);}

/* ============ HERO BACKGROUND PHOTO ============
   Workshop photo showing through the blue hero block. The photo sits above the
   blue gradient but below a dark wash and below all content, so the headline,
   sub-text and buttons keep their contrast. */
.hero-photo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:60% 45%;
  opacity:.30;z-index:0;pointer-events:none;user-select:none;
}
.hero::after{                       /* keeps the white text readable over the photo */
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(8,42,80,.92) 0%, rgba(8,42,80,.80) 38%, rgba(8,42,80,.55) 64%, rgba(8,42,80,.62) 100%);
}
.hero::before{z-index:2;}           /* the fine grid stays on top of the wash */
.hero .container{z-index:3;}
/* One-column layout (tablets and phones): the photo is no longer a background
   behind the text — it becomes a full-width band in the normal flow, directly
   below the hero stats, so the spindle is shown at full strength. */
@media(max-width:960px){
  .hero{display:flex;flex-direction:column;padding-bottom:0;}
  .hero .container{order:1;position:relative;z-index:3;}
  .hero-photo{
    order:2;position:static;width:100%;height:auto;
    object-fit:contain;opacity:1;margin-top:30px;z-index:1;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16%);
            mask-image:linear-gradient(to bottom,transparent 0,#000 16%);
  }
  .hero::after{display:none;}   /* no wash needed: no text sits over the photo */
}

.gallery-note{margin-top:10px;font-size:.78rem;color:var(--steel-500);text-align:right;}

/* Phones: drop the animated gauge entirely — it added ~330px of hero height
   and its job (visual interest) is now done by the workshop photo below. */
@media(max-width:760px){
  .gauge-wrap{display:none;}
  .hero{padding-top:74px;padding-bottom:0;}
  .hero-photo{margin-top:22px;}
}

/* Long compounds (CNC-Spindelreparatur, Recondiționare, İş Mili Onarımı) used to
   break mid-word on narrow phones. Let the browser hyphenate at proper points
   instead, and hold the headline one step smaller below 430px. */
.hero h1{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;}
@media(max-width:430px){
  .hero h1{font-size:clamp(1.5rem,7.4vw,2rem)!important;letter-spacing:0;}
  .hero-sub{font-size:1.02rem;}
}

/* honeypot: invisible to people, tempting to bots — never remove from the DOM */
.hp-wrap{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden;}

/* 404 language picker */
.lang-404{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 4px;}
.lang-404 a{display:inline-block;padding:9px 16px;border:1.5px solid var(--gray-200);border-radius:6px;
  font-family:var(--font-mono);font-size:.85rem;color:var(--blue-800);transition:border-color .15s,background .15s;}
.lang-404 a:hover{border-color:var(--blue-400);background:var(--blue-100);}

/* ============ BREADCRUMBS + CHECK LIST (landing pages) ============ */
.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0;
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.4px;color:var(--steel-500);}
.breadcrumbs li{display:flex;align-items:center;gap:8px;}
.breadcrumbs li+li::before{content:"›";color:var(--steel-400,#9fb0c0);}
.breadcrumbs a{color:var(--blue-600);text-decoration:none;}
.breadcrumbs a:hover{text-decoration:underline;}
.breadcrumbs .breadcrumb-flag{width:24px;height:16px;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.14);margin-left:2px;flex:0 0 auto;}
.check-list{list-style:none;padding:0;margin:0 0 18px;}
.check-list li{position:relative;padding-left:26px;margin-bottom:9px;}
.check-list li::before{content:"";position:absolute;left:0;top:.45em;width:9px;height:9px;border-radius:2px;
  background:var(--amber);}
.brand-card-link{display:inline-flex;align-items:center;gap:6px;margin-top:10px;
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.6px;text-transform:uppercase;color:var(--blue-600);}
.brand-card-link:hover{text-decoration:underline;}

/* ============ COMPACT PAGE HERO (landing pages) ============
   Same workshop photo as the homepage, sitting UNDER a dark wash so the
   headline and the breadcrumbs keep full contrast. */
.page-hero{
  position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(1200px 600px at 80% -10%, var(--blue-700), var(--blue-900) 60%);
  padding:34px 0 60px;
}
.page-hero .hero-photo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:60% 45%;opacity:.30;z-index:0;pointer-events:none;user-select:none;
}
.page-hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(8,42,80,.93) 0%,rgba(8,42,80,.84) 40%,rgba(8,42,80,.58) 68%,rgba(8,42,80,.64) 100%);
}
.page-hero .container{position:relative;z-index:3;}
.page-hero h1{color:#fff;margin:.15em 0 .35em;}
.page-hero .eyebrow{color:var(--amber);}
.page-hero .eyebrow::before{background:#fff;}
.page-hero .section-lead{color:#cfe0f5;}
.page-hero .breadcrumbs{margin-bottom:20px;}
.page-hero .breadcrumbs ol{color:rgba(255,255,255,.6);}
.page-hero .breadcrumbs a{color:#fff;}
.page-hero .breadcrumbs li+li::before{color:rgba(255,255,255,.45);}
@media(max-width:960px){
  .page-hero{padding:26px 0 44px;}
  .page-hero .hero-photo{object-position:64% 42%;opacity:.34;}
  .page-hero::after{background:linear-gradient(180deg,rgba(8,42,80,.9) 0%,rgba(8,42,80,.78) 55%,rgba(8,42,80,.84) 100%);}
}

/* ============ LANDING PAGE GRID VARIANTS ============ */
.lead-wide{max-width:none;}
.why-grid.grid-3{grid-template-columns:repeat(3,1fr);}
@media(max-width:1100px){.why-grid.grid-3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:700px){.why-grid.grid-3{grid-template-columns:1fr;}}

/* ============ MANUFACTURERS HUB ============ */
.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.hub-card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius);
  padding:22px 22px 18px;transition:border-color .18s,box-shadow .18s,transform .18s;}
.hub-card:hover{border-color:var(--blue-400);box-shadow:var(--shadow-sm);transform:translateY(-2px);}
.hub-card h3{margin:0 0 8px;font-size:1.18rem;}
.hub-card h3 a{color:var(--blue-800);text-decoration:none;}
.hub-card h3 a::after{content:"";position:absolute;inset:0;}
.hub-card{position:relative;}
.hub-card:hover h3 a{color:var(--blue-600);}
.hub-card p{margin:0 0 12px;color:var(--steel-500);font-size:.95rem;line-height:1.55;}
@media(max-width:1100px){.hub-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:700px){.hub-grid{grid-template-columns:1fr;}}
/* prev / next / hub strip at the foot of a brand page */
.page-nav{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:34px;padding-top:20px;
  border-top:1px solid var(--gray-200);font-family:var(--font-mono);font-size:.8rem;letter-spacing:.3px;}
.page-nav a{color:var(--blue-600);text-decoration:none;}
.page-nav a:hover{text-decoration:underline;}
.page-nav-hub{margin-left:auto;margin-right:auto;font-weight:500;}
@media(max-width:700px){.page-nav{flex-direction:column;align-items:flex-start;}
  .page-nav-hub{margin:0;}}

/* ============ PHOTO STRIP ============
   Directly after a hero it straddles the blue and the white section below.
   Anywhere else on the page (the service pages move the block around) it is a
   normal in-flow band with ordinary spacing. */
.photo-strip{position:relative;z-index:6;margin:10px 0 44px;}
.hero + .photo-strip, .page-hero + .photo-strip{margin-top:-118px;margin-bottom:-18px;}
.photo-strip .container{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.ps-item{position:relative;margin:0;overflow:hidden;border-radius:var(--radius-lg);
  background:var(--gray-200);box-shadow:0 18px 44px rgba(6,43,82,.28);
  border:1px solid rgba(255,255,255,.55);aspect-ratio:4/3;
  transition:transform .25s ease, box-shadow .25s ease;}
.ps-item:hover{transform:translateY(-4px);box-shadow:0 24px 54px rgba(6,43,82,.34);}
.ps-item img{width:100%;height:100%;object-fit:cover;display:block;}
@media(max-width:1100px){
  .hero + .photo-strip, .page-hero + .photo-strip{margin-top:-96px;}
  .photo-strip .container{gap:16px;}
}
@media(max-width:760px){
  .photo-strip{margin:6px 0 30px;}
  .hero + .photo-strip, .page-hero + .photo-strip{margin-top:-92px;margin-bottom:-6px;}
  .photo-strip .container{grid-template-columns:1fr 1fr;gap:12px;}
  .ps-item{border-radius:var(--radius);box-shadow:0 12px 30px rgba(6,43,82,.26);}
  .ps-lead{grid-column:1 / -1;aspect-ratio:16/9;}
}
@media(max-width:420px){
  .hero + .photo-strip, .page-hero + .photo-strip{margin-top:-78px;}
  .photo-strip .container{gap:10px;}
}

/* the hero has to grow so the overlapping strip never covers the CTA or the stats */
.hero.has-strip, .hero:has(+ .photo-strip){padding-bottom:236px;}
.page-hero.has-strip, .page-hero:has(+ .photo-strip){padding-bottom:190px;}
@media(max-width:1100px){
  .hero.has-strip, .hero:has(+ .photo-strip){padding-bottom:200px;}
  .page-hero.has-strip, .page-hero:has(+ .photo-strip){padding-bottom:164px;}
}
@media(max-width:960px){
  .page-hero.has-strip, .page-hero:has(+ .photo-strip){padding-bottom:132px;}
}
@media(max-width:760px){
  .hero.has-strip, .hero:has(+ .photo-strip){padding-bottom:126px;}
  .page-hero.has-strip, .page-hero:has(+ .photo-strip){padding-bottom:128px;}
}
@media(max-width:420px){
  .hero.has-strip, .hero:has(+ .photo-strip){padding-bottom:112px;}
  .page-hero.has-strip, .page-hero:has(+ .photo-strip){padding-bottom:112px;}
}

/* ============ MOBILE DRAWER: languages must always stay visible ============
   The extra "Repair by Brand" entry made the list long enough to push the
   language flags past the fold. The drawer is now a flex column: the link list
   scrolls, the language row is pinned to the bottom and never gets clipped. */
@media(max-width:1199px){
  .main-nav.open,
  .main-nav.nav-compact.open{
    display:flex;flex-direction:column;overflow:hidden;
    max-height:min(84vh, calc(100dvh - 96px));
  }
  .main-nav.open > ul{
    /* auto side margins would stop the flex item from stretching, so the width
       has to be stated explicitly or the links drift to the middle */
    flex:1 1 auto;min-height:0;width:100%;box-sizing:border-box;
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  }
  .main-nav.open .lang-mobile{
    flex:0 0 auto;width:100%;box-sizing:border-box;margin-top:0;
    padding:12px 24px 14px;background:#fff;box-shadow:0 -8px 16px rgba(6,43,82,.07);
  }
  .main-nav.nav-compact.open .lang-mobile{padding:12px 14px 14px;}
}
@media(max-width:899px){
  /* tighter rows so all eight entries plus the flags fit without scrolling
     on a normal phone */
  .main-nav a{padding:11px 4px;font-size:.94rem;}
  .main-nav ul{padding:4px 24px 8px;}
  .main-nav.open .lang-mobile{padding:10px 24px 12px;}
  .main-nav .lang-mobile .lang-heading{margin-bottom:7px;}
}
@media(max-width:400px){
  .main-nav a{padding:9px 4px;font-size:.9rem;}
  .lang-mobile-grid img{width:26px;height:18px;}
}

/* ============ SERVICE PAGES ============ */
.s-steps{list-style:none;counter-reset:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(2,1fr);gap:22px 40px;}
.s-step{display:flex;gap:18px;align-items:flex-start;}
.s-num{flex:0 0 auto;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-family:var(--font-display);font-size:1.35rem;font-weight:700;
  color:var(--blue-800);background:var(--blue-100);border:1px solid rgba(19,100,173,.22);}
.s-step h3{margin:6px 0 6px;font-size:1.12rem;color:var(--blue-800);letter-spacing:.4px;}
.s-step p{margin:0;color:var(--steel-500);font-size:.96rem;line-height:1.6;}
.check-cols{columns:2;column-gap:44px;}
.check-cols li{break-inside:avoid;}
@media(max-width:860px){
  .s-steps{grid-template-columns:1fr;gap:18px;}
  .check-cols{columns:1;}
}

/* ============ COUNTRY / REGION PAGES ============ */
.hub-grid-4{grid-template-columns:repeat(4,1fr);}
.hub-grid-5{grid-template-columns:repeat(5,1fr);}
.hub-card-sm{padding:16px 18px;}
.hub-card-sm h3{margin:0;font-size:1rem;letter-spacing:.2px;}
.hub-sub{margin:10px 0 0;font-size:.86rem;line-height:1.7;color:var(--steel-500);}
.hub-sub a{color:var(--blue-600);text-decoration:none;position:relative;z-index:2;}
.hub-sub a:hover{text-decoration:underline;}
.city-tags{display:flex;flex-wrap:wrap;gap:8px;}
.city-tags span{display:inline-flex;align-items:center;padding:7px 14px;border-radius:999px;
  background:var(--white);border:1px solid var(--gray-200);color:var(--steel-700);
  font-family:var(--font-mono);font-size:.8rem;letter-spacing:.3px;}
.geo-strip{border-top:1px solid var(--gray-200);}
.geo-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;}
.geo-tags a{display:inline-flex;align-items:center;padding:7px 14px;border-radius:999px;
  background:var(--gray-100);border:1px solid var(--gray-200);color:var(--blue-700);
  font-family:var(--font-mono);font-size:.8rem;letter-spacing:.3px;text-decoration:none;
  transition:background .15s,border-color .15s;}
.geo-tags a:hover{background:var(--blue-100);border-color:var(--blue-400);}
.country-tags a.country-tag-link{
  background:var(--blue-100);color:var(--blue-800);font-family:var(--font-mono);
  font-size:.76rem;padding:6px 10px;border-radius:20px;text-decoration:none;
  border-bottom:1px solid rgba(19,100,173,.28);
  transition:background .15s,color .15s,transform .15s;}
.country-tags a.country-tag-link:hover{background:var(--blue-700);color:#fff;
  border-bottom-color:var(--blue-700);transform:translateY(-2px);}
.hub-cta{margin-top:26px;text-align:center;}
@media(max-width:600px){
  .about-photo img{aspect-ratio:4/5;}
  .hub-cta .btn,.types-cta .btn{display:flex;width:100%;justify-content:center;box-sizing:border-box;}
}
@media(max-width:1200px){.hub-grid-5{grid-template-columns:repeat(4,1fr);}}
@media(max-width:1000px){.hub-grid-4,.hub-grid-5{grid-template-columns:repeat(3,1fr);}}
@media(max-width:760px){.hub-grid-4,.hub-grid-5{grid-template-columns:repeat(2,1fr);}}
@media(max-width:420px){.hub-grid-4,.hub-grid-5{grid-template-columns:1fr;}}

/* ============ QUOTE MODAL ============
   Sized to fit a 1366x768 laptop and a 360x640 phone without scrolling:
   a slim header, two-up fields all the way down to 360px, tight rows. */
body.qm-open{overflow:hidden;}
.qm-backdrop[hidden]{display:none;}
.qm-backdrop{position:fixed;inset:0;z-index:900;display:flex;align-items:center;
  justify-content:center;padding:18px;overflow-y:auto;
  background:rgba(6,43,82,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;transition:opacity .18s ease;}
.qm-backdrop.is-open{opacity:1;}
.qm-dialog{position:relative;width:100%;max-width:620px;background:var(--white);
  border-radius:14px;box-shadow:0 32px 70px rgba(6,43,82,.42);
  transform:translateY(10px) scale(.99);transition:transform .2s ease;overflow:hidden;
  max-height:calc(100dvh - 36px);display:flex;flex-direction:column;}
.qm-backdrop.is-open .qm-dialog{transform:none;}

.qm-head{flex:0 0 auto;padding:16px 52px 14px 22px;color:#fff;
  background:radial-gradient(700px 300px at 85% -40%, var(--blue-700), var(--blue-900) 70%);}
.qm-head .eyebrow{display:none;}
.qm-head h2{color:#fff;margin:0 0 4px;font-size:1.22rem;line-height:1.2;letter-spacing:.4px;}
.qm-lead{display:none;}
.qm-contacts{margin:0;font-family:var(--font-mono);font-size:.78rem;color:#cfe0f5;}
.qm-contacts a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4);}
.qm-contacts span{margin:0 6px;color:rgba(255,255,255,.45);}

.qm-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:16px 22px 20px;
  overscroll-behavior:contain;}
.qm-body .contact-form{background:none;padding:0;box-shadow:none;border:0;}
.qm-body .form-row{gap:10px;}
.qm-body .field{margin-bottom:10px;}
.qm-body .field label{font-size:.64rem;letter-spacing:.7px;margin-bottom:3px;}
.qm-body .field input,.qm-body .field select,.qm-body .field textarea{
  padding:8px 11px;font-size:.9rem;border-width:1.5px;border-radius:6px;}
.qm-body .field textarea{min-height:66px;line-height:1.45;}
.qm-body .consent{font-size:.74rem;line-height:1.45;margin:2px 0 12px;align-items:flex-start;}
.qm-body .consent input[type=checkbox]{margin-top:1px;}
.qm-body .btn{padding:11px 18px;font-size:.92rem;}
.qm-body .form-note{display:none;}

.qm-close{position:absolute;top:10px;right:10px;z-index:3;width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;
  color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);
  transition:background .15s,transform .15s;}
.qm-close:hover{background:rgba(255,255,255,.3);transform:rotate(90deg);}
.qm-close svg{width:18px;height:18px;}

.topbar-link{background:none;border:0;padding:0;cursor:pointer;font:inherit;color:inherit;
  letter-spacing:inherit;}
.topbar-link:hover{color:#fff;text-decoration:underline;}
button.btn{font:inherit;cursor:pointer;}
.footer-logo{text-decoration:none;display:inline-flex;}
.footer-contact-line{margin-top:12px;font-family:var(--font-mono);font-size:.86rem;line-height:1.9;}
.footer-contact-line a{color:#cfe0f5;text-decoration:none;}
.footer-contact-line a:hover{color:#fff;text-decoration:underline;}

/* short laptops: shave a little more */
@media(max-height:760px){
  .qm-head{padding:13px 50px 11px 20px;}
  .qm-head h2{font-size:1.1rem;}
  .qm-body{padding:13px 20px 16px;}
  .qm-body .field{margin-bottom:8px;}
  .qm-body .field textarea{min-height:56px;}
}
/* phones: the two-column rows stay, that is what keeps it on one screen */
@media(max-width:700px){
  .qm-backdrop{padding:10px;align-items:flex-start;}
  .qm-dialog{max-height:calc(100dvh - 20px);border-radius:12px;}
  .qm-head{padding:13px 46px 11px 16px;}
  .qm-head h2{font-size:1.05rem;}
  .qm-contacts{font-size:.72rem;}
  .qm-contacts span{display:block;height:0;overflow:hidden;margin:0;}
  .qm-body{padding:13px 16px 16px;}
  .qm-body .form-row{grid-template-columns:1fr 1fr;gap:8px;}
  .qm-body .field{margin-bottom:8px;}
  .qm-body .field label{font-size:.6rem;}
  .qm-body .field input,.qm-body .field select,.qm-body .field textarea{
    padding:7px 9px;font-size:16px;}     /* 16px stops iOS zooming on focus */
  .qm-body .field textarea{min-height:64px;}
  .qm-body .consent{font-size:.7rem;line-height:1.4;margin-bottom:10px;}
  .qm-body .btn{padding:11px 14px;}
}
@media(max-width:380px){
  .qm-body .form-row{gap:7px;}
  .qm-body .field label{font-size:.56rem;letter-spacing:.4px;}
}
/* phone held sideways, or a very short window: three fields per row */
@media(max-height:520px){
  .qm-backdrop{padding:5px;align-items:flex-start;}
  .qm-dialog{max-height:calc(100dvh - 12px);max-width:820px;}
  .qm-head{padding:7px 42px 6px 14px;}
  .qm-head h2{font-size:.92rem;margin-bottom:0;}
  .qm-contacts{display:none;}
  .qm-body{padding:7px 14px 8px;}
  .qm-body .form-row{grid-template-columns:1fr 1fr 1fr;gap:6px;}
  .qm-body .field{margin-bottom:5px;}
  .qm-body .field label{font-size:.54rem;margin-bottom:1px;letter-spacing:.3px;}
  .qm-body .field input,.qm-body .field select,.qm-body .field textarea{
    padding:5px 8px;font-size:14px;}
  .qm-body .field textarea{min-height:32px;}
  .qm-body .consent{font-size:.62rem;line-height:1.3;margin:0 0 6px;}
  .qm-body .btn{padding:7px 14px;font-size:.85rem;}
}
/* the very smallest phones */
@media(max-width:340px){
  .qm-head{padding:10px 40px 8px 13px;}
  .qm-body{padding:10px 13px 12px;}
  .qm-body .field{margin-bottom:6px;}
  .qm-body .field textarea{min-height:52px;}
}

/* ============ ACTIVE NAV ============ */
/* the drawer / dropdown menu */
.main-nav a.is-active{color:var(--blue-700);background:var(--blue-100);position:relative;}
.main-nav a.is-active::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;
  border-radius:2px;background:var(--amber);}
.main-nav.nav-compact a.is-active::before{left:6px;}
/* the inline bar on very wide screens */
@media(min-width:2700px){
  .main-nav a.is-active{background:none;color:#fff;}
  .main-nav a.is-active::before{left:0;right:0;top:auto;bottom:-7px;width:auto;height:2px;}
}
/* the utility bar at the very top */
.topbar-right a.is-active{color:#fff;border-bottom:2px solid var(--amber);padding-bottom:2px;}
/* footer column links */
.site-footer a.is-active{color:#fff;font-weight:600;}
.site-footer a.is-active::after{content:"";display:inline-block;width:5px;height:5px;
  margin-left:7px;border-radius:50%;background:var(--amber);vertical-align:middle;}

.prob-link{display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  font-family:var(--font-mono);font-size:.76rem;letter-spacing:.6px;text-transform:uppercase;
  color:var(--blue-600);text-decoration:none;}
.prob-link:hover{text-decoration:underline;}
.types-cta{margin-top:26px;text-align:center;}

/* five footer columns now that Contact has its own */
.footer-grid{grid-template-columns:1.5fr 1fr 1.15fr 1fr .9fr;}
/* ноутбук: три колонки, блок «о компании» на всю ширину сверху */
@media(max-width:1200px){
  .footer-grid{grid-template-columns:1fr 1fr 1fr;gap:32px 28px;}
  .footer-about{grid-column:1 / -1;}
}
/* планшет: две колонки, четыре списка ссылок ровным блоком 2x2 */
@media(max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px 24px;}
  .footer-about{grid-column:1 / -1;}
  .footer-about p{max-width:none;}
}
/* телефон */
@media(max-width:560px){
  /* одна колонка: пять блоков идут друг под другом, ничего не накладывается */
  .footer-grid{grid-template-columns:1fr;gap:30px;}
  .footer-about,.footer-nav,.footer-services,.footer-contact{text-align:center;}
  .footer-about .logo{justify-content:center;}
  .footer-about .logo-mark{width:52px;height:52px;}
  .footer-about .name{font-size:1.15rem;}
  .footer-about p{max-width:none !important;margin:0 auto;}
  .footer-grid ul{display:flex;flex-direction:column;gap:6px;align-items:center;}
  .footer-grid ul li{margin-bottom:0;}
  .footer-grid a,.footer-grid span{font-size:.92rem;overflow-wrap:break-word;}
  /* короткие списки (марки, страны, контакты) — в две колонки, чтобы футер не растягивался */
  .footer-nav ul{display:grid;grid-template-columns:1fr 1fr;gap:9px 16px;align-items:start;justify-items:center;}
  .footer-nav ul li:has(strong){grid-column:1 / -1;}
  .footer-bottom{gap:8px;text-align:center;justify-content:center;flex-direction:column;}
}


.logo .tag{color:var(--blue-600);}


.hub-card h3.hub-country-title {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 10px !important;
}

.hub-card h3.hub-country-title .hub-country-flag {
  display: block !important;
  flex: 0 0 24px !important;
  width: 24px;
  height: 16px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.14);
}

.hub-card h3.hub-country-title a {
  min-width: 0;
  display: inline-block;
}

@media (max-width: 600px) {
  .hub-card h3.hub-country-title {
    gap: 8px;
  }
  .hub-card h3.hub-country-title .hub-country-flag {
    flex-basis: 22px;
    width: 22px;
    height: 15px;
  }
}

.context-link {
  color: inherit;
  text-decoration: none;
}
.context-link:hover,
.context-link:focus-visible {
  color: var(--blue-600);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ===== Service icons on hub cards ===== */
.hub-card h3.hub-svc-head{
  display:flex;align-items:center;gap:13px;flex-wrap:nowrap;
}
.hub-card h3.hub-svc-head a{min-width:0;}
.hub-card .hub-icon{
  flex:0 0 44px;width:44px;height:44px;border-radius:11px;
  background:var(--blue-800);color:var(--amber);
  display:flex;align-items:center;justify-content:center;margin:0;
  position:relative;top:2px;                 /* оптическая компенсация капса Barlow */
  transition:background .25s,color .25s,transform .25s;
}
.hub-card .hub-icon svg{display:block;}
.hub-card:hover .hub-icon{background:var(--amber);color:var(--blue-900);transform:rotate(-6deg) scale(1.06);}
@media (max-width:640px){
  .hub-card h3.hub-svc-head{gap:11px;}
  .hub-card .hub-icon{flex-basis:38px;width:38px;height:38px;border-radius:10px;}
  .hub-card .hub-icon svg{width:22px;height:22px;}
}
@media (prefers-reduced-motion:reduce){
  .hub-card .hub-icon{transition:none;}
  .hub-card:hover .hub-icon{transform:none;}
}

/* ===== Service icon left of the link on compact cards ===== */
.hub-card-sm h3.hub-svc-title{
  display:flex;align-items:center;gap:10px;flex-wrap:nowrap;
}
.hub-card-sm h3.hub-svc-title .hub-svc-icon{
  flex:0 0 22px;width:22px;height:22px;color:var(--amber);
  position:relative;top:2px;                 /* оптическая компенсация капса Barlow */
  transition:color .18s,transform .18s;
}
.hub-card-sm h3.hub-svc-title .hub-svc-icon svg{display:block;width:22px;height:22px;}
.hub-card-sm h3.hub-svc-title a{min-width:0;}
.hub-card-sm:hover h3.hub-svc-title .hub-svc-icon{color:#dd8f22;transform:scale(1.08);}
@media (max-width:640px){
  .hub-card-sm h3.hub-svc-title{gap:9px;}
  .hub-card-sm h3.hub-svc-title .hub-svc-icon,
  .hub-card-sm h3.hub-svc-title .hub-svc-icon svg{flex-basis:20px;width:20px;height:20px;}
}
@media (prefers-reduced-motion:reduce){
  .hub-card-sm h3.hub-svc-title .hub-svc-icon{transition:none;}
  .hub-card-sm:hover h3.hub-svc-title .hub-svc-icon{transform:none;}
}

/* ===== Янтарные иконки в двух блоках главной: #problems и #why ===== */
#problems .why-card > svg,
#why .why-card > svg{ color:var(--amber); }
#problems .why-card:hover > svg,
#why .why-card:hover > svg{ color:#dd8f22; }

/* ============ CARD BORDERS (more defined) ============ */
:root{--card-border:#c3d2e3;}
.svc-card,.machine-card,.hub-card{border:1px solid var(--card-border);box-shadow:0 2px 6px rgba(6,43,82,.06);}
.why-card{border:1px solid var(--card-border);box-shadow:0 2px 6px rgba(6,43,82,.05);}
.p-step{border:1px solid rgba(255,255,255,.9);box-shadow:0 6px 18px rgba(0,0,0,.18);}
.svc-card:hover,.machine-card:hover,.hub-card:hover,.why-card:hover{border-color:var(--blue-500);}

/* ============ WHOLE CARD CLICKABLE (set by script.js on cards with a link) ============ */
.card-click{cursor:pointer;}
.card-click:focus-within{outline:2px solid var(--blue-500);outline-offset:2px;}
.why-card.card-click:hover h3,.p-step.card-click:hover h3 a,.svc-card.card-click:hover h3{color:var(--blue-600);}

/* ============ BRAND PAGE: PHOTO + TEXT, NUMBERED STEPS ============ */
.brand-bench{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:44px;align-items:center;}
.brand-bench-photo{margin:0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);border:1px solid var(--card-border);background:#fff;}
.brand-bench-photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;}
.brand-bench-photo figcaption{padding:12px 16px;font-size:.86rem;color:var(--steel-500);font-family:var(--font-mono);letter-spacing:.2px;}
.brand-bench-text h2{margin-bottom:14px;}
.bench-steps{counter-reset:bs;list-style:none;padding:0;margin:22px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 22px;}
.bench-steps li{counter-increment:bs;position:relative;background:#fff;border:1px solid var(--card-border);border-radius:var(--radius);padding:18px 18px 18px 64px;line-height:1.55;color:var(--steel-700);}
.bench-steps li::before{content:counter(bs);position:absolute;left:18px;top:16px;width:32px;height:32px;border-radius:50%;background:var(--blue-700);color:#fff;font-family:var(--font-display);font-weight:700;display:flex;align-items:center;justify-content:center;}
.bench-tip{margin-top:22px;padding:16px 18px;border-left:4px solid var(--amber);background:#fff;border-radius:0 var(--radius) var(--radius) 0;color:var(--steel-700);}
@media(max-width:880px){
  .brand-bench{grid-template-columns:1fr;gap:26px;}
  .bench-steps{grid-template-columns:1fr;}
}

/* ============ "LEARN MORE" LINKS IN CARDS ============ */
.svc-card-link,.machine-card .brand-card-link{
  display:inline-flex;align-items:center;gap:6px;margin-top:16px;padding-top:12px;
  border-top:1px solid var(--gray-200);width:100%;
  font-family:var(--font-display);font-weight:700;font-size:.95rem;letter-spacing:.6px;text-transform:uppercase;
  color:var(--blue-600);text-decoration:none;
}
.svc-card-link span[aria-hidden],.machine-card .brand-card-link span[aria-hidden]{transition:transform .2s ease;}
.svc-card:hover .svc-card-link,.machine-card:hover .brand-card-link{color:var(--blue-500);}
.svc-card:hover .svc-card-link span[aria-hidden],.machine-card:hover .brand-card-link span[aria-hidden]{transform:translateX(4px);}
.svc-card{display:grid;grid-template-rows:auto auto 1fr;}
.svc-card .svc-card-link{align-self:end;}
.machine-card.show{display:flex;flex-direction:column;}
.machine-card .brand-card-link{margin-top:auto;}
.machine-card p{margin-bottom:16px;}

/* ============ NO "JUMPING" ON HOVER ============
   Elements used to shift by a few px on hover; with the cursor exactly on the
   edge the element moved away, lost hover, moved back -> flicker.
   Hover now changes only colour/shadow, the element itself stays in place. */
.btn-primary:hover,.btn-outline:hover,.btn-ghost:hover,
.machine-card:hover,.svc-card:hover,.p-step:hover,.why-card:hover,
.country-tags span:hover,.hub-card:hover,.ps-item:hover{transform:none;}
.btn-primary:hover{box-shadow:0 8px 20px rgba(242,169,59,.45);filter:brightness(1.04);}
.btn-outline:hover,.btn-ghost:hover{box-shadow:0 6px 16px rgba(6,43,82,.22);}
.svc-card:hover,.machine-card:hover,.hub-card:hover,.why-card:hover{box-shadow:0 10px 26px rgba(6,43,82,.16);}
.p-step:hover{box-shadow:0 14px 34px rgba(0,0,0,.3);}
.ps-item:hover{box-shadow:0 24px 54px rgba(6,43,82,.34);}

/* ============ 2026-10 layout tweaks ============ */
/* country links: no movement on hover */
.country-tags a.country-tag-link:hover{transform:none;}
/* slider arrows: grow without moving out from under the cursor */
.slider-btn:hover{transform:none;box-shadow:0 6px 16px rgba(6,43,82,.3);}
/* modal: wider on desktop only */
.qm-backdrop{overscroll-behavior:contain;}
@media(min-width:1024px) and (min-height:521px){
  .qm-dialog{max-width:880px;}
  .qm-head{padding:22px 64px 18px 32px;}
  .qm-body{padding:24px 32px 30px;}
  .qm-body .form-row{gap:18px;}
}
/* section intro text: full container width on desktop */
@media(min-width:881px){
  .section-lead{max-width:none;}
  #faq .section-lead{max-width:900px;}
}
/* process steps: number left, title right of it */
.p-step{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:center;}
.p-step .num{margin-bottom:0;grid-row:1;}
.p-step h3{margin:0;grid-row:1;align-self:center;}
.p-step p{grid-column:1 / -1;margin-top:14px;}
/* CTA buttons under blocks: a bit wider on desktop */
@media(min-width:601px){
  .hub-cta .btn,.types-cta .btn{min-width:300px;padding-left:40px;padding-right:40px;}
}
/* gallery note: right on desktop, full width left-aligned on phones */
@media(max-width:600px){ .gallery-note{text-align:left;} }
.p-step{align-content:start;}

/* ============ WHY / PROBLEM CARDS: icon + title in one row, text full width below ============ */
.why-card{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-content:start;}
.why-card > svg{grid-column:1;grid-row:1;align-self:center;}
.why-card > div{display:contents;}
.why-card h3{grid-column:2;grid-row:1;align-self:center;margin:0;}
.why-card p,.why-card .prob-link{grid-column:1 / -1;}
.why-card p{margin-top:12px;}
.why-card .prob-link{margin-top:14px;justify-self:start;}
.why-card{row-gap:0;}
.why-card p{margin-top:10px;}

/* ============ PHOTO STRIP: zoom the photo on hover (card itself stays in place) ============ */
.ps-item{isolation:isolate;}
.ps-item img{transition:transform .45s ease;transform-origin:center;will-change:transform;}
.ps-item:hover img{transform:scale(1.07);}
@media(hover:none){ .ps-item:hover img{transform:none;} }
@media(prefers-reduced-motion:reduce){ .ps-item img{transition:none;} .ps-item:hover img{transform:none;} }

/* ============ PROBLEM-CARD LINKS: same look as "Mehr erfahren" ============ */
.why-card .prob-link{
  display:flex;align-items:flex-start;gap:8px;width:100%;justify-self:stretch;
  margin-top:auto;padding-top:12px;border-top:1px solid var(--gray-200);
  font-family:var(--font-display);font-weight:700;font-size:.95rem;letter-spacing:.5px;
  text-transform:uppercase;line-height:1.3;color:var(--blue-600);text-decoration:none;
  hyphens:manual;overflow-wrap:normal;word-break:normal;
}
.why-card .prob-link .arr{flex:0 0 auto;transition:transform .2s ease;}
.why-card:hover .prob-link{color:var(--blue-500);}
.why-card:hover .prob-link .arr{transform:translateX(4px);}
.why-card .prob-link:hover{text-decoration:none;}
/* push link to the bottom so links line up across a row */
.why-card:has(.prob-link){grid-template-rows:auto auto 1fr;}
.why-card:has(.prob-link) .prob-link{align-self:end;margin-top:16px;}
.why-card .prob-link{display:block;}
.why-card .prob-link .nw{white-space:nowrap;}
.why-card .prob-link .arr{display:inline-block;margin-left:8px;}
/* hub cards ("Seite öffnen →") in the same style */
.hub-card > .brand-card-link{display:block;margin-top:14px;padding-top:10px;border-top:1px solid var(--gray-200);
  font-family:var(--font-display);font-weight:700;font-size:.92rem;letter-spacing:.5px;color:var(--blue-600);}
.hub-card:hover > .brand-card-link{color:var(--blue-500);}
.hub-card:has(> .brand-card-link){display:flex;flex-direction:column;}
.hub-card:has(> .brand-card-link) > .brand-card-link{margin-top:auto;}
.hub-card:has(> .brand-card-link) > p{margin-bottom:14px;}

/* ============ HOME HERO ON PHONES/TABLETS: photo as background (like desktop) ============ */
@media(max-width:960px){
  .hero{display:block;padding-bottom:56px;}
  .hero-photo{
    position:absolute;inset:0;width:100%;height:100%;margin:0;
    object-fit:cover;object-position:54% 50%;opacity:.32;z-index:0;
    -webkit-mask-image:none;mask-image:none;
  }
  .hero::after{display:block;
    background:linear-gradient(180deg,rgba(8,42,80,.88) 0%,rgba(8,42,80,.72) 45%,rgba(8,42,80,.80) 100%);}
}
@media(max-width:760px){
  .hero{padding-bottom:48px;}
  .hero-photo{margin-top:0;}
}
@media(max-width:960px){
  .hero-photo{top:auto;bottom:0;height:58%;object-position:50% 50%;opacity:.5;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 35%);mask-image:linear-gradient(to bottom,transparent 0,#000 35%);}
  .hero::after{background:linear-gradient(180deg,rgba(8,42,80,.86) 0%,rgba(8,42,80,.62) 55%,rgba(8,42,80,.55) 100%);}
}
@media(min-width:600px) and (max-width:960px){ .hero-photo{height:70%;} }
img{-webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none;}
.ps-item img,.slide img,.brand-bench-photo img,.about-photo img{user-select:none;-webkit-user-select:none;}
/* touch devices: same photo zoom while the photo is touched */
.ps-item.is-touch img{transform:scale(1.07);}
@media(hover:none){ .ps-item.is-touch img{transform:scale(1.07);} }

/* bench steps: 3 per row on desktop (2 rows of 3 instead of 3 rows of 2) */
.bench-steps{grid-template-columns:repeat(3,minmax(0,1fr));}
@media(max-width:1100px){.bench-steps{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:700px){.bench-steps{grid-template-columns:1fr;}}

/* H1: no forced line breaks, balanced wrapping (no orphan words) */
h1{text-wrap:balance;}

/* gallery: shadow fits inside the slider's clip area (no grey band over the dots) */
.slide{box-shadow:0 4px 10px rgba(6,43,82,.12);}