main#top { background: #f5f5f7; padding-top: 0; }
.hero { background: #f5f5f7; border-radius: 44px; display: flex; height: min(760px, calc(100vh - var(--site-header-height) + 112px)); justify-content: center; margin: 0 24px; min-height: 720px; overflow: hidden; position: relative; width: calc(100% - 48px); }
.hero__content { align-items: center; display: flex; flex-direction: column; padding: clamp(34px, 4.5vw, 56px) 24px 0; position: relative; text-align: center; transform: translateY(-50px); z-index: 2; }
.hero__content h1 { color: #000; font-family: var(--font-display); font-size: clamp(2.8rem, 4.3vw, 4.7rem); font-weight: 600; letter-spacing: -.06em; line-height: .98; margin: 0; }
.hero__content h1 span { display: block; }
.hero__content > p { color: #000; font-size: clamp(1.1rem, 1.6vw, 1.5rem); letter-spacing: -.035em; line-height: 1.25; margin: 24px 0 0; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }
.hero__button { font-size: .92rem; font-weight: 500; min-width: 132px; padding: 11px 18px; }
.hero__button--primary { background: #000; color: #fff; }
.hero__button--secondary { background: #fff; border: 1px solid #000; color: #000; }
.hero__media { align-items: end; display: flex; inset: 0; justify-content: center; pointer-events: none; position: absolute; z-index: 1; }
.hero__media img { display: block; height: 60%; max-width: 62%; object-fit: contain; object-position: center bottom; transform: translateX(8px) scale(1.2); transform-origin: center bottom; width: auto; }
.intro { display: grid; gap: 60px; grid-template-columns: minmax(0, 1.1fr) minmax(260px, .8fr); padding-bottom: 130px; padding-top: 150px; }.intro h2 { max-width: 620px; }.intro__body { align-self: end; max-width: 420px; padding-bottom: 8px; }.intro__body p { font-size: 1.18rem; }.intro__body .text-link { color: var(--forest); margin-top: 18px; }
.products-section { padding-bottom: 140px; }.section-heading { align-items: end; display: flex; gap: 60px; justify-content: space-between; margin-bottom: 54px; }.section-heading h2 { max-width: 650px; }.section-heading > p { max-width: 360px; }.product-grid { display: grid; gap: 18px; grid-template-columns: repeat(6, 1fr); }.product-card { background: #f1eee5; border-radius: var(--radius-md); grid-column: span 2; overflow: hidden; }.product-card--featured { grid-column: span 4; }.product-card__visual { height: 250px; overflow: hidden; position: relative; }.product-card__content { padding: 24px 26px 28px; }.product-card__content p { font-size: .93rem; min-height: 75px; }.product-card__icon { color: rgba(255,255,255,.75); font-family: var(--font-display); font-size: 3.5rem; left: 24px; position: absolute; top: 14px; z-index: 1; }.product-card__number { color: rgba(23,59,50,.4); font-family: var(--font-display); font-size: .8rem; font-weight: 800; position: absolute; right: 22px; top: 22px; }.product-card__shape { border-radius: 50%; position: absolute; }.product-card__shape--one { background: rgba(255,255,255,.28); height: 230px; right: -36px; top: 60px; width: 230px; }.product-card__shape--two { background: rgba(255,255,255,.24); bottom: -60px; height: 190px; left: 58px; width: 190px; }.product-card--teal .product-card__visual { background: linear-gradient(135deg, #158c7d, #54c9ad); }.product-card--sand .product-card__visual { background: linear-gradient(135deg, #b69e69, #e2d0a1); }.product-card--blue .product-card__visual { background: linear-gradient(135deg, #5b91a7, #c6e0e0); }.product-card--yellow .product-card__visual { background: linear-gradient(135deg, #d4a923, #f0d783); }.product-card--green .product-card__visual { background: linear-gradient(135deg, #508660, #b9d39b); }.product-card--featured .product-card__visual { height: 320px; }
.product-card__visual img { display: block; height: 100%; object-fit: cover; width: 100%; }
.technology-section { padding-bottom: 140px; }.technology-panel { background: var(--ink); border-radius: var(--radius-lg); color: #fff; min-height: 520px; overflow: hidden; padding: 70px; position: relative; }.technology-panel__copy { max-width: 650px; position: relative; z-index: 1; }.technology-panel h2 { color: #fff; max-width: 620px; }.technology-panel__copy > p:not(.eyebrow) { color: rgba(255,255,255,.66); max-width: 500px; }.technology-panel__copy .button { margin-top: 24px; }.technology-panel__decor { border: 1px solid rgba(188,238,187,.2); border-radius: 50%; height: 610px; position: absolute; right: -110px; top: -10px; width: 610px; }.technology-panel__decor span { border: 1px solid rgba(188,238,187,.18); border-radius: 50%; display: block; height: 420px; left: 94px; position: absolute; top: 94px; width: 420px; }.technology-panel__decor span:nth-child(2) { height: 250px; left: 180px; top: 180px; width: 250px; }.technology-panel__decor span:nth-child(3) { background: #79bf7b; border: none; height: 68px; left: 272px; top: 272px; width: 68px; }.technology-panel__stamp { align-items: center; border: 1px solid rgba(219,242,204,.32); border-radius: 50%; bottom: 54px; color: #d7efc5; display: flex; flex-direction: column; font-family: var(--font-display); font-size: 2.2rem; height: 115px; justify-content: center; position: absolute; right: 70px; width: 115px; }.technology-panel__stamp span { color: #99d58f; }.technology-panel__stamp small { font-family: var(--font-body); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; }.process-grid { display: grid; gap: 0; grid-template-columns: repeat(3, 1fr); margin-top: 42px; }.process-step { border-top: 1px solid var(--line); display: flex; gap: 24px; padding: 22px 20px 0 0; }.process-step > span { color: var(--forest-soft); font-family: var(--font-display); font-weight: 800; }.process-step strong { display: block; font-family: var(--font-display); font-size: 1.15rem; letter-spacing: -.04em; }.process-step p { font-size: .87rem; margin: 8px 0 0; }
.contact-section { padding-bottom: 120px; }.contact-card { background: var(--mint); border-radius: var(--radius-lg); overflow: hidden; padding: 80px; position: relative; }.contact-card::after { border: 1px solid rgba(15,77,60,.15); border-radius: 50%; content: ""; height: 450px; position: absolute; right: -130px; top: -190px; width: 450px; }.contact-card h2 { max-width: 650px; }.contact-card > p:not(.eyebrow) { max-width: 450px; }.contact-card .button { margin-top: 18px; position: relative; z-index: 1; }.contact-card__line { background: rgba(23,59,50,.16); height: 1px; margin-top: 70px; max-width: 550px; }.contact-card__email { display: inline-block; font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; margin-top: 18px; }
.site-footer { border-top: 1px solid var(--line); padding-bottom: 28px; padding-top: 42px; }.site-footer__top { align-items: start; display: grid; gap: 28px; grid-template-columns: 1.1fr 1fr 1fr; padding-bottom: 70px; }.brand--footer { height: 48px; }.brand--footer .brand__name { color: var(--ink); }.brand--footer .brand__mark { flex-basis: 38px; height: 30px; width: 38px; }.brand--footer .brand__mark img { left: -13px; width: 63px; }.site-footer__top > p { max-width: 250px; }.footer-links { display: flex; flex-direction: column; gap: 14px; justify-self: end; }.footer-links a { color: rgba(23,59,50,.68); font-size: .9rem; }.footer-links a:hover { color: var(--ink); }.site-footer__bottom { border-top: 1px solid var(--line); color: rgba(23,59,50,.55); display: flex; font-size: .75rem; justify-content: space-between; padding-top: 20px; }
@media (max-width: 1050px) { .product-card, .product-card--featured { grid-column: span 3; } }
@media (max-width: 760px) { main#top { padding-top: 16px; }.hero { border-radius: 28px; height: auto; margin: 0 16px 16px; min-height: 650px; width: calc(100% - 32px); }.hero__content { padding-top: 32px; transform: none; }.hero__content h1 { font-size: clamp(2.35rem, 11vw, 3.4rem); }.hero__content > p { font-size: clamp(1rem, 4.4vw, 1.2rem); margin-top: 20px; }.hero__actions { gap: 8px; margin-top: 24px; }.hero__button { font-size: .88rem; min-width: 124px; padding: 10px 15px; }.hero__media img { height: 46%; max-width: 100%; transform: scale(1.1); transform-origin: center bottom; }.intro { gap: 24px; grid-template-columns: 1fr; padding-bottom: 90px; padding-top: 90px; }.intro__body { padding: 0; }.section-heading { align-items: start; flex-direction: column; gap: 0; margin-bottom: 36px; }.section-heading > p { margin-top: 0; }.products-section, .technology-section { padding-bottom: 90px; padding-top: 90px; }.technology-section { padding-inline: 16px; }.product-grid { grid-template-columns: 1fr 1fr; }.product-card, .product-card--featured { grid-column: span 1; }.product-card--featured { grid-column: span 2; }.product-card__visual, .product-card--featured .product-card__visual { height: 220px; }.technology-panel { min-height: 560px; padding: 42px 30px; }.technology-panel__decor { opacity: .7; right: -230px; top: 100px; }.technology-panel__stamp { bottom: 32px; right: 30px; }.process-grid { gap: 26px; grid-template-columns: 1fr; }.contact-card { padding: 45px 30px; }.contact-section { padding-bottom: 80px; padding-top: 70px; }.site-footer__top { grid-template-columns: 1fr 1fr; }.site-footer__top > p { grid-column: span 2; }.footer-links { justify-self: start; }.site-footer__bottom { flex-direction: column; gap: 10px; } }
@media (max-width: 480px) { .product-grid { gap: 12px; }.product-card__content { padding: 18px 16px 20px; }.product-card__content h3 { font-size: 1.25rem; }.product-card__content p { font-size: .86rem; min-height: 112px; }.product-card--featured .product-card__content p { min-height: auto; }.product-card__visual, .product-card--featured .product-card__visual { height: 180px; }.product-card__icon { font-size: 2.8rem; left: 16px; }.contact-card__line { margin-top: 48px; } }
.product-card__content p { min-height: 0; }

/* Homepage production preview. */
.production-preview {
  align-items: center;
  background: #e8eee8;
  border-radius: 28px;
  display: grid;
  gap: clamp(32px, 6vw, 88px);
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  margin-bottom: 20px;
  overflow: hidden;
  padding: clamp(28px, 5vw, 72px);
}

/* Full electronic-tag feature followed by four equal product subsections. */
#top .electronic-feature {
  align-items: center;
  background: #172c3a;
  color: #fff;
  display: flex;
  height: var(--home-feature-height);
  justify-content: center;
  margin-top: var(--home-section-gap);
  min-height: var(--home-feature-height);
  padding: 48px 24px;
  text-align: center;
  width: 100%;
}
#top .electronic-feature__content { max-width: 900px; }
#top .electronic-feature__content h2 {
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6vw, 6.4rem);
  letter-spacing: -.07em;
  line-height: .94;
  margin: 0;
  white-space: nowrap;
}
#top .electronic-feature__content p {
  color: rgba(255,255,255,.86);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  letter-spacing: -.03em;
  line-height: 1.3;
  margin: 22px auto 0;
  max-width: 34ch;
}
#top .electronic-feature__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 30px;
}
#top .electronic-feature__button {
  align-items: center;
  display: inline-flex;
  font-size: .92rem;
  gap: 8px;
  justify-content: center;
  min-height: 46px;
  padding: 10px 18px;
}
#top .electronic-feature__button svg { height: 18px; width: 18px; }
#top .electronic-feature__button--primary { background: #fff; color: #000; }
#top .electronic-feature__button--secondary { border: 1px solid rgba(255,255,255,.86); color: #fff; }

#top .products-section--subsections .products-section__panel {
  align-items: center;
  color: #000;
  display: flex;
  justify-content: center;
  text-align: center;
}
#top .products-section--subsections .products-section__panel--warm,
#top .products-section--subsections .products-section__panel--dark,
#top .products-section--subsections .products-section__panel--moss {
  background: #f1f1ef;
  color: #000;
}
#top .products-section--subsections .products-section__panel--warm { background: #e8cdbd; }
#top .products-section--subsections .products-section__panel--light { background: #dcecf2; }
#top .products-section--subsections .products-section__panel--dark { background: #e5dcf0; }
#top .products-section--subsections .products-section__panel--moss { background: #dce8de; }
#top .products-section--subsections .products-section__panel-content {
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 4vw, 60px);
  width: 100%;
}
#top .products-section--subsections .products-section__panel-content h2 {
  color: currentColor;
  font-size: clamp(2rem, 4vw, 4.6rem);
  max-width: none;
  white-space: nowrap;
}
#top .products-section--subsections .products-section__panel-content p {
  color: currentColor;
  margin: 18px auto 0;
  max-width: 28ch;
}
#top .products-section--subsections .products-section__panel-actions {
  justify-content: center;
  margin-top: 30px;
}
#top .products-section--subsections .products-section__panel-button--primary {
  background: #000;
  color: #fff;
}
#top .products-section--subsections .products-section__panel--dark .products-section__panel-button--primary,
#top .products-section--subsections .products-section__panel--moss .products-section__panel-button--primary {
  background: #000;
  color: #fff;
}
#top .products-section--subsections .products-section__panel-button--secondary {
  background: #fff;
  border: 1px solid #000;
  color: #000;
}

