/* ==========================================================================
   Symega — design tokens (pulled from the Figma "Home" / "Intro" frames)
   ========================================================================== */
:root {
  --c-red: #D71920;        /* primary brand red — headings, links */
  --c-red-deep: #D31920;   /* logo mark */
  --c-orange: #F7941D;     /* brand orange — banners, accents */
  --c-orange-tint: #FDECD5; /* light orange — utility bar background */
  --c-savoury: #F25D0A;
  --c-sweet: #BA457F;
  --c-wellness: #627F11;
  --c-brand: #D71920;      /* alias of --c-red, used by color_tag-driven templates */
  --c-neutral: #606060;    /* alias of --c-gray, used by color_tag-driven templates */
  --c-ink: #1a1a1a;
  --c-gray: #606060;       /* body copy */
  --c-gray-light: #C5C5C5;
  --c-bg-soft: #F5F5F7;
  --c-bg-lavender: #DDDDFF;
  --c-white: #FFFFFF;

  --font: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container: 1280px;
  --gutter: clamp(20px, 4vw, 48px);

  --radius-lg: 24px;
  --radius-md: 14px;

  /* Type scale — every heading/paragraph on the site draws from this set
     so sizes stay uniform across pages instead of being invented per-section. */
  --fs-h1: clamp(2rem, 4vw, 3.125rem);       /* page-level hero titles */
  --fs-h2: clamp(1.5rem, 2.6vw, 2.375rem);   /* full-width section headings */
  --fs-h3: clamp(1.15rem, 1.6vw, 1.4rem);    /* card / item titles */
  --fs-h4: 1.05rem;                          /* minor in-card headings */
  --fs-lead: clamp(1rem, 1.3vw, 1.15rem);    /* intro/lead copy under a heading */
  --fs-lead-lg: clamp(1.1rem, 1.8vw, 1.5rem); /* prominent statement paragraphs */
  --fs-body: 1rem;                           /* standard paragraph copy */
  --fs-small: 0.9rem;                        /* secondary text, tags, nav links */
  --fs-xs: 0.8rem;                           /* captions, meta, timestamps */
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  color: var(--c-gray);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
h1 { font-size: var(--fs-h1); font-weight: 500; line-height: 1.15; }
h2 { font-size: var(--fs-h2); font-weight: 500; line-height: 1.2; }
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; }
h4 { font-size: var(--fs-h4); font-weight: 600; line-height: 1.3; }
p { font-size: var(--fs-body); line-height: 1.6; text-align: justify; }
/* Exceptions — short, deliberately-centered single/near-single-line UI copy
   (not body paragraphs) where a direct `p` rule would otherwise clobber the
   ancestor's inherited centering: footer copyright line, the password-gate
   card's hint/footnote text. */
.site-footer__bottom p,
.corporate-gate__card p { text-align: center; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
section { position: relative; }

/* ==========================================================================
   Logo wordmark (shared: navbar / footer / advantage section)
   ========================================================================== */
.logo__word {
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--c-red-deep);
  font-size: 1.5rem;
  white-space: nowrap;
}
.logo__a { position: relative; }
.logo__a::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -0.14em;
  height: 0.16em;
  background: var(--c-orange);
  border-radius: 2px;
}
.logo { display: inline-flex; align-items: center; }
.logo__img { display: block; height: 26px; width: auto; }
/* Desktop only — bigger logo, same navbar row height as before (the row
   just centers around the taller mark instead of growing with it). */
@media (min-width: 941px) {
  .logo__img { height: 51px; }
}
.site-footer__brand .logo__word--footer { font-size: 1.9rem; }

/* ==========================================================================
   Intro splash
   ========================================================================== */
.intro-splash {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--c-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}
.intro-splash.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

/* small wordmark, pinned top-left — same mark as the navbar logo. Figma only
   specifies this as one static frame (no motion in the file itself), so the
   entrance/loading motion below is our own — a fade+rise for the mark, and an
   actual left-to-right fill for the bar so it reads as a loading indicator
   rather than a static placeholder. Timings are tied to the 1.5s hold in
   main.js — keep them in sync if that value ever changes. */
.intro-splash__logo {
  position: absolute;
  top: clamp(20px, 6vh, 48px);
  left: clamp(20px, 4vw, 48px);
  opacity: 0;
  animation: intro-rise 0.6s ease-out 0.1s forwards;
}

/* centered stage: big photo-filled "A" mark stacked over a solid orange bar */
.intro-splash__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 3vw, 34px);
  opacity: 0;
  animation: intro-rise 0.6s ease-out 0.15s forwards;
}
@keyframes intro-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.intro-splash__mark {
  position: relative;
  width: min(46vw, 460px);
  aspect-ratio: 665.31 / 659.59;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 665.31 659.59'%3E%3Cpath d='M665.309 659.589L604.621 659.589C550.799 659.589 501.725 625.725 482.423 575.505L332.737 184.687L183.218 575.505C163.915 625.725 114.834 659.589 61.0199 659.589L0 659.589L233.603 67.3961C249.8 26.5002 288.728 0 332.737 0C376.746 0 415.841 26.5002 432.038 67.3961L665.317 659.589L665.309 659.589Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 665.31 659.59'%3E%3Cpath d='M665.309 659.589L604.621 659.589C550.799 659.589 501.725 625.725 482.423 575.505L332.737 184.687L183.218 575.505C163.915 625.725 114.834 659.589 61.0199 659.589L0 659.589L233.603 67.3961C249.8 26.5002 288.728 0 332.737 0C376.746 0 415.841 26.5002 432.038 67.3961L665.317 659.589L665.309 659.589Z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  overflow: hidden;
}
.intro-splash__mark-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.intro-splash__bar {
  position: relative;
  width: min(46vw, 460px);
  height: clamp(48px, 8vw, 80px);
  border-radius: 999px;
  background: var(--c-orange-tint);
  overflow: hidden;
}
.intro-splash__bar-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  border-radius: inherit;
  background: var(--c-orange);
  animation: intro-fill 1.15s cubic-bezier(0.65, 0, 0.35, 1) 0.35s forwards;
}
@keyframes intro-fill {
  from { width: 0%; }
  to { width: 100%; }
}

/* ==========================================================================
   Header / navbar
   ========================================================================== */
.site-header {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  background: var(--c-white);
  transition: box-shadow 0.3s ease, background 0.3s ease, backdrop-filter 0.3s ease;
}
/* The bar itself stays full-bleed edge-to-edge always (both here and at the
   very top) — only its background goes half-transparent + blurred once
   scrolled, instead of solid white. The .navbar row's own width (wide at
   the top, boxed to .container's width once scrolled) is handled
   separately below, on .navbar itself, not by resizing this bar. */
.site-header.is-solid {
  position: fixed;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}
/* A dropdown panel opening below a fully-opaque bar read as a bit heavy — a
   slightly translucent bar (with a light blur behind it, so page content
   scrolled underneath doesn't show through sharply) while a menu is open
   feels lighter, without going so transparent the nav links lose contrast. */
.site-header:has(.has-dropdown:hover),
.site-header:has(.has-dropdown.is-open) {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}

.utility-bar { background: var(--c-orange); }
.utility-bar__inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 24px;
  padding-block: 7px;
  font-size: 0.76rem;
  font-weight: 600;
  max-width: none;
  width: 100%;
  padding-inline: var(--gutter);
}
/* Once scrolled, the utility bar content snaps in to the same boxed width as the
   rest of the page (.utility-bar's own background stays full-bleed orange either
   way — same pattern as .navbar/.site-header). */
.site-header.is-solid .utility-bar__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  width: auto;
}
.utility-bar a { color: var(--c-white); }
.utility-bar a:hover { color: var(--c-ink); }
.search-toggle { color: var(--c-white); display: inline-flex; flex-shrink: 0; }
.search-toggle:hover { color: var(--c-ink); }

.nav-search { display: flex; align-items: center; }
.nav-search__input {
  width: 0;
  opacity: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.76rem;
  color: var(--c-white);
  transition: width 0.25s ease, opacity 0.2s ease, margin 0.25s ease;
}
.nav-search.is-open .nav-search__input {
  width: 180px;
  opacity: 1;
  margin-right: 8px;
}
.nav-search__input:focus { outline: none; }
.nav-search__input::placeholder { color: rgba(255, 255, 255, 0.75); }

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 10px 14px;
  /* No position:relative here (unlike before) — .dropdown needs a
     containing block that's always full-viewport-width for its own
     background to stay wide regardless of .navbar's own wide/boxed toggle
     below, so it's left to resolve against .site-header instead (the next
     positioned ancestor up — always absolute/fixed and inset-inline:0). */
  /* Also carries the .container class (for the boxed width below, once
     scrolled) — wide/full-bleed by default overrides that back off, so the
     logo and nav links spread across the full-width bar at the top of the
     page instead of sitting boxed in from the very start. */
  max-width: none;
}
/* Once scrolled, the row of content snaps in to the same boxed width as the
   rest of the page (.site-header's own background stays full-bleed either
   way — see .site-header.is-solid above). */
.site-header.is-solid .navbar {
  max-width: var(--container);
  margin-inline: auto;
}
.nav-menu {
  display: flex;
  align-items: stretch;
  align-self: stretch;
  gap: clamp(18px, 2.2vw, 34px);
  font-size: 0.95rem;
  font-weight: 600;
}
/* Each item spans the navbar's full height (instead of shrink-wrapping its own
   text), so a has-dropdown item's hover box reaches all the way down to where
   .dropdown starts (top: 100% of .navbar) with zero dead space in between —
   otherwise the pointer exits the trigger's hover box before reaching the
   panel while moving from the main menu into the submenu, and it vanishes. */
.nav-menu > li { display: flex; align-items: center; }
.nav-menu > li > a,
.dropdown-toggle {
  color: var(--c-ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-menu > li > a:hover,
.dropdown-toggle:hover { color: var(--c-orange); }

.has-dropdown { position: static; }
/* top is pulled up to sit flush with the trigger <li> itself (closing the
   navbar's own bottom padding, which would otherwise be dead space between
   the link and the panel) so the pointer never crosses a non-hoverable gap
   while travelling from the main menu item down into the panel below it.

   .dropdown itself is the wide background panel only — left:0/right:0 here
   resolves against .site-header (see .navbar's own comment: it deliberately
   has no position:relative of its own any more, so this escapes up to
   site-header instead), which is always full-viewport-width whether or not
   .navbar itself is currently wide or boxed. The actual links live in the
   nested .dropdown__inner, boxed to the page's own .container width and
   centered within this wide background — same "wide bar, boxed content"
   split as .navbar/.site-header use. */
.dropdown {
  position: absolute;
  top: calc(100% - 14px);
  left: 0;
  right: 0;
  background: var(--c-white);
  border-radius: 0 0 16px 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
  opacity: 0;
  visibility: hidden;
  translate: 0 6px;
  transition: opacity 0.2s ease, translate 0.2s ease, visibility 0.2s ease;
}
.dropdown__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 22px var(--gutter);
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.has-dropdown:hover .dropdown,
.has-dropdown.is-open .dropdown {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}
.dropdown li { white-space: nowrap; }
.dropdown li:first-child { padding-right: 28px; border-right: 1px solid #ececec; }
.dropdown li a {
  display: inline-block;
  padding: 0;
  /* Grey by default — "Overview" is the one exception, in bold black (see
     `.dropdown li a strong` below); every other item, including the mega-menu
     group headers, reads as secondary next to it. */
  color: var(--c-gray);
  font-weight: 500;
  font-size: 0.95rem;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}
.dropdown li a:hover { color: var(--c-orange); }
.dropdown li a strong { color: var(--c-ink); font-weight: 600; }

/* Applications mega-menu — five labelled columns (Packaged Foods, Beverages,
   Food service, Health & Nutrition, Natural Colours) instead of the flat
   single-row list Our Solutions still uses; top-aligned so the one long
   column (11 items) doesn't drag the short ones down to its vertical center. */
.dropdown--mega .dropdown__inner { align-items: flex-start; row-gap: 22px; }
.dropdown__group { display: flex; flex-direction: column; gap: 10px; white-space: normal; }
.dropdown__group-title { font-size: 1.02rem; margin-bottom: 2px; }
/* `.dropdown li a` (1 class + 2 elements) outranks the single-class
   `.dropdown__group-title` above on specificity, so its grey/500-weight was
   silently winning regardless of source order — group titles rendered the
   same weight as the plain items under them. This beats it back. */
.dropdown__group .dropdown__group-title { color: var(--c-ink); font-weight: 700; }
.dropdown__group-list { display: flex; flex-direction: column; gap: 8px; }
.dropdown__pending { display: inline-block; color: var(--c-gray-light); font-weight: 500; font-size: 0.95rem; cursor: default; }
.dropdown__logo-link { font-weight: 700; }

/* Higher specificity than `.nav-menu > li { display: flex }` (needed for the
   dropdown hover-gap fix above), which would otherwise win the cascade and
   force this mobile-only group to show on desktop too. */
.nav-menu > li.nav-menu__utility-group { display: none; }
/* Same reasoning: the drawer's title/close row and the dim layer behind it only
   exist in the mobile layout (see the max-width: 940px block below). */
.nav-menu > li.nav-menu__head { display: none; }
.nav-backdrop { display: none; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 30px;
}
.nav-toggle span {
  height: 2px;
  background: var(--c-ink);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* ==========================================================================
   Hero
   ========================================================================== */
/* Fixed height, not viewport-relative — matches the live site, which holds this
   at ~650px regardless of window height (checked 700-1200px tall viewports,
   all landed within 645-655px). The previous 90vh made the hero — and the
   white angled panel behind the heading — noticeably taller/more stretched
   than intended on typical desktop screens.
   margin-top clears the header (106px tall) the same way the application-page
   hero does — the header is no longer transparent-over-hero here either (that
   treatment only made sense while the hero sat underneath it), so it's a
   solid opaque bar like every other page, and the section starts right below
   it instead of behind it. */
.hero {
  position: relative;
  height: 650px;
  margin-top: 106px;
  overflow: hidden;
  background: var(--c-ink);
}
.hero__slides { position: absolute; inset: 0; }
.hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero__slide.is-active { opacity: 1; }
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 45%, rgba(0,0,0,0.35) 100%);
}
/* Same diagonal cut as before (0/50%/78%/0 across top/right/bottom/left),
   just ~100px wider, and switched from clip-path (hard corners only) to an
   SVG mask so the corner where the flat top edge bends into the diagonal
   can carry a curve instead of a sharp angle (top-left stays a plain 90°
   corner). mask-size stretches it to fill the box, so the viewBox (880x650)
   is only a reference size — matches almost exactly at the common ~1440px
   desktop width where the panel sits at its 880px cap.
   The curve's control point (440,0) is the ORIGINAL sharp-corner vertex —
   using it as the bezier control point (rather than the corner itself) is
   what keeps the curve tangent to both the flat top edge and the diagonal,
   so it reads as one smooth bend rather than a kink. It has to drop past
   y=106 (the header's height): on every page except the homepage the header
   is opaque, not transparent-over-hero, so a shallower curve sitting entirely
   above y=106 (as this one first did) is fully hidden behind it and never
   becomes visible at all — this one clears that with margin. */
.hero__panel {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: min(66%, 880px);
  background: var(--c-white);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 880 650' preserveAspectRatio='none'%3E%3Cpath d='M0 650L0 0L340 0Q440 0 497 150L686 650Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 880 650' preserveAspectRatio='none'%3E%3Cpath d='M0 650L0 0L340 0Q440 0 497 150L686 650Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
/* One .hero__content per slide, layered like .hero__slide (absolute + fade)
   so each carries its own title/subtitle/highlight-word in sync with its
   own photo — only .is-active is visible/interactive at a time. Each one
   self-centers vertically (display:flex + align-items:center at 100% height)
   since .hero__panel itself no longer centers a single static child. */
.hero__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-inline: 56px 28px;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.hero__content.is-active { opacity: 1; pointer-events: auto; }
/* Scales down with the viewport instead of a flat 480px — the panel's own
   width formula (min(66%, 880px)) shrinks on narrower desktop widths, and a
   fixed text width didn't shrink with it: the panel's diagonal cut narrows
   further still while the text stayed put, so the last word of the heading
   ran past the white area onto the photo underneath. This keeps the text
   safely inside the panel at every width it can actually be. */
.hero__content > * { max-width: min(360px, 34vw); }
.hero__content h1 {
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: 1.15;
  color: var(--c-red);
}
/* Matches symega.com's own hero exactly: the highlighted word/phrase is
   bolder than the rest of the heading, with an ORANGE underline — not just
   a plain text-decoration, which would inherit the red text color instead. */
.hero__content h1 span { font-weight: 700; text-decoration: underline; text-decoration-color: var(--c-orange); text-underline-offset: 6px; }
.hero__content p {
  margin-top: 22px;
  /* Narrower than h1's cap above — the paragraph sits lower in the
     vertically-centered block, where the diagonal mask has already curved
     in further, so it needs its own tighter safe width (not just h1's,
     reused) or its last word overflows past the mask edge onto the photo. */
  max-width: min(270px, 26vw);
  font-size: var(--fs-lead);
  color: var(--c-red);
  /* The site-wide `p { text-align: justify }` default otherwise lands here
     unopposed: on a short subtitle that wraps to just two lines, justify
     stretches the first line's word-gaps to fill the full narrow width,
     leaving huge gaps between a handful of words. Left-align (matching the
     h1 above it) avoids that entirely — same fix already applied to
     .solution-hero__subtitle for the identical reason. */
  text-align: left;
}
/* Make the entire hero content clickable if it has a link */
.hero__content--link {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.hero__content--link:hover {
  opacity: 0.95;
}
.hero__dots {
  position: absolute;
  left: var(--gutter);
  bottom: 36px;
  z-index: 2;
  display: flex;
  gap: 10px;
}
.hero__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #C5C5C5;
  transition: background 0.25s ease, transform 0.25s ease;
}
.hero__dot.is-active { background: var(--c-red); transform: scale(1.15); }

/* ==========================================================================
   Solutions band
   ========================================================================== */
.solutions-band {
  background: var(--c-orange);
  padding-block: 64px 0;
  position: relative;
  z-index: 2;
  margin-top: -24px;
  border-radius: 24px 24px 0 0;
}
/* True 50/50 columns, not flex items sized to their own content — the
   previous flex-basis/max-width formula (420px / 460px-capped) rarely
   actually summed to the row's full width, leaving a large dead gap on the
   right instead of the heading and paragraph forming two even columns. */
.solutions-band__intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  /* Top-aligned, not bottom — the heading commonly wraps to more lines than
     the paragraph, and bottom-alignment left the shorter paragraph pushed
     down to match, opening up empty space above it instead of both simply
     starting flush at the top. */
  align-items: start;
  padding-bottom: 44px;
  color: var(--c-white);
}
.solutions-band__intro h2 {
  font-size: var(--fs-h2);
  font-weight: 500;
}
.solutions-band__intro p { font-size: var(--fs-lead); }

.solutions-band__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  transform: translateY(56px);
}
/* The expand-on-hover-to-reveal-"Discover more" animation is borrowed from
   symega.com's own homepage version of this section, but NOT its dark
   semi-transparent caption background — this site's own white background +
   category-coloured text (as it already was here before this animation was
   added) is kept instead, sized snugly to the caption's own content rather
   than an arbitrary larger height. */
.solution-card {
  position: relative;
  display: block;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
  transition: transform 0.3s ease;
}
.solution-card:hover { transform: translateY(-6px); }
.solution-card__image {
  display: block;
  aspect-ratio: 427 / 440;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease;
}
.solution-card:hover .solution-card__image { transform: scale(1.06); }
.solution-card__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 64px;
  padding: 16px 22px;
  background: var(--c-white);
  overflow: hidden;
  border-bottom: 0 solid transparent;
  transition: height 0.4s ease, border-bottom-width 0.3s ease;
}
/* Sized to the actual content (label + gap + "Discover more" + padding),
   not a large arbitrary value — was expanding well past the button with
   empty space left over underneath it. */
.solution-card:hover .solution-card__caption { height: 89px; border-bottom-width: 6px; }
/* Colour applied to the whole caption (not just the border) — cascades to
   the label and "Discover more" text/icon via currentColor, restoring the
   category-coloured label text this section had before (white had crept in
   as a side effect of switching to the dark-overlay caption background). */
