.technology-page {
  background: #fff;
  display: flow-root;
  min-height: 100vh;
  --callout-nudge: clamp(12px, 1.6vw, 20px);
  --product-section-top: clamp(96px, 8vw, 124px);
  --product-section-bottom: var(--product-section-top);
  --product-section-height: clamp(960px, 58vw, 1080px);
  --product-content-gap: 28px;
}

.technology-hero {
  align-items: center;
  border-radius: 44px;
  color: #fff;
  display: flex;
  height: calc(100vh - var(--site-header-height) - 60px);
  justify-content: center;
  margin: 20px 24px 0;
  max-width: none;
  min-height: 760px;
  overflow: hidden;
  padding: clamp(120px, 14vh, 176px) clamp(28px, 4vw, 64px) clamp(72px, 9vh, 112px);
  position: relative;
  width: calc(100% - 48px);
}

.technology-hero__media,
.technology-hero__media::after {
  inset: 0;
  position: absolute;
}

.technology-hero__media::after {
  background: linear-gradient(90deg, rgba(2, 13, 20, .38), rgba(2, 13, 20, .38)), linear-gradient(0deg, rgba(2, 10, 14, .7) 0%, rgba(2, 10, 14, .2) 48%, rgba(2, 10, 14, .28) 100%);
  content: "";
}

.technology-hero__media img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center;
  width: 100%;
}

.technology-hero__content {
  align-items: center;
  display: flex;
  flex-direction: column;
  max-width: 900px;
  position: relative;
  text-align: center;
  width: min(100%, 900px);
  z-index: 1;
}

.technology-hero__eyebrow {
  background: rgba(218, 237, 244, .14);
  border: 1px solid rgba(235, 247, 251, .2);
  border-radius: 999px;
  color: rgba(255, 255, 255, .92);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .015em;
  line-height: 1;
  margin: 0 0 26px;
  padding: 12px 16px;
}

.technology-hero__heading {
  margin-inline: auto;
  position: relative;
  width: 100%;
}

.technology-hero__content h1 {
  color: #fff;
  font-size: var(--hero-title-size);
  letter-spacing: -.07em;
  line-height: .96;
  margin: 0;
  max-width: none;
  text-shadow: 0 3px 24px rgba(0, 0, 0, .2);
  width: 100%;
  word-spacing: .08em;
}

.technology-hero__content h1 span {
  display: block;
  white-space: nowrap;
}

.technology-hero__body {
  color: rgba(255, 255, 255, .9);
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  line-height: 1.45;
  margin: 28px auto 0;
  max-width: 720px;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .18);
}

.technology-hero__callout {
  align-items: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.3vw, 24px);
  left: calc(100% + clamp(64px, 4vw, 88px) - 80px);
  position: absolute;
  right: auto;
  text-align: center;
  top: -162px;
  transform: translateX(-160px);
  width: 240px;
}

.technology-hero__callout p {
  color: inherit;
  font-family: "Caveat", "Segoe Print", cursive;
  font-size: clamp(1.5rem, 2vw, 1.85rem);
  font-style: normal;
  font-weight: 500;
  line-height: 1.15;
  margin: 0;
  transform: none;
}

.technology-hero__callout svg {
  height: 130px;
  margin: 0 auto;
  stroke-width: 2.4;
  transform: translateY(-30px);
  width: 240px;
}

.technology-hero__cta {
  align-items: center;
  background: rgba(236, 244, 247, .16);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 14px;
  color: #fff;
  display: inline-flex;
  font-size: .9rem;
  font-weight: 600;
  gap: 13px;
  margin-top: 28px;
  min-height: 50px;
  padding: 10px 11px 10px 18px;
  transition: background-color .2s ease, transform .2s ease;
}

.technology-hero__cta span {
  align-items: center;
  border-left: 1px solid rgba(255, 255, 255, .24);
  display: flex;
  height: 28px;
  padding-left: 11px;
}

.technology-hero__cta:hover {
  background: rgba(236, 244, 247, .25);
  transform: translateY(-2px);
}

.products-scroll-header {
  align-items: center;
  background: rgba(255, 253, 250, .97);
  border-bottom: 1px solid rgba(0, 0, 0, .12);
  color: #000;
  display: flex;
  min-height: 72px;
  padding: 12px clamp(24px, 5vw, 72px);
  opacity: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  transform: translateY(-100%);
  transition: opacity .24s var(--ease-out), transform .24s var(--ease-out), visibility 0s linear .24s;
  will-change: opacity, transform;
  visibility: hidden;
  width: 100%;
  z-index: 4;
}

.products-scroll-header__inner {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1260px;
  transform: translateX(clamp(0px, 1.8vw, 24px));
  width: 100%;
}

.products-scroll-header__brand {
  color: #000;
  font-size: .96rem;
  font-weight: 600;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.products-scroll-header.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
  visibility: visible;
}

.products-scroll-header__links {
  align-items: center;
  display: flex;
  gap: clamp(18px, 2.8vw, 44px);
  min-width: 0;
}

.products-scroll-header__links a {
  border-radius: 999px;
  color: rgba(0, 0, 0, .72);
  font-size: .88rem;
  padding: 10px 14px;
  transition: background-color .2s ease, color .2s ease;
  white-space: nowrap;
}

.products-scroll-header__links a:hover,
.products-scroll-header__links a.is-active {
  background: #000;
  color: #fff;
}

.technology-product {
  background: #707674;
  color: #fff;
  margin: 0;
  overflow-x: clip;
  padding: calc(var(--product-section-top) - 60px) clamp(24px, 8vw, 144px) var(--product-section-bottom);
  position: relative;
}

.technology-product__intro {
  margin: 0 auto;
  max-width: 1120px;
  position: relative;
  top: 0;
  text-align: center;
}

.technology-product__eyebrow {
  color: #fff;
  font-family: "PP Neue Montreal", sans-serif;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .1em;
  margin: 0 0 30px;
  text-transform: uppercase;
}

.technology-product__intro h2 {
  color: #fff;
  font-family: "PP Neue Montreal", sans-serif;
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 400;
  letter-spacing: -.065em;
  line-height: 1.02;
  margin: 0 auto 38px;
  max-width: 1120px;
}

.technology-product__intro > p:last-child,
.electronic-product__intro > p:not(.technology-product__eyebrow),
.beekeeping-product__intro > p:not(.technology-product__eyebrow) {
  color: rgba(255, 255, 255, .9);
  font-family: "PP Neue Montreal", sans-serif;
  font-size: clamp(.98rem, 1.35vw, 1.18rem);
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1.5;
  margin: 0 auto;
  max-width: 1120px;
  width: 100%;
}

.technology-product__gallery {
  align-items: center;
  display: grid;
  gap: clamp(18px, 4vw, 72px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: clamp(0px, 2vw, 26px) auto clamp(16px, 3vw, 34px);
  max-width: min(920px, 78vw);
  position: relative;
  top: -96px;
}

.technology-product__frame {
  margin: 0;
  min-width: 0;
  opacity: 0;
  padding-top: clamp(148px, 12vw, 176px);
  position: relative;
  transform: translate3d(0, 42px, 0) scale(.95) rotateX(4deg);
  transform-origin: 50% 12%;
  transition: opacity .7s ease, transform 1s cubic-bezier(.16, .86, .24, 1);
  will-change: opacity, transform;
}

.technology-product__frame.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1) rotateX(0deg);
}

.technology-product__frame:nth-child(1) { transition-delay: .05s; }
.technology-product__frame:nth-child(2) { transition-delay: .17s; }

.technology-product__frame img {
  display: block;
  height: clamp(360px, 42vw, 620px);
  object-fit: contain;
  transform: translateY(-10px) scale(.9);
  width: 100%;
}

.technology-product__frame:first-child img { height: clamp(216px, 25.2vw, 372px); }

