/* OD Nutra adjustments on top of the ISC Nutra styles (requested 2026-10-31):
   a smaller, better proportioned header, a left-aligned hero that shares the
   header's left edge, calmer type sizes, and a first screen that ends exactly
   on the green trust bar. Desktop only; tablet and phone keep the reference. */

/* Header */
[data-header*="type-1"] .ct-header [data-id="logo"] .site-logo-container { --logo-max-height: 60px; }
[data-header*="type-1"] .ct-header [data-device="desktop"] [data-row*="bottom"] > .ct-container { padding-block: 14px 16px; }
[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > a {
  --theme-font-size: 16px;
  --theme-font-weight: 500;
  --theme-link-initial-color: #4b5563;
}
[data-header*="type-1"] .ct-header [data-device="desktop"] [data-id="text"] p { font-size: 15px; margin-top: 6px; }

@media (min-width: 1025px) {
  /* First screen: header + hero + green bar fill the window (height set by od-overrides.js). */
  .elementor-6 .elementor-element.elementor-element-826bcb0 {
    --min-height: var(--od-fold, 0px);
    --padding-left: var(--od-edge, max(5vw, calc((100% - 1290px) / 2)));
    --align-items: stretch;
  }
  .elementor-6 .elementor-element.elementor-element-69130b4 {
    --align-items: flex-start;
    --justify-content: center;
    --padding-top: 40px;
    --padding-bottom: 40px;
    --padding-right: 48px;
  }
  .elementor-6 .elementor-element.elementor-element-9f986d5,
  .elementor-6 .elementor-element.elementor-element-9f986d5.elementor-element { text-align: left; --align-self: flex-start; }
  .elementor-6 .elementor-element.elementor-element-9f986d5 .elementor-heading-title {
    font-size: clamp(42px, 3vw, 56px);
    line-height: 1.08;
  }
  .elementor-6 .elementor-element.elementor-element-f2c7bcb,
  .elementor-6 .elementor-element.elementor-element-f2c7bcb.elementor-element {
    --align-self: flex-start;
    width: auto;
    max-width: 32em;
    margin-top: 18px;
    text-align: left;
    font-size: clamp(18px, 1.25vw, 21px);
    line-height: 1.55;
  }
  .elementor-6 .elementor-element.elementor-element-a0e5755,
  .elementor-6 .elementor-element.elementor-element-a0e5755.e-con {
    --align-self: flex-start;
    --width: auto;
    --margin-top: 28px;
    --margin-right: 0px;
    --e-con-grid-template-columns: repeat(3, auto);
    --justify-items: start;
    --column-gap: 36px;
  }
  .elementor-6 .elementor-element.elementor-element-bc4b9d2,
  .elementor-6 .elementor-element.elementor-element-5325ed9,
  .elementor-6 .elementor-element.elementor-element-1fd8bdd { --e-icon-list-icon-size: 30px; }
  .elementor-6 .elementor-element.elementor-element-bc4b9d2 .elementor-icon-list-item > .elementor-icon-list-text,
  .elementor-6 .elementor-element.elementor-element-5325ed9 .elementor-icon-list-item > .elementor-icon-list-text,
  .elementor-6 .elementor-element.elementor-element-1fd8bdd .elementor-icon-list-item > .elementor-icon-list-text {
    font-size: 17px;
    line-height: 24px;
  }
  /* Both CTA rows share the same two columns so the Amazon label sits over its button. */
  .elementor-6 .elementor-element.elementor-element-0715c05,
  .elementor-6 .elementor-element.elementor-element-0715c05.e-con,
  .elementor-6 .elementor-element.elementor-element-aee2298,
  .elementor-6 .elementor-element.elementor-element-aee2298.e-con {
    --align-self: flex-start;
    --width: auto;
    --margin-right: 0px;
    --e-con-grid-template-columns: 250px 270px;
    --column-gap: 16px;
  }
  .elementor-6 .elementor-element.elementor-element-0715c05 { --margin-top: 24px; }
  .elementor-6 .elementor-element.elementor-element-aee2298 { margin-top: 8px; }
  .elementor-6 .elementor-element.elementor-element-1d6db67,
  .elementor-6 .elementor-element.elementor-element-1d6db67.elementor-element { --align-self: center; text-align: center; }
  .elementor-6 .elementor-element.elementor-element-1d6db67 .elementor-heading-title { font-size: 16px; line-height: 1.3; }
  .elementor-6 .elementor-element.elementor-element-d820b1b,
  .elementor-6 .elementor-element.elementor-element-a0fd064 { width: 100%; }
  .elementor-6 .elementor-element.elementor-element-d820b1b .elementor-button,
  .elementor-6 .elementor-element.elementor-element-a0fd064 .elementor-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 60px;
    box-sizing: border-box;
    font-size: 20px;
    line-height: 1.2;
    padding: 14px 20px;
  }
  .elementor-6 .elementor-element.elementor-element-d820b1b .elementor-button-content-wrapper,
  .elementor-6 .elementor-element.elementor-element-a0fd064 .elementor-button-content-wrapper { align-items: center; }
  .elementor-6 .elementor-element.elementor-element-a0fd064 .elementor-button-icon svg { width: 22px; height: 22px; }
  /* The square video never pushes the green bar below the window. */
  .elementor-6 .elementor-element.elementor-element-87e8ab9 .elementor-wrapper {
    max-width: var(--od-fold, 100%);
    margin-left: auto;
  }
}

/* Tablet: ISC only sizes the mobile header row below 600px, so between 601px and
   999px the logo spilled out of the white bar. Give that row room for the lockup. */
@media (min-width: 601px) and (max-width: 999.98px) {
  [data-header*="type-1"] .ct-header [data-row*="middle"] { height: 84px; }
  [data-header*="type-1"] .ct-header [data-device="mobile"] [data-id="logo"] .site-logo-container { --logo-max-height: 54px; }
}

/* Capsule section: the quote button and the "Explore" link start on the cards' left edge
   (ISC centres the button and pads the link 20px in).
   On phones the cards centre their text, so the button stays centred there. */
@media (min-width: 768px) {
  .elementor-6 .elementor-element.elementor-element-6af6324.elementor-element { --align-self: flex-start; }
  .elementor-6 .elementor-element.elementor-element-6af6324 > .elementor-widget-container { margin-left: 0; }
}
.elementor-6 .elementor-element.elementor-element-5e73d38.isc-text-link,
.elementor-6 .elementor-element.elementor-element-5e73d38 .isc-text-link { padding-left: 0; }

/* Footer: logo, text and copyright share one left edge. */
.ct-footer [data-row="bottom"] [data-column="copyright"] { --horizontal-alignment: flex-start; align-items: flex-start; justify-content: flex-start; text-align: left; }
.ct-footer .ct-footer-copyright { text-align: left; }

/* ------------------------------------------------------------------------
   Round 4: button hovers, the static OD forms and calmer, roomier sizes.
   ------------------------------------------------------------------------ */
:root {
  --od-teal: #0a7474;
  --od-turq: #36d6cf;
  --od-icon: #0e9696;
  --od-navy-900: #0b1b34;
  --od-teal-dark: #075a5a;
  --od-navy: #11284b;
  --od-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --od-lift-shadow: 0 14px 28px -12px rgba(11, 27, 52, 0.45), 0 3px 8px rgba(11, 27, 52, 0.12);
}

/* Buttons: lift, soft green shadow and a slightly deeper shade on hover. */
body .elementor-widget-button .elementor-button,
body .elementor-button.asin-tool-button,
body .ct-header-cta .ct-button,
body .wp-block-button__link,
body .od-form-submit {
  transition: transform 0.22s var(--od-ease), box-shadow 0.22s var(--od-ease),
    background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease, filter 0.22s ease !important;
}
@media (hover: hover) {
  body .elementor-widget-button.elementor-widget-button .elementor-button:hover,
  body .elementor-button.asin-tool-button.asin-tool-button:hover,
  body .ct-header-cta .ct-button.ct-button:hover,
  body .wp-block-button .wp-block-button__link:hover,
  body .od-form .od-form-submit:hover {
    transform: translateY(-2px);
    box-shadow: var(--od-lift-shadow) !important;
    filter: brightness(0.93) saturate(1.05);
  }
}
body .elementor-widget-button.elementor-widget-button .elementor-button:active,
body .elementor-button.asin-tool-button.asin-tool-button:active,
body .ct-header-cta .ct-button.ct-button:active,
body .wp-block-button .wp-block-button__link:active,
body .od-form .od-form-submit:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px -6px rgba(11, 27, 52, 0.45) !important;
}
/* Arrow nudge on button icons and text links. */
body .elementor-button .elementor-button-icon { transition: transform 0.22s var(--od-ease); }
@media (hover: hover) {
  body .elementor-button:hover .elementor-button-icon { transform: translateX(3px); }
}
body .isc-text-link a,
body a.isc-text-link {
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
  transition: color 0.2s ease, text-underline-offset 0.2s ease;
}
@media (hover: hover) {
  body .isc-text-link a:hover,
  body a.isc-text-link:hover { color: var(--od-teal-dark); text-decoration: underline; text-underline-offset: 3px; }
}
/* A visible keyboard focus ring everywhere. */
body a:focus-visible,
body button:focus-visible,
body .elementor-button:focus-visible,
body [role="button"]:focus-visible {
  outline: 3px solid var(--od-icon);
  outline-offset: 3px;
  border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  body .elementor-button,
  body .ct-button,
  body .wp-block-button__link,
  body .od-form-submit,
  body .elementor-button-icon { transition: none !important; transform: none !important; }
}

