/* ==========================================================================
   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 { opacity: 0.65; }
.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 { color: var(--c-red) !important; 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; }

.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);
}
.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); }
.market-insight__arrows { display: flex; gap: 14px; margin-top: 34px; }
.market-insight__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;
}
.market-insight__arrows .icon-btn:hover { background: var(--c-red); color: var(--c-white); border-color: var(--c-red); }
.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); }

.market-insight__cards {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.market-insight__cards::-webkit-scrollbar { display: none; }
.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-gray);
}
.advantage__eyebrow .logo__word { font-size: 1em; }
.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; }
  .nav-toggle { display: flex; }
  .nav-menu {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(80vw, 340px);
    height: 100vh;
    background: var(--c-white);
    flex-direction: column;
    align-items: flex-start;
    padding: 100px 28px 40px;
    gap: 22px;
    translate: 100% 0;
    transition: translate 0.3s ease;
    box-shadow: -12px 0 32px rgba(0,0,0,0.14);
  }
  .nav-menu.is-open { translate: 0 0; }
  .nav-menu > li > a, .dropdown-toggle { color: var(--c-ink); }
  .dropdown { position: static; box-shadow: none; opacity: 1; visibility: visible; translate: 0; display: none; }
  .dropdown__inner { padding: 12px 0 12px 12px; max-width: none; margin-inline: 0; }
  .has-dropdown.is-open .dropdown { display: block; }
  .site-header { background: var(--c-white); position: fixed; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
  .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 */
  .nav-menu > li.nav-menu__utility-group { display: flex; flex-direction: column; gap: 18px; margin-top: 10px; padding-top: 22px; border-top: 1px solid #ececec; width: 100%; }
  .nav-menu__utility-group a { color: var(--c-ink); font-weight: 600; }

  .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 — 50px taller than every other page's hero banner. */
.page-about-us .page-hero {
  min-height: 470px;
  height: calc(46vh + 50px);
  max-height: 710px;
}
.page-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.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; }
.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; }
/* Fills its whole grid column instead of being capped narrower and centered
   within it — that left a gap on both sides so the image never actually
   reached the container's edge on either side of the zigzag (matches
   symega.com/our-solutions/, where the image runs flush to the same
   container edge the rest of the page content aligns to). */
.listing-card__media { aspect-ratio: 3 / 2; width: 100%; 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: 70px; }
.content-block__row p { max-width: 900px; font-size: var(--fs-lead-lg); color: var(--c-gray); }

.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; }
/* Solid orange block behind the title/description instead of relying on the
   photo showing through — against a bright photo, white text on a dark
   gradient alone wasn't reliably readable. */
.strip-card__overlay { position: relative; z-index: 1; padding: 16px 18px; width: 100%; background: var(--c-orange); }
.strip-card__label { display: block; color: var(--c-white); font-weight: 600; font-size: var(--fs-small); white-space: nowrap; }
.strip-card__detail {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.82rem;
  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: 500; }
/* 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: 0.76rem;
  line-height: 1.45;
  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);
}

/* 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: center; 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; }
.feature-card__overlay-text strong { display: block; font-weight: 700; margin-bottom: 4px; }
.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; }
.segment-intro__media { aspect-ratio: 4 / 3; 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: center; 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: 640px; margin-inline: auto; margin-top: 12px; color: var(--c-gray); }

/* 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: left; }
.solution-highlight-group:first-of-type { margin-top: 32px; }
.solution-highlight-group__heading { font-size: var(--fs-h4); 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; }

.values-heading { text-align: center; color: var(--c-red); font-size: var(--fs-h3); font-weight: 600; margin: 50px 0 36px; }
.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--puzzle { color: var(--c-sweet); }
.value-card__icon--bulb { color: #2f8fd1; }
.value-card__icon--people { color: var(--c-wellness); }
.value-card h4 { margin-top: 14px; font-weight: 600; color: var(--c-ink); font-size: var(--fs-h4); }
.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;
}
.article-block--image img { width: 100%; border-radius: 16px; display: block; }
.article-block--image figcaption { margin-top: 10px; font-size: var(--fs-small); color: var(--c-gray-light); text-align: center; }

/* Image + Text — photo left, heading/paragraph right, matching the live WordPress
   site's side-by-side "chart + commentary" callouts. */
.article-block--split {
  display: grid;
  grid-template-columns: minmax(200px, 320px) 1fr;
  gap: 32px;
  align-items: center;
  margin-inline: 0;
}
.article-block__split-media { margin: 0; }
.article-block__split-media img { width: 100%; border-radius: 16px; display: block; }
.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; }
@media (max-width: 720px) {
  .article-block--split { grid-template-columns: 1fr; }
}
.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); }
.article-block__video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.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; }
.necol-section--soft { background: var(--c-bg-soft); }
.necol-section--center { text-align: center; }
.necol-section__lead { max-width: 720px; margin: 20px auto 0; color: var(--c-gray); line-height: 1.6; }
/* .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); }

/* --- Header --- */
.necol-header { background: var(--c-white); position: sticky; top: 0; z-index: 50; box-shadow: 0 1px 0 #ececec; }
.necol-nav { display: flex; align-items: center; justify-content: space-between; padding-block: 16px; }
.necol-nav__logo img { height: 22px; width: auto; display: block; }
.necol-nav__menu { display: flex; flex-wrap: wrap; gap: 32px; list-style: none; }
.necol-nav__menu a { font-size: 0.9rem; font-weight: 500; color: var(--c-ink); text-decoration: none; }
.necol-nav__menu a:hover { color: var(--c-red); }

/* --- Hero: full-bleed photo, centered headline, no panel/rounding --- */
.necol-hero { position: relative; height: 520px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #223; }
.necol-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.necol-hero__scrim { position: absolute; inset: 0; background: rgba(20, 20, 20, 0.32); }
.necol-hero__content { position: relative; text-align: center; color: var(--c-white); padding-inline: 24px; }
.necol-hero__content h1 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); font-weight: 600; max-width: 720px; margin-inline: auto; line-height: 1.3; }
@media (max-width: 620px) { .necol-hero { height: 400px; } }

/* --- About: intro paragraph(s) + 4-tab strip, each tab its own text + a
   row of small photo cards (1-4 depending on the tab) --- */