.technology-product__callout {
  align-items: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  position: absolute;
  text-align: center;
  top: calc(clamp(38px, 3.8vw, 62px) - 10px);
  transform: translateX(0);
  transition: opacity .7s ease, transform .85s cubic-bezier(.22, .8, .26, 1);
  width: min(100%, 360px);
  z-index: 1;
}

.technology-product__callout--left { transform: translateX(-72px); }
.technology-product__callout--right { transform: translateX(72px); }
.technology-product__callout.is-visible { opacity: 1; transform: translateX(0); }

.technology-product__callout p {
  color: inherit;
  font-family: "Caveat", "Segoe Print", cursive;
  font-size: clamp(1.5rem, 2vw, 1.85rem);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.2;
  margin: 0 auto;
  max-width: 320px;
  transform: none;
}

.technology-product__callout p span {
  display: block;
  margin-top: 2px;
  font-size: 0.78em;
  line-height: 1;
}

.technology-product__callout svg {
  color: inherit;
  height: 160px;
  margin: 0 auto;
  overflow: visible;
  stroke-width: 2.4;
  transform: none;
  width: 300px;
}

.technology-product__callout-arrow--mobile { display: none; }

.technology-product__callout--left {
  left: -142px;
  top: calc(clamp(38px, 3.8vw, 62px) - 14px);
}
.technology-product__callout--right {
  right: -152px;
  top: calc(clamp(38px, 3.8vw, 62px) + 66px);
}

.technology-product__order {
  display: flex;
  justify-content: center;
  margin: 28px auto 0;
  position: relative;
  z-index: 2;
}

.technology-product__order .button--order {
  align-items: center;
  background: #79c52a;
  border: 0;
  border-radius: 2px;
  box-shadow: 0 12px 26px rgba(34, 79, 42, .16);
  color: #102f26;
  font-size: 1rem;
  min-width: 182px;
  overflow: hidden;
  padding: 17px 24px;
  position: relative;
  transition: background-color .25s ease, box-shadow .25s ease, transform .25s cubic-bezier(.22, .8, .26, 1);
}

.technology-product__order .button--order::after {
  background: rgba(255, 255, 255, .32);
  content: "";
  height: 140%;
  left: -34%;
  position: absolute;
  top: -20%;
  transform: translateX(-140%) skewX(-18deg);
  transition: transform .65s cubic-bezier(.22, .8, .26, 1);
  width: 24%;
}

.technology-product__order .button--order:hover,
.technology-product__order .button--order:focus-visible {
  background: #88d63a;
  box-shadow: 0 17px 32px rgba(34, 79, 42, .22);
  transform: translateY(-4px);
}

.technology-product__order .button--order:hover::after,
.technology-product__order .button--order:focus-visible::after {
  transform: translateX(660%) skewX(-18deg);
}

.technology-product__order .button--order svg {
  height: 18px;
  width: 18px;
}

.technology-product__features {
  display: grid;
  gap: clamp(24px, 3.2vw, 56px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 auto;
  max-width: 1260px;
  position: relative;
  top: -126px;
  transform: translateX(clamp(0px, 1.8vw, 24px));
}

.technology-product__feature {
  border-top: 1px solid rgba(220, 241, 191, .26);
  padding-top: 24px;
  text-align: left;
}

.technology-product__feature h3,
.electronic-product__frame figcaption {
  color: #fff;
  font-size: clamp(.9rem, 1.05vw, 1.08rem);
  line-height: 1.2;
  margin: 0 0 14px;
}

.technology-product__feature p,
.electronic-product__description {
  color: rgba(255, 255, 255, .82);
  font-size: clamp(.82rem, .95vw, .98rem);
  line-height: 1.45;
  margin: 0;
  max-width: 400px;
}

.technology-product__feature p {
  display: block;
  overflow: visible;
}

.electronic-product {
  background: #2f5f4e;
  color: #fff;
  margin: 0;
  min-height: clamp(960px, 58vw, 1080px);
  overflow-x: clip;
  padding: var(--product-section-top) clamp(24px, 8vw, 144px) clamp(72px, 8vw, 108px);
}

.electronic-product__intro {
  margin: 0 auto;
  max-width: 1120px;
  text-align: center;
}

.electronic-product__intro .technology-product__eyebrow {
  font-size: .76rem;
  line-height: normal;
  margin-bottom: 30px;
}

.electronic-product__intro h2 {
  color: #fff;
  font-family: "PP Neue Montreal", sans-serif;
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 400;
  letter-spacing: -.065em;
  line-height: 1.02;
  margin: 0 auto 28px;
  max-width: none;
  white-space: nowrap;
}

.electronic-product__intro .electronic-product__order {
  margin-top: 28px;
}

.electronic-product__gallery {
  align-items: start;
  display: grid;
  gap: clamp(40px, 5vw, 72px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 32px auto 0;
  max-width: 1320px;
}

.electronic-product__frame {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin: 0;
  min-width: 0;
  opacity: 0;
  --electronic-object-offset: 0%;
  --electronic-text-offset: 0%;
  transform: translate3d(0, 42px, 0) scale(.95) rotateX(4deg);
  transform-origin: 50% 12%;
  transition: opacity .7s ease, transform 1s cubic-bezier(.16, .86, .24, 1);
  will-change: opacity, transform;
}

.electronic-product__frame.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1) rotateX(0deg);
}

.electronic-product__frame:nth-child(2) {
  transition-delay: .08s;
}

.electronic-product__frame:nth-child(3) {
  transition-delay: .16s;
}

.electronic-product { content-visibility: auto; contain-intrinsic-size: 1100px; }

.electronic-product__visual {
  align-items: center;
  aspect-ratio: 4 / 3;
  display: flex;
  justify-content: center;
  overflow: visible;
  padding: 0;
  position: relative;
  width: 100%;
}

.electronic-product__frame img {
  background: transparent;
  display: block;
  filter: none;
  height: 100%;
  inset: 0;
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  position: absolute;
  transform: translateX(var(--electronic-object-offset)) scale(1.16);
  width: 100%;
}

.electronic-product__frame:nth-child(2) {
  --electronic-object-offset: calc(-7% - 20px);
  --electronic-text-offset: -22px;
}

.electronic-product__frame:first-child {
  --electronic-text-offset: -40px;
}

.electronic-product__frame figcaption {
  color: #fff;
  font-family: "PP Neue Montreal", sans-serif;
  font-size: clamp(.9rem, 1.05vw, 1.08rem);
  font-weight: 500;
  line-height: 1.2;
  margin-top: 20px;
  min-height: 1.2em;
  text-align: center;
  transform: translate(var(--electronic-text-offset), 20px);
}

.electronic-product__description {
  color: rgba(255, 255, 255, .76);
  font-family: "PP Neue Montreal", sans-serif;
  font-size: clamp(.82rem, .95vw, .98rem);
  line-height: 1.45;
  box-sizing: border-box;
  display: block;
  margin: 14px auto 0;
  max-width: 100%;
  min-height: 0;
  text-align: center;
  transform: translateY(20px);
  width: 100%;
}

.beekeeping-product {
  background: #9a7000;
  border-top: 2px solid #9a7000;
  box-shadow: 0 -2px 0 #9a7000;
  color: #173b32;
  min-height: clamp(960px, 58vw, 1080px);
  overflow: hidden;
  padding: var(--product-section-top) clamp(24px, 8vw, 144px) clamp(72px, 8vw, 108px);
  text-align: center;
}

.beekeeping-product__intro {
  margin: 0 auto;
  max-width: 1120px;
}

.beekeeping-product .technology-product__eyebrow {
  color: #173b32;
}

.beekeeping-product__intro > p:not(.technology-product__eyebrow) {
  color: rgba(23, 59, 50, .82);
}

