:root {
  /* Figma variables — Navigation */
  --enlish-cream-89: rgba(255, 249, 241, 0.89);
  --venice-blue: #005789;

  /* Navigation tokens */
  --nav-height: 45px;
  --nav-font-size: 16px;
  --nav-line-height: 20px;
  --nav-gap: 30px;
  --nav-padding-left: 32.29%;
  --nav-padding-right: 9.03%;

  /* Figma variables — Hero */
  --abstract-red: #e24814;
  --bridal-heath: #fff9f3;

  /* Hero tokens */
  --hero-height: 635px;
  --hero-overlay-dark: rgba(35, 31, 32, 0.6);
  --hero-bg-offset-top: -248px;
  --hero-logo-width: 340px;
  --hero-logo-height: 143px;

  /* Figma variables — Fifty-Fifty V1 */
  --attractive-black: #231f20;
  --white: #ffffff;
  --royal-white: #fdfdfd;

  /* Fifty-Fifty V1 layout tokens */
  --fifty-pad-x: 112px;
  --fifty-pad-y: 80px;
  --fifty-section-gap: 25px;
  --fifty-col-gap: 20px;
  --fifty-content-gap: 24px;
  --fifty-image-gap: 15px;
  --fifty-subhead-size: 60px;
  --fifty-body-size: 21px;
  --fifty-body-lh: 28px;
  --fifty-body-tracking: 0.21px;
  --fifty-left-width: 700px;
  --fifty-right-width: 460px;
  --fifty-img-width: 459px;
  --fifty-img-height: 378px;

  /* Figma variables — Fifty-Fifty V2 */
  --beautiful-white: #f7f7f7;
  --bright-black: #202124;

  /* Fifty-Fifty V2 layout tokens */
  --ff2-pad-top: 80px;
  --ff2-pad-bottom: 80px;
  --ff2-pad-x: 130px;
  --ff2-col-gap: 72px;
  --ff2-content-gap: 31px;
  --ff2-btn-gap: 31px;
  --ff2-eyebrow-size: 20px;
  --ff2-eyebrow-lh: 24px;
  --ff2-heading-width: 70%;
  --ff2-cta-size: 16px;
  --ff2-btn-width: 259px;
  --ff2-btn-height: 34px;
  --ff2-img-width: 460px;
  --ff2-img-height: 456px;

  /* Figma variables — Fifty-Fifty V3 */
  --sweet-grey: #d9d9d9;

  /* Fifty-Fifty V3 layout tokens */
  --ff3-pad-top: 80px;
  --ff3-pad-bottom: 80px;
  --ff3-pad-x: 130px;
  --ff3-col-gap: 20px;
  --ff3-content-gap: 25px;
  --ff3-body-width: 632px;
  --ff3-img-width: 468px;
  --ff3-img-height: 584px;

  /* Figma variables — Fifty-Fifty V4 */
  --tech-white: #f5f5f5;
  --simple-light-blue: #d1eefc;

  /* Fifty-Fifty V4 layout tokens */
  --ff4-pad-top: 80px;
  --ff4-pad-bottom: 85px;
  --ff4-pad-left: 130px;
  --ff4-pad-right: 134px;
  --ff4-content-gap: 25px;
  --ff4-body-width: 580px;
  --ff4-table-metric: 282px;
  --ff4-table-value: 298px;
  --ff4-table-row-h: 82px;
  --ff4-table-hdr-size: 24px;
  --ff4-img-width: 534px;
  --ff4-img-height: 561px;

  /* Video Section layout tokens */
  --video-pad: 80px;
  --video-gap: 40px;
  --video-heading-h: 54px;
  --video-block-w: 940px;
  --video-block-h: 528px;
  --video-band-h: 50px;
  --video-radius: 25px;

  /* Sixty-Forty V2 layout tokens */
  --sf2-image-w: 590px;
  --sf2-content-w: 850px;
  --sf2-content-py: 83px;
  --sf2-content-pl: 78px;
  --sf2-content-pr: 96px;
  --sf2-content-gap: 15px;
  --sf2-eyebrow-size: 20px;
  --sf2-eyebrow-lh: 24px;

  /* Sixty-Forty V1 layout tokens */
  --sf1-section-h: 557px;
  --sf1-pt: 40px;
  --sf1-pl: 130px;
  --sf1-container-gap: 20px;
  --sf1-content-w: 700px;
  --sf1-content-gap: 18px;
  --sf1-eyebrow-size: 20px;
  --sf1-eyebrow-lh: 24px;
  --sf1-body-gap: 28px;
  --sf1-image-w: 590px;
  --sf1-image-h: 517px;
  --sf1-image-px: 65px;
  --sf1-image-py: 115px;
  --sf1-img-w: 269.75%;
  --sf1-img-h: 172.92%;
  --sf1-img-left: -4.09%;
  --sf1-img-top: -39.44%;
  --sf1-card-w: 460px;
  --sf1-card-h: 173px;
  --sf1-card-radius: 10px;
  --sf1-card-pt: 31px;
  --sf1-card-pb: 30px;
  --sf1-card-pl: 22px;
  --sf1-card-pr: 38px;
  --sf1-card-gap: 10px;
  --sf1-card-title-size: 36px;
  --sf1-card-title-lh: 42px;
  --sf1-card-body-size: 14px;
  --sf1-card-body-lh: 20px;
  --sf1-card-body-w: 399px;

  /* Cards V3 layout tokens */
  --cv3-pad-y: 80px;
  --cv3-pad-x: 130px;
  --cv3-outer-gap: 40px;
  --cv3-top-col-gap: 19px;
  --cv3-top-row-gap: 30px;
  --cv3-result-h: 197px;
  --cv3-result-radius: 20px;
  --cv3-result-pt: 31px;
  --cv3-result-pb: 34px;
  --cv3-result-pl: 44px;
  --cv3-result-pr: 65px;
  --cv3-result-icon-gap: 44px;
  --cv3-result-icon-size: 109px;
  --cv3-result-title-size: 36px;
  --cv3-result-title-lh: 42px;
  --cv3-result-list-gap: 10px;
  --cv3-result-list-pl: 21px;
  --cv3-bottom-gap: 30px;
  --cv3-subhead-size: 40px;
  --cv3-subhead-lh: 48px;
  --cv3-subhead-w: 700px;
  --cv3-field-card-gap: 20px;
  --cv3-field-w: 373px;
  --cv3-field-h: 143px;
  --cv3-field-radius: 20px;
  --cv3-field-pt: 20px;
  --cv3-field-pl: 20px;
  --cv3-field-pr: 53px;
  --cv3-field-pb: 26px;
  --cv3-field-icon-gap: 20px;
  --cv3-field-icon-size: 60px;
  --cv3-field-title-size: 24px;
  --cv3-field-title-lh: 32px;
  --cv3-field-text-gap: 10px;
  --cv3-body-size: 14px;
  --cv3-body-lh: 20px;

  /* Cards V2 layout tokens */
  --cv2-pad-top: 35px;
  --cv2-pad-bottom: 41px;
  --cv2-pad-x: 10px;
  --cv2-gap: 28px;
  --cv2-card-gap: 20px;
  --cv2-card-w: 460px;
  --cv2-card-h: 173px;
  --cv2-card-radius: 10px;
  --cv2-card-pt: 31px;
  --cv2-card-pl: 22px;
  --cv2-card-pr: 38px;
  --cv2-card-pb: 30px;
  --cv2-card-content-gap: 10px;
  --cv2-card-title-size: 36px;
  --cv2-card-title-lh: 42px;
  --cv2-card-body-size: 14px;
  --cv2-card-body-lh: 20px;
  --cv2-card-body-w: 399px;
  --cv2-btn-w: 259px;
  --cv2-btn-h: 34px;
  --cv2-btn-size: 16px;
  --cv2-btn-radius: 102px;

  /* Cards V1 layout tokens */
  --cv1-section-h: 350px;
  --cv1-container-h: 300px;
  --cv1-container-pt: 21px;
  --cv1-container-pl: 17px;
  --cv1-card-gap: 20px;
  --cv1-card-h: 256px;
  --cv1-card-radius: 10px;
  --cv1-card-pt: 10px;
  --cv1-card-pl: 22px;
  --cv1-card-pr: 32px;
  --cv1-card-pb: 35px;
  --cv1-narrow-w: 330px;
  --cv1-wide-w: 340px;
  --cv1-stat-size: 60px;
  --cv1-stat-lh: 50px;
  --cv1-stat-sup-size: 38.7px;
  --cv1-subhead-size: 36px;
  --cv1-subhead-lh: 42px;
  --cv1-body-size: 16px;
  --cv1-body-lh: 19px;
  --cv1-body-tracking: 0.16px;
  --cv1-content-gap: 2px;

  /* Figma variables — Card Columns */
  --dark-chocolate: #35241f;
  --tender-coral: #f1cfc3;

  /* Card Columns layout tokens */
  --cc-pad-top: 80px;
  --cc-pad-bottom: 80px;
  --cc-pad-x: 130px;
  --cc-outer-gap: 26px;
  --cc-top-gap: 14px;
  --cc-bottom-gap: 24px;
  --cc-heading-size: 60px;
  --cc-body-width: 1060px;
  --cc-table-col1-w: 393px;
  --cc-table-col2-w: 394px;
  --cc-table-col3-w: 393px;
  --cc-table-row-h: 82px;
  --cc-table-hdr-size: 24px;
  --cc-card-w: 1180px;
  --cc-card-radius: 10px;
  --cc-card-pb: 34px;
  --cc-card-pt: 30px;
  --cc-card-pl: 30px;
  --cc-card-pr: 35px;
  --cc-card-inner-gap: 35px;
  --cc-card-row-gap: 20px;
  --cc-card-col1-w: 310px;
  --cc-card-col2-w: 309px;
  --cc-card-col3-w: 456px;
  --cc-card-col-gap: 3px;
  --cc-card-title-size: 40px;
  --cc-card-title-lh: 48px;
  --cc-card-label-size: 24px;

  /* Three-Column Highlights tokens */
  --tch-pad-x: 130px;
  --tch-pad-y: 80px;
  --tch-outer-gap: 50px;
  --tch-eyebrow-size: 20px;
  --tch-eyebrow-lh: 24px;
  --tch-eyebrow-w: 340px;
  --tch-heading-size: 60px;
  --tch-heading-w: 580px;
  --tch-body-size: 21px;
  --tch-body-lh: 28px;
  --tch-body-tracking: 0.21px;
  --tch-body-w: 868px;
  --tch-content-gap: 18px;
  --tch-highlights-gap: 40px;
  --tch-highlight-gap: 16px;
  --tch-bar-w: 10px;
  --tch-bar-h: 68px;
  --tch-title-size: 40px;
  --tch-title-w: 294px;
  --tch-text-gap: 12px;
  --tch-highlight-body-size: 21px;
  --tch-highlight-body-lh: 28px;
  --tch-highlight-body-w: 308px;
  --tch-btn-w: 259px;
  --tch-btn-h: 34px;
  --tch-btn-size: 16px;
  --tch-btn-radius: 102px;

  /* Two-Column Highlights tokens */
  --tch2-pad-left: 130px;
  --tch2-pad-right: 371px;
  --tch2-pad-y: 80px;
  --tch2-outer-gap: 37px;
  --tch2-heading-size: 60px;
  --tch2-heading-w: 580px;
  --tch2-intro-size: 21px;
  --tch2-intro-lh: 28px;
  --tch2-intro-tracking: 0.21px;
  --tch2-intro-w: 803px;
  --tch2-grid-col-gap: 19px;
  --tch2-grid-row-gap: 60px;
  --tch2-grid-w: 939px;
  --tch2-bar-w: 10px;
  --tch2-bar-h: 122px;
  --tch2-bar-h-short: 93px;
  --tch2-highlight-gap: 20px;
  --tch2-title-size: 40px;
  --tch2-title-w: 294px;
  --tch2-title-w-wide: 430px;
  --tch2-text-gap: 12px;
  --tch2-body-size: 21px;
  --tch2-body-lh: 28px;
  --tch2-body-tracking: 0.21px;
  --tch2-body-w: 428px;
  --tch2-btn-w: 259px;
  --tch2-btn-h: 34px;
  --tch2-btn-size: 16px;
  --tch2-btn-radius: 102px;

  /* Two-Column Content tokens */
  --tcc-pt: 80px;
  --tcc-pb: 58px;
  --tcc-px: 130px;
  --tcc-col-gap: 20px;
  --tcc-col-w: 580px;
  --tcc-heading-size: 60px;
  --tcc-content-gap: 19px;
  --tcc-underline-w: 279px;
  --tcc-underline-w-2: 385px;
  --tcc-underline-h: 10px;
  --tcc-body-size: 21px;
  --tcc-body-lh: 28px;
  --tcc-body-tracking: 0.21px;
  --tcc-body-w: 460px;
  --tcc-list-indent: 31.5px;

  /* Footer tokens */
  --footer-pt: 27px;
  --footer-pb: 119px;
  --footer-pl: 130px;
  --footer-pr: 130px;
  --footer-logo-w: 152px;
  --footer-logo-h: 68px;
  --footer-top-gap: 88px;
  --footer-rows-gap: 78px;
  --footer-body-size: 14px;
  --footer-col1-w: 240px;
  --footer-col2-w: 240px;
  --footer-bottom-max-w: 820px;

  /* Fifty-Fifty V5 tokens */
  --ff5-pt: 80px;
  --ff5-pb: 80px;
  --ff5-px: 130px;
  --ff5-outer-gap: 33px;
  --ff5-heading-size: 60px;
  --ff5-col-gap: 23px;
  --ff5-left-w: 577px;
  --ff5-left-gap: 40px;
  --ff5-body-w: 557px;
  --ff5-body-size: 21px;
  --ff5-body-lh: 28px;
  --ff5-body-tracking: 0.21px;
  --ff5-right-w: 579px;
  --ff5-right-h: 272px;
  --ff5-right-radius: 10px;
  --ff5-right-pt: 30px;
  --ff5-right-pb: 32px;
  --ff5-right-px: 30px;
  --ff5-card-body-size: 19px;
  --ff5-card-body-lh: 24px;
  --ff5-card-body-tracking: 0.19px;
  --ff5-card-list-indent: 28.5px;

  /* Card Image V1 tokens */
  --civ1-px: 130px;
  --civ1-py: 80px;
  --civ1-outer-gap: 80px;
  --civ1-top-gap: 32px;
  --civ1-eyebrow-size: 20px;
  --civ1-eyebrow-lh: 24px;
  --civ1-eyebrow-w: 340px;
  --civ1-heading-size: 60px;
  --civ1-heading-w: 1060px;
  --civ1-body-size: 21px;
  --civ1-body-lh: 28px;
  --civ1-body-tracking: 0.21px;
  --civ1-body-w: 868px;
  --civ1-card-row-gap: 20px;
  --civ1-sm-card-w: 373px;
  --civ1-sm-card-h: 173px;
  --civ1-sm-card-radius: 10px;
  --civ1-sm-card-pt: 31px;
  --civ1-sm-card-pb: 51px;
  --civ1-sm-card-pl: 22px;
  --civ1-sm-card-pr: 33px;
  --civ1-sm-card-title-size: 36px;
  --civ1-sm-card-title-lh: 42px;
  --civ1-sm-card-text-gap: 10px;
  --civ1-sm-body-size: 14px;
  --civ1-sm-body-lh: 20px;
  --civ1-sm-body-w: 317px;
  --civ1-bottom-gap: 42px;
  --civ1-bottom-heading-w: 940px;
  --civ1-grid-col-gap: 22px;
  --civ1-grid-row-gap: 30px;
  --civ1-grid-w: 1180px;
  --civ1-img-card-w: 579px;
  --civ1-img-card-h: 238px;
  --civ1-img-card-radius: 10px;
  --civ1-img-card-pl: 221px;
  --civ1-img-card-pt: 40px;
  --civ1-img-card-pb: 28px;
  --civ1-img-card-pr: 38px;
  --civ1-img-card-title-size: 40px;
  --civ1-img-card-text-gap: 10px;
  --civ1-img-card-body-size: 21px;
  --civ1-img-card-body-lh: 28px;
  --civ1-img-card-body-tracking: 0.21px;
  --civ1-img-card-body-w: 320px;
  --civ1-photo-wrap-w: 210px;
  --civ1-photo-mask-w: 181px;
  --civ1-photo-mask-h: 237px;

  /* Card Image V2 tokens */
  --civ2-pt: 104px;
  --civ2-pb: 80px;
  --civ2-px: 130px;
  --civ2-inner-gap: 45px;
  --civ2-heading-size: 60px;
  --civ2-heading-w: 1060px;
  --civ2-body-size: 21px;
  --civ2-body-lh: 28px;
  --civ2-body-tracking: 0.21px;
  --civ2-body-w: 868px;
  --civ2-grid-col-gap: 21px;
  --civ2-grid-row-gap: 30px;
  --civ2-grid-w: 1180px;
  --civ2-card-w: 579px;
  --civ2-card-h: 238px;
  --civ2-card-radius: 10px;
  --civ2-img-panel-w: 181px;
  --civ2-img-panel-py: 27px;
  --civ2-img-panel-px: 20px;
  --civ2-doc-w: 141px;
  --civ2-doc-h: 183px;
  --civ2-card-pl: 40px;
  --civ2-card-pt: 40px;
  --civ2-card-pb: 20px;
  --civ2-card-pr: 38px;
  --civ2-card-title-size: 40px;
  --civ2-card-text-gap: 26px;
  --civ2-card-body-size: 21px;
  --civ2-card-body-lh: 28px;
  --civ2-card-body-tracking: 0.21px;
  --civ2-card-link-size: 30px;
  --civ2-card-link-tracking: 0.3px;

  /* Figma variables — Accordion V2 */
  --accordion-border: #d4d0c8;

  /* Accordion V2 tokens */
  --acc2-pt: 80px;
  --acc2-pb: 80px;
  --acc2-px: 130px;
  --acc2-outer-gap: 34px;
  --acc2-heading-size: 60px;
  --acc2-heading-w: 700px;
  --acc2-container-gap: 30px;
  --acc2-container-w: 1180px;
  --acc2-item-radius: 10px;
  --acc2-item-p: 30px;
  --acc2-item-gap: 12px;
  --acc2-q-size: 30px;
  --acc2-q-lh: 36px;
  --acc2-answer-size: 21px;
  --acc2-answer-lh: 28px;
  --acc2-answer-tracking: 0.21px;


  /* Cards V4 tokens */
  --cv4-pt: 70px;
  --cv4-pb: 70px;
  --cv4-px: 126px;
  --cv4-outer-gap: 41px;
  --cv4-heading-size: 60px;
  --cv4-intro-gap: 13px;
  --cv4-body-size: 21px;
  --cv4-body-lh: 28px;
  --cv4-body-tracking: 0.21px;
  --cv4-body-w: 895px;
  --cv4-card-gap: 19px;
  --cv4-card-radius: 10px;
  --cv4-card-px: 36px;
  --cv4-card-py: 28px;
  --cv4-card-w: 381px;
  --cv4-inner-gap: 16px;
  --cv4-icon-size: 48px;
  --cv4-icon-radius: 10px;
  --cv4-icon-px: 11.2px;
  --cv4-title-size: 16px;
  --cv4-title-lh: 24px;
  --cv4-title-tracking: -0.3125px;
  --cv4-desc-size: 14px;
  --cv4-desc-lh: 20px;
  --cv4-desc-tracking: -0.1504px;
  --cv4-btn-radius: 3px;
  --cv4-btn-h: 38px;
  --cv4-btn-size: 16px;
  --cv4-btn-lh: 26px;
  --cv4-btn-tracking: -0.3125px;
  --cv4-btn-icon-gap: 10px;
  --cv4-fn-size: 12px;
  --cv4-fn-lh: 16px;
  --cv4-fn-tracking: -0.3125px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Inter", sans-serif;
}

