/* =========================================================
   KAM Kimya - Design System
   Inspired by a clean, whitespace-driven competitor layout:
   one restrained accent color, generous spacing, simple nav,
   card grids. Built to replace the previous WYSIWYG Web
   Builder fixed-pixel layout with a responsive, modern one.
   ========================================================= */

:root{
  /* --- palette --- */
  --navy-900:#0f1a3c;
  --navy-800:#16215c;
  --navy-700:#1d2b73;
  --navy-600:#26398f;
  --navy-100:#e8eaf5;
  --navy-50:#f4f5fb;

  --accent-600:#c81012;
  --accent-700:#a20d0f;
  --accent-100:#fcd9da;

  --ink:#1c2333;
  --ink-soft:#4b5266;
  --line:#e4e6ef;
  --bg:#ffffff;
  --bg-soft:#f6f7fb;
  --white:#ffffff;

  --radius-sm:6px;
  --radius-md:12px;
  --radius-lg:20px;

  --shadow-sm:0 1px 2px rgba(15,26,60,.06);
  --shadow-md:0 8px 24px rgba(15,26,60,.08);
  --shadow-lg:0 20px 48px rgba(15,26,60,.14);

  --container:1200px;
  --gap:1.5rem;
}

*,*::before,*::after{ box-sizing:border-box; }
/* Safety net: on some narrow/foldable phones a stray element (e.g. an
   un-wrapped menu row) can end up a few pixels wider than the viewport;
   without this, that pushes the whole page into horizontal scroll,
   which in turn throws off fixed-position elements like the menu panel
   and the back-to-top button (they can render partly off the visible
   edge on some mobile browsers). Clipping it here keeps everything
   pinned to the real screen width instead. */
html{ scroll-behavior:smooth; scroll-padding-top:96px; overflow-x:hidden; max-width:100%; }
body{
  margin:0;
  font-family:"Nunito Sans", "Segoe UI", Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  max-width:100%;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:"Nunito Sans", "Segoe UI", Arial, sans-serif; line-height:1.15; margin:0 0 .6em; color:var(--navy-900); font-weight:800; }
p{ margin:0 0 1em; }
button{ font-family:inherit; }

.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }
.section{ padding:72px 0; }
.section-tight{ padding:40px 0; }
.section-soft{ background:var(--bg-soft); }
.section-navy{ background:linear-gradient(135deg,var(--navy-800),var(--navy-900)); color:#fff; }
.section-navy h2, .section-navy h3{ color:#fff; }

/* --- hero "Welcome / Bienvenue / Hoşgeldiniz" swipeable card (right side of hero) --- */
.hero-media.hero-welcome{
  aspect-ratio:auto;
  min-height:360px;
  display:flex;
  flex-direction:column;
  background-image:linear-gradient(rgba(10,16,38,.45),rgba(10,16,38,.45)), url('../../images/Istanbul.jpg');
  background-repeat:no-repeat;
  background-position:70% center;
  background-size:cover;
}
.hero-welcome-viewport{ position:relative; flex:1; overflow:hidden; }
.hero-welcome-track{
  display:flex;
  height:100%;
  /* 5 slides in the DOM: English, French, Turkish, Arabic, plus a cloned
     English slide at the end used to make the auto-rotation wrap
     seamlessly (see main.js) instead of snapping backward. */
  width:500%;
  transition:transform .45s cubic-bezier(.4,0,.2,1);
}
.hero-welcome-track.no-transition{ transition:none; }
.hero-welcome-slide{
  width:20%;
  height:100%;
  overflow-y:auto;
  box-sizing:border-box;
  padding:112px 28px 26px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  -webkit-overflow-scrolling:touch;
}
/* Full RTL layout for the Arabic slide -- previously only the paragraph
   text was flipped to the right while the "Welcome" heading and its
   accent underline stayed pinned to the left (the slide container itself
   was still direction:ltr). Setting direction:rtl on the whole slide
   moves everything -- heading, <hr>, paragraphs -- to the right, which is
   the natural reading start for Arabic. */
.hero-welcome-slide[lang="ar"]{ font-family:'Noto Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif; direction:rtl; text-align:right; }
.hero-welcome-slide h3{ color:#fff; font-size:1.45rem; margin-bottom:.4em; }
.hero-welcome-slide hr{ border:none; border-top:3px solid var(--accent-600); width:44px; margin:0 0 1em; }
.hero-welcome-slide p{
  color:rgba(255,255,255,.88);
  font-size:1.05rem;
  line-height:1.65;
  margin-bottom:.85em;
}
.hero-welcome-slide p:last-child{ margin-bottom:0; }

/* Top-right pause/play control for the auto-rotating language slides. */
.hero-welcome-pause{
  position:absolute; top:18px; right:18px; z-index:5;
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,.16); border:none; color:#fff;
  cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.4);
  transition:background .2s ease;
}
.hero-welcome-pause:hover{ background:rgba(255,255,255,.32); }
.hero-welcome-pause-icon{ width:13px; height:13px; }
.hero-welcome-pause-icon--play{ display:none; }
.hero-welcome-pause.is-paused .hero-welcome-pause-icon--pause{ display:none; }
.hero-welcome-pause.is-paused .hero-welcome-pause-icon--play{ display:block; }

@media (max-width: 760px){
  /* No max-height here (unlike before): on mobile the card isn't stretched
     to match a sibling column's height by the desktop grid, so it must be
     free to grow with its own content. Capping it at a fixed height forced
     .hero-welcome-slide's overflow-y:auto to kick in, which trapped touch
     scrolling inside the card instead of continuing down the page. */
  .hero-media.hero-welcome{ min-height:320px; }
  /* Belt-and-braces: even if the height chain above ever comes out
     slightly short, never let this card capture touch scroll -- overflow
     content should just be visible (extending the card) rather than
     creating its own inner scrollbar. */
  .hero-welcome-slide{ overflow-y:visible; }
}

.eyebrow{
  display:inline-block;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent-600);
  margin-bottom:.75em;
}
.section-head{ max-width:720px; margin:0 auto 3rem; text-align:center; }
.section-head h2{ font-size:clamp(1.6rem,3vw,2.2rem); }
.section-head p{ color:var(--ink-soft); font-size:1.05rem; }

/* --- buttons --- */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  padding:.85em 1.6em;
  border-radius:999px;
  font-weight:700;
  font-size:.95rem;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.btn-accent{ background:var(--accent-600); color:#fff; }
.btn-accent:hover{ background:var(--accent-700); transform:translateY(-1px); }
.btn-navy{ background:var(--navy-800); color:#fff; }
.btn-navy:hover{ background:var(--navy-900); transform:translateY(-1px); }
.btn-outline{ background:transparent; border-color:currentColor; }
.btn-outline:hover{ background:rgba(255,255,255,.08); }
.btn-outline-navy{ background:transparent; border-color:var(--navy-800); color:var(--navy-800); }
.btn-outline-navy:hover{ background:var(--navy-800); color:#fff; }
.btn-sm{ padding:.55em 1.1em; font-size:.85rem; }
.btn-block{ width:100%; justify-content:center; }

/* --- scroll reveal (product cards, About Us cards, Applications/Problem
   Solving industry tiles) --- the "reveal-ready" class is only added by
   JS once it has confirmed it can animate things back in, so visitors
   with JS disabled (or if the script fails) always see full content,
   never a permanently-hidden card. --- */
html.reveal-ready .reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .5s ease-out, transform .5s ease-out;
}
html.reveal-ready .reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  html.reveal-ready .reveal{ opacity:1; transform:none; transition:none; }
}
/* Cards that also use .reveal (family cards, About Us cards, product
   cards) need this specificity to win over the .is-visible resting-state
   rule above, otherwise their hover-lift transform never visibly applies
   once the card has scrolled into view. Each card sets --hover-lift to
   its own amount (falls back to -3px, matching the plain .card hover). */
html.reveal-ready .reveal:hover{ transform:translateY(var(--hover-lift,-3px)); }

/* =========================================================
   HEADER / NAV
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:500;
  /* Forces its own GPU compositing layer -- works around a known Android
     Chrome bug where a position:sticky header can momentarily fail to
     repaint right after a scroll-to-anchor jump (e.g. clicking a menu
     link like "About Us"), especially while the browser's own toolbar is
     mid-animation. Harmless no-op if that isn't what's happening. */
  transform:translateZ(0);
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; height:92px;
}
/* NOTE: header clearance for scroll-to-anchor jumps is handled by
   html's scroll-padding-top (see top of this file) -- that already
   applies sitewide to every scrollIntoView()/native anchor jump, so it
   must NOT also be set here as scroll-margin-top on :target or on
   individual sections. Stacking a second offset on top of
   scroll-padding-top (which happened here previously) overshoots past
   the intended target instead of landing on it. */
.brand{ display:flex; align-items:center; gap:.6em; min-width:0; }
.brand-name{ font-weight:800; font-size:1.05rem; color:var(--navy-900); letter-spacing:.01em; }
.header-tagline{
  flex:1; margin:0; text-align:center; font-size:.78rem; line-height:1.45;
  color:var(--ink-soft); white-space:nowrap;
}
@media (max-width:900px){
  .header-tagline{ display:none; }
}

/* --- menu toggle: "Menu" label + KAM Kimya logo-mark icon in the header bar ---
   padding + matching negative margin gives the button a much larger click/tap
   target than its visible content, without shifting its visual position or
   affecting the surrounding header layout. Vertical padding is capped so the
   invisible zone stays within the 92px header bar (nav-wrap height) instead
   of spilling into the page content below; horizontal padding can go wider
   since there's open space either side. */
.menu-toggle{
  display:flex; align-items:center; gap:10px;
  background:none; border:none; cursor:pointer;
  flex-shrink:0; padding:32px 64px 32px 20px; margin:-32px -64px -32px -20px;
}
.sample-cart-btn{
  position:relative; display:flex; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer; flex-shrink:0;
  color:var(--navy-900); padding:14px; margin:-14px; transition:color .2s ease;
}
.sample-cart-btn:hover{ color:var(--accent-600); }
.sample-cart-icon{ width:23px; height:23px; display:block; }
.sample-cart-count{
  position:absolute; top:1px; right:1px; min-width:16px; height:16px; padding:0 3px;
  background:var(--accent-600); color:#fff; font-size:.65rem; font-weight:800;
  border-radius:999px; display:flex; align-items:center; justify-content:center; line-height:1;
}
.sample-cart-count[hidden]{ display:none; }
.menu-toggle-label{
  font-size:1rem; font-weight:700; color:var(--navy-900); letter-spacing:.02em;
  transition:color .2s ease;
}
.menu-toggle:hover .menu-toggle-label{ color:var(--accent-600); }
.menu-toggle-mark{
  display:block; height:22px; width:22px; flex-shrink:0;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1), opacity .2s ease;
}
.menu-toggle:hover .menu-toggle-mark{ transform:scale(1.08); }
.menu-open .menu-toggle-mark{ transform:rotate(180deg); }