/* Match the HDX/FDX feature to the full Tag and Crates sections. */
#top .electronic-feature {
  align-items: center;
  background: #315c73;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.5vw, 34px);
  height: var(--home-feature-height);
  justify-content: center;
  margin-top: var(--home-section-gap);
  min-height: var(--home-feature-height);
  overflow: hidden;
  padding: clamp(64px, 7vw, 104px) 24px clamp(54px, 6vw, 88px);
  text-align: center;
  width: 100%;
}
#top .electronic-feature__content { max-width: 900px; }
#top .electronic-feature__content h2 {
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5vw, 5.4rem);
  letter-spacing: -.07em;
  line-height: .94;
  margin: 0;
  white-space: nowrap;
}
#top .electronic-feature__content p {
  color: #fff;
  font-size: clamp(1rem, 1.45vw, 1.25rem);
  letter-spacing: -.03em;
  line-height: 1.3;
  margin: 20px auto 0;
  max-width: none;
}
#top .electronic-feature__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 26px;
}
#top .electronic-feature__button {
  align-items: center;
  display: inline-flex;
  font-size: .92rem;
  font-weight: 500;
  gap: 8px;
  justify-content: center;
  min-height: 46px;
  min-width: 132px;
  padding: 11px 18px;
}
#top .electronic-feature__button svg { height: 18px; width: 18px; }
#top .electronic-feature__button--primary { background: #fff; color: #000; }
#top .electronic-feature__button--secondary { background: transparent; border: 1px solid #fff; color: #fff; }

@media (max-width: 760px) {
  #top .electronic-feature {
    height: auto;
    min-height: 650px;
    padding: 72px 22px 64px;
  }
  #top .electronic-feature__content { max-width: 100%; }
  #top .electronic-feature__content h2 {
    font-size: clamp(1.65rem, 7.5vw, 3.8rem);
  }
  #top .electronic-feature__content p {
    margin-inline: auto;
    max-width: 300px;
  }
  #top .electronic-feature__actions { margin-top: 24px; }
  #top .electronic-feature__button { font-size: .88rem; min-width: 124px; padding: 10px 15px; }
}

@media (max-width: 760px) {
  #top .electronic-feature {
    height: auto;
    min-height: 650px;
    padding: 48px 22px;
  }
  #top .electronic-feature__content h2 {
    font-size: clamp(2rem, 8vw, 3.8rem);
  }
  #top .electronic-feature__content p { max-width: 28ch; }
  #top .products-section--subsections .products-section__panel-content h2 {
    font-size: clamp(1.7rem, 8vw, 3.4rem);
  }
  #top .products-section--subsections .products-section__panel-content p {
    max-width: 26ch;
  }
}

/* Match the electronic-tag hero to the homepage crate feature: centered
   copy, actions, then a clean transparent product visual on the section color. */
#top .electronic-feature {
  flex-direction: column;
  gap: 26px;
  justify-content: flex-start;
}

#top .electronic-feature__media {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 0;
  overflow: visible;
  width: min(100%, 900px);
}

#top .electronic-feature__media img {
  display: block;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .24));
  height: min(48vh, 410px);
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  width: auto;
}

@media (max-width: 760px) {
  #top .electronic-feature__media {
    width: 100%;
  }

  #top .electronic-feature__media img {
    height: 220px;
    max-width: 100%;
  }
}

/* The homepage Microchip Reader panel uses the same transparent product
   treatment as the Electronic Tags feature, while keeping the shared panel
   rhythm and normalized product scale. */
#top .products-section__panel--dark .products-section__panel-image--microchip-reader {
  display: block;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .2));
  height: auto;
  margin: var(--home-product-media-gap) auto 0;
  max-height: none;
  width: var(--home-product-image-width);
}

@media (max-width: 760px) {
  #top .products-section__panel--dark .products-section__panel-image--microchip-reader {
    display: block;
    margin-top: var(--home-product-media-gap);
    width: var(--home-product-image-width);
  }
}

/* Final color and alignment pass for the electronic product panels. */
#top .electronic-feature { background: #b9bdc2; }
#top .products-section--subsections .products-section__panel--dark { background: #b8c9d8; }

@media (min-width: 761px) {
  #top .products-section--subsections .products-section__panel--light .products-section__panel-content p,
  #top .products-section--subsections .products-section__panel--dark .products-section__panel-content p {
    margin-inline: auto;
    max-width: calc(100% - 20px);
    text-align: center;
    white-space: nowrap;
    width: max-content;
  }
}

@media (max-width: 760px) {
  #top .products-section--subsections .products-section__panel--light .products-section__panel-content p,
  #top .products-section--subsections .products-section__panel--dark .products-section__panel-content p {
    margin-inline: auto;
    max-width: 26ch;
    text-align: center;
    white-space: normal;
    width: auto;
  }
}

/* Final color and alignment pass for the electronic product panels. */
#top .electronic-feature {
  background: #b9bdc2;
}
#top .products-section--subsections .products-section__panel--dark {
  background: #b8c9d8;
}

@media (min-width: 761px) {
  #top .products-section--subsections .products-section__panel--light .products-section__panel-content p,
  #top .products-section--subsections .products-section__panel--dark .products-section__panel-content p {
    margin-inline: auto;
    max-width: calc(100% - 20px);
    text-align: center;
    white-space: nowrap;
    width: max-content;
  }
}

@media (max-width: 760px) {
  #top .products-section--subsections .products-section__panel--light .products-section__panel-content p,
  #top .products-section--subsections .products-section__panel--dark .products-section__panel-content p {
    margin-inline: auto;
    max-width: 26ch;
    text-align: center;
    white-space: normal;
    width: auto;
  }
}

/* Electronic tags use the same full feature-panel rhythm and button treatment as Tag and Crates. */
#top .electronic-feature {
  align-items: center;
  background: #b9bdc2;
  color: #000;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.5vw, 34px);
  height: var(--home-feature-height);
  justify-content: center;
  margin-top: var(--home-section-gap);
  min-height: var(--home-feature-height);
  overflow: hidden;
  padding: clamp(64px, 7vw, 104px) 24px clamp(54px, 6vw, 88px);
  text-align: center;
  width: 100%;
}
#top .electronic-feature__content { max-width: 760px; }
#top .electronic-feature__content h2 {
  color: #000;
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5vw, 5.4rem);
  letter-spacing: -.07em;
  line-height: .94;
  margin: 0;
  white-space: nowrap;
}
#top .electronic-feature__content p {
  color: #000;
  font-size: clamp(1rem, 1.45vw, 1.25rem);
  letter-spacing: -.03em;
  line-height: 1.3;
  margin: 20px auto 0;
  max-width: none;
  white-space: nowrap;
}
#top .electronic-feature__actions { margin-top: 26px; }
#top .electronic-feature__button { font-size: .92rem; font-weight: 500; min-width: 132px; padding: 11px 18px; }
#top .electronic-feature__button--primary { background: #000; color: #fff; }
#top .electronic-feature__button--secondary { background: #fff; border: 1px solid #000; color: #000; }

@media (max-width: 760px) {
  #top .electronic-feature {
    height: auto;
    min-height: 650px;
    padding: 72px 22px 64px;
  }
  #top .electronic-feature__content { max-width: 100%; }
  #top .electronic-feature__content h2 {
    font-size: clamp(2rem, 8vw, 3.8rem);
    white-space: nowrap;
  }
  #top .electronic-feature__content p {
    max-width: 300px;
    white-space: normal;
  }
  #top .electronic-feature__actions { margin-top: 24px; }
  #top .electronic-feature__button { font-size: .88rem; min-width: 124px; padding: 10px 15px; }
}

