@charset "UTF-8";
/* ---- business.css ---- */
/* business pages (bz-): shared by business / life-science / industrial-materials / coating */

/* page head photo: keep the person's head inside the wide crop */
@media (min-width: 761px) { .bz-ph--up img { object-position: 50% 24%; } }

/* statement heading across the full width, then text + line drawing below it */
.bz-catch { margin-bottom: clamp(28px, 4vw, 56px); }
@media (max-width: 760px) { .bz-catch { font-size: var(--fs-h3); text-align: center; } }
@media (min-width: 861px) { .bz-intro { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.bz-ill { width: min(100%, 420px); margin-inline: auto; }
@media (max-width: 860px) { .bz-ill { width: min(78%, 300px); } }

/* greeting: portrait + words on one white sheet (the portraits are small originals: never wider than 220px) */
.bz-msg { display: grid; grid-template-columns: min(220px, 36%) minmax(0, 1fr); gap: clamp(24px, 4.5vw, 64px); align-items: center; }
.bz-msg__ph { border-radius: var(--r-s); overflow: hidden; }
.bz-msg__ph img { width: 100%; }
@media (max-width: 760px) {
  .bz-msg { grid-template-columns: minmax(0, 1fr); }
  .bz-msg__ph { width: min(100%, 200px); margin-inline: auto; }
}

/* related product tiles: 6 tiles = 3 columns, 4 tiles = 2 columns on tablets */
@media (min-width: 1081px) { .bz-pg--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 761px) and (max-width: 1080px) { .bz-pg--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* a plane as the last block keeps clear of the contact band */
.bz-end { margin-bottom: clamp(40px, 6vw, 88px); }

/* link block to the product list (heading + button beside a line drawing) */
.bz-link .sh { margin-bottom: 0; }
@media (max-width: 760px) { .bz-c { text-align: center; } }

/* ---- coating.css ---- */
/* coating (ct-): product blocks (photo on one half, words on the other), link rows, licence line */
.ct-list { display: grid; gap: clamp(56px, 8vw, 112px); }
.ct-prod .split__ph { aspect-ratio: 3 / 2; }
.ct-prod__en { font: 500 var(--fs-small)/1.5 var(--mono); letter-spacing: .04em; color: var(--blue); }
.ct-prod__name { margin-top: 10px; }
.ct-prod__txt { margin-top: 20px; }
.ct-prod__txt a { color: var(--blue); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.ct-prod__std { margin-top: 16px; font-weight: 700; color: var(--ink); }
.ct-links { margin-top: 28px; }
.ct-links li { border-bottom: 1px solid var(--grid-2); }
.ct-links li:first-child { border-top: 1px solid var(--grid-2); }
.ct-links a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 12px 0; font-weight: 700; color: var(--blue); line-height: 1.6; }
.ct-links .arw { width: 30px; height: 30px; }
.ct-links a:hover .arw { transform: rotate(-45deg) translateX(4px); }
@media (max-width: 760px) { .ct-prod__en, .ct-prod__name { text-align: center; } }

.ct-lic { margin-top: 24px; font-weight: 700; color: var(--ink); }

/* ---- column.css ---- */
/* column: the list page and the articles */

/* a title line that is a block of its own: the title in a list row, and in an article the bold first line
   of a paragraph (the "Q." line of a FAQ, the first line of a consultation box) */
.clm-ttl { display: block; }
.clm-ttl + br { display: none; }

/* article: the picture at the top keeps its own shape (the pictures carry lettering, so nothing is cut off) */
.art__eye.clm-eye { aspect-ratio: auto; }
.clm-eye img { height: auto; }
/* article: on phones a long title in the breadcrumb is centred like the rest of the breadcrumb */
@media (max-width: 760px) { .clm-pgh .crumb li { text-align: center; text-wrap: balance; } }
/* article: headings of two lines or more are split into lines of about the same length (no one or two characters left alone) */
.clm-art h1, .clm-art h2, .clm-art h3, .clm-art .clm-ttl { text-wrap: balance; }
.clm-art .clm-ttl { text-align: left; }
.clm-art .clm-ttl:not(.is-flow) { word-break: keep-all; overflow-wrap: anywhere; }
/* article: a URL written out as text may break at any character */
.clm-url { word-break: break-all; }

/* article: a pale box (the summary box and the consultation box of the articles) */
.clm-note { background: var(--pale); border-radius: var(--r-s); padding: clamp(20px, 3vw, 32px); }
.clm-note > * + * { margin-top: 1em; }
.art__body .clm-note ul, .art__body .clm-note ol { padding: 0; background: none; border-radius: 0; }
.clm-act { display: flex; justify-content: center; }
.art__body .clm-btn { color: #fff; text-decoration: none; }

/* list page: nothing matches the chosen kind */
.clm-empty { display: none; padding-block: clamp(24px, 4vw, 48px); text-align: center; }
.clist:not(:has(> li:not([hidden]))) + .clm-empty { display: block; }

/* ---- company.css ---- */
/* company: outline / message / philosophy / history / link to group */
.cmp-outl .dl dd { text-align: left; }
.cmp-map { margin-top: clamp(32px, 4vw, 56px); border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 9; background: var(--pale); }
.cmp-map iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (min-width: 861px) {
  .cmp-outl { grid-template-columns: minmax(0, .9fr) minmax(0, 2fr); }
  .cmp-outl > .sh { position: sticky; top: calc(var(--hd-bar) + var(--hd-gap) * 2 + 24px); margin-bottom: 0; }
}
@media (max-width: 760px) { .cmp-map { aspect-ratio: 4 / 3; } }

.cmp-msg { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.cmp-msg__ill { aspect-ratio: 3 / 4; }
.cmp-msg__ill img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .cmp-msg { grid-template-columns: minmax(0, 1fr); }
  .cmp-msg__ill { order: -1; width: min(72%, 260px); margin-inline: auto; }
}

.cmp-phi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.cmp-phi__ttl .ln { white-space: nowrap; }
.cmp-phi__txt { margin-top: clamp(24px, 3vw, 40px); }
.cmp-phi__fig { background: #fff; border-radius: var(--r); padding: clamp(8px, 2vw, 24px); }
.cmp-phi__fig img { width: 100%; }
@media (max-width: 860px) {
  .cmp-phi { grid-template-columns: minmax(0, 1fr); }
  .cmp-phi__fig { width: min(100%, 600px); margin-inline: auto; }
}
@media (max-width: 760px) {
  .cmp-phi__ttl { text-align: center; }
  .cmp-phi__fig { width: auto; margin-inline: -12px; }
}

.cmp-grp__ph { aspect-ratio: 3 / 2; }
.cmp-grp__sh { margin-bottom: clamp(20px, 2.4vw, 32px); }
.cmp-grp__ph + div .acts { margin-top: 28px; }
@media (max-width: 760px) { .cmp-grp__lead { text-align: center; } }

/* ---- contact.css ---- */
/* contact: phone number at left, the form sheet at right */
.cnt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.cnt__place { margin-top: 16px; font-weight: 700; color: var(--blue); line-height: 1.6; }
.cnt__tel { color: var(--blue); line-height: 1.3; }
.cnt__tel a { font: 600 var(--fs-h2)/1.3 var(--en); letter-spacing: .03em; white-space: nowrap; }
.cnt__tel span { font-size: var(--fs-small); font-weight: 700; }
.cnt__h { margin-bottom: clamp(20px, 2.6vw, 32px); }
.cnt__pv { font-size: var(--fs-small); font-weight: 700; line-height: 1.9; text-align: center; }
.cnt__pv a { color: var(--blue); text-decoration: underline; text-underline-offset: 4px; }
.cnt .form[hidden] { display: none; }
.cnt__done { display: grid; gap: 12px; justify-items: center; text-align: center; padding-block: clamp(24px, 4vw, 56px); }
.cnt__done-ttl { text-wrap: balance; }
@media (min-width: 861px) { .cnt__side { position: sticky; top: calc(var(--hd-bar) + var(--hd-gap) * 2 + 24px); padding-top: clamp(24px, 4.5vw, 64px); } }
@media (max-width: 860px) { .cnt { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .cnt__side, .cnt__h { text-align: center; }
  .cnt__pv { text-align: left; }
}

.cnt__tel a, .cnt__tel span { display: block; }
.cnt__tel-s { font-size: var(--fs-small); font-weight: 700; }

/* ---- group.css ---- */
/* group: lead with the globe drawing, then one outline block per company */
.grp-lead { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.grp-lead__txt { margin-top: clamp(24px, 3vw, 40px); }
.grp-lead__vis { position: relative; width: min(100%, 460px); margin-inline: auto; padding-bottom: 88px; }
.grp-lead__ill img { width: 100%; }
.grp-lead__ph { position: absolute; right: 0; bottom: 0; width: 220px; border-radius: var(--r-s); overflow: hidden; }
.grp-lead__ph img { width: 100%; }
@media (max-width: 860px) {
  .grp-lead { grid-template-columns: minmax(0, 1fr); }
  .grp-lead__vis { order: -1; width: min(88%, 340px); padding-bottom: 76px; }
  .grp-lead__ph { width: 200px; }
}
@media (max-width: 760px) { .grp-lead__ttl { text-align: center; } }

.grp-list { display: grid; gap: clamp(48px, 7vw, 96px); }
.grp-co { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
.grp-co__head { text-spacing-trim: trim-start; }
.grp-co__catch { margin-top: 12px; font-weight: 700; color: var(--ink); line-height: 1.8; text-wrap: balance; }
.grp-co .dl dd { text-align: left; }
.grp-co__url { color: var(--blue); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 960px) { .grp-co { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .grp-co__head { text-align: center; } }

/* ---- prd2-products.css ---- */
/* product category pages (lubricants, coatings, equipment, pharma, devices, packaging):
   the three columns keep the same widths in every tab; small product pictures sit under the product name */
@media (min-width: 761px) {
  .prd2-t { table-layout: fixed; }
  .prd2-t th:nth-child(1) { width: 28%; }
  .prd2-t th:nth-child(2) { width: 42%; }
  .prd2-t th:nth-child(3) { width: 30%; }
  .prd2-t a.prd2-btn { display: flex; width: fit-content; }
}
/* narrow three-column range: more room for the product name, tighter cell sides */
@media (min-width: 761px) and (max-width: 1000px) {
  .prd2-t th:nth-child(1) { width: 34%; }
  .prd2-t th:nth-child(2) { width: 34%; }
  .prd2-t th:nth-child(3) { width: 32%; }
  .prd2-t th, .prd2-t td { padding-inline: 12px; }
}
@media (max-width: 760px) {
  /* a page with one tab: the single tab runs the full width of the zone under it */
  .prd2-one .tabs__list { grid-template-columns: minmax(0, 1fr); }
  /* a cell the current page leaves empty takes no room in the stacked layout */
  .ptable td.prd2-nil { display: none; }
}
.prd2-t td img { max-width: min(100%, 200px); }
.prd2-nm { display: block; }
.prd2-imgs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 10px; }
.prd2-t td .prd2-imgs img { margin-top: 0; }
.prd2-imgs--h img { height: 120px; width: auto; }
/* "details" button inside a product cell: the site button, one size smaller */
.prd2-t a.prd2-btn { margin-top: 12px; min-width: 0; min-height: 46px; padding: 6px 10px 6px 18px; gap: 14px; font-size: var(--fs-small); color: #fff; text-decoration: none; }
.prd2-btn .arw { width: 26px; height: 26px; }
.prd2-t td .prd2-bn { max-width: min(100%, 260px); }
/* a diagram with small labels is shown at its own size */
.prd2-t td .prd2-w { max-width: min(100%, 305px); }

/* ---- privacy.css ---- */
/* privacy: one white sheet, clause headings in .h4 */
.pv { width: min(100%, 960px); margin-inline: auto; }
.pv > * + * { margin-top: 1lh; }
.pv > .h4 { margin-top: clamp(36px, 4.4vw, 52px); }
.pv > .h4 + * { margin-top: 12px; }
.pv__list { display: grid; gap: 4px; }
.pv__list li { padding-left: 1em; text-indent: -1em; }

/* ---- products.css ---- */
/* products list + the product category pages (cosmetic / food / chemicals / battery / resins) */

/* list page: the plane keeps clear of the head photo; tile text stacks; the 12th cell holds the line drawing */
.prd-list { margin-top: clamp(40px, 6vw, 88px); }
.prd-pg .pt__name, .prd-pg .pt__txt { display: block; }
.prd-pg__ill { display: grid; place-items: center; min-width: 0; }
.prd-pg__ill img { width: 125%; max-width: none; }
@media (max-width: 760px) { .pg > li.prd-pg__ill { display: none; } }

/* category pages: tab groups stacked as on the current pages */
.prd-groups > .tabs + .tabs { margin-top: clamp(40px, 5vw, 72px); }

/* product tables */
.ptable.prd-one th:only-child { border-radius: 8px; }
/* the three columns keep the same widths in every tab; pictures never push a column wider */
@media (min-width: 761px) {
  .prd-3 { table-layout: fixed; }
  .prd-3 th:nth-child(1) { width: 28%; }
  .prd-3 th:nth-child(2) { width: 42%; }
  .prd-3 th:nth-child(3) { width: 30%; }
}
@media (min-width: 761px) and (max-width: 1000px) {
  .prd-3 th:nth-child(1) { width: 34%; }
  .prd-3 th:nth-child(2) { width: 34%; }
  .prd-3 th:nth-child(3) { width: 32%; }
  .prd-3 th, .prd-3 td { padding-inline: 12px; }
}
.prd-t td img { max-width: min(100%, 200px); }
.prd-t td > p + p, .prd-t td > p + ul, .prd-t td > ul + p, .prd-t td > ul + ul { margin-top: 10px; }
.prd-t td:first-child.is-just { text-align: left; }   /* product names wrap as they are, not stretched */
.prd-spec li.is-just { text-align: left; }   /* grade names and figures: not stretched */
.prd-sub { display: block; margin-top: 4px; font-size: var(--fs-small); font-weight: 500; color: var(--ink-2); line-height: 1.9; }
.prd-big { display: block; margin-top: 8px; font-size: var(--fs-h4); font-weight: 700; line-height: 1.6; }
.prd-pics { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 10px; }
.prd-pics a { display: block; }
.ptable .prd-pics img { margin-top: 0; }
.ptable td img.prd-w-s { max-width: 92px; }
.ptable td img.prd-w-m { max-width: 150px; }
.ptable td img.prd-w-l { max-width: min(100%, 320px); }
.ptable td img.prd-h-s { max-width: none; width: auto; height: 110px; }
.ptable td.prd-logo a { display: block; width: min(100%, 327px); margin-inline: auto; }
.ptable td.prd-logo img { margin-top: 0; width: 100%; max-width: 100%; border-radius: 0; }
.ptable a.prd-btn { margin-top: 12px; min-width: 0; min-height: 46px; padding: 6px 10px 6px 18px; gap: 14px; font-size: var(--fs-small); color: #fff; text-decoration: none; }
.prd-btn .arw { width: 26px; height: 26px; }
@media (max-width: 760px) {
  .ptable td.prd-nil { display: none; }
  .ptable.prd-one td:first-child { font-size: 16px; color: var(--ink); }
  .ptable.prd-one tr { padding: 14px 0; }
  .ptable.prd-one tr:first-child { padding-top: 0; }
}

/* reading text under a table (inside a tab panel) */
.prd-note { margin-top: clamp(32px, 4vw, 56px); }
.prd-note .h4 { color: var(--blue); }
.prd-note .prose { margin-top: 16px; }
.prd-note a { color: var(--blue); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }