/* ============================================================
   TENEO Product page (e.g. Sustainable Solutions)
   Simple, self-contained styles. Classes are prefixed "tp-".
   Breakpoints are declared once each at the bottom.
   ============================================================ */

.teneo-product {
  background: #fff;
  color: #1a1a1a;
  /* Accent colour — green by default (Sustainable Solutions) */
  --tp-accent: #6cbf2f;
  --tp-accent-dark: #2f6b12;
  --tp-glow: rgba(80, 170, 20, 0.45);
}

/* Color & Effects: same layout, purple accent (backgrounds come from ACF vars) */
.color-and-effects {
  --tp-accent: #7a32f0;
  --tp-accent-dark: #4b00dd;
  --tp-glow: rgba(106, 44, 245, 0.45);
}

/* Functional Additives: same layout, teal accent (backgrounds come from ACF vars) */
.functional-additives {
  --tp-accent: #00bcd4;
  --tp-accent-dark: #009aaf;
  --tp-glow: rgba(0, 154, 175, 0.45);
}

/* Headings use the site's Acumin Concept font */
.tp-title,
.tp-section-title,
.tp-usage-title,
.tp-additional-title {
  font-family: "Acumin-Variable-Concept", "Arial", "Helvetica", sans-serif;
}

/* On the top (non-sticky) header these white-hero pages show the black lottie
   logo, because the default white lottie is invisible on a white background.
   The sticky #header is left untouched so it shows the same default burst
   logo as every other page. */
.teneo-light .header:not(#header) .logo .logo-white,
.teneo-light .header:not(#header) .logo .logo-img {
  display: none;
}

.teneo-light .header:not(#header) .logo .teneo-header-logo-black {
  display: block;
}

/* Drop the global 5px top padding on the MAIN header for these pages only
   (:not(#header) so the sticky header keeps its own padding, matching the landing page). */
.teneo-light .header:not(#header) {
  padding-top: 24px;
}

/* Menu / search styling for the light Teneo pages */
.teneo-light .menu-opener:before,
.teneo-light .menu-opener:after {
  background: #080808;
}

.menu-active .teneo-light .menu-opener:before,
.menu-active .teneo-light .menu-opener:after {
  background: #fff;
}

/* The "Menu" text that appears on hover: dark on the white product pages so it stays visible */
.teneo-light .menu-opener span {
  color: #080808;
}

/* Search Teneo button: dark text/border on the light page */
.teneo-light .teneo-search-btn {
  color: #111;
  border-color: #111;
}

/* The Search Teneo button reuses .menu-opener for its click behaviour,
   so suppress the hamburger bars it would otherwise inherit. */
.teneo-search-btn:before,
.teneo-search-btn:after {
  display: none !important;
}

/* home.css hides .btn-secondary.header-btn globally; re-show the Teneo search button
   beside the menu. Only one header shows it at a time — the main header at the top,
   and the sticky #header once it slides in on scroll (.shrink) — so it never doubles. */
.header:not(#header) .btn-secondary.header-btn.teneo-search-btn {
  display: inline-block !important;
  position: absolute;
  right: 58px;
  top: 14px;
  margin: 0;
  z-index: 21;
  width: unset !important;
  min-width: unset !important;
  height: unset !important;
  padding: 10px 12px !important;
  /* White hero at the top, so the default button is black outlined */
  color: #000000;
  background: transparent;
  border: 1px solid #000000;
  font-size: 12px !important;
}

/* Compact outlined style once the sticky #header slides in on scroll */
#header.shrink .btn-secondary.header-btn.teneo-search-btn {
  display: inline-block !important;
  position: absolute;
  right: 58px;
  top: -5px;
  margin: 0;
  z-index: 21;
  width: unset !important;
  min-width: unset !important;
  height: unset !important;
  padding: 10px 12px !important;
  color: #000000;
  background: transparent;
  border: 1px solid #000000;
  font-size: 12px !important;
}

/* Keep the search button + hamburger on one line with the logo at every width.
   Both are centred inside .header .container (position:relative), whose height tracks
   the logo — so they always line up with it. margin-top centres the hamburger without
   touching its transform (that drives the open/close X animation). */
.header:not(#header) .btn-secondary.header-btn.teneo-search-btn {
  top: 50% !important;
  transform: translateY(-50%) !important;
}
.header:not(#header) .menu-opener {
  top: 40% !important;
  margin-top: -14px !important;
}
/* When the menu is open, drop the hamburger/X to 22% so it lines up with the open
   menu's search bar (closed it stays at 40%, in line with the Search Teneo button). */
.menu-active .header:not(#header) .menu-opener {
  top: 22% !important;
}

/* Search Teneo button: site purple/pink gradient (main + sticky header) */
.header:not(#header) .btn-secondary.header-btn.teneo-search-btn,
#header.shrink .btn-secondary.header-btn.teneo-search-btn {
  background: linear-gradient(135deg, #4f51a7 0%, #e729c4 100%) !important;
  color: #ffffff !important;
  border: 0 !important;
}

.teneo-product .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
}

/* ---------- Hero ---------- */
.tp-hero {
  position: relative;
  overflow: hidden;
  background: #fff;
  padding: 200px 0 60px;
}

.tp-hero-wave {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: top right;
  background-size: contain;
  pointer-events: none;
}

.tp-hero-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 40px;
}

.tp-hero-image {
  position: relative;
  flex: 0 0 46%;
  max-width: 46%;
  text-align: center;
}

.tp-hero-image > img {
  max-width: 100%;
  height: auto;
}

/* rEPEAT logo sitting on top of the cap, top-right of the bottles */
.tp-repeat-logo {
  position: absolute;
  top: -25px;
  right: 101px;
  width: 30%;
  height: auto;
  z-index: 2;
}

.tp-hero-text {
  flex: 1;
}

.tp-title {
  font-size: clamp(32px, 10vw, 80px);
  font-weight: 800;
  margin: 0 0 20px;
  color: #111;
  max-width: 420px;
}

.tp-intro {
  font-size: 16px;
  line-height: 1.7;
  max-width: 500px;
}

.tp-intro p {
  margin: 0 0 14px;
}
p {
  color: #000000;
}
/* ---------- Usages ---------- */
/* Default (collapsed) state uses half-cover; the full-bg only appears once a tab is opened. */
.tp-usages {
  background-color: #0a1a0a;
  /* --tp-halfbg / --tp-fullbg are set inline from ACF (or the page default) */
  background-image: var(--tp-halfbg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  color: #fff;
  text-align: center;
  padding: 90px 0;
}

.tp-tab-input:checked ~ .tp-usages {
  background-image: var(--tp-fullbg);
}

.tp-section-title {
  font-size: clamp(32px, 10vw, 80px);
  font-weight: 800;
  margin: 0 0 18px;
  color: #fff;
}

.tp-usages-head {
  max-width: 760px;
  margin: 0 auto 50px;
}

.tp-usages-head p {
  font-size: 15px;
  line-height: 1.7;
  color: #d6d6d6;
  margin: 0;
}

.tp-usage-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

/* Radio inputs that drive the CSS-only tabs.
   position:fixed keeps them in the viewport so clicking a label never
   scrolls the page; the ~ sibling selectors still work (they are DOM-based). */
.tp-tab-input {
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* Tab buttons (labels) — white by default; no overlay until a tab is chosen */
.tp-usage-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex: 0 0 230px;
  width: 230px;
  height: 150px;
  box-sizing: border-box;
  padding: 20px;
  background: #fff;
  border: 2px solid transparent;
  border-radius: 14px;
  cursor: pointer;
  color: #1a1a1a;
  transition:
    background 0.25s ease,
    box-shadow 0.25s ease;
}

/* Accent glow on hover (same look as the active card) */
.tp-usage-card:hover {
  box-shadow:
    0 0 0 2px var(--tp-accent),
    0 16px 45px var(--tp-glow);
}

/* Once a tab is selected, dim every card and drop the glow; the active one re-adds it below */
.tp-tab-input:checked ~ .tp-usages .tp-usage-card {
  opacity: 0.45;
  box-shadow: none;
}

/* ...then bring the active one fully back, white with a green glow */
#tp-usage-0:checked ~ .tp-usages .tp-usage-card--0,
#tp-usage-1:checked ~ .tp-usages .tp-usage-card--1,
#tp-usage-2:checked ~ .tp-usages .tp-usage-card--2 {
  opacity: 1;
  background: #fff;
  box-shadow:
    0 0 0 2px var(--tp-accent),
    0 16px 45px var(--tp-glow);
}