@media (min-width: 761px) {
  #top .products-section__panel--light .products-section__panel-content p,
  #top .products-section__panel--dark .products-section__panel-content p {
    max-width: none;
    white-space: nowrap;
  }
}

/* Four product subsections: light surfaces, black copy, and shared Tag/Crates actions. */
#top .products-section--subsections .products-section__panel,
#top .products-section--subsections .products-section__panel--warm,
#top .products-section--subsections .products-section__panel--light,
#top .products-section--subsections .products-section__panel--dark,
#top .products-section--subsections .products-section__panel--moss {
  background: #f1f1ef;
  color: #000;
}
#top .products-section--subsections .products-section__panel--warm { background: #e8cdbd; }
#top .products-section--subsections .products-section__panel--light { background: #dcecf2; }
#top .products-section--subsections .products-section__panel--dark { background: #e5dcf0; }
#top .products-section--subsections .products-section__panel--moss { background: #dce8de; }
#top .products-section--subsections .products-section__panel-content {
  align-items: center;
  color: #000;
  justify-content: center;
  text-align: center;
}
#top .products-section--subsections .products-section__panel-content h2,
#top .products-section--subsections .products-section__panel-content p {
  color: #000;
}
#top .products-section--subsections .products-section__panel-content h2 {
  max-width: none;
  white-space: nowrap;
}
#top .products-section--subsections .products-section__panel-content p {
  margin: 18px auto 0;
}
#top .products-section--subsections .products-section__panel-actions {
  justify-content: center;
  margin-top: 26px;
}
#top .products-section--subsections .products-section__panel-button--primary,
#top .products-section--subsections .products-section__panel--dark .products-section__panel-button--primary,
#top .products-section--subsections .products-section__panel--moss .products-section__panel-button--primary {
  background: #000;
  color: #fff;
}
#top .products-section--subsections .products-section__panel-button--secondary,
#top .products-section--subsections .products-section__panel--dark .products-section__panel-button--secondary,
#top .products-section--subsections .products-section__panel--moss .products-section__panel-button--secondary {
  background: #fff;
  border: 1px solid #000;
  color: #000;
}

@media (max-width: 760px) {
  #top .products-section--subsections .products-section__panel-content {
    padding: 28px 22px;
  }
  #top .products-section--subsections .products-section__panel-content h2 {
    font-size: clamp(1.55rem, 7.2vw, 3.2rem);
  }
  #top .products-section--subsections .products-section__panel-content p {
    max-width: 27ch;
  }
}
.production-preview__copy { max-width: 500px; }
.production-preview__copy h2 { color: var(--ink); font-size: clamp(2.5rem, 4.5vw, 5rem); }
.production-preview__copy > p:not(.eyebrow) { color: rgba(23,59,50,.7); max-width: 430px; }
.production-preview__copy .button { margin-top: 24px; }
.production-preview__visual { border-radius: 24px; min-height: 420px; overflow: hidden; }
.production-preview__visual img { display: block; height: 100%; object-fit: cover; width: 100%; }

@media (max-width: 760px) {
  .production-preview { grid-template-columns: 1fr; padding: 28px 22px 22px; }
  .production-preview__visual { min-height: 300px; }
}

@media (min-width: 761px) {
  .production-overview .approach-card:nth-child(2) .approach-card__image {
    aspect-ratio: 4 / 5;
  }
  .production-overview .approach-card:nth-child(2) .approach-card__image img {
    object-position: center;
    transform: none;
  }
}