div,
section,
article,
ul,
li,
h1,
h2,
h3,
a,
p,
span {
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}

/* ── Header ──────────────────────────────────────────────────────── */

.site-header {
  width: 100%;
  background-color: var(--enlish-cream-89);
  position: relative;
  padding: 20px 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
}

/* ── Nav ─────────────────────────────────────────────────────────── */

.site-nav {
  height: 100%;
  padding-left: var(--nav-padding-left);
  padding-right: 0;
  display: flex;
  align-items: center;
  justify-content: end;
}

/* ── Nav links list ──────────────────────────────────────────────── */

.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
  white-space: nowrap;
}

.nav-links a {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: var(--nav-font-size);
  line-height: var(--nav-line-height);
  color: var(--venice-blue);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0;
  display: block;
}

.nav-links a:hover,
.nav-links a:focus-visible {
  opacity: 0.75;
  outline: none;
  text-decoration: underline;
}

/* ── Hero ────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  width: 100%;
  height: var(--hero-height);
  overflow: hidden;
  margin-top: 60px;
}

/*
 * Background: the field photo container is slightly wider than the hero
 * (-0.35% on each side = -5px) and begins 248px above the frame so the
 * visible crop starts at the mid-field. scaleX(-1) mirrors it to match
 * the Figma design direction.
 */