.tp-usage-icon {
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tp-usage-icon img {
  max-height: 54px;
  width: auto;
}

.tp-usage-title {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

/* ---------- Usage panels (revealed by the active tab) ---------- */
.tp-usage-panels {
  margin-top: 70px;
}

.tp-usage-panel {
  display: none;
}

#tp-usage-0:checked ~ .tp-usages .tp-usage-panel--0,
#tp-usage-1:checked ~ .tp-usages .tp-usage-panel--1,
#tp-usage-2:checked ~ .tp-usages .tp-usage-panel--2 {
  display: block;
}

.tp-panel-title {
  font-family: "Acumin-Variable-Concept", "Arial", "Helvetica", sans-serif;
  font-size: 34px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 16px;
}

.tp-panel-desc {
  max-width: 760px;
  margin: 0 auto 40px;
  font-size: 14px;
  line-height: 1.7;
  color: #d6d6d6;
}

/* Sell-sheet buttons: 3-column grid of pills, first one active */
/* 3 per row; an incomplete last row is centered (flex-wrap, not grid) */
.tp-sheet-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 720px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.tp-sheet-list li {
  flex: 0 0 calc(33.333% - 11px);
}

.tp-sheet-btn {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-height: 56px;
  padding: 10px 18px;
  border: 1px solid var(--tp-accent);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--tp-accent-dark);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.tp-sheet-icon {
  flex: 0 0 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
}

.tp-sheet-icon img {
  max-width: 30px;
  max-height: 30px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  /* fade the icon colour (invert) on hover-out so it doesn't snap */
  transition: filter 0.4s ease;
}

/* Make the label fill the button's content height and centre its own text,
   so the text's visual middle sits on the button's vertical centre regardless
   of the icon's size/shape. */
.tp-sheet-label {
  flex: 1;
  align-self: stretch;
  display: flex;
  align-items: center;
  line-height: 1.25;
  margin-top: 6px;
}

.tp-sheet-btn:hover,
.tp-sheet-btn.is-active {
  background: var(--tp-accent-dark);
  border-color: var(--tp-accent-dark);
  color: #fff;
}
a.tp-additional-link span {
  position: relative;
  top: 1px;
}
/* Color & Effects: the filled (active / hover) sell-sheet button uses a gradient + glow.
   A gradient can't be transitioned from a solid colour, so it lives on a ::before
   overlay whose opacity fades — that animates smoothly. */
.color-and-effects .tp-sheet-btn {
  position: relative;
  overflow: hidden;
  z-index: 0;
  transition:
    color 1s ease,
    border-color 1s ease,
    box-shadow 1s ease;
}

.color-and-effects .tp-sheet-btn:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity 1s ease;
  background:
    /* bottom-left corner wedge */
    radial-gradient(
      120% 160% at 0% 100%,
      rgba(106, 58, 240, 0.85) 0%,
      rgba(106, 58, 240, 0.35) 22%,
      transparent 45%
    ),
    /* bottom-right corner wedge */
    radial-gradient(
        120% 160% at 100% 100%,
        rgba(106, 58, 240, 0.85) 0%,
        rgba(106, 58, 240, 0.35) 22%,
        transparent 45%
      ),
    /* faint bottom-center glow */
    radial-gradient(
        70% 55% at 50% 100%,
        rgba(106, 58, 240, 0.16) 0%,
        rgba(106, 58, 240, 0.07) 40%,
        rgba(106, 58, 240, 0.02) 70%,
        transparent 100%
      ),
    /* base horizontal gradient — bright edges, subtle purple center */
    linear-gradient(
        90deg,
        #5a2fd8 0%,
        #2e1568 12%,
        #1c0f3d 30%,
        #1c0f3d 70%,
        #2e1568 88%,
        #5a2fd8 100%
      );
}