/* Shared footer typography and layout across the homepage and inner pages. */
.site-footer {
  box-sizing: border-box;
  font-family: var(--font-body);
  margin-inline: 0;
  max-width: none;
  padding-inline: clamp(16px, 4vw, 48px);
  padding-bottom: 30px;
  padding-top: 64px;
  width: 100%;
}
.site-footer__top {
  align-items: start;
  gap: clamp(32px, 7vw, 110px);
  grid-template-columns: minmax(220px, .9fr) minmax(0, 2.1fr);
  padding-bottom: 78px;
}
.site-footer__brand-column {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
}
.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 20px;
}
.site-footer__contact a,
.site-footer__contact a:hover,
.site-footer__contact a:focus-visible {
  color: #000;
  font-size: .92rem;
  line-height: 1.35;
  text-decoration: none;
}
html[data-theme="light"] .site-footer__contact a,
html[data-theme="light"] .site-footer__contact a:hover,
html[data-theme="light"] .site-footer__contact a:focus-visible {
  color: #000;
}
.site-footer__contact a:hover,
.site-footer__contact a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.site-footer__phone { font-weight: 600; }
.footer-social {
  align-items: center;
  display: flex;
  gap: 18px;
  margin-top: 26px;
}
.footer-social a {
  align-items: center;
  background: #f1f4f8;
  border-radius: 50%;
  color: #4b5566;
  display: inline-flex;
  height: 48px;
  justify-content: center;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
  width: 48px;
}
.footer-social a:hover {
  background: #e4ebf2;
  color: var(--ink);
  transform: translateY(-2px);
}
.footer-social--bottom {
  justify-content: flex-start;
  margin: 0 0 52px;
}
.footer-social svg {
  height: 24px;
  stroke-width: 2;
  width: 24px;
}
.footer-links {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-self: stretch;
}
.footer-link-group {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.footer-links a,
.site-footer__bottom {
  font-family: var(--font-body);
}
.footer-links a {
  font-size: .95rem;
  line-height: 1.3;
  white-space: nowrap;
}
.footer-link-parent {
  align-items: center;
  background: transparent;
  border: 0;
  color: rgba(23,59,50,.78);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 1rem;
  justify-content: space-between;
  line-height: 1.3;
  padding: 0;
  text-align: left;
  text-decoration: none;
  width: 100%;
}
.footer-link-parent:hover,
.footer-link-parent:focus-visible {
  color: var(--ink);
}
.footer-link-parent__icon {
  font-size: 1.25rem;
  line-height: 1;
  transition: transform .28s ease;
}
.footer-link-parent[aria-expanded="true"] .footer-link-parent__icon {
  transform: rotate(45deg);
}
.footer-link-submenu {
  opacity: 1;
  overflow: visible;
  pointer-events: auto;
  transform: none;
}
.footer-link-parent--desktop { display: inline-flex; }
.footer-link-group > [data-footer-products-toggle] { display: none; }
.footer-link-submenu a {
  color: rgba(23,59,50,.62);
  display: block;
  font-size: .86rem;
  margin-top: 10px;
  padding-left: 2px;
}
.site-footer__bottom {
  font-size: .78rem;
  line-height: 1.4;
}

@media (max-width: 760px) {
  .site-footer__top {
    gap: 28px;
    grid-template-columns: 1fr;
    padding-bottom: 48px;
  }
  .footer-links {
    display: flex;
    flex-direction: column;
    gap: 18px;
    justify-self: stretch;
  }
  .footer-link-group {
    width: 100%;
  }
  .footer-link-parent--desktop { display: none; }
  .footer-link-group > [data-footer-products-toggle] { display: inline-flex; }
  .footer-link-parent,
  .footer-link-submenu a {
    align-items: center;
    min-height: 44px;
  }
  .footer-link-submenu {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .footer-link-submenu a {
    display: flex;
    white-space: normal;
    width: 100%;
  }
  .footer-link-submenu {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: max-height .3s ease, opacity .22s ease, transform .3s ease;
  }
  .footer-link-submenu.is-open {
    max-height: 360px;
    opacity: 1;
    overflow: hidden;
    pointer-events: auto;
    transform: none;
  }
}

/* Image-led product cards inspired by the approved two-card reference. */
.products-section .product-grid { gap: 20px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.products-section .product-card, .products-section .product-card--featured { background: transparent; border-radius: 28px; grid-column: span 2; overflow: visible; width: auto; }
.products-section .product-card:nth-child(-n+2) { grid-column: span 3; }
.products-section .product-card__visual, .products-section .product-card--featured .product-card__visual { aspect-ratio: 1.55; background: var(--sand); border-radius: 28px; height: auto; overflow: hidden; position: relative; width: 100%; }
.products-section .product-card:nth-child(-n+2) .product-card__visual { aspect-ratio: 1.2; }
.products-section .product-card__visual, .products-section .product-card--featured .product-card__visual { aspect-ratio: auto; height: clamp(360px, 38vw, 500px); }
.products-section .product-card__visual::after { background: linear-gradient(180deg, rgba(6,24,30,.48) 0%, rgba(6,24,30,.18) 25%, rgba(6,24,30,0) 50%, rgba(6,24,30,.48) 100%); content: ""; inset: 0; pointer-events: none; position: absolute; z-index: 1; }
.products-section .product-card__visual img {
  display: block;
  height: 100%;
  inset: 0;
  object-fit: cover;
  object-position: center;
  position: absolute;
  width: 100%;
}
.products-section .product-card:nth-child(1) .product-card__visual img { object-position: center; }
.products-section .product-card:nth-child(2) .product-card__visual img { object-position: center 18%; }
.products-section .product-card__overlay-title { color: #fff; font-family: var(--font-display); font-size: clamp(1.05rem, 1.5vw, 1.55rem); font-weight: 500; left: 22px; letter-spacing: -.055em; line-height: 1.05; margin: 0; max-width: 72%; position: absolute; text-shadow: 0 2px 10px rgba(0,0,0,.5); top: 16px; z-index: 2; }
.products-section .product-card__cta { align-items: center; background: #eff5cd; border-radius: 14px; bottom: 28px; color: #000; display: inline-flex; font-family: var(--font-display); font-size: .88rem; font-weight: 700; gap: 8px; min-height: 46px; min-width: 0; padding: 10px 8px 10px 14px; position: absolute; right: 28px; width: max-content; z-index: 2; }
.products-section .product-card__cta svg { border-left: 1px solid rgba(0,0,0,.2); height: 22px; padding-left: 8px; width: 22px; }

@media (max-width: 760px) {
  .products-section .product-grid { grid-template-columns: 1fr; }
  .products-section .product-card, .products-section .product-card:nth-child(-n+2) { grid-column: auto; width: auto; }
  .products-section .product-card__visual, .products-section .product-card--featured .product-card__visual { aspect-ratio: 1.2; height: auto; }
  .products-section .product-card__overlay-title { left: 16px; top: 12px; }
  .products-section .product-card__cta { bottom: 20px; right: 20px; }
}

/* Lightweight product viewer: drag on desktop, swipe on touch screens. */
.product-viewer { background: #edf1e8; border-radius: 28px; display: grid; gap: 28px; grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr); margin-bottom: 28px; overflow: hidden; padding: clamp(24px, 4vw, 52px); }
.product-viewer__copy { align-self: center; max-width: 360px; padding-left: clamp(0px, 2vw, 24px); }
.product-viewer__copy h3 { color: var(--ink); font-size: clamp(2rem, 3.6vw, 4rem); line-height: .98; margin-bottom: 20px; }
.product-viewer__copy p:last-child { color: rgba(23,59,50,.7); font-size: 1rem; margin-bottom: 0; max-width: 300px; }
.product-viewer__stage { align-items: center; display: grid; gap: 14px; grid-template-columns: auto minmax(0, 1fr) auto; min-width: 0; }
.product-viewer__frame { aspect-ratio: 1; background: #faf9f5; border-radius: 22px; cursor: grab; overflow: hidden; position: relative; touch-action: pan-y; user-select: none; }
.product-viewer:focus-visible { outline: 3px solid rgba(23,59,50,.32); outline-offset: 4px; }
.product-viewer.is-dragging .product-viewer__frame { cursor: grabbing; }
.product-viewer__image { display: block; height: 100%; object-fit: cover; pointer-events: none; transition: opacity .16s ease, transform .16s ease; width: 100%; }
.product-viewer__image.is-changing { opacity: .35; transform: scale(.985); }
.product-viewer__count { background: rgba(23,59,50,.86); border-radius: 999px; bottom: 16px; color: #eff5cd; font-family: var(--font-display); font-size: .76rem; font-weight: 700; left: 16px; padding: 8px 11px; position: absolute; }
.product-viewer__control { align-items: center; background: var(--forest); border-radius: 50%; color: #eff5cd; display: flex; height: 42px; justify-content: center; padding: 0; transition: transform .2s ease, background .2s ease; width: 42px; }
.product-viewer__control:hover { background: var(--ink); transform: scale(1.05); }
.product-viewer__control svg { height: 19px; width: 19px; }
.product-viewer__control--prev svg { transform: rotate(180deg); }
.product-viewer__footer { align-items: center; display: flex; grid-column: 2; justify-content: space-between; padding-inline: 54px; }
.product-viewer__footer > span { color: rgba(23,59,50,.68); font-size: .88rem; }
.product-viewer__dots { align-items: center; display: flex; gap: 7px; }
.product-viewer__dot { background: rgba(23,59,50,.22); border-radius: 999px; height: 7px; padding: 0; transition: background .2s ease, width .2s ease; width: 7px; }
.product-viewer__dot.is-active { background: var(--forest); width: 24px; }

@media (max-width: 760px) {
  .product-viewer { gap: 24px; grid-template-columns: 1fr; padding: 24px 16px 20px; }
  .product-viewer__copy { max-width: 100%; padding: 0 8px; }
  .product-viewer__copy h3 { font-size: clamp(2rem, 10vw, 3rem); }
  .product-viewer__stage { gap: 8px; }
  .product-viewer__control { height: 36px; width: 36px; }
  .product-viewer__footer { grid-column: auto; padding: 0 8px; }
  .product-viewer__footer > span { font-size: .78rem; }
}

/* Section transitions and the image-led product backdrop. */
.approach {
  background: #e8eae7;
  border-radius: 0;
  isolation: isolate;
  max-width: none;
  padding-inline: max(24px, calc((100vw - var(--max-width)) / 2));
  position: relative;
  width: 100%;
}
.products-section {
  background-color: #dce9df;
  background-image: none;
  isolation: isolate;
  max-width: none;
  overflow: hidden;
  padding-top: 130px;
  padding-inline: max(24px, calc((100vw - var(--max-width)) / 2));
  position: relative;
  width: 100%;
}
.approach::before,
.products-section::before,
.technology-section::before,
.contact-section::before {
  content: "";
  height: 120px;
  inset: 0 0 auto;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}
.approach::before { background: linear-gradient(180deg, #fffdfa 0%, #f0f1ee 52%, #e8eae7 100%); }
.products-section::before { background: linear-gradient(180deg, #e8eae7 0%, #e3eae4 52%, #dce9df 100%); }
.technology-section::before { background: linear-gradient(180deg, #dce9df 0%, #e8eee9 54%, #fffdfa 100%); }
.contact-section::before { background: linear-gradient(180deg, #fffdfa 0%, #fffdfa 100%); }
.technology-section {
  background: #fffdfa;
  isolation: isolate;
  max-width: none;
  padding-inline: max(24px, calc((100vw - var(--max-width)) / 2));
  padding-top: 130px;
  position: relative;
  width: 100%;
}
.contact-section {
  isolation: isolate;
  padding-top: 100px;
  position: relative;
}
.product-card__cta {
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.products-section .product-card__cta { background: #fff; }
.products-section .product-card__cta:hover,
.products-section .product-card__cta:focus-visible {
  background: #dceef4;
  color: #174e68;
}


.page-transition { background: #000; bottom: 0; contain: paint; isolation: isolate; inset-inline: 0; opacity: 0; pointer-events: none; position: fixed; top: var(--site-header-height); transition: opacity .12s var(--ease-out); will-change: opacity; z-index: 20; }
html.page-ready .page-transition { opacity: 0; }
html.page-leaving .page-transition { opacity: 1; }

.approach,
.products-section,
.technology-section,
.contact-section { content-visibility: auto; contain-intrinsic-size: 720px; }

@media (prefers-reduced-motion: reduce) {
  html body { transition: none; }
}
.desktop-cta,
.products-section .product-card__cta {
  transition: background-color .22s ease, box-shadow .22s ease, color .22s ease, transform .22s ease;
}
.desktop-cta:hover,
.desktop-cta:focus-visible,
.products-section .product-card__cta:hover,
.products-section .product-card__cta:focus-visible {
  box-shadow: 0 8px 18px rgba(15, 77, 60, .14);
  transform: translateY(-2px);
}
.desktop-cta:hover svg,
.desktop-cta:focus-visible svg,
.products-section .product-card__cta:hover svg,
.products-section .product-card__cta:focus-visible svg {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .desktop-cta,
  .products-section .product-card__cta,
  .desktop-cta svg,
  .products-section .product-card__cta svg { transition: none; }
}

/* A compact, expandable presentation for the technical approach. */
.approach { padding-bottom: 130px; padding-top: 150px; }
.approach__intro { display: block; }
.approach__heading h2 { max-width: 620px; }
.approach__lead { align-self: end; max-width: 420px; padding-bottom: 8px; }
.approach__lead p { color: rgba(23,59,50,.68); font-size: 1.08rem; line-height: 1.55; }
.approach-grid { border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 72px; }
.approach-card { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 24px 28px 28px 0; }
.approach-card + .approach-card { padding-left: 28px; }
.approach-card:last-child { border-right: 0; }
.approach-card summary { align-items: center; cursor: pointer; display: grid; gap: 16px; grid-template-columns: auto minmax(0, 1fr) auto; list-style: none; }
.approach-card summary::-webkit-details-marker { display: none; }
.approach-card__index { color: var(--forest-soft); font-family: var(--font-display); font-size: .78rem; font-weight: 800; }
.approach-card__title { color: var(--ink); font-family: var(--font-display); font-size: 1.16rem; font-weight: 700; letter-spacing: -.035em; }
.approach-card__icon { align-items: center; border: 1px solid rgba(23,59,50,.22); border-radius: 50%; color: var(--forest); display: flex; font-family: var(--font-display); font-size: 1.25rem; height: 28px; justify-content: center; line-height: 1; transition: transform .2s ease, background-color .2s ease; width: 28px; }
.approach-card[open] .approach-card__icon { background: var(--forest); color: #fff; transform: rotate(45deg); }
.approach-card__summary { color: rgba(23,59,50,.68); font-size: .98rem; line-height: 1.45; margin: 28px 0 0; max-width: 300px; }
.approach-card__details { color: rgba(23,59,50,.72); font-size: .91rem; line-height: 1.55; margin: 18px 0 0; padding-left: 18px; }
.approach-card__details li + li { margin-top: 10px; }

@media (max-width: 760px) {
  .approach, .products-section { padding-inline: 16px; }
  .approach { padding-bottom: 90px; padding-top: 90px; }
  .approach__intro { gap: 24px; grid-template-columns: 1fr; }
  .approach__lead { padding: 0; }
  .approach-grid { grid-template-columns: 1fr; margin-top: 42px; }
  .approach-card, .approach-card + .approach-card { border-right: 0; padding: 20px 0; }
}

/* Image-led approach cards, following the approved three-column reference. */
.approach__lead { display: flex; flex-direction: column; }
.production-overview .approach__lead { max-width: none; }
.production-overview .approach__lead > p { max-width: none; white-space: nowrap; }
.production-overview .approach-grid { margin-top: 34px; }
.approach__heading { width: 100%; }
.approach__heading h2 { font-size: clamp(2.5rem, 4.8vw, 5.6rem); max-width: 100%; white-space: normal; }
.production-overview .approach__heading h2 { font-size: clamp(2.35rem, 3.9vw, 4.6rem); white-space: nowrap; }
.approach__lead .button { align-self: flex-start; border-radius: 14px; margin-top: 24px; padding: 14px 18px; }
.approach__lead .button svg { border-left: 1px solid rgba(255,255,255,.26); height: 24px; padding-left: 12px; width: 28px; }
.approach-grid { border-top: 0; gap: 18px; }
.approach-card, .approach-card + .approach-card { border: 0; padding: 0; }
.approach-card__image { aspect-ratio: 6 / 5; background: var(--sand); border-radius: 28px; overflow: hidden; position: relative; }
.approach-card__image img { display: block; height: 100%; object-fit: cover; object-position: center 45%; width: 100%; }
.production-overview .approach-card__image { aspect-ratio: 4 / 5; background: #f1f0ef; }
.production-overview .approach-card:first-child .approach-card__image img { object-position: center; transform: none; }
.production-overview .approach-card:nth-child(2) .approach-card__image img { object-position: center; transform: none; }
.production-overview .approach-card:nth-child(3) .approach-card__image img { object-position: center; transform: none; }
.approach-card__color { background: var(--sand); height: 100%; width: 100%; }
.approach-card__content { padding: 34px 26px 0; }
.approach-card__title { font-size: clamp(1.35rem, 2vw, 1.8rem); line-height: 1.05; margin-bottom: 22px; }
.approach-card__details { color: rgba(23,59,50,.72); display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; }
.approach-card__details li { align-items: start; display: grid; font-size: .96rem; gap: 10px; grid-template-columns: 22px minmax(0, 1fr); line-height: 1.42; }
.approach-card__details li::before { background: var(--forest); border-radius: 50%; content: ""; display: block; height: 6px; margin: 8px 0 0 8px; width: 6px; }
.products-section .section-heading h2 { max-width: 100%; white-space: nowrap; }
.products-section .section-heading { align-items: flex-start; display: block; }
.products-section .section-heading h2 { margin-bottom: 16px; }
.products-section .section-heading > p { margin: 0; max-width: none; white-space: nowrap; }
.approach-card__details li { font-size: clamp(.72rem, .93vw, .96rem); white-space: nowrap; }

@media (max-width: 760px) {
  .production-overview .approach__lead > p { white-space: normal; }
  .approach__heading h2 { white-space: normal; }
  .production-overview .approach__heading h2 { white-space: normal; }
  .products-section .section-heading h2 { white-space: normal; }
  .products-section .section-heading > p { white-space: normal; }
  .approach-card__details li { white-space: nowrap; }
  .approach__lead .button { margin-top: 18px; }
  .approach-grid { gap: 42px; }
  .production-overview .approach-card__image { aspect-ratio: 4 / 5; margin-inline: 0; max-width: none; width: 100%; }
  .production-overview .approach-card__content { padding: 30px 32px 0; }
  .production-overview .approach-card__title { font-size: 1.55rem; }
  .production-overview .approach-card__details li { font-size: 1.04rem; line-height: 1.45; }
  .production-overview .approach-card__details li { grid-template-columns: 22px minmax(0, 1fr); gap: 10px; white-space: normal; }
  .production-overview .approach-card__details li::before { background: #d9f0d1; border: 0; border-radius: 50%; content: ""; display: block; height: 6px; margin: 8px 0 0 8px; width: 6px; }
}

@media (max-width: 1300px) {
  .production-overview .approach__lead > p { white-space: normal; }
}

/* Keep each section change visible as a deliberate, downward color blend. */
.approach,
.products-section,
.technology-section { padding-top: 170px; }
.approach::before,
.products-section::before,
.technology-section::before { height: 170px; }
.approach::before { background: linear-gradient(180deg, #fffdfa 0%, #f0f1ee 48%, #e8eae7 100%); }
.products-section::before { background: linear-gradient(180deg, #e8eae7 0%, #e3eae4 52%, #dce9df 100%); }
.technology-section::before { background: linear-gradient(180deg, #dce9df 0%, #e8eee9 54%, #fffdfa 100%); }

@media (max-width: 760px) {
  .approach,
  .products-section,
  .technology-section { padding-top: 120px; }
  .approach::before,
  .products-section::before,
  .technology-section::before { height: 120px; }
}

/* Final section palette: white → defined grey → green → blue → beige. */
.approach { background: #daddda; }
.products-section { background-color: #e2eee5; }
.technology-section {
  background: #deedf2;
}
.technology-panel {
  background: #c8dfe6;
  color: var(--ink);
}
.technology-panel h2 { color: var(--ink); }
.technology-panel__copy > p:not(.eyebrow) { color: rgba(23,59,50,.72); }
.technology-panel__decor { border-color: rgba(23,59,50,.16); }
.technology-panel__decor span { border-color: rgba(23,59,50,.14); }
.technology-panel__decor span:nth-child(3) { background: var(--forest); }
.technology-panel__stamp { border-color: rgba(23,59,50,.22); color: var(--forest); }
.technology-panel__stamp span { color: var(--forest-soft); }
.technology-panel__stamp small { color: rgba(23,59,50,.7); }
.contact-section {
  background: #deedf2;
  max-width: none;
  padding-inline: 0;
  padding-bottom: 0;
  width: 100%;
}

/* Keep image-heavy sections out of the first paint until the user is close to
   them, while reserving space so scrolling remains stable. */
.products-section:not(:first-of-type),
.contact-section {
  content-visibility: auto;
  contain-intrinsic-size: 0 960px;
}
.contact-card {
  background: #c8dfe6;
  margin-inline: 0;
  width: 100%;
}
.approach::before { background: linear-gradient(180deg, #fffdfa 0%, #e7e9e7 52%, #daddda 100%); }
.products-section::before { background: linear-gradient(180deg, #daddda 0%, #e1ebe4 52%, #e2eee5 100%); }
.technology-section::before { background: linear-gradient(180deg, #e2eee5 0%, #e3eef2 54%, #deedf2 100%); }
.contact-section::before { background: linear-gradient(180deg, #deedf2 0%, #deedf2 100%); }

/* Media-led feature sections. */
.technology-panel {
  aspect-ratio: 2.3 / 1;
  background:
    linear-gradient(90deg, rgba(3, 17, 19, .22) 0%, rgba(3, 17, 19, .08) 52%, rgba(3, 17, 19, .2) 100%),
    url("../../public/assets/technology-generated.1d72d999b888.webp") center / cover no-repeat;
  border-radius: 28px;
  display: grid;
  min-height: 560px;
  overflow: hidden;
  padding: clamp(44px, 7vw, 92px);
  align-items: center;
  justify-items: start;
  position: relative;
  width: 100%;
}
.technology-panel__copy {
  max-width: 1200px;
  position: relative;
  text-align: left;
  width: 100%;
  z-index: 1;
}
.technology-panel h2 {
  color: #fff;
  font-size: clamp(2.55rem, 3.45vw, 4.35rem);
  line-height: .98;
  max-width: 1200px;
  margin-inline: 0;
}
.technology-panel h2 span { white-space: nowrap; }
.technology-panel__copy > p:not(.eyebrow) { color: rgba(255,255,255,.78); }
.technology-panel .eyebrow--light { color: #fff; }
.technology-panel .button--cream {
  margin-top: 28px;
}
.technology-panel__decor,
.technology-panel__stamp { display: none; }

@media (max-width: 760px) {
  .technology-panel {
    aspect-ratio: auto;
    min-height: 560px;
    padding: 42px 30px;
  }
  .technology-panel h2 { font-size: clamp(2.2rem, 8.5vw, 3.45rem); }
  .technology-panel h2 span { white-space: normal; }
}

/* Generated pastoral artwork for the final contact / next-step section. */
.contact-card {
  aspect-ratio: 2.2 / 1;
  background: #1e4b42;
  border-radius: 0;
  display: grid;
  min-height: 560px;
  overflow: hidden;
  padding: clamp(48px, 8vw, 104px);
  place-items: center;
  position: relative;
}
.contact-card__media {
  background: url("../../public/assets/next-step-generated.33905d9a7961.webp") center / cover no-repeat;
  inset: 0;
  position: absolute;
}
.contact-card__veil {
  background: linear-gradient(90deg, rgba(5, 38, 35, .76) 0%, rgba(5, 38, 35, .44) 44%, rgba(5, 38, 35, .16) 100%), linear-gradient(0deg, rgba(5, 38, 35, .18), rgba(5, 38, 35, .18));
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}
.contact-card__copy {
  max-width: 1250px;
  position: relative;
  text-align: center;
  width: 100%;
  z-index: 2;
}
.contact-card__copy .eyebrow--light { color: #d4efc8; }
.contact-card h2 {
  color: #fff;
  font-size: clamp(2.7rem, 4.6vw, 5.5rem);
  line-height: .98;
  max-width: 1250px;
  margin-inline: auto;
}
.contact-card h2 span { white-space: nowrap; }
.contact-card .button--dark {
  margin-top: 30px;
}
.contact-card::after { display: none; }

/* Shared soft CTA treatment for product, technology, and next-step actions. */
.button--soft {
  background: #fff;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(4, 25, 31, .18);
  color: var(--forest);
  font-size: 1rem;
  font-weight: 400;
  gap: 14px;
  min-height: 52px;
  min-width: 170px;
  padding: 12px 16px;
  transition: background-color .22s ease, box-shadow .22s ease, color .22s ease, transform .22s ease;
}
.button--soft:hover,
.button--soft:focus-visible,
.button--soft:active {
  background: #dceef4;
  color: #174e68;
  box-shadow: 0 14px 28px rgba(4, 25, 31, .22);
  transform: translateY(-3px);
}
.button--soft svg {
  border-left: 1px solid rgba(23,59,50,.2);
  height: 30px;
  padding-left: 14px;
  width: 32px;
}
.button--soft:hover svg,
.button--soft:focus-visible svg,
.button--soft:active svg { border-left-color: rgba(23,78,104,.28); }

/* The homepage contact CTA uses a neutral black treatment in light mode. */
.contact-card .button--soft,
.contact-card .button--soft:hover,
.contact-card .button--soft:focus-visible,
.contact-card .button--soft:active { color: #000; }
.contact-card .button--soft svg { border-left-color: rgba(0,0,0,.2); }
.contact-card .button--soft:hover svg,
.contact-card .button--soft:focus-visible svg,
.contact-card .button--soft:active svg { border-left-color: rgba(0,0,0,.28); }

@media (max-width: 760px) {
  .contact-card {
    aspect-ratio: auto;
    min-height: 560px;
    padding: 42px 30px;
    width: 100%;
  }
  .contact-card__veil { background: linear-gradient(180deg, rgba(5, 38, 35, .42) 0%, rgba(5, 38, 35, .78) 100%); }
  .contact-card h2 { font-size: clamp(2.4rem, 9vw, 4rem); }
  .contact-card h2 span { white-space: normal; }
}

/* Keep the vertical rhythm consistent between the homepage sections. */
.approach,
.products-section,
.technology-section,
.contact-section {
  padding-bottom: clamp(96px, 6vw, 120px);
  padding-top: clamp(96px, 6vw, 120px);
}
.contact-section { padding-bottom: 0; }
.approach__intro,
.approach-grid,
.section-heading,
.technology-panel,
.contact-card {
  position: relative;
  z-index: 1;
}
@media (max-width: 760px) {
  .approach,
  .products-section,
  .technology-section,
  .contact-section {
    padding-bottom: 80px;
    padding-top: 80px;
  }
  .contact-section { padding-bottom: 0; }
}

/* Use solid section fields so adjacent colors do not bleed into one another. */
#top .approach { background: #8a4f3d; color: #fff; }
#top .products-section { background: #f3eee5; color: var(--ink); }
#top .technology-section,
#top .contact-section { background: #c0d7c7; }
#top .approach::before,
#top .products-section::before,
#top .technology-section::before,
#top .contact-section::before {
  display: none;
}

#top .production-overview .approach-card__image::after {
  background: rgba(201, 204, 201, .12);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}
#top .production-overview .approach-card:nth-child(3) .approach-card__image::after {
  background: rgba(150, 154, 151, .14);
}
#top .production-overview .approach-card__image img,
#top .products-section .product-card__visual img {
  filter: saturate(1.1) contrast(1.06);
}

/* Strong homepage section palette: terracotta production, deep-blue products. */
#top .approach .headline,
#top .approach__lead > p,
#top .products-section .section-heading > p,
#top .approach-card__title,
#top .approach-card__details {
  color: rgba(255, 255, 255, .94);
}
#top .production-overview .approach__lead > p,
#top .products-section .section-heading > p {
  font-family: var(--font-body);
  font-size: var(--type-body);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.45;
}
#top .approach-card__details li::before {
  background: #d9f0d1;
}
#top .products-section .section-heading h2,
#top .products-section .section-heading > p {
  color: var(--ink);
}

/* Let the transparent product cutouts sit directly on the section field. */
#top .products-section .product-card__visual {
  background: transparent;
}
#top .products-section .product-card__visual::after {
  background: transparent;
}

/* Keep the production and product section headings identical across locales. */
#top .production-overview .approach__heading h2,
#top .products-section .section-heading h2 {
  font-size: clamp(2.35rem, 3.9vw, 4.6rem);
  letter-spacing: -.07em;
  line-height: .98;
  margin-bottom: 26px;
  max-width: 100%;
  white-space: nowrap;
}

@media (max-width: 760px) {
  #top .production-overview .approach__heading h2,
  #top .products-section .section-heading h2 {
    font-size: clamp(2.1rem, 9vw, 3.8rem);
    white-space: normal;
  }
}

/* Remove the empty color band between the products and contact sections. */
#top .products-section { padding-bottom: clamp(96px, 7vw, 144px); }
#top .contact-section { padding-top: 0; }

@media (max-width: 760px) {
  #top .products-section { padding-bottom: 96px; }
}

/* Compact second product feature: keep the crate close to the tag hero. */
#top .crate-feature {
  background: #e8f0f5;
  align-items: center;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.5vw, 34px);
  justify-content: center;
  min-height: min(760px, calc(100vh - var(--site-header-height) + 112px));
  overflow: hidden;
  padding: clamp(64px, 7vw, 104px) 24px clamp(54px, 6vw, 88px);
  text-align: center;
  width: 100%;
}
#top .crate-feature__content { max-width: 760px; position: relative; z-index: 1; }
#top .crate-feature__content h2 { color: #000; font-family: var(--font-display); font-size: clamp(2.8rem, 5vw, 5.4rem); letter-spacing: -.07em; line-height: .94; margin: 0; }
#top .crate-feature__content > p { color: #000; font-size: clamp(1rem, 1.45vw, 1.25rem); letter-spacing: -.03em; line-height: 1.3; margin: 20px auto 0; max-width: none; white-space: nowrap; }
#top .crate-feature__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 26px; }
#top .crate-feature__button { font-size: .92rem; font-weight: 500; min-width: 132px; padding: 11px 18px; }
#top .crate-feature__button--primary { background: #000; color: #fff; }
#top .crate-feature__button--secondary { background: #fff; border: 1px solid #000; color: #000; }
#top .crate-feature__media { align-items: center; display: flex; justify-content: center; min-height: 0; overflow: hidden; width: min(100%, 1180px); }
#top .crate-feature__media img { display: block; filter: drop-shadow(0 22px 24px rgba(12, 24, 30, .14)); height: auto; max-width: min(66vw, 940px); object-fit: contain; width: 100%; }

@media (max-width: 760px) {
  #top .crate-feature {
    gap: 18px;
    min-height: 0;
    padding: 72px 22px 64px;
  }
  #top .crate-feature__content { max-width: 100%; }
  #top .crate-feature__content h2 { font-size: clamp(2.5rem, 12vw, 3.8rem); }
  #top .crate-feature__content > p { margin-inline: auto; max-width: 300px; white-space: normal; }
  #top .crate-feature__actions { justify-content: center; margin-top: 24px; }
  #top .crate-feature__button { font-size: .88rem; min-width: 124px; padding: 10px 15px; }
  #top .crate-feature__media { min-height: 0; width: 100%; }
  #top .crate-feature__media img { max-width: 100%; width: min(100%, 420px); }
}

/* Keep the tag and crate feature panels on one shared vertical rhythm. */
#top {
  --home-section-gap: 16px;
  --home-feature-height: min(760px, calc(100vh - var(--site-header-height) + 112px));
}
#top .hero,
#top .crate-feature {
  height: var(--home-feature-height);
  min-height: var(--home-feature-height);
}
#top {
  background: #f6f1e8;
}
#top .hero {
  background: #f6f1e8;
  border-radius: 0;
  margin: 0;
  width: 100%;
}
#top .hero__content {
  transform: translateY(-30px);
}
#top .crate-feature {
  background: #dce8de;
  justify-content: flex-start;
  margin-top: var(--home-section-gap);
  padding-top: 54px;
}
#top .products-section,
#top .contact-section { margin-top: var(--home-section-gap); }

/* Keep the products band the same height as the neighboring feature panels. */
#top .products-section {
  background: #f6f1e8;
  box-sizing: border-box;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  height: var(--home-feature-height);
  min-height: var(--home-feature-height);
  padding: 0;
}
#top .products-section::before {
  display: none;
}
#top .products-section__panel {
  display: block;
  min-height: 0;
}
#top .products-section__panel--light { background: #dcecf2; }
#top .products-section__panel--dark { background: #172c3a; }
#top .products-section--secondary { margin-top: var(--home-section-gap); }
#top .products-section__panel--warm {
  background: #e8cdbd;
  color: #fff;
  isolation: isolate;
  overflow: hidden;
  position: relative;
}
#top .products-section__panel--moss { background: #35564b; }
#top .products-section__panel-image {
  height: 100%;
  inset: 0;
  object-fit: cover;
  object-position: center;
  position: absolute;
  width: 100%;
  z-index: 0;
}
#top .products-section__panel--warm::after {
  background: linear-gradient(180deg, rgba(36, 20, 12, .42) 0%, rgba(36, 20, 12, .05) 45%, rgba(36, 20, 12, .62) 100%);
  content: "";
  inset: 0;
  position: absolute;
  z-index: 1;
}
#top .products-section__panel--warm::after { display: none; }
#top .products-section__panel-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
  padding: clamp(28px, 3.2vw, 54px);
  position: relative;
  z-index: 2;
}
#top .products-section__panel-content h2 {
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 4.6rem);
  letter-spacing: -.07em;
  line-height: .94;
  margin: 0;
  max-width: 8ch;
}
#top .products-section__panel-content p {
  color: rgba(255, 255, 255, .88);
  font-size: clamp(1rem, 1.4vw, 1.3rem);
  letter-spacing: -.03em;
  line-height: 1.25;
  margin: 18px 0 0;
  max-width: 18ch;
}
#top .products-section__panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
#top .products-section__panel-button {
  align-items: center;
  display: inline-flex;
  font-size: .9rem;
  gap: 8px;
  justify-content: center;
  min-height: 46px;
  padding: 10px 16px;
}
#top .products-section__panel-button svg { height: 18px; width: 18px; }
#top .products-section__panel-button--primary { background: #fff; color: #000; }
#top .products-section__panel-button--secondary { border: 1px solid rgba(255,255,255,.82); color: #fff; }
#top .crate-feature__content {
  transform: none;
}
#top .crate-feature__media img {
  max-width: min(33vw, 470px);
}

@media (max-width: 760px) {
  #top {
    --home-feature-height: auto;
  }
  #top .hero {
    height: auto;
    min-height: 650px;
    margin: 0;
    width: 100%;
  }
  #top .hero__content {
    padding-top: 36px;
    transform: none;
  }
  #top .crate-feature {
    height: auto;
    min-height: 650px;
    margin-top: var(--home-section-gap);
    padding-top: 54px;
  }
  #top .crate-feature__content { transform: none; }
  #top .crate-feature__media img {
    max-width: 210px;
  }
  #top .products-section {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, minmax(650px, 1fr));
    height: auto;
    min-height: 1300px;
  }
  #top .products-section__panel-content {
    padding: 28px;
  }
  #top .products-section__panel-content h2 {
    font-size: clamp(2.2rem, 11vw, 3.6rem);
  }
  #top .products-section__panel-content p {
    font-size: 1rem;
    margin-top: 14px;
  }
  #top .products-section__panel-actions {
    gap: 8px;
  }
  #top .products-section__panel-button {
    flex: 1 1 0;
    font-size: .82rem;
    min-width: 0;
    padding-inline: 12px;
  }
}