.solution-card__caption--savoury { color: var(--c-savoury); border-bottom-color: var(--c-savoury); }
.solution-card__caption--sweet { color: var(--c-sweet); border-bottom-color: var(--c-sweet); }
.solution-card__caption--wellness { color: var(--c-wellness); border-bottom-color: var(--c-wellness); }
.solution-card__label { display: block; font-size: 1.3rem; font-weight: 600; }
.solution-card__label em { font-style: normal; font-weight: 600; }
.solution-card__more {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 0.92rem;
  font-weight: 500;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.solution-card:hover .solution-card__more { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   Market Insight
   ========================================================================== */
.market-insight { background: var(--c-bg-soft); padding-block: 110px 70px; }
.market-insight__inner {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 40px;
}
.market-insight__intro h2 {
  font-size: var(--fs-h2);
  font-weight: 500;
  color: var(--c-red);
}
.market-insight__intro p { margin-top: 14px; font-size: var(--fs-lead); }
.more-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 44px;
  font-size: 0.95rem;
  color: var(--c-gray);
}
.more-link svg { color: var(--c-red); }

/* min-width: 0 overrides the grid item's default auto min-width, which would
   otherwise grow this column to fit the cards row's full un-scrolled content
   width (pushing the right arrow off the edge of the page). */
.market-insight__carousel { position: relative; min-width: 0; }
.market-insight__cards {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
  /* Side padding insets the first/last card so the overlaid arrows below
     sit in clear space next to the row, not on top of card content. */
  padding-inline: 52px;
}
.market-insight__cards::-webkit-scrollbar { display: none; }
/* Arrows pinned to the carousel's own left/right edges — signals to the
   user that the row scrolls, right where their eye already is, instead of
   sitting off to the side next to the heading where it read as decorative. */
.market-insight__arrow {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-gray);
  background: var(--c-white);
  border: 1px solid var(--c-gray-light);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  transition: background 0.2s ease, color 0.2s ease;
}
.market-insight__arrow:hover { background: var(--c-red); color: var(--c-white); border-color: var(--c-red); }
.market-insight__arrow--prev { left: 0; }
.market-insight__arrow--next { right: 0; }
.insight-card {
  scroll-snap-align: start;
  flex: 0 0 clamp(260px, 34vw, 340px);
  background: var(--c-white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* Column so the body below can stretch to fill any leftover height (the
     row's flex already equalises every card's overall height to the
     tallest one) and pin "Read more" to a shared bottom edge instead of it
     sitting wherever a shorter title/excerpt happens to end. */
  display: flex;
  flex-direction: column;
}
.insight-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}
.insight-card__image { transition: transform 0.4s ease; }
.insight-card:hover .insight-card__image { transform: scale(1.05); }
.insight-card__image { aspect-ratio: 459 / 364; background-size: cover; background-position: center; }
.insight-card__body { display: flex; flex-direction: column; flex: 1; padding: 24px; }
.insight-card__tag { font-size: var(--fs-small); font-weight: 500; }
.insight-card__tag--savoury { color: var(--c-savoury); }
.insight-card__tag--brand { color: var(--c-red); }
.insight-card__title { margin-top: 4px; font-size: var(--fs-h3); font-weight: 600; }
.insight-card__title--savoury { color: var(--c-savoury); }
.insight-card__title--brand { color: var(--c-ink); }
.insight-card__body p { margin-top: 10px; font-size: var(--fs-small); line-height: 1.5; }
.insight-card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
  font-size: 0.9rem;
  font-weight: 500;
}
.insight-card__more--savoury { color: var(--c-savoury); }
.insight-card__more--brand { color: var(--c-red); }

/* ==========================================================================
   Advantage
   ========================================================================== */
.advantage { padding-block: 90px; }
.advantage__eyebrow {
  font-size: var(--fs-lead-lg);
  color: var(--c-red);
  font-weight: 700;
  text-transform: uppercase;
}
.advantage__lead {
  margin-top: 22px;
  max-width: 980px;
  font-size: var(--fs-lead-lg);
  color: var(--c-gray);
  line-height: 1.4;
}
.advantage__grid {
  margin-top: 72px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
/* Grid rows already stretch each item to the same height — this makes the
   underline sit at the bottom of that stretched box (not just after its own,
   possibly shorter, paragraph text), so all three line up regardless of how
   many lines each paragraph wraps to. */
.advantage__item { display: flex; flex-direction: column; }
.advantage__item h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--c-red);
  line-height: 1.25;
}
.advantage__item p { margin-top: 14px; padding-bottom: 20px; font-size: var(--fs-body); line-height: 1.6; }
.advantage__underline {
  display: block;
  width: 48px;
  height: 5px;
  /* Pushed to the bottom of the (grid-stretched) item instead of sitting
     right after its own paragraph — otherwise a shorter paragraph's
     underline lands higher than a longer one's, out of step with the others. */
  margin-top: auto;
  background: var(--c-orange);
  border-radius: 3px;
}

/* ==========================================================================
   Stats band
   ========================================================================== */
.stats-band { background: var(--c-orange); color: var(--c-white); padding-block: 70px; text-align: center; }
.stats-band h2 {
  font-size: var(--fs-h2);
  font-weight: 600;
  max-width: 720px;
  margin-inline: auto;
}
.stats-band__grid {
  margin-top: 54px;
  display: flex;
  justify-content: center;
  gap: clamp(48px, 8vw, 120px);
  flex-wrap: wrap;
}
.stats-band__value { display: block; font-size: clamp(2.6rem, 6vw, 4.2rem); font-weight: 600; line-height: 1; }
.stats-band__label { display: block; margin-top: 14px; font-size: var(--fs-h3); white-space: pre-line; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--c-white);
  padding-top: 60px;
  position: relative;
  z-index: 2;
  margin-top: -24px;
  border-radius: 24px 24px 0 0;
}
.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 40px;
}
.site-footer__blurb { max-width: 620px; font-size: 0.85rem; line-height: 1.6; }
.site-footer__brand { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.site-footer__tagline-img { width: 110px; height: auto; }

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  padding-block: 30px;
  border-top: 1px solid #ececec;
}
.footer-col h3 { font-size: 0.85rem; color: var(--c-red); font-weight: 600; margin-bottom: 14px; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a { font-size: 0.8rem; color: var(--c-gray); }
.footer-col ul li a:hover { color: var(--c-red); }
.footer-col--links ul li a { color: var(--c-red); font-weight: 500; }
.footer-social { display: flex; gap: 14px; margin-top: 24px; }
.footer-social a { color: var(--c-gray); }
.footer-social a:hover { color: var(--c-red); }

.site-footer__locations {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding-block: 22px;
  border-top: 1px solid #ececec;
  font-size: 0.75rem;
  color: var(--c-red);
}
.site-footer__locations span:not(:last-child)::after { content: "|"; margin-left: 18px; color: var(--c-gray-light); }

.site-footer__bottom { background: var(--c-orange); text-align: center; padding: 10px; }
.site-footer__bottom p { color: var(--c-white); font-size: 0.75rem; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 960px) {
  .market-insight__inner { grid-template-columns: 1fr; }
  .advantage__grid { grid-template-columns: 1fr; gap: 48px; }
  .site-footer__grid { grid-template-columns: repeat(2, 1fr); }
  .solutions-band__cards { grid-template-columns: 1fr; transform: none; margin-top: 24px; }
  .solutions-band { padding-bottom: 40px; }
  .solutions-band__intro { grid-template-columns: 1fr; }
  .hero__panel {
    width: 100%;
    clip-path: none;
    -webkit-mask-image: linear-gradient(100deg, #000 0%, #000 55%, transparent 82%);
    mask-image: linear-gradient(100deg, #000 0%, #000 55%, transparent 82%);
  }
}

@media (max-width: 940px) {
  .utility-bar { display: none; }
  /* Bigger tap area for the hamburger without changing the 50px bar height. */
  .nav-toggle { display: flex; padding-block: 10px; margin-block: -10px; }

  /* ---- Mobile drawer: full-height panel from the right, dimmed page behind ---- */
  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(17, 17, 17, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  .site-header:has(.nav-menu.is-open) .nav-backdrop { opacity: 1; visibility: visible; }
  html.nav-open { overflow: hidden; } /* no page scrolling behind the open menu */

  .nav-menu {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(86vw, 360px);
    background: var(--c-white);
    flex-direction: column;
    align-items: stretch;
    padding: 0 24px 32px;
    gap: 0;
    overflow-y: auto; /* long Applications list scrolls inside the drawer */
    overscroll-behavior: contain;
    translate: 100% 0;
    visibility: hidden; /* closed drawer: no shadow strip, links not tabbable */
    transition: translate 0.3s ease, visibility 0.3s ease;
    box-shadow: -12px 0 32px rgba(0,0,0,0.14);
  }
  .nav-menu.is-open { translate: 0 0; visibility: visible; }

  /* Title row + Close button — sticks to the top while the list scrolls. */
  .nav-menu > li.nav-menu__head {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 12px 0;
    background: var(--c-white);
  }
  .nav-menu__title { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-gray); }
  .nav-menu__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid #dcdcdc;
    border-radius: 50%;
    color: var(--c-ink);
    transition: background 0.15s ease, border-color 0.15s ease;
  }
  .nav-menu__close:hover, .nav-menu__close:focus-visible { background: var(--c-bg-soft); border-color: var(--c-gray-light); }

  /* Top-level rows: full-width, divided by hairlines, label left / chevron right.
     `flex-direction: column` also stacks an open submenu *under* its label — the
     desktop `display: flex` row would otherwise put it beside the label. */
  .nav-menu > li { flex-direction: column; align-items: stretch; width: 100%; border-bottom: 1px solid #ececec; }
  .nav-menu > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 15px 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--c-ink);
  }
  .dropdown-toggle svg { width: 12px; height: 6px; flex-shrink: 0; transition: rotate 0.2s ease; }
  .has-dropdown.is-open > .dropdown-toggle svg { rotate: 180deg; }
  /* Orange = "this section is open". On touch screens a tapped link keeps its
     :hover colour until the next tap elsewhere, so don't let hover set it there. */
  .has-dropdown.is-open > .dropdown-toggle { color: var(--c-orange); }
  @media (hover: none) {
    .nav-menu > li > a:hover, .dropdown-toggle:hover { color: var(--c-ink); }
  }

  /* Second level: left-aligned directly under its parent, inside an accent line. */
  .dropdown { position: static; box-shadow: none; opacity: 1; visibility: visible; translate: 0; display: none; width: 100%; background: none; border-radius: 0; }
  .has-dropdown.is-open .dropdown { display: block; }
  .dropdown__inner,
  .dropdown--mega .dropdown__inner {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    max-width: none;
    margin: 0 0 16px 2px;
    padding: 2px 0 2px 16px;
    border-left: 2px solid var(--c-orange);
  }
  .dropdown li, .dropdown li a { white-space: normal; }
  .dropdown li:first-child { padding-right: 0; border-right: 0; } /* desktop's Overview divider */
  .dropdown li a { display: block; padding: 9px 0; font-size: 0.95rem; font-weight: 500; }
  .dropdown li a strong { font-weight: 700; }
  .dropdown__pending { display: block; padding: 9px 0; }
  /* Mega-menu groups: small uppercase label, hairline between groups. */
  .dropdown__group { gap: 0; margin-top: 8px; padding-top: 10px; border-top: 1px solid #ececec; }
  .dropdown__group .dropdown__group-title { margin-bottom: 0; padding: 6px 0 2px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
  .dropdown__group-list { gap: 0; }
  /* Always a solid white bar on mobile. The desktop scrolled / dropdown-open
     states (translucent + backdrop-filter) outrank a plain `.site-header` rule
     and let the page show through the bar — and backdrop-filter would also make
     the header the containing block for the fixed drawer above. */
  .site-header,
  .site-header.is-solid,
  .site-header:has(.has-dropdown:hover),
  .site-header:has(.has-dropdown.is-open) {
    background: var(--c-white);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    position: fixed;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  }
  .navbar { padding-block: 12px; } /* symmetric, so logo + toggle sit centred in the 50px bar */
  .site-header .utility-bar { display: none; }
  .site-header .navbar a, .site-header .dropdown-toggle { color: var(--c-ink); }
  .nav-toggle span { background: var(--c-ink); }
  .hero { margin-top: 50px; } /* mobile header is fixed + shorter (50px, no utility bar) than desktop's 106px */
  /* Careers / Contact Us — same divided rows as the main items, a step lighter. */
  .nav-menu > li.nav-menu__utility-group { display: flex; flex-direction: column; align-items: stretch; margin-top: 12px; border-bottom: 0; }
  .nav-menu > li.nav-menu__utility-group > a { padding: 14px 0; font-size: 0.95rem; font-weight: 500; border-bottom: 1px solid #ececec; }

  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__top { flex-direction: column; align-items: flex-start; }
  .site-footer__brand { align-items: flex-start; }
}

@media (max-width: 520px) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .stats-band__grid { gap: 40px; }
}

/* ==========================================================================
   Secondary pages — shared hero + banner
   ========================================================================== */
.page-hero {
  position: relative;
  min-height: 420px;
  height: 46vh;
  max-height: 660px;
  display: flex;
  align-items: flex-end;
  background: var(--c-ink);
  overflow: hidden;
  border-radius: 0 0 24px 24px;
}
/* About Us only — 250px taller than every other page's hero banner. */
.page-about-us .page-hero {
  min-height: 670px;
  height: calc(46vh + 250px);
  max-height: 910px;
}
/* Careers only — 200px taller than default, aligned to top. */
.page-careers .page-hero {
  min-height: 720px !important;
  height: 720px !important;
  max-height: 1000px !important;
}
.page-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.page-careers .page-hero__bg {
  background-position: top;
}
.page-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.55) 100%);
}
.page-hero__content { position: relative; z-index: 2; color: var(--c-white); padding-bottom: 48px; }
.page-hero__eyebrow { font-size: var(--fs-small); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; margin-bottom: 8px; }
.page-hero__content h1 { font-size: var(--fs-h1); font-weight: 500; line-height: 1.15; text-align: left; }
.page-hero__content p { margin-top: 12px; font-size: var(--fs-lead); max-width: 560px; }

.page-hero__play {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-white);
  background: rgba(255, 255, 255, 0.18);
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(2px);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.page-hero__play svg { margin-left: 4px; }
.page-hero__play:hover { background: var(--c-red); border-color: var(--c-red); transform: translate(-50%, -50%) scale(1.06); }

.page-banner { background: var(--c-orange); color: var(--c-white); padding-block: 28px 44px; }
/* Unlike `.page-banner`, this variant is used as the very first section under
   the header (blog article detail, corporate notice) with no `.page-hero`
   before it to clear the header's own height — the header is `position:
   absolute` (fixed on mobile) and always opaque, so without this top
   padding the whole bar renders invisibly underneath it. */
.page-banner--plain { background: var(--c-bg-soft); color: var(--c-gray); padding-block: 124px 18px; }
.page-banner--savoury { background: var(--c-savoury); }
.page-banner--sweet { background: var(--c-sweet); }
.page-banner--wellness { background: var(--c-wellness); }
.page-banner__breadcrumb { font-size: var(--fs-xs); opacity: 0.9; margin-bottom: 20px; }
.page-banner__breadcrumb a { text-decoration: underline; }
.page-banner--plain .page-banner__breadcrumb { margin-bottom: 0; }
.page-banner__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; }
.page-banner__row h2 { font-size: var(--fs-h2); font-weight: 500; max-width: 620px; text-align: left; }
.page-banner__row p { max-width: 460px; font-size: var(--fs-body); }
/* Pages with only a banner_heading and no banner_text (About Us, Careers,
   Contact Us) get the full container width instead of the 620px cap meant
   for the two-column heading+paragraph layout (Our Solutions, Applications
   overview, Home) — left-aligned, same as every banner, never centered or
   justified. Was previously two separate, conflicting per-page hacks
   (Careers: justified + centered at 80%; About Us: capped at 640px) —
   unified into one rule driven by the template rather than the page type. */
/* Same reasoning applies to the size as to the alignment above — these are
   full sentences, not short titles, so the default fs-h2 runs larger than
   they need. Keyed off the same --full modifier (not a specific page type)
   so About Us, Careers, and Contact Us all render at the same size as each
   other, not just Careers matching About Us as a one-off. */
.page-banner__row--full h2 { max-width: none; text-align: left; font-size: var(--fs-h3); }

/* ==========================================================================
   Listing pages (Our Solutions / Market Segments)
   ========================================================================== */
.listing { padding-block: 70px; }
.listing__cards { display: flex; flex-direction: column; gap: 70px; }
.listing-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  scroll-margin-top: 100px;
}
.listing-card.is-reversed .listing-card__media { order: 2; }
/* Slightly narrower than its full grid column (not flush edge-to-edge
   anymore) and centered within it, so it reads a bit smaller — margin-inline:
   auto keeps that centered regardless of which column a reversed row's
   order:2 lands it in, instead of an uneven gap appearing on only one side. */
.listing-card__media { aspect-ratio: 3 / 2; width: 92%; margin-inline: auto; border-radius: 16px; background-size: cover; background-position: center; }
.listing-card__title { font-size: var(--fs-h2); font-weight: 600; line-height: 1.2; }
.listing-card__body p { margin-top: 16px; font-size: var(--fs-lead); line-height: 1.6; color: var(--c-gray); }
.listing-card__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-weight: 500; }
.listing-card__title--savoury, .listing-card__link--savoury { color: var(--c-savoury); }
.listing-card__title--sweet, .listing-card__link--sweet { color: var(--c-sweet); }
.listing-card__title--wellness, .listing-card__link--wellness { color: var(--c-wellness); }
.listing-card__title--brand, .listing-card__link--brand { color: var(--c-red); }
.listing-card__title--orange, .listing-card__link--orange { color: var(--c-orange); }
.listing-card__title--neutral, .listing-card__link--neutral { color: var(--c-ink); }

/* ==========================================================================
   Content pages (About Us)
   ========================================================================== */
.content-block {
  padding-block: 30px;
  width: 100%;
  scroll-margin-top: 120px;
}
.content-block:first-of-type {
  padding-top: 120px;
}
.content-block__row {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.content-block h2 {
  color: var(--c-red);
  font-size: var(--fs-h3);
  margin-bottom: 16px;
}
.content-block__row p {
  max-width: 100%;
  font-size: var(--fs-body);
  color: var(--c-gray);
  line-height: 1.7;
  margin-bottom: 16px;
}
.content-block__row p:last-child {
  margin-bottom: 0;
}

/* Policy Page Simple */
.policy-section {
  padding-block: 50px;
  background: var(--c-white);
  scroll-margin-top: 120px;
}
.policy-section:first-of-type {
  padding-top: 120px;
}

.policy-item {
  margin-bottom: 50px;
}

.policy-item:last-child {
  margin-bottom: 0;
}

.policy-item h3 {
  font-size: var(--fs-h3);
  color: var(--c-red);
  margin-bottom: 16px;
  font-weight: 600;
  line-height: 1;
}

.policy-content {
  font-size: var(--fs-body);
  color: var(--c-gray);
  line-height: 1.7;
  text-align: justify;
}

.policy-content p {
  margin: 0 0 16px 0;
}

.policy-content p:last-child {
  margin-bottom: 0;
}

.policy-content ul {
  list-style: disc;
  margin: 16px 0;
  padding-left: 20px;
}

.policy-content ul li {
  margin-bottom: 8px;
  color: var(--c-gray);
  line-height: 1.7;
}

.policy-content ul li:last-child {
  margin-bottom: 0;
}

.policy-content a {
  color: var(--c-red);
  text-decoration: underline;
}

.content-section { padding-block: 70px; }
.content-section--soft { background: var(--c-bg-soft); }
.content-section__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; margin-bottom: 44px; }
.content-section__heading { font-size: var(--fs-h2); color: var(--c-red); font-weight: 500; }
.content-section__eyebrow { color: var(--c-red); font-weight: 500; margin-bottom: 8px; }
.content-section__lead { max-width: 620px; color: var(--c-gray); font-size: var(--fs-lead); margin-top: 12px; }
.content-section__lead--gray { color: var(--c-gray); }
/* Careers "Why Symega" row — the label+heading column had no width of its own,
   so it greedily filled the flex row and wrapped the paragraph onto its own
   line below instead of sitting beside it, matching the live page's actual
   two-column layout. */
#why-symega .content-section__row > div { flex: 1 1 320px; max-width: 400px; }
#why-symega .content-section__lead { flex: 2 1 420px; margin-top: 0; }

/* Compact: whole "Our History" section (timeline + intro + cards) needs to
   fit inside a typical laptop viewport without extra vertical scrolling, so
   this section trims padding/sizes more aggressively than other sections. */
#our-history { padding-block: 40px; }
.history-section__layout { display: grid; grid-template-columns: 280px 1fr; gap: 32px; align-items: start; }
.history-section__intro .content-section__heading { margin-bottom: 0; }
/* Tighter leading than the site-wide 1.6 default — shrinks this paragraph
   block a bit further as part of keeping the whole section compact. */