.color-and-effects .tp-sheet-btn:hover:before,
.color-and-effects .tp-sheet-btn.is-active:before {
  opacity: 1;
}

.color-and-effects .tp-sheet-btn:hover,
.color-and-effects .tp-sheet-btn.is-active {
  border-color: transparent;
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(123, 92, 255, 0.25),
    0 0 18px rgba(90, 47, 216, 0.35),
    inset 12px 0 24px rgba(90, 47, 216, 0.3),
    inset -12px 0 24px rgba(90, 47, 216, 0.3);
}

.color-and-effects .tp-sheet-btn:hover {
  box-shadow:
    0 0 0 1px rgba(123, 92, 255, 0.4),
    0 0 26px rgba(107, 63, 235, 0.55),
    inset 0 0 28px rgba(107, 63, 235, 0.3);
}

/* Functional Additives: same treatment, teal palette */
.functional-additives .tp-sheet-btn {
  position: relative;
  overflow: hidden;
  z-index: 0;
  transition:
    color 1s ease,
    border-color 1s ease,
    box-shadow 1s ease;
}

.functional-additives .tp-sheet-btn:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity 1s ease;
  background:
    radial-gradient(
      120% 160% at 0% 100%,
      rgba(31, 168, 184, 0.85) 0%,
      rgba(31, 168, 184, 0.35) 22%,
      transparent 45%
    ),
    radial-gradient(
      120% 160% at 100% 100%,
      rgba(31, 168, 184, 0.85) 0%,
      rgba(31, 168, 184, 0.35) 22%,
      transparent 45%
    ),
    radial-gradient(
      70% 55% at 50% 100%,
      rgba(31, 168, 184, 0.16) 0%,
      rgba(31, 168, 184, 0.07) 40%,
      rgba(31, 168, 184, 0.02) 70%,
      transparent 100%
    ),
    linear-gradient(
      90deg,
      #1fa8b8 0%,
      #135665 12%,
      #0c3140 30%,
      #0c3140 70%,
      #135665 88%,
      #1fa8b8 100%
    );
}

.functional-additives .tp-sheet-btn:hover:before,
.functional-additives .tp-sheet-btn.is-active:before {
  opacity: 1;
}

.functional-additives .tp-sheet-btn:hover,
.functional-additives .tp-sheet-btn.is-active {
  border-color: transparent;
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(53, 212, 224, 0.25),
    0 0 18px rgba(28, 160, 176, 0.35),
    inset 12px 0 24px rgba(28, 160, 176, 0.3),
    inset -12px 0 24px rgba(28, 160, 176, 0.3);
}

.functional-additives .tp-sheet-btn:hover {
  box-shadow:
    0 0 0 1px rgba(53, 212, 224, 0.4),
    0 0 26px rgba(38, 190, 205, 0.55),
    inset 0 0 28px rgba(38, 190, 205, 0.3);
}

/* Sustainable Solutions (the base .teneo-product page): same treatment, green palette */
.teneo-product:not(.color-and-effects):not(.functional-additives)
  .tp-sheet-btn {
  position: relative;
  overflow: hidden;
  z-index: 0;
  transition:
    color 1s ease,
    border-color 1s ease,
    box-shadow 1s ease;
}