.hero__bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

/* Gradient: clear at the top, dark (35,31,32) at the bottom */
.hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: -69px; /* extends 12.04% × 573px beyond the frame — clipped by overflow:hidden */
  background: linear-gradient(
    177.69deg,
    rgba(255, 255, 255, 0) 1.71%,
    var(--hero-overlay-dark) 95.85%
  );
  pointer-events: none;
}

/* Orange announcement strip at the bottom of the hero */
.hero__banner-strip {
  position: absolute;
  top: 462px;   /* 80.98% × 573 */
  height: 100px; /* strip ends at 514px (573 − 10.3% × 573 = 59px from bottom) */
  left: 0;
  right: 0;
  background-color: var(--abstract-red);
}

/*
 * Logo box: white background box top-left.
 * Left column (154px): Mosaic Biosciences logo, offset 16px from top.
 * Right column (186px): Renuvis Enzara wordmark, full height.
 */
.hero__logos {
  position: absolute;
  top: 0;
  left: 9.03%;                   /* 130px at 1440px */
  width: var(--hero-logo-width);  /* 154px mosaic + 186px enzara = 340px */
  height: var(--hero-logo-height);
  display: flex;
  align-items: flex-start;
}

.hero__logo-mosaic {
    display: inline-block;
    width: 45%;
    height: auto;
}

.hero__logo-enzara {
  flex: 0 0 186px;                    /* 19.72% → 32.64% of 1440 = 186px */
  height: var(--hero-logo-height);
  object-fit: contain;
}

/*
 * Headline: 140px condensed-bold, cream, uppercase, centered in the
 * left ~66% of the frame (right edge at 65.97% = ~950px from left).
 * Font: Field Gothic No.36 XBold XCond (commercial); Arial Narrow / Impact
 * as fallbacks.
 */
.hero__headline {
  position: absolute;
  top: 191px;    /* 33.33% × 573 */
  left: 0.69%;
  right: 34.03%; /* right edge at ~950px from left */
  font-family: "field-gothic-condensed", sans-serif;
  font-weight: 800;
  font-size: 140px;
  line-height: 120px;
  color: var(--bridal-heath);
  text-align: center;
  text-transform: uppercase;
  font-style: normal;
}

/* Product bottle: aspect-ratio-driven; extends below the hero (clipped) */
.hero__product {
  position: absolute;
  left: 64.44%;       /* ~928px */
  right: 6.32%; 
  bottom: 0;
  max-height: 90%;
}

.hero__product-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Announcement text sits on top of the orange strip */
.hero__announcement {
  position: absolute;
  top: 461px;    /* 80.45% × 573 */
  left: 0.69%;
  right: 34.03%;
  height: 50px;
  font-family: "field-gothic-condensed", sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 50px;
  color: var(--bridal-heath);
  text-align: center;
  text-transform: uppercase;
  font-style: normal;
}

@media screen and (max-width: 1215px) {
  .hero__headline {
    font-size: 90px;
    line-height: 80px;
  }

  .hero__announcement {
    font-size: 25px;
    line-height: 30px;
  }

  .hero__banner-strip {
    top: 452px;
    height: 80px;
  }
}

@media screen and (max-width: 800px) {
  .hero__headline {
    font-size: 50px;
    line-height: 60px;
  }

  .hero__announcement {
    font-size: 15px;
    top: 330px;
    line-height: 20px;
  }

  .hero {
    height: 400px;
  }

  .hero__banner-strip {
    position: absolute;
    top: 325px;
    height: 50px;
  }
}

@media screen and (max-width: 450px) {
  .hero__headline {
    font-size: 36px;
    line-height: 40px;
  }
}

/* ── Fifty-Fifty V1 ─────────────────────────────────────────────── */
.section-container {
  display: block;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

.fifty-fifty {
  background-color: var(--attractive-black);
  display: block;
  padding: 80px 0;
  width: 100%;
}

/* Section heading: large condensed red type, full width */
.fifty-fifty__heading {
  font-family: "field-gothic-condensed", sans-serif;
  font-weight: 800;
  font-size: var(--fifty-subhead-size);
  line-height: var(--fifty-subhead-size);
  color: var(--abstract-red);
  text-transform: uppercase;
  font-style: normal;
  width: 100%;
  margin-bottom: 32px;
}

/* Left column: body copy + bullet list */
.fifty-fifty__content {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: var(--fifty-body-size);
  line-height: var(--fifty-body-lh);
  letter-spacing: var(--fifty-body-tracking);
  color: var(--white);
  font-style: normal;
  display: flex;
  height: 100%;
  align-items: center;
}

.fifty-fifty__content p {
  display: block;
  width: 100%;
  margin-bottom: 16px;
}

.fifty-fifty__content ul {
  display: block;
  width: 100%;
  margin-bottom: 16px;
}

/* Bullet list: disc markers, Figma ms-[31.5px] indent */
.fifty-fifty__list {
  list-style: disc;
  padding-left: 31.5px;
  display: flex;
  flex-direction: column;
}

/* Right column: image + caption stacked */
.fifty-fifty__image {
  display: block;
  width: 100%;
  margin-bottom: 16px;
  border-radius: 10px;
}

.fifty-fifty__caption {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: var(--fifty-body-size);
  line-height: var(--fifty-body-lh);
  letter-spacing: var(--fifty-body-tracking);
  color: var(--royal-white);
  font-style: normal;
}

/* ── Fifty-Fifty V2 ─────────────────────────────────────────────── */

.fifty-fifty-v2 {
  background-color: var(--beautiful-white);
  padding: 80px 0;
}

.fifty-fifty-v2__content {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
}

.fifty-fifty-v2__content-container {
  display: block;
  width: 100%;
}

/* Eyebrow label: "HOW IT WORKS" — Inter Medium, dark, uppercase */
.fifty-fifty-v2__eyebrow {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: var(--ff2-eyebrow-size);
  line-height: var(--ff2-eyebrow-lh);
  color: var(--attractive-black);
  text-transform: uppercase;
  letter-spacing: 0;
  display: block;
  width: 100%;
  margin-bottom: 16px;
}

/* Heading: constrained to 460px so it wraps like the Figma design */
.fifty-fifty-v2__heading {
  font-family: "field-gothic-condensed", sans-serif;
  font-weight: 800;
  font-size: var(--fifty-subhead-size);
  line-height: var(--fifty-subhead-size);
  color: var(--abstract-red);
  text-transform: uppercase;
  font-style: normal;
  display: block;
  width: 100%;
  margin-bottom: 16px;
}

/* Body block: intro paragraph + ordered list */
.fifty-fifty-v2__body {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: var(--fifty-body-size);
  line-height: var(--fifty-body-lh);
  letter-spacing: var(--fifty-body-tracking);
  color: var(--bright-black);
  font-style: normal;
  display: block;
  width: 100%;
  margin-bottom: 32px;
}

/* Ordered list: decimal markers, Figma ms-[31.5px] indent */
.fifty-fifty-v2__list {
  list-style: decimal;
  padding-left: 31.5px;
  margin-bottom: 24px;
}

.fifty-fifty-v2__list li {
  margin-bottom: 16px;
}

/* CTA button row */
.fifty-fifty-v2__buttons {
  display: flex;
  gap: var(--ff2-btn-gap);
  align-items: center;
}

/* Shared button shape */
.fifty-fifty-v2__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ff2-btn-width);
  height: var(--ff2-btn-height);
  padding: 8px 20px;
  border-radius: 102px; /* Figma: 101.967px pill */
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: var(--ff2-cta-size);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.fifty-fifty-v2__btn--primary,
.fifty-fifty-v2__btn--secondary:hover {
  background-color: var(--abstract-red);
  color: var(--white);
  border: 1px solid var(--abstract-red);
  text-decoration: none;
}

.fifty-fifty-v2__btn--secondary,
.fifty-fifty-v2__btn--primary:hover {
  background-color: transparent;
  color: var(--abstract-red);
  border: 1px solid var(--abstract-red);
  text-decoration: none;
}

/* Right column: fixed-size image */
.fifty-fifty-v2__media {
  display: block;
  width: 100%;
}

.fifty-fifty-v2__image {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

/* ── Fifty-Fifty V3 ─────────────────────────────────────────────── */

.fifty-fifty-v3 {
  background-color: var(--attractive-black);
  padding: 80px 0;
}

/* Left column: grows to fill space left by fixed right column */
.fifty-fifty-v3__content {
  display: block;
  width: 100%;
}

/* Eyebrow: grey label above the heading */
.fifty-fifty-v3__eyebrow {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: var(--ff2-eyebrow-size);
  line-height: var(--ff2-eyebrow-lh);
  color: var(--sweet-grey);
  text-transform: uppercase;
  letter-spacing: 0;
  display: block;
  width: 100%;
  margin-bottom: 16px;
}

.fifty-fifty-v3__heading {
  font-family: "field-gothic-condensed", sans-serif;
  font-weight: 800;
  font-size: var(--fifty-subhead-size);
  line-height: var(--fifty-subhead-size);
  color: var(--abstract-red);
  text-transform: uppercase;
  font-style: normal;
  display: block;
  width: 100%;
  margin-bottom: 32px;
}

/*
 * Body: fixed width (632px) keeps the text column from stretching to
 * the full left-column width, matching the Figma w-[632px] constraint.
 */
.fifty-fifty-v3__body {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: var(--fifty-body-size);
  line-height: var(--fifty-body-lh);
  letter-spacing: var(--fifty-body-tracking);
  color: var(--white);
  font-style: normal;
  display: block;
  width: 100%;
  margin-bottom: 32px;
}

.fifty-fifty-v3__body p {
  display: block;
  width: 100%;
  margin-bottom: 16px;
}

/* Single primary CTA — reuses v2 button dimensions */
.fifty-fifty-v3__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ff2-btn-width);
  height: var(--ff2-btn-height);
  padding: 8px 20px;
  border-radius: 102px;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: var(--ff2-cta-size);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  background-color: var(--abstract-red);
  color: var(--white);
  border: 1px solid var(--abstract-red);
  cursor: pointer;
}