/* --- discrete right-side expandable menu panel --- */
.site-menu-overlay{
  position:fixed; inset:0; z-index:1000;
  background:rgba(10,17,40,.5);
  opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility 0s linear .3s;
}
.site-menu-overlay.is-open{ opacity:1; visibility:visible; transition:opacity .3s ease; }

.site-menu-panel{
  position:absolute; top:0; right:0; bottom:0; width:100%; max-width:min(960px, 100vw);
  background:var(--navy-50);
  box-shadow:-8px 0 22px rgba(0,0,0,.14);
  padding:88px 36px 28px; overflow-y:auto;
  transform:translateX(100%); transition:transform .35s ease, width .35s ease;
}
/* Actual width is computed in main.js (sizeMenuPanel) so the panel's left
   edge lands right at the header's cart icon; max-width above is just a
   ceiling/fallback in case JS hasn't run yet. */
.site-menu-overlay.is-open .site-menu-panel{ transform:translateX(0); }

.site-menu-close{
  position:absolute; top:22px; right:24px;
  display:flex; align-items:center; gap:10px;
  background:none; border:none; cursor:pointer;
  padding:20px; margin:-20px;
}
.site-menu-close-label{
  font-size:1rem; font-weight:700; color:var(--navy-900); letter-spacing:.02em;
  transition:color .2s ease;
}
.site-menu-close-icon{ font-size:1.4rem; line-height:1; color:var(--navy-900); transition:color .2s ease; }
.site-menu-close:hover .site-menu-close-label,
.site-menu-close:hover .site-menu-close-icon{ color:var(--accent-600); }

.site-menu-links{ display:flex; flex-direction:column; }
.site-menu-item{
  padding:.35em 0; border-bottom:1px solid var(--line);
  opacity:0; transform:translateX(10px);
  transition:opacity .3s ease, transform .3s ease;
}
.site-menu-overlay.is-open .site-menu-item{ opacity:1; transform:translateX(0); }
.site-menu-item:nth-child(1){ transition-delay:.05s; }
.site-menu-item:nth-child(2){ transition-delay:.08s; }
.site-menu-item:nth-child(3){ transition-delay:.11s; }
.site-menu-item:nth-child(4){ transition-delay:.14s; }
.site-menu-item:nth-child(5){ transition-delay:.17s; }
.site-menu-item:nth-child(6){ transition-delay:.2s; }

/* Direct links (Home, Applications, Problem Solving) are actual
   hyperlinks, so they render in the site's red accent right away --
   no hover-to-reveal, per the "anything hyperlinked is red" rule. */
.site-menu-link{
  position:relative; display:inline-flex; align-items:baseline; gap:.5em; width:fit-content;
  font-size:1.1rem; font-weight:700; color:var(--accent-600);
  padding:.25em 0; transition:opacity .15s ease;
}
a.site-menu-link:hover{ opacity:.75; }

/* Group headers (Company, Products, Resources) are NOT links -- they're
   toggle buttons that expand/collapse a list of real links below them, so
   they stay a neutral gray/navy rather than red, with a chevron that
   flips to signal open/closed state. */
.site-menu-toggle{
  display:flex; align-items:center; justify-content:space-between; gap:.6em; width:100%;
  background:none; border:none; cursor:pointer; text-align:left;
  font-size:1.1rem; font-weight:700; color:var(--ink-soft); padding:.25em 0;
  transition:color .15s ease;
}
.site-menu-toggle:hover{ color:var(--navy-900); }
.site-menu-chevron{ width:18px; height:18px; flex-shrink:0; transition:transform .25s ease; }
.site-menu-group.is-expanded .site-menu-toggle{ color:var(--navy-900); }
.site-menu-group.is-expanded .site-menu-chevron{ transform:rotate(180deg); }

/* Grid-rows 0fr->1fr trick: animates open/closed height without having to
   measure and set an explicit pixel height in JS. */
.site-menu-subwrap{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .3s ease;
}
.site-menu-group.is-expanded .site-menu-subwrap{ grid-template-rows:1fr; }
.site-menu-subinner{ overflow:hidden; display:flex; flex-direction:column; }
.site-menu-sublink{
  position:relative; display:block; width:fit-content;
  font-size:.88rem; font-weight:600; color:var(--accent-600);
  padding:.4em 0 .4em 1.1em; transition:opacity .15s ease;
}
.site-menu-sublink:hover{ opacity:.75; }
.site-menu-subinner{ padding-top:.2em; }
.site-menu-subinner:first-child{ padding-top:0; }

/* Underline that grows in from the left on hover, and shrinks back the
   same way when the pointer leaves -- matches cliqswiss.com's menu. */
.site-menu-link::after,
.site-menu-sublink::after{
  content:""; position:absolute; left:0; bottom:.32em; width:100%; height:2px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease;
}
.site-menu-sublink::after{ left:1.1em; width:calc(100% - 1.1em); }
.site-menu-link:hover::after,
.site-menu-sublink:hover::after{ transform:scaleX(1); }

.site-menu-extra{ display:flex; flex-direction:column; gap:24px; padding-top:24px; border-top:1px solid var(--line); }
.site-menu-contact{ align-self:flex-start; font-size:1.05rem; }
.site-menu-info{ display:flex; flex-direction:column; gap:10px; }
.site-menu-info a{
  font-size:1.05rem; font-weight:600; color:var(--ink-soft); transition:color .15s ease;
}
.site-menu-info a:hover{ color:var(--accent-600); }
/* Digits render taller than lowercase letters at the same font-size, so
   the phone number optically reads bigger than the Email/LinkedIn lines
   next to it even though the declared size is identical; nudge it down
   slightly so all three look the same size. */
.site-menu-info-phone{ font-size:.95rem; }
.site-menu-info-label{
  font-size:.76rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em;
  color:#a7adbd; margin-bottom:2px;
}
body.menu-open{ overflow:hidden; }

/* --- PDF preview modal (family brochures on products.html) --- */
.pdf-modal-overlay{
  position:fixed; inset:0; z-index:1100;
  background:rgba(10,17,40,.65);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  opacity:0; visibility:hidden;
  transition:opacity .25s ease, visibility 0s linear .25s;
}
.pdf-modal-overlay.is-open{ opacity:1; visibility:visible; transition:opacity .25s ease; }
.pdf-modal-panel{
  background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  width:100%; max-width:900px; height:min(85vh,900px);
  display:flex; flex-direction:column; overflow:hidden;
  transform:scale(.96); transition:transform .25s ease;
}
.pdf-modal-overlay.is-open .pdf-modal-panel{ transform:scale(1); }
.pdf-modal-overlay.is-fullscreen{ padding:0; }
.pdf-modal-overlay.is-fullscreen .pdf-modal-panel{
  max-width:100%; width:100%; height:100dvh; border-radius:0;
}
.pdf-modal-bar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; border-bottom:1px solid var(--line); flex-shrink:0;
}
.pdf-modal-title{ font-weight:800; color:var(--navy-900); font-size:.95rem; }
.pdf-modal-actions{ display:flex; align-items:center; gap:10px; }
.pdf-modal-close, .pdf-modal-fullscreen{
  width:32px; height:32px; border-radius:50%; border:none; background:var(--navy-50);
  color:var(--navy-800); font-size:1.1rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s ease;
}
.pdf-modal-close:hover, .pdf-modal-fullscreen:hover{ background:var(--line); }
.pdf-modal-fullscreen.is-active{ background:var(--accent-100); color:var(--accent-700); }
.pdf-modal-body{ flex:1; display:flex; flex-direction:column; min-height:0; background:var(--bg-soft); }
.pdf-modal-body iframe{ flex:1; width:100%; border:none; }
.pdf-modal-fallback{
  margin:0; padding:8px 18px; font-size:.78rem; color:var(--ink-soft);
  text-align:center; border-top:1px solid var(--line); background:#fff;
}
body.pdf-modal-open{ overflow:hidden; }
@media (max-width: 600px){
  .pdf-modal-overlay{ padding:0; }
  .pdf-modal-panel{ max-width:100%; height:100dvh; border-radius:0; }
}