.teneo-product:not(.color-and-effects):not(.functional-additives)
  .tp-sheet-btn:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity 1s ease;
  background:
    radial-gradient(
      120% 160% at 0% 100%,
      rgba(78, 158, 34, 0.85) 0%,
      rgba(78, 158, 34, 0.35) 22%,
      transparent 45%
    ),
    radial-gradient(
      120% 160% at 100% 100%,
      rgba(78, 158, 34, 0.85) 0%,
      rgba(78, 158, 34, 0.35) 22%,
      transparent 45%
    ),
    radial-gradient(
      70% 55% at 50% 100%,
      rgba(78, 158, 34, 0.16) 0%,
      rgba(78, 158, 34, 0.07) 40%,
      rgba(78, 158, 34, 0.02) 70%,
      transparent 100%
    ),
    linear-gradient(
      90deg,
      #4e9e22 0%,
      #2a5413 12%,
      #16300c 30%,
      #16300c 70%,
      #2a5413 88%,
      #4e9e22 100%
    );
}

.teneo-product:not(.color-and-effects):not(.functional-additives)
  .tp-sheet-btn:hover:before,
.teneo-product:not(.color-and-effects):not(.functional-additives)
  .tp-sheet-btn.is-active:before {
  opacity: 1;
}

.teneo-product:not(.color-and-effects):not(.functional-additives)
  .tp-sheet-btn:hover,
.teneo-product:not(.color-and-effects):not(.functional-additives)
  .tp-sheet-btn.is-active {
  border-color: transparent;
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(98, 194, 47, 0.25),
    0 0 18px rgba(78, 158, 34, 0.35),
    inset 12px 0 24px rgba(78, 158, 34, 0.3),
    inset -12px 0 24px rgba(78, 158, 34, 0.3);
}

.teneo-product:not(.color-and-effects):not(.functional-additives)
  .tp-sheet-btn:hover {
  box-shadow:
    0 0 0 1px rgba(98, 194, 47, 0.4),
    0 0 26px rgba(88, 176, 40, 0.55),
    inset 0 0 28px rgba(88, 176, 40, 0.3);
}

/* Icons are green PNGs — invert to white on the active/hover (green) pill */
.tp-sheet-btn:hover .tp-sheet-icon img,
.tp-sheet-btn.is-active .tp-sheet-icon img {
  filter: brightness(0) invert(1);
}

/* rEPEAT buttons under the grid */
.tp-repeat-list {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}

.tp-repeat-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 12px 28px;
  border: 1px solid var(--tp-accent);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.95);
  color: #1a1a1a;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.tp-repeat-btn {
  color: var(--tp-accent-dark);
}

.tp-repeat-btn .tp-sheet-icon {
  width: auto;
}

.tp-repeat-btn .tp-sheet-icon img {
  max-width: 48px;
  max-height: 26px;
}

.tp-repeat-btn:hover {
  background: var(--tp-accent-dark);
  border-color: var(--tp-accent-dark);
  color: #fff;
}

.tp-repeat-btn:hover .tp-sheet-icon img {
  filter: brightness(0) invert(1);
}

.tp-repeat-btn img {
  height: 16px;
  width: auto;
}
section.tp-hero.functional-additives-hero .tp-hero-wave {
  top: 70px;
}
section.tp-hero.functional-additives-hero {
  padding: 100px 0 60px;
}
.tp-hero-text {
  margin-left: 65px;
}
/* ---------- Additional Categories ---------- */
.tp-additional {
  background: #fff;
  text-align: center;
  padding: 80px 0 100px;
}

.tp-section-title--dark {
  color: #111;
  margin-bottom: 50px;
}

/* By default the first set shows; clicking a tab swaps to that tab's set */
.tp-additional-variant {
  display: none;
}

.tp-additional-variant--0 {
  display: block;
}

#tp-usage-1:checked ~ .tp-additional .tp-additional-variant--0,
#tp-usage-2:checked ~ .tp-additional .tp-additional-variant--0 {
  display: none;
}

#tp-usage-1:checked ~ .tp-additional .tp-additional-variant--1,
#tp-usage-2:checked ~ .tp-additional .tp-additional-variant--2 {
  display: block;
}