/* Final homepage product feature styling. */
#top .products-section--subsections .products-section__panel {
  align-items: center;
  color: #000;
  display: flex;
  justify-content: center;
  text-align: center;
}
#top .products-section--subsections .products-section__panel--warm,
#top .products-section--subsections .products-section__panel--dark,
#top .products-section--subsections .products-section__panel--moss {
  background: #f1f1ef;
  color: #000;
}
#top .products-section--subsections .products-section__panel--warm { background: #e8cdbd; }
#top .products-section--subsections .products-section__panel--light { background: #dcecf2; }
#top .products-section--subsections .products-section__panel--dark { background: #b8c9d8; }
#top .products-section--subsections .products-section__panel--moss { background: #dce8de; }
#top .products-section--subsections .products-section__panel--moss {
  align-items: center;
  justify-content: center;
  isolation: auto;
  overflow: hidden;
  position: relative;
  text-align: center;
}
#top .products-section--subsections .products-section__panel-content {
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 4vw, 60px);
  width: 100%;
}
#top .products-section--subsections .products-section__panel--moss::before {
  display: none;
}
#top .products-section--subsections .products-section__panel--moss .products-section__panel-image {
  background: transparent;
  display: block;
  height: auto;
  inset: auto;
  margin-top: clamp(18px, 2vw, 28px);
  max-height: 220px;
  object-fit: contain;
  object-position: center;
  position: relative;
  width: clamp(108px, 11vw, 156px);
}
#top .products-section--subsections .products-section__panel--moss .products-section__panel-content {
  align-items: center;
  max-width: none;
  text-align: center;
  width: 100%;
}
#top .products-section--subsections .products-section__panel--moss .products-section__panel-content p {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
#top .products-section--subsections .products-section__panel--moss .products-section__panel-actions {
  justify-content: center;
}
#top .products-section--subsections .products-section__panel-content h2 {
  color: currentColor;
  font-size: clamp(2rem, 4vw, 4.6rem);
  max-width: none;
  white-space: nowrap;
}
#top .products-section--subsections .products-section__panel-content p {
  color: currentColor;
  margin: 18px auto 0;
  max-width: none;
  text-align: center;
  white-space: nowrap;
  width: max-content;
}
#top .products-section--subsections .products-section__panel-actions {
  justify-content: center;
  margin-top: 30px;
}
#top .products-section--subsections .products-section__panel-button {
  font-size: .92rem;
  min-width: 132px;
  padding: 11px 18px;
}
#top .products-section--subsections .products-section__panel-button--primary {
  background: #000;
  color: #fff;
}
#top .products-section--subsections .products-section__panel--dark .products-section__panel-button--primary,
#top .products-section--subsections .products-section__panel--moss .products-section__panel-button--primary {
  background: #000;
  color: #fff;
}
#top .products-section--subsections .products-section__panel-button--secondary {
  background: #fff;
  border: 1px solid #000;
  color: #000;
}