/* --- "Coming soon" popup for not-yet-launched product families (KAM-RCA) --- */
.coming-soon-overlay{
  position:fixed; inset:0; z-index:1100;
  background:rgba(10,17,40,.65);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  opacity:0; visibility:hidden;
  transition:opacity .2s ease, visibility 0s linear .2s;
}
.coming-soon-overlay.is-open{ opacity:1; visibility:visible; transition:opacity .2s ease; }
.coming-soon-panel{
  position:relative; background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  width:100%; max-width:560px; max-height:85vh; overflow-y:auto; padding:32px 32px 28px;
  transform:scale(.96); transition:transform .2s ease;
}
.coming-soon-overlay.is-open .coming-soon-panel{ transform:scale(1); }
.coming-soon-close{
  position:absolute; top:14px; right:14px;
  width:32px; height:32px; border-radius:50%; border:none; background:var(--navy-50);
  color:var(--navy-800); font-size:1.1rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s ease;
}
.coming-soon-close:hover{ background:var(--line); }
.coming-soon-badge{
  display:inline-block; font-size:.7rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--accent-600); background:var(--accent-100);
  padding:.3em .7em; border-radius:999px; margin-bottom:.9em;
}
.coming-soon-title{ font-size:1.15rem; margin-bottom:.5em; padding-right:20px; }
.coming-soon-message{ color:var(--ink-soft); font-size:.92rem; margin-bottom:1.4em; line-height:1.6; }
.coming-soon-message p{ margin:0 0 1em; }
.coming-soon-message p:last-child{ margin-bottom:0; }
.coming-soon-actions{ display:flex; align-items:center; flex-wrap:wrap; gap:1em; }
body.coming-soon-open{ overflow:hidden; }
.coming-soon-inline{
  display:inline-block; font-size:.7rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--accent-600); background:var(--accent-100);
  padding:.3em .7em; border-radius:999px; margin-bottom:.6em;
}
.pf-coming-soon{
  color:var(--accent-600); font-weight:700; font-size:.85em;
}

/* --- Sample basket panel (header cart icon opens this) --- */
.sample-basket-overlay{
  position:fixed; inset:0; z-index:1100;
  background:rgba(10,17,40,.65);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  opacity:0; visibility:hidden;
  transition:opacity .2s ease, visibility 0s linear .2s;
}
.sample-basket-overlay.is-open{ opacity:1; visibility:visible; transition:opacity .2s ease; }
.sample-basket-panel{
  position:relative; background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  width:100%; max-width:480px; max-height:85vh; padding:24px 26px 26px;
  display:flex; flex-direction:column;
  transform:scale(.96); transition:transform .2s ease;
}
.sample-basket-overlay.is-open .sample-basket-panel{ transform:scale(1); }
body.sample-basket-open{ overflow:hidden; }
.sample-basket-bar{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:.8em;
}
.sample-basket-title{ font-size:1.1rem; margin:0; }
.sample-basket-close{
  width:32px; height:32px; border-radius:50%; border:none; background:var(--navy-50);
  color:var(--navy-800); font-size:1.1rem; line-height:1; cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s ease;
}
.sample-basket-close:hover{ background:var(--line); }
.sample-basket-list{
  list-style:none; margin:0; padding:0; overflow-y:auto; flex:1;
  display:flex; flex-direction:column; gap:8px;
}
.sample-basket-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:.7em .9em; background:var(--bg-soft); border-radius:var(--radius-sm);
}
.sample-basket-item-name{ font-size:.9rem; font-weight:700; color:var(--navy-900); }
.sample-basket-item-remove{
  background:none; border:none; cursor:pointer; color:var(--ink-soft); font-size:1.2rem;
  line-height:1; padding:2px 6px; flex-shrink:0; transition:color .15s ease;
}
.sample-basket-item-remove:hover{ color:var(--accent-600); }
.sample-basket-empty{ color:var(--ink-soft); font-size:.9rem; text-align:center; padding:1.5em 0; }
.sample-basket-footer{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:1.2em; padding-top:1em; border-top:1px solid var(--line);
}

/* Toast confirming a sample was added -- points the visitor at the cart
   icon so they know where to go next to finish the request. */
.sample-toast{
  position:fixed; left:50%; bottom:28px; z-index:1200;
  width:calc(100% - 32px); max-width:380px;
  transform:translate(-50%, 16px);
  background:var(--navy-900); color:#fff;
  border-radius:var(--radius-md); box-shadow:var(--shadow-lg);
  padding:14px 16px; display:flex; align-items:flex-start; gap:12px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
.sample-toast.is-open{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translate(-50%, 0);
  transition:opacity .25s ease, transform .25s ease;
}
.sample-toast-icon{ width:22px; height:22px; flex-shrink:0; margin-top:1px; color:var(--accent-600); }
.sample-toast-body{ flex:1; font-size:.88rem; line-height:1.45; color:rgba(255,255,255,.88); }
.sample-toast-body strong{ display:block; margin-bottom:.2em; font-size:.92rem; color:#fff; }
.sample-toast-close{
  flex-shrink:0; background:none; border:none; cursor:pointer;
  color:rgba(255,255,255,.65); font-size:1.15rem; line-height:1; padding:0 2px;
  transition:color .15s ease;
}
.sample-toast-close:hover{ color:#fff; }
@media (max-width:600px){
  .sample-toast{ bottom:16px; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  background:linear-gradient(135deg,var(--navy-900) 0%,var(--navy-700) 100%);
  color:#fff;
  overflow:hidden;
}
.hero-inner{
  display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:stretch;
  padding:32px 0 28px;
}
.hero h1{
  color:#fff; font-size:clamp(2.1rem,4.4vw,3.4rem); margin-bottom:.35em;
}
.hero .lede{ font-size:1.05rem; color:rgba(255,255,255,.82); max-width:520px; margin-bottom:1em; }
.hero-video-cta{ margin:0 0 .9em; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-media{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-lg);
  aspect-ratio:4/3;
}
.hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero-stats{
  display:flex; gap:32px; margin-top:1rem; padding-top:.9rem;
  border-top:1px solid rgba(255,255,255,.18);
}
.hero-stat b{ display:block; font-size:1.6rem; color:#fff; }
.hero-stat span{ font-size:.82rem; color:rgba(255,255,255,.7); }

/* page header for interior pages */
.page-hero{
  background:linear-gradient(135deg,var(--navy-900) 0%,var(--navy-700) 100%);
  color:#fff; padding:64px 0 56px;
}
.page-hero h1{ color:#fff; font-size:clamp(1.8rem,3.6vw,2.6rem); margin-bottom:.3em; }
.page-hero p{ color:rgba(255,255,255,.82); max-width:640px; font-size:1.05rem; margin:0; }
.breadcrumb{ font-size:.82rem; color:rgba(255,255,255,.65); margin-bottom:1em; }
.breadcrumb a{ color:rgba(255,255,255,.85); }
.breadcrumb a:hover{ text-decoration:underline; }

/* Two-column variant of .page-hero used on Problem Solving so a visual
   fills the otherwise-empty right side of the navy band and the hero
   reads as a proper section rather than mostly blank space. */
.page-hero-inner{ display:grid; grid-template-columns:1.2fr .8fr; gap:32px; align-items:center; }
.page-hero-media{ display:flex; justify-content:center; align-items:center; }
.page-hero-media img{ width:100%; max-width:300px; height:auto; filter:drop-shadow(0 18px 30px rgba(0,0,0,.35)); }
/* Applications page Swiss-knife image: 15% smaller than the shared
   .page-hero-media default at full-screen widths only (300px -> 255px).
   Mobile/tablet sizes below are left matching the shared defaults. */
.page-hero-media img.applications-hero-img{ max-width:255px; }
.page-hero-media img.problemsolving-hero-img{ max-width:255px; }
/* Request Samples page: small, discreet product-bottle photo -- unlike
   the Applications/Problem Solving hero visuals this isn't meant to be a
   focal point, so it gets a much smaller cap and a lighter shadow, and
   the text column keeps most of the width. */
.page-hero-inner--samples{ grid-template-columns:1.3fr .7fr; }
.page-hero-media img.samples-hero-img{ max-width:305px; filter:drop-shadow(0 8px 14px rgba(0,0,0,.2)); }
/* Keep the image on the right at a browser window roughly half a laptop
   screen wide (~700-860px) instead of dropping to the stacked mobile
   layout that early -- just tighten the gap and shrink the image a bit
   so the text column still has room to breathe. Only truly narrow/phone
   widths actually stack. */
@media (max-width:860px){
  .page-hero-inner{ gap:20px; }
  .page-hero-media img{ max-width:190px; }
  .page-hero-media img.applications-hero-img{ max-width:190px; }
  .page-hero-media img.problemsolving-hero-img{ max-width:190px; }
  .page-hero-media img.samples-hero-img{ max-width:232px; }
}
@media (max-width:560px){
  .page-hero-inner{ grid-template-columns:1fr; }
  .page-hero-media{ order:-1; margin:0 auto .5rem; }
  .page-hero-media img{ max-width:170px; }
  .page-hero-media img.samples-hero-img{ max-width:204px; }
}

/* =========================================================
   CARDS / GRIDS
   ========================================================= */
.grid{ display:grid; gap:var(--gap); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-md);
  padding:32px; box-shadow:var(--shadow-sm);
  transition:box-shadow .18s ease, transform .18s ease;
}
.card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px); }
.card-icon{
  width:52px; height:52px; border-radius:14px;
  background:var(--navy-50); color:var(--navy-800);
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; margin-bottom:1.1em;
}
.card h3{ font-size:1.15rem; margin-bottom:.5em; }
.card p{ color:var(--ink-soft); font-size:.95rem; margin-bottom:0; }

/* Company-name label pinned above the marker on the Address page map,
   plus a full-tile overlay link so clicking anywhere opens the exact
   location in Google Maps (the embedded iframe itself can't be linked
   directly, since it's a separate cross-origin document). */
.map-pin-label{
  position:absolute; left:50%; top:50%; z-index:2;
  transform:translate(-50%, calc(-100% - 42px));
  background:#fff; color:var(--navy-900); font-weight:800; font-size:.8rem;
  padding:.35em .9em; border-radius:999px; box-shadow:var(--shadow-md);
  white-space:nowrap; pointer-events:none;
}
.map-pin-label::after{
  content:""; position:absolute; left:50%; top:100%;
  transform:translateX(-50%);
  border:6px solid transparent; border-top-color:#fff;
}
.map-click-overlay{ position:absolute; inset:0; z-index:3; cursor:pointer; }

.card .tag{
  display:inline-block; font-size:.7rem; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; color:var(--accent-600); background:var(--accent-100);
  padding:.3em .7em; border-radius:999px; margin-bottom:.8em;
}

.tech-card{
  position:relative;
  text-align:left; --hover-lift:-7px;
  background:#f2f3fa; border-top:4px solid var(--accent-600); box-shadow:var(--shadow-md);
}
.tech-card:hover{ box-shadow:var(--shadow-lg); border-color:var(--navy-100); }
.tech-card img{ width:112px; height:112px; object-fit:contain; margin-bottom:1em; }
/* The "Coming Q1 2027" tag (KAM-RCA card only) floats in the corner
   instead of sitting inline above the image, so it doesn't push that
   card's image down out of alignment with the other three cards' images. */
.tech-card .tag{ position:absolute; top:18px; right:18px; margin-bottom:0; }

.about-video-wrap{
  max-width:1080px; margin:0 auto 2.5rem; border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:var(--shadow-lg); background:#000; line-height:0;
}
.about-video{ display:block; width:100%; height:auto; }

.about-card{
  --hover-lift:-7px;
  background:#fff; border-top:4px solid var(--accent-600); box-shadow:var(--shadow-md);
}
.about-card:hover{ box-shadow:var(--shadow-lg); border-color:var(--navy-100); }

.solution-card{
  background:#f2f3fa; border-top:4px solid var(--accent-600); box-shadow:var(--shadow-md);
}
.solution-card:hover{ box-shadow:var(--shadow-lg); border-color:var(--navy-100); transform:translateY(-7px); }
.solution-card-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:.8em; }
.solution-card-head .tag{ margin-bottom:0; }
.solution-card-icon{ width:116px; height:116px; object-fit:contain; flex-shrink:0; }

.cert-card{
  background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16);
  border-top:4px solid var(--accent-600);
}
.cert-card:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.24); transform:translateY(-7px); }