/* Static OD forms (they replace ISC's HubSpot embeds and send nothing yet). */
.od-form {
  display: grid;
  gap: 22px;
  color: #33475b;
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
}
.od-form .od-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.od-form .od-field { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.od-form label,
.od-form legend { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.4; color: #1f2d3d; }
.od-form .od-req { margin-left: 3px; color: #d64545; }
.od-form input[type="text"],
.od-form input[type="email"],
.od-form input[type="tel"],
.od-form input[type="url"],
.od-form select,
.od-form textarea {
  width: 100%;
  min-height: 50px;
  box-sizing: border-box;
  margin: 0;
  padding: 12px 16px;
  font: inherit;
  font-size: 16px;
  color: #1f2d3d;
  background: #f5f8fa;
  border: 1px solid #cbd6e2;
  border-radius: 10px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.od-form textarea { min-height: 132px; resize: vertical; }
.od-form input:hover,
.od-form select:hover,
.od-form textarea:hover { border-color: #9fb3c8; }
.od-form input:focus,
.od-form select:focus,
.od-form textarea:focus {
  outline: none;
  background: #ffffff;
  border-color: var(--od-teal);
  box-shadow: 0 0 0 4px rgba(10, 116, 116, 0.18);
}
.od-form fieldset.od-field { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.od-form fieldset.od-field legend { width: 100%; margin: 0 0 4px; padding: 0; }
.od-form .od-choice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 18px 8px 14px;
  font-weight: 500;
  background: #ffffff;
  border: 1px solid #cbd6e2;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.od-form .od-choice:hover { border-color: var(--od-teal); }
.od-form .od-choice:has(input:checked) { border-color: var(--od-teal); background: #e8f6f6; color: var(--od-navy); }
.od-form .od-choice input { width: 18px; height: 18px; margin: 0; accent-color: var(--od-teal); }
.od-form .od-form-title {
  margin: 10px 0 -4px;
  font-size: 24px;
  line-height: 1.3;
  color: #2d2d2d;
}
.od-form .od-form-title:first-child { margin-top: 0; }
.od-form .od-form-aside {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding: 14px 18px;
  font-size: 15px;
  line-height: 1.5;
  background: #e8f6f6;
  border-radius: 10px;
}
.od-form .od-form-aside a { color: var(--od-teal-dark); font-weight: 700; text-underline-offset: 3px; }
body .od-form .od-form-submit {
  justify-self: start;
  min-height: 54px;
  padding: 14px 34px;
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  color: #ffffff;
  background: var(--od-teal);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}
body .od-form .od-form-submit--wide { justify-self: stretch; }
.od-form .od-form-note {
  margin: 0;
  padding: 14px 18px;
  font-size: 15px;
  color: var(--od-navy);
  background: #e8f6f6;
  border-radius: 10px;
}
@media (max-width: 600px) {
  .od-form .od-row { grid-template-columns: 1fr; }
  .od-form .od-form-title { font-size: 21px; }
}
/* Contact: the white box is the form widget itself; give the fields room inside it. */
[data-od-page="contact-us"] .elementor-widget-hubspot-form > .elementor-widget-container {
  padding: clamp(22px, 3vw, 40px) !important;
  border-radius: 16px;
}
/* Quote: the box is the parent container (50px padding), so the widget adds none.
   On phones ISC fixed the widget at 241px and kept the 50px box padding. */
[data-od-page="quote"] .elementor-widget-hubspot-form > .elementor-widget-container { padding: 0 !important; }
@media (max-width: 767px) {
  [data-od-page="quote"] .elementor-element.elementor-element-463aa55 { width: 100% !important; max-width: 100%; }
  [data-od-page="quote"] .elementor-element.elementor-element-515bb00 { padding: 28px 20px !important; }
}
/* Footer menu: ISC's current-page colour is blue on the green footer. */
body #footer .current-menu-item > a.ct-menu-link,
body #footer a.ct-menu-link[aria-current="page"] {
  color: #ffffff !important;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}

/* Calmer type and more room: ISC's 57-65px section titles, 28px intro lines and
   30px card titles crowd the 16px body copy (worse on phones, where cards are
   250px wide). One scale per screen size, set through these variables. */
:root {
  --od-title: 48px; --od-lead: 21px; --od-h3: 23px;
  --od-card-title: 23px; --od-card-text: 17px; --od-card-pad: 40px 38px;
  --od-faq-q: 21px; --od-faq-a: 18px;
}
@media (max-width: 1024px) {
  :root { --od-title: 40px; --od-lead: 19px; --od-h3: 22px; --od-card-title: 21px; --od-card-pad: 32px 28px; --od-faq-q: 19px; --od-faq-a: 17px; }
}
@media (max-width: 767px) {
  :root { --od-title: 34px; --od-lead: 18px; --od-h3: 21px; --od-card-title: 21px; --od-card-text: 16.5px; --od-card-pad: 28px 24px; --od-faq-q: 18px; --od-faq-a: 16.5px; }
}
body .elementor-element.elementor-element:is([data-id="4350db9"], [data-id="01bb9a9"], [data-id="f700b5a"], [data-id="a8af4ac"], [data-id="b91f1a4"], [data-id="74a2d5c"], [data-id="8891686"], [data-id="0fa4439"], [data-id="0a91922"], [data-id="2cc8077"], [data-id="65ad527"]) .elementor-heading-title.elementor-heading-title {
  font-size: var(--od-title) !important;
  line-height: 1.15 !important;
}
body .elementor-element.elementor-element:is([data-id="9a3fadb"], [data-id="b27a00c"], [data-id="8d65594"], [data-id="f646d8f"], [data-id="c133d02"], [data-id="e15482b"], [data-id="504db8a"], [data-id="132ce7e"], [data-id="644c6d2"], [data-id="e2a6673"], [data-id="b0c7a48"], [data-id="021778e"], [data-id="0756d84"], [data-id="06d00aa"], [data-id="b114d5a"], [data-id="ca9ce2c"]) :is(p, li, .elementor-widget-container) {
  font-size: var(--od-lead) !important;
  line-height: 1.65 !important;
  text-wrap: pretty;
}
body .elementor-element.elementor-element:is([data-id="2de054c"], [data-id="76018ff"], [data-id="0237095"], [data-id="ceee5d4"], [data-id="896122a"]) .elementor-heading-title.elementor-heading-title {
  font-size: var(--od-h3) !important;
  line-height: 1.35 !important;
}
/* Cards: smaller titles, larger body copy, more padding. */
body .isc-path-card.isc-path-card { padding: var(--od-card-pad) !important; }
body .isc-path-card h3.elementor-heading-title.elementor-heading-title,
body .isc-path-card .elementor-icon-box-title.elementor-icon-box-title,
body .isc-path-card .elementor-icon-box-title.elementor-icon-box-title * {
  font-size: var(--od-card-title) !important;
  line-height: 1.3 !important;
}
body .isc-path-card .elementor-icon-box-description.elementor-icon-box-description,
body .isc-path-card .elementor-widget-text-editor p {
  font-size: var(--od-card-text) !important;
  line-height: 1.7 !important;
}
body .isc-path-card .elementor-icon-box-title { margin-bottom: 12px !important; }
/* FAQ: questions read as list items, not headlines. */
body .e-n-accordion-item-title-text.e-n-accordion-item-title-text { font-size: var(--od-faq-q) !important; line-height: 1.4 !important; }
body .e-n-accordion .elementor-widget-text-editor :is(p, li) { font-size: var(--od-faq-a) !important; line-height: 1.7 !important; }
/* About page: a readable column. */
[data-od-page="about-us"] .elementor-widget-text-editor :is(p, li) { font-size: 17px; line-height: 1.75; }
[data-od-page="about-us"] .elementor-widget-text-editor p + p { margin-top: 1.1em; }
@media (min-width: 1025px) {
  [data-od-page="about-us"] .elementor-widget-text-editor :is(p, li) { font-size: 17.5px; }
}

/* ISC gives section intros 150px side padding with no tablet/phone override, which squeezes
   them to one word per line on phones. Scale it down instead. */
@media (max-width: 1024px) {
  body .elementor-element.elementor-element:is([data-id="9a3fadb"], [data-id="b27a00c"], [data-id="f646d8f"], [data-id="e15482b"], [data-id="504db8a"], [data-id="132ce7e"], [data-id="644c6d2"], [data-id="0756d84"], [data-id="06d00aa"], [data-id="ca9ce2c"]) > .elementor-widget-container { padding-left: 40px !important; padding-right: 40px !important; }
}
@media (max-width: 767px) {
  body .elementor-element.elementor-element:is([data-id="9a3fadb"], [data-id="b27a00c"], [data-id="f646d8f"], [data-id="e15482b"], [data-id="504db8a"], [data-id="132ce7e"], [data-id="644c6d2"], [data-id="0756d84"], [data-id="06d00aa"], [data-id="ca9ce2c"]) > .elementor-widget-container { padding-left: 0 !important; padding-right: 0 !important; padding-bottom: 36px !important; }
}

/* Round 5: OD palette. Turquoise is the highlight on navy; teal stays the action colour on white. */
body .elementor-element:is([data-id="a8af4ac"], [data-id="2cc8077"]) span { color: var(--od-turq) !important; }
body [data-id="b0c7a48"] a,
body [data-id="b0c7a48"] a:visited { color: var(--od-turq) !important; opacity: 1 !important; }
footer .wp-block-button__link.wp-element-button {
  background: var(--od-turq) !important;
  color: var(--od-navy-900) !important;
  font-weight: 600;
}
footer .wp-block-button__link.wp-element-button:hover { background: #6fe3dd !important; }
.od-req { color: #b83232 !important; }
.skip-link.screen-reader-text:focus { background: var(--od-navy-900) !important; color: #fff !important; }
/* ISC's green raster badges and the product-link animation, shifted to the OD teal. */
img:is(.wp-image-1750, .wp-image-1752) { filter: hue-rotate(58deg) saturate(.85) brightness(.88); }
img.wp-image-1154 { filter: hue-rotate(60deg) saturate(.8); }

/* Round 5: friendlier inner pages. */
/* Contact and About: a centred page title with a short turquoise rule, over the centred column. */
:is([data-od-page="contact-us"], [data-od-page="about-us"]) .hero-section .page-title {
  text-align: center;
  font-size: clamp(30px, 2.6vw, 40px);
  line-height: 1.15;
  color: var(--od-navy);
}
:is([data-od-page="contact-us"], [data-od-page="about-us"]) .hero-section .page-title::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin: 16px auto 0;
  border-radius: 2px;
  background: var(--od-turq);
}
:is([data-od-page="contact-us"], [data-od-page="about-us"]) .hero-section { margin-bottom: 8px; }
/* Instant quote hero: ISC's 64px stack reads as a shout; keep it large but calmer. */
@media (min-width: 768px) {
  body [data-id="8e26917"] h2.elementor-heading-title.elementor-heading-title { font-size: clamp(38px, 3.5vw, 52px) !important; line-height: 1.1 !important; }
}
/* Capsule page: ISC leaves the left half of "More Than Encapsulation" empty; show the capsule photo there. */
@media (min-width: 768px) {
  body .elementor-element.elementor-element-adfbe7b {
    background: url("capsules-banner.png") center / cover no-repeat !important;
    border-radius: 16px;
    min-height: 340px;
    margin-right: 40px;
  }
}
@media (min-width: 768px) {
  body [data-id="8e26917"] .elementor-headline.elementor-headline { font-size: clamp(38px, 3.5vw, 52px) !important; line-height: 1.1 !important; }
}
/* Instant quote on phones: ISC's landing sections have no side padding, so text met the screen edge. */
@media (max-width: 767px) {
  [data-od-page="instant-supplement-quote"] .e-con.e-parent { padding-left: 20px !important; padding-right: 20px !important; }
  /* The CoA band keeps ISC's 4px side margins on phones and ran 4px past the screen. */
  [data-od-page="instant-supplement-quote"] [data-id="ecca2ef"].e-con { --margin-left: 0px !important; --margin-right: 0px !important; margin-left: 0 !important; margin-right: 0 !important; }
}
/* Capsule and powder heroes: phones show no video, and the fallback was ISC's flat grey. */
body .e-con.e-parent:has(:is([data-id="a8af4ac"], [data-id="2cc8077"])) { background-color: var(--od-navy-900) !important; }
@media (max-width: 767px) {
  [data-od-page="instant-supplement-quote"] :is([data-id="2114407"], [data-id="b4a213a"], [data-id="da90261"], [data-id="eae24f7"]) h2.elementor-heading-title.elementor-heading-title { font-size: 30px !important; line-height: 1.2 !important; }
}

/* Round 6: friendlier buttons, a header that comes back on scroll up, reveal on scroll, tighter section intros. */
body :is(.elementor-button, .ct-button, .wp-element-button, .wp-block-button__link, .od-form-submit, .asin-tool-search-btn) { border-radius: 999px !important; }
body .elementor-button { padding-left: 32px !important; padding-right: 32px !important; }

/* Sticky header: od-overrides.js hides it while scrolling down and brings it back on any scroll up. */
html { scroll-padding-top: 120px; }
#header { position: sticky; top: 0; z-index: 60; background: #fff; transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease; }
html.od-head-scrolled #header { box-shadow: 0 8px 24px rgba(11, 27, 52, .08); }
html.od-head-hidden #header { transform: translateY(-100%); box-shadow: none; }

/* Reveal: widgets below the fold fade up once when they enter the screen (JS adds the classes). */
html.od-reveal-on .od-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--od-delay, 0ms); }
html.od-reveal-on .od-reveal.od-in { opacity: 1; transform: none; }
html.od-measure .od-reveal { transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  #header { transition: none; }
  html.od-reveal-on .od-reveal { opacity: 1; transform: none; transition: none; }
}

/* Home: the powder and capsule section titles are centred and as large as the section intro above them. */
body :is([data-id="3f9e54e"], [data-id="6b42a37"], [data-id="fa51ca3"], [data-id="da93a0b"]) { --container-widget-width: 100%; width: 100% !important; max-width: 100% !important; text-align: center; }
body :is([data-id="3f9e54e"], [data-id="6b42a37"]) > .elementor-widget-container { padding: 0 !important; margin: 0 !important; }
body :is([data-id="3f9e54e"], [data-id="6b42a37"]) .elementor-heading-title.elementor-heading-title { font-size: clamp(32px, 3.4vw, 48px) !important; line-height: 1.15 !important; text-align: center !important; }
body :is([data-id="fa51ca3"], [data-id="da93a0b"]) .elementor-heading-title.elementor-heading-title { text-align: center !important; font-size: clamp(17px, 1.4vw, 20px) !important; line-height: 1.6 !important; }
/* Powder tabs: the tab list starts at the top instead of floating in the middle of an empty column. */
body .e-n-tabs-heading { justify-content: flex-start !important; }

/* A button followed by a text link sit side by side instead of stacking at full width. */
body .e-con:has(> .elementor-widget-button + .isc-text-link) { flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; column-gap: 28px !important; }
body .e-con:has(> .elementor-widget-button + .isc-text-link) > .elementor-element { flex: 1 1 100%; }
body .e-con:has(> .elementor-widget-button + .isc-text-link) > :is(.elementor-widget-button, .isc-text-link) { flex: 0 0 auto !important; width: auto !important; max-width: 100% !important; }
body .e-con:has(> .elementor-widget-button + .isc-text-link) > .elementor-widget-button .elementor-button { width: auto !important; }
body .e-con:has(> .elementor-widget-button + .isc-text-link) > .isc-text-link > .elementor-widget-container { padding: 0 !important; }

/* Instant quote now uses the site header: its hero text lines up with the header logo. */
@media (min-width: 1025px) {
  [data-od-page="instant-supplement-quote"] [data-id="6514aeb"] > .e-con-inner { width: min(1290px, 90vw) !important; max-width: none !important; margin-inline: auto !important; }
}
/* Small laptops: a slightly tighter menu so all five pages fit before Blocksy folds them into "More". */
@media (min-width: 1025px) and (max-width: 1279px) {
  #header [data-device="desktop"] nav > ul > li > a.ct-menu-link { padding-inline: 9px !important; font-size: 15px !important; }
}

/* Round 7: compact buttons, CTAs that share one row, rounder panels and modern tabs. */
/* One button size across the site: 16px text, about 48px tall, never stretched to the column. */
body .elementor-widget-button .elementor-button,
body .elementor-button.asin-tool-button {
  font-size: 16px !important; font-weight: 600 !important; line-height: 1.25 !important; letter-spacing: 0 !important;
  padding: 0 28px !important; min-height: 48px !important; width: auto !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important;
}
body .elementor-widget-button .elementor-button .elementor-button-content-wrapper { align-items: center !important; }
body .elementor-widget-button .elementor-button .elementor-button-icon { display: inline-flex !important; line-height: 1 !important; }
body .elementor-widget-button .elementor-button :is(.elementor-button-text, .elementor-button-content-wrapper) { font-size: inherit !important; line-height: inherit !important; }
body .elementor-widget-button .elementor-button-icon svg { width: 16px !important; height: 16px !important; }
body .elementor-widget-button.isc-outline-button .elementor-button { border-width: 1.5px !important; }
/* Hero buttons are one step larger than the rest. */
body :is([data-id="d820b1b"], [data-id="a0fd064"], [data-id="8b597f7"], [data-id="44b66e2"], [data-id="f9fe2fb"]) .elementor-button.elementor-button {
  font-size: 17px !important; padding: 0 30px !important; min-height: 54px !important;
}
body :is([data-id="d820b1b"], [data-id="a0fd064"]) .elementor-button.elementor-button { width: 100% !important; }

/* od-overrides.js groups consecutive buttons and text links into one row. */
body .od-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 12px; width: 100%; max-width: 100%; }
body .od-cta-row.od-cta-center { justify-content: center; }
/* Some ISC containers are two-column grids: the group spans both columns. */
body .od-cta-row { grid-column: 1 / -1; }
body .od-cta-row > .elementor-element { flex: 0 0 auto !important; width: auto !important; max-width: 100% !important; margin: 0 !important; --container-widget-width: auto; --container-widget-flex-grow: 0; }
body .od-cta-row > .elementor-element > .elementor-widget-container { margin: 0 !important; padding: 0 !important; }
body .od-cta-row > .isc-text-link { padding: 0 !important; }
body .od-cta-row > .isc-text-link :is(p, a) { margin: 0 !important; padding: 0 !important; line-height: 1.3 !important; }
@media (min-width: 768px) {
  body .od-cta-row > .elementor-widget-button + .isc-text-link { margin-left: 14px !important; }
  body .od-cta-row > .isc-text-link + .isc-text-link { margin-left: 14px !important; }
}
/* Powder tabs on tablets and desktops: the row moves under both columns (see od-overrides.js). */
@media (min-width: 768px) {
  body [data-id="504eecf"] .e-n-tabs-content > .e-con:has(> .od-cta-panel) { flex-wrap: wrap !important; row-gap: 0 !important; }
  body [data-id="504eecf"] .od-cta-row.od-cta-panel { flex: 0 0 100% !important; padding-top: 22px !important; padding-bottom: 40px !important; box-sizing: border-box; }
}
@media (max-width: 767px) {
  body .od-cta-row { gap: 12px; }
  body .od-cta-row > .elementor-widget-button .elementor-button { padding: 0 22px !important; }
  /* Phones: buttons that cannot share a line fill it, so a stack reads as one tidy block. */
  body .od-cta-row > .elementor-widget-button { flex: 1 1 auto !important; }
  body .od-cta-row > .elementor-widget-button .elementor-button { width: 100% !important; }
}

/* Rounder panels and cards. */
body [data-id="a5dcec0"] { border-radius: 28px !important; overflow: hidden; border-color: rgba(11, 27, 52, 0.08) !important; box-shadow: 0 24px 60px -24px rgba(11, 27, 52, 0.22) !important; }
body .elementor-widget-icon-box > .elementor-widget-container,
body :is([data-id="89ee421"], [data-id="9a6fe5e"], [data-id="8c81b93"], [data-id="408ea86"], [data-id="472ed97"], [data-id="9641806"], [data-id="9c29a1b"], [data-id="50f476c"], [data-id="f096ae8"], [data-id="552bc1d"], [data-id="d673419"], [data-id="b337b1c"], [data-id="a674d6a"], [data-id="f911661"], [data-id="1717f38"], [data-id="d42b5fe"], [data-id="857951d"]) { border-radius: 22px !important; }
body .elementor-widget-icon-box > .elementor-widget-container { transition: box-shadow 0.25s ease, transform 0.25s ease; }
body :is([data-id="22a707a"], [data-id="92e5479"]) > .elementor-widget-container { border-radius: 22px !important; overflow: hidden; }
body :is([data-id="7c87e9e"], [data-id="dca02f4"]) { border-radius: 22px !important; }

/* Powder tabs: rounded pill tabs with the text on the left and the arrow on the right. */
@media (min-width: 1025px) {
  body [data-id="504eecf"] .e-n-tabs-heading { padding: 18px !important; gap: 6px !important; }
}
body [data-id="504eecf"] .e-n-tab-title {
  border: 0 !important; border-radius: 16px !important; padding: 16px 20px !important;
  justify-content: space-between !important; text-align: left !important; gap: 16px !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}
body [data-id="504eecf"] .e-n-tab-title :is(.e-n-tab-title-text, span) { text-align: left !important; }
body [data-id="504eecf"] .e-n-tab-title[aria-selected="false"] { background: transparent !important; }
/* Elementor turns a hovered tab's text white; keep it dark on a light tint. */
body [data-id="504eecf"] { --n-tabs-title-color-hover: #11284b !important; --n-tabs-icon-color-hover: #0a7474 !important; --n-tabs-title-background-color-hover: #f1f6f8 !important; }
body [data-id="504eecf"] .e-n-tab-title[aria-selected="false"]:hover { background: #f1f6f8 !important; color: #11284b !important; }
body [data-id="504eecf"] .e-n-tab-title[aria-selected="true"] { background: #e6f4f4 !important; box-shadow: inset 0 0 0 1px rgba(10, 116, 116, 0.18); }
@media (prefers-reduced-motion: reduce) {
  body .elementor-widget-icon-box > .elementor-widget-container,
  body [data-id="504eecf"] .e-n-tab-title { transition: none !important; }
}

/* Instant quote: the "Only have a product idea?" line shares the button's left edge and size. */
body [data-id="13adec6"], body [data-id="13adec6"] > .elementor-widget-container { margin: 0 !important; padding: 0 !important; }
body [data-id="13adec6"] { margin-top: 18px !important; }
body [data-id="13adec6"] p { margin: 0 !important; font-size: 16px !important; line-height: 1.4 !important; }
body [data-id="13adec6"] a { font-size: inherit !important; font-weight: 600 !important; }

/* Heroes on phones: even side margins, centred copy and a centred row of trust chips. */
@media (max-width: 767px) {
  .elementor-6 .elementor-element.elementor-element-69130b4 { --padding-left: 20px; --padding-right: 20px; --align-items: center; }
  .elementor-6 .elementor-element.elementor-element-f2c7bcb,
  .elementor-6 .elementor-element.elementor-element-f2c7bcb.elementor-element {
    width: 100% !important; max-width: 30em !important; --container-widget-width: 100%;
    margin-left: auto !important; margin-right: auto !important; --align-self: center;
    font-size: 18px !important; line-height: 1.55 !important;
  }
  .elementor-6 .elementor-element.elementor-element-f2c7bcb p { margin: 0 !important; }
  .elementor-6 .elementor-element.elementor-element-a0e5755,
  .elementor-6 .elementor-element.elementor-element-a0e5755.e-con {
    display: flex !important; flex-direction: row !important; flex-wrap: wrap !important;
    justify-content: center !important; align-items: center !important; gap: 10px 22px !important;
    width: 100% !important; margin: 20px 0 0 !important; padding: 0 !important;
  }
  .elementor-6 .elementor-element.elementor-element-a0e5755 > .elementor-widget { width: auto !important; flex: 0 0 auto !important; margin: 0 !important; }
  /* Same trust chips under the capsule and powder heroes. */
  body [data-id="58e2ef0"].e-con {
    display: flex !important; flex-direction: row !important; flex-wrap: wrap !important;
    justify-content: center !important; align-items: center !important; gap: 10px 22px !important;
    width: 100% !important; margin: 14px 0 0 !important; padding: 0 20px !important;
  }
  body [data-id="58e2ef0"] > .elementor-widget { width: auto !important; flex: 0 0 auto !important; margin: 0 !important; }
  .elementor-6 .elementor-element.elementor-element-aee2298,
  .elementor-6 .elementor-element.elementor-element-aee2298.e-con { --margin-right: 0px; margin-right: 0 !important; width: 100% !important; margin-top: 22px !important; }
  body :is([data-id="d820b1b"], [data-id="a0fd064"], [data-id="8b597f7"], [data-id="44b66e2"], [data-id="f9fe2fb"]) .elementor-button.elementor-button { font-size: 16px !important; min-height: 50px !important; word-spacing: normal !important; letter-spacing: 0 !important; }
}

/* Round 8 (2026-10-31): rounded ASIN demo, roomier capsule section, softer side cards, hero buttons before the trust badges. */
body .od-asin-demo {
  display: flex; align-items: stretch; gap: 10px; width: 100%; max-width: 570px; box-sizing: border-box;
  padding: 8px; border-radius: 20px; background: #0a7474; box-shadow: 0 14px 34px -18px rgba(11, 27, 52, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
body a:hover > .od-asin-demo { transform: translateY(-2px); box-shadow: 0 18px 40px -18px rgba(11, 27, 52, 0.55); }
body .od-asin-field {
  flex: 1 1 auto; display: flex; align-items: center; min-width: 0; min-height: 56px; padding: 0 20px;
  border-radius: 14px; background: #fff; color: #0b1b34;
  font: 700 26px/1 "Poppins", sans-serif; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden;
}
body .od-asin-caret { width: 2px; height: 1.05em; margin-left: 2px; background: #0a7474; animation: od-caret 1s steps(1) infinite; }
@keyframes od-caret { 50% { opacity: 0; } }
body .od-asin-btn {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center; padding: 0 26px;
  border-radius: 14px; background: #36d6cf; color: #0b1b34; font: 600 22px/1 "Poppins", sans-serif; white-space: nowrap;
}
@media (max-width: 767px) {
  body .od-asin-demo { padding: 6px; gap: 6px; border-radius: 16px; }
  body .od-asin-field { min-height: 46px; padding: 0 14px; font-size: 19px; border-radius: 11px; }
  body .od-asin-btn { padding: 0 16px; font-size: 17px; border-radius: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  body .od-asin-caret { animation: none; }
  body .od-asin-demo { transition: none; }
}

body .elementor-widget-icon-box .elementor-icon-box-wrapper,
body .elementor-widget-icon-box > .elementor-widget-container { border-radius: 24px !important; }
body :is([data-id="7c87e9e"], [data-id="dca02f4"]) { border-radius: 24px !important; }
/* Round 9 replaced the 88px bottom space here with equal space above and below (see the Round 9 block). */

/* Home hero: no "I already sell on Amazon" label; buttons right under the intro, badges below them. */
body [data-id="0715c05"], body [data-id="1d6db67"], body [data-id="eb47efa"] { display: none !important; }
body [data-id="a0e5755"] { order: 10 !important; }
body [data-id="d820b1b"] .elementor-button, body [data-id="d820b1b"] .elementor-button * { word-spacing: normal !important; letter-spacing: 0 !important; }
@media (min-width: 1025px) {
  .elementor-6 .elementor-element.elementor-element-aee2298 { margin-top: 30px !important; }
  .elementor-6 .elementor-element.elementor-element-a0e5755,
  .elementor-6 .elementor-element.elementor-element-a0e5755.e-con { --margin-top: 34px; margin-top: 34px !important; }
}
@media (max-width: 767px) {
  .elementor-6 .elementor-element.elementor-element-aee2298,
  .elementor-6 .elementor-element.elementor-element-aee2298.e-con { margin-top: 26px !important; }
  .elementor-6 .elementor-element.elementor-element-b10e406 { margin-top: 12px !important; }
  .elementor-6 .elementor-element.elementor-element-a0e5755,
  .elementor-6 .elementor-element.elementor-element-a0e5755.e-con { margin-top: 26px !important; }
}
body a:has(> .od-asin-demo) { display: block; width: 100%; max-width: 570px; }
@media (min-width: 1025px) {
  .elementor-6 .elementor-element.elementor-element-a0e5755,
  .elementor-6 .elementor-element.elementor-element-a0e5755.e-con { --padding-left: 0px; padding-left: 0 !important; }
}
/* The demo is HTML now, so its widget no longer gets its width from the GIF; keep the GIF's size. */
body .elementor-widget-image:has(.od-asin-demo) { width: 100% !important; max-width: 570px !important; --container-widget-width: 100%; }
/* The demo sits in columns from 330 to 570px wide: size its type to its own width so the code never clips. */
body .od-asin-demo { container-type: inline-size; }
body .od-asin-demo .od-asin-field { font-size: clamp(16px, 5cqi, 26px); padding: 0 clamp(12px, 3.5cqi, 20px); }
body .od-asin-demo .od-asin-btn { font-size: clamp(15px, 3.9cqi, 22px); padding: 0 clamp(14px, 4.4cqi, 26px); }
/* Tablet: the hero badges sit in one centred row instead of squeezed columns that split "Lab Tested". */
@media (min-width: 768px) and (max-width: 1024.98px) {
  .elementor-6 .elementor-element.elementor-element-a0e5755,
  .elementor-6 .elementor-element.elementor-element-a0e5755.e-con {
    display: flex !important; flex-direction: row !important; flex-wrap: wrap !important;
    justify-content: center !important; align-items: center !important; gap: 10px 24px !important;
    width: 100% !important; margin: 26px 0 0 !important; padding: 0 16px !important;
  }
  .elementor-6 .elementor-element.elementor-element-a0e5755 > .elementor-widget { width: auto !important; flex: 0 0 auto !important; margin: 0 !important; }
  .elementor-6 .elementor-element.elementor-element-a0e5755 .elementor-icon-list-text { white-space: nowrap; }
  .elementor-6 .elementor-element.elementor-element-aee2298 { margin-top: 26px !important; }
}
@media (min-width: 768px) and (max-width: 1024.98px) {
  .elementor-6 .elementor-element.elementor-element-69130b4 { --padding-left: 24px; --padding-right: 24px; --padding-top: 36px; --padding-bottom: 36px; }
  .elementor-6 .elementor-element.elementor-element-9f986d5 .elementor-heading-title { font-size: min(5.2vw, 56px) !important; line-height: 1.12 !important; }
  .elementor-6 .elementor-element.elementor-element-f2c7bcb { font-size: 19px !important; line-height: 1.55 !important; }
  .elementor-6 .elementor-element.elementor-element-aee2298,
  .elementor-6 .elementor-element.elementor-element-aee2298.e-con {
    display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 12px !important;
    width: 100% !important; margin-right: 0 !important; --margin-right: 0px;
  }
  .elementor-6 .elementor-element.elementor-element-aee2298 > .e-con,
  .elementor-6 .elementor-element.elementor-element-aee2298 > .e-con > .e-con { width: auto !important; flex: 0 0 auto !important; margin: 0 !important; }
  body :is([data-id="d820b1b"], [data-id="a0fd064"]) { width: auto !important; }
  body :is([data-id="d820b1b"], [data-id="a0fd064"]) .elementor-button.elementor-button { width: auto !important; white-space: nowrap; font-size: 16px !important; min-height: 50px !important; padding: 0 24px !important; }
}

/* Round 9: an evenly spaced capsule section, one button weight, modern quote cards, a pill link field,
   rounded photo tiles, centred animated steps and a tidy product-link block. */

/* Home capsule section: the same space above the title as below the buttons. */
body .elementor-element[data-id="f08cf8e"] { --padding-top: 56px; padding-top: 56px !important; }
body .elementor-element[data-id="d9f992a"] { --padding-bottom: 0px; padding-bottom: 86px !important; }

/* Every button uses the home weight (600); some inner labels carried ISC's 700 or 800. */
body .elementor-button :is(.elementor-button-text, .elementor-button-content-wrapper) { font-weight: inherit !important; font-family: inherit !important; }
body .elementor-button.elementor-button { font-weight: 600 !important; }
body .elementor-element.elementor-element .elementor-element.elementor-element .elementor-button .elementor-button-text { font-weight: inherit !important; }
body .ct-header-cta .ct-button.ct-button { font-weight: 600 !important; }

/* Quote cards on the instant quote page: a hairline border, soft depth and a gentle lift. */
body .elementor-element.elementor-element:is([data-id="464e349"], [data-id="31d105f"]) {
  border: 1px solid rgba(10, 116, 116, 0.18) !important;
  border-radius: 28px !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(11, 27, 52, 0.05), 0 28px 56px -32px rgba(11, 27, 52, 0.35) !important;
  transition: transform 0.35s var(--od-ease), box-shadow 0.35s var(--od-ease), border-color 0.35s ease !important;
}
@media (hover: hover) {
  body .elementor-element.elementor-element:is([data-id="464e349"], [data-id="31d105f"]):hover {
    transform: translateY(-4px) !important;
    border-color: rgba(10, 116, 116, 0.36) !important;
    box-shadow: 0 1px 2px rgba(11, 27, 52, 0.05), 0 36px 64px -30px rgba(11, 27, 52, 0.42) !important;
  }
}
body :is([data-id="464e349"], [data-id="31d105f"]) .elementor-widget-image img { border-radius: 18px !important; }

/* Product-link field: one rounded pill with the button inside it. */
body .asin-tool-wrapper { container-type: inline-size; }
body .asin-tool-search.asin-tool-search {
  display: flex !important; flex-direction: row !important; align-items: center !important; gap: 6px !important; height: auto !important;
  max-width: 560px; padding: 6px !important; box-sizing: border-box;
  background: #fff; border: 1px solid rgba(11, 27, 52, 0.16); border-radius: 999px;
  box-shadow: 0 12px 30px -20px rgba(11, 27, 52, 0.45);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
body .asin-tool-search.asin-tool-search:focus-within { border-color: var(--od-teal); box-shadow: 0 0 0 4px rgba(10, 116, 116, 0.16), 0 12px 30px -20px rgba(11, 27, 52, 0.45); }
body .asin-tool-search .asin-tool-input.asin-tool-input {
  flex: 1 1 auto; min-width: 0; height: 48px !important; padding: 0 8px 0 18px !important;
  border: 0 !important; border-radius: 999px; background: transparent !important; box-shadow: none !important; font-size: 16px;
}
body .asin-tool-search .asin-tool-input.asin-tool-input:focus { outline: none !important; }
body .asin-tool-search .asin-tool-button.asin-tool-button { flex: 0 0 auto; width: auto !important; margin: 0 !important; }
/* Narrow columns: field on top, full-width button below, same rounded language. */
@container (max-width: 420px) {
  body .asin-tool-search.asin-tool-search { flex-direction: column !important; align-items: stretch !important; border-radius: 26px; }
  body .asin-tool-search .asin-tool-button.asin-tool-button { width: 100% !important; }
}

/* Large photos get rounded corners across the site. */
body .elementor-widget-image img { border-radius: 20px; }
/* The four powder jars as separate rounded tiles cut from one picture (the white dividers are cropped). */
body .od-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, 1.4vw, 14px); width: 100%; max-width: 680px; aspect-ratio: 1; margin-inline: auto; }
body .od-tiles > span {
  border-radius: clamp(14px, 2vw, 22px); overflow: hidden;
  background-repeat: no-repeat; background-size: 201.6% 201.6%;
  box-shadow: 0 18px 36px -24px rgba(11, 27, 52, 0.45);
}
body .od-tiles > span:nth-child(2) { background-position: 100% 0; }
body .od-tiles > span:nth-child(3) { background-position: 0 100%; }
body .od-tiles > span:nth-child(4) { background-position: 100% 100%; }

/* "How Your Estimate Works": the three steps sit in one centred column. */
body .elementor-element.elementor-element:is([data-id="964663d"], [data-id="79a0b43"], [data-id="860e6b7"]) > .e-con-inner {
  max-width: 900px !important; margin-inline: auto !important; justify-content: center !important; align-items: flex-start !important; gap: 36px !important;
}
body :is([data-id="964663d"], [data-id="79a0b43"], [data-id="860e6b7"]) > .e-con-inner > .e-con:first-child { flex: 0 0 170px !important; width: 170px !important; max-width: 170px !important; position: relative; }
body :is([data-id="964663d"], [data-id="79a0b43"], [data-id="860e6b7"]) > .e-con-inner > .e-con:last-child { flex: 1 1 auto !important; width: auto !important; max-width: 694px !important; }
body :is([data-id="964663d"], [data-id="79a0b43"], [data-id="860e6b7"]) > .e-con-inner > .e-con:first-child .elementor-heading-title { white-space: nowrap; }
body :is([data-id="964663d"], [data-id="79a0b43"], [data-id="860e6b7"]) > .e-con-inner > .e-con:last-child h2.elementor-heading-title { line-height: 1.15 !important; }
body :is([data-id="964663d"], [data-id="79a0b43"], [data-id="860e6b7"]) > .e-con-inner > .e-con:first-child .elementor-widget { width: 100% !important; text-align: center !important; }
/* od-overrides.js draws a line between the numbers and plays the steps in, one after another. */
body .od-step-line {
  position: absolute; left: 50%; top: calc(100% + 10px); width: 2px; height: var(--od-line, 0px); margin-left: -1px;
  border-radius: 2px; background: linear-gradient(to bottom, rgba(10, 116, 116, 0.55), rgba(54, 214, 207, 0.15));
  transform-origin: top; pointer-events: none;
}
html.od-steps-on .od-step .od-step-num { opacity: 0; transform: translateY(16px) scale(0.86); transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1.15); }
html.od-steps-on .od-step .od-step-body { opacity: 0; transform: translateX(-16px); transition: opacity 0.6s ease 0.14s, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.14s; }
html.od-steps-on .od-step .od-step-line { transform: scaleY(0); transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.4s; }
html.od-steps-on .od-step.od-step-in :is(.od-step-num, .od-step-body) { opacity: 1; transform: none; }
html.od-steps-on .od-step.od-step-in .od-step-line { transform: scaleY(1); }
html.od-measure.od-steps-on .od-step :is(.od-step-num, .od-step-body, .od-step-line) { transform: none !important; transition: none !important; }
@media (max-width: 767px) {
  body .elementor-element.elementor-element:is([data-id="964663d"], [data-id="79a0b43"], [data-id="860e6b7"]) > .e-con-inner { gap: 18px !important; }
  /* Phones: the number sits above its title, on the same left edge. */
  body :is([data-id="964663d"], [data-id="79a0b43"], [data-id="860e6b7"]) > .e-con-inner > .e-con:first-child { flex-basis: auto !important; width: 100% !important; max-width: 100% !important; }
  body :is([data-id="964663d"], [data-id="79a0b43"], [data-id="860e6b7"]) > .e-con-inner > .e-con:first-child .elementor-widget { text-align: left !important; }
  body :is([data-id="964663d"], [data-id="79a0b43"], [data-id="860e6b7"]) > .e-con-inner > .e-con:first-child .elementor-heading-title { font-size: 64px !important; line-height: 1 !important; text-align: left !important; }
  body .od-step-line { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.od-steps-on .od-step :is(.od-step-num, .od-step-body, .od-step-line) { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* "Paste your product link" block: logo and form centred together, title over the field, both left aligned. */
body .elementor-element.elementor-element[data-id="9767843"] > .e-con-inner {
  max-width: 940px !important; margin-inline: auto !important; justify-content: center !important; align-items: center !important; gap: 48px !important;
}
body [data-id="af2ccf2"].e-con { flex: 0 0 220px !important; width: 220px !important; max-width: 220px !important; }
body [data-id="3f7c18a"].e-con { flex: 1 1 auto !important; width: auto !important; max-width: 600px !important; align-items: flex-start !important; gap: 22px !important; }
body [data-id="c4ff09c"] .elementor-heading-title { text-align: left !important; line-height: 1.2 !important; }
body [data-id="df55c2e"] { width: 100% !important; }
@media (max-width: 767px) {
  body .elementor-element.elementor-element[data-id="9767843"] > .e-con-inner { flex-direction: column !important; gap: 20px !important; }
  body [data-id="af2ccf2"].e-con { flex-basis: auto !important; width: 160px !important; max-width: 160px !important; }
  body [data-id="3f7c18a"].e-con { align-items: center !important; width: 100% !important; }
  body [data-id="c4ff09c"] .elementor-heading-title { text-align: center !important; }
  body [data-id="df55c2e"] .asin-tool-search { margin-inline: auto; }
}
/* Quote cards: text and picture centred on the card's height instead of hugging the top. */
body .elementor-element.elementor-element:is([data-id="464e349"], [data-id="31d105f"]) { justify-content: center !important; }
body .elementor-element.elementor-element:is([data-id="5989284"], [data-id="9ac1676"]) { align-items: center !important; }

/* ===== Round 10 ===== */

/* Capsule and powder heroes: the intro sat 80px above the buttons; now a normal 28px. */
body :is([data-id="c133d02"], [data-id="021778e"]) > .elementor-widget-container { margin-bottom: 8px !important; }

/* Capsule and powder pages: section titles started 150px down. Titles now open with the same
   space everywhere, and card rows keep real room before the next background starts. */
body :is([data-id="bba1a9e"], [data-id="16ff6ff"], [data-id="da28f68"], [data-id="ba49245"], [data-id="eebeac1"]) { margin-top: clamp(40px, 5.3vw, 76px) !important; }
body [data-id="1d7e143"] { margin-top: 0 !important; }
body :is([data-id="3f528e8"], [data-id="1bb9461"], [data-id="6e606fd"]) { --padding-bottom: clamp(40px, 4.4vw, 62px); }
body [data-id="386c96c"] { --padding-bottom: clamp(28px, 2.6vw, 38px); }
body .elementor-element[data-id="9fc4753"] { --padding-bottom: clamp(48px, 5.6vw, 80px); padding-bottom: clamp(48px, 5.6vw, 80px) !important; }

/* One FAQ design on every page: separate rounded cards, the body font, a round plus that turns into a minus. */
body .e-n-accordion.e-n-accordion { display: flex !important; flex-direction: column !important; gap: 12px !important; }
body .e-n-accordion details.e-n-accordion-item {
  border: 1px solid rgba(10, 116, 116, 0.18) !important;
  border-radius: 18px !important;
  background: #fff !important;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(11, 27, 52, 0.05) !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
body .e-n-accordion details.e-n-accordion-item[open] { border-color: rgba(10, 116, 116, 0.5) !important; box-shadow: 0 18px 40px -28px rgba(11, 27, 52, 0.4) !important; }
body .e-n-accordion details.e-n-accordion-item > summary.e-n-accordion-item-title {
  display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important;
  gap: 20px !important; margin: 0 !important; padding: 20px 22px 20px 26px !important;
  border: 0 !important; border-radius: 0 !important; background: transparent !important; cursor: pointer;
}
body .e-n-accordion details.e-n-accordion-item > summary.e-n-accordion-item-title:focus-visible { outline: 3px solid rgba(10, 116, 116, 0.45); outline-offset: -3px; border-radius: 18px !important; }
body .e-n-accordion .e-n-accordion-item-title-header { order: 0 !important; flex: 1 1 auto !important; }
body .e-n-accordion .e-n-accordion-item-title-text.e-n-accordion-item-title-text {
  font-family: inherit !important; font-size: var(--od-faq-q) !important; font-weight: 600 !important; line-height: 1.4 !important;
  color: #14233b !important; text-align: left !important;
}
body .e-n-accordion details[open] .e-n-accordion-item-title-text.e-n-accordion-item-title-text { color: #0a7474 !important; }
body .e-n-accordion .e-n-accordion-item-title-icon {
  order: 1 !important; position: relative; flex: 0 0 34px !important; width: 34px !important; height: 34px !important;
  border-radius: 999px; background: rgba(10, 116, 116, 0.1); transition: background 0.25s ease, transform 0.3s var(--od-ease, ease);
}
body .e-n-accordion .e-n-accordion-item-title-icon > span { display: none !important; }
body .e-n-accordion .e-n-accordion-item-title-icon::before,
body .e-n-accordion .e-n-accordion-item-title-icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 2px; background: #0a7474;
  transition: transform 0.3s var(--od-ease, ease), background 0.25s ease;
}
body .e-n-accordion .e-n-accordion-item-title-icon::after { transform: rotate(90deg); }
body .e-n-accordion details[open] .e-n-accordion-item-title-icon { background: #0a7474; }
body .e-n-accordion details[open] .e-n-accordion-item-title-icon::before,
body .e-n-accordion details[open] .e-n-accordion-item-title-icon::after { background: #fff; }
body .e-n-accordion details[open] .e-n-accordion-item-title-icon::after { transform: rotate(0deg); }
body .e-n-accordion details.e-n-accordion-item > [role="region"] {
  margin: 0 !important; padding: 0 26px 22px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important;
}
body .e-n-accordion [role="region"] :is(p, li, .elementor-heading-title) {
  font-family: inherit !important; font-size: var(--od-faq-a) !important; font-weight: 400 !important; line-height: 1.7 !important; color: #3b4a60 !important; text-align: left !important;
}
body .e-n-accordion [role="region"] .elementor-widget-container { margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
@media (hover: hover) {
  body .e-n-accordion details.e-n-accordion-item:not([open]):hover { border-color: rgba(10, 116, 116, 0.4) !important; }
  body .e-n-accordion details:not([open]) > summary:hover .e-n-accordion-item-title-icon { background: rgba(10, 116, 116, 0.18); }
}
@media (max-width: 767px) {
  body .e-n-accordion details.e-n-accordion-item > summary.e-n-accordion-item-title { padding: 16px 16px 16px 20px !important; gap: 14px !important; }
  body .e-n-accordion details.e-n-accordion-item > [role="region"] { padding: 0 20px 18px !important; }
}
@media (prefers-reduced-motion: reduce) {
  body .e-n-accordion .e-n-accordion-item-title-icon,
  body .e-n-accordion .e-n-accordion-item-title-icon::before,
  body .e-n-accordion .e-n-accordion-item-title-icon::after { transition: none !important; }
}
/* Powder page only: the flavor photo touched the white packaging band below it. */
body [data-id="0b57794"]:has([data-id="b114d5a"]) > .e-con-inner { padding-bottom: clamp(48px, 5.6vw, 80px) !important; }
/* Same FAQ on every page: drop ISC's grey outer box and open-row tint, same width and same gap between questions. */
body .e-n-accordion.e-n-accordion.e-n-accordion { background: transparent !important; border: 0 !important; border-radius: 0 !important; overflow: visible !important; max-width: 880px; margin-inline: auto !important; }
body .e-n-accordion.e-n-accordion details.e-n-accordion-item.e-n-accordion-item { margin: 0 !important; }
body .e-n-accordion.e-n-accordion details.e-n-accordion-item[open] > summary.e-n-accordion-item-title.e-n-accordion-item-title { background: transparent !important; }
body .e-n-accordion [role="region"] .elementor-element { width: 100% !important; max-width: 100% !important; --container-widget-width: 100% !important; }
/* Capsule and powder: same breathing room under the FAQ title as the instant quote page (about 50px desktop, 33px phone). */
body :is([data-id="053c19f"], [data-id="459a85d"]) .e-n-accordion.e-n-accordion.e-n-accordion { margin-top: clamp(12px, 2vw, 30px) !important; }
body .e-n-accordion details.e-n-accordion-item > [role="region"] { width: 100% !important; max-width: none !important; --width: 100% !important; --content-width: 100% !important; }
/* Capsule "More Than Encapsulation": the photo touched the white packaging band, same fix as the powder flavor block. */
body [data-id="0b57794"] > .e-con-inner { padding-bottom: clamp(48px, 5.6vw, 80px) !important; }

/* Round 11: footer. Seven page links in two columns on desktop and tablet so the footer keeps its old height. */
@media (min-width: 690px) {
  body #footer #menu-footer_manufacturing { display: grid !important; grid-template-columns: repeat(2, max-content); grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: clamp(24px, 3vw, 48px); row-gap: 12.5px; }
}
/* Tablet and phone: the stacked footer kept the desktop column gap (about 140px) as empty space between blocks. */
@media (max-width: 999.98px) {
  body #footer [data-row] > .ct-container { row-gap: 28px !important; }
  body #footer [data-row="top"] > .ct-container { padding-top: 0 !important; min-height: 0 !important; height: auto !important; grid-template-rows: auto !important; }
  body #footer [data-row="top"] [data-column="widget-area-3"] { min-height: 0 !important; height: auto !important; justify-content: flex-start !important; }
  /* Their headings sat far from their content once stacked; the links and the call to action read fine without them. */
  body #footer [data-row="top"] :is([data-column="widget-area-4"], [data-column="widget-area-2"]) { display: none !important; }
  body #footer [data-row="top"] [data-column="widget-area-3"] figure { margin: 0 !important; }
}

/* Round 12: the page body stays hidden until od-overrides.js has moved buttons, spacing and the hero
   into place, so the first screen never jumps. Shown anyway after 2.5s if the script never runs. */
html.od-prep [data-elementor-type="wp-page"] { visibility: hidden; animation: od-unhide 0s linear 2.5s forwards; }
@keyframes od-unhide { to { visibility: visible; } }

/* Round 13: videos. Elementor paints every video box black until its first frame arrives, and the home
   hero video only faded at the sides, so a slow load showed a black block with hard top and bottom edges.
   Boxes are transparent now, each video fades in once it has a frame (od-overrides.js), and the home hero
   video also fades out at the top and bottom so it melts into the grey hero. */
.elementor-widget-video .elementor-wrapper video { background-color: transparent !important; }
#home-hero-video video {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 40%, #000 75%, transparent 100%),
                      linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 40%, #000 75%, transparent 100%),
              linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
html.od-vid-js .elementor-widget-video video { transition: opacity .6s ease; }
html.od-vid-js .elementor-widget-video video:not(.od-vid-ready) { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  html.od-vid-js .elementor-widget-video video { transition: none; }
}

/* Round 14: the home hero sits on the page's light blue (the body colour that shows in the
   "Powder & Capsule Manufacturing Capabilities" section) instead of ISC's grey. The video keeps its own
   grey backdrop, so it is brightened until that grey is white and multiplied onto the hero colour. */
body .elementor-6 .elementor-element.elementor-element-826bcb0 { background: rgb(250, 251, 252) !important; }
#home-hero-video video { filter: brightness(1.12); mix-blend-mode: multiply; }
/* Blocksy left 60px of page colour under the last section, a pale strip right above the footer. */
body .site-main > .ct-container-full { padding-bottom: 0 !important; }
/* About us reads centred, like its title. */
.elementor-39 .elementor-element-3e2707a .elementor-widget-container { text-align: center; }
/* Contact, About us and Quote end on the page colour itself, so they keep that space as their own padding. */
body:is(.page-id-37, .page-id-39, .page-id-2675) [data-elementor-type="wp-page"] { padding-bottom: 60px; }

/* Round 15: the capsule quote button and "Explore" link sit under the capsule sizes note
   (moved there by the Round 15 IIFE in od-overrides.js from 768px up). The column is narrower
   than the pair, so the link wraps under the button: a gap instead of a left margin keeps both
   on the same left edge as the note. */
body .od-cta-row.od-cta-under-sizes { margin-top: 8px !important; gap: 14px 24px; }
body .od-cta-row.od-cta-under-sizes > .elementor-element { margin-left: 0 !important; }
/* Round 16: the user wants the button and the "Explore" link on one line. The pair (about 470px)
   is wider than the sizes column on laptops, so from 1100px the left column grows from 39% to 46% (43% from 1360px)
   and the row may use 20px of the 34px gutter before the cards. Below that (tablets) the link
   still wraps under the button rather than crowding the cards. */
body .od-cta-row.od-cta-under-sizes { gap: 14px 20px; width: max-content !important; max-width: calc(100% + 20px) !important; }
body .od-cta-row.od-cta-under-sizes .isc-text-link { white-space: nowrap; }
@media (min-width: 1100px) {
  body .elementor-6 .elementor-element.elementor-element-54659a0 { --width: 46%; }
}
@media (min-width: 1360px) {
  body .elementor-6 .elementor-element.elementor-element-54659a0 { --width: 43%; }
}

/* Round 17: every section title is navy; teal is only for one emphasised word (like the hero). */
body :is([data-id="3f9e54e"], [data-id="6b42a37"], [data-id="71adba4"], [data-id="c2cb199"]) .elementor-heading-title.elementor-heading-title { color: #14233b !important; }
/* Round 17: "More Than Encapsulation" / "Flavor Development..." had 62px line spacing on a 38px title. */
body [data-id="c2cb199"] .elementor-heading-title.elementor-heading-title { line-height: 1.2 !important; }
/* Round 17: home tabs. The text column stretches to the photo's height and its widgets grew to
   fill it, which left empty bands around the title and paragraph. Widgets keep their own height
   and the text block is centred against the photo instead. Titles sit on the left like the text. */
body .elementor-6 [data-id="504eecf"] .e-n-tabs-content .e-con > .elementor-widget { flex-grow: 0 !important; }
body .elementor-6 [data-id="504eecf"] .e-n-tabs-content :is([data-id="c9b278c"], [data-id="8cead85"]),
body .elementor-6 [data-id="504eecf"] .e-n-tabs-content :is([data-id="c9b278c"], [data-id="8cead85"]) .elementor-heading-title { text-align: left !important; }
/* Round 17: the "Discuss My ... Concept" link is now a filled button like "Submit My Formula". */
body .od-filled-cta .elementor-button { background-color: rgb(10, 116, 116); color: #fff; border-radius: 999px; font-size: 17px; font-weight: 600;
  min-height: 54px; padding: 0 30px; display: inline-flex; align-items: center; text-decoration: none; }
body .od-filled-cta .elementor-button:is(:hover, :focus-visible) { background-color: #085e5e; color: #fff; }
/* Round 17: the phone did not fit above "Get a quote" in the desktop header (the row is hidden).
   Round 18 shows it behind a phone icon instead; the footer keeps it too. */
[data-header*="type-1"] .ct-header [data-device="desktop"] [data-row="middle"] { display: none !important; }

/* Round 18: phone icon between search and "Get a quote"; a click opens a small card with the number. */
body .od-header-phone { position: relative; display: flex; align-items: center; margin: 0 10px 0 0 !important; }
body .od-phone-toggle { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; margin: 0;
  border: 0; background: none; color: rgb(58, 79, 102); cursor: pointer; border-radius: 4px; }
body .od-phone-toggle svg { width: 20px; height: 20px; display: block; }
body .od-phone-toggle:hover, body .od-phone-toggle[aria-expanded="true"] { color: rgb(10, 116, 116); background: none; }
body .od-phone-toggle:focus-visible { outline: 2px solid rgb(10, 116, 116); outline-offset: 4px; }
body .od-phone-card { position: absolute; top: calc(100% + 18px); right: -10px; z-index: 60; display: flex; flex-direction: column; gap: 2px;
  min-width: 210px; padding: 14px 18px; background: #fff; border: 1px solid #e3e9ef; border-radius: 12px;
  box-shadow: 0 12px 32px rgba(17, 40, 75, 0.14); text-align: left; white-space: nowrap; }
body .od-phone-card[hidden] { display: none; }
body .od-phone-card::before { content: ""; position: absolute; top: -7px; right: 13px; width: 12px; height: 12px; background: #fff;
  border-left: 1px solid #e3e9ef; border-top: 1px solid #e3e9ef; transform: rotate(45deg); }
body .od-phone-label { font-size: 13px; font-weight: 500; color: #5b6b7f; letter-spacing: 0.02em; }
body .od-phone-number { font-size: 20px; font-weight: 700; line-height: 1.3; color: #14233b; text-decoration: none; }
body .od-phone-number:hover, body .od-phone-number:focus-visible { color: rgb(10, 116, 116); text-decoration: underline; text-underline-offset: 3px; }

/* Round 19: copy-to-clipboard button right next to the number in the phone card. */
body .od-phone-row { display: flex; align-items: center; gap: 10px; }
body .od-phone-copy { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; padding: 0; margin: 0; border: 1px solid #e3e9ef; border-radius: 8px; background: #fff; color: rgb(58,79,102); cursor: pointer; transition: color .15s ease, border-color .15s ease, background-color .15s ease; }
body .od-phone-copy svg { width: 18px; height: 18px; display: block; }
body .od-phone-copy .od-check-icon { display: none; }
body .od-phone-copy:hover { color: rgb(10,116,116); border-color: rgb(10,116,116); background: #fff; }
body .od-phone-copy:focus-visible { outline: 2px solid rgb(10,116,116); outline-offset: 2px; }
body .od-phone-copy.is-copied { color: #fff; background: rgb(10,116,116); border-color: rgb(10,116,116); }
body .od-phone-copy.is-copied .od-copy-icon { display: none; }
body .od-phone-copy.is-copied .od-check-icon { display: block; }
body .od-phone-label.is-copied { color: rgb(10,116,116); }
body .od-phone-status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) { body .od-phone-copy { transition: none; } }