.tp-additional-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

/* Additional Categories swaps with the usage tabs: the default set shows until a
   tab is opened, then that tab's own set replaces it. */
.tp-additional-set {
  display: none;
}

.tp-additional-set--default {
  display: flex;
}

.tp-tab-input:checked ~ .tp-additional .tp-additional-set--default {
  display: none;
}

#tp-usage-0:checked ~ .tp-additional .tp-additional-set--0,
#tp-usage-1:checked ~ .tp-additional .tp-additional-set--1,
#tp-usage-2:checked ~ .tp-additional .tp-additional-set--2 {
  display: flex;
}

.tp-additional-list li {
  width: 320px;
  max-width: 100%;
}

.tp-additional-card {
  text-align: left;
}

.tp-additional-media {
  display: block;
  overflow: hidden;
  margin-bottom: 18px;
}

.tp-additional-media img {
  width: 100%;
  height: auto;
  display: block;
}

.tp-additional-title {
  font-size: clamp(20px, 6.25vw, 30px);
  font-weight: 700;
  margin: 0 0 10px;
  color: #111;
}

.tp-additional-text {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
  margin: 0 0 14px;
}

/* Learn More CTA (site-standard .btn-primary), centred inside the Usages section,
   just below the usage boxes / expanded panel. */
.tp-cta {
  text-align: center;
}
.tp-cta .btn-primary {
  display: inline-block;
}

/* Only when a usage tab is open (full-cover panel shown): add extra top spacing */
.tp-tab-input:checked ~ .tp-usages .tp-cta {
  margin-top: 75px;
}

/* Learn More (inside the dark Usages section).
   Resting state — and the state left behind AFTER a click (:focus) — is the purple/pink
   gradient, so the hover style can never "stick" once the button has been clicked. */
.btn-primary.tp-cta-btn,
.btn-primary.tp-cta-btn:focus {
  color: #fff;
}
.btn-primary.tp-cta-btn span,
.btn-primary.tp-cta-btn:focus span {
  background: transparent;
}

/* White fill + black text (same as the footer SOLUTION FINDER button) while hovering,
   while the mouse is held down (:active, so the text stays black mid-click/drag), and on
   keyboard focus. :focus-visible never matches a mouse click, so releasing the click
   returns the button to the gradient. Declared last, and the colour is set on the span
   itself with !important, so the theme's global .btn-primary:hover/:focus/:active rules
   (which force white text + a dark span) can't flip it back. */
.btn-primary.tp-cta-btn:hover,
.btn-primary.tp-cta-btn:active,
.btn-primary.tp-cta-btn:focus-visible,
.btn-primary.tp-cta-btn:hover:focus,
.btn-primary.tp-cta-btn:active:focus {
  color: #000 !important;
}
.btn-primary.tp-cta-btn:hover span,
.btn-primary.tp-cta-btn:active span,
.btn-primary.tp-cta-btn:focus-visible span,
.btn-primary.tp-cta-btn:hover:focus span,
.btn-primary.tp-cta-btn:active:focus span {
  background: #fff !important;
  color: #000 !important;
}

/* Site-standard purple gradient button */
.tp-additional-link {
  position: relative;
  display: inline-block;
  padding: 10px 26px;
  border-radius: 30px;
  /* Solid black base; the gradient sits on ::before and fades out on hover */
  background: #000;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  text-decoration: none;
  overflow: hidden;
  z-index: 0;
}

.tp-additional-link:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, #4f51a7 0%, #e729c4 100%);
  opacity: 1;
  transition: opacity 0.4s ease;
  z-index: -1;
}

/* Hover: fade the gradient overlay out to reveal solid black (like the Altria "Learn More" button) */
/* Keep the label white in every state (overriding the global a:active/a:focus{color:#000}) */
.tp-additional-link,
.tp-additional-link:hover,
.tp-additional-link:focus,
.tp-additional-link:active {
  color: #fff;
  text-decoration: none;
}
.tp-additional-link:hover:before {
  opacity: 0;
}