.fifty-fifty-v3__btn:hover {
  text-decoration: none;
  border-color: var(--abstract-red);
  background-color: var(--white);
  color: var(--abstract-red);
}

/* Right column: tall fixed-size image */
.fifty-fifty-v3__media {
  flex: 0 0 var(--ff3-img-width);
  height: var(--ff3-img-height);
}

.fifty-fifty-v3__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

/* ── Fifty-Fifty V4 ─────────────────────────────────────────────── */

.fifty-fifty-v4 {
  background-color: var(--tech-white);
  padding: 80px 0;
}


/* Left column: grows to fill remaining space beside fixed image column */
.fifty-fifty-v4__content {
  display: block;
  width: 100%;
}

.fifty-fifty-v4__eyebrow {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: var(--ff2-eyebrow-size);
  line-height: var(--ff2-eyebrow-lh);
  color: var(--attractive-black);
  text-transform: uppercase;
  letter-spacing: 0;
  display: block;
  width: 100%;
  margin-bottom: 16px;
}

.fifty-fifty-v4__heading {
  font-family: "field-gothic-condensed", sans-serif;
  font-weight: 800;
  font-size: var(--fifty-subhead-size);
  line-height: var(--fifty-subhead-size);
  color: var(--abstract-red);
  text-transform: uppercase;
  font-style: normal;
  display: block;
  width: 100%;
  margin-bottom: 24px;
}

/* Intro paragraph — constrained to same width as the table below it */
.fifty-fifty-v4__body {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: var(--fifty-body-size);
  line-height: var(--fifty-body-lh);
  letter-spacing: var(--fifty-body-tracking);
  color: var(--attractive-black);
  max-width: var(--ff4-body-width);
  display: block;
  width: 100%;
  margin-bottom: 32px;
}

/*
 * Data table: semantic <table> replaces Figma's overlapping inline-grid.
 * Total width = --ff4-table-metric (282px) + --ff4-table-value (298px) = 580px,
 * matching the body text max-width above.
 */
.ff4__table {
  border-collapse: collapse;
  width: 100%;
}

/* Column headers: Field Gothic blue, no cell background */
.ff4__th {
  height: 43px; /* Figma: mt-[43px] offset before first data row */
  padding: 0 0 0 20px;
  vertical-align: middle;
  text-align: left;
  font-family: "field-gothic-condensed", sans-serif;
  font-weight: 800;
  font-size: var(--ff4-table-hdr-size);
  line-height: 28px;
  color: var(--venice-blue);
  text-transform: uppercase;
  display: table-cell;
}

.ff4__th:last-child {
  width: var(--ff4-table-value);
}

/* Data cells: light-blue background, dark border, vertically centred text */
.ff4__td {
  width: var(--ff4-table-metric);
  height: var(--ff4-table-row-h);
  padding: 0 20px;
  vertical-align: middle; /* Figma mt-27 = centering a single line in 82px */
  border: 1px solid var(--attractive-black);
  background-color: var(--simple-light-blue);
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: var(--fifty-body-size);
  line-height: var(--fifty-body-lh);
  color: var(--attractive-black);
}

.ff4__td:last-child {
  width: var(--ff4-table-value);
}

/* Right column: tall, wide image */
.fifty-fifty-v4__media {
  flex: 0 0 var(--ff4-img-width);
  height: 100%;
}

.fifty-fifty-v4__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

/* ── Video Section ───────────────────────────────────────────────── */

.video-section {
  position: relative; /* establishes stacking context for the orange band */
  background-color: var(--attractive-black);
  padding: 80px 0;
}

/*
 * Full-bleed orange band: spans section width at the vertical midpoint of
 * the video block. top is computed as:
 *   padding + heading height + gap + half block height − half band height
 * keeping the band centred behind the video card regardless of block size.
 */
.video-section__band {
  position: absolute;
  top: calc(
    var(--video-pad) +
    var(--video-heading-h) +
    var(--video-gap) +
    var(--video-block-h) / 2 -
    var(--video-band-h) / 2
  );
  left: 0;
  right: 0;
  height: var(--video-band-h);
  background-color: var(--abstract-red);
  z-index: 0;
}

.video-section__heading {
  position: relative;
  z-index: 1;
  font-family: "field-gothic-condensed", sans-serif;
  font-weight: 800;
  font-size: var(--fifty-subhead-size);
  line-height: var(--fifty-subhead-size);
  color: var(--abstract-red);
  text-align: center;
  text-transform: uppercase;
  font-style: normal;
  display: block;
  margin-bottom: 32px;
}

/*
 * Video block: rounded card sits in front of (z-index 1) the orange band.
 * overflow:hidden clips the band where it overlaps the rounded corners.
 */
.video-section__block {
  position: relative;
  z-index: 1;
  width: 100%;
  border-radius: var(--video-radius);
}

.video-section__thumbnail,
.video-section__video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 700px;
  max-width: 1440px;
  border-radius: var(--video-radius);
  max-height: 700px;
}


/* ── Card Columns ────────────────────────────────────────────────── */

.card-columns {
  background-color: var(--beautiful-white);
  padding: 80px 0;
}

.card-columns__container {
  display: flex;
  flex-direction: column;
  gap: var(--cc-outer-gap);
  align-items: flex-start;
  width: 100%;
}

/* ── Top subsection: Microbes versus Enzymes ─────────────────────── */

.card-columns__top {
  display: flex;
  flex-direction: column;
  gap: var(--cc-top-gap);
  align-items: flex-start;
  width: 100%;
}

/* ── Bottom subsection: Flexible Application Timing ──────────────── */

.card-columns__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--cc-bottom-gap);
  align-items: flex-start;
  width: 100%;
}

/* Shared section heading (both subsections use identical type treatment) */
.card-columns__heading {
  font-family: "field-gothic-condensed", sans-serif;
  font-weight: 800;
  font-size: var(--cc-heading-size);
  line-height: var(--cc-heading-size);
  color: var(--abstract-red);
  text-transform: uppercase;
  font-style: normal;
}

.card-columns__body {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: var(--fifty-body-size);
  line-height: var(--fifty-body-lh);
  letter-spacing: var(--fifty-body-tracking);
  color: var(--attractive-black);
  max-width: var(--cc-body-width);
  margin-bottom: 32px;
}

/* ── Comparison table ────────────────────────────────────────────── */

.cc-table {
  border-collapse: collapse;
  width: 100%;
}

.cc-table__th {
  height: 38px;
  padding: 0 0 0 20px;
  vertical-align: middle;
  text-align: left;
  font-family: "field-gothic-condensed", sans-serif;
  font-weight: 800;
  font-size: var(--cc-table-hdr-size);
  line-height: var(--fifty-body-lh);
  color: var(--dark-chocolate);
  text-transform: uppercase;
  font-style: normal;
}

.cc-table__td {
  height: var(--cc-table-row-h);
  padding: 0 20px;
  vertical-align: middle;
  border: 1px solid var(--attractive-black);
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: var(--fifty-body-size);
  line-height: var(--fifty-body-lh);
  letter-spacing: var(--fifty-body-tracking);
  color: var(--attractive-black);
  display: flex;
  width: 100%;
  align-items: center;
}

.cc-table__td--attr   { background-color: var(--tech-white); }
.cc-table__td--micro  { background-color: var(--beautiful-white); }
.cc-table__td--enzara { background-color: var(--simple-light-blue); }

.cc-table__row {
    display: block;
    width: 100%;
    margin-bottom: 32px !important;
}

/* ── Application timing cards ────────────────────────────────────── */

.timing-card {
  width: 100%;
  border-radius: var(--cc-card-radius);
  padding: var(--cc-card-pt) var(--cc-card-pr) var(--cc-card-pb) var(--cc-card-pl);
  display: flex;
  flex-direction: column;
  gap: var(--cc-card-inner-gap);
  align-items: flex-start;
  flex-shrink: 0;
}

/*
 * Each variant overrides --cc-card-pb so padding-bottom matches Figma
 * exactly without repeating the full shorthand.
 */
.timing-card--fall {
  background-color: var(--tender-coral);
  border: 1px solid var(--abstract-red);
  --cc-card-pb: 34px;
}

.timing-card--spring {
  background-color: var(--simple-light-blue);
  border: 1px solid var(--venice-blue);
  --cc-card-pb: 26px;
}

.timing-card--atplant {
  background-color: var(--tech-white);
  border: 1px solid var(--sweet-grey);
  --cc-card-pb: 34px;
}

.timing-card__title {
  font-family: "field-gothic-condensed", sans-serif;
  font-weight: 800;
  font-size: var(--cc-card-title-size);
  line-height: var(--cc-card-title-lh);
  text-transform: uppercase;
  font-style: normal;
}

.timing-card--fall   .timing-card__title { color: var(--abstract-red); }
.timing-card--spring .timing-card__title { color: var(--venice-blue); }
.timing-card--atplant .timing-card__title { color: var(--attractive-black); }

.timing-card__row {
  width: 100%;
}

.timing-card__col-label {
  font-family: "field-gothic-condensed", sans-serif;
  font-weight: 800;
  font-size: var(--cc-card-label-size);
  line-height: var(--fifty-body-lh);
  color: var(--attractive-black);
  text-transform: uppercase;
  font-style: normal;
}