.history-section__intro .content-section__lead { line-height: 1.35; }
.history-section__arrows { display: flex; gap: 14px; margin-top: 34px; }
.history-section__arrows .icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-gray);
  border: 1px solid var(--c-gray-light);
  transition: background 0.2s ease, color 0.2s ease;
}
.history-section__arrows .icon-btn:hover { background: var(--c-red); color: var(--c-white); border-color: var(--c-red); }

.history-carousel {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.history-carousel::-webkit-scrollbar { display: none; }
.history-card {
  scroll-snap-align: start;
  flex: 0 0 clamp(200px, 20vw, 240px);
  background: var(--c-white);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}
.history-card__image { display: block; aspect-ratio: 16 / 10; background-size: cover; background-position: center; background-color: var(--c-bg-soft); }
.history-card__text { padding: 14px 16px; font-size: var(--fs-xs); color: var(--c-gray); }
/* The site-wide `p { line-height: 1.6 }` sets its own line-height directly on
   these <p> tags — a directly-targeted rule always wins over an inherited
   value no matter the specificity, so setting line-height on the wrapper div
   above never actually reached the text. Has to be set on the <p> itself. */
.history-card__text p { margin: 0; line-height: 1.35; text-align: left; }
.history-card__text p + p { margin-top: 8px; }
.history-card__text strong { color: var(--c-ink); font-weight: 600; }

.history-timeline { position: relative; margin-bottom: 28px; }
.history-timeline__line { position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: var(--c-gray-light); }
.history-timeline__track { display: flex; justify-content: space-between; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.history-timeline__track::-webkit-scrollbar { display: none; }
.history-timeline__dot { position: relative; z-index: 1; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--c-gray-light); }
.history-timeline__dot::before { content: ""; width: 13px; height: 13px; border-radius: 50%; background: currentColor; transition: color 0.2s ease, transform 0.2s ease; }
.history-timeline__dot.is-active { color: var(--c-red); }
.history-timeline__dot.is-active::before { transform: scale(1.15); }
.history-timeline__year { font-size: 1.1rem; font-weight: 600; color: var(--c-red); white-space: nowrap; }

/* Hover-to-expand accordion, matching the live site: all 5 strips sit at an
   equal flex-basis; hovering (or focusing, for keyboard users) one grows it
   to 3x width while the rest yield, and its overlay reveals the description
   underneath the title — mirrors symega.com's Essential Addons "Image
   Accordion" widget behaviour (flex: 1 -> flex: 3 on hover). */
.strip-grid { display: flex; gap: 4px; }
.strip-card {
  position: relative;
  flex: 1 1 0%;
  /* Fixed height, not aspect-ratio — aspect-ratio would grow the height too
     every time hover grows the width, throwing the whole row out of sync
     and pushing the label below the fold. Width is the only thing that
     should move here. */
  height: 560px;
  border-radius: 24px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: #ddd;
  display: flex;
  align-items: flex-end;
  transition: flex 0.4s ease;
}
.strip-card:hover,
.strip-card:focus-visible { flex: 3 1 0%; }
.strip-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.35) 100%); pointer-events: none; }
.strip-card__overlay { position: relative; z-index: 1; padding: 16px 18px; width: 100%; background: transparent; transition: background 0.4s ease; }
.strip-card:hover .strip-card__overlay,
.strip-card:focus-visible .strip-card__overlay { background: linear-gradient(180deg, rgba(15, 15, 15, 0) 0%, rgba(15, 15, 15, 0.55) 40%, rgba(15, 15, 15, 0.92) 100%); }
.strip-card__label { display: block; color: var(--c-white); font-weight: 700; font-size: var(--fs-small); white-space: nowrap; }
/* Same title treatment as .tag-card__overlay-title (the Solutions tag cards
   on an Application page) — uppercase, letter-spaced, underlined once
   revealed — for consistency across every hover-reveal card on Solution
   pages specifically. Scoped to .solution-highlights, not the bare
   .strip-card class, because About Us' "Our Expertise" section reuses the
   same component and is explicitly not to be touched here. The underline
   only appears once hovered/focused, synced with .strip-card__detail
   revealing below it — this label stays visible even when idle, unlike
   tag-card, so a permanent line with nothing under it yet would look like a
   stray stroke. */
.solution-highlights .strip-card__label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; }
.solution-highlights .strip-card:hover .strip-card__label,
.solution-highlights .strip-card:focus-visible .strip-card__label { padding-bottom: 6px; margin-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
#our-expertise .strip-card:hover .strip-card__label,
#our-expertise .strip-card:focus-visible .strip-card__label { padding-bottom: 6px; margin-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
.strip-card__detail {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--fs-small);
  line-height: 1.5;
  transition: max-height 0.35s ease, opacity 0.3s ease 0.05s;
}
.strip-card:hover .strip-card__detail,
.strip-card:focus-visible .strip-card__detail { max-height: 320px; opacity: 1; margin-top: 12px; }
.strip-card__detail p { margin: 0 0 10px; color: var(--c-white); font-weight: 600; }
/* The global `ul { list-style: none; }` reset strips every marker site-wide,
   and this list never added its own back — the lines just read as run-on,
   undifferentiated text with no visible bullet. Same dot-marker pattern as
   the tag-card hover overlay elsewhere, in white to sit on the orange card. */
.strip-card__detail ul { padding-left: 0; margin: 0; list-style: none; }
.strip-card__detail li {
  position: relative;
  padding-left: 14px;
  margin-bottom: 6px;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}
.strip-card__detail li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--c-white);
}

/* Cards with a longer write-up (popup_description) open it in a modal on
   click instead of cramming it into the small hover strip. */
.strip-card--has-popup { cursor: pointer; }
.strip-card__more {
  display: inline-block;
  margin-top: 10px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--c-white);
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.strip-card--has-popup:hover .strip-card__more,
.strip-card--has-popup:focus-visible .strip-card__more { opacity: 1; }

/* ==========================================================================
   Solution highlight popup — triggered by a .strip-card--has-popup click
   ========================================================================== */
.highlight-popup {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.highlight-popup.is-open { opacity: 1; visibility: visible; }
.highlight-popup__backdrop { position: absolute; inset: 0; background: rgba(15, 15, 15, 0.6); backdrop-filter: blur(2px); }
.highlight-popup__box {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--c-white);
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
  transform: translateY(16px);
  transition: transform 0.25s ease;
}
.highlight-popup.is-open .highlight-popup__box { transform: translateY(0); }
.highlight-popup__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-gray);
  background: var(--c-bg-soft);
  transition: background 0.2s ease, color 0.2s ease;
}
.highlight-popup__close:hover { background: var(--c-red); color: var(--c-white); }
.highlight-popup__title { font-size: var(--fs-h3); font-weight: 600; margin-bottom: 16px; padding-right: 32px; }
.highlight-popup__body { color: var(--c-ink); font-size: var(--fs-body); line-height: 1.6; }
.highlight-popup__body p { margin: 0 0 14px; }
.highlight-popup__body ul { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.highlight-popup__body li { position: relative; padding-left: 16px; }
.highlight-popup__body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-red);
}
.highlight-popup__body strong { color: var(--c-ink); font-weight: 700; }
.highlight-popup__cta { display: inline-flex; margin-top: 24px; text-decoration: none; }

/* Flex, not grid — with 5 cards this wraps as 3 + 2, and flex's per-line
   justify-content centers that shorter second row instead of leaving it
   pinned left under the first two columns like a grid would. */
/* Condensed vs. the original sizing — same hover-reveal animation, gradient,
   and type as before, just at a smaller, tighter footprint: narrower overall
   width cap (was full container width) plus a smaller gap. */
#sourcing-backward-integration { padding-block: 48px; }
/* No max-width cap — spans the full .container width edge-to-edge (was
   capped at 860px, squeezing all 3-per-row cards/images into a narrow
   centered block regardless of how wide the page actually is). */
.feature-grid { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: 18px; margin-top: 28px; }
/* Same reveal-on-hover treatment as the "Solutions" tag cards on an
   Application leaf page (e.g. /applications/savoury-solutions/noodles-soups-pasta/):
   the photo stays full-size and a dark scrim slides up over it on hover to
   reveal the description, rather than shrinking the photo out of the way. */
.feature-card {
  flex: 0 1 calc((100% - 36px) / 3);
  max-width: calc((100% - 36px) / 3);
  cursor: pointer;
}
.feature-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: #eee;
}
.feature-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 18px;
  background: linear-gradient(180deg, rgba(15, 15, 15, 0) 0%, rgba(15, 15, 15, 0.55) 40%, rgba(15, 15, 15, 0.92) 100%);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.feature-card:hover .feature-card__overlay,
.feature-card:focus-visible .feature-card__overlay { opacity: 1; transform: translateY(0); }
/* Scrolls internally rather than being clipped/hidden when a description is
   too long to fit the card's height — max-height:100% caps it to the
   overlay's own box (inset:0 + the parent's padding), so only the overflow
   scrolls, not the whole card. */
.feature-card__overlay-text {
  color: var(--c-white);
  font-size: var(--fs-small);
  line-height: 1.5;
  max-height: 100%;
  overflow-y: auto;
  padding-right: 6px;
}
.feature-card__overlay-text::-webkit-scrollbar { width: 5px; }
.feature-card__overlay-text::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.4); border-radius: 3px; }
/* Each bold sub-heading inside the hover description acts as its own
   mini-title — same treatment as the Solutions tag cards on an Application
   page (e.g. noodles-soups-pasta / breakfast-mixes): uppercase, letter-spaced,
   with a thin rule underneath separating it from the text that follows. */
.feature-card__overlay-text strong {
  display: block;
  color: var(--c-white);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-bottom: 6px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.feature-card__overlay-text p { margin: 0 0 8px; }
.feature-card__overlay-text p:last-child { margin-bottom: 0; }
.feature-card__body { padding: 14px 2px 0; }
.feature-card h3 { color: var(--c-red); font-size: var(--fs-h4); font-weight: 600; }

.locations-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 32px; margin-top: 40px; }
.location-item { border-bottom: 1px solid #ececec; padding-block: 14px; }
.location-item summary { cursor: pointer; font-weight: 600; color: var(--c-red); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.location-item summary::-webkit-details-marker { display: none; }
.location-item summary::after { content: "⌄"; font-size: 1.1rem; transition: transform 0.2s ease; }
.location-item[open] summary::after { transform: rotate(180deg); }
.location-item__role { margin-top: 10px; font-weight: 600; font-size: var(--fs-small); color: var(--c-ink); }
.location-item__address { margin-top: 4px; font-size: var(--fs-small); color: var(--c-gray); line-height: 1.5; }

/* ==========================================================================
   Market segment main pages (Savoury/Sweet/Wellness Solutions): 3-col card grid
   ========================================================================== */
.segment-grid-section { padding-block: 70px; }
.segment-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 32px; }
.segment-card { display: block; }
.segment-card__image { display: block; aspect-ratio: 386 / 318; border-radius: 8px; background-size: cover; background-position: center; background-color: #eee; }
.segment-card__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 14px; }
.segment-card__title { font-weight: 600; font-size: var(--fs-h3); line-height: 1.3; white-space: pre-line; }
.segment-card__link { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); font-weight: 500; flex-shrink: 0; white-space: nowrap; }
.segment-grid--savoury .segment-card__title, .segment-grid--savoury .segment-card__link { color: var(--c-savoury); }
.segment-grid--sweet .segment-card__title, .segment-grid--sweet .segment-card__link { color: var(--c-sweet); }
.segment-grid--wellness .segment-card__title, .segment-grid--wellness .segment-card__link { color: var(--c-wellness); }

/* ==========================================================================
   Applications overview page: one categorized section per Savoury/Sweet/Wellness
   ========================================================================== */
.applications-group { padding-top: 60px; }
.applications-group:last-of-type { padding-bottom: 70px; }
.applications-group__row { margin-bottom: 28px; border-top: 1px solid #ececec; padding-top: 44px; }
.applications-group:first-of-type .applications-group__row { border-top: none; padding-top: 0; }
.applications-group__heading {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-h2);
  font-weight: 500;
}
.applications-group__heading--savoury { color: var(--c-savoury); }
.applications-group__heading--sweet { color: var(--c-sweet); }
.applications-group__heading--wellness { color: var(--c-wellness); }
.applications-group .segment-grid { padding-bottom: 16px; grid-template-columns: repeat(4, 1fr); }

/* ==========================================================================
   Market segment sub-pages (Snacks, Bakery, ...): diagonal hero + plain intro
   ========================================================================== */
/* Application detail hero now reuses .hero/.hero__panel/.hero__content verbatim
   (see _application_hero.html), header clearance included (see .hero's own
   margin-top) — only its own small eyebrow label needs a rule here. */
/* Shorter than the shared .hero's 650px (unchanged for the homepage) — this
   is a deep leaf page (Applications > category > this), not a flagship
   landing spot, and the full homepage-sized hero read as oversized for it.
   Scoped to this modifier class specifically so homepage/solutions keep
   their own 650px untouched. */
.segment-app-hero { height: 460px; }
@media (max-width: 600px) { .segment-app-hero { height: 340px; } }
.segment-app-hero__eyebrow { font-size: var(--fs-small); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }

@media (max-width: 960px) {
  .segment-intro__grid { grid-template-columns: 1fr; }
}

.segment-intro { padding-block: 50px; }
.segment-intro__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
/* Fixed max-width (not just aspect-ratio) so every application page's intro
   photo renders at the same absolute size regardless of its own image's
   dimensions — previously it stretched to fill the full grid column. */
.segment-intro__media { aspect-ratio: 4 / 3; max-width: 440px; width: 100%; justify-self: start; border-radius: var(--radius-md); background-size: cover; background-position: center; background-color: var(--c-bg-soft); }
.segment-intro__heading { font-size: var(--fs-h2); color: var(--c-red); font-weight: 500; max-width: 720px; }
.segment-intro__text { margin-top: 16px; max-width: 720px; color: var(--c-gray); font-size: var(--fs-lead); line-height: 1.7; }

/* Flex, not grid — so a row that doesn't divide evenly (5, 7, 8 items...) centers
   its last row instead of leaving it stranded flush-left with empty grid cells. */
.tag-grid { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 24px; margin-top: 32px; }
.tag-card { display: block; flex: 0 0 calc((100% - 48px) / 3); transition: transform 0.25s ease; }
.tag-card:hover { transform: translateY(-4px); }
/* 386/318 — the real aspect ratio of the source product photos, not a forced square crop. */
.tag-card__image { position: relative; display: block; aspect-ratio: 386 / 318; border-radius: 8px; overflow: hidden; background-size: cover; background-position: center; background-color: #eee; }
.tag-card__image--swatch { border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: inset 0 0 0 4px var(--c-white); }
.tag-card__label { display: block; margin-top: 10px; font-size: var(--fs-small); font-weight: 500; color: var(--c-ink); }
/* Plain text tag with no image/swatch (e.g. Sweetener Solutions' "Zero
   bitterness, zero linger") — a single-line pill instead of the image-card
   layout above, tinted a light wash of the solution's own colour. */
.tag-card--pill {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  white-space: nowrap;
  padding: 18px 28px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-tag-tint, var(--c-savoury)) 16%, white);
  color: var(--c-ink);
  font-weight: 700;
  font-size: var(--fs-small);
  scroll-snap-align: start;
}

/* Reveal-on-hover overlay — cards with a populated `details` list (ApplicationTag.details)
   surface it as a dark scrim that slides up over the thumbnail, cascading the list items in. */
.tag-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px 14px 14px;
  background: linear-gradient(180deg, rgba(15, 15, 15, 0) 0%, rgba(15, 15, 15, 0.55) 40%, rgba(15, 15, 15, 0.92) 100%);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.tag-card--reveal:hover .tag-card__overlay { opacity: 1; transform: translateY(0); }
.tag-card__overlay-title {
  display: block;
  color: var(--c-white);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-bottom: 6px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.tag-card__overlay-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.tag-card__overlay-list li {
  position: relative;
  padding-left: 13px;
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.76rem;
  line-height: 1.3;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.tag-card__overlay-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--c-orange);
}
.tag-card--reveal:hover .tag-card__overlay-list li { opacity: 1; transform: translateY(0); }
.tag-card__overlay-list li:nth-child(1) { transition-delay: 0.03s; }
.tag-card__overlay-list li:nth-child(2) { transition-delay: 0.06s; }
.tag-card__overlay-list li:nth-child(3) { transition-delay: 0.09s; }
.tag-card__overlay-list li:nth-child(4) { transition-delay: 0.12s; }
.tag-card__overlay-list li:nth-child(5) { transition-delay: 0.15s; }
.tag-card__overlay-list li:nth-child(6) { transition-delay: 0.18s; }
.tag-card__overlay-list li:nth-child(7) { transition-delay: 0.21s; }

/* Search results page — no hero banner, so it needs its own top spacing to
   clear the absolutely-positioned .site-header (~106px tall) instead of
   relying on a hero section to push content down like other pages do. */
.search-results { padding-top: 130px; }
.search-results__form {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 480px;
  margin-bottom: 40px;
  padding: 4px 4px 4px 18px;
  border: 1px solid #e2e2e2;
  border-radius: 999px;
}
.search-results__form input {
  flex: 1;
  border: none;
  background: none;
  font: inherit;
  font-size: var(--fs-body);
  color: var(--c-ink);
}
.search-results__form input:focus { outline: none; }
.search-results__form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--c-orange);
  color: var(--c-white);
  flex-shrink: 0;
}
.search-results__hint { color: var(--c-gray); }
.search-results__group-heading { font-size: var(--fs-h4); font-weight: 700; color: var(--c-ink); margin: 40px 0 0; }
.search-results__grid { margin-top: 20px; justify-content: flex-start; }
.search-results__grid .tag-card__label small { display: block; color: var(--c-gray); font-weight: 400; font-size: var(--fs-xs); margin-top: 2px; }

.other-segments .content-section__heading { text-align: center; }
.other-segments__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin-top: 40px; }
.other-segment-card {
  display: block;
  background: var(--c-white);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
  transition: transform 0.25s ease;
}
.other-segment-card:hover { transform: translateY(-4px); }
.other-segment-card__image { display: block; aspect-ratio: 483 / 336; background-size: cover; background-position: center; }
.other-segment-card__body { display: block; padding: 26px; }
.other-segment-card__title { display: block; font-size: var(--fs-h3); font-weight: 600; }
.other-segment-card__title--savoury { color: var(--c-savoury); }
.other-segment-card__title--sweet { color: var(--c-sweet); }
.other-segment-card__title--wellness { color: var(--c-wellness); }
.other-segment-card__desc { display: block; margin-top: 10px; font-size: var(--fs-small); color: var(--c-gray); line-height: 1.55; }
.other-segment-card__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: var(--fs-small); font-weight: 500; }
.other-segment-card__more--savoury { color: var(--c-savoury); }
.other-segment-card__more--sweet { color: var(--c-sweet); }
.other-segment-card__more--wellness { color: var(--c-wellness); }

/* ==========================================================================
   Solution detail pages (Our Solutions — Seasonings, Flavours, ...)
   ========================================================================== */
/* Top padding must clear the header's own height (~106px — it's position:absolute
   and opaque, not a see-through overlay like it is on a photo hero), or the
   breadcrumb and part of the title render hidden underneath it. */
.solution-hero { padding-block: 130px 80px; }
.solution-hero__breadcrumb { color: var(--c-gray); font-size: var(--fs-small); margin-bottom: 24px; }
.solution-hero__breadcrumb a { color: var(--c-gray); text-decoration: none; }
.solution-hero__breadcrumb a:hover { text-decoration: underline; }
/* Centered page title + subtitle, standing alone above the photo/intro row — matches
   the Figma frame, which renders these as their own block, not beside the photo. */
.solution-hero__title-block { text-align: center; max-width: 720px; margin: 0 auto 56px; }
/* The site-wide `p { text-align: justify }` default sets itself directly on
   this <p>, beating the inherited center alignment from the title-block
   ancestor above — target the <p> itself to override it. */
.solution-hero__title-block .solution-hero__subtitle { margin-inline: auto; text-align: center; }
/* Banner column narrowed from its original 537px — at that width the photo
   dominated the row and crowded the text; this keeps the same aspect ratio
   (537:488) just smaller, so it reads as balanced with the copy beside it. */