.stat-strip{
  display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--line);
  border-radius:var(--radius-md); overflow:hidden; background:#fff;
}
.stat-strip > div{ flex:1 1 200px; padding:28px; border-left:1px solid var(--line); text-align:center; }
.stat-strip > div:first-child{ border-left:none; }
.stat-strip b{ display:block; font-size:1.8rem; color:var(--navy-800); }
.stat-strip span{ font-size:.85rem; color:var(--ink-soft); }

/* =========================================================
   PRODUCT CATALOG
   ========================================================= */
.family-nav{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:2.5rem;
}
.family-nav a{
  padding:.6em 1.3em; border-radius:999px; border:1px solid var(--line);
  font-weight:700; font-size:.85rem; color:var(--navy-800); background:#fff;
}
.family-nav a:hover{ border-color:var(--navy-800); }

.family-block{ margin-bottom:64px; }
.family-header{
  display:flex; align-items:flex-start; gap:20px; margin-bottom:2rem;
  padding-bottom:1.5rem; border-bottom:2px solid var(--navy-900);
}
.family-header .card-icon{ flex-shrink:0; }
.family-header h2{ margin-bottom:.2em; }
.family-header p{ color:var(--ink-soft); margin-bottom:.6em; max-width:640px; }
.family-header ul{ color:var(--ink-soft); margin:0 0 .6em 1.2em; padding:0; max-width:640px; list-style:disc; }
.family-header ul li{ margin-bottom:.25em; }
.family-header-media{ flex-shrink:0; margin-left:auto; align-self:center; }
.family-header-media img{
  display:block; width:210px; height:210px; object-fit:cover; border-radius:18px;
  box-shadow:0 10px 24px rgba(15,26,60,.18);
}
.family-coming-soon-box{
  background:var(--navy-50); border-radius:var(--radius-md);
  padding:1.1rem 1.4rem; margin:.4rem 0 1.1rem; max-width:640px;
}
.family-coming-soon-box .coming-soon-badge{ margin-bottom:.7em; }
.family-coming-soon-box .coming-soon-message{ margin-bottom:.9em; }
.family-coming-soon-box .coming-soon-actions{ margin-bottom:0; }

.family-block--empty{ margin-bottom:8px; }
#mode_of_action{ padding-top:12px; }