.timing-card__col-body {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: var(--fifty-body-size);
  line-height: var(--fifty-body-lh);
  letter-spacing: var(--fifty-body-tracking);
  color: var(--attractive-black);
}

/* ── Cards V1 ────────────────────────────────────────────────────── */

/*
 * 350px section: attractive-black background fills the full height;
 * the orange container (300px) is centered via justify-center, leaving
 * 25px of dark visible at top and bottom.
 */
.cards-v1 {
    position: relative;
    display: block;
    background-color: var(--attractive-black);
    padding: 30px 0;
}

.cards-v1__container-cards {
    width: 100%;
}

.cards-v1__container {
    position: relative;
    background-color: var(--abstract-red);
    padding-top: var(--cv1-container-pt);
    width: 100%;
    padding-bottom: var(--cv1-container-pt);
}

.cv1-card {
  background-color: var(--tech-white);
  border-radius: var(--cv1-card-radius);
  padding: 20px;
  display: inline-block;
}

/*
 * Cards 2 and 4 have tighter/looser bottom padding in Figma.
 * Override via nth-child so the HTML stays class-free.
 */
.cv1-card:nth-child(2) { --cv1-card-pb: 73px; }
.cv1-card:nth-child(4) { --cv1-card-pr: 13px; --cv1-card-pb: 25px; }

.cv1-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--cv1-content-gap);
  flex: 1 0 0;
  min-height: 1px;
  width: 100%;
}

/* Stat: large Field Gothic number, red, uppercase */
.cv1-card__stat {
  font-family: "field-gothic-condensed", sans-serif;
  font-weight: 800;
  font-size: var(--cv1-stat-size);
  line-height: var(--cv1-stat-lh);
  color: var(--abstract-red);
  text-transform: uppercase;
  font-style: normal;
}

/* Inline symbol ($, %) rendered at a smaller size within the stat line */
.cv1-card__stat-sup {
  font-size: var(--cv1-stat-sup-size);
}

/* Subhead: medium Field Gothic, red, uppercase */
.cv1-card__subhead {
  font-family: "field-gothic-condensed", sans-serif;
  font-weight: 800;
  font-size: var(--cv1-subhead-size);
  line-height: var(--cv1-subhead-lh);
  color: var(--abstract-red);
  text-transform: uppercase;
  font-style: normal;
}

/* Body: Inter, dark, small */
.cv1-card__body {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: var(--cv1-body-size);
  line-height: var(--cv1-body-lh);
  letter-spacing: var(--cv1-body-tracking);
  color: var(--attractive-black);
}

.cv1-card__source {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  font-style: italic;
  color: var(--attractive-black);
  display: block;
  width: 100%;
  margin-top: 32px;
}

#copy-link,
#copy-sms {
    position: relative;
}

.copy-tooltip {
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
    white-space: nowrap;
}

.copy-tooltip.show {
    opacity: 1;
    visibility: visible;
}

/* ── Cards V2 ────────────────────────────────────────────────────── */

.cards-v2 {
  background-color: var(--attractive-black);
  padding: 80px 0;
  text-align: center;
}

.cards-v2 .section-container {
  display: flex;
  flex-direction: column;
  gap: var(--cv2-gap);
  align-items: center;
}

.cards-v2__heading {
  font-family: "field-gothic-condensed", sans-serif;
  font-weight: 800;
  font-size: var(--fifty-subhead-size);
  line-height: var(--fifty-subhead-size);
  color: var(--abstract-red);
  text-transform: uppercase;
  font-style: normal;
  text-align: center;
  width: 100%;
  margin-bottom: 16px;
}

.cards-v2__subhead {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: var(--fifty-body-size);
  line-height: var(--fifty-body-lh);
  letter-spacing: var(--fifty-body-tracking);
  color: var(--white);
  text-align: center;
  margin-bottom: 32px;
}

.cards-v2__cards {
  width: 100%;
  margin-bottom: 32px;
}

.cv2-card {
  background-color: var(--tech-white);
  border-radius: var(--cv2-card-radius);
  padding: 30px;
}

.cv2-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--cv2-card-content-gap);
}

.cv2-card__title {
  font-family: "field-gothic-condensed", sans-serif;
  font-weight: 800;
  font-size: var(--cv2-card-title-size);
  line-height: var(--cv2-card-title-lh);
  color: var(--abstract-red);
  text-transform: uppercase;
  font-style: normal;
  width: 100%;
  text-align: left;
}

/* Source Sans 3 matches the Figma font spec for card body text */
.cv2-card__body {
  font-family: "Source Sans 3", sans-serif;
  font-weight: 400;
  font-size: var(--cv2-card-body-size);
  line-height: var(--cv2-card-body-lh);
  color: var(--attractive-black);
  max-width: var(--cv2-card-body-w);
  text-align: left;
}

.cards-v2__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--cv2-btn-w);
  height: var(--cv2-btn-h);
  padding: 8px 20px;
  border-radius: var(--cv2-btn-radius);
  background-color: var(--abstract-red);
  color: var(--white);
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: var(--cv2-btn-size);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  margin: 0 auto;
  border: 1px solid var(--abstract-red);
}

.cards-v2__btn:hover {
  text-decoration: none;
  color: var(--abstract-red);
  background-color: var(--white);;
}

/* ── Cards V3 ────────────────────────────────────────────────────── */

.cards-v3 {
  background-color: var(--sweet-grey);
  padding: 80px 0 0;
}

.cards-v3__container {
  display: block;
  width: 100%;
}

/*
 * Heading occupies col-1 / row-1; col-2 / row-1 is intentionally empty,
 * creating a visual gap above the right card that mirrors the heading height.
 */
.cv3-top__heading {
    font-family: "field-gothic-condensed", sans-serif;
    font-weight: 800;
    font-size: var(--fifty-subhead-size);
    line-height: var(--fifty-subhead-size);
    color: var(--abstract-red);
    text-transform: uppercase;
    font-style: normal;
    width: 100%;
    display: block;
    margin-bottom: 32px;
}

.cv3-result-card {
    background-color: var(--tech-white);
    border-radius: var(--cv3-result-radius);
    padding: 30px;
    display: block;
    width: 100%;
}

.cv3-top {
  margin-bottom: 32px;
}

.cv3-result-card__content {
  display: flex;
  gap: var(--cv3-result-icon-gap);
  align-items: center;
  flex-shrink: 0;
}

.cv3-result-card__icon {
  display: block;
  width: var(--cv3-result-icon-size);
  height: var(--cv3-result-icon-size);
  flex-shrink: 0;
}

.cv3-result-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--cv3-result-list-gap);
  align-items: flex-start;
  color: var(--attractive-black);
}

.cv3-result-card__title {
  font-family: "field-gothic-condensed", sans-serif;
  font-weight: 800;
  font-size: var(--cv3-result-title-size);
  line-height: var(--cv3-result-title-lh);
  text-transform: uppercase;
  font-style: normal;
}

.cv3-result-card__list {
  list-style: disc;
  padding-left: var(--cv3-result-list-pl);
  font-family: "Source Sans 3", sans-serif;
  font-weight: 400;
  font-size: var(--cv3-body-size);
  line-height: var(--cv3-body-lh);
}

/* ── Bottom: subheading + three field-observation cards ──────────── */

.cv3-bottom__heading {
  font-family: "field-gothic-condensed", sans-serif;
  font-weight: 800;
  font-size: var(--cv3-subhead-size);
  line-height: var(--cv3-subhead-lh);
  color: var(--venice-blue);
  text-transform: uppercase;
  font-style: normal;
  width: 100%;
  margin-bottom: 32px;
}

.cv3-bottom__cards {
  display: block;
  width: 100%;
}

.cv3-field-card {
  background-color: var(--tech-white);
  border-radius: var(--cv3-field-radius);
  width: 100%;
  padding: var(--cv3-field-pt) var(--cv3-field-pr) var(--cv3-field-pb) var(--cv3-field-pl);
  margin-bottom: 20px;
}

.cv3-field-card:nth-child(2) { --cv3-field-pr: 45px; --cv3-field-pb: 42px; }
.cv3-field-card:nth-child(3) { --cv3-field-pr: 60px; --cv3-field-pb: 27px; }

.cv3-field-card__content {
  display: flex;
  gap: var(--cv3-field-icon-gap);
  align-items: flex-start;
}

.cv3-field-card__icon {
  display: block;
  width: var(--cv3-field-icon-size);
  height: var(--cv3-field-icon-size);
  flex-shrink: 0;
}

.uk-slide-active img {
    display: block;
    margin: 0 auto;
    border-radius: 10px;
    aspect-ratio: auto;
    width: 100%;
}

/*
 * Third field card uses two stacked images for its icon: a background circle
 * and an overlay image. Both are absolutely positioned within the wrapper.
 */
.cv3-field-card__icon-stack {
  position: relative;
  width: var(--cv3-field-icon-size);
  height: var(--cv3-field-icon-size);
  flex-shrink: 0;
}

.cv3-field-card__icon-stack img {
  position: absolute;
  display: block;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cv3-field-card__icon-overlay {
  inset: 15.31% 10.06% 13.49% 14.51%;
  width: auto;
  height: auto;
}

.cv3-field-card__icon-stack img.cv3-field-card__icon-overlay {
    width: 20px;
    height: 20px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.cv3-field-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--cv3-field-text-gap);
  color: var(--attractive-black);
}

.cv3-field-card__title {
  font-family: "field-gothic-condensed", sans-serif;
  font-weight: 800;
  font-size: var(--cv3-field-title-size);
  line-height: var(--cv3-field-title-lh);
  text-transform: uppercase;
  font-style: normal;
}

.cv3-field-card__body {
  font-family: "Source Sans 3", sans-serif;
  font-weight: 400;
  font-size: var(--cv3-body-size);
  line-height: var(--cv3-body-lh);
}

.background-image {
  display: block;
  width: 100%;
  height: 450px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-top: 80px;
}

/* ── Sixty-Forty V1 ──────────────────────────────────────────────── */

/*
 * Section uses left-only padding so the media column (right) extends
 * flush to the viewport edge. Height is fixed at 557px = 40px top pad
 * + 517px column height.
 */