.solution-hero__grid { display: grid; grid-template-columns: 400px 1fr; gap: 48px; align-items: start; }
.solution-hero__banner { aspect-ratio: 537 / 488; border-radius: var(--radius-md); background-size: cover; background-position: center; background-color: var(--c-bg-soft); }
.solution-hero__content { padding-top: 8px; }
.solution-hero__title { font-size: var(--fs-h1); font-weight: 500; }
.solution-hero__subtitle { margin-top: 10px; font-size: var(--fs-lead-lg); max-width: 640px; }
.solution-hero__heading { margin-top: 32px; font-size: var(--fs-h2); font-weight: 400; }
.solution-hero__text { margin-top: 16px; color: var(--c-gray); line-height: 1.7; font-size: var(--fs-lead); }
.solution-hero__text p + p { margin-top: 1em; }

.solution-section--center { text-align: center; }
.solution-section__lead { max-width: 860px; margin-inline: auto; margin-top: 12px; color: var(--c-gray); text-align: center; }

/* Highlights — card grid with lavender bg */
/* #F5F5F7 (--c-bg-soft), not lavender — verified against Figma's own fill on this
   exact section on two different Solutions (a VECTOR-type rect, easy to miss: an
   earlier check grabbed a different, lower rectangle by mistake and wrongly
   concluded lavender). Ready-to-Retail is the section that's actually lavender. */
.solution-highlights { background: var(--c-bg-soft); }
/* Checked against Figma across several Solutions, which don't all use the same fixed
   column count — 2 highlights fill the row as 2 wide cards, 3 as 3 narrower cards, but
   a Solution with 11 (TastePro) wraps at ~4 per row rather than rendering 11 columns.
   auto-fit naturally reproduces this: as many ~240px+ columns as fit stretch to share
   the row when there's room, and it wraps once a row is full — instead of a fixed
   column count that either strands a leftover item or, worse, crams every item into
   one row regardless of how many there are. */
/* Sub-categorised groups (TastePro's Savoury/Sweet/Wellness) — each is its own
   labelled row of the same hover-to-expand strip used on About Us, reused via
   the shared .strip-grid/.strip-card classes rather than a page-specific copy. */
.solution-highlight-group { margin-top: 40px; text-align: center; }
.solution-highlight-group:first-of-type { margin-top: 32px; }
.solution-highlight-group__heading { font-size: 1.75rem; font-weight: 600; margin-bottom: 18px; }
.solution-highlight-strip { margin-top: 0; }
/* Ungrouped highlights (no group set) have no .solution-highlight-group
   wrapper above them to supply that 40px, so this variant needs its own —
   otherwise the strip sits flush against the lead paragraph with no gap. */
.solution-highlight-strip--ungrouped { margin-top: 40px; }
/* Shorter than the shared .strip-card default (560px) — scoped to solution
   highlight strips (both this ungrouped variant, e.g. Flavours, and the
   grouped case, e.g. TastePro's Savoury/Sweet/Wellness rows) so every
   solution page's highlight cards match, without affecting other .strip-card
   uses like About Us' "Our Expertise". */
.solution-highlight-strip .strip-card,
.solution-highlight-strip .strip-card:hover,
.solution-highlight-strip .strip-card:focus-visible { height: 400px; }

/* Slider treatment matching Ready-to-Retail: prev/next arrows either side of
   a horizontally-scrolling, snap-aligned track instead of wrapping to rows. */
.solution-tags__slider { display: flex; align-items: center; gap: 16px; margin-top: 32px; }
.solution-tags__arrow {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-gray);
  border: 1px solid var(--c-gray-light);
  background: var(--c-white);
  transition: background 0.2s ease, color 0.2s ease;
}
.solution-tags__arrow:hover { background: var(--c-red); color: var(--c-white); border-color: var(--c-red); }
.solution-tag-grid {
  max-width: none;
  margin-inline: 0;
  margin-top: 0;
  flex-wrap: nowrap;
  /* justify-content:center (inherited from .tag-grid) plus overflow-x:auto
     centers the overflowing content around scrollLeft:0, leaving the first
     card hanging off the left edge with no way to scroll to it — force
     flex-start so the track actually starts at its first card. */
  justify-content: flex-start;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  flex: 1 1 auto;
  min-width: 0;
}
.solution-tag-grid::-webkit-scrollbar { display: none; }
.solution-tag-grid .tag-card { scroll-snap-align: start; }

/* Requested: drop the little orange dot before each hover-reveal detail line
   on solution pages (Applications' tag cards keep it — only asked for here). */
.page-solution-detail .tag-card__overlay-list li::before { display: none; }
.page-solution-detail .tag-card__overlay-list li { padding-left: 0; }

/* Applications — image cards with colored bottom bar (Figma: Frame 502) */
/* Colored line-icon cards, matching the Figma frame exactly — white rounded card,
   the icon tinted to the linked Application's own category color (so e.g. a Sweet
   Solutions application shows in pink even on an otherwise-orange Savoury page),
   label below. Not photos with a colored bar — that was a mismatch from Figma. */
.solution-apps-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 32px;
}
.solution-app-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 calc((100% - 120px) / 7);
  min-width: 130px;
  background: var(--c-white);
  border-radius: 14px;
  padding: 22px 14px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  transition: transform 0.25s ease;
}
.solution-app-card:hover { transform: translateY(-4px); }
.solution-app-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
}
.solution-app-card__icon svg, .solution-app-card__icon img { width: 100%; height: 100%; object-fit: contain; }
.solution-app-card__label {
  display: block;
  margin-top: 14px;
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--c-ink);
  text-align: center;
  line-height: 1.3;
}

/* Ready-to-Retail section */
/* White, not lavender — the lavender rectangle behind this section in Figma
   (Rectangle 107) has visible:false, i.e. it's a hidden/unused layer that never
   actually renders. Confirmed against the real rendered frame: this section is
   plain white, same as the tag grid above it. */
.solution-retail { background: var(--c-white); }
/* Photo + colored caption, matching Figma exactly — these were built as icon tiles
   before, which isn't what the design shows at all. */
/* Slider: track scrolls horizontally with snap; prev/next arrows sit either
   side, same icon-btn treatment as the History timeline carousel. */
.solution-retail__slider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
}
.solution-retail__arrow {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-gray);
  border: 1px solid var(--c-gray-light);
  background: var(--c-white);
  transition: background 0.2s ease, color 0.2s ease;
}
.solution-retail__arrow:hover { background: var(--c-red); color: var(--c-white); border-color: var(--c-red); }
.solution-retail__grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  flex: 1 1 auto;
  min-width: 0;
}
.solution-retail__grid::-webkit-scrollbar { display: none; }
.solution-retail-card { flex: 0 0 calc((100% - 48px) / 3); scroll-snap-align: start; text-align: center; }
.solution-retail-card__image {
  display: block;
  aspect-ratio: 344 / 281;
  border-radius: 16px;
  background-size: cover;
  background-position: center;
  background-color: var(--c-bg-soft);
}
.solution-retail-card__title {
  font-size: var(--fs-h4);
  font-weight: 600;
  margin-top: 14px;
}
.solution-retail-card__text {
  font-size: var(--fs-small);
  color: var(--c-gray);
  line-height: 1.5;
  margin-top: 6px;
}
.solution-retail__note {
  text-align: center;
  margin-top: 24px;
  font-size: var(--fs-xs);
  color: var(--c-gray);
}

/* Applications + Other Solutions share one plain light-grey band in Figma (a single
   background rectangle spans both sections) — not lavender, not white. */