.necol-section__lead p { text-align: left; max-width: 760px; margin: 0 auto 14px; }
.necol-tabs { margin-top: 44px; }
.necol-tabs__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 40px; }
.necol-tabs__btn { padding: 12px 22px; border-radius: 999px; background: var(--c-white); border: 1px solid var(--c-gray-light); font-family: var(--font); font-size: 0.9rem; font-weight: 500; color: var(--c-gray); cursor: pointer; }
.necol-tabs__btn.is-active { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-white); }
.necol-tabs__panel { display: none; }
.necol-tabs__panel.is-active { display: block; }
.necol-tabs__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; 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-size: var(--fs-h3); font-weight: 700; color: var(--c-ink); margin-bottom: 10px; }
.necol-tabs__logo { display: block; height: 34px; width: auto; margin: 4px 0 14px; }
.necol-tabs__text p { color: var(--c-gray); line-height: 1.6; margin-bottom: 12px; }
.necol-tabs__cards-label { font-size: 0.82rem; font-weight: 700; color: var(--c-ink); margin-bottom: 14px; }
.necol-tabs__cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.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; }
.necol-tabs__card {
  position: relative; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden;
  background-size: cover; background-position: center; background-color: #ddd;
  display: flex; align-items: flex-end;
}
.necol-tabs__cards-grid--count-1 .necol-tabs__card,
.necol-tabs__cards-grid--count-2 .necol-tabs__card { aspect-ratio: 4 / 3; }
.necol-tabs__card-caption { display: block; width: 100%; padding: 10px 12px; font-size: 0.76rem; font-weight: 600; line-height: 1.3; color: var(--c-white); }
@media (max-width: 900px) {
  .necol-tabs__grid { grid-template-columns: 1fr; }
  .necol-tabs__cards-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- The NECOL Advantage: a row of portrait photos that widens the hovered
   one and reveals a tinted caption band sliding up from its bottom — the
   others just stay plain photos, no permanent tint, matching the live page
   (default state shows only the unmodified photos). --- */
.necol-advantage-grid { display: flex; gap: 14px; margin-top: 40px; }
.necol-advantage-card {
  position: relative; flex: 1; height: 460px; border-radius: 18px; overflow: hidden;
  background-size: cover; background-position: center; background-color: #ddd;
  transition: flex 0.45s ease;
}
.necol-advantage-card:hover { flex: 2.4; }
.necol-advantage-card__overlay {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 1;
  background: var(--necol-tint, #000); color: var(--c-white);
  padding: 26px 28px 30px; overflow: hidden;
  transform: translateY(100%); opacity: 0; transition: transform 0.35s ease, opacity 0.3s ease;
}
.necol-advantage-card:hover .necol-advantage-card__overlay { transform: translateY(0); opacity: 1; }
.necol-advantage-card__swirl { position: absolute; left: 20px; bottom: 14px; opacity: 0.35; }
.necol-advantage-card__title, .necol-advantage-card__desc { position: relative; display: block; z-index: 1; }
.necol-advantage-card__title { font-weight: 700; font-size: 1.05rem; margin-bottom: 8px; }
.necol-advantage-card__desc { font-size: 0.85rem; line-height: 1.5; }
.necol-advantage__cta { text-align: center; margin-top: 36px; }
@media (max-width: 900px) {
  .necol-advantage-grid { flex-wrap: wrap; }
  .necol-advantage-card { flex-basis: calc(50% - 7px); height: 320px; }
  .necol-advantage-card:hover { flex: none; }
  .necol-advantage-card__overlay { transform: none; opacity: 1; position: static; background: none; color: var(--c-ink); padding: 12px 2px; }
  .necol-advantage-card__swirl { display: none; }
}

/* --- Shade Families & Gradients explorer --- */
.necol-shades__header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; text-align: left; }
.necol-shades__title { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.necol-shades__logo { height: 26px; width: auto; }
.necol-shades__title h2 { margin: 0; }
.necol-shades__lead { margin: 0; max-width: 360px; color: var(--c-gray); font-size: 0.92rem; line-height: 1.5; text-align: left; }
.necol-shade-explorer { margin-top: 40px; }
.necol-shade-explorer__cats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.necol-shade-cat { padding: 10px 20px; border-radius: 999px; background: var(--c-white); border: 1px solid var(--c-gray-light); font-family: var(--font); font-size: 0.9rem; font-weight: 500; color: var(--c-gray); cursor: pointer; }
.necol-shade-cat.is-active { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-white); }
.necol-shade-panel { display: none; }
.necol-shade-panel.is-active { display: grid; grid-template-columns: auto 1fr; gap: 48px; align-items: start; }
/* A real interactive colour wheel (matching the Figma spec's actual "Color
   Wheel Necol 3D 2" graphic + surrounding shade markers), not a flat row of
   pill buttons — each shade sits at its own point around the ring, and
   "Pick a colour from the color wheel..." (the section's own intro copy)
   now literally describes what's here. rotate()+translateY() places each
   marker at an even angle around the circle; the matching counter-rotation
   on the dot/label keeps their own content upright instead of tilting with
   the angle they're positioned at. */
.necol-wheel { position: relative; width: 460px; height: 460px; max-width: 90vw; flex: none; }
/* The conic-gradient itself (set inline, per-category, from each shade's
   swatch_hex) fills this whole circle; the smaller white circle punched on
   top of it is what turns that filled disc into a ring/donut. */
.necol-wheel__ring { position: absolute; inset: 0; pointer-events: none; border-radius: 50%; }
.necol-wheel__ring-hole { position: absolute; inset: 16%; background: var(--c-white); border-radius: 50%; }
/* The product photo shown inside the ring for the selected shade (e.g. a
   glass of red drink for Beverages → Red) — JS swaps its src and toggles
   [hidden] on swatch click; it's absent entirely for shades with none. */
.necol-wheel__product { position: absolute; inset: 14%; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.necol-wheel__product img { max-width: 100%; max-height: 100%; object-fit: contain; }
.necol-wheel__markers { position: absolute; inset: 0; }
/* +270deg starting offset — the live wheel doesn't start its first shade at
   12 o'clock, it starts at 9 o'clock (confirmed directly: Beverages' first
   shade, Red, sits at the west point of the ring, not the top) — matched
   here rather than changing each category's own DB order, since the order
   still needs to put the actually-intended default shade first (the one
   shown active on page load) regardless of where it then lands visually. */
.necol-shade-swatch {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -16px 0 0 -16px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transform: rotate(calc(270deg + 360deg / var(--necol-count, 8) * var(--necol-i, 0))) translateY(-192px);
}
/* Matches symega.com's actual wheel exactly: it does NOT mark every shade
   at once with its own dot — only the current selection gets a marker at
   all, a plain unfilled white ring sitting right on the coloured band
   itself (the band's own colour shows through the hollow centre), not a
   colour-filled dot floating outside the ring. Every other position stays
   fully invisible (not just a quieter dot) until it becomes the selection —
   confirmed directly against the live wheel, not a guess. */
.necol-shade-swatch__dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: transparent;
  border: 4px solid var(--c-white);
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transform: rotate(calc(-360deg / var(--necol-count, 8) * var(--necol-i, 0))) scale(0.6);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.necol-shade-swatch:hover .necol-shade-swatch__dot { opacity: 0.55; }
.necol-shade-swatch.is-active .necol-shade-swatch__dot {
  opacity: 1;
  transform: rotate(calc(-360deg / var(--necol-count, 8) * var(--necol-i, 0))) scale(1);
}
/* No floating label on the wheel itself on the live site — the shade name
   only ever appears in the detail panel beside it. */
.necol-shade-swatch__label { display: none; }
@media (max-width: 600px) {
  .necol-wheel { width: 300px; height: 300px; margin-inline: auto; }
  .necol-shade-swatch { transform: rotate(calc(270deg + 360deg / var(--necol-count, 8) * var(--necol-i, 0))) translateY(-124px); }
}

/* --- Shade detail panel: category label, colour name, Color Information /
   Technical Performance Insight sub-tabs, swatch chips, photo-card sources,
   stability parameters, format badges, Request Sample CTA --- */
.necol-shade-detail-wrap { text-align: left; }
.necol-shade-detail { display: none; }
.necol-shade-detail.is-active { display: block; }
.necol-shade-detail__cat { font-size: 0.85rem; color: var(--c-gray); margin-bottom: 4px; }
.necol-shade-detail h3 { font-size: 1.6rem; font-weight: 700; margin-bottom: 18px; }
.necol-shade-subtabs { display: flex; gap: 24px; border-bottom: 1px solid #ececec; margin-bottom: 22px; }
.necol-shade-subtab {
  background: none; border: none; padding: 0 0 12px; margin-bottom: -1px;
  font-family: var(--font); font-size: 0.9rem; font-weight: 600; color: var(--c-gray);
  border-bottom: 2px solid transparent; cursor: pointer;
}
.necol-shade-subtab.is-active { color: var(--c-ink); border-bottom-color: var(--c-ink); }
.necol-shade-subpanel { display: none; }
.necol-shade-subpanel.is-active { display: block; }
.necol-shade-detail__label { font-size: 0.8rem; color: var(--c-gray); margin-bottom: 10px; }
.necol-shade-swatchrow { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.necol-shade-swatchrow__chip { display: block; width: 64px; height: 40px; border-radius: 6px; }
.necol-shade-sources { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.necol-shade-sources__card {
  position: relative; width: 110px; height: 100px; border-radius: 10px; overflow: hidden;
  background-size: cover; background-position: center; background-color: #ddd;
  display: flex; align-items: flex-end;
}
.necol-shade-sources__name { display: block; width: 100%; padding: 5px 8px; font-size: 0.7rem; font-weight: 600; color: var(--c-white); text-align: center; }
.necol-shade-detail__line { font-size: 0.9rem; color: var(--c-ink); margin-bottom: 6px; line-height: 1.5; }
.necol-shade-detail__line strong { display: block; font-size: 0.8rem; color: var(--c-gray); font-weight: 400; margin-bottom: 2px; }
.necol-shade-detail__line--ideal { margin-bottom: 24px; }
.necol-shade-detail__block { margin-bottom: 20px; }
.necol-shade-detail__block h4 { font-size: 1rem; font-weight: 700; color: var(--c-ink); margin-bottom: 14px; }
.necol-shade-detail__block p { font-size: 0.9rem; color: var(--c-gray); line-height: 1.6; }
.necol-shade-detail__cta { display: inline-block; margin-top: 6px; }
.necol-shade-stability { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; }
.necol-shade-stability__item { display: flex; align-items: center; gap: 10px; }
.necol-shade-stability__item svg { flex: none; }
.necol-shade-stability__item span { display: flex; flex-direction: column; }
.necol-shade-stability__item em { font-style: normal; font-size: 0.78rem; color: var(--c-gray); }
.necol-shade-stability__item strong { font-size: 0.92rem; color: var(--c-ink); font-weight: 700; }
.necol-shade-formats { display: flex; gap: 12px; }
.necol-shade-formats__pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--c-gray-light); font-size: 0.85rem; color: var(--c-ink); }
@media (max-width: 900px) {
  .necol-shade-panel.is-active { display: block; }
  .necol-shade-stability { grid-template-columns: 1fr; }
}

/* --- Custom Blends CTA band: plain white, text (+ optional photo) --- */
/* Decorative full-bleed rainbow-ribbon divider between the Shade Families
   section and Custom Blends — matches the live page's own supergraphic
   exactly (same asset), which was missing entirely here before. */
.necol-supergraphic { overflow: hidden; line-height: 0; }
.necol-supergraphic img { display: block; width: 100%; height: auto; }

.necol-blends { padding-block: 70px; background: var(--c-white); color: var(--c-ink); }
.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: center; }
.necol-blends__grid--no-image .necol-blends__text p { margin-inline: auto; }
.necol-blends__text h2 { font-size: var(--fs-h2); font-weight: 700; margin-bottom: 16px; }
.necol-blends__text p { color: var(--c-gray); line-height: 1.6; margin-bottom: 24px; max-width: 480px; }
.necol-blends__image { aspect-ratio: 4 / 3; border-radius: 16px; background-size: cover; background-position: center; background-color: #333; }
.btn-pill--necol { display: inline-block; background: var(--c-ink); color: var(--c-white); border: none; border-radius: 999px; padding: 14px 30px; font-family: var(--font); font-size: 0.9rem; font-weight: 600; text-decoration: none; cursor: pointer; }
.btn-pill--necol:hover { opacity: 0.85; }

/* --- Request Sample form --- */
.necol-form { max-width: 760px; margin: 36px auto 0; text-align: left; display: flex; flex-direction: column; gap: 20px; }
.necol-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.necol-form__field { display: flex; flex-direction: column; gap: 8px; }
.necol-form__field label { font-size: 0.9rem; color: var(--c-ink); font-weight: 500; }
.necol-form__field input, .necol-form__field textarea, .necol-form__field select {
  border: 1px solid var(--c-ink); border-radius: 8px; padding: 10px 14px;
  font-family: var(--font); font-size: 0.95rem; background: var(--c-white); color: var(--c-ink);
}
.necol-form__field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23161616' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 34px;
}
.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 { min-height: 92px; resize: vertical; }
.necol-form .btn-pill--necol { align-self: center; }

/* --- FAQ: colour-swatch photo alongside the accordion --- */
.necol-faq__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; margin-top: 40px; text-align: left; }
.necol-faq__image { aspect-ratio: 4 / 3; border-radius: 16px; background-size: cover; background-position: center; background-color: #ddd; }
.necol-faq__accordion { }
.necol-faq__cta { margin-top: 32px; }
@media (max-width: 900px) {
  .necol-faq__grid { grid-template-columns: 1fr; }
}

/* --- Footer supergraphic band (above the NECOL footer) --- */
.necol-footer-band { padding-block: 8px 0; overflow: hidden; }
.necol-footer-band img { display: block; width: 100%; height: auto; }
.necol-footer-band__tagline { display: none; }
.necol-footer { background: var(--c-white); padding-block: 40px 0; }
.necol-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; padding-bottom: 40px; }
.necol-footer__logo img { height: 24px; width: auto; }
.necol-footer__contact h4, .necol-footer__social h4 { font-size: 0.95rem; font-weight: 700; margin-bottom: 12px; }
.necol-footer__contact p { font-size: 0.85rem; color: var(--c-gray); line-height: 1.6; margin-bottom: 6px; }
.necol-footer__contact a { color: var(--c-gray); }
.necol-footer__social-icons { display: flex; gap: 14px; }
.necol-footer__social-icons a { color: var(--c-ink); }
.necol-footer__bottom { border-top: 1px solid #ececec; padding-block: 18px; }
.necol-footer__bottom-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 0.8rem; color: var(--c-gray); }

@media (max-width: 940px) {
  .necol-tabs__grid { grid-template-columns: 1fr; }
  .necol-blends__grid { grid-template-columns: 1fr; }
  .necol-form__row { grid-template-columns: 1fr; }
  .necol-shade-panel.is-active { grid-template-columns: 1fr; justify-items: center; }
  .necol-shades__header { text-align: center; justify-content: center; }
  .necol-shades__lead { max-width: 520px; text-align: center; }
}
@media (max-width: 940px) {
  .necol-nav__menu {
    position: fixed; inset: 0 0 0 auto; width: min(80vw, 340px); height: 100vh;
    background: var(--c-white); flex-direction: column; align-items: flex-start;
    padding: 100px 28px 40px; gap: 22px; 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-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; }
}