.sixty-forty-v1 {
  background-color: var(--white);
  padding: 80px 0 0;
}
/* ── Left text column ────────────────────────────────────────────── */

.sf1-content {
  display: block;
  width: 100%;
  height: 100%;
}

.sf1-content__eyebrow {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: var(--sf1-eyebrow-size);
  line-height: var(--sf1-eyebrow-lh);
  color: var(--attractive-black);
  text-transform: uppercase;
  margin-bottom: 16px;
}

.sf1-content__heading {
  font-family: "field-gothic-condensed", sans-serif;
  font-weight: 800;
  font-size: var(--fifty-subhead-size);
  line-height: var(--fifty-subhead-size);
  color: var(--abstract-red);
  text-transform: uppercase;
  font-style: normal;
  margin-bottom: 32px;
}

.sf1-content__body {
  display: block;
  width: 100%;
  margin-bottom: 32px;
}

.sf1-content__body p {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: var(--fifty-body-size);
  line-height: var(--fifty-body-lh);
  letter-spacing: var(--fifty-body-tracking);
  color: var(--attractive-black);
  display: block;
  width: 100%;
  margin-bottom: 16px;
}

/* ── Right media column ──────────────────────────────────────────── */

/*
 * The photo is absolutely positioned and over-sized (269.75% × 172.92%)
 * relative to the container, offset via negative percentages to achieve
 * a cover-crop framing effect. The overlay card sits above it (z-index 1)
 * positioned via the column's padding.
 */
.sf1-media {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: var(--sf1-image-py) var(--sf1-image-px);
}

.sf1-media__photo {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
}

.sf1-media__card {
  position: relative;
  z-index: 1;
  background-color: var(--simple-light-blue);
  border-radius: var(--sf1-card-radius);
  width: 100%;
  padding: var(--sf1-card-pt) var(--sf1-card-pr) var(--sf1-card-pb) var(--sf1-card-pl);
  display: flex;
  flex-direction: column;
  gap: var(--sf1-card-gap);
  align-items: flex-start;
  flex-shrink: 0;
}

.sf1-media__card-title {
  font-family: "field-gothic-condensed", sans-serif;
  font-weight: 800;
  font-size: var(--sf1-card-title-size);
  line-height: var(--sf1-card-title-lh);
  color: var(--venice-blue);
  text-transform: uppercase;
  font-style: normal;
  white-space: nowrap;
}

.sf1-media__card-body {
  font-family: "Source Sans 3", sans-serif;
  font-weight: 400;
  font-size: var(--sf1-card-body-size);
  line-height: var(--sf1-card-body-lh);
  color: var(--venice-blue);
  max-width: var(--sf1-card-body-w);
}

/* ── Sixty-Forty V2 ──────────────────────────────────────────────── */

/*
 * Full-width flex row: 590px photo + 850px content panel = 1440px.
 * align-items: stretch so both columns share the same height, driven
 * by the content panel's padding + text.
 */
.sixty-forty-v2 {
  width: 100%;
}

.sf2-media {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 450px;
}