@media (max-width: 760px) {
  #top .electronic-feature {
    height: auto;
    min-height: 650px;
    padding: 48px 22px;
  }
  #top .electronic-feature__content h2 {
    font-size: clamp(2rem, 8vw, 3.8rem);
  }
  #top .electronic-feature__content p { max-width: 28ch; }
  #top .products-section--subsections .products-section__panel-content h2 {
    font-size: clamp(1.7rem, 8vw, 3.4rem);
  }
  #top .products-section--subsections .products-section__panel--moss {
    min-height: 650px;
  }
  #top .products-section--subsections .products-section__panel--moss .products-section__panel-image {
    max-height: 194px;
    width: 130px;
  }
  #top .products-section--subsections .products-section__panel-content p {
    max-width: 26ch;
    text-align: center;
    white-space: normal;
    width: auto;
  }
  #top .products-section--subsections .products-section__panel-button {
    font-size: .88rem;
    min-width: 124px;
    padding: 10px 15px;
  }
}

/* Homepage product rhythm: the crate feature is the spacing reference for
   every product panel that has an image below its actions. This is deliberately
   scoped to the homepage; the tag artwork keeps its own image treatment. */
#top {
  --home-product-media-gap: clamp(20px, 2.5vw, 34px);
  --home-product-image-width: clamp(150px, 13vw, 190px);
  --home-product-image-height: clamp(210px, 22vw, 300px);
}

