@font-face { font-family: "Figtree"; src: url("/assets/fonts/figtree-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/assets/fonts/figtree-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/assets/fonts/figtree-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/assets/fonts/figtree-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

/* Distributor style: light grey ground, navy ink, the logo blue as the one accent, Figtree throughout,
   Plex Mono for small labels and data. */
:root {
  /* Motion: one easing for the whole site, a quick start that settles slowly */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --bg: #f6f7f5;
  --surface: #ffffff;
  --tint: #eef1f3;
  --ink: #0e1d2b;
  /* Accent: the logo's own blue, used as is (4.9:1 on white). Buttons, links, labels, selections.
     Green is kept for one meaning only, "done": an ingredient added to the request. */
  --accent: #2967f2;
  --accent-dark: #1f52c9;
  --success: #1f7a3e;
  --forest: #0e1d2b;
  --text: #56636f;
  --muted: #56636f;
  --label: #2967f2;
  --olive: #2967f2;
  --olive-dark: #0e1d2b;
  --band: #eef1f3;
  --band-text: #56636f;
  --accent-blue: #2967f2;
  --rule: #dde2e6;
  --rule-strong: #c9d1d8;
  --motif: #c9d1d8;
  --display: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --font: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --radius: 999px;
  --wrap: 1440px;
  --gutter: clamp(16px, 4vw, 48px);
  --space: clamp(80px, 9vw, 128px);
  /* Dark ground under the see-through header on inner pages */
  /* Behind every page banner: the graphite of the ingredient pages, so plain banners (Contact,
     Privacy, 404) match the rest of the site */
  --deep: #2a3036;
  --deep-label: #a9c3ff;
  --header-h: 92px;
  color-scheme: light;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
/* Desktop draws the whole site at 90 %, the size it reads best at on a computer screen. Phones and tablets
   stay at 100 %: smaller text would be hard to read there, and iPhones zoom in on form fields under 16px.
   Screen-height sizes are divided by --zoom so the home photo still fills the screen. */
:root { --zoom: 1; }
@media (min-width: 1081px) { :root { --zoom: 0.9; } html { zoom: var(--zoom); } }
body { display: flex; flex-direction: column; min-height: calc(100vh / var(--zoom)); margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--font); -webkit-font-smoothing: antialiased; }
main { flex: 1; }
img, picture { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
h1, h2, h3 { margin: 0; color: var(--ink); font-family: var(--display); font-weight: 500; line-height: 1.08; letter-spacing: -0.015em; text-wrap: balance; }
h1 { font-size: clamp(38px, 5vw, 64px); }
h2 { font-size: clamp(30px, 3.4vw, 50px); }
h3 { font-size: 20px; font-weight: 600; letter-spacing: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.over-hero :focus-visible { outline-color: #ffffff; }
/* Reduced motion: nothing moves, but colour and fade changes stay (short), since they help follow what changed */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-property: color, background-color, border-color, opacity !important; transition-duration: 0.15s !important; } }

/* Utilities */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.narrow > * { max-width: 780px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 50; background: var(--ink); color: #ffffff; padding: 10px 16px; }
.skip:focus { top: 12px; color: #ffffff; }
.mono { font-family: var(--mono); font-size: 0.9em; }
.section { padding-block: var(--space); }
.section-tint { background: var(--surface); border-block: 1px solid var(--rule); }
.section-head { display: grid; gap: 16px; max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
.section-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: clamp(32px, 4vw, 48px); }
.section-title { margin-bottom: clamp(32px, 4vw, 48px); }
.section-intro { margin: 8px 0 28px; }
.section-foot { margin-top: 32px; }
/* Small uppercase labels, in the text face; the mono face is kept for data (INCI, codes, counts) */
.label, .eyebrow { font: 600 12px/1.4 var(--font); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.lead { font-size: 19px; line-height: 1.6; color: var(--text); max-width: 640px; }
.tag { justify-self: start; display: inline-block; background: var(--tint); color: var(--ink); font: 600 12px/1 var(--font); letter-spacing: 0.04em; padding: 6px 10px; border-radius: 999px; }
.link-arrow, .mono-link { font-size: 15px; font-weight: 600; text-decoration: none; }
.link-arrow::after { content: "→"; display: inline-block; margin-left: 0.35em; transition: transform 0.25s var(--ease-out); }
/* Hover underlines draw in from left to right */
.link-arrow, .mono-link, .nav-list a, .maker-table tbody th a, .maker-count, .contact-li, .catalog-table td a, .partner-site, .intro-website, .partner-body h2 a, .site-footer a:not(.footer-lang) { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.2s var(--ease-out), color 0.2s; }
.link-arrow:hover, .mono-link:hover, .nav-list a:hover, .nav-list a[aria-current="page"], .maker-table tbody th a:hover, .maker-count:hover, .contact-li:hover, .catalog-table td a:hover, .partner-site:hover, .intro-website:hover, .partner-body h2 a:hover, .site-footer a:not(.footer-lang):hover { background-size: 100% 1px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Buttons */
/* Buttons: soft rectangles in the card family (12px corners); the logo blue for the main action (its arrow slides on hover), white with a hairline for the second one */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 1px solid transparent; border-radius: 12px; font: 600 15px/1.2 var(--font); text-decoration: none; cursor: pointer; transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s, box-shadow 0.25s; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #ffffff; }
.btn-primary::after { content: "→"; display: inline-block; transition: transform 0.25s var(--ease-out); }
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #ffffff; box-shadow: 0 12px 24px -14px rgba(31, 82, 201, 0.7); }
.btn-line, .btn-light { background: #ffffff; border-color: var(--rule-strong); color: var(--ink); }
.btn-light:hover { border-color: var(--ink); color: var(--ink); box-shadow: 0 10px 22px -16px rgba(14, 29, 43, 0.5); }
/* The second button answers the pointer plainly: it takes the blue, outline and text, on a pale blue ground */
.btn-line:hover { border-color: var(--accent); background: #eef3fe; color: var(--accent-dark); box-shadow: 0 10px 22px -16px rgba(31, 82, 201, 0.6); }
.btn[disabled] { opacity: 0.55; cursor: progress; transform: none; box-shadow: none; }
.arrow { width: 14px; height: 14px; flex: none; transition: transform 0.25s var(--ease-out); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Header: see-through with white type on every page, over the home photo or the dark intros */
.site-header { position: sticky; top: 0; z-index: 30; background: #ffffff; border-bottom: 1px solid var(--rule); color: var(--ink); }
.site-header.over-hero { position: absolute; left: 0; right: 0; background: transparent; border-bottom: 0; color: #ffffff; }
.header-row { display: flex; align-items: center; gap: 28px; min-height: 92px; }
.brand { display: inline-flex; align-items: center; text-decoration: none; color: inherit; }
.brand img { width: 150px; height: auto; }
/* The logo shows in one colour: navy on white, white over the photo and in the footer. */
.site-header .brand img { filter: brightness(0); opacity: 0.9; }
.over-hero .brand img { filter: brightness(0) invert(1); opacity: 1; }
/* Desktop: equal side columns keep the tabs centred on the page, whatever the logo and tools widths */
@media (min-width: 1081px) {
  .header-row { display: grid; grid-template-columns: 1fr auto 1fr; }
  .brand { justify-self: start; }
  .header-tools { justify-self: end; margin-left: 0; }
}
.site-nav { display: flex; align-items: center; justify-content: center; }
.nav-list { display: flex; gap: clamp(20px, 3vw, 44px); list-style: none; }
.nav-list a { position: relative; display: block; color: inherit; text-decoration: none; font-size: 15px; padding-block: 8px; }
.menu-cta { display: none; }
/* The catalogue is a beta until every supplier has sent its updated list: a small tag on its tab and in its intro */
.nav-beta { display: inline-block; margin-left: 6px; padding: 2px 6px; border: 1px solid currentColor; border-radius: 999px; font: 600 10px/1.2 var(--font); letter-spacing: 0.08em; text-transform: uppercase; vertical-align: 2px; opacity: 0.75; }
.header-tools { display: flex; align-items: center; gap: 22px; margin-left: clamp(20px, 3vw, 44px); }
/* Language menu: a globe and the current code; the list names each language in its own words
   (no flags: a flag is a country, not a language), the current one marked with a check */
.lang-menu { position: relative; font: 500 13px/1 var(--font); letter-spacing: 0.06em; }
.lang-menu summary { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border-radius: 8px; cursor: pointer; list-style: none; transition: background 0.2s; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary:hover, .lang-menu[open] summary { background: rgba(14, 29, 43, 0.06); }
.over-hero .lang-menu summary:hover, .over-hero .lang-menu[open] summary { background: rgba(255, 255, 255, 0.14); }
.lang-globe { flex: none; opacity: 0.85; }
.lang-chevron { opacity: 0.7; transition: transform 0.2s; }
.lang-menu[open] .lang-chevron { transform: rotate(180deg); }
/* The panel grows from its button's corner */
.lang-menu[open] .lang-list { transform-origin: top right; animation: pop-in 0.15s var(--ease-out); }
@keyframes pop-in { from { opacity: 0; transform: scale(0.97); } }
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } }
.lang-list { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 168px; list-style: none; padding: 4px; background: #ffffff; border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 10px 28px -14px rgba(14, 29, 43, 0.3); letter-spacing: 0; }
.lang-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 10px; border-radius: 6px; color: var(--text); font-size: 14px; font-weight: 400; line-height: 1.3; text-decoration: none; }
a.lang-item:hover { background: var(--tint); color: var(--ink); }
.lang-item[aria-current] { color: var(--ink); font-weight: 500; }
.lang-check { flex: none; color: var(--accent); }
.nav-cta { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid #ffffff; border-radius: 10px; background: #ffffff; color: var(--ink); font: 600 14px/1 var(--font); white-space: nowrap; text-decoration: none; transition: background 0.2s, border-color 0.2s, color 0.2s; }
.nav-cta:hover, .over-hero .nav-cta:hover, .nav-cta[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: #ffffff; }
/* Header cart: the ingredient request, opened as a side panel */
.cart-toggle { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; transition: background 0.2s; }
.cart-toggle:hover { background: rgba(14, 29, 43, 0.06); }
.over-hero .cart-toggle:hover { background: rgba(255, 255, 255, 0.14); }
.cart-count { position: absolute; top: -2px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border: 2px solid #ffffff; border-radius: 999px; background: var(--accent); color: #ffffff; font: 600 12px/18px var(--font); text-align: center; }
.cart-count[hidden] { display: none; }
.cart { position: fixed; inset: 0 0 0 auto; width: min(420px, 100%); height: 100%; max-height: none; max-width: none; margin: 0; padding: 0; border: 0; background: #ffffff; color: var(--ink); box-shadow: -24px 0 60px -30px rgba(14, 29, 43, 0.45); }
/* It slides in from the right and leaves the same way, quicker on the way out: request.js adds .is-closing
   and closes the dialog once the slide has played, which works in every browser */
.cart[open] { display: flex; flex-direction: column; animation: cart-in 0.35s var(--ease-out); }
.cart::backdrop { background: rgba(14, 29, 43, 0.35); animation: fade-in 0.35s ease; }
.cart.is-closing { animation: cart-out 0.2s var(--ease-out) forwards; }
.cart.is-closing::backdrop { animation: fade-out 0.2s var(--ease-out) forwards; }
@keyframes cart-in { from { transform: translateX(40px); opacity: 0; } }
@keyframes cart-out { to { transform: translateX(40px); opacity: 0; } }
.cart-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; border-bottom: 1px solid var(--rule); }
.cart-title { font-size: 19px; font-weight: 500; }
.cart-close { width: 40px; height: 40px; border: 1px solid var(--rule); border-radius: 999px; background: #ffffff; color: var(--ink); font: 300 24px/1 var(--font); cursor: pointer; }
.cart-close:hover { border-color: var(--ink); }
.cart-list { list-style: none; flex: 1; overflow-y: auto; padding: 8px 24px; }
.cart-list:empty { display: none; }
.cart-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.cart-empty { flex: 1; display: grid; gap: 20px; align-content: start; justify-items: start; padding: 28px 24px; color: var(--text); }
.cart-empty[hidden], .cart-foot[hidden] { display: none; }
.cart-foot { display: grid; gap: 12px; padding: 20px 24px 24px; border-top: 1px solid var(--rule); }
.cart-foot p { font-size: 13px; color: var(--text); }
.menu-toggle { display: none; width: 44px; height: 44px; border: 1px solid currentColor; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; place-items: center; }
.menu-toggle-bars, .menu-toggle-bars::before, .menu-toggle-bars::after { display: block; width: 18px; height: 2px; background: currentColor; position: relative; transition: transform 0.2s; }
.menu-toggle-bars::before, .menu-toggle-bars::after { content: ""; position: absolute; left: 0; }
.menu-toggle-bars::before { top: -6px; }
.menu-toggle-bars::after { top: 6px; }
.is-open .menu-toggle-bars { background: transparent; }
.is-open .menu-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.is-open .menu-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 1080px) {
  :root { --header-h: 76px; }
  .header-row { min-height: 76px; gap: 12px; }
  .brand { flex: none; }
  .brand img { width: 132px; }
  .menu-toggle { display: inline-grid; }
  .header-tools { margin-left: auto; gap: 14px; }
  .nav-cta { display: none; }
  /* Open, the bar turns white with the menu, so the two read as one sheet over the page */
  .site-header { transition: background 0.2s, color 0.2s; }
  .site-header.is-open { background: #ffffff; color: var(--ink); }
  .site-header.is-open .brand img { filter: brightness(0); opacity: 0.9; }
  .site-header.is-open .lang-menu summary:hover, .site-header.is-open .lang-menu[open] summary, .site-header.is-open .cart-toggle:hover, .site-header.is-open .search-toggle:hover { background: rgba(14, 29, 43, 0.06); }
  /* It never runs past the bottom of a short screen (a phone on its side): it scrolls on its own */
  .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100dvh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain; flex-direction: column; align-items: stretch; padding: 8px var(--gutter) 24px; background: #ffffff; color: var(--ink); border-bottom: 1px solid var(--rule); box-shadow: 0 24px 40px -24px rgba(14, 29, 43, 0.35); }
  .is-open .site-nav { display: flex; animation: menu-in 0.2s var(--ease-out); }
  .nav-list { flex-direction: column; gap: 0; margin-left: 0; }
  .nav-list a, .nav-list a:hover, .nav-list a[aria-current="page"] { padding: 14px 0; font-size: 18px; border-bottom: 1px solid var(--rule); background-size: 0 1px; }
  .menu-cta { display: inline-flex; align-self: flex-start; margin-top: 20px; }
  /* The tabs fold into the menu, so the search button moves beside the cart */
  .site-nav .search-toggle-nav { display: none; }
  .header-tools .search-toggle-tools { display: inline-grid; }
}
/* Small phones: the tools close up and the language button keeps only its globe (its label still names
   the language), so the logo keeps its size instead of being squeezed */
@media (max-width: 400px) {
  .brand img { width: clamp(100px, 32vw, 112px); }
  .header-tools { gap: 2px; }
  .lang-menu summary { padding: 0 8px; }
  .lang-code { display: none; }
  .menu-toggle { margin-left: 6px; }
}

/* Full-width photo banner (Partners) */
.page-banner { position: relative; background: var(--deep); }
.page-banner img { width: 100%; height: calc(var(--header-h) + clamp(180px, 24vw, 340px)); object-fit: cover; object-position: 50% 30%; }
.page-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 20, 32, 0.55) 0%, rgba(8, 20, 32, 0) calc(var(--header-h) + 80px)); pointer-events: none; }

/* Page intro */
/* Light grey introductory section on inner pages */
.page-intro { background: var(--deep); color: rgba(255, 255, 255, 0.8); padding-block: calc(var(--header-h) + clamp(56px, 8vw, 104px)) clamp(56px, 7vw, 88px); margin-bottom: 0; }
.page-intro h1 { color: #ffffff; }
.page-intro .lead, .page-intro p { color: rgba(255, 255, 255, 0.8); }
.page-intro .eyebrow, .page-intro .label { color: var(--deep-label); }
.page-intro .tag { color: var(--ink); }
/* Ingredient pages: a graphite lab grey */
.intro-lab { --deep: #2a3036; --deep-label: #a9c3ff; padding-bottom: clamp(40px, 5vw, 64px); }
.intro-lab .lead { max-width: 62ch; }
/* After the Partners photo banner the header is already cleared */
.page-banner + .page-intro { padding-top: clamp(56px, 8vw, 104px); }
.page-intro :focus-visible { outline-color: #ffffff; }
/* ...but the white table and the request panel are light, so their focus ring stays blue */
.page-intro .spec-table :focus-visible, .page-intro .request-panel :focus-visible { outline-color: var(--accent); }
/* Links on the dark intros stay white on hover (the site-wide hover colour is the dark ink) */
.page-intro a:not(.btn):hover { color: #ffffff; }
.page-intro h1 { font-size: clamp(38px, 5vw, 64px); }
.page-intro .wrap { display: grid; gap: 22px; }
.page-intro .intro-split { display: grid; gap: 40px; }
.intro-text { display: grid; gap: 18px; }
/* About: the photo fills the right half of the intro, edge to edge. */
.intro-photo { position: relative; overflow: hidden; background: var(--tint); margin-inline: calc(-1 * var(--gutter)); }
/* Shade the top of the photo so the white menu reads over it */
.intro-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 20, 32, 0.5) 0%, rgba(8, 20, 32, 0) calc(var(--header-h) + 60px)); pointer-events: none; }
.intro-photo picture { height: 100%; }
.intro-photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; }
@media (min-width: 900px) {
  .page-intro-photo { position: relative; min-height: calc(400px + var(--header-h)); display: flex; align-items: center; }
  .page-intro-photo > .wrap { width: 100%; }
  .page-intro .intro-split { display: block; }
  .intro-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 46vw; margin: 0; }
  .intro-photo img { aspect-ratio: auto; }
  .page-intro-photo .intro-text { max-width: min(640px, calc(54vw - var(--gutter) - 48px)); }
}
.intro-text { display: grid; gap: 18px; }
.page-intro + .section { padding-top: clamp(48px, 6vw, 72px) !important; }

/* Home: full-screen photo, menu over it, one thin headline at the bottom */
.hero { --fade: clamp(120px, calc(18vh / var(--zoom)), 200px); position: relative; height: min(calc(92vh / var(--zoom)), 900px); min-height: 600px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; background: var(--bg); color: #ffffff; text-align: center; }
.hero-media { position: absolute; inset: 0; }
.hero-media picture, .hero-media img { width: 100%; height: 100%; }
.hero-media img { object-fit: cover; object-position: 50% 50%; }
/* Two layers: a navy shade that peaks behind the headline, then the bottom of the photo
   dissolves into the page background so the hero runs into the next section. */
.hero::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(246, 247, 245, 0) calc(100% - var(--fade) * 1), rgba(246, 247, 245, 0.02) calc(100% - var(--fade) * 0.9), rgba(246, 247, 245, 0.07) calc(100% - var(--fade) * 0.8), rgba(246, 247, 245, 0.15) calc(100% - var(--fade) * 0.7), rgba(246, 247, 245, 0.26) calc(100% - var(--fade) * 0.6), rgba(246, 247, 245, 0.4) calc(100% - var(--fade) * 0.5), rgba(246, 247, 245, 0.55) calc(100% - var(--fade) * 0.4), rgba(246, 247, 245, 0.7) calc(100% - var(--fade) * 0.3), rgba(246, 247, 245, 0.84) calc(100% - var(--fade) * 0.2), rgba(246, 247, 245, 0.94) calc(100% - var(--fade) * 0.1), var(--bg) 100%),
  linear-gradient(180deg, rgba(8, 20, 32, 0.5) 0%, rgba(8, 20, 32, 0.12) 24%, rgba(8, 20, 32, 0.3) 40%, rgba(8, 20, 32, 0.45) calc(100% - var(--fade) - 120px), rgba(8, 20, 32, 0.4) calc(100% - var(--fade) * 1), rgba(8, 20, 32, 0.26) calc(100% - var(--fade) * 0.8), rgba(8, 20, 32, 0.17) calc(100% - var(--fade) * 0.6), rgba(8, 20, 32, 0.08) calc(100% - var(--fade) * 0.4), rgba(8, 20, 32, 0.02) calc(100% - var(--fade) * 0.2), rgba(8, 20, 32, 0) calc(100% - var(--fade) * 0)); }
.hero h1 { position: relative; z-index: 2; padding-inline: 16px; color: #ffffff; font-weight: 500; font-size: clamp(40px, 5.4vw, 80px); line-height: 1.04; letter-spacing: -0.015em; text-shadow: 0 2px 24px rgba(8, 20, 32, 0.35); }
.hero-line { display: block; }
.hero-word, .hero-char { display: inline-block; }
/* No backing: a soft dark halo keeps the line readable over the bright gel in the photo */
.hero-sub { position: relative; z-index: 2; margin: 24px 16px calc(var(--fade) + 8px); color: #ffffff; font: 500 18px/1.4 var(--font); letter-spacing: 0; text-shadow: 0 1px 2px rgba(8, 20, 32, 0.55), 0 0 18px rgba(8, 20, 32, 0.45); }
/* Motion (the --ease-out curve is in :root). Everything below is skipped when the visitor prefers reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  /* Home: the photo breathes, a slow zoom out and back in, forever. The loop starts at once
     (fading in as it goes): a delayed start left the photo unzoomed, then made it jump. */
  .hero-media img { animation: fade-in 1.4s ease both, settle 14s ease-in-out infinite alternate; will-change: transform; backface-visibility: hidden; }
  @keyframes settle { from { transform: scale(1.06); } to { transform: none; } }
  /* Each headline letter rises out of its own mask in a quick ripple, the second line close behind.
     The mask ends wider than the letter, so it never cuts the soft shadow into a box behind each one. */
  .hero-char { animation: line-up 0.8s var(--ease-out) both; animation-delay: calc(var(--l) * 0.4s + var(--c) * 0.022s); }
  .hero-sub { animation: rise-in 1s var(--ease-out) 1s both; }
  @keyframes line-up { from { clip-path: inset(0 0 100% 0); transform: translateY(0.4em); } to { clip-path: inset(-0.5em -0.5em -0.5em -0.5em); transform: none; } }

  /* Inner pages: the banner photo settles from a slight zoom, then drifts very slowly.
     It moves the <picture>, so a mirrored photo keeps its flip on the <img>. */
  .photo-intro-bg picture { will-change: transform; animation: intro-zoom 2.4s var(--ease-out) both, drift 26s ease-in-out 2.4s infinite alternate; }
  @keyframes intro-zoom { from { transform: scale(1.1); opacity: 0.4; } to { transform: none; opacity: 1; } }
  @keyframes drift { from { transform: none; } to { transform: scale(1.05) translateX(-1%); } }
  /* ...and its text comes in line by line. Not on the catalogue or an ingredient page: visitors go back and forth
     between them, and the name, INCI and table are what they came to read, so they show at once */
  body:not(.page-ingredients) .page-intro:not(.ingredient) .wrap > * { animation: rise-in 0.9s var(--ease-out) both; }
  .page-intro .wrap > :nth-child(2) { animation-delay: 0.08s; }
  .page-intro .wrap > :nth-child(3) { animation-delay: 0.16s; }
  .page-intro .wrap > :nth-child(4) { animation-delay: 0.24s; }
  .page-intro .wrap > :nth-child(n + 5) { animation-delay: 0.32s; }
  @keyframes rise-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
  @keyframes fade-in { from { opacity: 0; } }

  /* No cross-fade between pages: it held every page back by most of a second */
  @keyframes fade-out { to { opacity: 0; } }
}

/* Scroll entrance, added by main.js only when motion is allowed: a rise with a hint of scale,
   and photos inside a card settle from a slight zoom as the card arrives */
.reveal { opacity: 0; transform: translateY(28px) scale(0.985); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
/* Cards with a hover transition of their own keep it alongside the entrance (their own rule, later on, would replace it) */
.world.reveal, .partner.reveal { transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), box-shadow 0.2s, border-color 0.2s; }
.reveal .world-img img { transform: scale(1.08); transition: transform 0.6s var(--ease-out); }
.reveal.is-in .world-img img { transform: none; }
@media print { .reveal { opacity: 1; transform: none; } }

/* Header search: a centred popup with the catalogue search and quick links by need */
.search-toggle { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; transition: background 0.2s; }
.search-toggle:hover { background: rgba(14, 29, 43, 0.06); }
.over-hero .search-toggle:hover { background: rgba(255, 255, 255, 0.14); }
.search-toggle-nav { margin-left: clamp(8px, 1.6vw, 24px); }
.search-toggle-tools { display: none; }
.search { width: min(720px, calc(100% - 32px)); max-width: none; margin: min(18vh, 160px) auto auto; padding: 0; border: 0; border-radius: 18px; background: transparent; overflow: visible; }
.search[open] { animation: search-in 0.3s var(--ease-out); }
.search::backdrop { background: rgba(14, 29, 43, 0.3); animation: fade-in 0.3s ease; }
/* It leaves the way it came, quicker: main.js adds .is-closing and closes it once this has played */
.search.is-closing { animation: search-out 0.2s var(--ease-out) forwards; }
.search.is-closing::backdrop { animation: fade-out 0.2s var(--ease-out) forwards; }
@keyframes search-in { from { transform: translateY(12px); opacity: 0; } }
@keyframes search-out { to { transform: translateY(12px); opacity: 0; } }
/* See-through: the page shows through the card. No backdrop blur, which only kicks in once the
   opening animation ends and made the card turn opaque a moment after it appeared. */
.search .finder-card { background: rgba(255, 255, 255, 0.78); border-color: rgba(255, 255, 255, 0.55); }
.search .finder-row input, .search .finder-needs a { background: rgba(255, 255, 255, 0.6); }
.search-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.search-head .cart-close { flex: none; }
.finder-card { display: grid; gap: 16px; padding: clamp(22px, 2.6vw, 34px); background: #ffffff; border: 1px solid var(--rule); border-radius: 18px; box-shadow: 0 24px 60px -36px rgba(14, 29, 43, 0.4); }
.finder-title { color: var(--ink); font-size: clamp(20px, 1.8vw, 26px); font-weight: 400; }
.finder-row { display: flex; gap: 10px; }
.finder-row input { flex: 1; min-width: 0; padding: 14px 20px; border: 1px solid var(--rule-strong); border-radius: 12px; background: var(--bg); color: var(--ink); font: 400 16px/1.2 var(--font); }
.finder-row input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; background: #ffffff; }
.finder-needs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; color: var(--text); font-size: 14px; }
.finder-needs a { padding: 7px 14px; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink); text-decoration: none; transition: border-color 0.2s, background 0.2s, color 0.2s; }
.finder-needs a:hover { border-color: var(--ink); background: var(--ink); color: #ffffff; }

/* Ingredients page: a slow, endless banner of catalogue ingredients. Hover or focus pauses it;
   with reduced motion it becomes a plain row to scroll by hand. */
.spotlight { display: grid; gap: 14px; padding-block: clamp(32px, 3.6vw, 48px) 8px; }
.spotlight + .catalog { padding-top: 16px; }
.page-ingredients .page-intro.photo-intro { min-height: 0; padding-block: calc(var(--header-h) + clamp(32px, 4vw, 56px)) clamp(36px, 4vw, 56px); }
/* Full width, or its auto margins shrink it to the label and centre it */
.spotlight > .wrap { width: 100%; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee-track { display: flex; width: max-content; list-style: none; animation: marquee 48s linear infinite; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.spot { position: relative; flex: none; width: 280px; padding-right: 16px; }
.spot-link { display: grid; gap: 6px; align-content: start; height: 100%; padding: 20px 60px 22px 22px; background: #ffffff; border: 1px solid var(--rule); border-radius: 14px; color: var(--text); text-decoration: none; transition: border-color 0.2s, box-shadow 0.2s; }
.spot-link:hover { border-color: #c4ccd4; box-shadow: 0 14px 30px -20px rgba(14, 29, 43, 0.35); color: var(--text); }
.spot-name { color: var(--ink); font-size: 17px; font-weight: 500; line-height: 1.25; }
.spot-link:hover .spot-name { color: var(--accent); }
.spot-inci { font-size: 13px; line-height: 1.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.spot .request-add { position: absolute; top: 16px; right: 32px; }
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; padding-inline: var(--gutter); }
  .marquee-track { animation: none; }
  .spot[aria-hidden="true"] { display: none; }
}

/* Home: who Zymachem is, in text only: a heading beside two paragraphs, then four strengths under a hairline */
.company { padding-block: clamp(72px, 8vw, 120px); }
/* Two rows: heading beside the paragraphs, then the About link level with the markets line */
.company-top { display: grid; grid-template-columns: 5fr 6fr; grid-template-areas: "head text" "more text"; gap: 20px clamp(28px, 6vw, 96px); align-items: start; }
.company-head { grid-area: head; }
.company-text { grid-area: text; }
.company-more { grid-area: more; align-self: start; justify-self: start; color: var(--ink); }
.company-head { display: grid; gap: 16px; }
.company-head h2 { font-size: clamp(30px, 3.2vw, 46px); line-height: 1.12; }
.company-text { display: grid; gap: 16px; justify-items: start; }
.company-text > p { color: var(--text); font-size: 18px; max-width: 58ch; }
.company-points { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 44px); margin-top: clamp(48px, 6vw, 80px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--rule); }
.company-points li { display: grid; gap: 8px; align-content: start; }
.company-points h3 { font-size: 17px; font-weight: 500; }
.company-points p { color: var(--text); font-size: 15px; }

/* Home: the two worlds, with the user's own photos */
/* The About section above already gives the space */
.worlds { padding-block: 0; }
.worlds-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); }
.world { display: grid; grid-template-rows: auto 1fr; background: #ffffff; border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; text-decoration: none; color: var(--text); transition: box-shadow 0.2s, border-color 0.2s; }
.world:hover { color: var(--text); border-color: #c4ccd4; box-shadow: 0 18px 40px -24px rgba(14, 29, 43, 0.35); }
.world-img { aspect-ratio: 3 / 2; overflow: hidden; background: var(--tint); }
.world-img picture, .world-img img { width: 100%; height: 100%; }
.world-img img { object-fit: cover; transition: transform 0.2s var(--ease-out); }
.world-body { display: grid; gap: 14px; align-content: start; padding: clamp(26px, 3.2vw, 48px); }
.world h2 { font-size: clamp(28px, 2.6vw, 40px); }
.world-body > p:not(.label) { max-width: 48ch; }
.world-go { display: inline-flex; align-items: center; margin-top: 6px; color: var(--ink); font-weight: 600; font-size: 15px; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; transition: color 0.25s; }
.world:hover .world-go { color: var(--accent); }

/* Home: a quick showcase of the partners' logos; the details live on the Partners page */
.partners { padding-block: clamp(80px, 9vw, 128px); }
.partners-head { margin-bottom: clamp(24px, 3vw, 36px); font-size: clamp(28px, 2.8vw, 40px); }
.partners-link { color: var(--ink); text-decoration: none; }
.partners-link span { display: inline-block; margin-left: 0.3em; transition: transform 0.2s var(--ease-out); }
.partners-link:hover { color: var(--accent); }
/* Four logo cards over three, centred, in the home card style: wide enough for the logos to read */
.partner-logos { --gap: clamp(12px, 1.6vw, 20px); list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
.partner-logos li { flex: 0 0 calc((100% - 3 * var(--gap)) / 4); }
.partner-logos a { display: grid; grid-template-rows: 1fr auto; justify-items: center; gap: 12px; height: 196px; padding: 24px 28px 20px; text-decoration: none; background: #ffffff; border: 1px solid var(--rule); border-radius: 14px; transition: box-shadow 0.2s, border-color 0.2s; }
.partner-logos a:hover, .partner-logos a:focus-visible { border-color: #c4ccd4; box-shadow: 0 18px 40px -24px rgba(14, 29, 43, 0.35); }
.pl-logo { display: grid; place-items: center; width: 100%; min-height: 0; }
.partner-logos picture { display: grid; place-items: center; width: 100%; }
.pl-supplies { color: var(--text); font-size: 13px; line-height: 1.35; text-align: center; }
.partner-logos img { max-width: 100%; max-height: 92px; height: auto; object-fit: contain; transition: transform 0.2s var(--ease-out); }
.partner-logos a:focus-visible img { transform: scale(1.05); }
@media (max-width: 960px) {
  .worlds-grid { grid-template-columns: 1fr; }
  .company-top { grid-template-columns: 1fr; grid-template-areas: "head" "text" "more"; }
  .company-points { grid-template-columns: 1fr 1fr; }
  .partner-logos a { height: 164px; }
  .hero h1 { font-size: clamp(36px, 10vw, 56px); }
}
@media (max-width: 600px) {
  /* Phones: one need per line instead of a break mid-phrase */
  .hero-sub { display: grid; gap: 2px; font-size: 15px; }
  .hero-dot { display: none; }
  .partner-logos li { flex-basis: calc((100% - var(--gap)) / 2); }
  .partner-logos a { height: 136px; padding: 16px 12px; }
  .partner-logos img { max-height: 56px; }
  .pl-supplies { font-size: 12px; }
  .finder-row { flex-direction: column; }
  .company-points { grid-template-columns: 1fr; }
}

/* Closing call to action, on every page but Contact: one row on a deep band that runs into the
   footer, so the page ends once. The logo's own green-to-blue runs along its top edge, the one
   place the gradient appears. On the dark ground the main button turns white, as in the home banner. */
.home-contact { position: relative; padding-block: clamp(56px, 6vw, 88px) clamp(48px, 5vw, 72px); background: var(--ink); color: rgba(255, 255, 255, 0.72); }
.home-contact::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, #4cd02e, #2967f2); }
.home-contact-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
.home-contact-text { display: grid; gap: 10px; max-width: 720px; }
.home-contact h2 { color: #ffffff; font-weight: 400; font-size: clamp(30px, 3.4vw, 48px); line-height: 1.08; letter-spacing: -0.02em; }
.home-contact-text > p { max-width: 56ch; color: rgba(255, 255, 255, 0.7); font-size: 17px; }
.home-contact .btn-primary { flex: none; background: #ffffff; border-color: #ffffff; color: var(--ink); }
.home-contact .btn-primary:hover { background: #ffffff; border-color: #ffffff; color: var(--ink); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.6); }
.home-contact :focus-visible { outline-color: #ffffff; }

/* Periodic-table function tiles: square, with the function colour along the top */
/* Catalogue functions as a periodic table: each cell has its count where the atomic number goes,
   the coloured two-letter symbol and the name, on a tint of the function's colour. Seven per row. */
.element-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; list-style: none; }
.element-tile { --accent: var(--label); --ink-accent: color-mix(in srgb, var(--accent) 82%, #000000); display: flex; flex-direction: column; height: 100%; min-height: 116px; padding: 10px 12px 12px; border: 1px solid color-mix(in srgb, var(--accent) 28%, #ffffff); border-radius: 10px; background: color-mix(in srgb, var(--accent) 7%, #ffffff); color: var(--ink); text-decoration: none; transition: background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s; }
.element-tile:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, #ffffff); color: var(--ink); box-shadow: 0 12px 24px -18px color-mix(in srgb, var(--accent) 80%, #000000); }
.element-count { font: 500 11px/1 var(--mono); color: var(--ink-accent); }
.element-symbol { margin: 6px 0 4px; color: var(--ink-accent); font-size: 32px; font-weight: 600; line-height: 1; letter-spacing: -0.01em; }
.element-name { margin-top: auto; font-size: 12px; line-height: 1.3; color: var(--ink); }
.element-tile[aria-current="true"] { border-color: var(--ink-accent); background: var(--ink-accent); box-shadow: none; }
.element-tile[aria-current="true"] > * { color: #ffffff; }
@media (max-width: 1100px) { .element-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.catalog-functions-title { margin: 22px 0 12px; color: var(--muted); font: 600 12px/1.4 var(--font); letter-spacing: 0.1em; text-transform: uppercase; }

/* Data tables (manufacturers, catalogue) */
.table-scroll { overflow-x: auto; background: #ffffff; border: 1px solid var(--rule-strong); }
.maker-table, .catalog-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.maker-table { min-width: 560px; }
@media (max-width: 700px) { .maker-table { min-width: 0; } .maker-table th:nth-child(3), .maker-table td:nth-child(3) { display: none; } .maker-table th, .maker-table td { padding-inline: 12px; } }
.maker-table th, .catalog-table th { text-align: left; font: 500 12px/1.4 var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--label); padding: 12px 18px; border-bottom: 1px solid var(--rule-strong); background: #ffffff; }
.maker-table tbody th { font: 600 15px/1.4 var(--font); letter-spacing: 0; text-transform: none; color: var(--ink); border-bottom: 1px solid var(--rule); }
.maker-table tbody th a { color: var(--ink); text-decoration: none; }
.maker-table td, .catalog-table td { padding: 13px 18px; border-bottom: 1px solid var(--rule); color: var(--text); vertical-align: top; }
.maker-table tr:last-child > *, .catalog-table tr:last-child > td { border-bottom: 0; }
.maker-count { color: var(--ink); text-decoration: none; }

/* Steps: a numbered sequence, ruled like the home page guarantees */
.step-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(32px, 4vw, 56px); list-style: none; }
.step-list li { display: grid; gap: 8px; align-content: start; padding-top: 16px; border-top: 2px solid var(--ink); }
.step-list li p:last-child { color: var(--text); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 3.5vw, 56px); list-style: none; counter-reset: step; }
.steps li { counter-increment: step; display: grid; gap: 10px; align-content: start; padding-top: 20px; border-top: 2px solid var(--ink); }
.steps li::before { content: "0" counter(step); font: 300 44px/1 var(--display); letter-spacing: -0.02em; color: var(--accent); }
.steps li h3 { font-size: 20px; font-weight: 500; }
.steps li p { color: var(--text); }
@media (max-width: 1000px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* Cards (About "why"): ruled columns, like the home page guarantees */
.grid { display: grid; gap: clamp(24px, 3.5vw, 56px); list-style: none; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-3 { grid-template-columns: 1fr; } }
.card { display: grid; gap: 10px; align-content: start; padding-top: 20px; border-top: 2px solid var(--ink); }
.card h3 { font-size: 21px; font-weight: 500; }
.card p { color: var(--text); }

/* Maison Sozio: story beside a card listing what Sozio offers */
/* About: one ground, tighter sections, the three reasons as white rounded cards */
.page-about .section { padding-block: clamp(64px, 7vw, 104px) !important; }
.page-about .section-tint { background: transparent; border-block: 0; }
.page-about .section-tint + .section { padding-top: 0 !important; }
.page-about .card-list { gap: clamp(12px, 1.6vw, 20px); }
.page-about .card { padding: clamp(24px, 2.6vw, 34px); background: #ffffff; border: 1px solid var(--rule); border-radius: 14px; }

/* Fragrances: the story beside a rounded photo, the offers folded into the text */
.sozio-section { padding-block: clamp(64px, 7vw, 104px) !important; }
.sozio-story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.sozio-photo { border-radius: 24px; overflow: hidden; background: var(--tint); }
.sozio-photo picture, .sozio-photo img { width: 100%; height: 100%; }
.sozio-photo img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 40% 45%; }
.sozio-logo { display: block; width: auto; height: clamp(56px, 6vw, 80px); margin-bottom: 8px; }
.sozio-text picture { display: block; }
.sozio-text { display: grid; gap: clamp(28px, 3vw, 40px); }
.sozio-text > div { display: grid; gap: 14px; }
.sozio-text p:not(.lead) { color: var(--text); max-width: 60ch; }
.feature-logo { height: 52px; width: auto; justify-self: start; }
/* Sozio page: the logo is the page title */
.feature-title { line-height: 0; }
.feature-title { justify-self: start; }
/* Sozio keeps its own colours, so on the dark intro it sits on a white card like the partner logos */
.page-intro .feature-title { padding: clamp(16px, 1.8vw, 24px) clamp(22px, 2.4vw, 32px); background: #ffffff; border-radius: 14px; }
.feature-title .feature-logo { height: clamp(64px, 7vw, 96px); }
.offer-card { display: grid; gap: 18px; background: #ffffff; border: 1px solid var(--rule); border-radius: 14px; padding: clamp(28px, 3.4vw, 44px); }
.offer-list { list-style: none; display: grid; }
.offer-list li { position: relative; padding: 14px 0 14px 32px; border-top: 1px solid var(--rule); color: var(--ink); }
.offer-list li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 14px; height: 8px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
@media (max-width: 900px) { .sozio-story { grid-template-columns: 1fr; } .sozio-photo img { aspect-ratio: 16 / 10; } }
/* Fragrances: Sozio's certifications, as ruled entries: the standard's name, then what it covers */
.sozio-standards { padding-top: 0 !important; }
.standards-intro { color: var(--text); max-width: 60ch; }
.standards-list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) clamp(24px, 3.5vw, 56px); }
.standards-list li { display: grid; gap: 8px; align-content: start; padding-top: 18px; border-top: 1px solid var(--rule-strong); }
.standards-list h3 { font-size: 19px; font-weight: 600; }
.standards-list p { color: var(--text); font-size: 16px; }
@media (max-width: 1000px) { .standards-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .standards-list { grid-template-columns: 1fr; } }

/* About: the leadership, by name and role, in the type of the page with no photos */
.about-team-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(24px, 6vw, 96px); align-items: start; }
.team-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.team-list li { display: grid; gap: 4px; padding-top: 18px; border-top: 2px solid var(--ink); }
.team-name { color: var(--ink); font-size: clamp(22px, 2vw, 28px); font-weight: 500; line-height: 1.2; }
.team-role { color: var(--text); font-size: 16px; }
@media (max-width: 860px) { .about-team-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .team-list { grid-template-columns: 1fr; } }

/* Partners page: one card per partner, in the home page card style */
.partners-page { padding-top: clamp(48px, 6vw, 72px) !important; }
/* Photo intros (Partners, Ingredients): the text over a dark photo, darkened on the left where the text sits */
.photo-intro { position: relative; overflow: hidden; padding-bottom: clamp(64px, 8vw, 112px); }
.photo-intro-bg { position: absolute; inset: 0; }
.photo-intro-bg.is-mirrored img { transform: scaleX(-1); }
.photo-intro-bg picture, .photo-intro-bg img { width: 100%; height: 100%; }
.photo-intro-bg img { object-fit: cover; object-position: 70% 50%; }
/* A lighter veil: dark enough behind the text on the left, the photo left clear on the right */
.photo-intro-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 14, 12, 0.72) 0%, rgba(10, 14, 12, 0.56) 40%, rgba(10, 14, 12, 0.12) 72%, rgba(10, 14, 12, 0) 100%), linear-gradient(180deg, rgba(10, 14, 12, 0.45) 0%, rgba(10, 14, 12, 0) 26%); }
.photo-intro h1, .photo-intro .lead, .photo-intro .eyebrow, .photo-intro .breadcrumb { text-shadow: 0 1px 16px rgba(0, 0, 0, 0.35); }
.photo-intro > .wrap { position: relative; z-index: 1; width: 100%; }
.beta-note { max-width: 640px; margin-top: 20px; padding: 12px 16px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 12px; background: rgba(10, 14, 12, 0.35); color: #ffffff; font-size: 15px; line-height: 1.5; }
.beta-note .nav-beta { margin: 0 6px 0 0; opacity: 0.9; }
.beta-note a { color: #ffffff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* Same height on Partners, Fragrances, Ingredients and About, whatever the text length; the text sits centred */
.page-intro.photo-intro { display: flex; align-items: center; min-height: clamp(612px, 44vw, 640px); padding-block: calc(var(--header-h) + 40px) 56px; }
@media (max-width: 760px) { .page-intro.photo-intro { min-height: 640px; padding-block: calc(var(--header-h) + 28px) 40px; } .photo-intro .lead { font-size: 16px; } }
@media (max-width: 760px) { .photo-intro-bg img { object-position: 62% 50%; } .photo-intro-bg::after { background: linear-gradient(180deg, rgba(10, 14, 12, 0.5) 0%, rgba(10, 14, 12, 0.66) 100%); } }
.partner-list { --gap: clamp(20px, 2.4vw, 32px); display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
/* Two columns: a last card left alone on its row (Sozio) sits centred */
@media (min-width: 1101px) { .partner-list > .partner:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc((100% - var(--gap)) / 2); } }
.partner { display: grid; grid-template-columns: 240px 1fr; background: #ffffff; border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; scroll-margin-top: 24px; transition: box-shadow 0.2s, border-color 0.2s; }
.partner:hover, .partner:target { border-color: #c4ccd4; box-shadow: 0 18px 40px -24px rgba(14, 29, 43, 0.35); }
.partner-logo { display: grid; place-items: center; padding: 28px; background: #ffffff; border-right: 1px solid var(--rule); }
.partner-logo picture { display: grid; place-items: center; width: 100%; }
.partner-logo img { max-height: 64px; width: auto; max-width: 100%; object-fit: contain; }
.partner-body { display: grid; gap: 14px; align-content: start; padding: clamp(24px, 2.6vw, 36px); }
.partner-body h2 { font-size: clamp(26px, 2.4vw, 34px); }
.partner-desc { color: var(--text); }
.partner-facts { display: flex; flex-wrap: wrap; gap: 12px 36px; margin: 6px 0 0; padding-top: 18px; border-top: 1px solid var(--rule); }
.partner-facts dt { font: 600 11px/1.4 var(--font); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.partner-facts dd { margin: 3px 0 0; color: var(--ink); font-size: 15px; }
.partner-link { justify-self: start; margin-top: 4px; color: var(--ink); font-weight: 600; font-size: 15px; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.partner-link:hover { color: var(--accent); }
@media (max-width: 1100px) { .partner-list { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .partner { grid-template-columns: 1fr; } .partner-logo { border-right: 0; border-bottom: 1px solid var(--rule); min-height: 130px; } }
.partner-body h2 a { color: var(--ink); }
/* The whole card opens the partner's page: the name's link covers the card, and the other links sit above it */
.partner { position: relative; }
.partner-body h2 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.partner-links a { position: relative; z-index: 1; }
.partner-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 24px; margin-top: 4px; }
.partner-links .partner-link { margin-top: 0; }
.partner-site { color: var(--text); font-size: 15px; }
.partner-site:hover { color: var(--accent); }
.sozio-text .partner-site { justify-self: start; }

/* Partner pages: each one in the partner's own colour (--brand, from its logo) and photo. The colour
   marks accents only; buttons stay in the site's blue. */
.partner-page { --brand: var(--accent); --sheet-overlap: clamp(56px, 6vw, 80px); }
.partner-intro .eyebrow { color: #ffffff; opacity: 0.85; }
.intro-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 6px; }
.intro-website { color: #ffffff; font-weight: 600; font-size: 15px; }
/* The banner leaves room at the bottom for the data sheet that overlaps it */
.page-intro.photo-intro.partner-intro { padding-bottom: calc(56px + var(--sheet-overlap)); }

/* The data sheet: logo, key figures and facts in one ruled panel, like a technical data sheet.
   It is the page's one strong element: white, a brand-colour top edge, lifted over the photo. */
.partner-sheet-wrap { position: relative; z-index: 2; margin-top: calc(-1 * var(--sheet-overlap)); }
.partner-sheet { display: grid; grid-template-columns: minmax(200px, 260px) 1fr; grid-template-areas: "logo figures" "logo facts"; overflow: hidden; background: #ffffff; border: 1px solid var(--rule); border-top: 3px solid var(--brand); border-radius: 14px; box-shadow: 0 32px 64px -40px rgba(14, 29, 43, 0.45); }
.sheet-logo { grid-area: logo; display: grid; place-items: center; padding: 28px 32px; border-right: 1px solid var(--rule); }
.sheet-logo picture { display: grid; place-items: center; width: 100%; }
.sheet-logo img { max-height: 72px; width: auto; max-width: 100%; object-fit: contain; }
.partner-figures { grid-area: figures; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.partner-figures > div { display: flex; flex-direction: column; gap: 6px; padding: 22px 28px 20px; border-left: 1px solid var(--rule); }
.partner-figures > div:first-child { border-left: 0; }
.partner-figures dt { color: var(--muted); font-size: 14px; line-height: 1.35; }
.partner-figures dd { margin: 0; color: var(--ink); font-size: clamp(26px, 2.4vw, 34px); font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.sheet-facts { grid-area: facts; display: flex; flex-wrap: wrap; margin: 0; border-top: 1px solid var(--rule); background: var(--bg); }
.sheet-facts > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 16px 28px; }
.sheet-facts > div + div { border-left: 1px solid var(--rule); }
.sheet-facts dt { color: var(--muted); font-size: 14px; }
.sheet-facts dd { margin: 0; color: var(--ink); font-size: 15px; font-weight: 500; }
/* Without figures, the facts sit beside the logo on white */
.partner-sheet.no-figures { grid-template-areas: "logo facts"; }
.no-figures .sheet-facts { align-content: center; border-top: 0; background: #ffffff; }
@media (max-width: 860px) {
  .partner-sheet { grid-template-columns: 1fr; grid-template-areas: "logo" "figures" "facts"; }
  .partner-sheet.no-figures { grid-template-areas: "logo" "facts"; }
  .sheet-logo { min-height: 120px; border-right: 0; border-bottom: 1px solid var(--rule); }
}
/* Phones: the figures become rows of the sheet, field name beside its value */
@media (max-width: 560px) {
  .partner-figures { grid-template-columns: 1fr; }
  .partner-figures > div { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 20px; border-left: 0; border-top: 1px solid var(--rule); }
  .partner-figures > div:first-child { border-top: 0; }
  .partner-figures dd { font-size: 22px; }
  .sheet-facts { display: grid; }
  .sheet-facts > div { padding: 12px 20px; }
  .sheet-facts > div + div { border-left: 0; border-top: 1px solid var(--rule); }
}

/* Sections under the sheet share one rhythm; each one after the first starts at the previous one's end */
.partner-page .section { padding-block: clamp(64px, 7vw, 104px) 0 !important; }
.partner-page .section h2 { font-size: clamp(26px, 2.6vw, 36px); }
.partner-page > .section:last-child { padding-bottom: clamp(64px, 7vw, 104px) !important; }

/* Story: the heading on the left, the text in a readable column */
.partner-story-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(24px, 6vw, 96px); align-items: start; }
.partner-page .partner-story h2 { font-size: clamp(30px, 3.2vw, 44px); }
.partner-story-text { display: grid; gap: 18px; max-width: 64ch; }
.partner-story-text > p { color: var(--text); font-size: 18px; line-height: 1.65; }
.partner-story-text > p:first-of-type { color: var(--ink); font-size: clamp(19px, 1.6vw, 21px); line-height: 1.55; }
.partner-quote { margin: 0 0 6px; padding: 4px 0 4px 22px; border-left: 3px solid var(--brand); }
.partner-quote p { color: var(--ink); font-size: clamp(20px, 2vw, 26px); line-height: 1.35; }
.partner-quote footer { margin-top: 8px; color: var(--muted); font-size: 14px; }
@media (max-width: 860px) { .partner-story-grid { grid-template-columns: 1fr; } }

/* Signature ranges: ruled rows, each one a large target that opens the range in the catalogue */
.partner-ranges h2, .partner-ingredients .section-row { margin-bottom: clamp(20px, 2.4vw, 28px); }
.range-list { list-style: none; border-top: 1px solid var(--rule-strong); }
.range-list > li { border-bottom: 1px solid var(--rule-strong); }
.range-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) 10.5em; gap: 8px clamp(20px, 3vw, 48px); align-items: baseline; padding: 26px 12px; color: var(--ink); text-decoration: none; transition: background 0.2s; }
.range-row:hover { background: #ffffff; color: var(--ink); }
.range-row h3 { color: var(--brand); font-size: clamp(21px, 1.9vw, 26px); font-weight: 500; }
.range-row p { color: var(--text); font-size: 16px; max-width: 58ch; }
.range-count { justify-self: end; display: inline-flex; align-items: baseline; gap: 10px; color: var(--ink); font-size: 15px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.range-arrow { display: inline-block; transition: transform 0.25s var(--ease-out); }
@media (max-width: 760px) {
  .range-row { grid-template-columns: 1fr auto; padding: 20px 4px; }
  .range-row p { grid-column: 1 / -1; grid-row: 2; }
}

/* Ingredients: the partner's functions, then a selection that can go straight into the request */
.partner-subhead { margin: 28px 0 12px; color: var(--ink); font-size: 16px; font-weight: 600; }
.section-row + .partner-subhead { margin-top: 0; }
.pick-list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pick-list > li { position: relative; }
.pick { display: grid; gap: 6px; align-content: start; height: 100%; padding: 22px 64px 22px 24px; background: #ffffff; border: 1px solid var(--rule); border-radius: 14px; color: var(--ink); text-decoration: none; transition: border-color 0.25s, box-shadow 0.25s; }
.pick:hover { color: var(--ink); border-color: #c4ccd4; box-shadow: 0 14px 30px -22px rgba(14, 29, 43, 0.4); }
.pick b { font-weight: 600; }
.pick .inci { color: var(--text); font-size: 13px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.pick small { color: var(--brand); font-size: 13px; font-weight: 500; }
.pick-list .request-add { position: absolute; top: 18px; right: 18px; }
@media (max-width: 900px) { .pick-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pick-list { grid-template-columns: 1fr; } .element-grid.partner-functions { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Prose (privacy) */
.privacy-section { padding-top: clamp(48px, 6vw, 72px) !important; }
.privacy-grid { display: grid; grid-template-columns: 280px 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.toc { position: sticky; top: 32px; display: grid; gap: 14px; }
.toc ol { list-style: none; display: grid; border-top: 1px solid var(--rule); }
.toc li { border-bottom: 1px solid var(--rule); }
.toc a { display: block; padding: 10px 0; color: var(--text); font-size: 15px; text-decoration: none; }
.toc a:hover { color: var(--accent); }
.prose { display: grid; gap: 16px; }
.prose > * { max-width: 70ch; }
.prose h2 { font-size: 24px; margin-top: 28px; scroll-margin-top: 24px; }
.prose h2:first-child { margin-top: 0; }
@media (max-width: 900px) { .privacy-grid { grid-template-columns: 1fr; } .toc { position: static; } }
.prose p { color: var(--text); }
.updated { font: 400 14px/1.5 var(--font); color: var(--muted); }

/* Contact: the banner holds a photo on its right half, fading into a ground of the photo's own grey.
   The form, which is what the visitor came for, comes first and is lifted over the banner; the
   direct contact sits beside it, starting where the banner ends. */
.page-contact { --overlap: clamp(72px, 9vw, 128px); --photo-ground: #2f2f30; }
.contact-intro { position: relative; overflow: hidden; background: var(--photo-ground); padding-block: calc(var(--header-h) + clamp(48px, 6vw, 88px)) calc(var(--overlap) + clamp(40px, 5vw, 64px)); }
.contact-intro-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 52%; }
.contact-intro-photo picture, .contact-intro-photo img { width: 100%; height: 100%; }
.contact-intro-photo img { object-fit: cover; object-position: 50% 40%; }
.contact-intro-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--photo-ground) 0%, rgba(47, 47, 48, 0) 45%), linear-gradient(180deg, rgba(20, 20, 20, 0.5) 0%, rgba(20, 20, 20, 0) calc(var(--header-h) + 40px)); }
.contact-intro > .wrap { position: relative; z-index: 1; }
.contact-intro-text { display: grid; gap: 20px; max-width: min(620px, 48%); }
@media (max-width: 900px) {
  .contact-intro-photo { width: 100%; }
  .contact-intro-photo img { object-position: 72% 42%; }
  .contact-intro-photo::after { background: linear-gradient(180deg, rgba(47, 47, 48, 0.6) 0%, rgba(47, 47, 48, 0.82) 100%); }
  .contact-intro-text { max-width: 100%; }
}
/* Beats the general space under a page intro: the form starts inside the banner */
.contact-intro + .contact-section { padding-top: 0 !important; }
.contact-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; margin-top: calc(-1 * var(--overlap)); }
.contact-aside { display: grid; gap: 20px; padding-top: calc(var(--overlap) + 8px); }
.contact-card { display: grid; gap: 14px; background: #ffffff; border: 1px solid var(--rule); border-radius: 14px; padding: clamp(22px, 2.6vw, 32px); }
.contact-card-title { color: var(--ink); font-size: 15px; font-weight: 600; }
.contact-mail { color: var(--ink); font-size: clamp(20px, 1.8vw, 26px); font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
.contact-mail:hover { color: var(--accent); }
.contact-li { color: var(--text); font-size: 15px; text-decoration: none; }
.contact-li:hover { color: var(--accent); }
.contact-docs { list-style: none; display: grid; }
.contact-docs li { position: relative; padding: 10px 0 10px 28px; border-top: 1px solid var(--rule); color: var(--ink); font-size: 16px; }
.contact-docs li::before { content: ""; position: absolute; left: 2px; top: 16px; width: 12px; height: 7px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.contact-docs li:last-child { border-bottom: 1px solid var(--rule); }
.contact-sozio { color: var(--text); font-size: 15px; }
.contact-form { display: grid; gap: 26px; background: #ffffff; padding: clamp(22px, 3.4vw, 44px); border: 1px solid var(--rule); border-radius: 18px; box-shadow: 0 40px 80px -48px rgba(14, 29, 43, 0.5); }
.form-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.form-submit .form-note { flex: 1 1 220px; }
.type-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.type-options legend { padding: 0; margin-bottom: 10px; font-size: 14px; font-weight: 600; color: var(--ink); }
.type-option { position: relative; display: block; cursor: pointer; }
.type-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.type-option span { display: flex; align-items: center; min-height: 54px; height: 100%; padding: 12px 14px; border: 1px solid var(--rule-strong); border-radius: 10px; font-size: 15px; line-height: 1.3; color: var(--ink); background: #ffffff; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; }
.type-option:hover span { border-color: var(--ink); }
.type-option input:checked + span { border-color: var(--accent); background: #eef3fe; box-shadow: inset 0 0 0 1px var(--accent); font-weight: 500; }
/* A small check box on each card says several can be ticked */
.type-option span { gap: 10px; }
.type-option span::before { content: ""; flex: none; width: 16px; height: 16px; border: 1.5px solid var(--rule-strong); border-radius: 4px; background: #ffffff center / 12px no-repeat; transition: background-color 0.2s, border-color 0.2s; }
.type-option input:checked + span::before { border-color: var(--accent); background-color: var(--accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.4l3 3 6-6.3' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.type-option input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.field { display: grid; gap: 8px; align-content: start; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
/* Fields pack at the top: a password manager adds an element after the Name box, which makes that field taller, and its
   stretched neighbour would otherwise spread the extra height into its label row and drop its box out of line */
.field label { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.req { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea { width: 100%; font: 400 16px/1.4 var(--font); color: var(--ink); background: var(--bg); border: 1px solid var(--rule-strong); border-radius: 10px; padding: 13px 14px; transition: border-color 0.2s, background 0.2s; }
.field input:hover, .field textarea:hover { border-color: #a9b4bd; }
.field textarea { min-height: 160px; resize: vertical; }
.field textarea::placeholder { color: #75808a; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); background: #ffffff; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-form .btn { padding-inline: 34px; }
.form-status { padding: 12px 14px; font-size: 15px; border: 1px solid; border-radius: 10px; }
.form-status.is-success { background: #f1f8f3; color: var(--ink); border-color: #b9dcc4; }
.form-status.is-error { background: #fbeeea; color: #6b1d0e; border-color: #e3b8aa; }
.form-note { font-size: 14px; color: var(--muted); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } .contact-aside { padding-top: 0; } }
@media (max-width: 560px) { .form-submit .btn { width: 100%; } }
@media (max-width: 640px) { .type-options { grid-template-columns: 1fr 1fr; } .field-row { grid-template-columns: 1fr; } }
/* The smallest phones: one option per row, since two side by side would run past the screen */
@media (max-width: 360px) { .type-options { grid-template-columns: 1fr; } }

/* Request list on the contact form */
.request-box { display: grid; gap: 10px; padding: 16px 18px; background: var(--tint); border: 1px solid var(--rule-strong); }
.request-box[hidden] { display: none; }
.request-title { font: 500 12px/1.5 var(--font); letter-spacing: 0.14em; text-transform: uppercase; color: var(--label); }
.request-list { list-style: none; display: grid; gap: 6px; }
.request-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--ink); border-top: 1px solid var(--rule); padding-top: 6px; }
.request-list li:first-child { border-top: 0; padding-top: 0; }
.request-remove { background: none; border: 0; padding: 4px; color: var(--label); font: 400 14px var(--font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Ingredient catalogue */
/* Toolbar: one white card holding the search, the two menus, the function chips and the count */
.catalog-toolbar { padding: clamp(18px, 2.2vw, 28px); background: #ffffff; border: 1px solid var(--rule); border-radius: 18px; margin-bottom: 20px; }
.catalog-filters { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; align-items: center; }
.catalog-filters .field { position: relative; }
.catalog-search-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.catalog-filters input, .catalog-filters select { width: 100%; height: 48px; border: 1px solid var(--rule-strong); border-radius: 12px; background: var(--bg); color: var(--ink); font: 400 16px/1.2 var(--font); }
.catalog-filters input { padding: 0 20px 0 46px; }
.catalog-filters select { appearance: none; padding: 0 40px 0 18px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5l3 3 3-3' fill='none' stroke='%2356636f' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; }
.catalog-filters input:focus, .catalog-filters select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; background-color: #ffffff; }
.catalog-count { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font: 400 15px/1.5 var(--font); color: var(--text); }
.catalog-count strong { color: var(--ink); font-weight: 500; }
.catalog-reset { background: none; border: 0; padding: 0; color: var(--label); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* Column widths: room for the function names so rows stay compact */
.catalog-table { table-layout: fixed; }
/* The + column has a fixed width so its button never spills past the table edge; the manufacturer column takes what is left */
.catalog-table th:nth-child(1) { width: 23%; }
.catalog-table th:nth-child(2) { width: 33%; }
.catalog-table th:nth-child(3) { width: 25%; }
.catalog-table th:nth-child(5) { width: 72px; }
.catalog-table td:nth-child(5) { padding-left: 0; text-align: right; }
@media (max-width: 1180px) { .catalog-table th:nth-child(1) { width: 22%; } .catalog-table th:nth-child(2) { width: 28%; } .catalog-table th:nth-child(3) { width: 22%; } .catalog-table th, .catalog-table td { padding-inline: 14px; } .catalog-table th { letter-spacing: 0.08em; } }
.catalog-table td { overflow-wrap: anywhere; }
.catalog-table thead th { position: sticky; top: 0; z-index: 1; }
.catalog-table tr[hidden] { display: none; }
.catalog-table td a { color: var(--ink); font-weight: 600; text-decoration: none; }
/* INCI: regular type, two lines at most (full text on hover), a dash when unknown */
.catalog-table .inci { font: 400 13.5px/1.5 var(--font); color: var(--text); }
.inci-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.inci-none { color: var(--rule-strong); }
.catalog-table tbody tr { transition: background 0.15s; }
.catalog-table tbody tr:hover { background: #fafbfa; }
.catalog-table td { vertical-align: middle; }
.catalog-table .code { display: block; font: 400 12px/1.5 var(--mono); color: var(--muted); }
.inci { font-family: var(--mono); font-size: 13px; color: var(--ink); }
/* The + that adds an ingredient to the request: blue on hover, filled green with a check once added (green means done).
   The + and the check are drawn shapes in the current colour, not text: a "+" character sits on the font's
   maths line, a pixel below the middle, and shimmered when the button was scaled. The + strokes are 2px
   with square ends, so they cover whole pixels of the 14px box and stay crisp and even on both sides */
.request-add { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--rule-strong); border-radius: 50%; background: #ffffff; color: var(--ink); cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.16s var(--ease-out); }
.request-add::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v12M1 7h12' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v12M1 7h12' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat; }
.request-add:hover { border-color: var(--accent); color: var(--accent); }
.request-add[aria-pressed="true"] { background: var(--success); border-color: var(--success); color: #ffffff; }
.request-add[aria-pressed="true"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.4l3 3 6-6.3' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.4l3 3 6-6.3' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.request-add:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.catalog-empty { padding: 24px 0; }
@media (max-width: 900px) { .catalog-filters { grid-template-columns: 1fr 1fr; } .catalog-search { grid-column: 1 / -1; } }
@media (max-width: 760px) { .catalog-functions { display: flex; overflow-x: auto; margin-inline: calc(var(--gutter) * -1 - 18px); padding: 2px calc(var(--gutter) + 18px) 6px; scrollbar-width: none; } .catalog-functions::-webkit-scrollbar { display: none; } .catalog-functions > li { flex: none; width: 108px; } }
@media (max-width: 560px) { .catalog-filters { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .catalog-table thead { display: none; }
  .catalog-table tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 14px 16px; border-bottom: 1px solid var(--rule); }
  .catalog-table td { padding: 0; border: 0; }
  .catalog-table td:nth-child(1), .catalog-table td:nth-child(2), .catalog-table td:nth-child(3), .catalog-table td:nth-child(4) { grid-column: 1; font-size: 14px; }
  .catalog-table td:nth-child(5) { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
  .catalog-table td.inci:has(.inci-none) { display: none; }
}

/* Ingredient page */
.breadcrumb { font: 400 14px/1.5 var(--font); color: rgba(255, 255, 255, 0.7); }
.breadcrumb a { color: #ffffff; }
.ingredient-grid { display: grid; grid-template-columns: 1fr 320px; gap: clamp(32px, 6vw, 72px); align-items: start; margin-top: 12px; }
.ingredient-main { display: grid; gap: 24px; }
.spec-table { margin: 8px 0 0; border: 1px solid var(--rule-strong); background: #ffffff; }
.spec-table > div { display: grid; grid-template-columns: 190px 1fr; gap: 16px; padding: 15px 20px; border-top: 1px solid var(--rule); }
.spec-table > div:first-child { border-top: 0; }
.spec-table dt { color: var(--muted); }
.spec-table dd { margin: 0; color: var(--ink); }
/* The manufacturer reads as a link at rest (blue, light underline) and plainly on hover: the underline fills and a pale blue ground comes up.
   It sits in the white table inside the dark intro, so it opts out of the intro's white hover */
.maker-link { margin: -2px -5px; padding: 2px 5px; border-radius: 5px; font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color 0.2s, background 0.2s, text-decoration-color 0.2s; }
.page-intro .spec-table .maker-link:hover { background: #eef3fe; color: var(--accent-dark); text-decoration-color: currentColor; text-decoration-thickness: 2px; }
.request-view::after { content: "→"; display: inline-block; transition: transform 0.25s var(--ease-out); }
.code-value { font-family: var(--mono); font-size: 14px; }
/* A light touch on the About photo */
.intro-photo img { filter: saturate(0.9); }
.request-panel { display: grid; gap: 18px; background: var(--tint); border: 1px solid var(--rule-strong); padding: 28px; }
.page-intro .request-panel p { color: var(--text); }
.request-panel .btn { text-align: center; }
.request-panel .btn[data-added] { background: var(--ink); }
.request-panel .btn[data-added]::after { content: none; }
@media (max-width: 900px) { .ingredient-grid { grid-template-columns: 1fr; } .spec-table > div { grid-template-columns: 1fr; gap: 2px; } }

/* Function labels with their colour dot (catalogue table and ingredient pages) */
.fn { display: inline-flex; align-items: baseline; gap: 7px; margin-right: 10px; color: var(--ink); text-decoration: none; }
.fn::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); transform: translateY(-1px); }
.catalog-table .fn { display: flex; margin: 0 0 2px; font-size: 14px; }
.fn-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.fn-chips .fn { margin: 0; padding: 7px 14px; border: 1px solid var(--rule-strong); border-radius: 999px; background: #ffffff; font-size: 14px; transition: border-color 0.2s; }
.fn-chips .fn:hover { border-color: var(--accent); color: var(--ink); }

/* Ingredient page: similar ingredients */
.related-section { border-top: 1px solid var(--rule); }
.related-section h2 { font-size: clamp(26px, 2.6vw, 36px); }
.related-note { margin-top: 8px; color: var(--text); }
.related { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.related a { display: grid; gap: 6px; height: 100%; padding: 24px 26px; background: #ffffff; border: 1px solid var(--rule); border-radius: 14px; color: var(--ink); text-decoration: none; transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s; }
.related a:hover { color: var(--ink); border-color: #c4ccd4; box-shadow: 0 14px 30px -22px rgba(14, 29, 43, 0.4); }
.related b { font-weight: 600; }
.related .inci { font-size: 13px; color: var(--text); }
.related small { font: 600 11px/1.4 var(--font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
@media (max-width: 900px) { .related { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .related { grid-template-columns: 1fr; } }

/* 404 */
.not-found-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.page-intro .not-found-grid h1 { color: var(--ink); }
.page-intro .not-found-grid p { color: var(--text); }
.not-found-grid > div { display: grid; gap: 20px; align-content: start; justify-items: start; padding: clamp(24px, 3vw, 40px); background: #ffffff; border: 1px solid var(--rule); border-radius: 14px; }
.not-found { padding-block: calc(var(--header-h) + clamp(48px, 7vw, 96px)) clamp(64px, 9vw, 120px); }
@media (max-width: 760px) { .not-found-grid { grid-template-columns: 1fr; } }


/* Subtly rounded panels across the inner pages */
.table-scroll, .contact-form, .request-panel, .request-box, .spec-table, .form-status { border-radius: 14px; }
.table-scroll, .spec-table { overflow: hidden; }
.table-scroll { overflow-x: auto; }
.contact-form, .table-scroll { border-color: var(--rule); }


/* Footer: a compact close on navy. Brand and tagline, three link columns, one legal line. */
/* The footer continues the closing band's navy, so the page ends once: a hairline separates them */
.site-footer { background: var(--ink); color: rgba(255, 255, 255, 0.62); padding-block: 0 24px; font-size: 14px; }
/* The hairline spans the content width, like the legal line at the bottom */
.footer-grid { padding-top: clamp(44px, 5vw, 64px); background: linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12)) var(--gutter) 0 / calc(100% - 2 * var(--gutter)) 1px no-repeat; }
/* The footer shows the logo in its own green and blue */
.site-footer .brand img { filter: none; opacity: 1; width: 132px; }
.site-footer a { color: rgba(255, 255, 255, 0.88); text-decoration: none; transition: color 0.2s; }
.site-footer a:hover { color: #ffffff; }
.site-footer :focus-visible { outline-color: #ffffff; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 32px clamp(32px, 4vw, 56px); }
.footer-brand { display: grid; gap: 16px; align-content: start; justify-items: start; }
.footer-tagline { max-width: 38ch; line-height: 1.6; }
.footer-head { font: 600 11px/1.4 var(--font); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); margin-bottom: 14px; }
.footer-col ul { list-style: none; display: grid; gap: 10px; }
.footer-social { display: inline-flex; align-items: center; gap: 8px; }
.footer-social svg { flex: none; color: rgba(255, 255, 255, 0.7); transition: color 0.2s; }
.footer-social:hover svg { color: currentColor; }
.footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; margin-top: clamp(36px, 4vw, 48px); padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 12.5px; color: rgba(255, 255, 255, 0.55); }
.footer-legal span:first-child { margin-right: auto; }
.site-footer .footer-lang { padding: 6px 12px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 999px; font-size: 12.5px; line-height: 1; }
.site-footer .footer-lang:hover { border-color: #ffffff; color: #ffffff; }
@media (max-width: 960px) { .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
  .footer-contact { grid-column: 1 / -1; }
  .footer-legal { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* Home banner: the two ways in, right under the headline */
.hero-actions { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: -4px 16px calc(var(--fade) + 8px); }
/* A matched pair in the banner's own light palette: solid white, then frosted glass.
   Same size and shape, so they read as two equal ways in. */
.hero-btn { min-width: 236px; min-height: 52px; padding: 0 24px; justify-content: space-between; gap: 18px; font-weight: 500; letter-spacing: 0.01em; }
.hero-btn span { display: inline-block; transition: transform 0.2s var(--ease-out); }
.hero-btn-solid { background: #ffffff; border-color: #ffffff; color: var(--ink); box-shadow: 0 10px 30px -14px rgba(8, 20, 32, 0.45); }
.hero-btn-solid:hover { background: #ffffff; border-color: #ffffff; color: var(--ink); box-shadow: 0 16px 36px -14px rgba(8, 20, 32, 0.55); }
.hero-btn-glass { background: rgba(14, 29, 43, 0.24); border-color: rgba(255, 255, 255, 0.7); color: #ffffff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); text-shadow: 0 1px 8px rgba(8, 20, 32, 0.35); }
.hero-btn-glass:hover { background: rgba(14, 29, 43, 0.36); border-color: #ffffff; color: #ffffff; }
.hero-btn:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }
@media (max-width: 560px) { .hero-actions { flex-direction: column; align-items: stretch; width: min(100% - 32px, 320px); margin-inline: auto; } .hero-btn { min-width: 0; } }
.hero-sub:has(+ .hero-actions) { margin-bottom: 24px; }
@media (prefers-reduced-motion: no-preference) { .hero-actions { animation: rise-in 1s var(--ease-out) 1.15s both; } }

/* Catalogue: load the next batch of rows */
.catalog-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; margin-top: 24px; color: var(--muted); font-size: 14px; }
.catalog-more[hidden] { display: none; }

/* Request drawer: each item opens its ingredient page */
.cart-item { color: var(--ink); text-decoration: none; }
.cart-item:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }


/* Contact form: the manufacturers' choice sits on its own row, below the customers' six */
.type-option-wide { grid-column: 1 / -1; }

/* Partners page: the invitation to manufacturers, set apart from the partner cards above it */
.supplier-invite { padding-top: 0 !important; padding-bottom: clamp(48px, 5vw, 72px) !important; }
.invite-card { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(32px, 4.5vw, 56px); background: #ffffff; border: 1px solid var(--rule); border-top: 3px solid var(--accent); border-radius: 14px; }
.invite-text { display: grid; gap: 16px; justify-items: start; }
.invite-text h2 { font-size: clamp(28px, 3vw, 40px); }
.invite-text > p:not(.eyebrow) { color: var(--text); max-width: 52ch; }
.invite-text .btn { margin-top: 6px; }
.invite-points { margin: 0; }
@media (max-width: 860px) { .invite-card { grid-template-columns: 1fr; } }

/* Hover movement, for a mouse only: on a phone a tap leaves :hover stuck, so a card would stay lifted
   and the + would stay enlarged after the tap. None of it when the visitor prefers reduced motion. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .link-arrow:hover::after, .btn-primary:hover::after, .request-view:hover::after { transform: translateX(3px); }
  .btn:hover { transform: translateY(-1px); }
  .world:hover .world-img img { transform: scale(1.04); }
  .partners-link:hover span { transform: translateX(6px); }
  .partner-logos a:hover img { transform: scale(1.05); }
  .element-tile:hover, .related a:hover { transform: translateY(-2px); }
  .range-row:hover .range-arrow, .hero-btn:hover span { transform: translateX(4px); }
}

/* Press feedback, for every input: controls give a little under the finger or the click */
.btn:active { transform: none; }
.cart-toggle, .search-toggle, .menu-toggle, .fn-chips .fn, .finder-needs a { transition-property: background, border-color, color, transform; transition-duration: 0.2s, 0.2s, 0.2s, 0.16s; transition-timing-function: ease, ease, ease, var(--ease-out); }
@media (prefers-reduced-motion: no-preference) {
  .btn:active, .request-add:active, .cart-toggle:active, .search-toggle:active, .menu-toggle:active, .fn-chips .fn:active, .finder-needs a:active { transform: scale(0.97); transition-duration: 0.1s; }
}