.beekeeping-product__visual {
  align-items: center;
  aspect-ratio: 1672 / 941;
  display: flex;
  justify-content: center;
  margin: clamp(20px, 2vw, 28px) auto 0;
  opacity: 0;
  transform: translate3d(0, 30px, 0) scale(.96);
  transition: opacity .7s ease, transform 1s cubic-bezier(.16, .86, .24, 1);
  will-change: opacity, transform;
  width: min(100%, 700px);
}

.beekeeping-product__visual.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.beekeeping-product__visual img {
  display: block;
  height: auto;
  max-height: clamp(175px, 21vw, 308px);
  object-fit: contain;
  width: 70%;
}

.beekeeping-product h2 {
  color: #173b32;
  font-family: "PP Neue Montreal", sans-serif;
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 400;
  letter-spacing: -.065em;
  line-height: 1.02;
  margin: 0 auto 28px;
  max-width: 1120px;
}

.beekeeping-product h2 span { display: inline; }
.beekeeping-product h2 { white-space: nowrap; }

.beekeeping-product__order { margin-top: 28px; }

.beekeeping-product__features {
  display: grid;
  gap: clamp(24px, 3.2vw, 56px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 24px auto 0;
  max-width: 1260px;
}

.beekeeping-product__feature {
  border-top: 1px solid rgba(23, 59, 50, .3);
  padding-top: 24px;
  text-align: left;
}

.beekeeping-product__feature h3 {
  color: #173b32;
  font-size: clamp(.9rem, 1.05vw, 1.08rem);
  line-height: 1.2;
  margin: 0 0 14px;
}

.beekeeping-product__feature p {
  color: rgba(23, 59, 50, .78);
  font-size: clamp(.82rem, .95vw, .98rem);
  line-height: 1.45;
  margin: 0;
  max-width: 400px;
}

.produce-crates-product {
  align-items: center;
  background: #35203f;
  color: #fff;
  display: flex;
  flex-direction: column;
  min-height: clamp(960px, 58vw, 1080px);
  overflow-x: clip;
  padding: clamp(72px, 9vw, 132px) clamp(24px, 8vw, 144px);
  text-align: center;
}

.produce-crates-product__content {
  margin: 0 auto;
  max-width: 1120px;
  width: 100%;
}

.produce-crates-product .technology-product__eyebrow {
  color: rgba(255, 255, 255, .82);
}

.produce-crates-product h2 {
  color: #fff;
  font-family: "PP Neue Montreal", sans-serif;
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  font-weight: 400;
  letter-spacing: -.065em;
  line-height: 1.02;
  margin: 0 auto 28px;
  max-width: 1120px;
}

.produce-crates-product h2 span { display: inline; }

.produce-crates-product__content > p:not(.technology-product__eyebrow) {
  color: rgba(255, 255, 255, .78);
  font-family: "PP Neue Montreal", sans-serif;
  font-size: clamp(1rem, 1.4vw, 1.28rem);
  line-height: 1.5;
  margin: 0 auto;
  max-width: 980px;
}

.produce-crates-product__order { margin-top: 28px; }

.produce-crates-product__gallery {
  align-items: end;
  display: grid;
  gap: clamp(56px, 8vw, 140px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 32px auto 0;
  max-width: 1260px;
  transform: translateY(40px);
  width: 100%;
}

.produce-crates-product__frame {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(280px, 29vw, 440px);
  opacity: 0;
  position: relative;
  transform: translate3d(0, 42px, 0) scale(.95) rotateX(4deg);
  transform-origin: 50% 12%;
  transition: opacity .7s ease, transform 1s cubic-bezier(.16, .86, .24, 1);
  will-change: opacity, transform;
}

.produce-crates-product__frame.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1) rotateX(0deg);
}

.produce-crates-product__frame:nth-child(2) { transition-delay: .14s; }

.produce-crates-product__frame img {
  display: block;
  height: auto;
  object-fit: contain;
  width: min(100%, 540px);
}

.produce-crates-product__frame--small img {
  transform: translateX(-30px) scale(.8);
  width: min(100%, 350px);
}

.produce-crates-product__frame--large img {
  transform: translateX(-10px) scale(.99);
  width: min(100%, 660px);
}

.produce-crates-product__specs {
  border-top: 1px solid rgba(220, 241, 191, .26);
  list-style: none;
  margin: 14px auto 0;
  padding: 12px 0 0;
  text-align: left;
  width: min(100%, 460px);
}

.produce-crates-product__specs li {
  color: rgba(255, 255, 255, .82);
  font-size: clamp(.82rem, .95vw, .98rem);
  line-height: 1.45;
  padding-left: 0;
}

/* Keep product feature copy consistent across every product section. */
.technology-product__feature h3,
.electronic-product__frame figcaption,
.beekeeping-product__feature h3 {
  color: #fff;
  font-family: "PP Neue Montreal", sans-serif;
  font-size: clamp(.9rem, 1.05vw, 1.08rem);
  font-weight: 500;
  line-height: 1.2;
}

.technology-product__feature p,
.electronic-product__description,
.beekeeping-product__feature p,
.produce-crates-product__specs li {
  color: rgba(255, 255, 255, .82);
  font-family: "PP Neue Montreal", sans-serif;
  font-size: clamp(.82rem, .95vw, .98rem);
  line-height: 1.45;
}

.electronic-product__highlights {
  color: rgba(255, 255, 255, .82);
  display: grid;
  font-family: "PP Neue Montreal", sans-serif;
  font-size: clamp(.78rem, .9vw, .9rem);
  gap: 7px;
  line-height: 1.4;
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}

.electronic-product__highlights li {
  padding-left: 14px;
  position: relative;
}

.electronic-product__highlights li::before {
  background: currentColor;
  content: "";
  height: 4px;
  left: 0;
  position: absolute;
  top: .55em;
  width: 4px;
}

.electronic-product__specs {
  border-top: 1px solid rgba(255, 255, 255, .22);
  color: rgba(255, 255, 255, .82);
  font-family: "PP Neue Montreal", sans-serif;
  margin-top: 18px;
  padding-top: 12px;
}

.electronic-product__specs summary {
  color: #fff;
  cursor: pointer;
  font-size: .86rem;
  font-weight: 500;
  list-style: none;
}

.electronic-product__specs summary::-webkit-details-marker { display: none; }
.electronic-product__specs summary::after { content: "+"; float: right; font-size: 1.05rem; line-height: 1; }
.electronic-product__specs[open] summary::after { content: "−"; }

.electronic-product__specs dl {
  display: grid;
  gap: 0;
  margin: 12px 0 0;
}

.electronic-product__specs dl > div {
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  padding: 7px 0;
}

.electronic-product__specs dt,
.electronic-product__specs dd {
  font-size: .76rem;
  line-height: 1.3;
  margin: 0;
}

.electronic-product__specs dd { color: #fff; text-align: right; }

.produce-crates-product__callout {
  align-items: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  position: absolute;
  text-align: center;
  top: -8px;
  transition: opacity .7s ease, transform .85s cubic-bezier(.22, .8, .26, 1);
  width: min(100%, 320px);
  z-index: 1;
}

.produce-crates-product__callout--left {
  left: calc(clamp(-72px, -6vw, -24px) - 160px);
  transform: translateX(-52px);
}

.produce-crates-product__callout--right {
  right: calc(clamp(-72px, -6vw, -24px) - 200px);
  transform: translateX(52px);
}

.produce-crates-product__frame--small .produce-crates-product__callout { top: -18px; }
.produce-crates-product__frame--large .produce-crates-product__callout { top: -18px; }

.produce-crates-product__callout.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.produce-crates-product__callout p {
  color: inherit;
  font-family: "Caveat", "Segoe Print", cursive;
  font-size: clamp(1.5rem, 2vw, 1.85rem);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.2;
  margin: 0 auto;
}

.produce-crates-product__callout svg {
  height: 160px;
  margin: 0 auto;
  overflow: visible;
  stroke-width: 2.4;
  width: 300px;
}

.vaccines-product {
  background: #123b5c;
  color: #fff;
  min-height: clamp(960px, 58vw, 1080px);
  overflow: hidden;
  padding: clamp(72px, 9vw, 132px) clamp(24px, 8vw, 144px) clamp(72px, 8vw, 108px);
  text-align: center;
}

.vaccines-product__content,
.vaccines-product__features {
  margin: 0 auto;
  max-width: 1120px;
}

.vaccines-product .technology-product__eyebrow,
.vaccines-product h2,
.vaccines-product__content > p:not(.technology-product__eyebrow),
.vaccines-product__feature h3,
.vaccines-product__feature p { color: #fff; }

.vaccines-product h2 {
  font-family: "PP Neue Montreal", sans-serif;
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  font-weight: 400;
  letter-spacing: -.065em;
  line-height: 1.02;
  margin: 0 auto 28px;
  max-width: 1120px;
}

.vaccines-product__content > p:not(.technology-product__eyebrow) {
  font-family: "PP Neue Montreal", sans-serif;
  font-size: clamp(1rem, 1.4vw, 1.28rem);
  line-height: 1.5;
  margin: 0 auto;
  max-width: 980px;
}

.vaccines-product__order { margin-top: 28px; }

.vaccines-product__visual {
  background: rgba(255, 255, 255, .035);
  border: 1px dashed rgba(255, 255, 255, .22);
  min-height: clamp(190px, 22vw, 320px);
  margin: 32px auto 0;
  max-width: 900px;
  opacity: 0;
  transform: translate3d(0, 30px, 0) scale(.97);
  transition: opacity .7s ease, transform 1s cubic-bezier(.16, .86, .24, 1);
}

.vaccines-product__visual.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.vaccines-product__features {
  display: grid;
  gap: clamp(24px, 3.2vw, 56px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(20px, 2vw, 28px);
}

.vaccines-product__feature {
  border-top: 1px solid rgba(255, 255, 255, .26);
  padding-top: 24px;
  text-align: left;
}

.vaccines-product__feature h3 {
  font-family: "PP Neue Montreal", sans-serif;
  font-size: clamp(.9rem, 1.05vw, 1.08rem);
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 14px;
}

.vaccines-product__feature p {
  font-family: "PP Neue Montreal", sans-serif;
  font-size: clamp(.82rem, .95vw, .98rem);
  line-height: 1.45;
  margin: 0;
  max-width: 400px;
}

/* Keep every product section's heading at the same distance from its top edge. */
.produce-crates-product,
.vaccines-product,
.electronic-product,
.beekeeping-product {
  min-height: var(--product-section-height);
  padding-bottom: var(--product-section-bottom);
  padding-top: calc(var(--product-section-top) - 60px);
}

/* Keep the feature descriptions the same distance from each section's
   intersection, regardless of the product content above them. */
.electronic-product,
.beekeeping-product,
.produce-crates-product,
.vaccines-product {
  min-height: var(--product-section-height);
}

/* Normalize the shared product rhythm without changing the tag section. */
.electronic-product__intro h2,
.beekeeping-product h2,
.produce-crates-product h2,
.vaccines-product h2 {
  margin-bottom: var(--product-content-gap);
}

.electronic-product__intro .electronic-product__order,
.beekeeping-product__order,
.produce-crates-product__order,
.vaccines-product__order {
  margin-top: var(--product-content-gap);
}

.technology-product__gallery,
.electronic-product__gallery,
.beekeeping-product__visual,
.produce-crates-product__gallery,
.vaccines-product__visual {
  margin-top: 72px;
}

.technology-product__gallery {
  top: 0;
}

.electronic-product__gallery,
.produce-crates-product__gallery {
  transform: none;
}

.beekeeping-product__features,
.vaccines-product__features {
  margin-top: 32px;
}

.site-footer a { color: var(--forest); }

@media (max-width: 760px) {
  .technology-hero { border-radius: 28px; height: auto; margin: 16px; min-height: 0; padding: 112px 22px 54px; width: calc(100% - 32px); }
  .technology-hero__media img { object-position: 68% center; }
  .technology-hero__eyebrow { font-size: .72rem; margin-bottom: 20px; padding: 10px 13px; }
  .technology-hero__content h1 { font-size: clamp(2.1rem, 8.2vw, 3.2rem); line-height: 1.03; max-width: 100%; }
  .technology-hero__content h1 span { white-space: normal; }
  .technology-hero__body { font-size: .95rem; line-height: 1.45; margin-top: 22px; max-width: 31rem; }
  .technology-hero__callout { display: none; }
  .technology-hero__cta { margin-top: 24px; }
  .products-scroll-header { min-height: 60px; padding: 10px 20px; }
  .products-scroll-header__inner { gap: 20px; transform: none; }
  .products-scroll-header__brand { font-size: .86rem; }
  .products-scroll-header__links { gap: 0; justify-content: space-between; max-width: calc(100vw - 112px); overflow-x: auto; scrollbar-width: none; }
  .products-scroll-header__links::-webkit-scrollbar { display: none; }
  .products-scroll-header__links a { font-size: .72rem; padding: 8px 9px; }
  .technology-page { --product-section-bottom: 80px; }
  .technology-product { display: flex; flex-direction: column; margin: 0; overflow: hidden; padding: 48px 16px var(--product-section-bottom); }
  .technology-product__intro { top: 0; }
  .technology-product__intro { order: 1; }
  .technology-product__eyebrow { font-size: .68rem; letter-spacing: .16em; margin-bottom: 20px; }
  .technology-product__intro h2 { font-size: clamp(2rem, 9.5vw, 2.65rem); line-height: 1.02; margin-bottom: 22px; max-width: 18ch; }
  .technology-product__intro > p:last-child { font-size: .9rem; line-height: 1.45; max-width: 35rem; }
  .technology-product__gallery { gap: 12px; grid-template-columns: 1fr; margin: 22px auto 48px; max-width: 280px; order: 3; top: 0; width: min(100%, 280px); }
  .technology-product__frame { padding-top: 108px; }
  .technology-product__frame img { height: clamp(236px, 68vw, 300px); }
  .technology-product__frame:first-child img { height: clamp(148px, 43vw, 190px); }
  /* The desktop size callouts sit outside the product gallery. On a phone that
     position clips one callout and hides the other, so keep the product views
     clean and fully inside the viewport at mobile widths. */
  .technology-product__callout { display: none; }
  .technology-product__callout { gap: 8px; top: -2px; width: 100%; }
  .technology-product__callout--left,
  .technology-product__callout--left.is-visible { left: calc(clamp(-34px, -8vw, -20px) - 40px); right: auto; }
  .technology-product__callout--right,
  .technology-product__callout--right.is-visible { left: auto; right: calc(clamp(-34px, -8vw, -20px) - 50px); top: 6px; }
  .technology-product__callout p { font-size: 1.15rem; line-height: 1.08; max-width: 180px; }
  .technology-product__callout p { position: relative; top: 40px; }
  .technology-product__callout--left p { left: -50px; }
  .technology-product__callout--right p { left: 50px; }
  .technology-product__callout > svg:not(.technology-product__callout-arrow--mobile) { display: block; height: 96px; margin-top: 0; position: relative; stroke-width: 2.2; top: 0; width: 180px; }
  .technology-product__callout--left > svg:not(.technology-product__callout-arrow--mobile) { transform: translate(-50px, 50px); }
  .technology-product__callout--right > svg:not(.technology-product__callout-arrow--mobile) { transform: translate(50px, 50px); }
  .technology-product__callout > svg.technology-product__callout-arrow--mobile { display: none; }
  .technology-product__callout--left .technology-product__callout-arrow--mobile { left: -30px; transform: rotate(-45deg); transform-origin: 50% 50%; }
  .technology-product__callout--right .technology-product__callout-arrow--mobile { left: 30px; transform: rotate(45deg); transform-origin: 50% 50%; }
  .technology-product__features { gap: 24px; grid-template-columns: 1fr; margin: 0 auto; max-width: 320px; order: 4; top: 0; transform: none; }
  .technology-product__feature { padding-top: 16px; }
  .technology-product__feature h3,
  .electronic-product__frame figcaption,
  .beekeeping-product__feature h3 { font-size: 1rem; margin-bottom: 10px; }
  .technology-product__feature p,
  .electronic-product__description,
  .beekeeping-product__feature p,
  .produce-crates-product__specs li { font-size: .88rem; line-height: 1.45; }
  .technology-product__order { margin: 28px auto 0; order: 2; }
  .technology-product__order .button--order { min-width: 0; padding: 15px 20px; width: min(100%, 240px); }
  .electronic-product { min-height: 0; padding: 48px 20px var(--product-section-bottom); }
  .electronic-product__intro { margin-bottom: 64px; }
  .electronic-product__intro .technology-product__eyebrow { font-size: .68rem; }
  .electronic-product__intro .electronic-product__order { margin-top: 28px; }
  .electronic-product__intro h2 { font-size: clamp(2rem, 9.5vw, 2.65rem); margin-bottom: 28px; white-space: normal; }
  .electronic-product__intro > p { font-size: .98rem; line-height: 1.5; }
  .electronic-product__gallery { gap: 34px; grid-template-columns: 1fr; margin: 120px auto 0; max-width: 340px; }
  .electronic-product__visual { aspect-ratio: 4 / 3; overflow: hidden; }
  .electronic-product__frame img,
  .electronic-product__frame:nth-child(2) img { height: 100%; transform: none; width: 100%; }
  .electronic-product__frame { --electronic-text-offset: 0%; }
  .electronic-product__frame:first-child,
  .electronic-product__frame:nth-child(2) { --electronic-text-offset: 0%; }
  .electronic-product__frame figcaption,
  .electronic-product__description { transform: translate(var(--electronic-text-offset), 20px); }
  .electronic-product__frame figcaption { margin-top: 14px; min-height: 2.4em; }
  .electronic-product__description { font-size: .88rem; max-width: 315px; }
  .beekeeping-product { min-height: 0; padding: 48px 20px var(--product-section-bottom); }
  .beekeeping-product h2 { font-size: clamp(1.1rem, 5.4vw, 2.65rem); margin-bottom: 28px; }
  .beekeeping-product__intro > p:not(.technology-product__eyebrow) { font-size: .98rem; line-height: 1.5; }
  .beekeeping-product__visual { margin-top: 32px; width: min(100%, 560px); }
  .beekeeping-product__visual img { max-height: 210px; width: 70%; }
  .beekeeping-product__features { gap: 24px; grid-template-columns: 1fr; margin: 48px auto 0; max-width: 320px; }
  .beekeeping-product__feature { padding-top: 16px; }
  .beekeeping-product__feature h3 { margin-bottom: 10px; }
  .beekeeping-product__order { margin-top: 28px; }
  .produce-crates-product { min-height: 440px; padding: 48px 20px var(--product-section-bottom); }
  .produce-crates-product h2 { font-size: clamp(2rem, 9.5vw, 2.65rem); margin-bottom: 28px; }
  .produce-crates-product__content > p:not(.technology-product__eyebrow) { font-size: .98rem; line-height: 1.5; }
  .produce-crates-product__order { margin-top: 28px; }
  .produce-crates-product__gallery { gap: 56px; grid-template-columns: 1fr; margin-top: 38px; max-width: 420px; }
  .produce-crates-product__frame { min-height: 260px; }
  .produce-crates-product__frame img { width: min(100%, 420px); }
  .produce-crates-product__frame--small img { transform: scale(.8); width: min(100%, 270px); }
  .produce-crates-product__frame--large img { transform: scale(.954); width: min(100%, 470px); }
  .produce-crates-product__callout { top: -14px; width: 260px; }
  .produce-crates-product__callout--left { left: -172px; }
  .produce-crates-product__callout--right { right: -212px; }
  .produce-crates-product__frame--small .produce-crates-product__callout { top: -24px; }
  .produce-crates-product__frame--large .produce-crates-product__callout { top: -24px; }
  .produce-crates-product__callout { display: none; }
  .produce-crates-product__specs { margin-top: 18px; padding-top: 12px; width: min(100%, 390px); }
  .produce-crates-product__callout p { font-size: 1.22rem; }
  .produce-crates-product__callout svg { height: 112px; stroke-width: 2.2; width: 220px; }
  .vaccines-product { min-height: 0; padding: 48px 20px var(--product-section-bottom); }
  .vaccines-product h2 { font-size: clamp(2rem, 9.5vw, 2.65rem); margin-bottom: 28px; }
  .vaccines-product__content > p:not(.technology-product__eyebrow) { font-size: .98rem; line-height: 1.5; }
  .vaccines-product__order { margin-top: 28px; }
  .vaccines-product__visual { min-height: 220px; margin-top: 42px; }
  .vaccines-product__features { gap: 24px; grid-template-columns: 1fr; margin-top: 48px; max-width: 320px; }
  .vaccines-product__feature { padding-top: 16px; }
  .vaccines-product__feature h3 { margin-bottom: 10px; }
}

/* Normalize every product intro to the Electronic Tags reference rhythm. */
.electronic-product__intro .technology-product__eyebrow,
.beekeeping-product__intro .technology-product__eyebrow,
.produce-crates-product__content .technology-product__eyebrow,
.vaccines-product__content .technology-product__eyebrow {
  margin-bottom: 30px;
}

.electronic-product__intro h2,
.beekeeping-product__intro h2,
.produce-crates-product__content h2,
.vaccines-product__content h2 {
  margin-bottom: 28px;
}

.electronic-product__intro .electronic-product__order,
.beekeeping-product__order,
.produce-crates-product__order,
.vaccines-product__order {
  margin-top: 28px;
}

/* Keep all product intros visually consistent while preserving each section's
   own background. The Tag section is included here intentionally; its former
   whole-content lift is not used for spacing. */
@media (min-width: 761px) {
  .technology-product__eyebrow,
  .electronic-product__intro .technology-product__eyebrow,
  .beekeeping-product__intro .technology-product__eyebrow,
  .produce-crates-product__content .technology-product__eyebrow,
  .vaccines-product__content .technology-product__eyebrow {
    color: rgba(255, 255, 255, .9);
    font-family: "PP Neue Montreal", sans-serif;
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .1em;
    line-height: normal;
    margin-bottom: 30px;
  }

  .technology-product__intro h2,
  .electronic-product__intro h2,
  .beekeeping-product h2,
  .produce-crates-product h2,
  .vaccines-product h2 {
    color: #fff;
    font-family: "PP Neue Montreal", sans-serif;
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 400;
    letter-spacing: -.065em;
    line-height: 1.02;
    margin: 0 auto 28px;
    max-width: 1120px;
    white-space: nowrap;
  }

  .technology-product__intro > p:last-child,
  .electronic-product__intro > p:not(.technology-product__eyebrow),
  .beekeeping-product__intro > p:not(.technology-product__eyebrow),
  .produce-crates-product__content > p:not(.technology-product__eyebrow),
  .vaccines-product__content > p:not(.technology-product__eyebrow) {
    color: rgba(255, 255, 255, .9);
    font-family: "PP Neue Montreal", sans-serif;
    font-size: clamp(.98rem, 1.35vw, 1.18rem);
    font-weight: 400;
    letter-spacing: -.025em;
    line-height: 1.5;
    margin: 0 auto;
    max-width: 1120px;
    width: 100%;
  }

  /* The Electronic Tags gallery gap is the reference for every product. */
  /*
     Use the Beekeeping Tags visual gap as the reference. The wrappers do not
     have the same internal geometry: the Tag frames reserve callout space,
     Crates center images inside a fixed-height frame, and the other sections
     use direct visual containers. These offsets align the visible product
     subject, rather than only aligning the wrapper edges.
  */
  .technology-product__gallery { margin-top: -80px; }
  .electronic-product__gallery { margin-top: 138px; }
  .beekeeping-product__visual { margin-top: 72px; }
  .produce-crates-product__gallery { margin-top: 98px; }
  .vaccines-product__visual { margin-top: 144px; }

  /*
     Normalize the space from the visible final product content to the next
     section. Electronic Tags is the reference: its last descriptions sit
     about 72px above the section intersection on desktop. Move only the
     final content blocks; headings, keywords, buttons, and product visuals
     keep their positions.
  */
  .technology-product__features,
  .beekeeping-product__features,
  .vaccines-product__features { position: relative; top: 43px; }

  .produce-crates-product__specs {
    position: relative;
    top: clamp(50px, calc(5vw + 1px), 76px);
  }
}

/* Keep the same final-content-to-intersection rhythm at tablet widths too.
   This only offsets the final feature/spec blocks; intro and visual content
   remain in their existing positions. */
@media (min-width: 761px) and (max-width: 1100px) {
  .technology-product__features,
  .beekeeping-product__features {
    top: clamp(-54px, calc(23.7vw - 297px), -36px);
  }

  .produce-crates-product__specs {
    top: clamp(82px, calc(272px - 18vw), 133px);
  }

  .vaccines-product__features {
    top: clamp(21px, calc(50px - 2.64vw), 30px);
  }
}

/* At the 1024px transition the Electronic Tags descriptions use a shorter
   final line box. Keep the other sections aligned to that visible endpoint
   without changing their intro, order button, or product visuals. */
@media (min-width: 981px) and (max-width: 1100px) {
  .technology-product__features,
  .beekeeping-product__features { top: -36px; }

  .produce-crates-product__specs {
    top: clamp(82px, calc(461px - 34.5vw), 108px);
  }

  .vaccines-product__features {
    top: clamp(21px, calc(333.5px - 28.4vw), 42.5px);
  }
}

/* The Electronic Tags reference changes subtly in the intermediate desktop
   range; keep the remaining sections aligned with that visible endpoint. */
@media (min-width: 1101px) and (max-width: 1439px) {
  .technology-product__features,
  .beekeeping-product__features,
  .vaccines-product__features {
    top: clamp(24px, calc(11.625vw - 124.4px), 43px);
  }

  .produce-crates-product__specs {
    top: clamp(73px, calc(113.5px - 2.8125vw), 77.5px);
  }
}

/* Match the reference at the compact tablet transition as well. */
@media (min-width: 841px) and (max-width: 980px) {
  .technology-product__features,
  .beekeeping-product__features { top: -64.2px; }
  .produce-crates-product__specs { top: 108.7px; }
  .vaccines-product__features { top: 24.2px; }
}

@media (min-width: 761px) and (max-width: 840px) {
  .technology-product__features,
  .beekeeping-product__features { top: -52.9px; }
  .produce-crates-product__specs { top: 134.6px; }
  .vaccines-product__features { top: 30.9px; }
}

@media (max-width: 760px) {
  .technology-product__intro h2,
  .electronic-product__intro h2,
  .beekeeping-product h2,
  .produce-crates-product h2,
  .vaccines-product h2 {
    color: #fff;
    font-family: "PP Neue Montreal", sans-serif;
    font-size: clamp(2rem, 9.5vw, 2.65rem);
    font-weight: 400;
    letter-spacing: -.065em;
    line-height: 1.02;
    margin-bottom: 28px;
    max-width: 18ch;
    white-space: normal;
  }

  .technology-product__intro > p:last-child,
  .electronic-product__intro > p:not(.technology-product__eyebrow),
  .beekeeping-product__intro > p:not(.technology-product__eyebrow),
  .produce-crates-product__content > p:not(.technology-product__eyebrow),
  .vaccines-product__content > p:not(.technology-product__eyebrow) {
    color: rgba(255, 255, 255, .9);
    font-family: "PP Neue Montreal", sans-serif;
    font-size: .98rem;
    font-weight: 400;
    letter-spacing: -.025em;
    line-height: 1.5;
    margin: 0 auto;
    max-width: 35rem;
    width: 100%;
  }

  .technology-product__gallery,
  .electronic-product__gallery,
  .beekeeping-product__visual,
  .produce-crates-product__gallery,
  .vaccines-product__visual {
    margin-top: 177px;
  }

  /* Match the visible subject gap on phones as well. */
  .technology-product__gallery { margin-top: 45px; }
  .electronic-product__gallery { margin-top: 171px; }
  .beekeeping-product__visual { margin-top: 120px; }
  .produce-crates-product__gallery { margin-top: 132px; }
  .vaccines-product__visual { margin-top: 177px; }

  /* Match the visible Electronic Tags description gap on phones (about 37px)
     without moving the other product content. */
  .technology-product__features,
  .beekeeping-product__features,
  .vaccines-product__features { position: relative; top: 43px; }
  .produce-crates-product__specs { position: relative; top: 32px; }
}

/* Final settled-state alignment: match each section's last visible content
   to the Electronic Tags section gap. Only feature/spec blocks are adjusted;
   intro copy, order buttons, and product visuals keep their positions. */
@media (min-width: 1440px) {
  .technology-product__features,
  .beekeeping-product__features,
  .vaccines-product__features { top: 20px; }

  .produce-crates-product__specs {
    top: calc(clamp(50px, calc(5vw + 1px), 76px) - 2.35px);
  }
}

@media (min-width: 1101px) and (max-width: 1439px) {
  .technology-product__features,
  .beekeeping-product__features,
  .vaccines-product__features {
    top: calc(clamp(24px, calc(11.625vw - 124.4px), 43px) - 24px);
  }

  .produce-crates-product__specs {
    top: calc(clamp(73px, calc(113.5px - 2.8125vw), 77.5px) - 2.5px);
  }
}

@media (min-width: 981px) and (max-width: 1100px) {
  .technology-product__features,
  .beekeeping-product__features { top: -61.5px; }

  .vaccines-product__features {
    top: calc(clamp(21px, calc(333.5px - 28.4vw), 42.5px) - 25.5px);
  }

  .produce-crates-product__specs {
    top: calc(clamp(82px, calc(461px - 34.5vw), 108px) - 2.5px);
  }
}

@media (min-width: 841px) and (max-width: 980px) {
  .technology-product__features,
  .beekeeping-product__features { top: -90.6px; }
  .vaccines-product__features { top: -2.2px; }
  .produce-crates-product__specs { top: 106.1px; }
}

@media (min-width: 761px) and (max-width: 840px) {
  .technology-product__features,
  .beekeeping-product__features { top: -80px; }
  .vaccines-product__features { top: 3.8px; }
  .produce-crates-product__specs { top: 130.6px; }
}

@media (max-width: 760px) {
  .technology-product__features,
  .beekeeping-product__features,
  .vaccines-product__features { top: 20px; }
  .produce-crates-product__specs { top: 36px; }
}

/* The vaccine gallery uses the same visual rhythm as the crate gallery:
   compact four-up imagery, a shared button-to-image gap, and a predictable
   image-to-feature gap. */
.vaccines-product__visual {
  align-items: center;
  background: transparent;
  border: 0;
  display: flex;
  justify-content: center;
  padding: clamp(16px, 2vw, 28px);
}

.vaccines-product__gallery {
  align-items: stretch;
  display: grid;
  gap: clamp(10px, 1.8vw, 22px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 auto;
  width: 100%;
}

.vaccines-product__gallery--single {
  grid-template-columns: minmax(180px, 320px);
  justify-content: center;
}

.vaccines-product__frame {
  margin: 0;
  min-width: 0;
}

.vaccines-product__frame img {
  display: block;
  height: clamp(180px, 19vw, 280px);
  max-width: 100%;
  object-fit: contain;
  width: 100%;
}

.vaccines-product__features {
  margin-top: 32px;
  position: static;
  top: auto;
}

@media (min-width: 761px) {
  .produce-crates-product__frame { justify-content: flex-end; }
  .vaccines-product__visual { margin-top: 28px; }
}

@media (max-width: 760px) {
  .vaccines-product__visual {
    margin-top: 132px;
    min-height: 0;
  }

  .vaccines-product__gallery {
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vaccines-product__gallery--single {
    grid-template-columns: minmax(180px, 220px);
    justify-content: center;
  }

  .vaccines-product__frame img { height: 190px; }
  .vaccines-product__features { margin-top: 32px; }
}

/* Phone layout pass: keep the product navigator in the document flow and
   remove desktop-sized visual gaps that made the mobile sections feel empty. */
@media (max-width: 760px) {
  .products-scroll-header {
    background: rgba(255, 253, 250, .98);
    min-height: 58px;
    opacity: 1;
    padding: 7px 12px;
    pointer-events: auto;
    position: sticky;
    top: 0;
    transform: none;
    transition: none;
    visibility: visible;
    z-index: 4;
  }

  .products-scroll-header__inner {
    gap: 10px;
    min-width: 0;
    transform: none;
  }

  .products-scroll-header__brand {
    flex: 0 0 auto;
    font-size: .78rem;
  }

  .products-scroll-header__links {
    flex: 1 1 auto;
    gap: 0;
    justify-content: space-between;
    max-width: none;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .products-scroll-header__links::-webkit-scrollbar { display: none; }
  .products-scroll-header__links a {
    align-items: center;
    display: inline-flex;
    font-size: .68rem;
    min-height: 44px;
    padding: 8px 9px;
  }

  .technology-page { --product-section-bottom: 64px; }
  .technology-product,
  .electronic-product,
  .beekeeping-product,
  .produce-crates-product,
  .vaccines-product { scroll-margin-top: 58px; }

  .technology-product,
  .electronic-product,
  .beekeeping-product,
  .produce-crates-product,
  .vaccines-product { padding-top: 38px; }

  .technology-product__gallery {
    gap: 20px;
    margin: 28px auto 30px;
    max-width: 270px;
  }

  .technology-product__frame { padding-top: 28px; }
  .technology-product__frame img { height: 270px; }
  .technology-product__frame:first-child img { height: 170px; }
  .technology-product__features { top: 0; }

  .electronic-product__intro { margin-bottom: 0; }
  .electronic-product__gallery {
    gap: 44px;
    margin: 48px auto 0;
    max-width: 320px;
  }

  .electronic-product__visual { aspect-ratio: 4 / 3; }
  .electronic-product__frame figcaption,
  .electronic-product__description { transform: none; }
  .electronic-product__frame figcaption { margin-top: 12px; }
  .electronic-product__description { margin-top: 10px; }

  .beekeeping-product__visual { margin-top: 36px; }
  .beekeeping-product__features { margin-top: 32px; top: 0; }

  .produce-crates-product__gallery {
    gap: 32px;
    margin-top: 42px;
  }

  .produce-crates-product__frame { min-height: 190px; }
  .produce-crates-product__frame--small img { width: min(100%, 250px); }
  .produce-crates-product__frame--large img { width: min(100%, 390px); }
  .produce-crates-product__specs { margin-top: 12px; top: 0; }

  /* No empty vaccine frame remains while the replacement image set is being
     prepared. Keep the copy and feature list compact in the meantime. */
  .vaccines-product__features { margin-top: 30px; top: 0; }
}

/* Keep the vaccine panel in the same mobile rhythm as beekeeping. */
@media (max-width: 760px) {
  .vaccines-product__visual {
    margin-top: 36px;
  }

  .vaccines-product__gallery--single {
    grid-template-columns: minmax(180px, 240px);
  }

  .vaccines-product__frame img {
    height: 210px;
  }

  .vaccines-product__features {
    margin-top: 32px;
    top: 0;
  }
}

/* A slightly smaller shared product type scale keeps each section readable
   on phones while preserving the existing desktop hierarchy. */
@media (max-width: 760px) {
  .technology-product__intro h2,
  .electronic-product__intro h2,
  .beekeeping-product h2,
  .produce-crates-product__content h2,
  .vaccines-product h2 {
    font-size: clamp(1.85rem, 8.5vw, 2.45rem);
  }

  .technology-product__intro > p:not(.technology-product__eyebrow),
  .electronic-product__intro > p:not(.technology-product__eyebrow),
  .beekeeping-product__intro > p:not(.technology-product__eyebrow),
  .produce-crates-product__content > p:not(.technology-product__eyebrow),
  .vaccines-product__content > p:not(.technology-product__eyebrow) {
    font-size: .92rem;
    line-height: 1.45;
  }
}

@media (prefers-reduced-motion: reduce) {
  .technology-product__callout { opacity: 1; transform: none; transition: none; }
  .technology-product__frame,
  .technology-product__frame.is-visible { opacity: 1; transform: none; transition: none; }
  .electronic-product__frame,
  .electronic-product__frame.is-visible { opacity: 1; transform: none; transition: none; }
  .beekeeping-product__visual,
  .beekeeping-product__visual.is-visible { opacity: 1; transform: none; transition: none; }
  .produce-crates-product__frame,
  .produce-crates-product__frame.is-visible,
  .produce-crates-product__callout,
  .produce-crates-product__callout.is-visible { opacity: 1; transform: none; transition: none; }
  .vaccines-product__visual,
  .vaccines-product__visual.is-visible { opacity: 1; transform: none; transition: none; }
  .technology-product__order .button--order { transition: none; }
  .technology-product__order .button--order::after { display: none; }
}

/* Final visual rhythm: keep the beekeeping tag aligned with the vaccine
   visual, and tighten the desktop crate panel without changing phone layout. */
@media (min-width: 761px) {
  /* Lower only the two crate images; keep the gallery, callouts, and specs in place. */
  .produce-crates-product__frame--small img {
    transform: translate(-50px, 50px) scale(.8);
  }

  .produce-crates-product__frame--large img {
    transform: translate(-10px, 50px) scale(.99);
  }

  .beekeeping-product__visual {
    aspect-ratio: auto;
    margin-top: 28px;
    min-height: clamp(190px, 22vw, 320px);
    padding: clamp(16px, 2vw, 28px);
  }

  .beekeeping-product__visual img {
    height: clamp(180px, 19vw, 280px);
    max-height: none;
    width: 100%;
  }

  .produce-crates-product {
    min-height: calc(var(--product-section-height) - 50px);
    padding-bottom: max(0px, calc(var(--product-section-bottom) - 10px));
  }

  .produce-crates-product__gallery {
    transform: translateY(-50px);
  }
}

@media (max-width: 760px) {
  .beekeeping-product__visual {
    aspect-ratio: auto;
    margin-top: 36px;
    min-height: 0;
    padding: 16px;
    width: 100%;
  }

  .beekeeping-product__visual img {
    height: 210px;
    max-height: none;
    width: 100%;
  }
}

/* Keep electronic product copy in the same boundary, spacing, and alignment
   system as the other product feature/spec blocks. */
.electronic-product__frame {
  --electronic-text-offset: 0;
}

.electronic-product__frame figcaption {
  align-self: stretch;
  border-top: 1px solid rgba(220, 241, 191, .26);
  /* The scaled image extends beyond its visual wrapper. Keep the divider
     below the visible image by the same ~32px used by the other sections. */
  margin-top: calc(32px + 1.5vw);
  min-height: 0;
  padding-top: 24px;
  text-align: left;
  transform: none;
  width: 100%;
}

.electronic-product__description {
  align-self: stretch;
  height: auto;
  margin: 0;
  max-width: none;
  min-height: 0;
  text-align: left;
  transform: none;
  width: 100%;
}

@media (max-width: 760px) {
  .electronic-product__frame figcaption {
    margin-top: 22px;
    padding-top: 16px;
  }

  .electronic-product__description {
    font-size: .82rem;
    line-height: 1.45;
  }

  .technology-product__feature h3,
  .electronic-product__frame figcaption,
  .beekeeping-product__feature h3 {
    font-size: .92rem;
  }

  .technology-product__feature p,
  .electronic-product__description,
  .beekeeping-product__feature p,
  .produce-crates-product__specs li {
    font-size: .82rem;
    line-height: 1.42;
  }
}

/* Keep the two crate descriptions aligned at three text rows on desktop,
   regardless of the active language's word lengths. */
@media (min-width: 761px) {
  .produce-crates-product__specs li {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    min-height: calc(1.45em * 3);
    overflow: hidden;
  }
}

/* Tighten the desktop tag panel: lift its feature row and trim the same
   amount from the panel's bottom padding so the background stays balanced. */
@media (min-width: 761px) {
  .technology-product {
    padding-bottom: max(0px, calc(var(--product-section-bottom) - 30px));
  }

  .technology-product__features {
    transform: translateX(clamp(0px, 1.8vw, 24px)) translateY(-30px);
  }

  /* Lower only the electronic-tag feature copy; leave its images and the
     surrounding product sections in their current positions. */
  .electronic-product__frame figcaption,
  .electronic-product__description {
    position: relative;
    top: 20px;
  }
}

/* Give the tag feature descriptions one shared text measure. The previous
   400px cap made the Dimensions copy wrap earlier than its neighbours even
   though all three feature columns have the same width. */
@media (min-width: 761px) {
  .technology-product__features {
    align-items: start;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .technology-product__feature,
  .technology-product__feature p {
    min-width: 0;
  }

  .technology-product__feature p {
    max-width: none;
    width: 100%;
    min-height: calc(1.45em * 2);
  }
}

/* Final product-detail description rhythm. Each feature group keeps one
   shared number of text rows, and the bottom copy sits on the same inset from
   the next colored section in every language. */
.technology-product__feature p,
.electronic-product__description,
.beekeeping-product__feature p,
.produce-crates-product__specs li,
.vaccines-product__feature p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  max-width: none;
  overflow: hidden;
  width: 100%;
}

@media (min-width: 761px) {
  .technology-page {
    --product-section-bottom: clamp(72px, 8vw, 108px);
  }

  .technology-product,
  .electronic-product,
  .beekeeping-product,
  .produce-crates-product,
  .vaccines-product {
    display: flex;
    flex-direction: column;
    padding-bottom: var(--product-section-bottom);
  }

  .technology-product__feature p,
  .beekeeping-product__feature p,
  .vaccines-product__feature p {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    line-height: 1.45;
    max-height: calc(1.45em * 2);
    min-height: calc(1.45em * 2);
  }

  .electronic-product__description,
  .produce-crates-product__specs li {
    -webkit-line-clamp: 3;
    line-clamp: 3;
    line-height: 1.45;
    max-height: calc(1.45em * 3);
    min-height: calc(1.45em * 3);
  }

  /* Keep all three electronic-tag descriptions aligned with the middle
     reference copy in one consistent two-row text box. */
  .electronic-product__description {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    max-height: calc(1.45em * 2);
    min-height: calc(1.45em * 2);
  }

  .technology-product__features,
  .beekeeping-product__features,
  .vaccines-product__features {
    margin-top: auto;
    position: static;
    top: auto;
    transform: none;
  }

  .technology-product__features {
    transform: translateX(clamp(0px, 1.8vw, 24px));
  }

  .electronic-product__gallery {
    align-items: stretch;
    margin-bottom: 0;
    margin-top: auto;
  }

  .electronic-product__frame {
    height: 100%;
  }

  .electronic-product__frame figcaption,
  .electronic-product__description {
    position: static;
    top: auto;
  }

  .produce-crates-product__content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
  }

  .produce-crates-product__gallery {
    align-items: stretch;
    margin-top: auto;
    transform: none;
  }

  .produce-crates-product__frame {
    height: 100%;
  }

  .produce-crates-product__specs {
    margin-top: auto;
    position: static;
    top: auto;
  }
}

@media (max-width: 760px) {
  .technology-product__feature p,
  .beekeeping-product__feature p,
  .vaccines-product__feature p {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    line-height: 1.42;
    max-height: calc(1.42em * 2);
    min-height: calc(1.42em * 2);
  }

  .electronic-product__description,
  .produce-crates-product__specs li {
    -webkit-line-clamp: 3;
    line-clamp: 3;
    line-height: 1.42;
    max-height: calc(1.42em * 3);
    min-height: calc(1.42em * 3);
  }

  /* Use the same two-row measure on phones as on desktop. */
  .electronic-product__description {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    max-height: calc(1.42em * 2);
    min-height: calc(1.42em * 2);
  }

  .technology-product__features,
  .beekeeping-product__features,
  .vaccines-product__features {
    margin-top: 32px;
    position: static;
    top: auto;
    transform: none;
  }

  .technology-product__features {
    margin-top: 0;
  }

  .electronic-product__gallery {
    margin-bottom: 0;
    margin-top: 120px;
  }

  .electronic-product__frame,
  .produce-crates-product__frame {
    height: auto;
  }

  .electronic-product__frame figcaption,
  .electronic-product__description {
    position: static;
    top: auto;
  }

  .produce-crates-product__content {
    display: block;
    flex: none;
  }

  .produce-crates-product__gallery {
    margin-top: 38px;
    transform: none;
  }

  .produce-crates-product__specs {
    margin-top: 18px;
    position: static;
    top: auto;
  }
}

/* Let the electronic-tag copy use the same full left edge as its divider on
   phones. The shared global balance setting is useful for headlines, but it
   makes these short product descriptions look artificially narrow. */
@media (max-width: 760px) {
  .electronic-product__gallery {
    max-width: none;
    width: 100%;
  }

  .electronic-product__frame,
  .electronic-product__frame figcaption,
  .electronic-product__description {
    width: 100%;
  }

  .electronic-product__frame figcaption,
  .electronic-product__description {
    text-align: left;
    text-wrap: wrap;
  }
}

/* Desktop vaccine-section adjustment: keep the image-to-feature spacing
   balanced with the image-to-order-button spacing, while shortening the
   blue panel by the same amount at its footer intersection. */
@media (min-width: 761px) {
  .vaccines-product {
    min-height: calc(var(--product-section-height) - 20px);
  }

  .vaccines-product__features {
    transform: translateY(30px);
  }
}

/* Products page Electronic Tags gallery: lower only the three product views
   and their captions/descriptions on desktop. */
.electronic-product {
  padding-bottom: calc(var(--product-section-bottom) + 100px);
}

.electronic-product__gallery {
  position: relative;
  top: 100px;
}

/* On phones, match the beekeeping image gap after the Order now button. The
   gallery and all following content move up in normal flow, while the green
   panel loses the extra lower color area introduced for desktop. */
@media (max-width: 760px) {
  .technology-product__order .button--order {
    font-size: .92rem;
    padding: 12px 16px;
    width: min(100%, 200px);
  }

  .electronic-product {
    padding-bottom: var(--product-section-bottom);
  }

  .electronic-product__gallery {
    margin-top: 36px;
    top: 0;
  }
}