/* ==========================================================================
   STAHL GLAS — Govardhannathji Engineering Private Limited
   assets/css/site.css — single stylesheet, no build step, no framework.

   Contents
   01 Tokens            06 Hero / page heads     11 Tables & spec lists
   02 Reset & base      07 Cards & bento         12 Forms
   03 Layout            08 Products & glass      13 Footer
   04 Buttons & bits    09 Timeline & steps      14 Lightbox & misc
   05 Header & menu     10 Marquee & chips       15 Responsive
   ========================================================================== */

/* ── 01 Tokens ─────────────────────────────────────────────────────────── */
:root{
  /* Brand — #286498 sampled from the STAHL GLAS wordmark */
  --blue:#286498;
  --blue-hi:#3d82bf;
  --blue-lo:#1a4467;
  --blue-100:#e6eff7;
  --blue-050:#f3f8fc;

  /* Ink & neutrals */
  --ink:#0a1622;
  --ink-2:#12283b;
  --ink-3:#1b3348;
  --ink-700:#22415c;
  --slate:#4a6478;
  --muted:#607382;
  --line:#e2e8ee;
  --line-2:#eef2f6;
  --mist:#f6f9fb;
  --white:#fff;

  /* Accent — the ember of a vessel leaving the furnace */
  --ember:#d3411d;
  --ember-hi:#ff6f42;

  /* Type */
  --f-display:"Archivo","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --f-body:"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* Space & metrics */
  --wrap:1200px;
  --wrap-md:960px;
  --wrap-sm:760px;
  --gutter:22px;
  --r-sm:8px;
  --r:14px;
  --r-lg:20px;
  --r-pill:999px;
  --header-h:78px;

  --sh-1:0 1px 2px rgba(10,22,34,.05),0 2px 8px rgba(10,22,34,.05);
  --sh-2:0 10px 30px rgba(10,22,34,.09),0 2px 8px rgba(10,22,34,.05);
  --sh-3:0 30px 70px rgba(10,22,34,.16);
  --ease:cubic-bezier(.22,.61,.36,1);
}
/* ── 02 Reset & base ───────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 20px);
}
body{
  margin:0;
  font-family:var(--f-body);
  font-size:16.5px;
  line-height:1.68;
  color:var(--slate);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* Only kicks in for a word that would otherwise stick out of its box. */
  overflow-wrap:break-word;
  overflow-x:hidden;
}
img,svg,picture,video{max-width:100%;display:block}
img{height:auto}
a{color:var(--blue);text-decoration:none;transition:color .16s var(--ease)}
a:hover{color:var(--blue-lo)}
button{font:inherit;color:inherit}
strong,b{color:var(--ink);font-weight:600}
h1,h2,h3,h4,h5{
  font-family:var(--f-display);color:var(--ink);
  margin:0 0 .55em;line-height:1.14;font-weight:700;letter-spacing:-.018em;
}
h1{font-size:clamp(2.15rem,1.35rem + 3.2vw,3.7rem);letter-spacing:-.032em;line-height:1.06}
h2{font-size:clamp(1.62rem,1.15rem + 1.9vw,2.6rem);letter-spacing:-.026em}
h3{font-size:clamp(1.08rem,1rem + .35vw,1.28rem);letter-spacing:-.012em}
h4{font-size:.98rem}
p{margin:0 0 1.15em}
ul,ol{margin:0 0 1.15em;padding-left:1.2em}
li{margin-bottom:.4em}
hr{border:0;height:1px;background:var(--line);margin:0}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:3px solid var(--blue-hi);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px}
.skip:focus{
  left:14px;top:14px;z-index:300;background:var(--blue);color:#fff;
  padding:11px 18px;border-radius:var(--r-sm);
}

/* ── 03 Layout ─────────────────────────────────────────────────────────── */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--md{max-width:var(--wrap-md)}
.wrap--sm{max-width:var(--wrap-sm)}
.section{padding:clamp(58px,3rem + 4vw,110px) 0}
.section--tight{padding:clamp(42px,2.4rem + 2.4vw,72px) 0}
.section--mist{background:var(--mist)}
.section--blue{background:var(--blue-050)}
.section--line{border-top:1px solid var(--line)}
.grid{display:grid;gap:22px}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,64px);align-items:center}
.split--media-lg{grid-template-columns:.92fr 1.08fr}
.split--text-lg{grid-template-columns:1.15fr .85fr}
.split--top{align-items:start}