.solution-applications { background: var(--c-bg-soft); }
.other-solutions { background: var(--c-bg-soft); }
.other-solutions__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 40px; }
.other-solution-card { display: block; background: var(--c-white); border-radius: 20px; overflow: hidden; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06); transition: transform 0.25s ease; }
.other-solution-card:hover { transform: translateY(-4px); }
.other-solution-card__image { display: block; aspect-ratio: 4 / 3; background-size: cover; background-position: center; background-color: var(--c-bg-soft); }
.other-solution-card__body { display: block; padding: 22px; }
.other-solution-card__title { display: block; font-size: var(--fs-h3); font-weight: 600; }
.other-solution-card__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: var(--fs-small); font-weight: 500; }

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact { padding-block: 70px; }
.contact__grid { display: grid; grid-template-columns: 340px 1fr; gap: 64px; }
.contact__info h2 { font-size: var(--fs-h2); color: var(--c-red); font-weight: 500; margin-bottom: 30px; }
.contact__block { margin-bottom: 28px; }
.contact__block h3 { font-size: var(--fs-h4); color: var(--c-ink); margin-bottom: 10px; }
.contact__block ul { display: flex; flex-direction: column; gap: 6px; }
.contact__block a { color: var(--c-red); }
.form-success { background: #eef8ee; color: #2b6b2b; border-radius: 6px; padding: 12px 16px; margin-bottom: 20px; font-size: 0.9rem; }

.contact__form { display: flex; flex-direction: column; gap: 22px; }
.form-row input, .form-row textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--c-gray-light);
  padding-block: 10px;
  font-family: var(--font);
  font-size: 1rem;
  background: transparent;
  color: var(--c-ink);
}
.form-row input:focus, .form-row textarea:focus { outline: none; border-color: var(--c-red); }
.form-label { font-size: 0.95rem; color: var(--c-ink); margin-top: 6px; }
.checkbox-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 24px; }
.checkbox { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--c-gray); }
.checkbox input {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--c-gray-light);
  border-radius: 4px;
  display: inline-block;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
}
.checkbox input:checked {
  background: var(--c-red);
  border-color: var(--c-red);
}
.checkbox input:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid var(--c-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.btn-pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--c-orange);
  color: var(--c-white);
  padding: 14px 26px;
  border-radius: 8px;
  font-weight: 600;
}
.btn-pill:hover { background: #e0840f; }

/* ==========================================================================
   Careers page
   ========================================================================== */
.pill-tabs { background: var(--c-white); border-bottom: 1px solid #ececec; position: sticky; top: 0; z-index: 20; }
.pill-tabs__inner { display: flex; gap: 12px; padding-block: 18px; flex-wrap: wrap; }
.pill-tabs a { padding: 8px 18px; border-radius: 8px; background: var(--c-bg-soft); font-size: 0.9rem; font-weight: 500; color: var(--c-ink); }
.pill-tabs--underline { position: static; border-bottom: none; margin-block: 40px; }
.pill-tabs--underline .pill-tabs__inner { padding-block: 0; border-bottom: 1px solid #ececec; gap: 28px; }
.pill-tabs--underline a { padding: 0 0 14px; border-radius: 0; background: none; color: var(--c-gray); border-bottom: 2px solid transparent; }
.pill-tabs--underline a.is-active { color: var(--c-red); border-color: var(--c-red); font-weight: 600; }

.careers-values { background: var(--c-orange); padding-block: clamp(48px, 6vw, 80px); }
.careers-values .values-heading { color: var(--c-white); }
.careers-values .value-card { background: var(--c-white); }
.values-heading { text-align: center; color: var(--c-red); font-size: clamp(1.75rem, 2.8vw, 2.5rem); font-weight: 600; margin: 0 0 40px; }
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; text-align: center; }
/* Big icon + title always visible; only the description stays hidden until
   hover/focus, fading and rising into place underneath. */
.value-card { padding: 28px 18px; border-radius: 16px; cursor: pointer; transition: background 0.25s ease; }
.value-card:hover, .value-card:focus-visible { background: var(--c-bg-soft); outline: none; }
.value-card__icon { display: inline-flex; color: var(--c-orange); transition: transform 0.3s ease; }
.value-card__icon svg { width: 88px; height: 88px; }
.value-card:hover .value-card__icon, .value-card:focus-visible .value-card__icon { transform: translateY(-4px); }
.value-card__icon--shield { color: #F5905C; }
.value-card__icon--puzzle { color: #BA457F; }
.value-card__icon--bulb { color: #3BB5FE; }
.value-card__icon--people { color: #82AA6B; }
.value-card h4 { margin-top: 14px; font-weight: 600; color: var(--c-ink); font-size: var(--fs-h4); }
.value-card:has(.value-card__icon--shield) h4 { color: #F5905C; }
.value-card:has(.value-card__icon--puzzle) h4 { color: #BA457F; }
.value-card:has(.value-card__icon--bulb) h4 { color: #3BB5FE; }
.value-card:has(.value-card__icon--people) h4 { color: #82AA6B; }
.value-card__detail {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(8px);
  transition: max-height 0.35s ease, opacity 0.3s ease, transform 0.3s ease, margin-top 0.35s ease;
}
.value-card:hover .value-card__detail,
.value-card:focus-visible .value-card__detail { max-height: 220px; opacity: 1; transform: translateY(0); margin-top: 8px; }
.value-card p { font-size: var(--fs-small); color: var(--c-gray); line-height: 1.5; }

.offer-intro { display: grid; grid-template-columns: 280px 1fr; gap: 36px; align-items: center; margin-bottom: 44px; }
.offer-intro__media { aspect-ratio: 1 / 1; border-radius: 16px; background-size: cover; background-position: center; }
.offer-intro h2 { margin-top: 8px; }
.offer-intro p { margin-top: 14px; color: var(--c-gray); }

.accordion { display: flex; flex-direction: column; gap: 12px; }
.accordion__item { background: var(--c-white); border-radius: 8px; padding: 18px 22px; }
.accordion__item summary { cursor: pointer; list-style: none; font-weight: 500; color: var(--c-red); display: flex; justify-content: space-between; align-items: center; }
.accordion__item summary::-webkit-details-marker { display: none; }
.accordion__item summary::after { content: "⌄"; color: var(--c-gray); transition: transform 0.2s ease; }
.accordion__item[open] summary::after { transform: rotate(180deg); }
.accordion__item p { margin-top: 14px; color: var(--c-gray); font-size: var(--fs-small); line-height: 1.6; white-space: pre-line; }

/* Numbered variant — used by the article FAQ section */
.accordion__question { display: flex; align-items: center; gap: 16px; }
.accordion__number {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--c-bg-soft);
  color: var(--c-red);
  font-size: 0.78rem;
  font-weight: 700;
}
.accordion__item p.accordion__answer { margin-left: 48px; }

.article-faqs { padding-top: 0; }
.article-faqs .content-section__heading,
.article-faqs__heading { margin-bottom: 32px; }

.jobs-intro { display: grid; grid-template-columns: 1fr 280px; gap: 36px; align-items: center; margin-bottom: 36px; }
/* Text-only when there's no image (matches the live page — no photo in this
   section there) instead of leaving an empty 280px gap on the right. */
.jobs-intro:not(:has(.jobs-intro__media)) { grid-template-columns: 1fr; }
.jobs-intro__media { aspect-ratio: 541 / 389; border-radius: 16px; background-size: cover; background-position: center; order: 2; }
.jobs-intro p { margin-top: 14px; color: var(--c-gray); }
.jobs-filter { margin-bottom: 18px; }
.jobs-filter select,
.jobs-filter__row input {
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid var(--c-gray-light);
  font-family: var(--font);
  font-size: 0.92rem;
  color: var(--c-ink);
  background: var(--c-white);
}
.jobs-filter__row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.jobs-filter__row input { flex: 1 1 220px; }
.jobs-filter__submit { flex: 0 0 auto; padding-block: 10px; }
.jobs-table { width: 100%; border-collapse: collapse; }
.jobs-table th { text-align: left; padding: 12px 0; border-bottom: 1px solid var(--c-ink); font-size: 0.9rem; }
.jobs-table td { padding: 16px 0; border-bottom: 1px solid #ececec; font-size: 0.95rem; }
.jobs-table__dept { display: block; font-size: 0.8rem; color: var(--c-gray); margin-top: 2px; }
.jobs-table__empty { color: var(--c-gray); text-align: center; padding: 30px 0; }

/* ==========================================================================
   Knowledge Center / Articles
   ========================================================================== */
.articles { padding-block: 60px; }
.articles__heading { font-size: var(--fs-h2); color: var(--c-red); font-weight: 600; margin-bottom: 30px; }

.featured-article { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin-bottom: 40px; }
.featured-article__media { aspect-ratio: 772 / 471; border-radius: 24px; background-size: cover; background-position: center; }
.featured-article__eyebrow { color: var(--c-red); font-weight: 500; margin-bottom: 10px; }
.featured-article__body h2 { font-size: var(--fs-h2); font-weight: 600; }
.featured-article__body h2 a { color: var(--c-red); }
.featured-article__body p { margin-top: 12px; color: var(--c-gray); }
.featured-article__date { margin-top: 14px; font-size: var(--fs-small); color: var(--c-gray); }

/* Knowledge Center banner carousel — several admin-picked posts cycling through
   the same `.featured-article` layout, one slide visible at a time. Deliberately
   sits outside `.container` (see page_articles.html) so it can bleed full-width;
   the image goes flush to the browser edge while the text keeps the usual gutter. */
.featured-carousel { width: 100%; background: var(--c-bg-soft); overflow: hidden; }
.featured-carousel .featured-article {
  display: none;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  margin-bottom: 0;
  animation: kc-fade 0.4s ease;
}
.featured-carousel .featured-article.is-active { display: grid; }
.featured-carousel .featured-article__media { aspect-ratio: auto; height: 100%; min-height: 380px; border-radius: 0; }
.featured-carousel .featured-article__body { padding: 48px var(--gutter) 48px 48px; }
@keyframes kc-fade { from { opacity: 0; } to { opacity: 1; } }
.featured-carousel__dots { display: flex; justify-content: center; gap: 9px; padding: 4px 0 28px; }
.featured-carousel__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--c-gray-light);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.featured-carousel__dot:hover { background: var(--c-orange); }
.featured-carousel__dot.is-active { background: var(--c-red); transform: scale(1.3); }

@media (max-width: 940px) {
  .featured-carousel .featured-article { grid-template-columns: 1fr; }
  .featured-carousel .featured-article__media { min-height: 260px; }
  .featured-carousel .featured-article__body { padding: 32px var(--gutter); }
}

.article-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; align-items: stretch; }
/* Flex column so the date pins to the bottom of every card regardless of how many
   lines the (now consistently-truncated) title/excerpt happen to wrap to — combined
   with the grid's own stretch, every card in a row ends up the same height. */
.article-card { display: flex; flex-direction: column; height: 100%; background: var(--c-white); border-radius: 16px; overflow: hidden; box-shadow: 0 10px 26px rgba(0,0,0,0.06); }
/* 3:2 — a genuine rectangle, not the old 312/273 (~1.14:1) that read as
   basically square and, combined with background-size:cover, cropped in
   tight enough to lose most of some thumbnails' actual content. */
.article-card__media { display: block; aspect-ratio: 3 / 2; background-size: cover; background-position: center; }
.article-card__body { display: flex; flex-direction: column; flex: 1; padding: 18px; }
.article-card__tag { color: var(--c-red); font-size: var(--fs-xs); font-weight: 500; }
/* Clamped to a fixed 2 lines — titles used to run anywhere from 1 to 4
   lines, and since that pushed the excerpt down by a different amount on
   every card, cards in the same row ended up with visibly uneven amounts of
   excerpt text even though their overall height (still stretched equal via
   the grid) matched. Clamping title (and the excerpt below) to a fixed
   line count keeps every card's internal layout identical, not just its
   outer height. */
.article-card h3 {
  margin-top: 6px;
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-card h3 a { color: var(--c-ink); }
.article-card__body p {
  margin-top: 8px;
  font-size: var(--fs-small);
  color: var(--c-gray);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-card__date { display: block; margin-top: auto; padding-top: 10px; font-size: var(--fs-xs); color: var(--c-gray-light); }
.articles--related { background: var(--c-bg-soft); }

/* Knowledge Center listing only (not the "related articles" reuse of this
   same card elsewhere) — full width, no crop, every card still the same
   size. A background-image div has no intrinsic size of its own to size
   itself by, so this needed an actual <img> in the markup instead; that's
   why it's scoped to .page-articles rather than changing the shared
   .article-card__media rule everywhere.
   A fixed height (not natural/auto) is what keeps cards uniform — auto
   height let each photo's own aspect ratio decide the row's rhythm, which
   left shorter images looking like smaller cards next to taller ones.
   object-fit:contain scales each image down to fit entirely inside that
   fixed slot (never cropping it, unlike cover), and centers it by default
   on both axes when its own proportions don't fill the slot — exactly the
   "shorter image → centered" behaviour asked for, with no extra centering
   rules needed. */
.page-articles .article-card__media {
  aspect-ratio: auto;
  height: 220px;
  display: block;
  background: var(--c-bg-soft);
  overflow: hidden;
}
.page-articles .article-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transition: transform 0.5s ease;
}
.page-articles .article-card:hover .article-card__media img,
.page-articles .article-card:focus-within .article-card__media img {
  transform: scale(1.08);
}
/* No-image fallback — a plain wordmark reads as "no photo yet" much better
   at logo size than stretched up to fill the same slot a real photo would,
   which is what plain object-fit:contain would otherwise do here since
   nothing else constrains how large it renders. */
.page-articles .article-card__media--fallback { display: flex; align-items: center; justify-content: center; }
.page-articles .article-card__media--fallback img { width: auto; height: auto; max-width: 45%; max-height: 34%; object-fit: contain; }
.page-articles .article-card:hover .article-card__media--fallback img,
.page-articles .article-card:focus-within .article-card__media--fallback img {
  transform: none;
}

/* Full-bleed banner photo at the top of every post (matches the report
   layout's own full-width hero image), no text over it — title/breadcrumb
   sit in their own boxed section right below instead, per the standard
   "content starts at the same left edge as everything else" pattern used
   across the rest of the site. margin-top clears the fixed/absolute header
   the same way every other full-bleed section does. */
.article-hero { position: relative; height: 460px; margin-top: 106px; overflow: hidden; background: var(--c-bg-soft); }
@media (max-width: 900px) { .article-hero { height: 320px; } }
@media (max-width: 600px) {
  /* A fixed tall height on a narrow viewport crops down to a thin vertical
     sliver of whatever a (typically wide, landscape) banner image happens to
     have in its dead centre — most of the actual image is lost off both
     sides. Landscape height here instead of portrait-ish keeps the crop
     showing a real cross-section of the image. Mobile header is shorter
     (50px, no utility bar) than desktop's 106px — same margin as .hero. */
  .article-hero { height: 220px; margin-top: 50px; }
}
.article-hero__img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.article-head { padding-block: 32px 8px; }
/* Only when there's no banner image at all — then this is the first thing
   on the page and needs to clear the header itself. */
.article-head--no-banner { padding-top: 138px; }
.article-head__breadcrumb { font-size: var(--fs-xs); color: var(--c-gray); }
.article-head__breadcrumb a { color: var(--c-gray); text-decoration: underline; }
/* The title moved here from .article-detail when the banner/head was split
   into its own section — this selector has to move with it, or it falls
   back to the ambient grey body-text colour instead of ink. */
.article-head h1 { margin-top: 10px; font-size: var(--fs-h1); color: var(--c-ink); font-weight: 600; max-width: 900px; }

.article-detail { padding-block: 8px 60px; }
.article-detail__date { margin-top: 10px; color: var(--c-gray); font-size: var(--fs-small); }
/* 1000px — measured directly off the live WordPress post (a body paragraph
   there renders ~973px wide at a 1280px viewport), not the ~760px "narrow blog
   column" this used to be capped to. Images already matched this; text didn't,
   which is why it looked cramped next to them. Both match now. */
.article-detail__body { max-width: 1000px; color: var(--c-gray); font-size: var(--fs-lead); line-height: 1.8; }

/* Article content blocks — the drag-reorderable building blocks an editor stacks
   in admin to compose an article, in place of one plain body paragraph. */
.article-block { margin-top: 32px; }
.article-block:first-child { margin-top: 0; }
.article-block--heading { color: var(--c-red); font-size: var(--fs-h2); font-weight: 500; }
.article-block--text p { margin-top: 1em; text-align: justify; text-justify: inter-word; }
.article-block--text p:first-child { margin-top: 0; }
.article-block--image {
  /* <figure> has a ~40px default margin in the UA stylesheet, which was quietly
     shifting the image out of alignment with the paragraph text's left edge. */
  margin-inline: 0;
  max-width: 100%;
  width: 100%;
}
.article-block--image img { width: 100%; height: 280px; border-radius: 16px; display: block; object-fit: cover; }
.article-block--image figcaption { margin-top: 10px; font-size: var(--fs-small); color: var(--c-gray-light); text-align: center; }

/* Image + Text — photo and text stacked in one column (full width). */
.article-block--split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
  margin-inline: 0;
}
.article-block__split-media { margin: 0; }
.article-block__split-media img { width: 100%; height: 280px; border-radius: 16px; display: block; object-fit: cover; }
.article-block__split-media figcaption { margin-top: 10px; font-size: var(--fs-xs); color: var(--c-gray-light); }
.article-block__split-body h3 { color: var(--c-red); font-size: var(--fs-h3); font-weight: 600; margin-bottom: 10px; }
.article-block__split-body p { text-align: justify; text-justify: inter-word; }
.article-block--quote {
  margin-inline: 0;
  padding: 24px 28px;
  border-left: 4px solid var(--c-orange);
  background: var(--c-bg-soft);
  border-radius: 0 12px 12px 0;
  font-size: var(--fs-h3);
  color: var(--c-ink);
  font-style: italic;
}
.article-block--quote cite { display: block; margin-top: 12px; font-size: var(--fs-small); color: var(--c-gray); font-style: normal; font-weight: 600; }
.article-block--quote cite::before { content: '— '; }
.article-block__video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: var(--c-ink); width: 100%; }
.article-block__video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.article-block--text iframe { width: 100%; height: auto; display: block; margin: 0 auto; border-radius: 16px; }
.article-block__video-caption { margin-top: 10px; font-size: var(--fs-small); color: var(--c-gray-light); text-align: center; }
.article-block--cta { display: flex; }

/* ==========================================================================
   Secondary-page responsive
   ========================================================================== */
@media (max-width: 960px) {
  .listing-card { grid-template-columns: 1fr; }
  .listing-card.is-reversed .listing-card__media { order: 0; }
  /* Below this width the hover-grow no longer makes sense (mostly touch
     devices, and there's not enough room to spare) — cards wrap into a
     fixed 3-up grid instead; the description still reveals on hover/tap. */
  .strip-grid { flex-wrap: wrap; }
  .strip-card, .strip-card:hover, .strip-card:focus-visible { flex: 0 0 calc((100% - 8px) / 3); height: 400px; }
  .feature-card { flex: 0 1 calc((100% - 32px) / 2); max-width: calc((100% - 32px) / 2); }
  .locations-grid { grid-template-columns: repeat(2, 1fr); }
  .contact__grid { grid-template-columns: 1fr; gap: 40px; }
  .values-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  .offer-intro, .jobs-intro { grid-template-columns: 1fr; }
  .jobs-intro__media { order: 0; }
  .article-grid { grid-template-columns: repeat(2, 1fr); }
  .featured-article { grid-template-columns: 1fr; }
  .history-section__layout { grid-template-columns: 1fr; }
  .other-segments__grid { grid-template-columns: 1fr; }
  .segment-grid { grid-template-columns: repeat(2, 1fr); }
  .solution-hero__grid { grid-template-columns: 1fr; }
  .solution-hero__banner { max-width: 400px; }
  .other-solutions__grid { grid-template-columns: repeat(2, 1fr); }
  .solution-app-card { flex-basis: calc((100% - 60px) / 4); }
  .solution-retail-card { flex-basis: calc((100% - 24px) / 2); }
}

@media (max-width: 600px) {
  .strip-card, .strip-card:hover, .strip-card:focus-visible { flex-basis: calc((100% - 4px) / 2); height: 340px; }
  .feature-card { flex-basis: 100%; max-width: 100%; }
  .locations-grid { grid-template-columns: 1fr; }
  .checkbox-grid { grid-template-columns: 1fr; }
  .article-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }
  .segment-grid { grid-template-columns: 1fr; }
  .tag-card { flex-basis: calc((100% - 24px) / 2); }
  .solution-hero__banner { max-width: 100%; }
  .other-solutions__grid { grid-template-columns: 1fr; }
  .solution-highlight-grid { grid-template-columns: 1fr; }
  .solution-app-card { flex-basis: calc((100% - 20px) / 2); }
  .solution-retail-card { flex-basis: 100%; }
}

/* ==========================================================================
   NECOL — brand microsite (/necol/). Its own header/footer (see
   _necol_navbar.html / _necol_footer.html, swapped in via base.html's
   {% block header/footer %}) rather than the main site's — matches how
   symega.com/necol-naturalcolors/ is its own distinctly-branded page.
   ========================================================================== */
.necol-section { padding-block: 70px; }
/* In-page jumps (nav links, /necol/#necol-request) must clear the 73px sticky header. */
.page-necol { --necol-header-h: 73px; }   /* the compact (scrolled) header bar */
.page-necol [id^="necol-"] { scroll-margin-top: var(--necol-header-h); }
/* Nav jumps land with each section's own content ~40px under the compact header bar (the sections carry Figma's big top paddings). */
.page-necol #necol-about { scroll-margin-top: 33px; }
.page-necol #necol-shades { scroll-margin-top: 43px; }
.page-necol #necol-advantage { scroll-margin-top: -14px; }
.page-necol #necol-request { scroll-margin-top: 55px; }
.page-necol #necol-faq { scroll-margin-top: 56px; }
.necol-section--soft { background: var(--c-bg-soft); }
.necol-section--center { text-align: center; }
.necol-section__lead { max-width: 843px; margin: 20px auto 0; color: #000; font-size: clamp(17px, 2vw, 22px); line-height: 1.3636; }
/* .content-section__heading is shared site-wide and defaults to red — every
   section heading on the live NECOL page is plain black instead. */
.page-necol .content-section__heading { color: var(--c-ink); }
/* Figma's typeface (Tw Cen MT; Jost is loaded as the closest free fallback). */
.page-necol { --necol-font: 'Tw Cen MT', 'Tw Cen MT Std', 'Twentieth Century', 'Jost', 'Figtree', sans-serif; --necol-grey: #b5b5b5; font-family: var(--necol-font); color: #000; }
/* The site-wide `p { text-align: justify }` — Figma's text is left-aligned or centred, never justified. */
.page-necol p { text-align: inherit; }
.page-necol h1, .page-necol h2, .page-necol h3, .page-necol h4 { font-family: var(--necol-font); }
/* Section headings: 52px / 56.6px, regular (Figma). The Blends + Advantage headings are 600 and the request heading 500 — set per section. */
.page-necol .content-section__heading { font-size: clamp(32px, 5.4vw, 52px); line-height: 1.088; font-weight: 400; color: #000; margin-bottom: 0; }

/* Figma's content column is 1280px (80px margins on the 1440 frame); the site's .container adds 48px of side
   padding, so widen it here → 1280px of content wherever the viewport allows. */
.page-necol .container { max-width: 1376px; }

/* --- Loading screen (Figma start frame): white, the rainbow-line GIF, then a 0.3s ease-out dissolve into the page --- */
.necol-intro { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: #fefefe; cursor: pointer;   /* #fefefe = the GIF's own background, so its edges never show */ transition: opacity .3s ease-out, visibility .3s ease-out; }
.necol-intro.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.necol-intro__anim { display: block; width: 100%; max-width: 1440px; height: auto; }
body.page-necol:has(.necol-intro:not(.is-leaving)) { overflow: hidden; }   /* no scrolling behind the loader */
@media (prefers-reduced-motion: reduce) { .necol-intro { display: none; } }

/* --- Header --- */
.necol-header { position: sticky; top: 0; z-index: 50; background: var(--c-white); box-shadow: 0 1px 0 #ececec; }
.necol-header__bar { padding-block: 16px; }
.necol-nav { display: flex; align-items: center; justify-content: space-between; }
.necol-nav__logo { display: inline-flex; align-items: flex-start; }
.necol-nav__logo img { height: 31px; width: auto; display: block; }          /* Figma: the wordmark is 219×41, scaled down 25% */
/* Trademark mark next to the wordmark image — sized in real px (not em, which
   would inherit the surrounding nav's small text size) so it reads at a
   sensible scale next to a 41–58px logo instead of near-invisible. */
.necol-logo-tm { font-size: 12px; font-weight: 700; line-height: 1; margin: 2px 0 0 2px; color: inherit; }
.necol-nav__menu { display: flex; flex-wrap: wrap; gap: 50px; margin: 0 0 5px; list-style: none; }
/* Figma's nav: 22px / 24px Tw Cen MT in light grey, going black on hover. */
.necol-nav__menu a { font-family: var(--necol-font); font-size: 22px; line-height: 24px; font-weight: 400; color: var(--necol-grey, #b5b5b5); text-decoration: none; transition: color .3s ease-out; }
.necol-nav__menu li:nth-child(1) a:hover, .necol-nav__menu li:nth-child(1) a:focus-visible { color: #0066FF; }
.necol-nav__menu li:nth-child(2) a:hover, .necol-nav__menu li:nth-child(2) a:focus-visible { color: #00A86B; }
.necol-nav__menu li:nth-child(3) a:hover, .necol-nav__menu li:nth-child(3) a:focus-visible { color: #FF8C00; }
.necol-nav__menu li:nth-child(4) a:hover, .necol-nav__menu li:nth-child(4) a:focus-visible { color: #9932CC; }

/* --- Banner Image --- */
.necol-about__banner { display: block; width: min(220px, 60%); height: auto; margin: 0 auto 24px; }

/* Desktop: Figma's 160px header band (logo 70px from the top). The bar is fixed, so it can shrink to a compact
   strip on scroll without moving the page — the header itself just holds the 160px of space. */
@media (min-width: 1151px) {
  .necol-header { position: relative; height: 160px; background: transparent; box-shadow: none; }
  .necol-header__bar { position: fixed; inset: 0 0 auto 0; z-index: 50; background: var(--c-white); padding: 70px 0 49px; transition: padding .3s ease-out, box-shadow .3s ease-out; }
  .necol-header__bar.is-compact { padding-block: 16px; box-shadow: 0 1px 0 #ececec; }
}
@media (max-width: 1150px) { .necol-nav__menu { gap: 28px; } .necol-nav__menu a { font-size: 18px; } }

/* --- Hero (main banner): Figma's rounded photo panel ---
   A 1281×704 panel inside the 1280px content column: 65px radius on the TOP corners only (bottom square),
   the photo top-aligned and scaled to the panel's width (its bottom is cropped, as in Figma), a #2e2e2e
   overlay at 25%, and the headline in Tw Cen MT 40px / 43.55px, weight 400, #fefefe, centred.
   Slides cross-fade (Figma: smart-animate 0.3s ease-out); the dots sit at the bottom. */
.necol-hero { padding-top: 0; background: var(--c-white); }   /* the 160px header band above already spaces the panel */
.necol-hero__frame { max-width: 1376px; }   /* the site's .container adds 48px side padding → 1280px of content */
.necol-hero__panel {
  position: relative; display: flex; align-items: center; justify-content: center;
  height: 704px; border-radius: 65px 65px 0 0; overflow: hidden; background: #223;
}
.necol-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center top; }
.necol-hero__slide { opacity: 0; transition: opacity .3s ease-out; }
.necol-hero__slide.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .necol-hero__slide { transition: none; } }
.necol-hero__scrim { position: absolute; inset: 0; background: rgba(46, 46, 46, 0.25); }
.necol-hero__content { position: relative; z-index: 2; text-align: center; padding-inline: 24px; }
.necol-hero__content h1 {
  max-width: 621px; margin-inline: auto;
  font-family: var(--necol-font); font-size: 40px; line-height: 43.55px; font-weight: 400; letter-spacing: 0; color: #fefefe;
}
/* Banner slider dots */
.necol-hero__dots { position: absolute; left: 0; right: 0; bottom: 26px; z-index: 3; display: flex; justify-content: center; gap: 14px; }
.necol-hero__dot { position: relative; width: 11px; height: 11px; padding: 0; border-radius: 50%; border: 1.5px solid #fff; background: transparent; cursor: pointer; transition: background-color .3s ease-out, transform .3s ease-out; }
.necol-hero__dot::after { content: ""; position: absolute; inset: -9px; }
.necol-hero__dot:hover { background: rgba(255, 255, 255, .55); }
.necol-hero__dot.is-active { background: #fff; transform: scale(1.2); }
.necol-hero__dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 1150px) {
  .necol-hero { padding-top: 28px; }
  .necol-hero__panel { height: max(340px, calc((100vw - 96px) * 0.55)); border-radius: 44px 44px 0 0; }   /* keeps Figma's 1281:704 proportions while it fits */
  .necol-hero__content h1 { font-size: 34px; line-height: 38px; }
}
@media (max-width: 620px) {
  .necol-hero { padding-top: 16px; }
  .necol-hero__panel { height: 300px; border-radius: 28px 28px 0 0; }
  .necol-hero__content h1 { font-size: 27px; line-height: 31px; }
}
@media (max-width: 440px) {
  .necol-hero__content { padding-inline: 14px; }
  .necol-hero__content h1 { font-size: 22px; line-height: 26px; }
}

/* --- About: intro paragraph + 4 equal tab pills (297×49, r32); each tab = a 405px text column + cards
   sharing the rest of the row (187×365, r16, 117px coloured caption band) — all Figma measurements --- */
.necol-section__lead p { max-width: none; margin: 0 0 30px; font-size: inherit; line-height: inherit; }
.necol-section__lead p:last-child { margin-bottom: 0; }
#necol-about { padding-top: 80px; }
#necol-about .necol-section__lead { margin-top: 0; }
.necol-tabs { margin-top: 88px; }
.necol-tabs__nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-bottom: 59px; }
.necol-tabs__btn { height: 49px; padding: 0 14px; border-radius: 32px; background: #fff; border: 1px solid var(--necol-grey); font: 400 16px/17.4px var(--necol-font); color: var(--necol-grey); cursor: pointer; transition: background-color .3s ease-out, color .3s ease-out, border-color .3s ease-out; }
.necol-tabs__btn:hover { color: #000; border-color: #000; }
.necol-tabs__btn.is-active { background: #000; border-color: #000; color: #fff; }
.necol-tabs__panel { display: none; }
.necol-tabs__panel.is-active { display: block; animation: necol-fade .35s ease-out; }
.necol-tabs__grid { display: grid; grid-template-columns: 405px 1fr; gap: 32px; align-items: start; text-align: left; }
.necol-tabs__grid--no-image { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; }
.necol-tabs__body h3 { font: 400 52px/56.6px var(--necol-font); color: #000; margin: 0 0 15px; }
/* Inline with the heading text (e.g. "Powered by " + the Synthite wordmark)
   instead of a standalone block — sized against the heading's own line-height
   so the two read as one lockup rather than a tiny logo under huge text. */
.necol-tabs__logo { display: inline-block; height: 40px; width: auto; vertical-align: middle; margin-left: 4px; }
.necol-tabs__text p { font-size: 22px; line-height: 26px; color: #000; margin: 0 0 26px; }
.necol-tabs__cards-label { font: 700 22px/24px var(--necol-font); color: #000; margin: 8px 0 22px; }
.necol-tabs__cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.necol-tabs__cards-grid--count-3 { grid-template-columns: repeat(3, 1fr); }
.necol-tabs__cards-grid--count-2 { grid-template-columns: repeat(2, 1fr); }
.necol-tabs__cards-grid--count-1 { grid-template-columns: 1fr; }
/* Single-card tabs (e.g. "Designed for the Future") have no cards_label and
   only one photo, so the fixed 365px card height left a gap under it
   whenever the text column ran longer — stretch the card to match the
   text's full height instead, so both columns start and end together. */
.necol-tabs__grid:has(.necol-tabs__cards-grid--count-1) { align-items: stretch; }
.necol-tabs__grid:has(.necol-tabs__cards-grid--count-1) .necol-tabs__cards-grid--count-1 { height: 100%; }
.necol-tabs__cards-grid--count-1 .necol-tabs__card { height: 100%; }
.necol-tabs__card {
  position: relative; height: 365px; border-radius: 16px; overflow: hidden;
  background-size: cover; background-position: center; background-color: #ddd;
  display: flex; align-items: flex-end;
}
.necol-tabs__card-caption { display: block; width: 100%; height: 117px; padding: 14px 15px; font: 400 16px/17.4px var(--necol-font); color: #fff; }
@media (max-width: 1150px) {
  .necol-tabs { margin-top: 56px; }
  .necol-tabs__nav { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 36px; }
  .necol-tabs__grid { grid-template-columns: 1fr; }
  .necol-tabs__body h3 { font-size: 38px; line-height: 42px; }
  .necol-tabs__text p { font-size: 18px; line-height: 24px; }
  .necol-tabs__cards-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .necol-tabs__cards-grid--count-1 { grid-template-columns: 1fr; }
  .necol-tabs__card { height: 300px; }
}

/* --- The NECOL Advantage (Figma "hovering" states) ---
   Five equal 240px portrait photos (562 tall, r17, 20px gaps). The hovered one grows to ~558px while the others
   shrink to ~160px, and its caption band — the card's colour with a swirl line — slides up from the bottom
   (smart-animate 0.3s ease-out). The band keeps Figma's 1240:414 proportions; the text sits 24% in from its left.
   Figma sets the caption in Satoshi (loaded from Fontshare in necol_page.html; Figtree, the site's own face, is the fallback). --- */
.necol-advantage-grid { display: flex; gap: 20px; margin: 55px -2px 0; }
.necol-advantage-card {
  position: relative; flex: 1 1 0; min-width: 0; height: 562px; border-radius: 17px; overflow: hidden; outline: none;
  background-size: cover; background-position: center; background-color: #ddd;
  transition: flex-grow .3s ease-out;
}
.necol-advantage-card:hover, .necol-advantage-card:focus, .necol-advantage-card:focus-within { flex-grow: 3.477; }
.necol-advantage-card__overlay {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 1; aspect-ratio: 1240 / 414;
  background: var(--necol-tint, #000); color: #fff;
  transform: translateY(100%); opacity: 0; transition: transform .3s ease-out, opacity .3s ease-out;
}
/* The swirl is Figma's vector, drawn as a mask so each card can tint it with its own accent colour. */
.necol-advantage-card__overlay::before {
  content: ""; position: absolute; inset: auto 0 1.3% 0; height: 74.6%;   /* Figma stretches the vector to ~3/4 of the band's height */
  background: var(--necol-accent, rgba(255, 255, 255, .28));
  -webkit-mask: url("../img/necol_card_swirl.png") 0 0 / 100% 100% no-repeat;
  mask: url("../img/necol_card_swirl.png") 0 0 / 100% 100% no-repeat;
}
.necol-advantage-card:hover .necol-advantage-card__overlay,
.necol-advantage-card:focus .necol-advantage-card__overlay,
.necol-advantage-card:focus-within .necol-advantage-card__overlay { transform: none; opacity: 1; }
.necol-advantage-card__text { position: absolute; z-index: 1; left: 24.2%; width: 66.5%; top: 19px; font-family: 'Satoshi', var(--font); text-align: left; }
.necol-advantage-card__title, .necol-advantage-card__desc {
  display: block;
  color: var(--necol-accent, #fff);
}
/* "Application Expertise" (1st card) only — its accent is a light green on a
   close-in-hue green tint, which read illegibly; darkened just for this
   card instead of the raw accent value the others use. */
.necol-advantage-card:first-child .necol-advantage-card__title,
.necol-advantage-card:first-child .necol-advantage-card__desc {
  color: color-mix(in srgb, var(--necol-accent, #fff) 55%, black 45%);
}
.necol-advantage-card__title { font-size: 20.5px; line-height: 24px; font-weight: 500; }
.necol-advantage-card__desc { margin-top: 13px; font-size: 16.4px; line-height: 20px; font-weight: 400; }
.necol-advantage__cta { text-align: center; margin-top: 65px; }
/* Figma tags these headings 600 in "Tw Cen MT Std", but its own render (the design as seen) is the regular face — match what is seen. */
#necol-advantage .content-section__heading { font-weight: 400; line-height: 58px; }
@media (prefers-reduced-motion: reduce) { .necol-advantage-card, .necol-advantage-card__overlay { transition: none; } }
/* Tablet / phone: no hover, so every card shows its caption band, and the row wraps. */
@media (max-width: 900px) {
  .necol-advantage-grid { flex-wrap: wrap; margin-inline: 0; }
  .necol-advantage-card, .necol-advantage-card:hover, .necol-advantage-card:focus { flex: 0 0 calc(50% - 10px); height: 420px; }
  .necol-advantage-card__overlay { transform: none; opacity: 1; aspect-ratio: auto; }
  .necol-advantage-card__overlay { min-height: 140px; }
  .necol-advantage-card__overlay::before { inset: auto 0 0 0; height: 34%; }
  .necol-advantage-card__text { position: relative; left: auto; width: auto; top: auto; padding: 18px 18px 46px 20px; }
  .necol-advantage-card__title { font-size: 17px; line-height: 22px; }
  .necol-advantage-card__desc { margin-top: 8px; font-size: 14px; line-height: 19px; }
}
@media (max-width: 560px) {
  .necol-advantage-card, .necol-advantage-card:hover, .necol-advantage-card:focus { flex-basis: 100%; height: 440px; }
}

/* --- Shade Families & Gradients — built to the Figma file's own measurements ---
   1440px frame, 1280px container: header row (logo · title · note), six equal
   pills (≈197×49, ~19.6px gaps), then a 575px ring at x+37 and a 563×609 detail
   column at x+729. Everything below the pills is sized in Figma px. */
.necol-shades {
  --necol-grey: #b5b5b5;
  font-family: var(--necol-font);
  padding-block: 70px 116px;
}
.necol-shades .content-section__heading { font-family: var(--necol-font); font-size: 28px; line-height: 34px; font-weight: 600; }
/* The site's .container adds 48px side padding; Figma's content column here is a full 1280px
   (80px margins on the 1440 frame), so widen just this section's container to match. */
.necol-shades .container { max-width: 1376px; }
.necol-shades__header { display: grid; grid-template-columns: 200px 1fr 346px; align-items: center; column-gap: 24px; text-align: left; padding-top: 11px; }
.necol-shades__title { display: contents; }
/* Figma's brand lock-up: a 181px wordmark with a tiny ™ hanging off its top-right (199.7×40 box). */
.necol-shades__brand { position: relative; display: block; width: 200px; height: 40px; }
.necol-shades__logo { position: absolute; left: 0; top: 6px; width: 180px; height: auto; display: block; }
.necol-shades__brand::after { content: ""; position: absolute; left: 179px; top: 2px; font-size: 18px; line-height: 1; color: #000; }
.necol-shades__title h2 { grid-column: 2; margin: 0 26px 0 0; text-align: center; font-size: 28px; line-height: 34px; font-weight: 600; color: #000; white-space: nowrap; }
.necol-shades__lead { grid-column: 3; margin: 16px 0 0; max-width: 346px; font-size: 16px; line-height: 17.4px; color: #000; text-align: left; }

.necol-shade-explorer { margin-top: 32px; }
.necol-shade-explorer__cats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 19.6px; margin-bottom: 70px; }
.necol-shade-cat {
  height: 49px; border-radius: 43px; border: 1px solid var(--necol-grey); background: #fff; color: var(--necol-grey);
  font: 400 16px/1 var(--necol-font); cursor: pointer; padding: 0 12px;
  transition: background-color .3s ease-out, color .3s ease-out, border-color .3s ease-out;
}
.necol-shade-cat:hover { color: #000; border-color: #000; }
.necol-shade-cat.is-active { background: #000; border-color: #000; color: #fff; }

.necol-shade-panel { display: none; }
.necol-shade-panel.is-active { display: block; animation: necol-fade .35s ease-out; }
@keyframes necol-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Ring (left) + detail column (right) */
.necol-stage { display: flex; align-items: flex-start; gap: 117px; padding-left: 37px; }

/* The ring: an SVG drawn from necol_wheel.py's measured geometry. */
.necol-wheel { position: relative; flex: none; width: 575px; height: 575px; }
.necol-wheel__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.necol-wheel__arc { cursor: pointer; outline: none; transition: opacity .2s ease-out; }
.necol-wheel__arc:hover { opacity: .9; }
.necol-wheel__arc:focus-visible { stroke: #000; stroke-width: 2px; }
.necol-wheel__arc.is-light { stroke: var(--necol-grey); stroke-width: 1px; }
/* The knob: 33px colour disc + 3px white ring, riding the mid-line of the selected arc.
   Rotating its group about the ring's centre glides it along the ring (shortest way round). */
.necol-wheel__knob { transform-origin: 287.5px 287.5px; transform: rotate(var(--necol-a, 0deg)); transition: transform .55s cubic-bezier(.22, .8, .3, 1); }
.necol-wheel__knob circle {
  stroke: #fff; stroke-width: 3px; transition: fill .3s ease-out;
  transform-box: fill-box; transform-origin: center;
}
.necol-wheel__knob.is-light circle { stroke: var(--necol-grey); }
/* Flanking nav buttons: dark pills (readable against any wedge colour) that
   signal the knob can be moved left/right along the ring (tangentially,
   since the whole group rotates about the ring's centre) — clicking either
   one steps the selection to the adjacent wedge, same as the knob itself
   was dragged that way round. Pills touch the knob's own circle so the
   three read as one capsule-shaped control. */
.necol-wheel__knob .necol-wheel__knob-nav-bg {
  /* No visible pill — just an invisible, generously-sized hit target so the
     thin arrow underneath stays easy to click/tap. The extra `.necol-wheel__knob`
     qualifier beats `.necol-wheel__knob circle`'s white stroke (meant for the
     main dot), which otherwise wins on specificity against a single class. */
  fill: transparent;
  stroke: none;
  pointer-events: auto;
}
.necol-wheel__knob-arrow {
  stroke: #fff;
  stroke-width: 3px;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45));
  transition: stroke-width .2s ease-out, transform .2s ease-out;
  transform-box: fill-box;
  transform-origin: center;
}
.necol-wheel__knob.is-light .necol-wheel__knob-arrow { stroke: var(--necol-grey); }
.necol-wheel__knob-nav { cursor: pointer; pointer-events: auto; }
.necol-wheel__knob-nav:hover .necol-wheel__knob-arrow,
.necol-wheel__knob-nav:focus-visible .necol-wheel__knob-arrow { stroke-width: 4.5px; transform: scale(1.15); }
.necol-wheel__knob-nav:focus-visible .necol-wheel__knob-arrow { stroke: #000; }
/* Switching category often lands on a colour just a couple of degrees from
   the previous one (every category's default is "Red", always near the same
   angle) — the knob barely appears to move even though it did, so pulse it
   on category change to make the update read as intentional. */
.necol-wheel__knob.is-pulsing circle { animation: necol-knob-pulse .5s ease-out; }
@keyframes necol-knob-pulse {
  0% { transform: scale(1); filter: none; }
  40% { transform: scale(1.45); filter: drop-shadow(0 0 10px rgba(255, 255, 255, .9)); }
  100% { transform: scale(1); filter: none; }
}
/* Centre product photo: Figma's 576×314 canvas sits at (-5, +112) inside the ring → these %s of 575. */
.necol-wheel__product { position: absolute; left: -2.087%; top: 16.696%; width: 103.304%; height: 64.696%; pointer-events: none; }
.necol-wheel__product img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .3s ease-out; }
.necol-wheel__product img.is-on { opacity: 1; }

/* Detail column — 563×609 panel, with the category label sitting 9px above it. */
.necol-detail { position: relative; flex: none; width: 563px; height: 618px; margin: -21px -12px 0 0; }
.necol-shade-detail { position: absolute; inset: 0; display: none; }
.necol-shade-detail.is-active { display: block; animation: necol-fade .3s ease-out; }
.necol-shade-detail__cat { margin: 0; height: 14px; padding-left: 4px; font-size: 12px; line-height: 14px; font-weight: 600; color: var(--necol-grey); }
.necol-shade-detail__title { margin: -5px 0 0; font-size: 52px; line-height: 57px; font-weight: 400; letter-spacing: 0; color: var(--necol-t, #000); }

.necol-subtabs { display: flex; align-items: stretch; width: 545px; height: 37px; margin: 27px 0 0 4px; border-bottom: 1px solid var(--necol-grey); }
.necol-subtab { background: none; border: 0; padding: 0; font: 400 26px/26px var(--necol-font); color: var(--necol-grey); text-align: left; cursor: pointer; transition: color .3s ease-out; }
.necol-subtab:first-child { width: 207px; border-right: 1px solid var(--necol-grey); }
.necol-subtab:last-child { padding-left: 23px; }
.necol-subtab:hover, .necol-subtab.is-active { color: #000; }

.necol-view { display: none; padding-left: 4px; }
.necol-view.is-active { display: block; animation: necol-fade .3s ease-out; }
.necol-view--info { padding-top: 23px; }
.necol-view--tech { padding-top: 31px; }
.necol-label { margin: 0 0 8px; font-size: 12px; line-height: 13px; font-weight: 600; color: var(--necol-grey); }
.necol-label--ideal { margin: 31px 0 4px; }

/* Shades chips + Sources cards: scrolling strips (arrows appear when a colour has more than ~4). */
.necol-strip { position: relative; width: 545px; margin-bottom: 28px; }
.necol-strip:last-of-type { margin-bottom: 0; }
.necol-strip__track { display: flex; gap: 11px; overflow-x: auto; scrollbar-width: none; padding: 10px 16px 8px 4px; margin: -10px 0 -8px -4px; }
.necol-strip__track::-webkit-scrollbar { display: none; }
.necol-strip__nav { position: absolute; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; border: 1px solid var(--necol-grey); background: #fff; cursor: pointer; padding: 0; z-index: 2; transition: transform .2s ease-out; }
.necol-strip__nav:hover { transform: scale(1.1); }
.necol-strip__nav::after { content: ""; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; border: solid var(--necol-grey); border-width: 0 0 1.5px 1.5px; }
.necol-strip__nav--prev { left: -32px; }
.necol-strip__nav--prev::after { transform: translate(-30%, -50%) rotate(45deg); }
.necol-strip__nav--next { right: -34px; background: #000; border-color: #000; }
.necol-strip__nav--next::after { border-color: #fff; transform: translate(-70%, -50%) rotate(-135deg); }

.necol-chip {
  position: relative; flex: none; width: 110px; height: 63px; padding: 0; border: 0; border-radius: 10px;
  background: var(--chip, #ff0a00); cursor: pointer;
  transition: box-shadow .2s ease-out, transform .2s ease-out;
}
.necol-chip.is-light { background: #fff; box-shadow: inset 0 0 0 1px #000; }
.necol-chip:hover { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--necol-grey); }  /* Figma's hover state: a thin grey ring */
.necol-chip.is-light:hover { box-shadow: inset 0 0 0 1px #000, 0 0 0 2px #fff, 0 0 0 3px var(--necol-grey); }
.necol-chip.is-selected { box-shadow: 0 0 0 2px #fff, 0 0 0 3px #000; }
.necol-chip.is-light.is-selected { box-shadow: inset 0 0 0 1px #000, 0 0 0 2px #fff, 0 0 0 3px #000; }
/* the black × badge that appears on a selected chip (20px, hanging off its top-right corner) */
.necol-chip__x { position: absolute; top: -8px; right: -12px; width: 20px; height: 20px; border-radius: 50%; background: #000; opacity: 0; transform: scale(.4); transition: opacity .2s ease-out, transform .2s ease-out; pointer-events: none; }
.necol-chip__x::before, .necol-chip__x::after { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 1.2px; margin: -.6px 0 0 -4px; background: #fff; transform: rotate(45deg); }
.necol-chip__x::after { transform: rotate(-45deg); }
.necol-chip.is-selected .necol-chip__x { opacity: 1; transform: none; }

.necol-source { position: relative; flex: none; width: 110px; height: 102px; border-radius: 8px; overflow: hidden; background: #d9d9d9; transition: opacity .25s ease-out; }
.necol-source__photo { position: absolute; inset: 0; background-size: 100% 100%; background-repeat: no-repeat; }
.necol-source__name { position: absolute; left: 0; right: 0; bottom: 0; height: 26px; line-height: 26px; text-align: center; font-size: 12px; color: #fff; background: var(--necol-c, #ff0a00); }
.necol-source.is-light .necol-source__name { background: #fff; color: #000; box-shadow: inset 0 0 0 .5px var(--necol-grey); }
/* one chip selected → only its own Source card remains */
.necol-shade-detail.has-selection .necol-source:not(.is-selected) { display: none; }
.necol-shade-detail.has-selection .necol-source.is-selected { animation: necol-fade .3s ease-out; }
.necol-ideal { margin: 0; max-width: 497px; font-size: 22px; line-height: 24px; color: #000; text-align: left; text-justify: auto; }
/* Figma's chip-selected variants set the "Ideal for" block one step larger (14px label, 24px text). */
.necol-shade-detail.has-selection .necol-label--ideal { font-size: 14px; line-height: 15px; }
.necol-shade-detail.has-selection .necol-ideal { font-size: 24px; line-height: 26px; }

/* Technical Performance Insight */
.necol-tech { display: none; }
.necol-tech.is-active { display: block; animation: necol-fade .3s ease-out; }
.necol-tech__h { margin: 0; font: 400 22px/26px var(--necol-font); color: #000; }
.necol-stab { display: grid; grid-template-columns: 277px 1fr; row-gap: 39px; margin-top: 19px; }
.necol-stab__item { display: grid; grid-template-columns: 52px 1fr; align-items: start; color: var(--necol-t, #ff0a00); }
.necol-stab__icon { display: block; height: 36px; width: 33px; }
.necol-stab__item span { display: flex; flex-direction: column; gap: 3px; }
.necol-stab__item em { font-style: normal; font-size: 12px; line-height: 13px; font-weight: 600; color: var(--necol-grey); }
.necol-stab__item strong { font-weight: 400; font-size: 22px; line-height: 26px; color: #000; }
.necol-tech__h--formats { margin-top: 30px; }
.necol-formats { display: flex; gap: 11px; margin-top: 14px; }
.necol-format { position: relative; display: flex; align-items: center; width: 209px; height: 44px; padding-left: 94px; border: 1px solid var(--necol-grey); border-radius: 22px; color: var(--necol-grey); font-size: 16px; }
.necol-format__icon { position: absolute; left: 31px; top: 50%; transform: translateY(-50%); color: var(--necol-grey); }
.necol-format:nth-child(2) { padding-left: 88px; }
.necol-format:nth-child(2) .necol-format__icon { left: 25px; }

.necol-request-btn {
  position: absolute; left: 0; top: 553px; width: 200px; height: 49px; border-radius: 24.5px;
  background: var(--necol-c, #ff0a00); color: #fff; font-size: 16px; line-height: 49px; text-align: center; text-decoration: none;
  transition: transform .2s ease-out, filter .2s ease-out, box-shadow .2s ease-out;
}
.necol-request-btn:hover { transform: translateY(-2px); filter: brightness(.94); box-shadow: 0 6px 14px rgba(0, 0, 0, .14); }
.necol-request-btn.is-light { background: #fff; color: #000; border: 1px solid #000; line-height: 47px; }

@media (prefers-reduced-motion: reduce) {
  .necol-wheel__knob, .necol-wheel__product img, .necol-shade-panel.is-active, .necol-shade-detail.is-active,
  .necol-view.is-active, .necol-tech.is-active { transition: none; animation: none; }
}
/* Narrower screens: pills wrap, ring scales down, the detail column drops underneath. */
@media (max-width: 1320px) {
  .necol-stage { gap: 48px; padding-left: 0; }
  .necol-detail { margin-right: 0; }
  .necol-shade-explorer__cats { gap: 12px; }
}
/* 1151–1290px: the ring + detail column (1186px of fixed Figma sizes) no longer fit, so scale the pair down a touch. */
/* Was `zoom: .88` — zoom shrinks layout but several Chromium versions don't
   correctly remap pointer/click coordinates through it for nested SVG
   content, so clicking a wheel segment in this exact viewport range could
   silently miss the shape and hit the SVG background instead (no visible
   effect, looked like the wheel and category buttons were "disconnected").
   `transform: scale()` shrinks the same way but is one all engines correctly
   hit-test through; widening the box by the inverse factor first keeps its
   painted footprint (and therefore the surrounding layout) unchanged. */
@media (min-width: 1151px) and (max-width: 1290px) {
  .necol-stage { transform: scale(.88); transform-origin: top left; width: calc(100% / .88); }
}
@media (max-width: 1150px) {
  .necol-stage { flex-direction: column; align-items: center; gap: 36px; }
  .necol-wheel { width: min(575px, 100%); height: auto; aspect-ratio: 1; }
  .necol-detail { width: 100%; max-width: 563px; height: auto; margin-top: 0; }
  .necol-shade-detail { position: relative; inset: auto; }
  .necol-request-btn { position: static; display: block; margin-top: 32px; }
  .necol-subtabs, .necol-strip { width: 100%; }
  .necol-shades__header { grid-template-columns: 1fr; row-gap: 14px; text-align: center; justify-items: center; }
  .necol-shades__title h2, .necol-shades__lead { grid-column: 1; text-align: center; }
  .necol-shades__title h2 { font-size: 28px; line-height: 34px; margin-right: 0; }
  .necol-shades__lead { margin-top: 0; }
}
@media (max-width: 760px) {
  .necol-shade-explorer__cats { grid-template-columns: repeat(2, 1fr); margin-bottom: 40px; }
  .necol-shade-detail__title { font-size: 42px; }
  .necol-subtab { font-size: 19px; }
  .necol-subtab:first-child { width: auto; padding-right: 14px; }
  .necol-subtab:last-child { padding-left: 14px; }
  .necol-subtabs { height: auto; min-height: 37px; }
  .necol-stab { grid-template-columns: 1fr; row-gap: 26px; }
  .necol-formats { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .necol-subtab { font-size: 12px; white-space: nowrap; }
  .necol-subtab:first-child { padding-right: 8px; }
  .necol-subtab:last-child { padding-left: 8px; }
  .necol-ideal { font-size: 18px; line-height: 21px; }
}

/* --- Custom Blends: the full-bleed rainbow ribbon (same asset as the live page) sits BEHIND this section's text,
   exactly as in Figma — 424px tall, the heading 139px down, the button ending 30px above its bottom edge. --- */
.necol-supergraphic { overflow: hidden; line-height: 0; }
.necol-supergraphic img { display: block; width: 100%; height: auto; }

/* Custom NECOL™ Blends: heading 52px / 600, body 22px / 30px, both left-aligned at 733px (Figma). */
.necol-blends { position: relative; overflow: hidden; padding: 139px 0 30px; background: var(--c-white); color: #000; }
.necol-blends .necol-supergraphic { position: absolute; inset: 0 0 auto 0; z-index: 0; pointer-events: none; }
.necol-blends .container { position: relative; z-index: 1; }
.necol-blends__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.necol-blends__grid--no-image { grid-template-columns: 1fr; text-align: left; }
.necol-blends__text h2 { font: 400 52px/47.1px var(--necol-font); color: #000; margin: 0 0 38px; }
.necol-blends__text p { font: 400 22px/30px var(--necol-font); color: #000; max-width: 733px; margin: 0 0 31px; text-align: left; }
.necol-blends__image { aspect-ratio: 4 / 3; border-radius: 16px; background-size: cover; background-position: center; background-color: #333; }
/* The black CTA pills (Talk To Our Color Experts / Request Sample / Ask More Question): 312×49, r43, 16px white. */
.btn-pill--necol { display: inline-flex; align-items: center; justify-content: center; min-width: 312px; height: 49px; padding: 0 24px; background: #000; color: #fff; border: 0; border-radius: 43px; font: 400 16px/17.4px var(--necol-font); text-decoration: none; cursor: pointer; transition: opacity .3s ease-out, transform .2s ease-out; }
.btn-pill--necol:hover { opacity: 0.85; }

/* --- Request Sample form: 1114px wide, two 541px columns; labels 22px/40px; boxes 36px (textarea 150px), r8, 1px black --- */
#necol-advantage { padding-block: 127px 57px; }
#necol-request { padding-block: 58px 57px; }
#necol-faq { padding-block: 57px 216px; }
#necol-request .content-section__heading { font-weight: 500; line-height: 58px; }
/* Figma sets the trademark as a small raised "TM" */
.necol-tm { font-size: .45em; line-height: 0; position: relative; top: -.8em; margin-left: 1px; }
/* "necol" inside the heading is the wordmark image (necol_wordmark filter) */
.necol-inline-logo { display: inline-block; height: 30px; width: auto; margin: 0 4px; vertical-align: -3px; }
#necol-request .necol-section__lead { max-width: 656px; line-height: 29px; margin-top: 7px; }
.necol-form { max-width: 1114px; margin: 45px auto 0; text-align: left; display: flex; flex-direction: column; gap: 50px; }
.necol-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.necol-form__field { display: flex; flex-direction: column; gap: 8px; }
.necol-form__field label { font: 400 22px/40px var(--necol-font); color: #000; }
.necol-form__field input, .necol-form__field textarea, .necol-form__field select {
  border: 1px solid #000; border-radius: 8px; height: 36px; padding: 0 14px;
  font: 400 16px var(--necol-font); background: var(--c-white); color: #000;
}
.necol-form__field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='9' viewBox='0 0 15 9'%3E%3Cpath d='M0 0h15L7.5 9z' fill='%23000'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; padding-right: 40px;
}
.necol-form__field input:focus, .necol-form__field textarea:focus, .necol-form__field select:focus { outline: none; border-color: var(--c-red); }
.necol-form__field textarea { height: 150px; min-height: 150px; padding: 8px 14px; resize: vertical; }
.necol-form .btn-pill--necol { align-self: center; margin-top: -2px; }

/* --- FAQ (Figma): a 508×367 photo + a 740px list. Questions 26px/28.3px black, answers 18px/25px grey, hairline
   dividers every 76px, a circled "+" on the right, and the black "Ask More Question" pill pinned to the bottom. --- */
.necol-faq__grid { display: grid; grid-template-columns: 508px 1fr; gap: 32px; align-items: stretch; margin-top: 90px; text-align: left; }
.necol-faq__image { height: 367px; border-radius: 16px; background-size: cover; background-position: center; background-color: #ddd; }
.necol-faq__col { display: flex; flex-direction: column; min-height: 367px; }
.necol-faq__accordion { display: block; }
.necol-faq__accordion .accordion__item { background: none; border-radius: 0; padding: 0; margin: 0 0 25px 4px; border-bottom: 1px solid var(--necol-grey); }
.necol-faq__accordion summary { position: relative; display: block; min-height: 50px; padding-right: 44px; font: 400 26px/28.3px var(--necol-font); color: #000; }
.necol-faq__accordion summary::after {
  content: ""; position: absolute; right: 0; top: 2px; width: 20px; height: 20px; transform: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1'%3E%3Ccircle cx='10' cy='10' r='9.3'/%3E%3Cpath d='M6 10h8M10 6v8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.necol-faq__accordion .accordion__item[open] summary::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1'%3E%3Ccircle cx='10' cy='10' r='9.3'/%3E%3Cpath d='M6 10h8' stroke-linecap='round'/%3E%3C/svg%3E");
}
.necol-faq__answer { overflow: hidden; }
.necol-faq__answer p { margin: 0 0 22px; padding-left: 7px; font: 400 18px/25px var(--necol-font); color: var(--necol-grey); white-space: normal; }
.necol-faq__cta { margin-top: auto; align-self: flex-start; }
@media (max-width: 1150px) {
  .necol-faq__grid { grid-template-columns: 1fr; margin-top: 48px; }
  .necol-faq__image { height: auto; aspect-ratio: 508 / 367; }
  .necol-faq__cta { margin-top: 24px; }
  .necol-faq__accordion summary { font-size: 20px; line-height: 24px; }
}

/* --- Footer (Figma): logo (58px tall) · Contact Us at x+657 · Follow Us at x+1086; 22px / 24px black; 45px black
   social circles. Under that row runs the ribbon — a 1801×299 image at x = -38 on the 1440 frame, so it bleeds
   past both edges — and the copyright line sits over its lower-left, 30px above the bottom. --- */
.necol-footer { background: var(--c-white); padding-block: 0 31px; }
.necol-footer__inner { display: grid; grid-template-columns: minmax(0, 657fr) minmax(0, 429fr) minmax(200px, 194fr); align-items: start; padding-bottom: 37px; }
.necol-footer__logo { display: inline-flex; align-items: flex-start; }
.necol-footer__logo img { display: block; height: 58px; width: auto; margin-top: 8px; }
.necol-footer__logo .necol-logo-tm { font-size: 15px; margin-top: 10px; }
.necol-footer__contact h4, .necol-footer__social h4 { font: 700 22px/24px var(--necol-font); color: #000; margin: 0 0 16px; }
.necol-footer__contact p { font: 400 22px/24px var(--necol-font); color: #000; margin: 0 0 24px; }
.necol-footer__contact p:last-child { margin-bottom: 0; }
.necol-footer__contact a { color: #000; }
.necol-footer__address { max-width: 375px; }
.necol-footer__social-icons { display: flex; gap: 5px; }
.necol-footer__social-icons a { display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; border-radius: 50%; background: #000; color: #fff; transition: transform .2s ease-out, opacity .3s ease-out; }
.necol-footer__social-icons a:hover { transform: translateY(-2px); opacity: .85; }
.necol-footer__ribbon { position: relative; }
.necol-footer-band { position: relative; overflow: hidden; line-height: 0; aspect-ratio: 1440 / 299; }
.necol-footer-band img { position: absolute; top: 0; left: -2.64%; width: 125.07%; max-width: none; height: 100%; display: block; }
.necol-footer__bottom { position: absolute; inset: auto 0 30px 0; }
.necol-footer__bottom-inner { display: grid; grid-template-columns: minmax(0, 657fr) minmax(0, 429fr) minmax(200px, 194fr); font: 400 22px/24px var(--necol-font); color: #000; }
.necol-footer__bottom-inner p { margin: 0; font: inherit; }
.necol-footer__copy { display: flex; align-items: center; gap: 15px; }
.necol-footer__copy i { display: block; width: 1px; height: 16px; background: #000; }
@media (max-width: 1150px) {
  .necol-footer { padding-top: 40px; }
  .necol-footer__inner, .necol-footer__bottom-inner { grid-template-columns: 1fr; row-gap: 28px; }
  .necol-footer__bottom { position: static; padding-block: 14px 0; }
  .necol-footer__contact h4, .necol-footer__social h4, .necol-footer__contact p, .necol-footer__bottom-inner { font-size: 18px; line-height: 22px; }
  .necol-footer__logo img { height: 44px; margin-top: 0; }
  .necol-footer__bottom-inner { row-gap: 6px; }
  .necol-footer__copy { gap: 18px; }
  /* Tablet / phone: tighter section rhythm; the ribbon in Blends sits above its text instead of behind it. */
  .necol-shades { padding-bottom: 56px; }
  #necol-advantage, #necol-request, #necol-faq { padding-block: 56px; }
  #necol-faq { padding-bottom: 32px; }
  .necol-blends { padding-top: calc(29.4vw + 16px); }
}
@media (min-width: 901px) and (max-width: 1150px) { .necol-blends { padding-top: 139px; } .necol-blends__text { max-width: 58%; } }

@media (max-width: 940px) {
  .necol-tabs__grid { grid-template-columns: 1fr; }
  .necol-blends__grid { grid-template-columns: 1fr; }
  .necol-blends__text h2 { font-size: 34px; line-height: 38px; }
  .necol-blends__text p { font-size: 18px; line-height: 25px; }
  .necol-form__field label { font-size: 18px; line-height: 30px; }
  .necol-form__row { grid-template-columns: 1fr; }
}
@media (max-width: 940px) {
  .necol-nav__menu {
    /* Starts below the header bar (73px = --necol-header-h) so the logo + toggle stay visible. */
    position: fixed; inset: var(--necol-header-h, 73px) 0 0 auto; width: min(80vw, 340px); margin: 0;   /* margin: cancels the desktop menu's 5px bottom margin, which would leave a gap under the drawer */
    background: var(--c-white); flex-direction: column; align-items: flex-start;
    padding: 28px 28px 40px; gap: 22px; overflow-y: auto; translate: 100% 0;
    transition: translate 0.3s ease; box-shadow: -12px 0 32px rgba(0,0,0,0.14);
  }
  .necol-nav__menu.is-open { translate: 0 0; }
  /* NECOL's drawer has no Close row of its own: the hamburger stays above the
     drawer and turns into an X while the menu is open (aria-expanded from main.js). */
  .necol-nav .nav-toggle { position: relative; z-index: 2; }
  .necol-nav .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .necol-nav .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .necol-nav .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .necol-hero { margin-top: 0; }
}

/* ==========================================================================
   Corporate Notice — password-gated page (/corporate-notice/)
   ========================================================================== */
.form-error { background: #fbeaea; color: var(--c-red); border-radius: 6px; padding: 12px 16px; margin-bottom: 16px; font-size: 0.9rem; }

/* min-height accounts for the header + breadcrumb bar above this section, so
   the card centers in the remaining first-screen viewport rather than just
   the section's own box. The section itself carries the soft-gray background
   so the white card reads as a floating panel, matching the breadcrumb bar
   directly above it. */
.corporate-gate { display: flex; align-items: center; min-height: calc(100vh - 280px); padding-block: 60px 100px; background: var(--c-bg-soft); }
.corporate-gate__card {
  width: 100%;
  max-width: 420px;
  margin-inline: auto; /* the flex parent's own child (.container) is already
    full-width, so centering has to happen here, on the card itself */
  text-align: center;
  background: var(--c-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.08);
  padding: 48px 40px;
}
.corporate-gate__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--c-orange-tint);
  color: var(--c-red);
  display: flex;
  align-items: center;
  justify-content: center;
}
.corporate-gate__card h1 { font-size: var(--fs-h2); color: var(--c-ink); }
.corporate-gate__hint { margin-top: 10px; color: var(--c-gray); font-size: 0.92rem; }
.corporate-gate__form { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; }
.corporate-gate__form input {
  width: 100%;
  border: 1px solid var(--c-gray-light);
  border-radius: 8px;
  padding: 13px 16px;
  font-family: var(--font);
  font-size: 1rem;
  color: var(--c-ink);
  text-align: center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.corporate-gate__form input:focus { outline: none; border-color: var(--c-red); box-shadow: 0 0 0 3px rgba(215, 25, 32, 0.1); }
.corporate-gate__form .btn-pill { align-self: center; justify-content: center; min-width: 160px; }
.corporate-gate__foot { margin-top: 26px; color: var(--c-gray-light); font-size: 0.78rem; }

@media (max-width: 480px) {
  .corporate-gate__card { padding: 36px 26px; }
}

.corporate-notice { padding-block: 50px 100px; }
.corporate-notice__head { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px; margin-bottom: 44px; }
.corporate-notice__head h1 { font-size: var(--fs-h2); color: var(--c-ink); }
.corporate-notice__intro { margin-top: 10px; color: var(--c-gray); max-width: 640px; }
.corporate-notice__lock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--c-gray);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 8px 16px;
  border: 1px solid var(--c-gray-light);
  border-radius: 999px;
  flex-shrink: 0;
}
.corporate-notice__lock:hover { color: var(--c-red); border-color: var(--c-red); }
.corporate-notice__empty { color: var(--c-gray); }

.corporate-year { margin-top: 48px; }
.corporate-year:first-of-type { margin-top: 0; }
.corporate-year__label { font-size: var(--fs-h3); color: var(--c-red); font-weight: 600; padding-bottom: 12px; border-bottom: 1px solid #ececec; }
.corporate-year__empty { margin-top: 16px; color: var(--c-gray-light); font-size: 0.9rem; }

.corporate-doc-grid { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 24px; }
.corporate-doc-card { flex: 0 0 calc((100% - 96px) / 5); background: var(--c-white); border-radius: 14px; overflow: hidden; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06); transition: transform 0.25s ease; }
.corporate-doc-card:hover { transform: translateY(-4px); }
.corporate-doc-card__thumb { display: block; aspect-ratio: 3 / 4; background: var(--c-bg-soft); }
.corporate-doc-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.corporate-doc-card__placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--c-gray-light); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; }
.corporate-doc-card__body { padding: 14px; }
.corporate-doc-card__title { display: block; color: var(--c-ink); font-size: 0.9rem; font-weight: 600; line-height: 1.35; }
.corporate-doc-card__title:hover { color: var(--c-red); }
.corporate-doc-card__download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  color: var(--c-gray);
  font-size: 0.78rem;
  font-weight: 500;
}
.corporate-doc-card__download:hover { color: var(--c-red); }

@media (max-width: 940px) {
  .corporate-doc-card { flex-basis: calc((100% - 48px) / 3); }
}
@media (max-width: 600px) {
  .corporate-doc-card { flex-basis: calc((100% - 24px) / 2); }
  .corporate-notice__head { flex-direction: column; }
}

/* ==========================================================================
   Article "report" layout — a distinctly-designed feature page (its own
   colours/fonts, ported 1:1 from a Canva design brief) used for flagship
   pieces like the "Evolving Palate of India" trend report, instead of the
   standard Content Blocks layout every other article uses. Own font (Work
   Sans, loaded only on this page) for body copy — Figtree, already the
   site's global font, covers the headings ("display" below).
   ========================================================================== */
.report {
  --report-ivory: #f7f1e5;
  --report-paper: #fffdf8;
  --report-ink: #29241f;
  --report-muted: #6e6258;
  --report-gold: #c78218;
  --report-saffron: #eaa32b;
  --report-red: #9d3d2d;
  --report-line: #d8cbb9;
  font-family: "Work Sans", sans-serif;
  background-color: var(--report-ivory);
  background-image: radial-gradient(rgba(73, 49, 22, 0.075) 0.7px, transparent 0.7px);
  background-size: 8px 8px;
}
.report .display { font-family: var(--font); }
/* The site-wide `p { text-align: justify }` default sets itself directly on
   every <p> in this page (eyebrow, subtitle, lead text, card/body copy,
   etc.) — a directly-targeted rule always wins over an inherited value, so
   it silently overrode every attempt to left-align these via a parent or
   ancestor selector. One rule here beats it for the whole page instead of
   patching each text class individually. */
.report p { text-align: left; }
.report-section { padding-block: 72px; }
.report-section--tan { background: #e9dfcf; }
.report-section--paper { background: var(--report-paper); }
.report-section--gold { background: var(--report-gold); scroll-margin-top: 90px; }

/* Hero */
/* margin-top: 106px pushes the whole box clear of .site-header, which is
   position:absolute over the page top (see .site-header) — without this the
   hero's top ~106px sit *underneath* the header, so align-items:center was
   balancing the text block against the full box height including that
   hidden-behind-the-header region, leaving it looking pinned near the top
   with a large gap below instead of truly centered. Matches the same
   106px offset .article-hero already uses for this. */
.report-hero {
  position: relative;
  margin-top: 106px;
  min-height: 620px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--report-ink);
  padding-block: 90px;
}
/* background-position: right bottom (not center) — the Symega logo mark
   baked into this photo sits in its bottom-right corner, and on any viewport
   wider than the image's own ~2.23:1 ratio, cover-scaling crops the image's
   top and bottom to fill the full width. Center-anchoring split that crop
   evenly top/bottom and cut the bottom of the logo off; anchoring to the
   bottom-right instead means all of that crop comes off the top, so the
   corner holding the logo is never cropped, at any width. */
.report-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: right bottom; }
.report-hero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(41,36,31,0.95) 0%, rgba(41,36,31,0.75) 45%, rgba(41,36,31,0.2) 100%); }
/* Just the base .container's own 1280px max-width + auto margin — no
   narrower max-width of its own. It used to also carry max-width:720px,
   which (being narrower than the 1280px row .report-hero's flex lays out)
   gave the auto margins extra free space to center into, landing this box
   further right than every other section's .container. With no separate
   restriction here, this converges on the exact same centered position as
   the rest of the page — the individual text lines that need to stay
   narrower than the full 1280px (the lead paragraph) cap themselves. */
.report-hero__inner { position: relative; z-index: 2; }
.report-hero__eyebrow { color: #f6d789; font-weight: 700; font-size: 0.875rem; letter-spacing: 0.12rem; margin-bottom: 28px; }
.report-hero__title { font-family: var(--font); color: var(--report-paper); font-weight: 600; font-size: 2rem; line-height: 1.04; }
.report-hero__subtitle { font-family: var(--font); color: #f4ca77; font-weight: 500; font-size: 1.75rem; line-height: 1.2; margin-top: 16px; }
.report-hero__lead { color: #f5eee3; font-weight: 400; font-size: 1.125rem; line-height: 1.7; max-width: 560px; margin-top: 28px; }
.report-hero__cta {
  display: inline-block;
  margin-top: 36px;
  background: var(--report-saffron);
  color: var(--report-ink);
  font-weight: 700;
  font-size: 1rem;
  padding: 16px 24px;
  text-decoration: none;
  transition: background 0.2s ease;
}
.report-hero__cta:hover { background: #f6c15b; }

/* Shared type */
.report-kicker { color: var(--report-red); font-weight: 700; font-size: 0.875rem; letter-spacing: 0.12rem; }
.report-kicker--why { color: #cc1f26; }
.report-kicker--saffron { color: var(--report-saffron); }
.report-kicker--brown { color: #572f1f; }
.report-heading { font-family: var(--font); color: var(--report-ink); font-weight: 600; font-size: 1.5rem; margin-top: 16px; }
.report-heading--why { color: #cc1f26; margin-top: 0; }
.report-lead-text { color: var(--report-muted); font-weight: 400; font-size: 1.125rem; line-height: 1.7; margin-top: 20px; }
.report-lead-text--narrow { max-width: 640px; }
.report-lead-text--brown { color: #49331f; }

/* Why — text on the left, the Symega 20-Years logo lockup on the right */
.report-why { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.report-why__body { max-width: 560px; }
.report-why__media { background: var(--report-paper); border: 1px solid var(--report-line); padding: 32px; }
.report-why__media img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) {
  .report-why { grid-template-columns: 1fr; gap: 32px; }
  .report-why__media { order: 2; }
}

/* What You Can Expect */
.report-expect-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: #c9bba5; border: 1px solid #c9bba5; margin-top: 48px; }
.report-expect-card { padding: 28px; min-height: 240px; }
.report-expect-card--paper { background: var(--report-paper); }
.report-expect-card--ink { background: var(--report-ink); }
.report-expect-card--gold { background: #d7a544; }
.report-expect-card--green { background: #5c714c; }
.report-expect-card__number { display: block; font-family: var(--font); font-size: 1.875rem; }
.report-expect-card--paper .report-expect-card__number { color: var(--report-gold); }
.report-expect-card--ink .report-expect-card__number { color: var(--report-saffron); }
.report-expect-card--gold .report-expect-card__number { color: #6b351e; }
.report-expect-card--green .report-expect-card__number { color: #f3d786; }
.report-expect-card__title { font-family: var(--font); font-weight: 600; font-size: 1.1875rem; margin-top: 36px; }
.report-expect-card--paper .report-expect-card__title { color: var(--report-ink); }
.report-expect-card--ink .report-expect-card__title,
.report-expect-card--green .report-expect-card__title { color: var(--report-paper); }
.report-expect-card--gold .report-expect-card__title { color: var(--report-ink); }
.report-expect-card__body { margin-top: 10px; font-size: 1rem; line-height: 1.6; }
.report-expect-card--paper .report-expect-card__body { color: #5f554b; }
.report-expect-card--ink .report-expect-card__body { color: #f5eee3; }
.report-expect-card--gold .report-expect-card__body { color: #49331f; }
.report-expect-card--green .report-expect-card__body { color: #f2ebdc; }

/* Inside the report — chapter timeline */
.report-timeline {
  position: relative;
  margin-top: 52px;
  padding-left: 8px;
  border-left: 1px solid #c9bba5;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 40px;
}
.report-timeline__item { position: relative; padding: 0 24px 48px 32px; }
.report-timeline__item::before {
  content: ""; position: absolute; left: -0.36rem; top: 1.85rem;
  width: 0.65rem; height: 0.65rem; border-radius: 50%;
  background: var(--report-gold); border: 2px solid var(--report-ivory);
}
.report-timeline__number { color: var(--report-red); font-weight: 700; font-size: 1rem; letter-spacing: 0.08em; }
.report-timeline__title { font-family: var(--font); color: var(--report-ink); font-weight: 600; font-size: 1.1875rem; margin-top: 8px; }
.report-timeline__body { color: #5f554b; font-size: 1rem; line-height: 1.6; margin-top: 12px; }

/* Key takeaways */
.report-takeaways { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 48px; }
.report-takeaway-card { background: var(--report-paper); border: 1px solid var(--report-line); padding: 28px; }
.report-takeaway-card--wide { grid-column: span 2; }
.report-takeaway-card__title { font-weight: 700; font-size: 1.8125rem; letter-spacing: 0.01em; }
.report-takeaway-card:nth-child(1) .report-takeaway-card__title { color: var(--report-saffron); }
.report-takeaway-card:nth-child(2) .report-takeaway-card__title { color: var(--report-ink); }
.report-takeaway-card:nth-child(3) .report-takeaway-card__title,
.report-takeaway-card:nth-child(5) .report-takeaway-card__title { color: #d7a544; }
.report-takeaway-card:nth-child(4) .report-takeaway-card__title { color: #5c714c; }
.report-takeaway-card__subtitle {
  font-family: var(--font); font-weight: 600; font-size: 1.1875rem; margin-top: 12px;
  /* The source design's computed style had this white-on-white (unreadable
     against this card's own paper background) — every other card copy in
     this design is dark-on-light, so that's read as a slip, not intent. */
  color: var(--report-ink);
}
.report-takeaway-card__body { color: var(--report-ink); font-size: 1rem; line-height: 1.6; margin-top: 16px; }

/* Who should download this */
.report-audience { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: start; }
.report-audience__intro { max-width: 420px; }
.report-audience__list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.report-audience__list li { display: flex; align-items: flex-start; gap: 16px; color: var(--report-ink); font-size: 1.125rem; line-height: 1.6; }
.report-audience__list svg { flex-shrink: 0; margin-top: 4px; color: var(--report-red); }

/* Download form */
.report-form { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; max-width: 1040px; }
.report-form__card { background: var(--report-paper); padding: 32px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18); }
.report-form__cover { display: block; width: 100%; max-width: 340px; height: auto; margin-top: 28px; border-radius: 6px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22); }
.report-form__fields { display: grid; gap: 20px; }
.report-field label { display: block; color: var(--report-ink); font-weight: 600; font-size: 1rem; margin-bottom: 8px; }
.report-field__input {
  width: 100%; border: 1px solid #bfb09c; border-radius: 4px;
  background: var(--report-paper); padding: 13px 14px; color: var(--report-ink);
  font-family: inherit; font-size: 1rem; outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.report-field__input:focus { border-color: var(--report-red); box-shadow: 0 0 0 3px rgba(157, 61, 45, 0.18); }
.report-field__input.is-invalid { border-color: #a23024; }
.report-form__error { margin-top: 16px; color: #a23024; font-weight: 600; }
.report-form__submit {
  display: block; width: 100%; margin-top: 28px; border: none; cursor: pointer;
  background: var(--report-red); color: var(--report-paper);
  font-weight: 700; font-size: 1rem; padding: 16px; transition: background 0.2s ease;
}
.report-form__submit:hover { background: #7f2f23; }
.report-form__privacy { margin-top: 16px; color: #685b4f; font-size: 0.875rem; line-height: 1.5; }
.report-form__success { text-align: center; padding: 32px 0; }
.report-form__success svg { margin: 0 auto; color: #5c714c; }
.report-form__success h3 { font-family: var(--font); color: var(--report-ink); font-weight: 600; font-size: 1.1875rem; margin-top: 16px; }
.report-form__success p { color: #5f554b; line-height: 1.6; margin-top: 12px; }
.report-form__success a { color: var(--report-red); font-weight: 600; }

/* About */
/* About — text on the left, the "20 Years" emblem on the right */
.report-about { display: grid; grid-template-columns: 7fr 3fr; gap: 56px; align-items: center; border-top: 1px solid var(--report-line); padding-top: 56px; }
.report-about__body { max-width: none; }
.report-about__media { max-width: 220px; margin-inline: auto; }
.report-about__media img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) {
  .report-about { grid-template-columns: 1fr; gap: 32px; }
  .report-about__media { order: 2; max-width: 160px; }
}

@media (max-width: 900px) {
  .report-expect-grid { grid-template-columns: repeat(2, 1fr); }
  .report-timeline { grid-template-columns: 1fr; }
  .report-takeaways { grid-template-columns: 1fr; }
  .report-takeaway-card--wide { grid-column: span 1; }
  .report-audience { grid-template-columns: 1fr; }
  .report-form { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 600px) {
  .report-hero__title { font-size: 1.6rem; }
  .report-hero__subtitle { font-size: 1.3rem; }
  .report-expect-grid { grid-template-columns: 1fr; }
}

/* Scroll-reveal: each section fades/rises into place as it enters the
   viewport, with its cards staggering in slightly after. The "armed" class
   is added by JS only — plain CSS never sets opacity:0 on its own, so a
   visitor with JS disabled (or a failed script load) still sees the full
   page immediately instead of a permanently-invisible section. */
.report-reveal.is-armed {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.report-reveal.is-armed.is-visible { opacity: 1; transform: translateY(0); }
.report-reveal.is-armed .report-expect-card,
.report-reveal.is-armed .report-timeline__item,
.report-reveal.is-armed .report-takeaway-card,
.report-reveal.is-armed .report-audience__list li {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.report-reveal.is-armed.is-visible .report-expect-card,
.report-reveal.is-armed.is-visible .report-timeline__item,
.report-reveal.is-armed.is-visible .report-takeaway-card,
.report-reveal.is-armed.is-visible .report-audience__list li {
  opacity: 1;
  transform: translateY(0);
}
.report-reveal .report-expect-card:nth-child(1),
.report-reveal .report-timeline__item:nth-child(1),
.report-reveal .report-takeaway-card:nth-child(1),
.report-reveal .report-audience__list li:nth-child(1) { transition-delay: 0.05s; }
.report-reveal .report-expect-card:nth-child(2),
.report-reveal .report-timeline__item:nth-child(2),
.report-reveal .report-takeaway-card:nth-child(2),
.report-reveal .report-audience__list li:nth-child(2) { transition-delay: 0.12s; }
.report-reveal .report-expect-card:nth-child(3),
.report-reveal .report-timeline__item:nth-child(3),
.report-reveal .report-takeaway-card:nth-child(3),
.report-reveal .report-audience__list li:nth-child(3) { transition-delay: 0.19s; }
.report-reveal .report-expect-card:nth-child(4),
.report-reveal .report-timeline__item:nth-child(4),
.report-reveal .report-takeaway-card:nth-child(4),
.report-reveal .report-audience__list li:nth-child(4) { transition-delay: 0.26s; }
.report-reveal .report-timeline__item:nth-child(5),
.report-reveal .report-takeaway-card:nth-child(5),
.report-reveal .report-audience__list li:nth-child(5) { transition-delay: 0.33s; }
.report-reveal .report-timeline__item:nth-child(6) { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  .report *, .report *::before, .report *::after { animation: none !important; transition: none !important; }
  .report-reveal.is-armed { opacity: 1; transform: none; }
}

/* ==========================================================================
   Customer registration forms
   ========================================================================== */
.registration-form { padding-block: 150px clamp(48px, 7vw, 96px); background: var(--c-bg-soft); }
.registration-form .container { max-width: 960px; }
.registration-form__heading { margin-bottom: 8px; }
.registration-form__intro { color: var(--c-gray); margin-bottom: 32px; max-width: 640px; }
.registration-form__messages { list-style: none; padding: 14px 18px; margin: 0 0 24px; border-radius: var(--radius-md); background: #FDECEC; color: var(--c-red); }
.registration-form__form { display: flex; flex-direction: column; gap: 24px; }
.registration-form__section {
  background: var(--c-white);
  border: 1px solid #E6E6EA;
  border-radius: var(--radius-md);
  padding: clamp(20px, 3vw, 32px);
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
}
.registration-form__section > legend {
  grid-column: 1 / -1;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--c-red);
  padding: 0 0 8px;
  margin-bottom: 4px;
  border-bottom: 2px solid var(--c-orange);
  width: 100%;
}
.registration-form__section > label:not(.registration-form__check) { grid-column: span 1; }
.registration-form__section > label:not(.registration-form__check) { display: flex; flex-direction: column; gap: 6px; font-size: 0.95rem; color: var(--c-ink); font-weight: 500; }
.registration-form__section > label input[type="text"],
.registration-form__section > label input[type="url"],
.registration-form__section > label input[type="email"],
.registration-form__section > label input[type="file"],
.registration-form__section > label select,
.registration-form__section > label textarea {
  width: 100%;
  font: inherit;
  font-weight: 400;
  padding: 11px 14px;
  border: 1px solid #D4D4DA;
  border-radius: 10px;
  background: var(--c-white);
  color: var(--c-ink);
}
.registration-form__section > label input:focus,
.registration-form__section > label select:focus,
.registration-form__section > label textarea:focus { outline: 2px solid var(--c-orange); outline-offset: 1px; border-color: transparent; }
.registration-form__section > label textarea { resize: vertical; min-height: 96px; }
.registration-form__group-label { grid-column: 1 / -1; font-weight: 600; color: var(--c-ink); margin: 6px 0 -6px; }
.registration-form__check {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.95rem; color: var(--c-gray); cursor: pointer;
}
.registration-form__check input { width: 18px; height: 18px; accent-color: var(--c-red); flex: none; margin: 0; }
.registration-form__check:has(input:checked) { color: var(--c-ink); }
.registration-form__section input[type="radio"] { accent-color: var(--c-red); }
.registration-form__section .registration-form__check:has(input[type="radio"]) { margin-right: 12px; }
.registration-form .btn-pill { align-self: flex-start; min-width: 200px; justify-content: center; }
@media (max-width: 720px) {
  .registration-form { padding-top: 90px; }
  .registration-form__section { grid-template-columns: 1fr; }
  .registration-form .btn-pill { align-self: stretch; }
}
.registration-form__phone { grid-column: span 1; display: grid; grid-template-columns: 1fr; gap: 6px; font-size: 0.95rem; color: var(--c-ink); font-weight: 500; }
.registration-form__phone-label { font-weight: 500; }
.registration-form__phone > div, .registration-form__phone { position: relative; }
.registration-form__phone select, .registration-form__phone input {
  font: inherit; font-weight: 400; padding: 11px 14px; border: 1px solid #D4D4DA; border-radius: 10px; background: var(--c-white); color: var(--c-ink); min-width: 0;
}
.registration-form__phone select:focus, .registration-form__phone input:focus { outline: 2px solid var(--c-orange); outline-offset: 1px; border-color: transparent; }
.registration-form__phone { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); }
.registration-form__phone-label { grid-column: 1 / -1; }
.registration-form__required { color: var(--c-red); margin-left: 2px; }
.registration-form__section > label span:first-child { display: block; }
.registration-form__group-wrapper { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 12px; }
.registration-form__group-label { margin: 0; font-size: 0.95rem; color: var(--c-ink); font-weight: 500; }
.registration-form__checkboxes, .registration-form__radios { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 24px; }
.registration-form__phone { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; gap: 6px; font-size: 0.95rem; color: var(--c-ink); font-weight: 500; }
.registration-form__phone > span { display: block; margin-bottom: 2px; }
.registration-form__phone-inputs { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); gap: 12px; }
.registration-form__country-code, .registration-form__mobile-input { font: inherit; font-weight: 400; padding: 11px 14px; border: 1px solid #D4D4DA; border-radius: 10px; background: var(--c-white); color: var(--c-ink); }
.registration-form__country-code:focus, .registration-form__mobile-input:focus { outline: 2px solid var(--c-orange); outline-offset: 1px; border-color: transparent; }
.registration-form__phone .registration-form__country-code { width: 100%; max-width: 140px; }
.registration-form__phone .registration-form__mobile-input { width: 100%; }
.registration-form__phone { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); grid-template-rows: auto auto; gap: 6px 12px; }
.registration-form__phone > span { grid-column: 1 / -1; }
.registration-form__file-inputs { display: flex; flex-direction: column; gap: 12px; }
.registration-form__file-inputs label { grid-column: span 1; display: flex; flex-direction: column; gap: 6px; font-size: 0.95rem; color: var(--c-ink); font-weight: 500; }
.registration-form .content-section__heading { margin-bottom: 28px; }
.registration-thanks { padding-block: 150px clamp(48px, 7vw, 96px); }
@media (max-width: 720px) { .registration-thanks { padding-top: 90px; } }
.accordion__item ul { list-style: disc; padding-left: 22px; margin: 14px 0 0; display: flex; flex-direction: column; gap: 8px; }
.accordion__item li { display: list-item; color: var(--c-gray); font-size: var(--fs-small); line-height: 1.6; }
.accordion__item li::marker { color: var(--c-red); }
#sourcing-backward-integration .strip-card__detail { font-weight: 400; }
#sourcing-backward-integration .strip-card__detail strong {
  display: block;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding-bottom: 6px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
#sourcing-backward-integration .strip-card__detail p { font-weight: 400; }
#sourcing-backward-integration .sourcing-item { flex: 1 1 0%; min-width: 0; display: flex; flex-direction: column; transition: flex 0.4s ease; }
#sourcing-backward-integration .sourcing-item:hover,
#sourcing-backward-integration .sourcing-item:focus-within { flex: 3 1 0%; }
#sourcing-backward-integration .strip-card,
#sourcing-backward-integration .strip-card:hover,
#sourcing-backward-integration .strip-card:focus-visible { flex: none; width: 100%; height: 560px; }
#sourcing-backward-integration .sourcing-item__title { margin: 14px 4px 0; color: var(--c-red); font-size: var(--fs-h4); font-weight: 600; }
@media (max-width: 1100px) {
  #sourcing-backward-integration .sourcing-item, #sourcing-backward-integration .sourcing-item:hover { flex: 0 0 calc((100% - 8px) / 3); }
  #sourcing-backward-integration .strip-card { height: 400px; }
}
@media (max-width: 600px) {
  #sourcing-backward-integration .sourcing-item, #sourcing-backward-integration .sourcing-item:hover { flex: 0 0 calc((100% - 4px) / 2); }
  #sourcing-backward-integration .strip-card { height: 340px; }
}
.solution-highlights .strip-card__overlay,
.solution-highlights .strip-card__label,
.solution-highlights .strip-card__detail { text-align: left; }
.solution-highlights .strip-card__detail p { font-weight: 400; }
/* Applications overview only. */
.page-applications .page-hero {
  min-height: 650px !important;
  height: 650px !important;
  max-height: 650px !important;
}

/* ==========================================================================
   Floating enquiry button + panel (every page, via base.html)
   ========================================================================== */
.enquiry-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 900;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border: 0; border-radius: 999px;
  background: var(--c-red); color: var(--c-white);
  font: inherit; font-weight: 600; font-size: 0.95rem;
  box-shadow: 0 8px 24px rgba(215, 25, 32, 0.35);
  cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.enquiry-fab:hover, .enquiry-fab:focus-visible { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(215, 25, 32, 0.45); outline: none; }
.enquiry-panel {
  position: fixed; right: 24px; bottom: 90px; z-index: 901;
  width: min(420px, calc(100vw - 32px)); max-height: min(78vh, 720px);
  display: flex; flex-direction: column;
  background: var(--c-white); border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}
.enquiry-panel[hidden] { display: none; }
.enquiry-panel__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; background: var(--c-orange); color: var(--c-white); }
.enquiry-panel__head h3 { margin: 0; font-size: 1.15rem; font-weight: 600; color: var(--c-white); }
.enquiry-panel__close { background: none; border: 0; color: var(--c-white); font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.enquiry-panel__success { margin: 16px 20px 0; padding: 12px 14px; border-radius: 10px; background: #E8F6EC; color: #1F6B36; font-size: 0.92rem; }
.enquiry-panel__success[hidden] { display: none; }
.enquiry-panel__form { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.enquiry-panel__form input[type="text"],
.enquiry-panel__form input[type="email"],
.enquiry-panel__form input[type="tel"],
.enquiry-panel__form textarea {
  width: 100%; font: inherit; font-size: 0.95rem; padding: 10px 12px;
  border: 1px solid #D4D4DA; border-radius: 10px; background: var(--c-white); color: var(--c-ink);
}
.enquiry-panel__form input:focus, .enquiry-panel__form textarea:focus { outline: 2px solid var(--c-orange); outline-offset: 1px; border-color: transparent; }
.enquiry-panel__form textarea { resize: vertical; min-height: 84px; flex: none; }
.enquiry-panel__label { margin: 6px 0 0; font-weight: 600; font-size: 0.9rem; color: var(--c-ink); }
.enquiry-panel__checks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.enquiry-panel__checks label { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--c-gray); cursor: pointer; }
.enquiry-panel__checks input { width: 16px; height: 16px; accent-color: var(--c-red); margin: 0; flex: none; }
.enquiry-panel__form .btn-pill { align-self: stretch; justify-content: center; }
@media (max-width: 480px) {
  .enquiry-fab { right: 16px; bottom: 16px; }
  .enquiry-panel { right: 16px; left: 16px; width: auto; bottom: 80px; }
  .enquiry-panel__checks { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Legal / terms documents (standalone, direct-link-only pages)
   ========================================================================== */
.legal-doc { padding-block: 150px clamp(48px, 7vw, 96px); background: var(--c-white); }
.legal-doc__container { max-width: 820px; }
.legal-doc__title { font-size: var(--fs-h2); font-weight: 600; color: var(--c-red); margin-bottom: 36px; }
.legal-doc__list { counter-reset: legal-clause; list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 22px; }
.legal-doc__list > li { counter-increment: legal-clause; position: relative; padding-left: 40px; }
.legal-doc__list > li::before {
  content: counter(legal-clause) ".";
  position: absolute; left: 0; top: 0;
  font-weight: 700; color: var(--c-red);
}
.legal-doc__list > li > p { color: var(--c-ink); line-height: 1.7; font-size: var(--fs-body); }
.legal-doc__list > li > p strong { color: var(--c-red); }
.legal-doc__list ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.legal-doc__list ul li { position: relative; padding-left: 20px; color: var(--c-gray); line-height: 1.6; font-size: var(--fs-small); }
.legal-doc__list ul li::before { content: "–"; position: absolute; left: 0; color: var(--c-gray-light); }
@media (max-width: 720px) {
  .legal-doc { padding-top: 90px; }
}