.sf2-media__photo {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sf2-content {
  background-color: var(--venice-blue);
  width: 100%;
  padding: var(--sf2-content-py) var(--sf2-content-pr) var(--sf2-content-py) var(--sf2-content-pl);
  color: var(--simple-light-blue);
  display: flex;
  height: 100%;
  align-items: center;
}

.sf2-content__eyebrow {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: var(--sf2-eyebrow-size);
  line-height: var(--sf2-eyebrow-lh);
  text-transform: uppercase;
  display: block;
  width: 100%;
  margin-bottom: 8px;
}

.sf2-content__heading {
  font-family: "field-gothic-condensed", sans-serif;
  font-weight: 800;
  font-size: var(--fifty-subhead-size);
  line-height: var(--fifty-subhead-size);
  text-transform: uppercase;
  font-style: normal;
  color: var(--simple-light-blue);
  display: block;
  width: 100%;
  margin-bottom: 32px;
}

.sf2-content__body {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: var(--fifty-body-size);
  line-height: var(--fifty-body-lh);
  letter-spacing: var(--fifty-body-tracking);
}

.sf2-content__body p {
  display: block;
  width: 100%;
  margin-bottom: 16px;
}

/* ── Three-Column Highlights ─────────────────────────────────────── */

.three-col-highlights {
  background-color: var(--white);
  padding: 80px 0;
}

.tch-content {
  display: block;
  width: 100%;
}

.tch-content__eyebrow {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: var(--tch-eyebrow-size);
  line-height: var(--tch-eyebrow-lh);
  text-transform: uppercase;
  color: var(--attractive-black);
  display: block;
  width: 100%;
  margin-bottom: 16px;
}

.tch-content__heading {
  font-family: "field-gothic-condensed", sans-serif;
  font-weight: 800;
  font-size: var(--tch-heading-size);
  line-height: var(--tch-heading-size);
  text-transform: uppercase;
  font-style: normal;
  color: var(--abstract-red);
  display: block;
  width: 100%;
  margin-bottom: 24px;
}

.tch-content__body {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: var(--tch-body-size);
  line-height: var(--tch-body-lh);
  letter-spacing: var(--tch-body-tracking);
  color: var(--attractive-black);
  width: var(--tch-body-w);
  display: block;
  width: 100%;
  margin-bottom: 80px;
}

.tch-highlights {
  margin-bottom: 40px;
}

.tch-highlight {
    display: inline-block;
    width: 100%;
    position: relative;
    padding-left: 18px;
}

.tch-highlight__bar {
  width: var(--tch-bar-w);
  height: var(--tch-bar-h);
  background-color: var(--venice-blue);
  position: absolute;
  top: 7px;
  left: 0;
}

.tch-highlight__text {
  display: block;
  width: 100%;
}

.tch-highlight__title {
  font-family: "field-gothic-condensed", sans-serif;
  font-weight: 800;
  font-size: var(--tch-title-size);
  line-height: var(--tch-title-size);
  text-transform: uppercase;
  font-style: normal;
  color: var(--venice-blue);
  display: block;
  width: 100%;
}

.tch-highlight__body {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: var(--tch-highlight-body-size);
  line-height: var(--tch-highlight-body-lh);
  color: var(--attractive-black);
  display: block;
  width: 100%;
}

.tch-cta {
    display: block;
    width: 290px;
    background-color: var(--abstract-red);
    border-radius: var(--tch-btn-radius);
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: var(--tch-btn-size);
    color: var(--white);
    text-decoration: none;
    margin: 0 auto;
    line-height: 34px;
    text-align: center;
    border: 1px solid var(--abstract-red);
}

.tch-cta:hover {
  text-decoration: none;
  border-color: var(--abstract-red);
  background-color: var(--white);
  color: var(--abstract-red);
}


/* ── Two-Column Highlights ───────────────────────────────────────── */

.two-col-highlights {
    background-color: var(--white);
    padding: 80px 0;
    display: block;
}

.tch2-heading {
    font-family: "field-gothic-condensed", sans-serif;
    font-weight: 800;
    font-size: var(--tch2-heading-size);
    line-height: var(--tch2-heading-size);
    text-transform: uppercase;
    font-style: normal;
    color: var(--abstract-red);
    width: 100%;
    margin-bottom: 18px;
}

.tch2-intro {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: var(--tch2-intro-size);
  line-height: var(--tch2-intro-lh);
  letter-spacing: var(--tch2-intro-tracking);
  color: var(--attractive-black);
  width: 100%;
  margin-bottom: 80px;
}

.tch2-grid {
  width: 100%;
  margin-bottom: 40px;
}

.tch2-highlight {
    position: relative;
    padding-left: 18px;
    margin-bottom: 32px !important;
}

.tch2-highlight__bar {
  width: var(--tch2-bar-w);
  height: 100%;
  background-color: var(--venice-blue);
  position: absolute;
  top: 7px;
  left: 0;
}

.tch2-highlight--short {
  --tch2-bar-h: var(--tch2-bar-h-short);
}

.tch2-highlight__text {
  display: block;
  width: 100%;
}

.tch2-highlight__title {
  font-family: "field-gothic-condensed", sans-serif;
  font-weight: 800;
  font-size: var(--tch2-title-size);
  line-height: var(--tch2-title-size);
  text-transform: uppercase;
  font-style: normal;
  color: var(--venice-blue);
  width: 100%;
}

.tch2-highlight--wide .tch2-highlight__title {
  display: block;
  width: 100%;
}

.tch2-highlight__body {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: var(--tch2-body-size);
  line-height: var(--tch2-body-lh);
  letter-spacing: var(--tch2-body-tracking);
  color: var(--attractive-black);
  display: block;
  width: 100%;
}

.tch2-cta {
    display: block;
    width: 290px;
    background-color: var(--abstract-red);
    border-radius: var(--tch-btn-radius);
    font-family: "Inter", sans-serif;
    font-weight: 500;
    font-size: var(--tch-btn-size);
    color: var(--white);
    text-decoration: none;
    margin: 0 auto;
    line-height: 34px;
    text-align: center;
    border: 1px solid var(--abstract-red);
}

.tch2-cta:hover {
  text-decoration: none;
  border-color: var(--abstract-red);
  background-color: var(--white);
  color: var(--abstract-red);
}

/* ── Two-Column Content ──────────────────────────────────────────── */

.two-col-content {
  background-color: var(--attractive-black);
  padding: 80px 0;
}

.tcc-col__heading {
  font-family: "field-gothic-condensed", sans-serif;
  font-weight: 800;
  font-size: var(--tcc-heading-size);
  line-height: var(--tcc-heading-size);
  text-transform: uppercase;
  font-style: normal;
  color: var(--abstract-red);
  margin-bottom: 16px;
}

.tcc-col__underline {
  width: var(--tcc-underline-w);
  height: var(--tcc-underline-h);
  background-color: var(--abstract-red);
  flex-shrink: 0;
  margin-bottom: 16px;
}

.tcc-col__body {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: var(--tcc-body-size);
  line-height: var(--tcc-body-lh);
  letter-spacing: var(--tcc-body-tracking);
  color: var(--white);
}

.tcc-col__list {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: var(--tcc-body-size);
  line-height: var(--tcc-body-lh);
  letter-spacing: var(--tcc-body-tracking);
  color: var(--white);
  padding-left: var(--tcc-list-indent);
}

/* SF Form ─────────────────────────────────────────────────────────────── */
.sf-form {
  display: block;
  width: 100%;
  padding: 80px 0;
  background-color: var(--abstract-red);
  color: var(--white);
}

.sf-form iframe {
    height: 700px;
}

.sf-heading {
  display: block;
  width: 100%;
  margin-bottom: 16px;
  font-family: "field-gothic-condensed", sans-serif;
  font-weight: 800;
  font-size: 60px;
  line-height: 60px;
  text-transform: uppercase;
  font-style: normal;
  color: var(--white)
}

.sf-body {
  display: block;
  width: 100%;
  margin-bottom: 32px;
  font-size: 21px;
  line-height: 28px;
  color: var(--white);
}

.form-container {
  width: 100%;
}

/* ── Footer ──────────────────────────────────────────────────────── */

.site-footer {
  background-color: var(--white);
  padding: 80px 0;
}

.footer-top {
  display: block;
  width: 100%;
  margin-bottom: 32px;
}

/* Mosaic logo: 11 SVG vector paths composed with percentage insets */
.footer-logo {
    display: block;
    width: 100%;
    height: 100px;
}

.footer-logo img {
    display: block;
    width: 100%;
    max-width: 150px;
}

.footer-logo__v {
  position: absolute;
}

.footer-logo__v img {
  position: absolute;
  display: block;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}

.footer-disclaimer {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: var(--footer-body-size);
  line-height: normal;
  color: var(--bright-black);
}

.footer-bottom {
  display: block;
  width: 100%;
}

.footer-link {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: var(--footer-body-size);
  line-height: normal;
  color: var(--bright-black);
  text-decoration: none;
}

.footer-link:hover {
  text-decoration: underline;
}

.footer-copyright {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: var(--footer-body-size);
  line-height: normal;
  color: var(--bright-black);
}

/* ── Fifty-Fifty V5 ──────────────────────────────────────────────── */

.fifty-fifty-v5 {
  background-color: var(--abstract-red);
  padding: 80px 0;
}

.ff5-heading {
  font-family: "field-gothic-condensed", sans-serif;
  font-weight: 800;
  font-size: var(--ff5-heading-size);
  line-height: var(--ff5-heading-size);
  text-transform: uppercase;
  font-style: normal;
  color: var(--attractive-black);
  margin-bottom: 20px;
}

.ff5-body {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: var(--ff5-body-size);
  line-height: var(--ff5-body-lh);
  letter-spacing: var(--ff5-body-tracking);
  color: var(--attractive-black);
  width: 90%;
  margin-bottom: 16px;
}

.ff5-body strong {
  font-weight: 700;
}

.ff5-right {
  background-color: var(--attractive-black);
  border-radius: var(--ff5-right-radius);
  padding: var(--ff5-right-pt) var(--ff5-right-px) var(--ff5-right-pb);
}

.ff5-card-body {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: var(--ff5-card-body-size);
  line-height: var(--ff5-card-body-lh);
  letter-spacing: var(--ff5-card-body-tracking);
  color: var(--white);
  margin-bottom: var(--ff5-card-body-lh);
}

.ff5-card-list {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: var(--ff5-card-body-size);
  line-height: var(--ff5-card-body-lh);
  letter-spacing: var(--ff5-card-body-tracking);
  color: var(--white);
  padding-left: var(--ff5-card-list-indent);
}

/* ── Card Image V1 ───────────────────────────────────────────────── */

.card-image-v1 {
  background-color: var(--white);
  padding: 80px 0;
}

/* — Top container — */

.civ1-top {
    display: block;
    width: 100%;
}

.civ1-eyebrow {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: var(--civ1-eyebrow-size);
  line-height: var(--civ1-eyebrow-lh);
  text-transform: uppercase;
  color: var(--attractive-black);
  display: block;
  width: 100%;
  margin-bottom: 16px;
}

.civ1-heading {
  font-family: "field-gothic-condensed", sans-serif;
  font-weight: 800;
  font-size: var(--civ1-heading-size);
  line-height: var(--civ1-heading-size);
  text-transform: uppercase;
  font-style: normal;
  color: var(--abstract-red);
  display: block;
  width: 100%;
  margin-bottom: 16px;
}

.civ1-body {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: var(--civ1-body-size);
  line-height: var(--civ1-body-lh);
  letter-spacing: var(--civ1-body-tracking);
  color: var(--attractive-black);
  max-width: var(--civ1-body-w);
  display: block;
  width: 100%;
  margin-bottom: 32px;
}

.civ1-program-row {
  margin-bottom: 40px;
}

.civ1-program-card {
  display: inline-block;
  border-radius: var(--civ1-sm-card-radius);
  padding: var(--civ1-sm-card-pt) var(--civ1-sm-card-pr) var(--civ1-sm-card-pb) var(--civ1-sm-card-pl);
}

.civ1-program-card--fall {
  background-color: var(--tender-coral);
  border: 1px solid var(--abstract-red);
}

.civ1-program-card--spring {
  background-color: var(--simple-light-blue);
  border: 1px solid var(--venice-blue);
  --civ1-sm-card-pr: 23px;
}

.civ1-program-card--fertilizer {
  background-color: var(--tech-white);
  border: 1px solid var(--sweet-grey);
}

.civ1-program-card__title {
  font-family: "field-gothic-condensed", sans-serif;
  font-weight: 800;
  font-size: var(--civ1-sm-card-title-size);
  line-height: var(--civ1-sm-card-title-lh);
  text-transform: uppercase;
  font-style: normal;
  display: block;
  width: 100%;
}

.civ1-program-card--fall .civ1-program-card__title    { color: var(--abstract-red); }
.civ1-program-card--spring .civ1-program-card__title  { color: var(--venice-blue); }
.civ1-program-card--fertilizer .civ1-program-card__title { color: var(--attractive-black); }

.civ1-program-card__body {
  font-family: "Source Sans 3", sans-serif;
  font-weight: 400;
  font-size: var(--civ1-sm-body-size);
  line-height: var(--civ1-sm-body-lh);
  color: var(--attractive-black);
  width: 100%;
}

/* — Bottom container — */

.civ1-bottom {
  display: block;
  width: 100%;
}

.civ1-bottom-heading {
  font-family: "field-gothic-condensed", sans-serif;
  font-weight: 800;
  font-size: var(--civ1-heading-size);
  line-height: var(--civ1-heading-size);
  text-transform: uppercase;
  font-style: normal;
  color: var(--abstract-red);
  display: block;
  width: 100%;
  margin-bottom: 32px;
}

/* Image card: photo on left (masked blob), text on right */
.civ1-image-card {
  position: relative;
  background-color: var(--beautiful-white);
  border-radius: var(--civ1-img-card-radius);
  overflow: hidden;
  min-height: 240px;
}

.civ1-image-card__photo-wrap {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-mask-size: var(--civ1-photo-mask-w) var(--civ1-photo-mask-h);
  -webkit-mask-position: 0 0;
  -webkit-mask-repeat: no-repeat;
  mask-size: 100% 100%;
  mask-position: 0 0;
  mask-repeat: no-repeat;
}

.civ1-image-card__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.civ1-image-card__text {
  height: 100%;
  padding: 30px;
  display: block;
  width: 100%;
}

.civ1-image-card__title {
  font-family: "field-gothic-condensed", sans-serif;
  font-weight: 800;
  font-size: var(--civ1-img-card-title-size);
  line-height: var(--civ1-img-card-title-size);
  text-transform: uppercase;
  font-style: normal;
  color: var(--venice-blue);
  display: block;
  width: 100%;
}

.civ1-image-card__body {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: var(--civ1-img-card-body-size);
  line-height: var(--civ1-img-card-body-lh);
  letter-spacing: var(--civ1-img-card-body-tracking);
  color: var(--attractive-black);
  display: block;
  width: 100%;
}

/* ── Card Image V2 ───────────────────────────────────────────────── */

.card-image-v2 {
  background-color: var(--sweet-grey);
  padding: 80px 0;
  display: block;
  width: 100%;
}

.civ2-heading {
  font-family: "field-gothic-condensed", sans-serif;
  font-weight: 800;
  font-size: var(--civ2-heading-size);
  line-height: var(--civ2-heading-size);
  text-transform: uppercase;
  font-style: normal;
  color: var(--abstract-red);
  display: block;
  width: 100%;
  margin-bottom: 16px;
}

.civ2-body {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: var(--civ2-body-size);
  line-height: var(--civ2-body-lh);
  letter-spacing: var(--civ2-body-tracking);
  color: var(--attractive-black);
  display: block;
  width: 100%;
  margin-bottom: 32px;
}

.civ2-grid {
  width: 100%;
}

.civ2-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  background-color: var(--beautiful-white);
  border-radius: var(--civ2-card-radius);
  overflow: hidden;
}