#top .crate-feature { gap: var(--home-product-media-gap); }

#top .products-section--subsections .products-section__panel-image {
  background: transparent;
  display: block;
  height: auto;
  inset: auto;
  margin-top: var(--home-product-media-gap);
  max-height: var(--home-product-image-height);
  object-fit: contain;
  object-position: center;
  position: relative;
  width: var(--home-product-image-width);
}

#top .products-section--subsections .products-section__panel--moss .products-section__panel-image {
  margin-top: var(--home-product-media-gap);
  max-height: var(--home-product-image-height);
  width: var(--home-product-image-width);
}

/* Keep the crate visually balanced with the normalized product imagery. */
#top .crate-feature__media img { max-width: min(37.2vw, 528px); }

@media (max-width: 760px) {
  #top {
    --home-product-media-gap: 20px;
    --home-product-image-width: 150px;
    --home-product-image-height: 220px;
  }

  #top .crate-feature { gap: var(--home-product-media-gap); }
  #top .crate-feature__media img { max-width: 196px; }
}

/* Phone view polish: content-led panels keep a consistent action rhythm
   without preserving the oversized desktop-height gaps. */
@media (max-width: 760px) {
  /* Tighten only the mobile Tag hero: keep the copy/actions in place while
     bringing the hand image closer and shortening the section. */
  #top .hero { min-height: 500px; }
  #top .hero__media img { height: 240px; }

  #top .crate-feature,
  #top .electronic-feature {
    gap: 26px;
    min-height: 520px;
    padding: 48px 20px 52px;
  }

  #top .crate-feature__actions,
  #top .electronic-feature__actions { margin-top: 20px; }
  #top .crate-feature__media img { max-width: 228px; }

  #top .products-section {
    grid-template-rows: repeat(2, minmax(420px, auto));
    min-height: 840px;
  }

  #top .products-section--tertiary {
    grid-template-rows: repeat(2, minmax(420px, auto));
    min-height: 840px;
  }

  #top .products-section--subsections .products-section__panel {
    min-height: 420px;
  }

  #top .products-section--subsections .products-section__panel-content {
    height: auto;
    min-height: 100%;
    padding: 40px 20px;
  }

  #top .products-section--subsections .products-section__panel-content h2 {
    line-height: 1;
    white-space: normal;
  }

  #top .products-section--subsections .products-section__panel-content p {
    line-height: 1.4;
    margin-top: 12px;
  }

  #top .products-section--subsections .products-section__panel-actions {
    margin-top: 22px;
  }

  #top .products-section--subsections .products-section__panel-image {
    display: none;
  }

  /* Keep primary actions comfortably tappable on phones. */
  #top .hero__button,
  #top .crate-feature__button,
  #top .products-section__panel-button {
    min-height: 48px;
  }
}

/* Final homepage image normalization: the microchip pair is 20% larger,
   while the crate and electronic-tag visuals share an 80% image width slot. */
#top {
  --home-primary-image-width: clamp(182px, 30vw, 380px);
  --home-microchip-image-width: clamp(259px, 22.464vw, 329px);
}

#top .crate-feature__media,
#top .electronic-feature__media {
  width: min(100%, var(--home-primary-image-width));
}

#top .crate-feature__media img,
#top .electronic-feature__media img {
  height: auto;
  max-width: 100%;
  width: var(--home-primary-image-width);
}

#top .electronic-feature__media img {
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .24));
}

/* Keep the new Microchip Reader and Injectable Microchip artwork visible on
   phones and centered at the same enlarged scale. */
#top .products-section--subsections .products-section__panel--dark .products-section__panel-image--microchip-reader,
#top .products-section--subsections .products-section__panel--light .products-section__panel-image--injectable-microchip {
  display: block;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .2));
  height: auto;
  margin: var(--home-product-media-gap) auto 0;
  max-height: none;
  max-width: 100%;
  width: var(--home-microchip-image-width);
}

/* Homepage primary pairing: crates and electronic tags share one balanced
   two-up section, while the Tag hero above remains intentionally untouched. */
#top {
  --home-product-image-width: clamp(238px, 20.592vw, 301px);
  --home-microchip-image-width: var(--home-product-image-width);
}

#top .products-section--primary {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  height: var(--home-feature-height);
  margin-top: var(--home-section-gap);
  min-height: var(--home-feature-height);
  padding: 0;
  width: 100%;
}

#top .products-section--primary .products-section__panel {
  align-items: center;
  color: #000;
  display: flex;
  min-height: 0;
  overflow: hidden;
  text-align: center;
}

#top .products-section--primary .products-section__panel--crate {
  background: #dce8de;
}

#top .products-section--primary .products-section__panel--electronic {
  background: #b9bdc2;
}

#top .products-section--primary .products-section__panel-content {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  min-height: 0;
  padding: clamp(32px, 4vw, 60px) clamp(20px, 3vw, 52px);
  width: 100%;
}

#top .products-section--primary .products-section__panel-content h2 {
  color: #000;
  font-size: clamp(2rem, 3.2vw, 4.6rem);
  line-height: .98;
  max-width: 12ch;
  white-space: normal;
}

#top .products-section--primary .products-section__panel-content p {
  color: #000;
  font-size: clamp(.95rem, 1.15vw, 1.2rem);
  line-height: 1.35;
  margin: 16px auto 0;
  max-width: 28ch;
  white-space: normal;
}

#top .products-section--primary .products-section__panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 24px;
}

#top .products-section--primary .products-section__panel-button {
  min-height: 46px;
  min-width: 132px;
  padding: 11px 18px;
}

#top .products-section--primary .products-section__panel-button--primary {
  background: #000;
  color: #fff;
}

#top .products-section--primary .products-section__panel-button--secondary {
  background: #fff;
  border: 1px solid #000;
  color: #000;
}

#top .products-section--primary .products-section__panel-image,
#top .products-section--subsections .products-section__panel--dark .products-section__panel-image--microchip-reader,
#top .products-section--subsections .products-section__panel--light .products-section__panel-image--injectable-microchip {
  display: block;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .2));
  height: auto;
  margin: var(--home-product-media-gap) auto 0;
  max-height: none;
  max-width: min(100%, calc(100vw - 40px));
  object-fit: contain;
  object-position: center;
  width: var(--home-product-image-width);
}

@media (max-width: 760px) {
  #top .products-section--primary {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, minmax(420px, auto));
    height: auto;
    min-height: 840px;
  }

  #top .products-section--primary .products-section__panel {
    min-height: 420px;
  }

  #top .products-section--primary .products-section__panel-content {
    padding: 40px 20px;
  }

  #top .products-section--primary .products-section__panel-content h2 {
    font-size: clamp(1.85rem, 8vw, 3.4rem);
    max-width: 13ch;
  }

  #top .products-section--primary .products-section__panel-content p {
    max-width: 27ch;
  }

  #top .products-section--primary .products-section__panel-actions {
    margin-top: 22px;
  }

  #top .products-section--primary .products-section__panel-button {
    font-size: .88rem;
    min-height: 48px;
    min-width: 124px;
    padding: 10px 15px;
  }

  #top .products-section--primary .products-section__panel-image,
  #top .products-section--subsections .products-section__panel--dark .products-section__panel-image--microchip-reader,
  #top .products-section--subsections .products-section__panel--light .products-section__panel-image--injectable-microchip {
    max-width: calc(100vw - 40px);
  }
}