/* ============================================================
   Responsive — each breakpoint declared once
   ============================================================ */
@media screen and (max-width: 1024px) {
  .tp-hero-wave {
    top: 130px;
  }
  section.tp-hero.color-and-effects-hero .tp-hero-wave {
    top: 65px;
  }
  section.tp-hero.functional-additives-hero .tp-hero-wave {
    top: 125px;
  }
  section.tp-hero .tp-hero-wave {
    top: 80px;
  }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
  .tp-hero-text {
    margin-left: unset;
  }
  .tp-title {
    font-size: clamp(32px, 10vw, 50px);
  }
  .tp-intro {
    max-width: 390px;
  }
}

/* Tablet */
@media screen and (max-width: 991px) {
  .tp-hero-inner {
    flex-direction: column;
    text-align: center;
  }

  .tp-hero-image {
    flex-basis: auto;
    max-width: 360px;
  }

  .tp-hero-wave {
    width: 100%;
  }

  .tp-title {
    font-size: 38px;
  }

  .tp-section-title {
    font-size: 32px;
  }

  .tp-sheet-list {
    max-width: 560px;
  }

  .tp-sheet-list li {
    flex: 0 0 calc(50% - 8px);
  }

  .tp-panel-title {
    font-size: 28px;
  }
  .tp-hero-text {
    margin-left: unset;
  }
  .tp-hero {
    padding: 125px 0 60px;
  }
  .tp-hero-wave {
    top: 100px;
  }
  section.tp-hero.color-and-effects-hero .tp-hero-wave {
    top: 65px;
  }
  section.tp-hero.functional-additives-hero .tp-hero-wave {
    top: 125px;
  }
  section.tp-hero .tp-hero-wave {
    top: 80px;
  }
}

/* Phones */
@media screen and (max-width: 600px) {
  .tp-hero {
    padding: 100px 0;
  }

  .tp-title {
    font-size: 30px;
  }

  .tp-usages {
    padding: 60px 0;
  }

  .tp-usage-card {
    flex: 0 0 260px;
    width: 260px;
    max-width: 100%;
    height: 150px;
  }

  .tp-sheet-list {
    max-width: 320px;
  }

  .tp-sheet-list li {
    flex: 0 0 100%;
  }

  .tp-repeat-list {
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }

  .tp-repeat-list .tp-repeat-btn {
    width: 100%;
    justify-content: flex-start;
  }

  .tp-additional {
    padding: 50px 0 70px;
  }

  .tp-additional-list {
    gap: 32px;
  }
  .tp-hero-text {
    margin-left: unset;
  }
  .tp-hero-wave {
    top: 100px;
  }
  section.tp-hero.color-and-effects-hero .tp-hero-wave {
    top: 65px;
  }
  section.tp-hero.functional-additives-hero .tp-hero-wave {
    top: 125px;
  }
  section.tp-hero .tp-hero-wave {
    top: 80px;
  }
  .tp-cta {
    padding: 0px 0 20px;
  }
}

.tp-hero-wave {
  top: 26px;
}

/* Mobile only (Teneo pages): shrink header logo, compact the search button, nudge the menu opener.
   These rules live in the Teneo stylesheets, which load only on Teneo pages, so they never affect other pages. */
@media screen and (max-width: 767px) {
  .header:not(#header) .logo img,
  .header:not(#header) .logo lottie-player {
    width: 55% !important;
  }

  .header:not(#header) .btn-secondary.header-btn.teneo-search-btn {
    padding: 6px 7px !important;
    font-size: 8px !important;
  }

  .menu-opener {
    right: 20px;
  }
}

/* Exactly 768px only: push the search button further from the right edge. */
@media screen and (min-width: 768px) and (max-width: 768px) {
  .header .btn-secondary.header-btn.teneo-search-btn {
    right: 90px !important;
  }
}
span.download-text {
  margin-top: 3px;
}