/* Orange image panel on the left */
.civ2-card__img-panel {
  flex-shrink: 0;
  width: var(--civ2-img-panel-w);
  background-color: var(--abstract-red);
  border-radius: var(--civ2-card-radius) 0 0 var(--civ2-card-radius);
  padding: var(--civ2-img-panel-py) var(--civ2-img-panel-px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.civ2-card__doc {
  display: block;
  width: var(--civ2-doc-w);
  height: var(--civ2-doc-h);
  object-fit: cover;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

/* Text content area */
.civ2-card__text {
  flex: 1;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: var(--civ2-card-text-gap);
}

.civ2-card__title {
  font-family: "field-gothic-condensed", sans-serif;
  font-weight: 800;
  font-size: var(--civ2-card-title-size);
  line-height: var(--civ2-card-title-size);
  text-transform: uppercase;
  font-style: normal;
  color: var(--venice-blue);
}

.civ2-card__desc {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: var(--civ2-card-body-size);
  line-height: var(--civ2-card-body-lh);
  letter-spacing: var(--civ2-card-body-tracking);
  color: var(--attractive-black);
}

.civ2-card__link {
  font-family: "field-gothic-condensed", sans-serif;
  font-weight: 800;
  font-size: var(--civ2-card-link-size);
  line-height: var(--civ2-card-link-size);
  font-style: normal;
  letter-spacing: var(--civ2-card-link-tracking);
  color: var(--abstract-red);
  text-decoration: underline;
  text-decoration-skip-ink: none;
}

/* Cards 2–4: right-align the Download PDF link */
.civ2-card:nth-child(n+2) .civ2-card__link { text-align: right; }

/* Card 4: tighter gap and narrower right padding */
.civ2-card:nth-child(4) { --civ2-card-text-gap: 24px; --civ2-card-pr: 29px; }

/* ── Accordion V2 ────────────────────────────────────────────────── */

.accordion-v2 {
  background-color: var(--attractive-black);
  padding: 80px 0;
  display: block;
  width: 100%;
}

.acc2-heading {
  font-family: "field-gothic-condensed", sans-serif;
  font-weight: 800;
  font-size: var(--acc2-heading-size);
  line-height: var(--acc2-heading-size);
  font-style: normal;
  text-transform: uppercase;
  color: var(--abstract-red);
  display: block;
  width: 100%;
  margin-bottom: 32px;
}

.acc2-container {
  display: block;
  width: 100%;
}

.acc2-item {
  background-color: var(--white);
  border: 0.958px solid var(--accordion-border);
  border-radius: var(--acc2-item-radius);
  padding: var(--acc2-item-p);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--acc2-item-gap);
  margin-bottom: 32px;
}

.acc2-item__question {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.uk-accordion-default .uk-accordion-content {
    margin-top: 0;
}

.acc2-item__q-text {
  font-family: "field-gothic-condensed", sans-serif;
  font-weight: 800;
  font-size: var(--acc2-q-size);
  line-height: var(--acc2-q-lh);
  font-style: normal;
  text-transform: uppercase;
  color: var(--dark-chocolate);
}

.acc2-item__icon {
  display: block;
  width: 9.6px;
  height: 4.8px;
  flex-shrink: 0;
  transform: scaleY(-1);
}

.acc2-item__divider {
  border: none;
  border-top: 1px solid var(--accordion-border);
  margin: 0;
}

.acc2-item__answer {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: var(--acc2-answer-size);
  line-height: var(--acc2-answer-lh);
  letter-spacing: var(--acc2-answer-tracking);
  color: var(--bright-black);
  padding-top: 16px;
}

/* ── Cards-V4 ─────────────────────────────────────────────── */

.cards-v4 {
  background-color: var(--attractive-black);
}

.cv4-container {
  padding: 80px 0;
  display: block;
  width: 100%;
}

.cv4-content {
  display: block;
  width: 100%;
}

.cv4-heading {
  font-family: "field-gothic-condensed", sans-serif;
  font-weight: 800;
  font-size: var(--cv4-heading-size);
  line-height: var(--cv4-heading-size);
  font-style: normal;
  text-transform: uppercase;
  color: var(--abstract-red);
  margin-bottom: 16px;
  display: block;
  width: 100%;
}

.cv4-body {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: var(--cv4-body-size);
  line-height: var(--cv4-body-lh);
  letter-spacing: var(--cv4-body-tracking);
  color: var(--white);
  max-width: var(--cv4-body-w);
  margin-bottom: 32px;
  display: block;
  width: 100%;
}

.cv4-cards {
  width: 100%;
  margin-bottom: 32px;
}

.cv4-card {
  background-color: var(--white);
  border-radius: var(--cv4-card-radius);
  padding: 30px;
  width: var(--cv4-card-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cv4-inner-gap);
}

.cv4-card__icon-wrap {
  background-color: var(--attractive-black);
  width: var(--cv4-icon-size);
  height: var(--cv4-icon-size);
  border-radius: var(--cv4-icon-radius);
  padding: 0 var(--cv4-icon-px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cv4-card__icon {
  display: block;
  width: 24px;
  height: 24px;
}

.cv4-card:nth-child(2) .cv4-card__icon {
  width: 20px;
  height: 16px;
}

.cv4-card__title {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: var(--cv4-title-size);
  line-height: var(--cv4-title-lh);
  letter-spacing: var(--cv4-title-tracking);
  color: var(--abstract-red);
  text-align: center;
}

.cv4-card__desc {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: var(--cv4-desc-size);
  line-height: var(--cv4-desc-lh);
  letter-spacing: var(--cv4-desc-tracking);
  color: var(--attractive-black);
  text-align: center;
}

.cv4-card__btn {
  background-color: var(--abstract-red);
  border: none;
  border-radius: var(--cv4-btn-radius);
  height: var(--cv4-btn-h);
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--cv4-btn-icon-gap);
  cursor: pointer;
  margin-top: auto;
}

.cv4-card__btn:hover {
  text-decoration: none;
}

.cv4-card__btn-icon {
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.cv4-card:nth-child(2) .cv4-card__btn-icon {
  width: 13px;
  height: 11px;
}

.cv4-card__btn-label {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: var(--cv4-btn-size);
  line-height: var(--cv4-btn-lh);
  letter-spacing: var(--cv4-btn-tracking);
  color: var(--white);
  text-align: center;
  white-space: nowrap;
}

.cv4-footnote {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: var(--cv4-fn-size);
  line-height: var(--cv4-fn-lh);
  letter-spacing: var(--cv4-fn-tracking);
  color: var(--white);
  display: block;
  width: 100%;
}


/* ── MEDIA QUERIES ─────────────────────────────────────────────── */
@media screen and (max-width: 1000px) {
  .ff5-heading,
  .fifty-fifty__heading,
  .fifty-fifty-v2__heading,
  .video-section__heading,
  .card-columns__heading,
  .sf-heading,
  .fifty-fifty-v3__heading,
  .cards-v2__heading,
  .sf1-content__heading,
  .sf2-content__heading,
  .fifty-fifty-v4__heading,
  .cv3-top__heading,
  .tch-content__heading,
  .tcc-col__heading,
  .tch2-heading,
  .acc2-heading,
  .civ1-heading,
  .civ1-bottom-heading,
  .civ2-heading,
  .cv4-heading {
    font-size: 40px;
    line-height: 50px;
  }

  .ff5-body,
  .ff5-card-body,
  .ff5-card-list,
  .fifty-fifty__content p,
  .fifty-fifty__content ul,
  .fifty-fifty__caption,
  .fifty-fifty-v2__body p,
  .fifty-fifty-v2__body li,
  .card-columns__body,
  .cc-table__td,
  .timing-card__col-body,
  .sf-body,
  .fifty-fifty-v3__body p,
  .fifty-fifty-v3__body li,
  .cv1-card__body,
  .cards-v2__subhead,
  .cv2-card__body,
  .sf1-content__body p,
  .sf1-media__card-body,
  .sf2-content__body,
  .fifty-fifty-v4__body,
  .ff4__td,
  .cv3-result-card__list,
  .cv3-field-card__body,
  .tch-content__body,
  .tch-highlight__body,
  .tcc-col__body,
  .tcc-col__list,
  .tch2-intro,
  .tch2-highlight__body,
  .acc2-item__answer,
  .civ1-body,
  .civ1-program-card__body,
  .civ1-image-card__body,
  .civ2-body,
  .civ2-card__desc,
  .cv4-body {
    font-size: 16px;
    line-height: 20px;
  }

  .fifty-fifty-v2__eyebrow,
  .fifty-fifty-v3__eyebrow,
  .sf1-content__eyebrow,
  .sf2-content__eyebrow,
  .fifty-fifty-v4__eyebrow,
  .tch-content__eyebrow,
  .civ1-eyebrow {
    font-size: 18px;
    margin-bottom: 0;
  }

  .timing-card__title,
  .sf1-media__card-title,
  .cv3-result-card__title,
  .cv3-bottom__heading,
  .tch-highlight__title,
  .tch2-highlight__title,
  .civ1-program-card__title,
  .civ1-image-card__title,
  .civ2-card__title {
    font-size: 30px;
    line-height: 30px;
  }

  .timing-card__col-label,
  .cv3-field-card__title,
  .civ2-card__link {
    font-size: 20px;
    line-height: 25px;
  }

  .cv1-card__stat {
    font-size: 40px;
    line-height: 40px;
  }

  .cv1-card__subhead,
  .cv2-card__title {
    font-size: 26px;
    line-height: 28px;
  }

  .civ2-card__text {
    gap: 10px;
  }

  .nav-links a {
    font-size: 14px;
  }

  .video-section__band {
    top: 52%;
  }

  .uk-slider-container.uk-light,
  .uk-slider {
    height: 315px;
  }

  .hero__logos {
    width: 250px;
  }

  .hero__logo-enzara {
    height: 93px;
  }

  .sf-form iframe {
    height: 710px;
  }
}

@media screen and (max-width: 960px) {
  .site-nav {
    height: 20px;
  }

  .uk-navbar-dropdown.uk-drop.uk-open {
    position: fixed;
    top: 60px !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0;
    width: 100%;
    background-color: var(--enlish-cream-89)
  }

  .nav-links {
    display: block;
    width: 100%;
    text-align: right;
  }

  .uk-navbar-dropdown-nav>li>a {
    text-align: right;
    display: block;
    color: var(--venice-blue);
    font-size: 20px;
    margin-bottom: 20px;
  }

  .uk-navbar-dropdown-nav>li>a:hover {
    color: var(--venice-blue);
  }
}

@media screen and (max-width: 900px) {
  .sf-form iframe {
    height: 710px;
  }
}

@media screen and (max-width: 800px) {
  .sf-form iframe {
    height: 790px;
  }

  .hero__logo-mosaic {
    width: 50%;
  }

  .civ2-card__img-panel {
    width: 35%;
  }

  .civ2-card__text {
    padding: 20px;
  }

  .civ2-card__doc {
    width: 100%;
    height: auto;
  }

  .uk-slider-container.uk-light, 
  .uk-slider {
      height: 215px;
  }

  .cv3-result-card__icon {
    width: 60px;
    height: 60px;
  }

  .cv3-result-card__content {
    align-items: top;
  }

  .sf2-content {
    padding: 20px;
  }

  .sf1-media {
    padding: 80px 30px;
  }
}

@media screen and (max-width: 600px) {
  .sf-form iframe {
    height: 840px;
  }

  .video-section__video {
    min-height: 300px;
    max-height: 300px;
  }
}