/* Stable homepage product rhythm: keep copy and actions in fixed rows so
   artwork dimensions never move the content above them. The tag hero uses
   its existing, intentionally separate treatment. */
#top {
  --home-panel-top-padding: clamp(48px, 4.5vw, 72px);
  --home-panel-copy-row: clamp(142px, 11.5vw, 178px);
}

#top .products-section--subsections .products-section__panel-content {
  align-content: start;
  align-items: stretch;
  display: grid;
  grid-template-rows: var(--home-panel-copy-row) auto minmax(0, 1fr);
  height: 100%;
  justify-content: stretch;
  padding: var(--home-panel-top-padding) clamp(20px, 3vw, 52px) clamp(28px, 3vw, 48px);
}

#top .products-section--subsections .products-section__panel-content > div:first-child {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-start;
  min-height: 0;
  width: 100%;
}

#top .products-section--subsections .products-section__panel-content h2,
#top .products-section--subsections .products-section__panel-content p {
  flex: 0 0 auto;
}

#top .products-section--subsections .products-section__panel-content p {
  max-width: min(100%, 32ch);
}

#top .products-section--subsections .products-section__panel-actions {
  align-self: start;
  margin-top: 0;
}

#top .products-section--subsections .products-section__panel-image {
  align-self: center;
  justify-self: center;
  margin-top: var(--home-product-media-gap);
}

@media (max-width: 760px) {
  #top {
    --home-panel-top-padding: 42px;
    --home-panel-copy-row: 138px;
  }

  #top .products-section--subsections .products-section__panel-content {
    padding: var(--home-panel-top-padding) 20px 30px;
  }

  #top .products-section--subsections .products-section__panel-content p {
    max-width: 28ch;
  }

  #top .products-section--subsections .products-section__panel-actions {
    align-self: center;
  }
}

/* Keep the two primary product descriptions visually compact on desktop. */
#top .products-section--primary .products-section__panel-content p {
  max-width: none;
  white-space: nowrap;
  width: max-content;
}

@media (max-width: 760px) {
  #top .products-section--primary .products-section__panel-content p {
    max-width: 28ch;
    white-space: normal;
    width: auto;
  }
}

/* Keep the description-to-action rhythm compact and consistent in the
   homepage crate/electronic split section. */
#top .products-section--primary .products-section__panel-actions {
  margin-top: 16px;
}

@media (max-width: 760px) {
  #top .products-section--primary .products-section__panel-actions {
    margin-top: 16px;
  }
}

/* The primary pair uses the shared subsections grid, but its copy block
   should size to its content so the buttons follow the description directly. */
#top .products-section--primary .products-section__panel-content {
  grid-template-rows: auto auto minmax(0, 1fr);
}

#top .products-section--primary .products-section__panel-content > div:first-child {
  height: auto;
}

/* Homepage product imagery: enlarge the non-tag visuals together and keep
   their top edge close to the shared action row while preserving horizontal
   centering inside each panel. */
#top {
  --home-product-media-gap: clamp(14px, 1.25vw, 18px);
  --home-product-image-width: clamp(296px, 26.77vw, 391px);
  --home-microchip-image-width: var(--home-product-image-width);
}

#top .products-section--primary .products-section__panel-image,
#top .products-section--subsections .products-section__panel--dark .products-section__panel-image--microchip-reader,
#top .products-section--subsections .products-section__panel--light .products-section__panel-image--injectable-microchip {
  align-self: start;
  justify-self: center;
  margin-top: var(--home-product-media-gap);
}

@media (max-width: 760px) {
  #top .products-section--primary {
    grid-template-rows: repeat(2, minmax(460px, auto));
    min-height: 920px;
  }

  #top .products-section--primary .products-section__panel {
    min-height: 460px;
  }

  #top .products-section--subsections .products-section__panel--dark,
  #top .products-section--subsections .products-section__panel--light {
    min-height: 480px;
  }
}

/* Final non-tag homepage rhythm pass.
   The Tag hero remains the reference and is intentionally excluded here.
   All other product panels use the same copy rhythm, action-to-image gap,
   image offset, and image scale. */
#top {
  --home-non-tag-copy-gap: 24px;
  --home-non-tag-action-gap: 30px;
  --home-non-tag-image-offset: 40px;
  --home-non-tag-image-width: calc(var(--home-product-image-width) + 20px);
}

/* Let every non-tag panel size its copy to its content. This keeps the
   Header -> Description -> Button rhythm aligned with the Tag reference
   instead of inheriting the older fixed copy row. */
#top .products-section--subsections .products-section__panel-content {
  grid-template-rows: auto auto minmax(0, 1fr);
}

#top .products-section--subsections .products-section__panel-content > div:first-child {
  height: auto;
}

#top .products-section--subsections .products-section__panel-content h2 {
  margin: 0;
}

#top .products-section--subsections .products-section__panel-content p {
  margin-top: var(--home-non-tag-copy-gap);
}

#top .products-section--subsections .products-section__panel-actions {
  margin-top: var(--home-non-tag-action-gap);
}

#top .products-section--subsections .products-section__panel-image,
#top .products-section--subsections .products-section__panel--dark .products-section__panel-image--microchip-reader,
#top .products-section--subsections .products-section__panel--light .products-section__panel-image--injectable-microchip,
#top .products-section--subsections .products-section__panel--moss .products-section__panel-image--vaccine {
  align-self: start;
  display: block;
  margin-top: calc(var(--home-product-media-gap) + var(--home-non-tag-image-offset));
  max-width: 100%;
  width: var(--home-non-tag-image-width);
}

@media (max-width: 760px) {
  #top {
    --home-non-tag-copy-gap: 20px;
    --home-non-tag-action-gap: 24px;
    --home-non-tag-image-width: min(calc(var(--home-product-image-width) + 20px), calc(100vw - 40px));
  }

  #top .products-section--subsections .products-section__panel-content {
    grid-template-rows: auto auto minmax(0, 1fr);
    padding: 40px 20px 30px;
  }

  #top .products-section--subsections .products-section__panel-content h2 {
    font-size: clamp(1.7rem, 8vw, 3.4rem);
  }

  #top .products-section--subsections .products-section__panel-content p {
    margin-top: var(--home-non-tag-copy-gap);
  }

  #top .products-section--subsections .products-section__panel-actions {
    margin-top: var(--home-non-tag-action-gap);
  }

  #top .products-section--subsections .products-section__panel-image,
  #top .products-section--subsections .products-section__panel--dark .products-section__panel-image--microchip-reader,
  #top .products-section--subsections .products-section__panel--light .products-section__panel-image--injectable-microchip,
  #top .products-section--subsections .products-section__panel--moss .products-section__panel-image--vaccine {
    margin-top: calc(var(--home-product-media-gap) + var(--home-non-tag-image-offset));
    max-width: calc(100vw - 40px);
  }
}

/* Keep non-tag mobile actions compact and aligned with the Tag buttons. */
@media (max-width: 760px) {
  #top .crate-feature__button,
  #top .electronic-feature__button,
  #top .products-section__panel-button {
    flex: 0 0 auto;
    width: auto;
  }
}

/* Use the beekeeping/tag rhythm as the shared mobile reference. The
   non-tag image-bearing sections already resolve to a 54px action-to-image
   gap; reducing only the Tag hero's mobile section height moves its image
   upward while preserving the artwork dimensions and cropping the extra
   bottom background. */
@media (max-width: 760px) {
  #top .hero {
    min-height: 477px;
  }
}

/* Keep every homepage product grid on one shared horizontal and vertical
   gutter, while leaving the panel content and artwork unchanged. */
#top > .products-section {
  gap: var(--home-section-gap);
}

/* Keep the phone-view gutters white between the colored product panels. */
@media (max-width: 760px) {
  main#top,
  #top,
  #top .products-section {
    background: #fff;
  }
}

/* Trim the desktop Tag hero from the bottom: its artwork is bottom-aligned,
   so reducing the panel height moves the image up and removes the leftover
   background area without changing the artwork scale. */
@media (min-width: 761px) {
  #top .hero {
    height: calc(var(--home-feature-height) - 40px);
    min-height: calc(var(--home-feature-height) - 40px);
  }
}

/* Lift only the homepage electronic-tag artwork by 30px in total. */
#top .products-section--primary .products-section__panel--electronic .products-section__panel-image {
  margin-top: calc(var(--home-product-media-gap) + var(--home-non-tag-image-offset) - 30px);
}

/* Lift the injectable-microchip artwork by 10px without resizing it. */
#top .products-section--subsections .products-section__panel--light .products-section__panel-image {
  margin-top: calc(var(--home-product-media-gap) + var(--home-non-tag-image-offset) - 10px);
}

@media (max-width: 760px) {
  main#top {
    padding-top: 0;
  }
}
/* Keep desktop section separators white without changing the phone layout. */
@media (min-width: 761px) {
  main#top {
    background: #fff;
  }

  /* The desktop panel gaps belong to this wrapper, so make the separator
     itself pure white instead of inheriting the warm page tone. */
  #top .products-section {
    background: #fff !important;
  }
}

/* Keep the homepage hero readable on narrow screens without changing desktop. */
@media (max-width: 760px) {
  .hero__content h1 { font-size: clamp(2.15rem, 9vw, 3rem); }
  .hero__content > p { font-size: clamp(.94rem, 4vw, 1.08rem); }
}

/* Lift the three desktop product artworks by 10px; phone positioning stays unchanged. */
@media (min-width: 761px) {
  #top .products-section--primary .products-section__panel--electronic .products-section__panel-image,
  #top .products-section--subsections .products-section__panel--light .products-section__panel-image,
  #top .products-section--subsections .products-section__panel--moss .products-section__panel-image--vaccine {
    transform: translateY(-10px);
  }
}

/* Local-only colour test for the Electronic Tags homepage panel. */
#top .products-section--primary .products-section__panel--electronic {
  background: #d5baa1;
  color: #000;
}

/* Local-only colour test for the Beekeeping Tags homepage panel. */
#top .products-section--subsections .products-section__panel--warm {
  background: #e6d493;
  color: #000;
}

/* Move only the desktop microchip-reader artwork up without changing its
   panel, copy, or phone position. */
@media (min-width: 761px) {
  #top .products-section--subsections .products-section__panel--dark .products-section__panel-image--microchip-reader {
    transform: translateY(-20px);
  }
}