.product-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:18px; }
.product-card{
  border:1px solid var(--line); border-top:4px solid var(--accent-600); border-radius:var(--radius-md);
  padding:22px; background:#f2f3fa; box-shadow:var(--shadow-md);
  transition:box-shadow .18s ease, border-color .18s ease, transform .18s ease;
  display:flex; flex-direction:column;
}
.product-card:hover{ box-shadow:var(--shadow-lg); border-color:var(--navy-100); }
.product-card-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:.6em; }
.product-card h4{ margin:0; font-size:1.02rem; color:var(--navy-900); }
.product-card .badges{ display:flex; flex-wrap:wrap; gap:6px; margin:.5em 0 .8em; }
.badge{
  font-size:.68rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  padding:.28em .6em; border-radius:6px; background:var(--navy-50); color:var(--navy-700);
}
.badge.wb{ background:#e5f3ff; color:#0a5c9e; }
.badge.sb{ background:var(--accent-100); color:var(--accent-700); }
.badge.sf{ background:#e9f7ec; color:#1f8a42; }
.product-card p{ font-size:.88rem; color:var(--ink-soft); margin-bottom:.9em; }
.product-card-actions{
  display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  margin-top:auto; padding-top:.6em;
}
.tds-link{
  font-size:.82rem; font-weight:700; color:var(--navy-800);
  display:inline-flex; align-items:center; gap:.45em;
}
.tds-icon{ width:36px; height:36px; flex-shrink:0; }
.tds-link:hover{ color:var(--accent-600); }
.tds-link.disabled{ color:#a7adbd; pointer-events:none; }
.sample-btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.82rem; font-weight:700; color:#fff; background:var(--accent-600);
  border:none; border-radius:999px; padding:.55em 1.1em; cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}
.sample-btn:hover{ background:var(--accent-700); transform:translateY(-1px); }
.sample-btn-icon{ width:16px; height:16px; flex-shrink:0; }
.sample-btn.in-basket{ background:var(--navy-800); }
.sample-btn.in-basket:hover{ background:var(--navy-900); }

/* =========================================================
   PRODUCT FILTER ("Filter Categories")
   ========================================================= */
.filter-panel{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:24px 26px; box-shadow:var(--shadow-sm);
}
.filter-panel-top{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px;
}
.filter-panel-top .field input[type=search]{
  width:100%; padding:.75em 1em; border:1px solid var(--line); border-radius:999px;
  font-family:inherit; font-size:1rem; background:var(--bg-soft);
}
.filter-panel-top .field input[type=search]:focus{
  outline:none; border-color:var(--navy-700); background:#fff;
}
/* "Select a product by name" -- a real native <select>, styled to match
   the Country field on the Request Samples page (same closed-box look);
   its open dropdown panel is left to the browser/OS's own native
   rendering, same as Country. */
/* Selector uses ".field select.pf-jump-select" (not just ".pf-jump-select")
   so it out-specifies the sitewide base ".field select{ padding:.85em 1em }"
   rule -- otherwise that rule's padding silently wins over this one's,
   squeezing the fixed 52px height and clipping the option text. */
.field select.pf-jump-select{
  width:100%; box-sizing:border-box; height:52px; padding:0 2.6em 0 1.1em;
  border:1px solid #dbe0f2; border-radius:10px; background:#fff; color:var(--ink);
  font-family:inherit; font-size:1rem; appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%234b5266' stroke-width='1.6' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1.1em center;
  text-overflow:ellipsis; white-space:nowrap; overflow:hidden;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field select.pf-jump-select:invalid{ color:#a6acc4; }
.field select.pf-jump-select:focus{
  outline:none; border-color:var(--navy-600); box-shadow:0 0 0 3px rgba(38,57,143,.12);
}
@keyframes pf-flash-pulse{
  0%{ box-shadow:0 0 0 0 rgba(200,16,18,.55); }
  70%{ box-shadow:0 0 0 14px rgba(200,16,18,0); }
  100%{ box-shadow:0 0 0 0 rgba(200,16,18,0); }
}
.product-card.pf-flash{
  border-color:var(--accent-600);
  animation:pf-flash-pulse 1.1s ease-out 2;
}
.card.pf-flash-continuous,
.product-card.pf-flash-continuous{
  border-color:var(--accent-600);
  animation:pf-flash-pulse 1.1s ease-out infinite;
}
details.subcard.pf-flash{
  border-color:var(--accent-600);
  animation:pf-flash-pulse 1.1s ease-out 2;
}
.af-pills-wrap{ margin-top:2px; }
.af-pills-label{
  display:block; font-size:.78rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; color:var(--ink-soft); margin-bottom:.7em;
}
.af-pills{ display:flex; flex-wrap:wrap; gap:8px; }
.af-pill{
  padding:.55em 1.1em; border-radius:999px; border:1px solid var(--line);
  background:#fff; font-weight:700; font-size:.85rem; color:var(--navy-800); cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.af-pill:hover{ border-color:var(--navy-800); }
.af-pill.active{ background:var(--navy-900); color:#fff; border-color:var(--navy-900); }
.af-pill-count{ opacity:.7; font-weight:600; }

/* Applications page: 2-step guided selector */
.af-wizard{ max-width:920px; margin:0 auto; }
.af-search-field #af-search{
  width:100%; padding:.6em 1.4em; font-size:1rem; font-family:inherit;
  border:2px solid var(--navy-100); border-radius:999px; background:var(--bg-soft);
  box-shadow:var(--shadow-sm); transition:border-color .15s, box-shadow .15s, background .15s;
}
.af-search-field #af-search::placeholder{ color:var(--ink-soft); }
.af-search-field #af-search:focus{
  outline:none; border-color:var(--accent-600); background:#fff;
  box-shadow:0 0 0 4px var(--accent-100);
}
.af-step{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:24px 26px; box-shadow:var(--shadow-sm); margin-bottom:16px;
  animation:af-step-in .25s ease;
}
@keyframes af-step-in{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:translateY(0); }
}
.af-step-label{
  display:flex; align-items:center; gap:.6em; font-weight:800; color:var(--navy-900);
  margin-bottom:1em; font-size:1rem;
}
.af-step-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%; background:var(--navy-900); color:#fff;
  font-size:.82rem; flex-shrink:0;
}
.af-subpill{ border-color:var(--navy-100); }
.af-subpill.active{ background:var(--accent-600); border-color:var(--accent-600); }

/* Step 1 industry cards (with photo) */
.af-industry-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:12px;
}
.af-industry-card{
  display:flex; flex-direction:column; align-items:stretch;
  padding:0; overflow:hidden; text-align:left;
  border-radius:var(--radius-md); border:2px solid var(--line);
  background:#fff; transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.af-industry-card:hover{ border-color:var(--navy-600); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.af-industry-card.active{ border-color:var(--navy-900); box-shadow:var(--shadow-md); background:#fff; }
.af-industry-photo{ display:block; width:100%; height:84px; overflow:hidden; background:var(--navy-50); }
.af-industry-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.af-industry-card-label{
  display:block; padding:.7em .9em; font-weight:700; font-size:.85rem; color:var(--navy-800);
  line-height:1.35; overflow-wrap:break-word;
}
.af-industry-card.active .af-industry-card-label{ color:var(--navy-900); }
.af-industry-card .af-pill-count{ display:block; font-weight:600; opacity:.7; margin-top:.1em; }
@media (max-width: 760px){
  .af-industry-grid{ grid-template-columns:repeat(2, 1fr); }
  .af-industry-photo{ height:97px; } /* ~15% taller than the 84px desktop size */
}

.af-results{
  background:var(--navy-900); border-radius:var(--radius-lg); padding:28px 30px;
  animation:af-step-in .25s ease;
}
.af-results-head{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-bottom:1.2em; padding-bottom:1em; border-bottom:1px solid rgba(255,255,255,.15);
}
.af-results-head h3{ color:#fff; margin:0; font-size:1.1rem; }
.af-results #af-reset{ background:#fff; color:var(--navy-900); border-color:#fff; }
.af-results #af-reset:hover{ background:var(--navy-50); color:var(--navy-900); border-color:var(--navy-50); }
.af-results #af-reset:hover .af-reset-text{ animation:none; }
.af-reset-text{ animation:af-reset-blink 1.4s steps(1) infinite; }
@keyframes af-reset-blink{
  0%,49%{ opacity:1; }
  50%,100%{ opacity:.35; }
}
.af-result-panel{
  background:#fff; border-radius:var(--radius-md); padding:22px 24px;
}
.af-result-breadcrumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:1.2em;
}
.af-crumb-badge{
  padding:.55em 1.1em; border-radius:999px; border:1px solid transparent;
  font-weight:700; font-size:.85rem; color:#fff;
}
.af-crumb-industry{ background:var(--navy-900); border-color:var(--navy-900); }
.af-crumb-app{ background:var(--accent-600); border-color:var(--accent-600); }
/* Pins a compact copy of the industry/application badges to the top of
   the panel once the real breadcrumb scrolls completely out of view, so
   a long recommendation list never leaves the visitor wondering which
   industry/application they're looking at. Same sentinel-free
   IntersectionObserver approach as .ps-issue-sticky in Problem Solving
   (see that block's comment in main.js for why position:sticky isn't
   used directly there), refined twice over: the bar is display:none
   until JS adds .is-pinned (so it's never visible alongside the real
   breadcrumb, even for a frame), and main.js observes the real
   .af-result-breadcrumb element itself rather than a marker at its
   edge, plus guards against pinning while its panel is still hidden --
   both were real bugs in earlier iterations of this feature. */
.af-crumb-sticky-wrap{ height:0; }
.af-crumb-sticky{
  display:none; flex-wrap:wrap; align-items:center; gap:8px;
  border-radius:8px; padding:8px 14px; font-size:.72rem; color:#fff;
}
.af-crumb-sticky.is-pinned{
  display:flex; position:fixed; top:92px; z-index:50;
  background:rgba(15,26,60,.4); border-color:rgba(15,26,60,.4);
  box-shadow:0 6px 16px rgba(15,26,60,.16);
}
.af-crumb-sticky .af-crumb-badge{ padding:.3em .8em; font-size:.72rem; }
.af-result-panel .resin-group{ margin-bottom:1.1em; }
.af-result-panel .resin-group:last-child{ margin-bottom:0; }
.af-result-panel.pf-flash{ animation:pf-flash-pulse 1.1s ease-out 2; }
@media (max-width: 600px){
  .af-step, .af-results{ padding:20px 18px; }
}

/* Problem Solving page: 3-step guided selector (industry -> resin system -> issue) */
.ps-wizard{ max-width:920px; margin:0 auto; }
.ps-search-field #ps-search{
  width:100%; padding:.6em 1.4em; font-size:1rem; font-family:inherit;
  border:2px solid var(--navy-100); border-radius:999px; background:var(--bg-soft);
  box-shadow:var(--shadow-sm); transition:border-color .15s, box-shadow .15s, background .15s;
}
.ps-search-field #ps-search::placeholder{ color:var(--ink-soft); }
.ps-search-field #ps-search:focus{
  outline:none; border-color:var(--accent-600); background:#fff;
  box-shadow:0 0 0 4px var(--accent-100);
}
.ps-step{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:24px 26px; box-shadow:var(--shadow-sm); margin-bottom:16px;
  animation:af-step-in .25s ease;
}
.ps-step-label{
  display:flex; align-items:center; gap:.6em; font-weight:800; color:var(--navy-900);
  margin-bottom:1em; font-size:1rem;
}
.ps-step-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%; background:var(--navy-900); color:#fff;
  font-size:.82rem; flex-shrink:0;
}
.ps-pills{ display:flex; flex-wrap:wrap; gap:8px; }
.ps-pill{
  padding:.55em 1.1em; border-radius:999px; border:1px solid var(--line);
  background:#fff; font-weight:700; font-size:.85rem; color:var(--navy-800); cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.ps-pill:hover{ border-color:var(--navy-800); }
.ps-pill.active{ background:var(--navy-900); color:#fff; border-color:var(--navy-900); }
.ps-pill-count{ opacity:.7; font-weight:600; }
.ps-subpill{ border-color:var(--navy-100); }
.ps-subpill.active{ background:var(--navy-600); border-color:var(--navy-600); }
.ps-typepill{ border-color:var(--accent-100); }
.ps-typepill.active{ background:var(--accent-600); border-color:var(--accent-600); }

/* Step 1 industry cards (with photo) */
.ps-industry-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:12px;
}
.ps-industry-card{
  display:flex; flex-direction:column; align-items:stretch;
  padding:0; overflow:hidden; text-align:left;
  border-radius:var(--radius-md); border:2px solid var(--line);
  background:#fff; transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ps-industry-card:hover{ border-color:var(--navy-600); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.ps-industry-card.active{ border-color:var(--navy-900); box-shadow:var(--shadow-md); background:#fff; }
.ps-industry-photo{ display:block; width:100%; height:84px; overflow:hidden; background:var(--navy-50); }
.ps-industry-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.ps-industry-card-label{
  display:block; padding:.7em .9em; font-weight:700; font-size:.85rem; color:var(--navy-800);
  line-height:1.35; overflow-wrap:break-word;
}
.ps-industry-card.active .ps-industry-card-label{ color:var(--navy-900); }
.ps-industry-card .ps-pill-count{ display:block; font-weight:600; opacity:.7; margin-top:.1em; }
@media (max-width: 760px){
  .ps-industry-grid{ grid-template-columns:repeat(2, 1fr); }
  .ps-industry-photo{ height:97px; } /* ~15% taller than the 84px desktop size */
}

.ps-results{
  background:var(--navy-900); border-radius:var(--radius-lg); padding:28px 30px;
  animation:af-step-in .25s ease;
}
.ps-results-head{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px;
  margin-bottom:1.2em; padding-bottom:1em; border-bottom:1px solid rgba(255,255,255,.15);
}
.ps-results-head h3{ color:#fff; margin:0; font-size:1.1rem; }
.ps-results-legend{
  font-size:.82rem; color:rgba(255,255,255,.75); white-space:nowrap;
}
.ps-results-legend .ps-issue-arrow{ color:#7ec8ff; }
.ps-results #ps-reset{ background:#fff; color:var(--navy-900); border-color:#fff; }
.ps-results #ps-reset:hover{ background:var(--navy-50); color:var(--navy-900); border-color:var(--navy-50); }
.ps-results #ps-reset:hover .ps-reset-text{ animation:none; }
.ps-reset-text{ animation:af-reset-blink 1.4s steps(1) infinite; }
.ps-result-panel{ background:#fff; border-radius:var(--radius-md); padding:22px 24px; }
.ps-result-top{
  display:flex; flex-wrap:nowrap; align-items:flex-start; justify-content:space-between;
  gap:12px; margin-bottom:1.2em;
}
.ps-result-breadcrumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  flex-shrink:1; min-width:0;
}
.ps-crumb-badge{
  padding:.55em 1.1em; border-radius:999px; border:1px solid transparent;
  font-weight:700; font-size:.85rem; color:#fff;
}
.ps-crumb-industry{ background:var(--navy-900); border-color:var(--navy-900); }
.ps-crumb-resin{ background:var(--navy-600); border-color:var(--navy-600); }
.ps-crumb-type{ background:var(--accent-600); border-color:var(--accent-600); }
.ps-result-panel .resin-group{ margin-bottom:1.1em; }
.ps-result-panel .resin-group:last-child{ margin-bottom:0; }
.ps-result-panel .resin-group p .sub-label{ font-weight:700; color:var(--navy-800); }
.ps-result-panel .resin-cardlist{ margin-top:.2em; }
.ps-result-panel.pf-flash{ animation:pf-flash-pulse 1.1s ease-out 2; }
@media (max-width: 600px){
  .ps-step, .ps-results{ padding:20px 18px; }
}

.filter-groups{ display:grid; grid-template-columns:1.1fr .8fr .9fr; gap:14px; }
.filter-groups details.subcard{ margin-bottom:0; }
.filter-groups .subcard-body{ padding:6px 22px 18px; }
/* Static (non-collapsible) third card next to Additive Type / System,
   styled to match .subcard so the row reads as three matching panels. */
.pf-legend-card{
  border:1px solid var(--line); border-radius:var(--radius-md);
  background:#fff; overflow:hidden;
}
.pf-legend-card-title{
  padding:18px 22px; font-weight:700; color:var(--navy-900);
}
.pf-legend-card .subcard-body{ padding-top:0; }
.pf-list{ display:flex; flex-direction:column; gap:2px; }
.pf-list li{ list-style:none; }
.pf-list label{
  display:flex; align-items:center; gap:.6em; padding:.5em .4em; border-radius:8px;
  cursor:pointer; font-size:.9rem; color:var(--ink);
}
.pf-list label:hover{ background:var(--navy-50); }
.pf-list input[type=checkbox]{ width:16px; height:16px; accent-color:var(--accent-600); flex-shrink:0; }
.pf-list .brx-option-count{ color:var(--ink-soft); font-weight:600; margin-left:.3em; }
/* Additive Type now sits side-by-side with System (both half-width), so
   the longer family names wrap onto a second line instead of forcing the
   card to span full width. */
.pf-list--family label{ font-size:.86rem; align-items:flex-start; }
.pf-list--family input[type=checkbox]{ margin-top:.2em; }
/* Reference key, in its own card next to Additive Type / System, spelling
   out what each abbreviated family code (e.g. "KAM-FCA(r)") stands for. */
.pf-legend{
  list-style:none; margin:0; padding:2px 4px 4px;
  display:flex; flex-direction:column; gap:.41em;
}
.pf-legend li{ font-size:.72rem; color:var(--ink-soft); }
.pf-legend b{ color:var(--navy-800); font-weight:800; }
.filter-panel-status{
  margin-top:16px; padding-top:14px; border-top:1px solid var(--line);
  font-size:.85rem; font-weight:700; color:var(--navy-800);
}
/* Generic hide utility -- used to hide/show product cards, family blocks,
   application categories and subcards from the various filter panels. */
.pf-hidden{ display:none !important; }

/* =========================================================
   APPLICATIONS / PROBLEM SOLVING - accordions
   ========================================================= */
.category-tabs{
  display:flex; flex-wrap:wrap; gap:10px; margin-bottom:2.5rem; justify-content:center;
}
.category-tabs button{
  padding:.65em 1.3em; border-radius:999px; border:1px solid var(--line);
  background:#fff; font-weight:700; font-size:.85rem; color:var(--navy-800); cursor:pointer;
}
.category-tabs button.active, .category-tabs button:hover{
  background:var(--navy-900); color:#fff; border-color:var(--navy-900);
}

.app-category{ margin-bottom:3rem; }
.app-category-head{ display:flex; align-items:center; gap:14px; margin-bottom:1.2rem; }
.app-category-head img{ width:46px; height:46px; object-fit:contain; }
.app-category-head h2{ margin:0; font-size:1.4rem; }

details.subcard{
  border:1px solid var(--line); border-radius:var(--radius-md);
  margin-bottom:12px; overflow:hidden; background:#fff;
}
details.subcard[open]{ box-shadow:var(--shadow-sm); }
details.subcard > summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px; font-weight:700; color:var(--navy-900);
}
details.subcard > summary::-webkit-details-marker{ display:none; }
details.subcard > summary .chev{ transition:transform .18s ease; color:var(--accent-600); }
details.subcard[open] > summary .chev{ transform:rotate(90deg); }
.subcard-body{ padding:0 22px 22px; }
.resin-group{ margin-bottom:1.1em; }
.resin-group .label{
  display:inline-block; font-size:.78rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.04em; color:var(--accent-600); margin-bottom:.5em;
}
/* Applications results (SOLVENT-BASED / WATER-BASED / etc.) use blue instead of orange */
.af-result-panel .resin-group .label{ color:var(--navy-800); }
.resin-group p{ font-size:.92rem; color:var(--ink-soft); margin-bottom:.4em; }

/* Resin-system recommendation cards (Problem Solving results). Replaced
   a 2-column table -- resin system | every recommendation crammed into
   one cell -- which worked fine when a resin only had one or two
   recommendations (Foam-related) but became a cramped, hard-to-read
   column once a resin carried six-plus separate "problem: products"
   lines (Surface-related, Dispersion-related). Full-width stacked cards
   let that text use the whole panel width instead of half of it. */
.resin-cardlist{ display:flex; flex-direction:column; }
.resin-card{ padding:.7em 0; border-bottom:1px solid var(--line); }
.resin-card:first-child{ padding-top:0; }
.resin-card:last-child{ border-bottom:none; padding-bottom:0; }
.resin-card-title{ font-weight:800; color:var(--navy-900); font-size:1.02rem; margin-bottom:.4em; }
.resin-card-item{
  font-size:.92rem; color:var(--ink-soft); line-height:1.55; margin-bottom:.55em;
  position:relative; padding-left:1.1em;
}
.resin-card-item:last-child{ margin-bottom:0; }
.resin-card-item::before{
  content:"\2022"; position:absolute; left:0; top:0;
  color:var(--accent-600); font-weight:800;
}
.resin-card-item .sub-label{ font-weight:700; color:var(--ink); }

/* Issue filter (Surface-related/Dispersion-related panels where the same
   handful of labels -- Levelling, Mar resistance, etc. -- repeats under
   every resin system): a legend explaining the +/- arrow convention, a
   pill per issue, and a "Showing: X" tag that stays pinned to the top of
   the results panel as the visitor scrolls through potentially a dozen+
   resin systems, so context isn't lost without repeating the label on
   every single line. See render_resin_table() in build_problemsolving.py. */
.ps-issue-legend{
  background:var(--navy-50); border:1px solid var(--line); border-radius:10px;
  padding:8px 16px; margin-left:auto; font-size:.8rem; color:var(--ink-soft);
  max-width:100%; flex-shrink:1; min-width:0;
}
.ps-issue-legend-hint{ font-size:.72rem; color:#8a8fa3; font-style:italic; margin-top:2px; }
@media (max-width:560px){
  /* Below this width even a shrunk legend has no room left beside the
     badges -- let the row wrap and stack instead of squeezing both
     into an unreadably narrow strip. */
  .ps-result-top{ flex-wrap:wrap; }
  .ps-issue-legend{ margin-left:0; }
}
.ps-issue-pills{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; }
.ps-issue-pill{
  display:inline-flex; align-items:center; gap:.35em;
  border:1px solid #f0999b; background:#fff; border-radius:999px;
  padding:.4em .85em; font-size:.85rem; font-weight:600; color:var(--accent-600);
  cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.ps-issue-pill:hover{ border-color:var(--accent-600); }
.ps-issue-pill.is-active{ background:var(--accent-600); border-color:var(--accent-600); color:#fff; }
.ps-issue-pill.is-active .ps-issue-arrow{ color:#fff; }
.ps-issue-arrow{ color:#0a5c9e; font-weight:800; }
/* Pinning is done in JS (main.js), not with position:sticky -- this
   panel's animated entrance (and possibly other ancestors) kept
   defeating sticky's containing-block requirements in ways that were
   hard to fully verify without a real browser to test against, so an
   IntersectionObserver toggling position:fixed is used instead: it only
   depends on real scroll geometry, not on any ancestor's
   transform/animation state. The bar is display:none until JS adds
   .is-pinned (once the .ps-issue-pills row above it has scrolled
   completely out of view) -- it must never render inline as well as
   pinned, or the pill it duplicates would show twice at once. */
.ps-issue-sticky-wrap{ height:0; }
.ps-issue-sticky{
  display:none; flex-wrap:wrap; align-items:center; gap:8px;
  border-radius:8px; padding:8px 14px; font-size:.72rem; color:var(--ink-soft);
}
.ps-issue-sticky.is-pinned{
  display:flex; position:fixed; top:92px; z-index:50;
  background:rgba(15,26,60,.4); border-color:rgba(15,26,60,.4);
  box-shadow:0 6px 16px rgba(15,26,60,.16);
}
.ps-issue-sticky-tag{
  display:inline-flex; align-items:center; gap:.3em;
  background:var(--accent-600); color:#fff; font-size:.72rem; font-weight:600;
  padding:.3em .75em; border-radius:999px;
}
.ps-issue-sticky-tag .ps-issue-arrow{ color:#fff; }
.ps-issue-sticky .ps-crumb-badge{ padding:.3em .8em; font-size:.72rem; }
/* Pinned copy of the industry/resin/type breadcrumb for panels that don't
   have an issue-filter pill row (has_legend == "0" in build_problemsolving.py --
   flat prose panels and single-recommendation resin tables like
   Foam-related). Those panels never get a .ps-issue-sticky bar, so without
   this nothing pins the breadcrumb once it scrolls out of view. Same
   display:none-until-.is-pinned pattern as .af-crumb-sticky on the
   Applications page and .ps-issue-sticky above -- see main.js for the
   sentinel-free IntersectionObserver approach. */
.ps-crumb-sticky-wrap{ height:0; }
.ps-crumb-sticky{
  display:none; flex-wrap:wrap; align-items:center; gap:8px;
  border-radius:8px; padding:8px 14px; font-size:.72rem; color:#fff;
}
.ps-crumb-sticky.is-pinned{
  display:flex; position:fixed; top:92px; z-index:50;
  background:rgba(15,26,60,.4); border-color:rgba(15,26,60,.4);
  box-shadow:0 6px 16px rgba(15,26,60,.16);
}
.ps-crumb-sticky .ps-crumb-badge{ padding:.3em .8em; font-size:.72rem; }
/* Items in a filtered panel already lead with the arrow, so the bullet
   dot (used elsewhere for Foam-related's simpler list) is redundant here. */
.resin-card-item[data-issue]{ padding-left:0; }
.resin-card-item[data-issue]::before{ content:none; }
/* Filtered view only ever shows one line per resin system now, so the
   generous spacing tuned for the old multi-line list (title -> line ->
   divider) reads as too much air here -- half it, scoped to just the
   filtered cards so Foam-related's original spacing is untouched. */
.resin-card:has(.resin-card-item[data-issue]){ padding:.55em 0; }
.resin-card:has(.resin-card-item[data-issue]) .resin-card-title{ margin-bottom:.3em; }
.resin-card-item[data-issue]{ margin-bottom:.28em; }

/* =========================================================
   NEWS
   ========================================================= */
.news-list{ display:flex; flex-direction:column; gap:0; }
.news-item{
  display:grid; grid-template-columns:150px 1fr; gap:28px;
  padding:28px 0; border-bottom:1px solid var(--line);
}
.news-item:first-child{ padding-top:0; }
.news-date{ font-weight:800; color:var(--accent-600); font-size:.95rem; }
.news-item h3{ font-size:1.15rem; margin-bottom:.4em; }
.news-item p{ color:var(--ink-soft); margin-bottom:.5em; }

.gallery-link{
  display:inline-flex; align-items:center; gap:.5em; vertical-align:middle;
  font-weight:800; color:var(--navy-800);
  transition:color .15s ease, transform .15s ease;
}
.gallery-link-icon{ width:30px; height:30px; flex-shrink:0; transition:transform .18s ease; }
.gallery-link:hover{ color:var(--accent-600); transform:translateX(2px); }
.gallery-link:hover .gallery-link-icon{ transform:scale(1.08); }

/* =========================================================
   PHOTO GALLERY (standalone gallery pages + lightbox)
   ========================================================= */
.photo-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px;
}
.gallery-thumb{
  position:relative; display:block; border-radius:var(--radius-md); overflow:hidden;
  aspect-ratio:4/3; background:var(--bg-soft); box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease;
}
.gallery-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.gallery-thumb:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.gallery-thumb::after{
  content:'\2039\A0\A0\2022\A0\A0\203A'; white-space:pre; position:absolute; inset:auto 10px 10px auto;
  background:rgba(10,17,40,.55); color:#fff; font-size:.7rem; font-weight:800; letter-spacing:.08em;
  padding:.3em .6em; border-radius:20px; opacity:0; transition:opacity .18s ease;
}
.gallery-thumb:hover::after{ opacity:1; }

.lightbox-overlay{
  position:fixed; inset:0; z-index:1200;
  background:rgba(8,12,28,.92);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity .25s ease, visibility 0s linear .25s;
}
.lightbox-overlay.is-open{ opacity:1; visibility:visible; transition:opacity .25s ease; }
.lightbox-panel{
  width:100%; height:100%; display:flex; flex-direction:column;
  padding:18px; box-sizing:border-box;
}
.lightbox-bar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  color:#fff; flex-shrink:0; padding-bottom:12px;
}
.lightbox-title{ font-weight:800; font-size:.92rem; }
.lightbox-counter{ font-size:.82rem; color:rgba(255,255,255,.65); margin-left:.6em; }
.lightbox-close{
  width:36px; height:36px; border-radius:50%; border:none; background:rgba(255,255,255,.12);
  color:#fff; font-size:1.2rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s ease;
}
.lightbox-close:hover{ background:rgba(255,255,255,.24); }
.lightbox-stage{
  flex:1; min-height:0; display:flex; align-items:center; justify-content:center;
  position:relative; gap:10px;
}
.lightbox-stage img{
  max-width:100%; max-height:100%; object-fit:contain; border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg);
}
.lightbox-nav{
  width:44px; height:44px; border-radius:50%; border:none; background:rgba(255,255,255,.12);
  color:#fff; font-size:1.3rem; line-height:1; cursor:pointer; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s ease, transform .15s ease;
}
.lightbox-nav:hover{ background:rgba(255,255,255,.24); transform:scale(1.05); }
.lightbox-filmstrip{
  flex-shrink:0; display:flex; gap:8px; overflow-x:auto; padding:14px 2px 2px;
  scrollbar-width:thin;
}
.lightbox-filmstrip img{
  width:64px; height:48px; object-fit:cover; border-radius:6px; cursor:pointer;
  opacity:.5; border:2px solid transparent; transition:opacity .15s ease, border-color .15s ease;
  flex-shrink:0;
}
.lightbox-filmstrip img:hover{ opacity:.85; }
.lightbox-filmstrip img.is-active{ opacity:1; border-color:var(--accent-600); }
body.lightbox-open{ overflow:hidden; }
@media (max-width:700px){
  .lightbox-filmstrip{ display:none; }
  .lightbox-nav{ width:38px; height:38px; font-size:1.1rem; }
}

/* =========================================================
   DISTRIBUTION / TABLES
   ========================================================= */
.dist-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.dist-card{
  border:1px solid var(--line); border-radius:var(--radius-md); padding:20px 22px; background:#fff;
}
.dist-card .country{ font-weight:800; color:var(--navy-900); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:.4em; display:block; }
.dist-card .partner{ font-weight:700; font-size:1rem; }
.dist-card a.partner:hover{ color:var(--accent-600); }

/* =========================================================
   FORMS
   ========================================================= */
.form-grid{ display:grid; gap:16px; }
.field label{ display:block; font-weight:700; font-size:.85rem; margin-bottom:.4em; color:var(--navy-900); }
.field-required{ color:var(--accent-600); margin-left:.15em; }
.field input[type=text], .field input[type=email], .field select, .field textarea{
  width:100%; padding:.85em 1em; border:1px solid var(--line); border-radius:var(--radius-sm);
  font-family:inherit; font-size:1rem; background:#fff; color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--navy-700); box-shadow:0 0 0 3px var(--navy-100);
}
.field textarea{ resize:vertical; min-height:130px; }
.captcha-row{ display:flex; align-items:center; gap:12px; }
.captcha-row img{ border-radius:var(--radius-sm); border:1px solid var(--line); cursor:pointer; }

/* Two-up field pairs (First/Last name, Phone/Email, etc.) used on the
   Sample Request form; stacks to one column on narrow screens. */
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:600px){
  .field-row{ grid-template-columns:1fr; }
}
.contact-wrap{ display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:start; }
.contact-info-card{
  background:var(--navy-900); color:#fff; border-radius:var(--radius-lg); padding:36px;
}
.contact-info-card h3{ color:#fff; font-size:clamp(.95rem,2.3vw,1.05rem); line-height:1.3; white-space:normal; }
.contact-info-row{ display:flex; gap:14px; padding:14px 0; border-top:1px solid rgba(255,255,255,.14); }
.contact-info-row:first-of-type{ border-top:none; }
.contact-info-row .ic{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; margin-top:.15em;
  color:var(--accent-600); flex-shrink:0;
}
.contact-info-row .ic svg{ width:100%; height:100%; }
.contact-info-row a, .contact-info-row div{ color:rgba(255,255,255,.9); font-size:.92rem; }

/* Tighter variant used on the Address page so the info card + map fit
   within the first screen without scrolling. */
.contact-info-card--compact{ padding:22px; }
.contact-info-card--compact h3{ margin-bottom:.35em; }
.contact-info-card--compact .contact-info-row{ padding:9px 0; }

/* Contact Us page: the info card shares its row with a wide form
   (.9fr of contact-wrap, narrower than the Address page's 1fr/1fr
   split), so the company name needs a smaller ceiling to stay on one
   line at normal desktop widths. */
.contact-wrap .contact-info-card h3{ font-size:clamp(.78rem,1.7vw,.9rem); white-space:nowrap; }
@media (max-width:640px){
  .contact-wrap .contact-info-card h3{ white-space:normal; }
}

/* =========================================================
   SHARED CONTACT / SAMPLE REQUEST FORM
   Soft, single-column card styling for the one shared form rendered by
   common.py's request_form_html() on both contact.php and
   sample-request.html. Scoped under .sr-form-wrap so it never touches
   the more generic .field / .field-row rules used elsewhere on the site.
   ========================================================= */
.sr-form-wrap{
  max-width:720px; margin:0 auto; background:#eef1fb;
  border-radius:var(--radius-lg); padding:40px clamp(20px,4vw,48px);
}
.sr-form-wrap label{ color:var(--navy-900); }
.sr-form-wrap .form-grid{ gap:18px; }
.sr-form-wrap .field input[type=text],
.sr-form-wrap .field input[type=email],
.sr-form-wrap .field input[type=tel],
.sr-form-wrap .field select,
.sr-form-wrap .field textarea{
  border:1px solid #dbe0f2; border-radius:10px; background:#fff;
  padding:.9em 1.1em;
}
/* Single-line fields (text/email/tel inputs + selects) all share one fixed
   height so Phone/Email/Company/Field of use/City/Country line up exactly;
   textareas (Address, Message) stay auto-sized/resizable, unaffected. */
.sr-form-wrap .field input[type=text],
.sr-form-wrap .field input[type=email],
.sr-form-wrap .field input[type=tel],
.sr-form-wrap .field select{
  box-sizing:border-box; height:52px; padding-top:0; padding-bottom:0;
}
.sr-form-wrap .field input::placeholder,
.sr-form-wrap .field textarea::placeholder{ color:#a6acc4; }
.sr-form-wrap .field select{
  color:var(--ink); appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%234b5266' stroke-width='1.6' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1.1em center;
  padding-right:2.6em; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;
}
.sr-form-wrap .field select:invalid{ color:#a6acc4; }
.sr-form-wrap .field input:focus,
.sr-form-wrap .field select:focus,
.sr-form-wrap .field textarea:focus{
  border-color:var(--navy-600); box-shadow:0 0 0 3px rgba(38,57,143,.12);
}
.sr-form-wrap .btn-block{ margin-top:.3em; }
/* Address is a short two-line field -- half the default textarea height
   (the Message textarea below keeps the full 130px). */
.sr-form-wrap #sr-address{ min-height:65px; }

.sr-chip-box{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  min-height:54px; padding:10px 14px; border:1px solid #dbe0f2;
  border-radius:10px; background:#fff;
}
.sr-chip-list{
  display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0;
}
.sr-chip{
  display:inline-flex; align-items:center; gap:.55em;
  background:var(--navy-900); color:#fff; font-size:.85rem; font-weight:600;
  padding:.45em .9em; border-radius:999px; line-height:1.2;
}
.sr-chip-remove{
  background:none; border:none; color:rgba(255,255,255,.65); cursor:pointer;
  font-size:1rem; line-height:1; padding:0; display:flex; align-items:center;
}
.sr-chip-remove:hover{ color:#fff; }
.sr-chip-placeholder{ color:#a6acc4; font-size:.9rem; }
.sr-chip-add{
  margin-left:auto; font-size:.85rem; font-weight:700; color:var(--accent-600); white-space:nowrap;
}
.sr-chip-add:hover{ color:var(--accent-700); }
@media (max-width:480px){
  .sr-chip-add{ margin-left:0; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background:var(--navy-900); color:rgba(255,255,255,.78); padding:44px 0 16px; }
.footer-grid{ display:grid; grid-template-columns:1fr .8fr 1.6fr 1.1fr; gap:36px; margin-bottom:28px; }
/* Shared logo treatment -- used identically in the header and the footer */
.site-logo{
  height:auto; max-height:78px; width:auto; max-width:100%; display:block;
  /* thin white outline (stacked drop-shadows) so the logo's navy wordmark
     stays legible directly on a navy background; a no-op (invisible) on the
     white header background, so it looks identical in intent in both spots */
  filter:
    drop-shadow(0.5px 0 0 rgba(255,255,255,.7))
    drop-shadow(-0.5px 0 0 rgba(255,255,255,.7))
    drop-shadow(0 0.5px 0 rgba(255,255,255,.7))
    drop-shadow(0 -0.5px 0 rgba(255,255,255,.7))
    drop-shadow(0 0 8px rgba(255,255,255,.12));
}
.text-accent{ color:var(--accent-600); font-weight:800; }
.footer-col h4{ color:#fff; font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:.7em; }
.footer-col a{ display:block; padding:.11em 0; font-size:.88rem; color:rgba(255,255,255,.68); }
.footer-col a.footer-product-link{ font-size:.8rem; white-space:nowrap; }
@media (max-width:900px){
  .footer-col a.footer-product-link{ white-space:normal; }
}
.footer-col a:hover{ color:#fff; }
.footer-address{ white-space:nowrap; font-size:.82rem; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12); padding-top:16px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:.8rem; color:rgba(255,255,255,.5);
}
.iso-badges{ display:flex; gap:10px; }
.iso-badges a{
  border:1px solid rgba(255,255,255,.25); border-radius:8px; padding:.4em .8em;
  font-size:.75rem; font-weight:700; color:rgba(255,255,255,.8);
}

/* back to top */
.back-to-top{
  position:fixed; right:22px; bottom:22px; z-index:400;
  width:46px; height:46px; border-radius:50%;
  background:var(--navy-900); color:#fff; border:none;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-md); cursor:pointer; font-size:1.1rem;
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
}
.back-to-top.show{ opacity:1; pointer-events:auto; }
.back-to-top:hover{ background:var(--accent-600); transform:translateY(-2px); }
@media (max-width:480px){
  /* Sits closer to the true right edge on narrow phones so it doesn't
     get lost against page content. */
  .back-to-top{ right:14px; bottom:16px; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .hero-inner{ grid-template-columns:1fr; padding:56px 0; }
  .hero-media{ order:-1; }
  .contact-wrap{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-address{ white-space:normal; font-size:.88rem; }
}
@media (max-width: 760px){
  .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; }
  .section{ padding:48px 0; }
  .family-header{ flex-direction:column; }
  .family-header-media{ margin-left:0; align-self:center; }
  .news-item{ grid-template-columns:1fr; gap:8px; }
  .footer-grid{ grid-template-columns:1fr; gap:28px; }
  .stat-strip > div{ border-left:none; border-top:1px solid var(--line); }
  .stat-strip > div:first-child{ border-top:none; }
  .filter-groups{ grid-template-columns:1fr; }
  .filter-panel-top{ flex-direction:column; align-items:stretch; }
  .filter-panel-top .btn{ width:100%; justify-content:center; }

  .site-menu-panel{ max-width:100%; padding:80px 22px 24px; }
  .site-menu-sublink{ white-space:normal; }
}

/* Applications page: formulation set PDF links */
.formulation-link{
  color:var(--accent-600);
  text-decoration:underline;
  font-weight:700;
}
.formulation-link:hover{ color:var(--accent-700); }

.product-link{
  color:var(--accent-600);
  font-weight:700;
  text-decoration:underline;
  text-decoration-color:rgba(200,16,18,.4);
  text-underline-offset:2px;
  white-space:nowrap;
}
.product-link:hover{ color:var(--accent-700); text-decoration-color:var(--accent-700); }