/* Dark surfaces */
.dark{
  position:relative;background:var(--ink);color:#a9c0d2;isolation:isolate;
  overflow:hidden;
}
.dark h1,.dark h2,.dark h3,.dark h4{color:#fff}
.dark strong,.dark b{color:#fff}
.dark a{color:#cfe0ec}
.dark a:hover{color:#fff}
.dark::after{                       /* fine grain, keeps large flats from banding */
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.045'/></svg>");
}

/* ── 04 Buttons, eyebrows, small parts ─────────────────────────────────── */
.eyebrow{
  font-family:var(--f-display);font-size:.7rem;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--blue);
  margin:0 0 16px;display:flex;align-items:center;gap:11px;
}
.eyebrow::before{content:"";width:24px;height:2px;background:currentColor;flex:none;opacity:.75}
.dark .eyebrow{color:var(--ember-hi)}
.section-head{max-width:760px;margin-bottom:clamp(34px,3vw,52px)}
.section-head--center{margin-inline:auto;text-align:center}
.section-head--center .eyebrow{justify-content:center}
.section-head p:last-child{margin-bottom:0}
.lead{font-size:clamp(1.02rem,.98rem + .2vw,1.14rem);color:var(--slate)}
.dark .lead{color:#9fb7c9}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border-radius:var(--r-pill);
  font-family:var(--f-display);font-weight:600;font-size:.9rem;letter-spacing:.01em;
  border:1.5px solid transparent;cursor:pointer;white-space:nowrap;
  transition:background .2s var(--ease),color .2s var(--ease),
             border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--blue);color:#fff;box-shadow:0 6px 18px rgba(40,100,152,.28)}
.btn--primary:hover{background:var(--blue-lo);color:#fff;box-shadow:0 10px 26px rgba(40,100,152,.34)}
.btn--ember{background:var(--ember);color:#fff;box-shadow:0 6px 18px rgba(211,65,29,.32)}
.btn--ember:hover{background:#c33915;color:#fff;box-shadow:0 10px 26px rgba(211,65,29,.38)}
.btn--ghost{border-color:var(--line);color:var(--ink);background:#fff}
.btn--ghost:hover{border-color:var(--blue);color:var(--blue)}
.btn--light{border-color:rgba(255,255,255,.34);color:#fff}
.btn--light:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn--sm{padding:10px 18px;font-size:.83rem}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn-row--head{margin-top:0}

.pill{
  display:inline-flex;align-items:center;gap:8px;padding:6px 14px;
  border-radius:var(--r-pill);font-family:var(--f-display);font-weight:600;
  font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;
  background:var(--blue-100);color:var(--blue-lo);
}
.pill--ember{background:rgba(211,65,29,.1);color:#b53614}
.pill--soft{background:rgba(255,255,255,.09);color:#cfe0ec}
.pill--amber{background:#fff6e3;color:#8a5a00;border:1px solid #f1dfb4}

.arrow-link{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--f-display);
  font-weight:600;font-size:.87rem;color:var(--blue);
}
.arrow-link::after{content:"\2192";transition:transform .2s var(--ease)}
.arrow-link:hover::after{transform:translateX(5px)}

/* ── 05 Header & mega menu ─────────────────────────────────────────────── */
.site-header{
  position:sticky;top:0;z-index:80;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .2s var(--ease),background .2s var(--ease);
}
.site-header.is-stuck{box-shadow:0 6px 24px rgba(10,22,34,.07);background:rgba(255,255,255,.94)}
.header-bar{height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:13px;flex:none}
.brand img{height:29px;width:auto}
.brand__sub{
  display:none;padding-left:13px;border-left:1px solid var(--line);
  font-size:.66rem;line-height:1.32;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);max-width:152px;font-weight:500;
}

.nav{display:flex;align-items:center;gap:2px}
.nav__item{position:relative}
.nav__link{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--f-display);font-size:.86rem;font-weight:500;color:var(--ink-700);
  padding:9px 13px;border-radius:var(--r-pill);background:none;border:0;cursor:pointer;
  transition:color .16s var(--ease),background .16s var(--ease);
}
.nav__link:hover{color:var(--blue);background:var(--blue-050)}
.nav__link.is-active{color:var(--blue);font-weight:600}
.nav__link.is-active::after{content:none}
.nav__caret{width:9px;height:9px;stroke:currentColor;fill:none;stroke-width:2.2;transition:transform .2s var(--ease)}
.nav__item.is-open>.nav__link{color:var(--blue);background:var(--blue-050)}
.nav__item.is-open .nav__caret{transform:rotate(180deg)}

.mega{
  position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(-8px);
  min-width:520px;max-width:calc(100vw - 44px);
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-3);padding:18px;opacity:0;visibility:hidden;
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;
}
.nav__item.is-open .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega__grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.mega a{
  display:block;padding:11px 13px;border-radius:var(--r-sm);color:var(--ink);
  font-family:var(--f-display);font-weight:600;font-size:.88rem;line-height:1.3;
}
.mega a small{
  display:block;font-family:var(--f-body);font-weight:400;font-size:.78rem;
  color:var(--muted);margin-top:3px;letter-spacing:0;
}
.mega a:hover{background:var(--blue-050);color:var(--blue)}
.mega__foot{
  margin-top:12px;padding-top:14px;border-top:1px solid var(--line-2);
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  font-size:.82rem;color:var(--muted);
}

.header-cta{display:flex;align-items:center;gap:13px;flex:none}
/* Hidden by default and earned back at 1340px — see section 17. */
.header-tel{display:none;font-family:var(--f-display);font-weight:600;font-size:.85rem;color:var(--ink);white-space:nowrap}
.header-tel small{
  display:block;font-size:.6rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);
}
.nav-toggle{
  display:none;width:44px;height:44px;flex:none;border:1px solid var(--line);background:#fff;
  border-radius:var(--r-sm);cursor:pointer;align-items:center;justify-content:center;
}
.nav-toggle i{display:block;width:19px;height:2px;background:var(--ink);position:relative;border-radius:2px}
.nav-toggle i::before,.nav-toggle i::after{
  content:"";position:absolute;left:0;width:19px;height:2px;background:var(--ink);
  border-radius:2px;transition:transform .22s var(--ease),top .22s var(--ease);
}
.nav-toggle i::before{top:-6px}
.nav-toggle i::after{top:6px}
.nav-toggle[aria-expanded="true"] i{background:transparent}
.nav-toggle[aria-expanded="true"] i::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] i::after{top:0;transform:rotate(-45deg)}

/* ── 06 Hero & page heads ──────────────────────────────────────────────── */
.hero{position:relative;color:#b7cddd;overflow:hidden;background:var(--ink);isolation:isolate}
.hero__bg{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  object-position:64% 46%;opacity:.62;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg,rgba(10,22,34,.97) 6%,rgba(10,22,34,.86) 40%,rgba(10,22,34,.28) 78%),
    radial-gradient(720px 460px at 12% 4%,rgba(40,100,152,.5),transparent 62%);
}
.hero__inner{position:relative;padding:clamp(72px,5rem + 5vw,132px) 0 clamp(64px,4rem + 4vw,110px);max-width:760px}
.hero h1{color:#fff;margin-bottom:22px;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--ember-hi)}
.hero__lead{font-size:clamp(1.04rem,1rem + .3vw,1.2rem);color:#a8c0d2;max-width:56ch}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:12px 30px;margin:34px 0 0;padding:26px 0 0;
  border-top:1px solid rgba(255,255,255,.15);list-style:none;
}
.hero__meta li{
  margin:0;font-family:var(--f-display);font-size:.78rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:#8fabc0;
  display:flex;align-items:center;gap:9px;
}
.hero__meta li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ember-hi);flex:none}

.page-head{position:relative;background:var(--ink);color:#a2bacd;overflow:hidden;isolation:isolate}
.page-head::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(820px 440px at 84% 14%,rgba(40,100,152,.46),transparent 64%);
}
.page-head::after{
  content:"";position:absolute;right:-120px;top:50%;transform:translateY(-50%);z-index:-1;
  width:460px;height:460px;background:url("../img/mark.png") center/contain no-repeat;
  opacity:.05;pointer-events:none;
}
.page-head__inner{padding:clamp(48px,3rem + 3vw,86px) 0}
.page-head h1{color:#fff;max-width:22ch;text-wrap:balance}
.page-head p{max-width:64ch;margin-bottom:0;color:#a2bacd;font-size:1.04rem}
.crumbs{
  font-family:var(--f-display);font-size:.74rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:#7591a6;margin-bottom:18px;
}
.crumbs a{color:#a2bacd}
.crumbs a:hover{color:#fff}
.crumbs i{font-style:normal;margin:0 9px;opacity:.45}

/* Sticky in-page sub navigation */
.subnav{
  position:sticky;top:var(--header-h);z-index:50;background:rgba(255,255,255,.93);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.subnav ul{
  display:flex;gap:4px;list-style:none;margin:0;padding:0;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.subnav ul::-webkit-scrollbar{display:none}
.subnav li{margin:0;flex:none}
.subnav a{
  display:block;padding:15px 14px;font-family:var(--f-display);font-size:.83rem;
  font-weight:500;color:var(--slate);white-space:nowrap;border-bottom:2px solid transparent;
}
.subnav a:hover{color:var(--blue)}
.subnav a.is-current{color:var(--blue);border-bottom-color:var(--blue);font-weight:600}

/* Stat band */
.stats{background:#fff;border-bottom:1px solid var(--line)}
.stats__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.stat{padding:clamp(26px,2vw,40px) 20px;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat b{
  display:block;font-family:var(--f-display);font-weight:700;line-height:1;
  font-size:clamp(1.65rem,1.2rem + 1.5vw,2.4rem);color:var(--blue);letter-spacing:-.028em;
}
.stat span{
  display:block;margin-top:9px;font-size:.75rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);
}
.dark .stats{background:transparent;border:0}
.dark .stat{border-color:rgba(255,255,255,.12)}
.dark .stat b{color:#fff}
.dark .stat span{color:#8fabc0}

/* ── 07 Cards & bento ──────────────────────────────────────────────────── */
.card{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(22px,2vw,30px);
  transition:border-color .22s var(--ease),box-shadow .22s var(--ease),transform .22s var(--ease);
}
.card > :last-child{margin-bottom:0}
.card--link:hover{border-color:rgba(40,100,152,.42);box-shadow:var(--sh-2);transform:translateY(-3px)}
.card--flat{background:var(--mist);border-color:transparent}
.dark .card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.16)}
.dark .card--link:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.24)}
.ico{
  width:48px;height:48px;border-radius:12px;display:grid;place-items:center;margin-bottom:18px;
  background:linear-gradient(140deg,var(--blue-100),#fff);color:var(--blue);
  border:1px solid rgba(40,100,152,.14);
}
.ico svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ico--ember{background:linear-gradient(140deg,rgba(211,65,29,.12),#fff);color:var(--ember);border-color:rgba(211,65,29,.16)}
.dark .ico{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:#9fd0ff}
.card h3{margin-bottom:.42em}
.card p{font-size:.95rem}

/* Bento: first tile spans two columns on wide screens */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.bento__wide{grid-column:span 2}

/* Numbered reason rows */
.reasons{
  counter-reset:r;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;
}
.reason{background:#fff;padding:26px 28px;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
.reason::before{
  counter-increment:r;content:counter(r,decimal-leading-zero);
  font-family:var(--f-display);font-weight:700;font-size:.92rem;color:var(--blue);
  letter-spacing:.04em;padding-top:3px;opacity:.6;
}
.reason h3{font-size:1rem;margin-bottom:.34em}
.reason p{margin:0;font-size:.92rem}

/* Checklists */
.checks{list-style:none;padding:0;margin:0 0 1.15em;display:grid;gap:13px}
.checks li{margin:0;padding-left:31px;position:relative;font-size:.97rem}
.checks li::before{
  content:"";position:absolute;left:0;top:.4em;width:18px;height:18px;border-radius:50%;
  background:var(--blue-100);box-shadow:inset 0 0 0 1.5px rgba(40,100,152,.45);
}
.checks li::after{
  content:"";position:absolute;left:5.5px;top:.72em;width:7px;height:3.5px;
  border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(-45deg);
}
.dark .checks li::before{background:rgba(255,111,66,.14);box-shadow:inset 0 0 0 1.5px rgba(255,111,66,.5)}
.dark .checks li::after{border-color:var(--ember-hi)}
.checks--2{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Feature figure */
.figure{margin:0}
.figure img{width:100%;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.figure figcaption{font-size:.85rem;color:var(--muted);margin-top:13px}
.figure--shadow img{border:0;box-shadow:var(--sh-2)}
/* Crops a very tall portrait image so it cannot dominate a two-column split. */
.figure--tall img{max-height:min(640px,72vh);object-fit:cover;object-position:50% 42%}
.zoomable{cursor:zoom-in}

/* ── 08 Products, glass grades, certificates ───────────────────────────── */
.prod{
  display:grid;grid-template-columns:1fr;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;
}
.prod__head{
  display:flex;align-items:center;gap:14px;padding:20px 24px;
  border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--blue-050),#fff);
}
.prod__head h3{margin:0}
.prod__body{padding:22px 24px}
.prod__body > :last-child{margin-bottom:0}

.glass-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.glass{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:28px;
  transition:border-color .22s var(--ease),box-shadow .22s var(--ease),transform .22s var(--ease);
}
.glass:hover{border-color:rgba(40,100,152,.4);box-shadow:var(--sh-2);transform:translateY(-3px)}
.glass__swatch{width:78px;height:78px;margin-bottom:20px;filter:drop-shadow(0 8px 16px rgba(10,22,34,.2))}
.glass__name{font-family:var(--f-display);font-weight:700;font-size:1.16rem;color:var(--ink);margin:0 0 6px;letter-spacing:-.01em}
.glass__range{
  font-family:var(--f-display);font-size:.74rem;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--blue);margin:0 0 14px;
}
.glass p{font-size:.94rem;margin:0}
.glass__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:18px}
.tag{
  font-size:.68rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--blue-lo);background:var(--blue-100);padding:4px 10px;border-radius:var(--r-pill);
}

.certs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.cert{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:24px 16px;text-align:center;
}
.cert b{display:block;font-family:var(--f-display);font-size:.98rem;color:var(--ink);letter-spacing:-.01em}
.cert small{display:block;margin-top:4px;font-size:.78rem;color:var(--muted)}
.cert .pill{margin-top:11px;font-size:.62rem;padding:4px 10px}
.dark .cert{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.13)}
.dark .cert b{color:#fff}
.dark .cert small{color:#8fabc0}

/* ── 09 Steps & timeline ───────────────────────────────────────────────── */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.step{position:relative;padding-top:26px}
.step::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  font-family:var(--f-display);font-weight:700;font-size:.74rem;letter-spacing:.16em;
  color:var(--blue);position:absolute;top:0;left:0;
}
.step::after{content:"";position:absolute;top:-1px;left:0;right:14px;height:2px;background:var(--line)}
.step:first-child::after{background:var(--blue)}
.step h3{font-size:1rem;margin:12px 0 .4em}
.step p{font-size:.92rem;margin:0}
.dark .step::after{background:rgba(255,255,255,.14)}
.dark .step::before{color:var(--ember-hi)}

/* ── 10 Marquee, chips, industries ─────────────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0;list-style:none}
.chips li{margin:0}
.chips a,.chips span{
  display:inline-block;border:1px solid var(--line);border-radius:var(--r-pill);
  padding:9px 19px;font-family:var(--f-display);font-weight:500;font-size:.87rem;
  color:var(--ink-700);background:#fff;transition:all .18s var(--ease);
}
.chips a:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-050)}
.dark .chips a,.dark .chips span{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.04);color:#bed3e2}
.dark .chips a:hover{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.4)}

.ind-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.ind{background:#fff;padding:26px 24px}
.ind svg{width:26px;height:26px;stroke:var(--blue);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px}
.ind h3{font-size:1rem;margin-bottom:.35em}
.ind p{font-size:.9rem;margin:0}

/* ── 11 Tables & spec lists ────────────────────────────────────────────── */
.table-wrap{
  overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);
  background:#fff;-webkit-overflow-scrolling:touch;
}
table{border-collapse:collapse;width:100%;min-width:620px;font-size:.93rem}
caption{
  text-align:left;padding:18px 22px;font-family:var(--f-display);font-weight:600;
  color:var(--ink);border-bottom:1px solid var(--line);font-size:.95rem;
}
th,td{padding:13px 22px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line-2)}
thead th{
  position:sticky;top:0;background:var(--ink);color:#fff;font-family:var(--f-display);
  font-size:.69rem;letter-spacing:.15em;text-transform:uppercase;font-weight:600;
  border-bottom:0;white-space:nowrap;
}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--blue-050)}
td.cat,th[scope="row"]{font-family:var(--f-display);font-weight:600;color:var(--ink)}
tr.is-group td{background:var(--mist);font-family:var(--f-display);font-weight:700;color:var(--ink);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}
.t-num{font-variant-numeric:tabular-nums;white-space:nowrap}
.t-sub{display:block;font-size:.82rem;color:var(--muted);font-weight:400;font-family:var(--f-body);margin-top:2px}
.table-note{font-size:.84rem;color:var(--muted);margin:14px 0 0}

.specs{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;margin:0}
.specs > div{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:22px;
  padding:15px 24px;border-bottom:1px solid var(--line-2);
}
.specs > div:nth-child(odd){background:#fcfdfe}
.specs > div:last-child{border-bottom:0}
.specs dt{font-family:var(--f-display);font-weight:600;color:var(--ink);font-size:.93rem;margin:0}
.specs dd{margin:0;font-size:.93rem}
.specs dd .t-num{color:var(--blue-lo);font-weight:600}

/* Facility spec blocks */
.fac{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;height:100%}
.fac__head{
  display:flex;align-items:center;gap:11px;padding:17px 22px;
  background:linear-gradient(180deg,var(--blue-050),#fff);border-bottom:1px solid var(--line);
  font-family:var(--f-display);font-weight:700;color:var(--ink);font-size:.94rem;
}
.fac__head svg{width:19px;height:19px;stroke:var(--blue);fill:none;stroke-width:1.7;stroke-linecap:round;flex:none}
.fac ul{list-style:none;margin:0;padding:5px 0}
.fac li{
  display:grid;grid-template-columns:1fr auto;gap:18px;align-items:baseline;
  padding:10px 22px;margin:0;font-size:.89rem;border-bottom:1px solid var(--line-2);
}
.fac li:last-child{border-bottom:0}
.fac li b{font-weight:500;color:var(--ink-700)}
.fac li span{color:var(--blue-lo);font-weight:600;text-align:right;font-variant-numeric:tabular-nums;font-family:var(--f-display);font-size:.86rem}

/* Note / callout */
.note{
  border-left:3px solid var(--blue);background:var(--blue-050);
  padding:20px 24px;border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.note > :last-child{margin-bottom:0}
.note--warn{border-left-color:var(--ember);background:#fff5f2}
.note h3{font-size:1rem}

/* ── 12 Forms ──────────────────────────────────────────────────────────── */
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,2.4vw,38px);box-shadow:var(--sh-1)}
.field{margin-bottom:18px}
.field label{display:block;font-family:var(--f-display);font-weight:600;font-size:.83rem;color:var(--ink);margin-bottom:7px}
.field .req{color:var(--ember)}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:var(--r-sm);
  font-family:var(--f-body);font-size:.95rem;color:var(--ink);background:#fff;
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(40,100,152,.14);
}
.field textarea{min-height:140px;resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{display:none;margin-bottom:18px;padding:14px 17px;border-radius:var(--r-sm);font-size:.92rem;border:1px solid transparent}
.form-msg.is-ok{display:block;background:#e9f7ee;border-color:#bee3ca;color:#186b33}
.form-msg.is-err{display:block;background:#fdeceb;border-color:#f6c8c2;color:#a3281a}
.form-fine{font-size:.81rem;color:var(--muted);margin:0}

.contact-list{list-style:none;padding:0;margin:0;display:grid;gap:24px}
.contact-list li{margin:0;display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start}
.contact-list svg{width:20px;height:20px;stroke:var(--blue);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-top:6px}
.contact-list b{display:block;font-family:var(--f-display);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:4px}
.contact-list a{color:var(--ink);font-weight:500}
.contact-list a:hover{color:var(--blue)}
.map-frame{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--mist);line-height:0}
.map-frame iframe{width:100%;height:420px;border:0}

/* ── 13 CTA & footer ───────────────────────────────────────────────────── */
.cta{position:relative;background:var(--ink);color:#b7cddd;overflow:hidden;isolation:isolate}
.cta__bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;opacity:.4}
.cta::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(92deg,rgba(10,22,34,.96) 10%,rgba(10,22,34,.78) 52%,rgba(10,22,34,.42));
}
.cta__inner{padding:clamp(56px,3.5rem + 3vw,96px) 0}
.cta h2{color:#fff;max-width:22ch;text-wrap:balance}
.cta p{max-width:58ch;color:#b0c7d8}

.site-footer{background:var(--ink);color:#8ba5b8;padding-top:clamp(52px,3rem + 3vw,80px);font-size:.92rem}
.site-footer h2{font-size:.72rem;letter-spacing:.17em;text-transform:uppercase;color:#fff;margin-bottom:18px;font-weight:600}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.35fr;gap:44px;padding-bottom:48px}
.site-footer .f-logo{height:29px;width:auto;margin-bottom:18px}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:9px}
.site-footer a{color:#8ba5b8}
.site-footer a:hover{color:#fff}
.site-footer address{font-style:normal;line-height:1.75}
.f-tagline{font-size:.88rem;color:#7d99ad;max-width:36ch}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);padding:22px 0;display:flex;flex-wrap:wrap;
  gap:8px 26px;justify-content:space-between;font-size:.83rem;color:#6a8497;
}
.footer-bottom p{margin:0}
.footer-bottom a{color:#6a8497}

/* ── 14 Lightbox, reveal, utilities ────────────────────────────────────── */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(6,13,20,.94);display:none;align-items:center;justify-content:center;padding:24px}
.lightbox.is-open{display:flex}
.lightbox img{max-width:min(1240px,96vw);max-height:92vh;width:auto;border-radius:var(--r-sm);background:#fff}
.lightbox button{
  position:absolute;top:20px;right:22px;width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;
  font-size:1.6rem;line-height:1;cursor:pointer;
}
.lightbox button:hover{background:rgba(255,255,255,.14)}

[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}

.mb-0{margin-bottom:0}
.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-40{margin-top:40px}.mt-56{margin-top:56px}
.center{text-align:center}
.muted{color:var(--muted)}
.small{font-size:.88rem}
.nowrap{white-space:nowrap}
.divider{height:1px;background:var(--line);border:0;margin:clamp(38px,4vw,60px) 0}
.dark .divider{background:rgba(255,255,255,.12)}
.stack-lg > * + *{margin-top:clamp(34px,3vw,52px)}

/* ── 15 Responsive ─────────────────────────────────────────────────────── */
/* 1560, not 1180. The strapline is 165px and the row has nowhere to put it
   below that — it was the single biggest cause of the clipping. */
@media (min-width:1560px){ .brand__sub{display:block} }

@media (max-width:1120px){
  .g-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .certs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ind-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:1fr 1fr;gap:34px}
}

/* 1099, not 980: the horizontal nav does not fit under about 1100px once the
   bar also carries the language switcher and the Enquire button. German sets
   that floor, not English — its nav row is 662px against English's 591px. The
   content-layout breakpoint stays at 980px, below; do not merge the two. */
@media (max-width:1099px){
  :root{--header-h:68px}
  .nav-toggle{display:flex}
  /* Below this width the bar holds brand + language + Enquire + toggle with no
     nav to absorb the squeeze, so the brand has to be the thing that gives —
     see section 17. Above it, .brand stays flex:none or the logo shrinks on
     the desktop header, which is what happened when this was set globally. */
  .brand{flex:0 1 auto;min-width:0}
  .brand img{max-width:100%;object-fit:contain;object-position:left center}
  .nav{
    position:fixed;left:0;right:0;top:var(--header-h);display:none;
    flex-direction:column;align-items:stretch;gap:0;background:#fff;
    padding:8px 16px 24px;border-bottom:1px solid var(--line);
    box-shadow:var(--sh-2);max-height:calc(100dvh - var(--header-h));overflow-y:auto;
  }
  .nav.is-open{display:flex}
  .nav__item{width:100%}
  .nav__link{
    width:100%;justify-content:space-between;padding:14px 8px;border-radius:0;
    border-bottom:1px solid var(--line-2);font-size:1rem;
  }
  .nav__link:hover{background:transparent}
  .mega{
    position:static;transform:none;min-width:0;opacity:1;visibility:visible;
    box-shadow:none;border:0;border-bottom:1px solid var(--line-2);border-radius:0;
    padding:6px 0 14px;display:none;
  }
  .nav__item.is-open .mega{display:block;transform:none}
  .mega__grid{grid-template-columns:1fr;gap:0}
  .mega a{padding:11px 16px;font-size:.92rem}
  .mega a small{display:none}
  .mega__foot{padding-inline:16px}
}

@media (max-width:980px){
  .split,.split--media-lg,.split--text-lg{grid-template-columns:1fr}
  /* Two even columns: the wide tiles stop spanning so the grid stays gapless. */
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento__wide{grid-column:auto}
  .reasons{grid-template-columns:1fr}
  .glass-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .hero__bg{opacity:.4;object-position:70% 50%}
}

@media (max-width:660px){
  :root{--gutter:18px}
  body{font-size:16px}
  .g-2,.g-3,.g-4,.bento,.glass-grid,.field-row,.checks--2,.ind-grid,.steps{grid-template-columns:1fr}
  .bento__wide{grid-column:auto}
  .certs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:1fr;gap:30px}
  .specs > div{grid-template-columns:1fr;gap:3px}
  .reason{grid-template-columns:1fr;gap:8px}
  .step::after{right:0}
  .brand img{height:25px}
  /* Two stats per row at this width leaves very little inside each cell. */
  .stat{padding-inline:14px}
  .stat span{letter-spacing:.09em}
  .btn{padding:13px 22px}
  .btn-row .btn{flex:1 1 auto}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  [data-reveal]{opacity:1;transform:none}
}

/* ── Language switcher and translation notice ─────────────────────────────
   Both are written into the pages by build-i18n.js, never by hand, so the
   markup these style is fixed there. Change one and change the other. */
.lang{
  display:flex;align-items:center;gap:2px;flex:none;
  padding:2px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--white);
}
.lang__opt{
  font-family:var(--f-display);font-weight:600;font-size:.72rem;letter-spacing:.06em;
  line-height:1;color:var(--slate);padding:6px 9px;border-radius:5px;
  transition:color .18s var(--ease),background .18s var(--ease);
}
a.lang__opt:hover,a.lang__opt:focus-visible{color:var(--ink);background:var(--mist)}
/* The current language is a <span>, not a link - it is state, not a destination. */
.lang__opt.is-current{color:var(--white);background:var(--blue);cursor:default}
@media (max-width:560px){
  .lang{padding:1px}
  .lang__opt{padding:5px 6px;font-size:.66rem;letter-spacing:.04em}
}

/* Sits directly under the header on /de/ and /cn/ pages only. Publishing an
   unreviewed translation of corrosion limits without saying so would be
   indefensible, so this is not decoration and must not be quietly dropped. */
.mt-notice{
  margin:0;padding:10px 20px;text-align:center;
  background:var(--mist);border-bottom:1px solid var(--line);
  font-size:.82rem;line-height:1.45;color:var(--slate);
}
.mt-notice a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}

@media print{
  .site-header,.subnav,.cta,.site-footer,.btn-row,.nav-toggle,.lightbox{display:none !important}
  body{color:#000;font-size:11pt}
  .dark,.page-head,.hero{background:#fff !important;color:#000 !important}
  .dark h1,.dark h2,.dark h3,.page-head h1{color:#000 !important}
  a{color:#000;text-decoration:underline}
  .table-wrap{border-color:#999}
}

/* ── 16 WhatsApp, quick enquiry, legal identifiers ──────────────────────────
   Added 2026-09-10, ahead of the first paid-advertising spend. Three additions,
   all of them things a cold visitor arriving from an advertisement looks for and
   the site did not have: a WhatsApp channel, a way to enquire without leaving
   the home page, and the company's registration numbers.

   The WhatsApp number is the same one published everywhere else on the site.
   There is one number on this site; if a second, WhatsApp-only line is ever
   used, change it in every page at once — it is written into the markup, not a
   variable. */

/* The floating button. Deliberately NOT hidden on desktop: a plant engineer at a
   workstation is as likely to use WhatsApp Web as a phone. It sits below the
   lightbox (z-index 200) so an enlarged figure still covers it, and above
   everything else. */
.wa-float{
  position:fixed;right:clamp(14px,2.2vw,26px);bottom:clamp(14px,2.2vw,26px);z-index:120;
  display:flex;align-items:center;gap:10px;
  height:56px;padding:0 18px 0 16px;border-radius:999px;
  background:#25d366;color:#0a1622;
  font-family:var(--f-display);font-weight:700;font-size:.9rem;letter-spacing:.01em;
  box-shadow:0 6px 22px rgba(10,22,34,.28),0 0 0 4px rgba(37,211,102,.16);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.wa-float:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(10,22,34,.34),0 0 0 6px rgba(37,211,102,.2);
}
.wa-float:focus-visible{outline:3px solid #fff;outline-offset:3px}
.wa-float svg{width:26px;height:26px;fill:currentColor;flex:none}
/* Below 560px the label goes and it becomes a plain circle — at that width the
   words push the button into the content, and the glyph is unambiguous. */
@media (max-width:560px){
  .wa-float{width:56px;padding:0;justify-content:center}
  .wa-float span{display:none}
}
@media (prefers-reduced-motion:reduce){
  .wa-float{transition:none}
  .wa-float:hover{transform:none}
}

/* The header entry. Hidden below 1120px, where the header is already carrying
   the phone number, the language switcher, the Enquire button and the menu
   toggle — the floating button covers that width and every width under it. */
.header-wa{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:40px;height:40px;border-radius:50%;
  background:#e8faef;color:#128c40;border:1px solid #bfe9cf;
  transition:background .16s var(--ease),border-color .16s var(--ease);
}
.header-wa:hover{background:#d5f5e2;border-color:#8fd9ac}
.header-wa svg{width:21px;height:21px;fill:currentColor}
@media (max-width:1179px){ .header-wa{display:none} }

/* The home-page quick enquiry. The full form lives on contact.html and stays
   there; this is the four fields that let advertising traffic convert without a
   second page load. It posts to the same handler, so it files into the ERP,
   mails the office and acknowledges the sender exactly like the long form —
   there is no second code path to keep in step.
   data-track names the conversion event; site.js reads it. */
.cta__inner--split{
  display:grid;grid-template-columns:1fr minmax(340px,440px);gap:clamp(28px,4vw,64px);
  align-items:center;
}
.cta__inner--split h2{max-width:18ch}
.cta__inner--split p{max-width:46ch}
.quick-form{padding:clamp(20px,2vw,28px)}
/* The card is white but it sits INSIDE .cta, whose `.cta p{color:#b0c7d8}` is
   meant for the dark band behind it. That rule out-specifies a bare `.muted`,
   so without these two lines the form's helper text renders pale blue on white
   and is close to unreadable. Any text added to this card needs the same care.
   Scoped to a direct-child `p` on purpose: .form-msg carries its own is-ok /
   is-err colours and must keep them, so it is left out rather than overridden. */
.quick-form > p{color:var(--muted);max-width:none}
.quick-form h3{font-size:1.06rem;margin-bottom:4px}
.quick-form .field{margin-bottom:13px}
.quick-form .field-row{gap:13px}
.quick-form textarea{min-height:84px}
.quick-form .form-fine{margin-top:11px;font-size:.76rem;color:var(--muted)}
@media (max-width:980px){
  .cta__inner--split{grid-template-columns:1fr;gap:32px}
  .cta__inner--split h2,.cta__inner--split p{max-width:58ch}
}
@media (max-width:660px){
  .quick-form .field-row{grid-template-columns:1fr}
}

/* GSTIN and CIN. Indian B2B buyers look for these before they treat a supplier
   as real, and their absence was the cheapest trust gap on the site to close.
   They belong in the footer strip, not in the address block — they identify the
   company, not the place. */
.f-legal{font-variant-numeric:tabular-nums;letter-spacing:.01em}
.f-legal b{font-weight:600;color:#8ba5b8}
@media (max-width:660px){
  .footer-bottom{gap:6px 18px}
  .f-legal{order:3;width:100%}
}

/* ── 17 Phone header, and the sub-nav scroll affordance ────────────────────
   Added 2026-09-15 after both faults were measured in a 390px frame.

   THE MENU BUTTON WAS OFF SCREEN ON EVERY PHONE. .header-bar is a flex row and
   every one of its children — brand, language switcher, Enquire, toggle — was
   flex:none, so the bar had a hard min-content width of 451px. body has
   overflow-x:hidden, so below 451px the surplus was not scrolled to, it was
   silently clipped; and the toggle, being last in source order, was the first
   thing clipped. Measured: at 390px the toggle's box started at x=407. At 320,
   360, 390, 414 and 430 the bar came out 451px wide every time and the button
   was never on screen. There was no way to open the navigation on a phone.

   The rule that now holds: the brand gives way first and the toggle never
   does. Do not put flex:none back on .brand, and do not add a fourth fixed
   control to .header-cta without re-measuring at 320px. The German and Chinese
   headers carry the same controls with longer labels, so they are the tighter
   case, not the English one. */

@media (max-width:560px){
  .header-bar{gap:12px}
  .header-cta{gap:10px}
  /* Moved into the menu panel by site.js, which is also what styles it there.
     Hidden here rather than left to the script, so the header is correct even
     if site.js never runs — the switcher is then absent at this width, which
     is survivable; an unreachable menu was not. */
  .header-bar > .lang{display:none}
  .nav > .lang{align-self:flex-start;margin:16px 8px 4px}
}

@media (max-width:400px){
  :root{--gutter:14px}
  .header-bar{gap:10px}
  .header-cta{gap:8px}
  .brand img{height:22px}
  .header-cta .btn--sm{padding:9px 13px;font-size:.76rem}
  .nav-toggle{width:42px;height:42px}
}

/* THE SUB-NAV RAN OFF THE EDGE WITH NOTHING TO SAY SO. .subnav ul scrolls
   horizontally with its scrollbar deliberately suppressed. On products.html —
   twelve sections, 1277px of links inside a 1156px wrap — 121px was cut off at
   every desktop width, with no scrollbar, no fade and no control: the list
   simply ended mid-word. On a phone 938px of it is out of view.

   The wrapper, the arrows and the fades are built by site.js, not written into
   the markup, because nine pages carry a sub-nav and each exists in three
   languages. Style them here; build them there; never fork them per page. */

.subnav__scroll{position:relative}

/* Above the strip, not on it, so links scroll underneath and stay clickable. */
.subnav__scroll::before,.subnav__scroll::after{
  content:"";position:absolute;top:0;bottom:0;width:54px;z-index:2;
  pointer-events:none;opacity:0;transition:opacity .18s var(--ease);
}
.subnav__scroll::before{left:0;background:linear-gradient(90deg,#fff 15%,rgba(255,255,255,0))}
.subnav__scroll::after{right:0;background:linear-gradient(270deg,#fff 15%,rgba(255,255,255,0))}
.subnav__scroll.is-scrollable:not(.at-start)::before{opacity:1}
.subnav__scroll.is-scrollable:not(.at-end)::after{opacity:1}

.subnav__btn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;display:none;
  align-items:center;justify-content:center;width:30px;height:30px;padding:0;
  border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--slate);
  cursor:pointer;box-shadow:var(--sh-1);
  transition:color .16s var(--ease),border-color .16s var(--ease);
}
.subnav__btn:hover{color:var(--blue);border-color:var(--blue)}
.subnav__btn svg{
  width:10px;height:16px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.subnav__btn--prev{left:-5px}
.subnav__btn--next{right:-5px}
/* Touch swipes the strip already, and an arrow parked over the first link is
   something to mis-tap. The fades still mark the edges there. */
@media (hover:hover){
  .subnav__scroll.is-scrollable:not(.at-start) .subnav__btn--prev{display:flex}
  .subnav__scroll.is-scrollable:not(.at-end) .subnav__btn--next{display:flex}
}

/* ── 18 The desktop header gets its own, wider band ────────────────────────
   Added 2026-09-15, on the owner's decision, to stop the header clipping its
   own right-hand end. Before this the bar asked for 1394px of content inside
   the 1156px prose wrap — a permanent 238px overflow that body's
   overflow-x:hidden swallowed without a scrollbar — so the Enquire button, the
   phone number and the WhatsApp icon fell off the right edge at 1024, 1180,
   1280, 1366, 1440 and 1600px. Only about 1100px happened to fit.

   Two things carry the fix. The bar now has a wider max-width than the prose
   wrap, so the logo sits left of the content column below it: that is the
   accepted trade, not a mistake to "correct" by putting --wrap back. And the
   three optional decorations are earned rather than assumed — each appears
   only at a width that can actually hold it:

       WhatsApp icon   >= 1180    (was 1121)
       phone number    >= 1340    (was 1121)
       brand strapline >= 1560    (was 1180)

   Budget at the tightest point of each band, measured in German, which is the
   constraint throughout — its nav row is 662px against English's 591px and its
   Enquire label 95px against 87px. Check DE, never EN, before adding anything
   to this row. */

.site-header > .wrap{max-width:1560px}

/* While the row is tight, tighten the row. Above 1440 it can afford its normal
   spacing. These are the numbers the budget above was computed with. */
@media (max-width:1439px){
  .header-bar{gap:12px}
  .header-cta{gap:10px}
  .nav__link{padding-left:9px;padding-right:9px}
  .lang__opt{padding-left:7px;padding-right:7px}
}

@media (min-width:1340px){ .header-tel{display:block} }