/* ------------------------- Components ® Code by Dennis -------------------------------------------------- */

/* ------------------------- Photo/Video BG -------------------------------------------------- */

.video-bg.video {
   position: absolute;
   width: 100%;
   height: 100vh;
   top: 0;
   left: 0;
   overflow: hidden;
   background: transparent;
   pointer-events: none;
   transition: var(--animation-primary);
}

.video-bg.video .video-wrapper {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   display: block;
   height: 0;
   width: 100%;
   padding: 0;
   padding-bottom: 56.25%;
}

.video-bg.video .video-wrapper iframe {
   height: 100%;
   height: calc(100% + 5px);
   width: 101%;
   position: absolute;
   top: -5px;
   left: -0.5%;
   bottom: 0;
   pointer-events: none;
}

.video-thumbnail {
   position: absolute;
   top: -10%;
   left: 0;
   width: 100%;
   height: 110%;
   background: var(--primary);
   opacity: 1;
   transform: translateZ(0) rotate(0.001deg);
   will-change: transform, opacity;
}
/* Poster/background image FIT (admin: Background image fit). Default is cover — the
   inline background-size:cover on the element fills the hero (crops to fit). Opt into
   "Contain" to show the WHOLE image without cropping (e.g. a product collage); that
   also neutralises the -10%/110% parallax offset so the contained image isn't clipped
   at the top by the header's overflow:hidden. */
.video-thumbnail.fit-contain { background-size: contain !important; background-repeat: no-repeat !important; top: 0 !important; height: 100% !important; }

.video-bg.loaded .video-thumbnail {
   opacity: 0;
   /* was 1.2s: the video is already playing underneath, so a long cross-fade just
      makes it FEEL slow. The perceived hero delay was animation, not bandwidth. */
   transition: opacity .35s ease-out;
}

.video-overlay {
   background: rgba(58, 11, 34, .5);
   opacity: 1;
   background: linear-gradient(90deg, rgba(10, 61, 39, .98) 0%, rgba(10, 61, 39, .5) 100%);
}

@media screen and (max-width: 540px){

   .comp-header.v2 .video-bg {
      height: calc((var(--vh, 1vh) * 100) - (var(--nav-padding) + (2 * var(--viewport-padding))) * 2);
   }

   .video-bg.video {
      height: 100vh;
      height: calc(var(--vh, 1vh) * 100);
   }

   .video-bg.video .video-wrapper {
      display: none;
   }

   .video-bg.loaded .video-thumbnail {
      opacity: 1 !important;
   
   }

}

/* ------------------------- Header -------------------------------------------------- */

.comp-header {
   background: transparent;
   position: relative;
   display: block;
   overflow: hidden;
}

.comp-header .container .row:nth-child(1) {
   padding-right: 30%;
   padding-top: 1em;
}

.comp-header .btn {
   margin-top: 2.5em;
}

@media screen and (max-width: 1000px){
   .comp-header .container .row:nth-child(1) {
      padding-right: 20%;
   }
}

@media screen and (max-width: 700px){
   .comp-header .container .row:nth-child(1) {
      padding-right: 0%;
      padding-top: 0em;
   }
}

/* ------------------------- Header V3 -------------------------------------------------- */

.comp-header.full-height.v3 {
   align-items: flex-end;
}

.comp-header.v3 .video-overlay {
   background: rgba(58, 11, 34, 0.7);
   opacity: 1;
   background: linear-gradient(0deg, rgba(14, 82, 52, .8) 0%, rgba(14, 82, 52, 0.3) 66%, rgba(14, 82, 52, .5) 100%);
}

@media screen and (max-width: 540px){
   .comp-header.full-height.v3 {
      min-height: calc(var(--vh, 1vh) * 60);
   }
}

/* ------------------------- Header V1 -------------------------------------------------- */

.comp-header.v1 .container .row:nth-child(1) {
   padding-top: 3.5em;
   padding-right: 10%;
}

@media screen and (max-width: 1000px){
   .comp-header.v1 .container .row:nth-child(1) {
      padding-right: 8%;
   }
}

/* ------------------------- Header V2 -------------------------------------------------- */

.comp-header.v2 .video-bg {
   width: 70vw;
   left: 30vw;
   top: calc(var(--nav-padding) + (2 * var(--viewport-padding)));
   height: calc(100vh - (var(--nav-padding) + (2 * var(--viewport-padding))) * 2);
}

.comp-header.v2 .video-overlay {
   background: rgba(58, 11, 34, 0.7);
   opacity: 1;
   background: linear-gradient(90deg, rgba(14, 82, 52, .7) 0%, rgba(14, 82, 52, .2) 100%);
}

@media screen and (min-width: 2200px){

   .comp-header.v2 .video-bg {
      width: 65vw;
      left: 35vw;
   }

}

@media screen and (max-width: 540px){

   .comp-header.v2 .video-bg {
      height: calc((var(--vh, 1vh) * 100) - (var(--nav-padding) + (2 * var(--viewport-padding))) * 2);
   }

}

/* On phones the products-hero panel would sit on top of the headline/tagline.
   Instead, drop the peppers into their own full-width band BELOW the text. */
@media screen and (max-width: 700px){
   .comp-header.v2 { padding-bottom: 66vw; }
   .comp-header.v2 .video-bg {
      width: 100vw; left: 0; right: 0;
      top: auto; bottom: 0; height: 66vw;
   }
}


/* ------------------------- Pattern Top -------------------------------------------------- */

.pattern-top {
   position: absolute;
   z-index: 0;
   top: 0;
   left: 0;
   display: block;
   width: 100%;
   pointer-events: none;
   height: 100vh;
}

.pattern-top svg {
   position: absolute;
   display: block;
   width: 100%;
   top: 50%;
   transform: translateY(-50%) rotate(0.0001deg);
   opacity: 0.1;
}

@media screen and (max-width: 540px){ 
   .pattern-top {
      height: 100vh;
      height: calc(var(--vh, 1vh) * 100);
      overflow: hidden;
   }

   .pattern-top svg {
      width: auto;
      height: 90%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(0.0001deg);
      opacity: 0.15;
   }
}

/* ------------------------- Pattern Page -------------------------------------------------- */

.pattern-page {
   position: absolute;
   z-index: 0;
   top: 0;
   left: 0;
   display: block;
   width: 100%;
   pointer-events: none;
   height: 100vh;
}

.pattern-page svg {
   position: absolute;
   display: block;
   width: 100%;
   top: 50%;
   transform: translateY(-50%) rotate(0.0001deg);
   opacity: 0.1;
}

@media screen and (max-width: 540px){ 
   .pattern-top {
      height: 100vh;
      height: calc(var(--vh, 1vh) * 100);
   }
}


/* ------------------------- Slider -------------------------------------------------- */

.slider {
   outline: 0;
   outline-width: 0px !important;
   outline-offset: 0px;
   border-radius: 0;
   border: 0;
}


/* ------------------------- Comp Title + Text -------------------------------------------------- */

.comp-title-text .row .flex-col{
   width: 50%;
   width: calc(50% - (var(--gap-padding) * 1));
}

.comp-title-text .row .flex-col:nth-child(1){
   margin-right: calc(var(--gap-padding) * 2);
}

@media screen and (max-width: 1000px){ 

   .comp-title-text .row {
      padding-bottom: 1.5em;
   }

   .comp-title-text .row .flex-col{
      width: 100%;
   }

   .comp-title-text .row .flex-col:nth-child(1){
      margin-right: 0;
   }

   .comp-title-text .row h2 {
      margin-bottom: .5em;
   }
}



/* ------------------------- Single Blog Item -------------------------------------------------- */

.single-blog-item {
   display: block;
   position: relative;
   width: 100%;
}

.single-blog-item .image {
   display: block;
   position: relative;
   background: var(--primary-dark);
   overflow: hidden;
}

.single-blog-item .image .overlay-image {
   transition: var(--animation-primary);
   transform: scale(1.1) rotate(0.001deg);
}

.single-blog-item:hover .image .overlay-image {
   transform: scale(1) rotate(0.001deg);
}

.single-blog-item .image::before {
   display: block;
   content: "";
   padding-top: 108%;
}

.single-blog-item .image-content {
   display: flex;
   position: relative;
   padding-top: var(--gap-padding);
   justify-content: center;
   flex-wrap: wrap;
}

.single-blog-item .read-button {
   position: absolute;
   bottom: calc(var(--gap-padding) * -1.5);
   color: var(--white);
   text-align: center;
   font-size: 1em;
   opacity: 0;
   visibility: hidden;
   transition: var(--animation-primary);
   pointer-events: none;
}

.single-blog-item:hover .read-button {
   opacity: 1;
   visibility: visible;
}

.single-blog-item .read-button svg {
   margin-left: 0.4em;
   width: .8em;
   transform: rotate(45deg);
   transition: var(--animation-primary);
}

.single-blog-item:hover .read-button svg {
   transform: rotate(-45deg);
}

/* ------------------------- Comp Image Split -------------------------------------------------- */

.comp-image-split .row {
   align-items: center;
}

.comp-image-split .row .flex-col{
   width: 50%;
}

.comp-image-split .row .flex-col:nth-child(1){
   padding-right: var(--gap-padding);
}

.comp-image-split .row .flex-col:nth-child(2){
   padding-left: var(--gap-padding);
}

.comp-image-split .row .flex-col .image-wrap{
   display: block;
   position: relative;
   background: var(--primary-dark);
   overflow: hidden;
}

.comp-image-split .row .flex-col .image-wrap::before {
   display: block;
   content: "";
   padding-top: 100%;
}

.comp-image-split .overlay-image {
   height: 115%;
   top: -15%;
   transform: translateZ(0) rotate(0.001deg);
   will-change: transform;
}

.comp-image-split .icon-svg-wrap {
   left: 50%;
   left: calc(50% - (var(--gap-padding) / 2));
}

/* Flip */

.comp-image-split.flip .row .flex-col:nth-child(1){
   padding-left: var(--gap-padding);
   padding-right: 0;
}

.comp-image-split.flip .row .flex-col:nth-child(2){
   padding-left: 0;
   padding-right: var(--gap-padding);
   order: 1;
}

@media screen and (max-width: 1000px){ 
   .comp-image-split .row .flex-col{
      width: 40%;
   }

   .comp-image-split .row .flex-col:nth-child(2){
      padding-left: calc(var(--gap-padding) * 1);
      width: 60%;
   }
}

@media screen and (max-width: 720px){ 
   .comp-image-split .row .flex-col{
      width: 100%;
   }

   .comp-image-split .row .flex-col:nth-child(2){
      padding-left: 0;
      padding-top: calc(var(--gap-padding) * 2);
      width: 100%;
   }

   .comp-image-split .icon-svg-wrap {
      bottom: 5vw;
      left: auto;
      right: 5vw;
      transform: translate(0, 0) rotate(0.001deg);
      width: 6em;
      height: 6em;
   }

   /* Flip */

   .comp-image-split.flip .row .flex-col:nth-child(1){
      padding-left: 0;
      padding-top: calc(var(--gap-padding) * 2);
   }

   .comp-image-split.flip .row .flex-col:nth-child(2){
      padding-left: 0;
      padding-right: 0;
      order: 1;
      padding-top: 0;
   }
}

/* ------------------------- Comp Big Image -------------------------------------------------- */

.comp-big-image {
   padding: 0;
}

.comp-big-image .container {
   padding-left: 0;
}

.comp-big-image.right .container {
   padding-left: 0;
   padding-right: 0;
}

.comp-big-image .row .flex-col .image-wrap{
   display: block;
   position: relative;
   background: var(--primary-dark);
   overflow: hidden;
}

.comp-big-image .row .flex-col .image-wrap::before {
   display: block;
   content: "";
   padding-top: 25%;
}

.comp-big-image .overlay-image {
   height: 115%;
   top: -15%;
   transform: translateZ(0) rotate(0.001deg);
   will-change: transform;
}

@media screen and (max-width: 1000px){ 
   .comp-big-image .row .flex-col .image-wrap::before {
      padding-top: 33%;
   }
   
}

@media screen and (max-width: 540px){ 
   .comp-big-image .row .flex-col .image-wrap::before {
      padding-top: 50%;
   }

   .comp-big-image .container {
      padding-left: 0;
   }

   .comp-big-image.right .container {
      padding-right: 0;
   }
   
}


/* ------------------------- Section - Just Padding -------------------------------------------------- */

.section-just-padding-medium {
   padding-top: 0;
   padding-bottom: var(--section-padding-medium);
}

@media screen and (max-width: 540px){ 
   .section-just-padding-medium {
      padding-bottom: var(--section-padding);
   }
}
/* ------------------------- Packaging gallery (product pack sizes) ----------- */
.section-packaging .packaging-grid {
   list-style: none;
   margin: 0;
   padding: 0;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1.6em;
}
.section-packaging .packaging-item {
   text-align: left;
}
.section-packaging .packaging-image {
   position: relative;
   width: 100%;
   padding-top: 100%;
   border-radius: 8px;
   overflow: hidden;
   background: #dfe9e1;
}
.section-packaging .packaging-image .overlay-image {
   position: absolute;
   top: 0; left: 0; right: 0; bottom: 0;
}
.section-packaging .packaging-label {
   margin: 0.7em 0 0;
   color: var(--white);
}
@media screen and (max-width: 1000px){
   .section-packaging .packaging-grid { grid-template-columns: repeat(3, 1fr); gap: 1.2em; }
}
@media screen and (max-width: 700px){
   .section-packaging .packaging-grid { grid-template-columns: repeat(2, 1fr); gap: 1em; }
}

/* ------------------------- Product tabs + cards (commercial catalogue) ------ */
.section-product-tabs .product-tabs-title { margin-bottom: 0.2em; }
.section-product-tabs .product-tabs-sub { color: var(--text-medium); max-width: 46em; margin-bottom: 1.6em; }
.product-tabnav {
   list-style: none; margin: 0 0 2em; padding: 0 0 0.4em;
   display: flex; flex-wrap: wrap; gap: 0.4em 1.8em;
   border-bottom: 1px solid rgba(255,255,255,0.16);
   overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.product-tabnav li a {
   display: inline-block; padding: 0.5em 0; color: var(--text-medium);
   white-space: nowrap; position: relative; transition: var(--animation-primary);
}
.product-tabnav li a:hover { color: var(--white); }
.product-tabnav li.uk-active a { color: var(--white); }
.product-tabnav li.uk-active a::after {
   content: ""; position: absolute; left: 0; right: 0; bottom: -0.45em;
   height: 2px; background: var(--secondary);
}
.product-cards {
   display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6em;
}
.product-card {
   background: #ffffff; border-radius: 12px; overflow: hidden;
   display: flex; flex-direction: column;
}
.product-card-image { position: relative; width: 100%; padding-top: 78%; background: #eef3ef; display: block; }
.product-card-image .overlay-image { top: 8%; left: 8%; width: 84%; height: 84%; transition: var(--animation-primary); }
.product-card:hover .product-card-image .overlay-image { transform: scale(1.05) rotate(0.001deg); }
.product-card-body { padding: 1.1em 1.2em 1.3em; display: flex; flex-direction: column; flex: 1; }
.product-card-body h3 { color: var(--primary); margin: 0 0 0.5em; font-size: 1.15em; }
.product-attrs { list-style: none; margin: 0 0 1em; padding: 0; flex: 1; }
.product-attrs li { color: #4a5a50; font-size: 0.9em; padding-left: 1em; position: relative; line-height: 1.5; }
.product-attrs li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--secondary); }
.product-view {
   display: inline-flex; align-items: center; gap: 0.5em; align-self: flex-start;
   color: var(--secondary); font-weight: 600; transition: var(--animation-primary);
}
.product-view:hover { gap: 0.8em; }
.product-view svg { transform: rotate(180deg); }
@media screen and (max-width: 1200px){ .product-cards { grid-template-columns: repeat(3, 1fr); } }
@media screen and (max-width: 800px){ .product-cards { grid-template-columns: repeat(2, 1fr); gap: 1em; } }
@media screen and (max-width: 480px){ .product-cards { grid-template-columns: 1fr; } }

/* ------------------------- Spec panel (variety detail, auto-hides empties) -- */
.section-spec-panel .spec-list { margin: 0.4em 0 0; max-width: 40em; }
.section-spec-panel .spec-row {
   display: flex; justify-content: space-between; gap: 1.5em;
   padding: 0.75em 0; border-bottom: 1px solid rgba(255,255,255,0.14);
}
.section-spec-panel .spec-row dt { color: var(--text-medium); margin: 0; }
.section-spec-panel .spec-row dd { color: var(--white); margin: 0; text-align: right; font-weight: 600; }

/* ------------------------- Feature cards (pillars / solutions / recycling) -- */
.section-feature-cards .fc-head { max-width: 52em; margin-bottom: 2em; }
.section-feature-cards .fc-eyebrow { color: var(--secondary); margin-bottom: 0.4em; }
.section-feature-cards .fc-title { margin-bottom: 0.4em; }
.section-feature-cards .fc-intro { color: var(--text-medium); }
.feature-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6em; }
.feature-cards.cols-4 { grid-template-columns: repeat(4, 1fr); }
.feature-card {
   background: rgba(255,255,255,0.05);
   border: 1px solid rgba(255,255,255,0.12);
   border-radius: 12px; overflow: hidden; display: flex; flex-direction: column;
   transition: var(--animation-primary);
}
.feature-card:hover { background: rgba(255,255,255,0.08); transform: translateY(-3px); }
.feature-card-image { position: relative; width: 100%; padding-top: 62%; overflow: hidden; background: var(--primary-dark); }
.feature-card-image .overlay-image { top: 0; left: 0; width: 100%; height: 100%; transition: var(--animation-primary); }
.feature-card:hover .feature-card-image .overlay-image { transform: scale(1.06) rotate(0.001deg); }
.feature-card-body { padding: 1.3em 1.4em 1.5em; }
.feature-card-label { display: inline-block; color: var(--secondary); font-size: 0.8em; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.6em; }
.feature-card-body h3 { color: var(--white); margin: 0 0 0.5em; font-size: 1.2em; }
.feature-card-body p { color: var(--text-medium); margin: 0; font-size: 0.96em; }
@media screen and (max-width: 1000px){ .feature-cards, .feature-cards.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 600px){ .feature-cards, .feature-cards.cols-4 { grid-template-columns: 1fr; } }
/* Scroll-reveal (reveal.js): JS adds .reveal-armed to a container and staggers
   .reveal-in on each item as it scrolls into view (pop-in). Without JS the items
   stay fully visible. Shared by feature-cards, gallery-grid and variety-showcase. */
.reveal-armed .feature-card,
.reveal-armed .gallery-item,
.reveal-armed .vs-text {
   opacity: 0; transform: translateY(30px) scale(0.96);
   transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
   will-change: opacity, transform;
}
.reveal-armed .feature-card.reveal-in,
.reveal-armed .gallery-item.reveal-in,
.reveal-armed .vs-text.reveal-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
   .reveal-armed .feature-card, .reveal-armed .gallery-item, .reveal-armed .vs-text { opacity: 1; transform: none; transition: none; }
}

/* ------------------------- Video block + local hero video ------------------ */
.video-bg .video-bg-el {
   position: absolute; inset: 0;
   width: 100%; height: 100%;
   object-fit: cover; object-position: var(--video-focus, center center);
   transform: translateZ(0); pointer-events: none;
}
/* Transparent foreground hero video — sits IN FRONT of the text/content (over everything),
   while the background media stays behind. Clicks pass straight through. */
.comp-header .hero-foreground { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.comp-header .hero-fg-el { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.section-video-block .video-block-head { max-width: 50em; margin-bottom: 1.6em; }
.section-video-block .video-block-head h2 { margin-bottom: 0.3em; }
.video-frame { position: relative; width: 100%; border-radius: 12px; overflow: hidden; background: var(--primary-dark); }
.video-frame .video-el { display: block; width: 100%; height: auto; background: #000; }
.video-frame .video-embed { position: relative; width: 100%; padding-top: 56.25%; }
.video-frame .video-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* ------------------------- Our Story: founder/leadership split ------------- */
/* Self-contained (flexbox + explicit widths) so it never collapses inside the
   Chainn section/animation system. Photo is a direct background-image. */
.section-story-split { padding: 0 !important; margin: 0 !important; overflow: hidden; width: 100%; }
.section-story-split .story-split-grid { display: flex !important; flex-wrap: wrap; width: 100%; align-items: stretch; }
.section-story-split .story-split-image {
   flex: 1 1 50%; width: 50%; max-width: 50%; min-height: 80vh;
   background-size: cover; background-position: center center; background-repeat: no-repeat;
   position: relative; order: 1;
}
.section-story-split .story-split-text {
   flex: 1 1 50%; width: 50%; max-width: 50%; order: 2;
   display: flex; flex-direction: column; justify-content: center;
   padding: clamp(2.2rem, 5.5vw, 6rem) clamp(1.5rem, 6%, 6rem); background: transparent;
}
.section-story-split.image-right .story-split-image { order: 2; }
.section-story-split.image-right .story-split-text { order: 1; }
.section-story-split .story-bigyear {
   position: absolute; right: 6%; bottom: 5%; z-index: 2;
   font-family: var(--font-heading, roc-grotesk-wide), sans-serif; font-weight: 800;
   font-size: clamp(70px, 9vw, 140px); line-height: 1; letter-spacing: -0.03em;
   color: rgba(255,255,255,0.18);
}
.section-story-split .story-year-badge { display: inline-flex; align-items: center; gap: 0.7em; margin-bottom: 1.4em; }
.section-story-split .story-year {
   font-family: var(--font-heading, roc-grotesk-wide), sans-serif; font-weight: 800;
   font-size: clamp(48px, 6vw, 76px); line-height: 1; color: var(--secondary); letter-spacing: -0.02em;
}
.section-story-split .story-year-label { font-size: 0.7em; line-height: 1.3; color: var(--text-medium); letter-spacing: 0.12em; text-transform: uppercase; }
.section-story-split .story-tag { color: var(--secondary); margin-bottom: 0.7em; }
.section-story-split .story-split-text h2 { color: var(--white); margin-bottom: 0.6em; }
.section-story-split .story-split-text p { color: var(--text-medium); max-width: 32em; }
@media screen and (max-width: 900px){
   .section-story-split .story-split-image,
   .section-story-split .story-split-text { flex: 1 1 100%; width: 100%; max-width: 100%; order: 0 !important; }
   .section-story-split .story-split-image { min-height: 62vw; }
}

/* ------------------------- Our Story: tall numbered pillar cards ----------- */
.section-pillars .pillars-head { text-align: center; max-width: 40em; margin: 0 auto 2.4em; }
.section-pillars .pillars-head h2 { color: var(--white); }
.section-pillars .pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4em; }
.section-pillars .pillar-card { position: relative; overflow: hidden; border-radius: 12px; aspect-ratio: 3/4; }
.section-pillars .pillar-card-bg { position: absolute; inset: 0; }
.section-pillars .pillar-card-bg .overlay-image { top: 0; left: 0; width: 100%; height: 100%; transition: transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94); }
.section-pillars .pillar-card:hover .pillar-card-bg .overlay-image { transform: scale(1.05); }
/* Clickable pillars (a pillar card with a Link URL set). Non-linked cards stay as-is. */
.section-pillars a.pillar-card-link { display: block; text-decoration: none; color: inherit; transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
.section-pillars a.pillar-card-link:hover { transform: translateY(-4px); }
.section-pillars .pillar-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,41,27,0.92) 0%, rgba(6,41,27,0.35) 55%, rgba(6,41,27,0.05) 100%); }
.section-pillars .pillar-number { position: absolute; top: 1.3em; right: 1.4em; color: rgba(255,255,255,0.55); font-weight: 600; letter-spacing: 0.05em; }
.section-pillars .pillar-card-content { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.8em 1.7em; }
.section-pillars .pillar-label { display: inline-block; color: var(--secondary); font-size: 0.78em; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.5em; }
.section-pillars .pillar-card-content h3 { color: var(--white); margin: 0 0 0.5em; font-size: 1.35em; }
.section-pillars .pillar-card-content p { color: rgba(255,255,255,0.78); margin: 0; font-size: 0.95em; }
@media screen and (max-width: 900px){ .section-pillars .pillars-grid { grid-template-columns: 1fr; } .section-pillars .pillar-card { aspect-ratio: 16/10; } }

/* ====================== Solar section (Maryem's layout, our theme) ========== */
.section-solar { padding: 0 !important; background: var(--section-bg, var(--primary)); color: var(--text); overflow: hidden; }
/* ── Hero with sun ring + rays + counter ── */
.section-solar .solar-hero {
   min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
   text-align: center; padding: 8rem 2rem 6rem; position: relative; overflow: hidden;
   background: radial-gradient(ellipse 60% 70% at 50% 45%, rgba(246,102,102,0.10) 0%, transparent 65%), var(--primary);
}
.section-solar .solar-ring {
   position: absolute; top: 45%; left: 50%; transform: translate(-50%,-50%);
   width: min(70vw, 540px); height: min(70vw, 540px); border-radius: 50%;
   border: 1px solid rgba(246,102,102,0.22);
   box-shadow: 0 0 0 12px rgba(14,82,52,0.18), 0 0 0 60px rgba(14,82,52,0.10), 0 0 120px 30px rgba(246,102,102,0.12);
   animation: solar-pulse 4s ease-in-out infinite; pointer-events: none;
}
.section-solar .solar-ring::before { content:''; position:absolute; inset:18px; border-radius:50%; border:1px solid rgba(246,102,102,0.14); }
@keyframes solar-pulse { 0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(1);} 50%{opacity:1;transform:translate(-50%,-50%) scale(1.02);} }
.section-solar .solar-rays {
   position: absolute; top: 45%; left: 50%; transform: translate(-50%,-50%);
   width: min(90vw, 700px); height: min(90vw, 700px); animation: solar-rotate 40s linear infinite; pointer-events: none;
}
.section-solar .solar-ray { position:absolute; top:50%; left:50%; width:1px; height:50%; transform-origin:bottom center; background:linear-gradient(to top, transparent, rgba(246,102,102,0.16)); }
@keyframes solar-rotate { to { transform: translate(-50%,-50%) rotate(360deg); } }
.section-solar .solar-eyebrow { position:relative; z-index:2; color: var(--secondary); letter-spacing:.28em; text-transform:uppercase; font-size:.72rem; margin-bottom:2rem; }
.section-solar .solar-title { position:relative; z-index:2; color: var(--white); font-family: var(--font-heading, roc-grotesk-wide), sans-serif; font-weight:800; font-size: clamp(3rem, 8vw, 6.5rem); line-height:1.02; max-width:820px; }
.section-solar .solar-title em { font-style: italic; color: var(--secondary); }
.section-solar .solar-sub { position:relative; z-index:2; margin-top:1.6rem; max-width:520px; color: var(--text-medium); line-height:1.8; }
.section-solar .solar-stat { position:relative; z-index:2; margin-top:3rem; display:flex; flex-direction:column; align-items:center; gap:.3rem; }
.section-solar .solar-arc { width:140px; height:70px; margin-bottom:.4rem; }
.section-solar .solar-arc svg { width:100%; height:100%; }
.section-solar .arc-track { fill:none; stroke:rgba(255,255,255,0.14); stroke-width:3; stroke-linecap:round; }
.section-solar .arc-fill { fill:none; stroke:var(--secondary); stroke-width:3; stroke-linecap:round; stroke-dasharray:220; stroke-dashoffset:220; transition: stroke-dashoffset 2s cubic-bezier(.22,1,.36,1); }
.section-solar .solar-number { font-family: var(--font-heading, roc-grotesk-wide), sans-serif; font-weight:800; font-size:3rem; color:var(--secondary); line-height:1; }
.section-solar .solar-stat-label { font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text-medium); }
/* ── Video ── */
.section-solar .solar-video { padding: 0 clamp(1.5rem,5vw,6rem) 5rem; }
.section-solar .solar-video-wrap { width:100%; max-width:1100px; margin:0 auto; aspect-ratio:16/9; background:#000; border:1px solid rgba(246,102,102,0.14); border-radius:12px; overflow:hidden; position:relative; }
.section-solar .solar-video-wrap .video-el { width:100%; height:100%; display:block; object-fit:cover; }
.section-solar .solar-video-wrap .video-embed { position:absolute; inset:0; }
.section-solar .solar-video-wrap .video-embed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
/* ── Article: sticky sidebar + scroll-reveal body ── */
.section-solar .solar-article { max-width:1200px; margin:0 auto; padding:0 clamp(1.5rem,5vw,6rem) 7rem; display:grid; grid-template-columns:1fr 2fr; gap:5rem; align-items:start; }
.section-solar .solar-sidebar { position:sticky; top:7rem; }
.section-solar .solar-sidebar-tag { display:block; color:var(--secondary); letter-spacing:.22em; text-transform:uppercase; font-size:.66rem; margin-bottom:1.4rem; }
.section-solar .solar-sidebar-title { color:var(--white); font-weight:600; font-size:1.7rem; line-height:1.25; margin-bottom:1.6rem; }
.section-solar .solar-sidebar-divider { width:32px; height:2px; background:var(--secondary); opacity:.7; margin-bottom:1.8rem; }
.section-solar .solar-kstats { display:flex; flex-direction:column; gap:1.4rem; }
.section-solar .solar-kstat { display:flex; flex-direction:column; gap:.2rem; padding-bottom:1.4rem; border-bottom:1px solid rgba(255,255,255,0.07); }
.section-solar .solar-kstat:last-child { border-bottom:none; }
.section-solar .solar-kstat-val { font-family: var(--font-heading, roc-grotesk-wide), sans-serif; font-weight:800; font-size:1.7rem; color:var(--secondary); }
.section-solar .solar-kstat-label { font-size:.85rem; color:var(--text-medium); }
.section-solar .solar-sec { margin-bottom:3.5rem; opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.section-solar .solar-sec.is-visible { opacity:1; transform:none; }
.section-solar .solar-sec-tag { display:block; color:var(--text-light); letter-spacing:.22em; text-transform:uppercase; font-size:.66rem; margin-bottom:1rem; }
.section-solar .solar-sec-title { color:var(--white); font-weight:600; font-size:clamp(1.5rem,3vw,2.1rem); line-height:1.25; margin-bottom:1.2rem; }
.section-solar .solar-sec-title strong { color:var(--secondary); font-weight:700; }
.section-solar .solar-sec p { color:var(--text); line-height:1.85; margin-bottom:1.1rem; }
.section-solar .solar-sec-image { width:100%; aspect-ratio:16/9; border-radius:12px; overflow:hidden; margin:2rem 0 .5rem; position:relative; background: var(--section-bg, var(--primary)); }
.section-solar .solar-sec-image .overlay-image { position:absolute; inset:0; }
@media (max-width:820px){
   .section-solar .solar-article { grid-template-columns:1fr; gap:2.5rem; }
   .section-solar .solar-sidebar { position:static; }
}
.section-solar .solar-pull { margin:2.5rem 0; padding:1.5rem 2rem; border-left:2px solid var(--secondary); background:rgba(255,255,255,0.04); border-radius:0 8px 8px 0; }
.section-solar .solar-pull p, .section-solar p.solar-pull { font-style:italic; font-size:clamp(1.15rem,2.2vw,1.5rem); color:var(--white); line-height:1.5; margin:0; }

/* ====================== Product detail (modern variety page) =============== */
.section-product-detail { padding-top: calc(var(--nav-padding, 5rem) + 4rem) !important; padding-bottom: 5rem; }
/* Hero: product floats on the green (no box) with a soft spotlight + shadow */
.section-product-detail .pd-hero { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; margin-bottom: clamp(2.5rem, 5vw, 5rem); }
.section-product-detail .pd-stage { position: relative; aspect-ratio: 4/3; background: #ffffff; border-radius: 18px; overflow: hidden; box-shadow: 0 14px 40px rgba(0,0,0,0.18); }
.section-product-detail .pd-glow { display: none; }
.section-product-detail .pd-img { position: absolute; inset: 6%; background-size: contain; background-position: center; background-repeat: no-repeat; transition: transform .6s cubic-bezier(.7,0,.2,1); }
.section-product-detail .pd-stage:hover .pd-img { transform: scale(1.08); }
.section-product-detail .pd-family { display: inline-flex; align-items: center; gap: .6em; color: var(--secondary); letter-spacing: .14em; text-transform: uppercase; font-size: .74rem; font-weight: 600; margin-bottom: 1rem; }
.section-product-detail .pd-family span { width: 18px; height: 1px; background: var(--secondary); display: inline-block; }
.section-product-detail .pd-name { color: var(--white); font-family: var(--font-heading, roc-grotesk-wide), sans-serif; font-weight: 800; font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.02; margin-bottom: 1.1rem; }
.section-product-detail .pd-chips { list-style: none; display: flex; flex-wrap: wrap; gap: .7rem; margin: .3rem 0 2rem; padding: 0; }
.section-product-detail .pd-chips li { display: inline-flex; align-items: center; gap: .55em; border: 1px solid rgba(255,255,255,0.22); border-radius: 12px; padding: .62em 1.05em; font-size: .95rem; font-weight: 600; letter-spacing: .01em; color: var(--text); }
.section-product-detail .pd-chips li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--secondary); flex: none; }
.section-product-detail .pd-desc { color: var(--text-medium); max-width: 34em; line-height: 1.8; margin-bottom: 2rem; }

/* --- Product attributes: dynamic icon + label + value rows (replaces chips + specs) --- */
.section-product-detail .pd-attrs { list-style: none; margin: .3rem 0 2rem; padding: 0; display: flex; flex-direction: column; gap: .55rem; max-width: 31rem; }
.section-product-detail .pd-attr { display: grid; grid-template-columns: 1.7rem minmax(5.5rem, auto) 1fr; align-items: center; gap: .1rem 1rem;
   background: rgba(14,82,52,0.045); border: 1px solid rgba(14,82,52,0.07); border-radius: 14px; padding: .68rem 1.1rem; }
.section-product-detail .pd-attr-ico { width: 1.55rem; height: 1.55rem; color: var(--primary-overlay, #0E5234); display: inline-flex; align-items: center; }
.section-product-detail .pd-attr-ico svg { width: 100%; height: 100%; }
.section-product-detail .pd-attr-label { font-weight: 700; color: var(--secondary); }
.section-product-detail .pd-attr-label::after { content: " :"; }
.section-product-detail .pd-attr-val { color: var(--white); font-weight: 500; border-left: 1px solid rgba(14,82,52,0.14); padding-left: 1rem; min-width: 0; }
@media screen and (max-width: 460px){
   .section-product-detail .pd-attr { grid-template-columns: 1.6rem 1fr; }
   .section-product-detail .pd-attr-val { grid-column: 1 / -1; border-left: none; padding-left: 0; margin-top: .1rem; }
}

/* --- Product media: main image + swappable thumbnails --- */
.section-product-detail .pd-media { display: flex; flex-direction: column; gap: .85rem; }
.section-product-detail .pd-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .8rem; }
.section-product-detail .pd-thumb { aspect-ratio: 1/1; border-radius: 14px; border: 1px solid rgba(20,40,25,0.10); background-color: #fff;
   background-size: contain; background-position: center; background-repeat: no-repeat; cursor: pointer; padding: 0; box-shadow: 0 4px 14px rgba(0,0,0,0.06);
   transition: box-shadow .2s, border-color .2s, transform .2s; }
.section-product-detail .pd-thumb:hover { box-shadow: 0 10px 22px rgba(0,0,0,0.14); transform: translateY(-2px); }
.section-product-detail .pd-thumb.is-active { border-color: var(--secondary); box-shadow: 0 0 0 2px var(--secondary); }
.section-product-detail .pd-cta { display: inline-flex; align-items: center; gap: .7em; background: var(--secondary); color: var(--white); padding: .9em 1.5em; border-radius: 100px; font-weight: 600; transition: var(--animation-primary); }
.section-product-detail .pd-cta:hover { background: var(--secondary-dark); gap: 1em; }
/* Section titles */
.section-product-detail .pd-section-title { color: var(--white); font-size: 1.05rem; letter-spacing: .02em; margin-bottom: 1.4rem; padding-bottom: .9rem; border-bottom: 1px solid rgba(255,255,255,0.12); position: relative; }
.section-product-detail .pd-section-title::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 46px; height: 2px; background: var(--secondary); }
.section-product-detail .pd-block { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
/* Spec sheet grid */
.section-product-detail .pd-spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.10); border-radius: 12px; overflow: hidden; }
.section-product-detail .pd-spec { display: flex; flex-direction: column; gap: .35rem; padding: 1.3rem 1.4rem; background: var(--section-bg, var(--primary)); }
.section-product-detail .pd-spec-label { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-light); }
.section-product-detail .pd-spec-val { font-family: var(--font-heading, roc-grotesk-wide), sans-serif; font-weight: 700; font-size: 1.15rem; color: var(--white); }
/* Packaging formats row — products float (no boxes) */
/* Up to 6 formats per line (--pcols set per product); centred so a family with few
   formats doesn't stretch. Extra top padding + column gap gives the hover-zoom room
   so it is never clipped. */
.section-product-detail .pd-pack-row { display: grid;
   grid-template-columns: repeat(var(--pcols, 4), minmax(0, 150px)); gap: 1.6rem;
   padding: 3.2rem 2.5rem 0; }   /* top + sides: room for the hover zoom, never clipped */
@media screen and (max-width: 900px){ .section-product-detail .pd-pack-row { grid-template-columns: repeat(4, minmax(0,1fr)); padding: 3rem 2rem 0; } }
@media screen and (max-width: 620px){ .section-product-detail .pd-pack-row { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media screen and (max-width: 420px){ .section-product-detail .pd-pack-row { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.section-product-detail .pd-pack { text-align: center; position: relative; transition: transform .45s cubic-bezier(.7,0,.2,1); }
.section-product-detail .pd-pack-stage { transform: translateZ(0); backface-visibility: hidden; pointer-events: none; display: block; position: relative; width: 100%; aspect-ratio: 1/1; background: #ffffff; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 22px rgba(0,0,0,0.14); transition: transform .45s cubic-bezier(.7,0,.2,1), box-shadow .45s ease; }
.section-product-detail .pd-pack-stage .pd-glow { display: none; }
/* contain (never cropped) — the pack photos are framed manually so they sit right. */
.section-product-detail .pd-pack-img { position: absolute; inset: 10%; background-size: contain; background-position: center; background-repeat: no-repeat; transition: transform .5s cubic-bezier(.7,0,.2,1); }
.section-product-detail .pd-pack:hover { z-index: 90; }
.section-product-detail .pd-pack:hover .pd-pack-stage { transform: scale(1.7) translateZ(0); transform-origin: center bottom; z-index: 30; box-shadow: 0 26px 52px rgba(0,0,0,0.30); }
.section-product-detail .pd-pack:hover .pd-pack-img { transform: scale(1.04); }
.section-product-detail .pd-pack:hover .pd-pack-label { color: var(--secondary); }
.section-product-detail .pd-pack-label { display: block; margin-top: .7rem; color: var(--text); font-size: .92rem; font-weight: 600; transition: color .3s ease; }
/* Related varieties — float too */
.section-product-detail .pd-related-row { display: grid; justify-content: start; grid-template-columns: repeat(auto-fill, minmax(150px, 165px)); gap: 1.6rem; padding: 3.2rem 2.5rem 0; }
.section-product-detail .pd-rel-card { display: block; text-align: center; position: relative; transition: transform .45s cubic-bezier(.7,0,.2,1); }
.section-product-detail .pd-rel-stage { transform: translateZ(0); backface-visibility: hidden; pointer-events: none; display: block; position: relative; width: 100%; aspect-ratio: 1/0.9; background: #ffffff; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 22px rgba(0,0,0,0.14); transition: transform .45s cubic-bezier(.7,0,.2,1), box-shadow .45s ease; }
.section-product-detail .pd-rel-stage .pd-glow { display: none; }
.section-product-detail .pd-rel-img { position: absolute; inset: 9%; background-size: contain; background-position: center; background-repeat: no-repeat; transition: transform .5s cubic-bezier(.7,0,.2,1); }
.section-product-detail .pd-rel-card:hover { z-index: 90; }
.section-product-detail .pd-rel-card:hover .pd-rel-stage { transform: scale(1.7) translateZ(0); transform-origin: center bottom; z-index: 30; box-shadow: 0 26px 52px rgba(0,0,0,0.30); }
.section-product-detail .pd-rel-card:hover .pd-rel-img { transform: scale(1.04); }
.section-product-detail .pd-rel-name { display: block; margin-top: .8rem; color: var(--white); font-weight: 600; transition: color .3s ease; }
.section-product-detail .pd-rel-card:hover .pd-rel-name { color: var(--secondary); }
.section-product-detail .pd-rel-sub { display: block; color: var(--text-light); font-size: .85rem; }

/* ===== Interactive (radial) product popup =====================================
   The product photo sits at the centre; each size (block.packs) is a "leaf" placed on
   a ring around it (positions computed in the template, up to 8). Clicking a leaf swaps
   the "Available formats" section to that size's compositions (product-modal.js). */
.section-product-detail.pd-interactive .pd-hero { align-items: center; }
.section-product-detail .pd-radial { display: block; }
.section-product-detail .pd-radial-stage { position: relative; width: 100%; max-width: 480px; margin: 0 auto; aspect-ratio: 1 / 1; }
.section-product-detail .pd-radial-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.section-product-detail .pd-radial-lines line { stroke: rgba(20,40,25,0.16); stroke-width: 0.5; stroke-dasharray: 2 2; }
.section-product-detail .pd-radial-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 42%; aspect-ratio: 1/1; background: #fff; border-radius: 50%; box-shadow: 0 16px 40px rgba(0,0,0,0.18); }
.section-product-detail .pd-radial-center .pd-glow { display: none; }
.section-product-detail .pd-radial-img { position: absolute; inset: 14%; background-size: contain; background-position: center; background-repeat: no-repeat; }
/* Leaf: a size chip on the ring. The whole button is centred on its ring point. */
.section-product-detail .pd-leaf { position: absolute; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; gap: .4rem; width: 21%; min-width: 62px; background: none; border: 0; padding: 0; cursor: pointer; z-index: 2; }
.section-product-detail .pd-leaf-img { width: 100%; aspect-ratio: 1/1; background: #fff; border-radius: 50%; box-shadow: 0 8px 20px rgba(0,0,0,0.14); background-size: contain; background-position: center; background-repeat: no-repeat; background-origin: content-box; padding: 14%; transition: transform .35s cubic-bezier(.7,0,.2,1), box-shadow .35s ease; }
.section-product-detail .pd-leaf-label { font-size: .82rem; font-weight: 700; color: var(--text); line-height: 1.1; text-align: center; transition: color .3s ease; }
.section-product-detail .pd-leaf:hover .pd-leaf-img { transform: scale(1.08); box-shadow: 0 14px 28px rgba(0,0,0,0.22); }
.section-product-detail .pd-leaf.is-active .pd-leaf-img { box-shadow: 0 0 0 3px var(--secondary), 0 12px 26px rgba(0,0,0,0.20); }
.section-product-detail .pd-leaf.is-active .pd-leaf-label { color: var(--secondary); }
/* "Available formats" heading shows which size is selected; only the active group renders. */
.section-product-detail .pd-comps-for { color: var(--secondary); font-weight: 700; }
.section-product-detail .pd-comp-group { display: none; }
.section-product-detail .pd-comp-group.is-active { display: block; }
.section-product-detail .pd-comp-empty { color: var(--text-light); padding: 1.2rem 0 .2rem; font-style: italic; }
@media screen and (max-width: 560px) {
  /* Ring is too tight on phones — stack the product photo on top and wrap the leaves. */
  .section-product-detail .pd-radial-stage { aspect-ratio: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; max-width: 100%; }
  .section-product-detail .pd-radial-lines { display: none; }
  .section-product-detail .pd-radial-center { position: static; transform: none; width: min(58%, 220px); margin: 0 auto .6rem; }
  .section-product-detail .pd-leaf { position: static !important; left: auto !important; top: auto !important; transform: none !important; width: 5.2rem; }
}
@media screen and (max-width: 820px){
   .section-product-detail .pd-hero { grid-template-columns: 1fr; }
   .section-product-detail .pd-stage { aspect-ratio: 16/12; max-width: 460px; margin: 0 auto; }
}

/* ====================== Product showcase (stacked families, no tabs) ======= */
.section-product-showcase .ps-head { max-width: 46em; margin-bottom: clamp(2.5rem,5vw,4rem); }
.section-product-showcase .ps-title { color: var(--white); margin-bottom: .5rem; }
.section-product-showcase .ps-intro { color: var(--text-medium); }
.section-product-showcase .ps-family { padding: clamp(2.2rem,4vw,3.5rem) 0; border-top: 1px solid rgba(255,255,255,0.12); scroll-margin-top: 120px; }
.section-product-showcase .ps-family:first-of-type { border-top: none; padding-top: 0; }
.section-product-showcase .ps-fam-head { display: flex; align-items: baseline; gap: 1.3rem; margin-bottom: 2rem; flex-wrap: wrap; }
.section-product-showcase .ps-fam-num { font-family: var(--font-heading, roc-grotesk-wide), sans-serif; font-weight: 800; font-size: clamp(2rem,3.5vw,3rem); line-height: 1; color: rgba(246,102,102,0.35); }
.section-product-showcase .ps-fam-meta { flex: 1; min-width: 240px; }
.section-product-showcase .ps-fam-name { color: var(--white); margin: 0 0 .3rem; font-size: clamp(1.5rem,2.6vw,2.1rem); }
.section-product-showcase .ps-fam-intro { color: var(--text-medium); margin: 0; max-width: 48em; font-size: .96rem; }
.section-product-showcase .ps-fam-count { color: var(--secondary); letter-spacing: .12em; text-transform: uppercase; font-size: .72rem; font-weight: 600; white-space: nowrap; }
/* Centred rows: auto-fill reserved empty columns, so a family with one variety
   (Crunchino) hugged the left edge. Flex-wrap + centre keeps every row balanced. */
/* --cols is set per family (product-showcase.ejs) to the count that avoids a lonely
   leftover card: 5 -> one row of 5, 6 -> 3+3, etc. Cards are capped in width so a
   small row (e.g. 2) does not stretch, and centred. Smaller screens fall back to a
   standard responsive count. */
.section-product-showcase .ps-cards { display: grid; justify-content: center;
   grid-template-columns: repeat(var(--cols, 4), minmax(0, 15em));
   gap: clamp(1.2rem, 2.5vw, 2.4rem); }
.section-product-showcase .ps-card { min-width: 0; }
/* A sub-category is a separate row of cards under the same family, with no title of
   its own — just visual separation: extra top space + a short centred hairline so the
   "mix" group reads as its own cluster below the main varieties, never beside them. */
.section-product-showcase .ps-cards + .ps-cards.ps-subcat { margin-top: clamp(2.2rem, 4vw, 3.4rem); position: relative; }
.section-product-showcase .ps-cards.ps-subcat::before { content: ""; position: absolute; top: calc(clamp(2.2rem, 4vw, 3.4rem) / -2); left: 50%; transform: translateX(-50%); width: min(120px, 40%); height: 2px; border-radius: 2px; background: rgba(255,255,255,0.22); }
@media screen and (max-width: 1080px){ .section-product-showcase .ps-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Products float on the green with a soft spotlight + drop shadow — no boxes */
.section-product-showcase .ps-card { display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; position: relative; transition: transform .45s cubic-bezier(.7,0,.2,1); }
.section-product-showcase .ps-stage { pointer-events: none; display: block; position: relative; width: 100%; aspect-ratio: 1 / 1; margin-bottom: 1.1rem; background: #ffffff; border-radius: 18px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.16); transition: transform .45s cubic-bezier(.7,0,.2,1), box-shadow .45s ease; transform: translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.section-product-showcase .ps-glow { display: none; }
.section-product-showcase .ps-img { position: absolute; inset: 8%; background-size: contain; background-position: center; background-repeat: no-repeat; transition: transform .55s cubic-bezier(.7,0,.2,1); transform: translateZ(0); backface-visibility: hidden; }
.section-product-showcase .ps-card:hover { z-index: 90; }
.section-product-showcase .ps-card:hover .ps-stage { transform: scale(1.9) translateZ(0); transform-origin: center bottom; z-index: 20; box-shadow: 0 32px 60px rgba(0,0,0,0.34); }
.section-product-showcase .ps-card:hover .ps-img { transform: scale(1.04) translateZ(0); }
.section-product-showcase .ps-card-name { margin: 0 0 .8rem; font-size: 1.22rem; }
.section-product-showcase .ps-card-name { color: var(--white); transition: color .3s ease; }
.section-product-showcase .ps-card:hover .ps-card-name { color: var(--secondary); }
.section-product-showcase .ps-chips { list-style: none; margin: 0 0 1.1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; }
.section-product-showcase .ps-chips li { font-size: .76rem; color: var(--text-medium); border: 1px solid rgba(255,255,255,0.22); border-radius: 100px; padding: .28em .85em; }
.section-product-showcase .ps-view { display: inline-flex; align-items: center; gap: .5em; color: var(--secondary); font-weight: 600; transition: gap .3s ease; }
.section-product-showcase .ps-card:hover .ps-view { gap: .85em; }
.section-product-showcase .ps-view svg { transform: rotate(180deg); }
@media screen and (max-width: 700px){ .section-product-showcase .ps-cards { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.4rem; } }
@media screen and (max-width: 420px){ .section-product-showcase .ps-cards { grid-template-columns: 1fr; } }

/* ====================== Certifications (modern credentials grid) =========== */
.section-certs .certs-head { max-width: 50em; margin: 0 auto clamp(2.5rem,5vw,4rem); text-align: center; }
.section-certs .certs-eyebrow { color: var(--secondary); letter-spacing: .2em; text-transform: uppercase; font-size: .72rem; margin-bottom: .9rem; }
.section-certs .certs-title { color: var(--white); margin-bottom: 1rem; }
.section-certs .certs-text { color: var(--text-medium); }
.section-certs .certs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.4rem; max-width: 1100px; margin: 0 auto; }
.section-certs .cert-tile { display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.section-certs .cert-logo {
   display: block; width: 100%; aspect-ratio: 3/2; background-color: #ffffff; border-radius: 14px;
   background-repeat: no-repeat; background-position: center center; background-size: contain;
   background-origin: content-box; padding: 13% 15%;
   transition: transform .4s cubic-bezier(.7,0,.2,1), box-shadow .4s ease;
}
.section-certs .cert-tile:hover .cert-logo { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(0,0,0,0.22); }
.section-certs .cert-name { color: var(--text-medium); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; text-align: center; transition: color .3s ease; }
.section-certs .cert-tile:hover .cert-name { color: var(--secondary); }
@media screen and (max-width: 540px){ .section-certs .certs-grid { grid-template-columns: 1fr 1fr; gap: 1rem; } }

/* ------------------------- Disable product hover-zoom on touch / small screens -------------------------------------------------- */
@media (hover: none), (pointer: coarse), (max-width: 900px) {
  .section-product-detail .pd-pack:hover .pd-pack-stage,
  .section-product-detail .pd-pack:hover .pd-pack-img,
  .section-product-detail .pd-rel-card:hover .pd-rel-stage,
  .section-product-detail .pd-rel-card:hover .pd-rel-img,
  .section-product-showcase .ps-card:hover .ps-stage,
  .section-product-showcase .ps-card:hover .ps-img { transform: none !important; z-index: auto !important; }
}

/* ------------------------- Blocks Demo page -------------------------------------------------- */
#blocks-demo .section-demo-menu { padding-top: clamp(7rem, 12vh, 11rem); }
#blocks-demo .demo-h1 { color: var(--white); margin: 0 0 .4rem; }
#blocks-demo .demo-lead { color: var(--text-medium); max-width: 46em; margin: 0 0 1.6rem; }
#blocks-demo .demo-toc { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
#blocks-demo .demo-toc a { display: inline-block; color: var(--secondary); border: 1px solid rgba(255,255,255,0.2); border-radius: 100px; padding: .3em .9em; font-size: .82rem; font-weight: 600; transition: background .2s ease, color .2s ease; }
#blocks-demo .demo-toc a:hover { background: var(--secondary); color: var(--white); }
#blocks-demo .demo-block { scroll-margin-top: 90px; border-top: 2px dashed rgba(255,255,255,0.18); }
#blocks-demo .demo-bar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem clamp(1rem,4vw,3rem); background: var(--primary-dark, #0a3d27); border-bottom: 1px solid rgba(255,255,255,0.12); }
#blocks-demo .demo-bar-name { color: var(--white); font-weight: 700; font-family: var(--font-heading, roc-grotesk-wide), sans-serif; letter-spacing: .02em; }
#blocks-demo .demo-bar-back { color: var(--secondary); font-weight: 600; font-size: .85rem; }
#blocks-demo .demo-err { color: var(--secondary); padding: 2rem 0; }

/* ------------------------- Job application form -------------------------------------------------- */
.section-apply { padding: clamp(2.5rem,6vw,5rem) 0; }
.section-apply .apply-head { margin-bottom: 1.6rem; }
.section-apply .apply-head h2 { color: var(--white); margin: .2rem 0 .4rem; }
.section-apply .apply-form { max-width: 720px; }
.section-apply .apply-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.section-apply .apply-form input[type=text], .section-apply .apply-form input[type=email],
.section-apply .apply-form input[type=tel], .section-apply .apply-form input[type=url],
.section-apply .apply-form textarea { width: 100%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18); border-radius: 10px; color: var(--white); padding: .85em 1em; font: inherit; }
.section-apply .apply-form textarea { width: 100%; margin-bottom: 1rem; resize: vertical; }
.section-apply .apply-form ::placeholder { color: var(--text-medium); }
.apply-file { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.2rem; }
.apply-file .apply-file-label { color: var(--text-medium); font-size: .85rem; }
.apply-file input[type=file] { color: var(--white); font: inherit; }
.apply-file input[type=file]::file-selector-button { background: rgba(255,255,255,0.1); color: var(--white); border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; padding: .5em 1em; margin-right: .8em; cursor: pointer; font: inherit; }
.section-apply .apply-submit { background: var(--secondary); color: var(--white); border: none; border-radius: 100px; padding: .85em 2em; font-weight: 600; cursor: pointer; transition: background .2s ease; }
.section-apply .apply-submit:hover { background: var(--secondary-dark, #c8351f); }
.apply-status { margin-bottom: 1.2rem; padding: .9em 1.2em; border-radius: 10px; font-weight: 600; }
.apply-status.ok { background: rgba(14,82,52,0.5); border: 1px solid var(--primary-light, #2e7d52); color: #d6f5e4; }
.apply-status.err { background: rgba(229,64,44,0.15); border: 1px solid var(--secondary); color: #ffd9d2; }
@media screen and (max-width: 700px){ .section-apply .apply-grid { grid-template-columns: 1fr; } }

/* ------------------------- Certifications marquee -------------------------------------------------- */
.section-certs.is-marquee .certs-marquee { position: relative; overflow: hidden; width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
.section-certs.is-marquee .certs-track { display: flex; gap: clamp(1rem, 2vw, 1.9rem); width: max-content; padding: 1.4rem clamp(1rem, 2vw, 1.9rem); animation: certMarquee 45s linear infinite; will-change: transform; }
.section-certs.is-marquee .certs-marquee:hover .certs-track,
.section-certs.is-marquee .certs-marquee:focus-within .certs-track { animation-play-state: paused; }
@keyframes certMarquee { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } } /* left → right */
.section-certs.is-marquee .cert-card { flex: 0 0 auto; width: clamp(150px, 16vw, 200px); display: flex; flex-direction: column; align-items: center; gap: .85rem; transition: transform .35s cubic-bezier(.7,0,.2,1); }
.section-certs.is-marquee .cert-card .cert-logo { transition: transform .35s cubic-bezier(.7,0,.2,1), box-shadow .35s ease; }
.section-certs.is-marquee .cert-card:hover { transform: scale(1.06); }
.section-certs.is-marquee .cert-card:hover .cert-logo { box-shadow: 0 0 0 1px rgba(14,82,52,0.22), 0 14px 34px rgba(14,82,52,0.30), 0 0 26px rgba(14,82,52,0.22); }
.section-certs.is-marquee .cert-card:hover .cert-name { color: var(--secondary); }
@media (prefers-reduced-motion: reduce) {
  .section-certs.is-marquee .certs-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; max-width: 1100px; margin: 0 auto; }
}

/* ------------------------- Reusable image gallery (pw-gallery) -------------------------------------------------- */
.pw-gallery { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.pw-gallery-track { position: absolute; inset: 0; }
.pw-gallery-slide { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat;
  opacity: 0; transform: scale(1.04); transition: opacity 1s ease; will-change: opacity, transform; }
.pw-gallery-slide.is-active { opacity: 1; z-index: 1; animation: pwKenBurns 7s ease-out both; }
@keyframes pwKenBurns { from { transform: scale(1.04) translate3d(0,0,0); } to { transform: scale(1.13) translate3d(-1.6%, -1.2%, 0); } }
/* nav arrows — hidden until hover, soft fade-in */
.pw-gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%; background: rgba(255,255,255,0.82); color: var(--primary, #0E5234); font-size: 1.5rem; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity .35s ease, background .25s ease, transform .25s ease; box-shadow: 0 6px 18px rgba(0,0,0,0.18); }
.pw-gallery-prev { left: 12px; } .pw-gallery-next { right: 12px; }
.pw-gallery:hover .pw-gallery-nav, .pw-gallery:focus-within .pw-gallery-nav { opacity: 1; }
.pw-gallery-nav:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
@media (hover: none) { .pw-gallery-nav { display: none; } } /* touch uses swipe */
@media (prefers-reduced-motion: reduce) {
  .pw-gallery-slide { transition: opacity .4s ease; transform: none; }
  .pw-gallery-slide.is-active { animation: none; transform: none; }
}

/* ------------------------- Falling peppers hero animation -------------------------------------------------- */
.pw-fall { position: absolute; inset: 0; transform: translate(13%, 8%); }
/* Each layer is the full 1512x1040 canvas; object-position pushes the composition
   to the right half (text sits on the left). A layered drop-shadow grounds each
   pepper: a tight contact shadow + a softer cast shadow. */
/* The shadows are BAKED INTO the images now. They used to be two runtime
   drop-shadow blurs on nine full-screen layers, re-computed every frame — the main
   cause of the lag. will-change is dropped once the peppers have settled, so the
   browser can release nine large GPU layers instead of holding them forever. */
.pw-fall-pep { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: right bottom;
  will-change: transform; }
.pw-fall.is-settled .pw-fall-pep { will-change: auto; }
/* Desktop: extend the fall panel to the very bottom edge so the peppers land on
   the bottom of the screen (only the fall hero, so other v2 heroes are untouched). */
@media (min-width: 701px) {
  .comp-header.v2 .video-bg.pw-fall-bg {
    height: calc((var(--vh, 1vh) * 100) - (var(--nav-padding) + (2 * var(--viewport-padding))));
  }
}
@media (max-width: 700px) { .pw-fall { transform: none; } .pw-fall-pep { object-position: center bottom; } }
@media (prefers-reduced-motion: reduce) { .pw-fall-pep { transform: none !important; } }

/* =========================== One Vision / R&D page blocks ============================ */

/* --- Gallery grid (modern image grid, hover zoom, caption on hover) --- */
.section-gallery-grid .gg-head { max-width: 52em; margin-bottom: 2em; }
.section-gallery-grid .gg-head .fc-eyebrow { color: var(--secondary); margin-bottom: 0.4em; }
.section-gallery-grid .gg-head .fc-title { margin-bottom: 0.4em; }
.section-gallery-grid .gg-head .fc-intro { color: var(--text-medium); }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2em; }
.gallery-item { position: relative; margin: 0; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3; }
.gallery-item-img { position: absolute; inset: 0; }
.gallery-item-img .overlay-image { top: 0; left: 0; width: 100%; height: 100%; transition: transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94); }
.gallery-item:hover .gallery-item-img .overlay-image { transform: scale(1.07) rotate(0.001deg); }
.gallery-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6em 1.2em 1.1em; margin: 0; color: var(--white); font-size: 0.9em;
   background: linear-gradient(to top, rgba(6,41,27,0.9) 0%, rgba(6,41,27,0) 100%); opacity: 0; transform: translateY(10px); transition: var(--animation-primary); }
.gallery-item:hover .gallery-cap { opacity: 1; transform: none; }
@media screen and (max-width: 900px){ .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 600px){ .gallery-grid { grid-template-columns: 1fr; } }

/* --- Call to action --- */
.section-cta { position: relative; overflow: hidden; text-align: center; }
.section-cta .cta-bg { position: absolute; inset: 0; z-index: 0; }
/* Overscan so the .overlay-image.animate parallax (yPercent:15 in main.js) never
   reveals an empty strip at the top/bottom of the band as it scrolls. */
.section-cta .cta-bg .overlay-image { top: -20%; left: 0; width: 100%; height: 140%; }
.section-cta .cta-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,41,27,0.82) 0%, rgba(6,41,27,0.94) 100%); }
.section-cta .container { position: relative; z-index: 1; }
.section-cta .cta-inner { max-width: 42em; margin: 0 auto; align-items: center; text-align: center; }
.section-cta .fc-eyebrow { color: var(--secondary); margin-bottom: 0.5em; }
.section-cta .cta-title { color: var(--white); margin-bottom: 0.5em; }
.section-cta .cta-text { color: rgba(255,255,255,0.82); margin: 0 auto 2em; max-width: 34em; }
.section-cta .cta-buttons { display: flex; gap: 1em; flex-wrap: wrap; justify-content: center; }

/* --- CTA text alignment (center is the default; left/right push the copy to a side) --- */
.section-cta.cta-align-left  { text-align: left; }
.section-cta.cta-align-right { text-align: right; }
.section-cta.cta-align-left  .cta-inner   { margin-left: 0; margin-right: auto; align-items: flex-start; text-align: left; }
.section-cta.cta-align-right .cta-inner    { margin-left: auto; margin-right: 0; align-items: flex-end; text-align: right; }
.section-cta.cta-align-left  .cta-text,
.section-cta.cta-align-right .cta-text     { margin-left: 0; margin-right: 0; }
.section-cta.cta-align-left  .cta-buttons  { justify-content: flex-start; }
.section-cta.cta-align-right .cta-buttons   { justify-content: flex-end; }

/* --- CTA image on the OPPOSITE side of the text (a split panel, not a full background) ---
   The copy stays ink on paper (the section is NOT .has-bg here), and the image occupies the
   half away from the text. The container is centred, so its half-line sits on the section's
   centre = the image's inner edge — capping the copy at ~46% keeps it clear of the image. */
.section-cta.cta-img-side .cta-bg        { top: 0; bottom: 0; width: 48%; }
.section-cta.cta-img-side.cta-align-left  .cta-bg { left: auto; right: 0; }   /* text left  → image right */
.section-cta.cta-img-side.cta-align-right .cta-bg { right: auto; left: 0; }    /* text right → image left  */
/* The generic .container carries a ~10em gutter, which on this split layout left a wide
   empty band beside the copy and squeezed it into a tall, cramped column. The image
   already fills the outer half, so drop the oversized gutter and let the copy run from a
   comfortable margin up to just short of the image — wider and shorter, less towering. */
.section-cta.cta-img-side .container     { max-width: none; padding-left: clamp(1.5rem, 6vw, 6rem); padding-right: 0; }
.section-cta.cta-img-side.cta-align-right .container { padding-left: 0; padding-right: clamp(1.5rem, 6vw, 6rem); }
.section-cta.cta-img-side .cta-inner     { max-width: 46%; }
.section-cta.cta-img-side .cta-title     { font-size: clamp(1.9rem, 3.1vw, 3rem); line-height: 1.1; }
/* Natural transition where the image meets the paper: instead of a coloured overlay (which
   read as a green seam), MASK the image so its inner edge dissolves to transparent and the
   page background (cream + watermark) shows through — no colour, no hard border. */
.section-cta.cta-img-side .cta-overlay              { background: none; }
.section-cta.cta-img-side.cta-align-left  .cta-bg  { -webkit-mask: linear-gradient(to right, transparent 0%, #000 16%); mask: linear-gradient(to right, transparent 0%, #000 16%); }
.section-cta.cta-img-side.cta-align-right .cta-bg  { -webkit-mask: linear-gradient(to left,  transparent 0%, #000 16%); mask: linear-gradient(to left,  transparent 0%, #000 16%); }
/* the decorative people are for the empty-side layout; they'd collide with a side image */
.section-cta.cta-img-side .cta-person    { display: none; }

/* Split panel stacks on small screens: image becomes a band on top, text centred below.
   The .cta-bg selectors carry the align class so they out-specify the desktop
   left:auto/right:0 rules above (otherwise the band keeps left:auto+width:auto and
   collapses to zero width — no image). */
@media screen and (max-width: 820px) {
   .section-cta.cta-img-side              { padding-top: calc(40vh + 1.6rem); }
   .section-cta.cta-img-side.cta-align-left  .cta-bg,
   .section-cta.cta-img-side.cta-align-right .cta-bg { left: 0; right: 0; width: auto; top: 0; bottom: auto; height: 40vh;
      -webkit-mask: linear-gradient(to bottom, #000 70%, transparent 100%); mask: linear-gradient(to bottom, #000 70%, transparent 100%); }
   .section-cta.cta-img-side .cta-overlay { background: none; }
   .section-cta.cta-img-side .container,
   .section-cta.cta-img-side.cta-align-right .container { padding-left: clamp(1.5rem, 5vw, 3rem); padding-right: clamp(1.5rem, 5vw, 3rem); }
   .section-cta.cta-img-side .cta-inner   { max-width: 100%; margin: 0 auto; align-items: center; text-align: center; }
   .section-cta.cta-img-side .cta-text    { margin-left: auto; margin-right: auto; }
   .section-cta.cta-img-side .cta-buttons { justify-content: center; }
}
/* Optional decorative PNG people standing in the empty side areas. Behind the text
   (z:0, container is z:1), anchored to the bottom edge, shown on desktop only. If no
   image is set the elements aren't rendered at all, so the CTA looks exactly as before. */
.section-cta .cta-person { position: absolute; bottom: 0; z-index: 0; height: clamp(320px, 46vw, 660px); max-height: 96%; width: auto; max-width: 30%; object-fit: contain; object-position: bottom center; pointer-events: none; user-select: none; }
.section-cta .cta-person-left { left: clamp(0px, 1.5vw, 2.5rem); }
.section-cta .cta-person-right { right: clamp(0px, 1.5vw, 2.5rem); }
@media screen and (max-width: 1120px){ .section-cta .cta-person { display: none; } }

/* --- Variety showcase (sticky-scroll storytelling, deliberately NOT the products grid) --- */
.section-variety-showcase { padding-top: var(--section-padding); padding-bottom: var(--section-padding); }
.section-variety-showcase .vs-head { max-width: 52em; margin-bottom: 1em; }
.section-variety-showcase .vs-head .fc-eyebrow { color: var(--secondary); margin-bottom: 0.4em; }
.section-variety-showcase .vs-head .fc-intro { color: var(--text-medium); }
.vs-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 4em; align-items: start; min-height: 100vh; }
.vs-panel.image-right .vs-media { order: 2; }
.vs-media { position: -webkit-sticky; position: sticky; top: 0; height: 100vh; display: flex; align-items: center; }
.vs-media-inner { position: relative; width: 100%; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,0.32); }
.vs-media-inner .overlay-image { top: 0; left: 0; width: 100%; height: 100%; }
.vs-text { padding: 40vh 0; max-width: 32em; }
.vs-index { display: block; font-family: var(--font-heading); font-size: 3.2em; line-height: 1; color: var(--secondary); opacity: 0.85; margin-bottom: 0.2em; }
.vs-label { display: inline-block; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8em; color: var(--secondary); margin-bottom: 0.8em; }
.vs-name { font-size: 2.5em; line-height: 1.05; margin: 0 0 0.5em; color: var(--white); }
.vs-def { color: var(--text-medium); font-size: 1.05em; }
@media screen and (max-width: 900px){
   .vs-panel { grid-template-columns: 1fr; min-height: auto; gap: 1.2em; margin-bottom: 3em; }
   .vs-panel.image-right .vs-media { order: 0; }
   .vs-media { position: static; height: auto; }
   .vs-media-inner { aspect-ratio: 3 / 2; }
   .vs-text { padding: 0.5em 0 1em; }
}

/* --- Big-image caption --- */
.comp-big-image .big-image-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2em 1.6em 1.4em; color: var(--white);
   font-size: 0.95em; background: linear-gradient(to top, rgba(6,41,27,0.82) 0%, rgba(6,41,27,0) 100%); }

/* =========================== Farms / Who-moves / Impact / News blocks ============================ */

/* --- Marquee gallery (continuous horizontal scroll, no duplicated images) --- */
.section-marquee-gallery .mg-head { max-width: 52em; margin-bottom: 1.6em; }
.section-marquee-gallery .mg-head .fc-eyebrow { color: var(--secondary); margin-bottom: 0.4em; }
.section-marquee-gallery .mg-head .fc-intro { color: var(--text-medium); }
.mg-marquee { width: 100%; overflow: hidden; }
.mg-track { display: flex; gap: 1.2em; width: max-content; will-change: transform; }
.mg-item { flex: 0 0 auto; width: 30vw; max-width: 440px; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; position: relative; }
.mg-item .overlay-image { top: 0; left: 0; width: 100%; height: 100%; transition: transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94); }
.mg-item:hover .overlay-image { transform: scale(1.05); }
@media screen and (max-width: 700px){ .mg-item { width: 70vw; } }

/* --- gallery-grid: minimal / centered variant (R&D) --- */
.section-gallery-grid.gg-minimal .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 1.6em; max-width: 60em; margin: 0 auto; }
.section-gallery-grid.gg-minimal .gg-head { text-align: center; margin-left: auto; margin-right: auto; }
.section-gallery-grid.gg-minimal .gallery-item { aspect-ratio: 3 / 2; }
.section-gallery-grid.gg-minimal .gallery-item .overlay-image { transition: transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94); }
.section-gallery-grid.gg-minimal .gallery-item:hover .overlay-image { transform: scale(1.06); }
@media screen and (max-width: 700px){ .section-gallery-grid.gg-minimal .gallery-grid { grid-template-columns: 1fr; } }

/* --- image-split compact variant (Who Moves Our Peppers: small text + medium photo) --- */
.comp-image-split.is-compact .container .row { align-items: center; }
.comp-image-split.is-compact .image-wrap { max-width: 36em; margin: 0 auto; border-radius: 14px; overflow: hidden; }
.comp-image-split.is-compact .flex-col { transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94); }
.reveal-armed.comp-image-split.is-compact .flex-col { opacity: 0; transform: translateY(34px); }
.reveal-armed.comp-image-split.is-compact .flex-col.reveal-in { opacity: 1; transform: none; }

/* --- video block: centered / focal variant --- */
.section-video-block.is-centered .video-frame { max-width: 60em; margin-left: auto; margin-right: auto; }
.section-video-block.is-centered .video-block-head { text-align: center; }

/* --- Editorial grid (Our Impact: article + asymmetrical image grid, layout variants) --- */
.section-editorial-grid .eg-row { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 3.5em; align-items: center; }
.section-editorial-grid .eg-row.image-right .eg-text { order: 1; }
.section-editorial-grid .eg-row.image-right .eg-grid { order: 2; }
.section-editorial-grid .eg-text { max-width: 30em; }
.section-editorial-grid .eg-title { margin-bottom: 0.6em; }
.section-editorial-grid .eg-body { color: var(--text-medium); }
.section-editorial-grid .eg-btn-wrap { margin-top: 1.6em; }
.section-editorial-grid .eg-grid { display: grid; gap: 1em; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; }
.section-editorial-grid .eg-img { position: relative; margin: 0; border-radius: 12px; overflow: hidden; }
.section-editorial-grid .eg-img .overlay-image { top: 0; left: 0; width: 100%; height: 100%; transition: transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94); }
.section-editorial-grid .eg-img:hover .overlay-image { transform: scale(1.05); }
/* layout A: tall left, two stacked right */
.eg-grid-a { grid-template-columns: 1.2fr 0.8fr; }
.eg-grid-a .eg-img-1 { grid-row: span 2; }
/* layout B: big top-right, small bottom-left staggered */
.eg-grid-b .eg-img-2 { grid-column: span 2; }
/* layout C: even 2x2 with first spanning full width */
.eg-grid-c .eg-img-1 { grid-column: span 2; }
.section-editorial-grid .eg-img-1 { min-height: 14em; }
.section-editorial-grid .eg-img-2, .section-editorial-grid .eg-img-3, .section-editorial-grid .eg-img-4 { min-height: 11em; }
@media screen and (max-width: 900px){
   .section-editorial-grid .eg-row, .section-editorial-grid .eg-row.image-right .eg-text, .section-editorial-grid .eg-row.image-right .eg-grid { grid-template-columns: 1fr; order: 0; }
   .section-editorial-grid .eg-row { gap: 1.6em; }
}

/* --- News grid (What's New: editorial cards + load more) --- */
.section-news-grid .ng-head { max-width: 52em; margin-bottom: 2em; }
.section-news-grid .ng-head .fc-eyebrow { color: var(--secondary); margin-bottom: 0.4em; }
.section-news-grid .ng-head .fc-intro { color: var(--text-medium); }
.news-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2em; }
.news-card { transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
.news-card.news-hidden { display: none; }
.news-card a { text-decoration: none; color: inherit; display: block; }
.news-card:hover { transform: translateY(-5px); }
.news-card-img { position: relative; width: 100%; aspect-ratio: 3 / 2; border-radius: 12px; overflow: hidden; margin-bottom: 1em; }
.news-card-img .overlay-image { top: 0; left: 0; width: 100%; height: 100%; transition: transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94); }
.news-card:hover .news-card-img .overlay-image { transform: scale(1.06); }
.news-card-label { display: inline-block; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.78em; color: var(--secondary); margin-bottom: 0.5em; }
.news-card-body h3 { color: var(--white); margin: 0 0 0.4em; font-size: 1.2em; }
.news-card-excerpt { color: var(--text-medium); margin: 0 0 0.6em; font-size: 0.95em; }
.news-card-read { color: var(--secondary); font-size: 0.9em; }
.news-more-wrap { display: flex; justify-content: center; margin-top: 2.5em; }
@media screen and (max-width: 1000px){ .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 640px){ .news-grid { grid-template-columns: 1fr; } }

/* When a page OPENS directly with a story-split (no hero), the bright photo runs
   under the fixed white logo/menu and makes them hard to read. Add a soft on-brand
   top scrim only in that case. Hero-first pages already have a dark overlay and are
   untouched (this matches only a story-split that is the page's first section). */
.main-wrap-inside > .section-story-split:first-of-type::before {
   content: ""; position: absolute; top: 0; left: 0; right: 0; height: 170px; z-index: 6;
   pointer-events: none;
   background: linear-gradient(to bottom, rgba(6,41,27,0.62) 0%, rgba(6,41,27,0.28) 45%, rgba(6,41,27,0) 100%);
}

/* --- Variety carousel (R&D: two rows moving opposite directions + lightbox) --- */
.section-variety-carousel .vc-head { max-width: 52em; margin-bottom: 1.8em; }
.section-variety-carousel .vc-head .fc-eyebrow { color: var(--secondary); margin-bottom: 0.4em; }
.section-variety-carousel .vc-head .fc-intro { color: var(--text-medium); }
.vc-marquee + .vc-marquee { margin-top: 1.2em; }
.vc-card.mg-item { position: relative; width: 26vw; max-width: 360px; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; cursor: pointer; }
.vc-card .vc-card-link { display: block; position: absolute; inset: 0; text-decoration: none; color: inherit; }
.vc-card .overlay-image { top: 0; left: 0; width: 100%; height: 100%; transition: transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94); }
.vc-card:hover .overlay-image { transform: scale(1.06); }
.vc-card-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.8em 1.2em 1.1em; color: var(--white);
   background: linear-gradient(to top, rgba(6,41,27,0.92) 0%, rgba(6,41,27,0) 100%); }
.vc-card-label { display: block; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72em; color: var(--secondary); margin-bottom: 0.2em; }
.vc-card-name { display: block; font-size: 1.2em; line-height: 1.15; }
.vc-card-count { display: block; font-size: 0.74em; opacity: 0.82; margin-top: 0.3em; }
.vc-card-extra { display: none; }
@media screen and (max-width: 700px){ .vc-card.mg-item { width: 66vw; } }

/* image-split: optional video play button on the image (like the stats block) */
.comp-image-split .image-wrap { position: relative; }
.comp-image-split .image-wrap .is-play { display: flex; align-items: center; justify-content: center; background: rgba(6,41,27,0); transition: var(--animation-primary); z-index: 3; }
.comp-image-split .image-wrap .is-play:hover { background: rgba(6,41,27,0.28); }
.comp-image-split .image-wrap .is-play svg { width: 96px; height: 96px; transition: transform 0.3s cubic-bezier(0.25,0.46,0.45,0.94); }
.comp-image-split .image-wrap .is-play:hover svg { transform: scale(1.07); }
@media screen and (max-width: 700px){ .comp-image-split .image-wrap .is-play svg { width: 72px; height: 72px; } }

/* =========================== R&D page blocks (research-areas / variety-cards / step-plan / tech-facilities) === */

/* The default section padding is very large; give the R&D blocks a tighter
   medium rhythm and let the "Spacer" block add controlled gaps between them. */
.section-research-areas, .section-variety-cards, .section-step-plan, .section-tech-facilities {
   padding-top: var(--section-padding-medium); padding-bottom: var(--section-padding-medium);
}

/* --- Research areas: intro + icon cards --- */
.section-research-areas .ra-row { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 3em; align-items: start; }
.section-research-areas .ra-intro { max-width: 27em; }
.section-research-areas .ra-intro .fc-eyebrow { color: var(--secondary); margin-bottom: 0.5em; }
.section-research-areas .ra-body { color: var(--text-medium); margin: 0.6em 0 1.6em; }
.section-research-areas .ra-cards-eyebrow { color: var(--secondary); margin-bottom: 1.4em; }
.section-research-areas .ra-cards { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1.1em; }
.section-research-areas .ra-card { text-align: center; }
.section-research-areas .ra-icon { width: 62px; height: 62px; margin: 0 auto 0.9em; border-radius: 50%; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.04); display: flex; align-items: center; justify-content: center; color: var(--secondary); }
.section-research-areas .ra-icon svg { width: 28px; height: 28px; }
.section-research-areas .ra-card h3 { color: var(--white); font-size: 1em; margin: 0 0 0.4em; }
.section-research-areas .ra-card p { color: var(--text-medium); font-size: 0.85em; margin: 0; }
@media screen and (max-width: 900px){ .section-research-areas .ra-row { grid-template-columns: 1fr; gap: 2em; } }
@media screen and (max-width: 640px){ .section-research-areas .ra-cards { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); grid-auto-columns: auto; gap: 1.6em; } }

/* --- Variety cards: arrow carousel --- */
.section-variety-cards .vc2-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1em; flex-wrap: wrap; margin-bottom: 1.8em; }
.section-variety-cards .vc2-head .fc-eyebrow { color: var(--secondary); margin-bottom: 0.3em; }
.section-variety-cards .vc2-viewall { color: var(--secondary); text-decoration: none; white-space: nowrap; }
.section-variety-cards .vc2-carousel { position: relative; }
.section-variety-cards .vc2-track { display: flex; gap: 1em; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 0 0 0.4em; scroll-padding-left: 0; scrollbar-width: none; -ms-overflow-style: none; }
.section-variety-cards .vc2-card:first-child { scroll-snap-align: start; }
.section-variety-cards .vc2-track::-webkit-scrollbar { display: none; }
.section-variety-cards .vc2-card { flex: 0 0 auto; width: 250px; scroll-snap-align: start; }
.section-variety-cards .vc2-card-img { display: block; position: relative; width: 100%; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: var(--primary-dark); cursor: zoom-in; }
.section-variety-cards .vc2-card-img .overlay-image { top: 0; left: 0; width: 100%; height: 100%; transition: transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94); }
.section-variety-cards .vc2-card:hover .vc2-card-img .overlay-image { transform: scale(1.06); }
.section-variety-cards .vc2-zoom { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.8); width: 48px; height: 48px; border-radius: 50%; background: rgba(6,41,27,0.55); display: flex; align-items: center; justify-content: center; opacity: 0; transition: var(--animation-primary); }
.section-variety-cards .vc2-card-img:hover .vc2-zoom { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.section-variety-cards .vc2-count { position: absolute; left: 0.7em; bottom: 0.7em; background: rgba(6,41,27,0.7); color: #fff; font-size: 0.7em; padding: 0.25em 0.6em; border-radius: 999px; }
.section-variety-cards .vc2-extra { display: none; }
.section-variety-cards .vc2-card-body { padding: 1em 0.15em 0; }
.section-variety-cards .vc2-cat { display: block; color: var(--secondary); font-size: 0.76em; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.2em; }
.section-variety-cards .vc2-card-body h3 { color: var(--white); font-size: 1.15em; margin: 0 0 0.4em; }
.section-variety-cards .vc2-detail { color: var(--text-medium); font-size: 0.9em; text-decoration: none; }
.section-variety-cards .vc2-detail:hover { color: var(--secondary); }
.section-variety-cards .vc2-arrow { position: absolute; top: 38%; transform: translateY(-50%); z-index: 4; width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--secondary); color: #fff; font-size: 1.5em; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,0.28); }
.section-variety-cards .vc2-prev { left: 1em; } .section-variety-cards .vc2-next { right: 1em; }
.section-variety-cards .vc2-arrow:hover { filter: brightness(1.08); }
@media screen and (max-width: 700px){ .section-variety-cards .vc2-arrow { display: none; } .section-variety-cards .vc2-card { width: 72vw; } }

/* --- Step plan: connected timeline (images + a line running through numbered nodes) --- */
.section-step-plan .sp-intro { max-width: 40em; margin-bottom: 2.8em; }
.section-step-plan .sp-intro .fc-eyebrow { color: var(--secondary); margin-bottom: 0.5em; }
.section-step-plan .sp-body { color: var(--text-medium); margin: 0.6em 0 1.6em; }
.section-step-plan .sp-steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1.4em; }
.section-step-plan .sp-step { display: flex; flex-direction: column; text-align: center; }
.section-step-plan .sp-step-img { position: relative; width: 100%; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; }
.section-step-plan .sp-step-img .overlay-image { top: 0; left: 0; width: 100%; height: 100%; transition: transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94); }
.section-step-plan .sp-step:hover .sp-step-img .overlay-image { transform: scale(1.05); }
/* the connecting line + node */
.section-step-plan .sp-marker { position: relative; height: 3.4em; display: flex; align-items: center; justify-content: center; }
.section-step-plan .sp-marker::before, .section-step-plan .sp-marker::after { content: ""; position: absolute; top: 50%; height: 2px; background: rgba(255,255,255,0.18); }
.section-step-plan .sp-marker::before { left: -0.7em; right: calc(50% + 1.7em); }
.section-step-plan .sp-marker::after { left: calc(50% + 1.7em); right: -0.7em; }
.section-step-plan .sp-step:first-child .sp-marker::before { display: none; }
.section-step-plan .sp-step:last-child .sp-marker::after { display: none; }
.section-step-plan .sp-num { position: relative; z-index: 2; width: 3.2em; height: 3.2em; border-radius: 50%; background: var(--secondary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.92em; box-shadow: 0 6px 16px rgba(0,0,0,0.32); border: 4px solid var(--primary); }
.section-step-plan .sp-step-txt h3 { color: var(--white); font-size: 1.02em; margin: 0 0 0.35em; }
.section-step-plan .sp-step-txt p { color: var(--text-medium); font-size: 0.86em; margin: 0; }
@media screen and (max-width: 760px){
   .section-step-plan .sp-steps { grid-auto-flow: row; grid-template-columns: 1fr; gap: 1.6em; max-width: 24em; margin: 0 auto; }
   .section-step-plan .sp-step { flex-direction: row; align-items: center; gap: 1em; text-align: left; }
   .section-step-plan .sp-step-img { width: 34%; flex: 0 0 34%; aspect-ratio: 1 / 1; }
   .section-step-plan .sp-marker { height: auto; width: auto; }
   .section-step-plan .sp-marker::before, .section-step-plan .sp-marker::after { display: none; }
   .section-step-plan .sp-num { width: 2.6em; height: 2.6em; font-size: 0.85em; }
   .section-step-plan .sp-step-txt { flex: 1; }
}

/* --- Tech & facilities: dark bg + icon items --- */
.section-tech-facilities { position: relative; overflow: hidden; }
.section-tech-facilities .tf-bg { position: absolute; inset: 0; z-index: 0; }
.section-tech-facilities .tf-bg .overlay-image { top: 0; left: 0; width: 100%; height: 100%; }
.section-tech-facilities .tf-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,41,27,0.9) 0%, rgba(6,41,27,0.95) 100%); }
.section-tech-facilities .container { position: relative; z-index: 1; }
.section-tech-facilities .tf-head { max-width: 40em; margin-bottom: 2.6em; }
.section-tech-facilities .tf-head .fc-eyebrow { color: var(--secondary); margin-bottom: 0.5em; }
.section-tech-facilities .tf-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2.2em; }
.section-tech-facilities .tf-icon { width: 52px; height: 52px; color: var(--secondary); margin-bottom: 1em; display: flex; align-items: center; }
.section-tech-facilities .tf-icon svg { width: 40px; height: 40px; }
.section-tech-facilities .tf-item h3 { color: var(--white); font-size: 1.1em; margin: 0 0 0.4em; }
.section-tech-facilities .tf-item p { color: rgba(255,255,255,0.72); font-size: 0.9em; margin: 0; }

/* reveal for the new R&D grids */
.reveal-armed .ra-card, .reveal-armed .sp-step, .reveal-armed .tf-item {
   opacity: 0; transform: translateY(28px);
   transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.34, 1.4, 0.64, 1); will-change: opacity, transform;
}
.reveal-armed .ra-card.reveal-in, .reveal-armed .sp-step.reveal-in, .reveal-armed .tf-item.reveal-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal-armed .ra-card, .reveal-armed .sp-step, .reveal-armed .tf-item { opacity: 1; transform: none; transition: none; } }

/* --- Spacer block: controllable gap (responsive; uses the site's section-padding scale) --- */
.section-spacer { width: 100%; }
.section-spacer.spacer-tiny   { height: var(--section-padding-tiny); }
.section-spacer.spacer-small  { height: var(--section-padding-small); }
.section-spacer.spacer-medium { height: var(--section-padding-medium); }
.section-spacer.spacer-large  { height: var(--section-padding); }
.section-spacer.spacer-xlarge { height: var(--section-padding-big); }

/* Poster-only hero (no video): the default hero overlay is tuned for a bright,
   moving video and washes out a static fallback image. Lighten it so the
   fallback/poster image is clearly visible, and keep the poster fully opaque. */
.video-bg.is-poster .video-overlay {
   background: linear-gradient(90deg, rgba(10,61,39,0.80) 0%, rgba(10,61,39,0.34) 55%, rgba(10,61,39,0.12) 100%);
}
.comp-header.v2 .video-bg.is-poster .video-overlay {
   background: linear-gradient(90deg, rgba(10,61,39,0.72) 0%, rgba(10,61,39,0.18) 100%);
}
.video-bg.is-poster .video-thumbnail { opacity: 1 !important; }

/* =========================== News article blocks =========================== */

/* Hero: category badge + short intro paragraph */
.comp-header .hero-badge { display: inline-block; align-self: flex-start; background: var(--secondary); color: #fff;
   font-size: 0.72em; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.45em 0.9em; border-radius: 999px; margin-bottom: 1.1em; }
.comp-header .hero-intro { color: rgba(255,255,255,0.85); max-width: 34em; margin-top: 1em; }

/* Article intro: text + Quick Overview card */
.section-article-intro .ai-row { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 3em; align-items: start; }
.section-article-intro .ai-title { margin-bottom: 0.6em; }
.section-article-intro .ai-body { color: var(--text-medium); }
.section-article-intro .ai-body p { margin-bottom: 1em; }
.section-article-intro .ai-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; padding: 1.6em 1.5em; }
.section-article-intro .ai-card-title { color: var(--white); font-size: 1.05em; margin: 0 0 1.1em; }
.section-article-intro .ai-rows { list-style: none; margin: 0; padding: 0; }
.section-article-intro .ai-row-item { display: flex; align-items: flex-start; gap: 0.9em; padding: 0.85em 0; border-top: 1px solid rgba(255,255,255,0.09); }
.section-article-intro .ai-row-item:first-child { border-top: 0; padding-top: 0; }
.section-article-intro .ai-ico { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.18);
   display: flex; align-items: center; justify-content: center; color: var(--secondary); }
.section-article-intro .ai-ico svg { width: 18px; height: 18px; }
.section-article-intro .ai-kv { display: flex; flex-direction: column; }
.section-article-intro .ai-label { color: var(--secondary); font-size: 0.74em; text-transform: uppercase; letter-spacing: 0.06em; }
.section-article-intro .ai-value { color: var(--white); font-size: 0.98em; }
@media screen and (max-width: 900px){ .section-article-intro .ai-row { grid-template-columns: 1fr; gap: 2em; } }

/* Highlight quote card */
.section-quote-card .qc-card { position: relative; margin: 0; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
   border-left: 4px solid var(--secondary); border-radius: 14px; padding: 2.2em 2.4em; display: flex; flex-wrap: wrap; align-items: center; gap: 1.5em; }
.section-quote-card .qc-mark { font-family: var(--font-heading); font-size: 3.4em; line-height: 0.7; color: var(--secondary); opacity: 0.9; }
.section-quote-card .qc-text { flex: 1 1 22em; margin: 0; color: var(--white); font-size: 1.35em; line-height: 1.4; }
.section-quote-card .qc-author { display: flex; flex-direction: column; padding-left: 1.5em; border-left: 1px solid rgba(255,255,255,0.16); }
.section-quote-card .qc-name { color: var(--secondary); }
.section-quote-card .qc-role { color: var(--text-medium); font-size: 0.88em; }
@media screen and (max-width: 700px){
   .section-quote-card .qc-card { padding: 1.6em; }
   .section-quote-card .qc-author { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255,255,255,0.16); padding-top: 1em; }
}

/* feature-cards: icon variant (Key Highlights) */
.feature-card.has-icon { padding-top: 1.8em; }
.feature-card-icon { width: 62px; height: 62px; margin: 0 1.4em 0.2em; border-radius: 50%; border: 1px solid rgba(255,255,255,0.18);
   background: rgba(255,255,255,0.04); display: flex; align-items: center; justify-content: center; color: var(--secondary); }
.feature-card-icon svg { width: 28px; height: 28px; }

/* ---- Per-block spacing (admin: "Space above/below") -----------------------
   Wraps a block in page.ejs; overrides the theme's default 10em section
   padding. The vars are already viewport-clamped, so this stays responsive. */
.blk-space > .section,
.blk-space > .section-services { padding-top: var(--blk-pad); padding-bottom: var(--blk-pad); }
.blk-none   { --blk-pad: 0; }
.blk-tiny   { --blk-pad: var(--section-padding-tiny); }
.blk-small  { --blk-pad: var(--section-padding-small); }
.blk-medium { --blk-pad: var(--section-padding-medium); }
.blk-large  { --blk-pad: var(--section-padding); }
.blk-huge   { --blk-pad: var(--section-padding-big); }

/* ---- Article split (Maryem's card-style text/image row) ------------------- */
.section-article-split .as-card {
   display: grid; grid-template-columns: 42% 58%;
   background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10);
   border-radius: 16px; overflow: hidden; min-height: 20em;
}
.section-article-split .as-card.image-left .as-text { order: 2; }
.section-article-split .as-card.image-left .as-media { order: 1; }
.section-article-split .as-text { padding: 2.6em 2.4em; display: flex; flex-direction: column; justify-content: center; }
.section-article-split .as-title { display: flex; align-items: center; gap: .6em; margin: 0 0 .9em; font-size: 1.35em; color: var(--white); }
.section-article-split .as-ico { flex: 0 0 auto; display: flex; color: var(--secondary); }
.section-article-split .as-ico svg { width: 22px; height: 22px; }
.section-article-split .as-body { color: var(--text-medium); }
.section-article-split .as-body p { margin: 0 0 .8em; }
.section-article-split .as-body p:last-child { margin-bottom: 0; }
.section-article-split .as-link { display: inline-block; margin-top: 1.2em; color: var(--secondary); }
.section-article-split .as-media { position: relative; overflow: hidden; background: var(--primary-dark); min-height: 18em; }
@media screen and (max-width: 800px){
   .section-article-split .as-card { grid-template-columns: 1fr; min-height: 0; }
   .section-article-split .as-card.image-left .as-text,
   .section-article-split .as-card.image-left .as-media { order: 0; }
   .section-article-split .as-media { min-height: 14em; }
   .section-article-split .as-text { padding: 1.8em 1.5em; }
}

/* video block, "side" layout: text in a narrow column beside the player */
.section-video-block.is-side .video-layout { display: grid; grid-template-columns: 26% 74%; gap: 2.5em; align-items: center; }
.section-video-block.is-side .video-block-head { max-width: none; margin-bottom: 0; }
.section-video-block.is-side .video-block-head h2 { font-size: 1.5em; }
@media screen and (max-width: 800px){
   .section-video-block.is-side .video-layout { grid-template-columns: 1fr; gap: 1.4em; }
}

/* ---- Card carousel (R&D varieties, Maryem's card style) -------------------
   Stays inside the container (never edge-to-edge) with the arrows outside the
   track. Cards: image on top, category label, name, short description. */
.section-card-carousel .cc-head { margin-bottom: 2em; }
.section-card-carousel .cc-head .fc-intro { max-width: 42em; }
.section-card-carousel .cc-carousel { position: relative; }
.section-card-carousel .cc-track {
   display: flex; gap: 1.4em; overflow-x: auto; scroll-snap-type: x mandatory;
   padding: .2em .2em 1em; margin: -.2em; scrollbar-width: none;
}
.section-card-carousel .cc-track::-webkit-scrollbar { display: none; }
/* The photos are transparent PNG cut-outs, so the pepper sits straight on the
   card — no white plate behind it. Copy fades in underneath: sub-header, name,
   detail text. Hovering lifts the card and pushes the pepper up out of it. */
/* Solid deep green — NO white wash. A translucent white panel over the green
   section turned everything olive-grey; a solid dark card reads clean and lets
   the peppers carry the colour. */
.section-card-carousel .cc-card {
   position: relative; flex: 0 0 clamp(15em, 26%, 20em); scroll-snap-align: start;
   aspect-ratio: 3 / 4.3; border-radius: 20px; overflow: hidden;
   background: linear-gradient(to bottom, #0A3D27 0%, #08331F 60%, #06291B 100%);
   border: 1px solid rgba(255,255,255,0.10);
   box-shadow: 0 10px 24px rgba(3,24,15,0.30);
   transition: transform .45s cubic-bezier(0.22,0.61,0.36,1), box-shadow .45s ease, border-color .45s ease;
}
.section-card-carousel .cc-card:hover {
   transform: translateY(-14px);
   border-color: rgba(255,255,255,0.2);
   box-shadow: 0 26px 46px rgba(3,24,15,0.5);
}
.section-card-carousel .cc-card::before {   /* soft light pooled behind the pepper */
   content: ""; position: absolute; left: 50%; top: 34%; width: 86%; aspect-ratio: 1;
   transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
   background: radial-gradient(circle, rgba(90,170,120,0.22), rgba(90,170,120,0) 66%);
   transition: opacity .45s ease; opacity: .85;
}
.section-card-carousel .cc-card:hover::before { opacity: 1; }
.section-card-carousel .cc-card-media { position: absolute; inset: 0; }
/* fallback: a photo that still has a baked-in white background keeps a white
   tile behind it, so it never renders as a white rectangle on the green card */
.section-card-carousel .cc-card.has-plate .cc-card-img { background: #fff; }
.section-card-carousel .cc-card.has-plate .overlay-image { filter: none; }
.section-card-carousel .cc-card-img {
   position: absolute; left: 0; right: 0; top: 0; height: 72%;
   display: block; cursor: zoom-in;
}
/* Scaled up so the pepper fills the card, with a drop-shadow that follows the
   PNG's own shape. On hover it pushes up (Driscoll's-style). */
.section-card-carousel .cc-card-img .overlay-image {
   background-size: contain; background-position: center 46%;
   transform: scale(1.42) translateY(0); transform-origin: center 46%;
   filter: drop-shadow(0 14px 18px rgba(3,24,15,0.45));
   transition: transform .55s cubic-bezier(0.22,0.61,0.36,1), filter .55s ease;
}
.section-card-carousel .cc-card:hover .overlay-image {
   transform: scale(1.52) translateY(-7%);
   filter: drop-shadow(0 24px 26px rgba(3,24,15,0.5));
}
.section-card-carousel .cc-extra { display: none; }
.section-card-carousel .cc-card-body {
   position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
   padding: 1.4em 1.3em 1.5em; pointer-events: none;   /* clicks fall through to the photo */
}
.section-card-carousel .cc-cat {
   display: block; color: var(--secondary); font-size: .72em; letter-spacing: .07em;
   text-transform: uppercase; margin-bottom: .3em;
}
.section-card-carousel .cc-name { color: #fff; font-size: 1.25em; margin: 0; }
.section-card-carousel .cc-text { color: rgba(255,255,255,0.78); font-size: .85em; line-height: 1.45; margin: .5em 0 0; }
.section-card-carousel .cc-arrow {
   position: absolute; top: 38%; z-index: 3; width: 2.4em; height: 2.4em; border-radius: 50%;
   border: 0; background: var(--secondary); color: #fff; font-size: 1.1em; line-height: 1;
   cursor: pointer; display: flex; align-items: center; justify-content: center;
   box-shadow: 0 4px 14px rgba(0,0,0,0.18); transition: transform .2s ease;
}
.section-card-carousel .cc-arrow:hover { transform: scale(1.08); }
.section-card-carousel .cc-prev { left: -1.2em; }
.section-card-carousel .cc-next { right: -1.2em; }
@media screen and (max-width: 900px){
   .section-card-carousel .cc-card { flex-basis: 72%; }
   .section-card-carousel .cc-prev { left: -.6em; }
   .section-card-carousel .cc-next { right: -.6em; }
}

/* ---- Lightbox for cut-out PNGs (R&D varieties) ---------------------------
   The pepper is a transparent PNG, so it gets a halo that follows its own
   silhouette (stacked drop-shadows trace the alpha channel) on a soft green
   backdrop, instead of floating on flat black. */
.uk-lightbox.is-cutout {
   background: radial-gradient(circle at 50% 42%, rgba(58,129,89,0.45), rgba(6,41,27,0.98) 62%), #06291B;
}
.uk-lightbox.is-cutout .uk-lightbox-items > * > img {
   filter:
      drop-shadow(0 0 1px rgba(255,255,255,0.85))
      drop-shadow(0 0 3px rgba(255,255,255,0.55))
      drop-shadow(0 0 30px rgba(255,255,255,0.28))
      drop-shadow(0 26px 50px rgba(0,0,0,0.5));
   animation: cutout-in .5s cubic-bezier(0.22,0.61,0.36,1) both;
}
@keyframes cutout-in { from { opacity: 0; transform: scale(0.94) translateY(10px); } to { opacity: 1; transform: none; } }
.uk-lightbox.is-cutout .uk-lightbox-caption { color: rgba(255,255,255,0.9); }

/* ---- Alternating section colours -----------------------------------------
   html/body paint the whole page with --primary, so every section reads as one
   green. With "Alternate section colours" on, blocks take colour A / B in turn
   (a block can force its own band, or opt out, in the page editor). */
.sec-band { position: relative; }
/* Bands are a translucent TINT, not a solid fill: a solid colour would cover the
   page-wide watermark, which is why each band had to carry its own copy and the
   pattern visibly restarted at every boundary. */
.sec-a { background-color: transparent; --section-bg: var(--primary); }
.sec-b { background-color: var(--band-tint, rgba(0,0,0,0.04)); --section-bg: var(--primary-alt, var(--primary-dark)); }
/* Several elements are painted with the page colour ON PURPOSE so they blend in:
   the assortment reveal shutters, the story-split text plate, the solar section,
   the spec cells. They must follow the band they sit in, otherwise they show up
   as solid rectangles of the wrong green. They read --section-bg, which defaults
   to the page colour outside any band. */
:root { --section-bg: var(--primary); }
/* The homepage heading is padding:0 by design — it was meant to sit flush on a
   single-colour page. Inside a band that leaves the text touching the edges, so
   give it room. Targeted on purpose: a blanket rule would also force padding onto
   sections that are deliberately flush (.section-quote-wide is a full-bleed image). */
.sec-band:not(.blk-space) > .comp-title-text-home {
   padding-top: var(--section-padding-medium);
   padding-bottom: var(--section-padding-small);
}

/* "Hide image on mobile": on a narrow screen the photo stacks straight under the
   hero and crowds the story; this drops it and lets the text run full width.
   Desktop is untouched. */
@media screen and (max-width: 700px) {
   .section-story-split.hide-img-mobile .story-split-image { display: none; }
   .section-story-split.hide-img-mobile .story-split-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   LIGHT THEME (body.theme-light)
   The palette itself lives in Admin -> Colors (a preset writes it). These rules
   fix the pieces that hard-code "white on dark": cards, panels and borders that
   assume a dark page. Photos keep their dark overlay, so white type on imagery
   is unchanged.
   ========================================================================== */
.theme-light .cc-card {
   background: #FFFFFF;
   border-color: rgba(18,59,40,0.10);
   box-shadow: 0 10px 24px rgba(18,59,40,0.08);
}
.theme-light .cc-card:hover { box-shadow: 0 26px 46px rgba(18,59,40,0.14); }
.theme-light .cc-card::before { background: radial-gradient(circle, rgba(18,59,40,0.05), rgba(18,59,40,0) 66%); }
.theme-light .cc-card::after {
   background: linear-gradient(to bottom, rgba(255,255,255,0) 48%, rgba(255,255,255,0.85) 72%, #FFFFFF 100%);
}
.theme-light .cc-name { color: #123B28; }
.theme-light .cc-text { color: rgba(18,59,40,0.72); }

.theme-light .section-article-intro .ai-card,
.theme-light .section-quote-card .qc-card,
.theme-light .section-article-split .as-card,
.theme-light .feature-card {
   background: #FFFFFF;
   border-color: rgba(18,59,40,0.10);
}
.theme-light .section-article-intro .ai-card-title,
.theme-light .section-article-intro .ai-value,
.theme-light .section-quote-card .qc-text,
.theme-light .section-article-split .as-title,
.theme-light .feature-card h3,
.theme-light .section-quote-card .qc-name { color: #123B28; }
.theme-light .section-article-intro .ai-row-item { border-top-color: rgba(18,59,40,0.10); }
.theme-light .section-article-intro .ai-ico,
.theme-light .feature-card-icon { border-color: rgba(18,59,40,0.14); background: rgba(18,59,40,0.03); }
.theme-light .section-article-split .as-body,
.theme-light .feature-card p { color: rgba(18,59,40,0.72); }

/* hero badge + the pepper watermark read on paper */
.theme-light .comp-header .hero-intro { color: rgba(255,255,255,0.85); }  /* hero sits on a photo: unchanged */

/* --- Light theme: anything sitting ON A PHOTO stays white -------------------
   In this theme --white is really "the foreground colour on the page", so the
   light preset points it at the green ink. But the hero, the wide quote and the
   solar section sit on imagery: re-declare the token locally and every heading,
   paragraph and link inside them goes back to white, with no per-element rules. */
.theme-light .comp-header,
.theme-light .section-quote-wide,
.theme-light .section-solar,
.theme-light .section-pillars .pillar-card {
   --white: #FFFFFF;
   --text: rgba(255,255,255,0.85);
   --text-medium: rgba(255,255,255,0.7);
   --text-light: rgba(255,255,255,0.5);
   color: #FFFFFF;
}
.theme-light .comp-header h1, .theme-light .comp-header h2,
.theme-light .comp-header h4, .theme-light .comp-header p,
.theme-light .comp-header a { color: #FFFFFF; }
/* Hero TEXT TONE toggle. Default (above) = light/white type, for dark backgrounds.
   .hero-text-dark flips the titles + paragraph to the ink-green palette so the hero reads
   cleanly on a LIGHT background — mirrors the token flip plus the explicit heading rules,
   so you can drop in any light background without hand-picking colours. (The red script
   tagline keeps its accent colour in both.) */
.theme-light .comp-header.hero-text-dark {
   --white: #123B28;
   --text: rgba(18,59,40,0.85);
   --text-medium: rgba(18,59,40,0.7);
   --text-light: rgba(18,59,40,0.5);
   color: #123B28;
}
.theme-light .comp-header.hero-text-dark h1, .theme-light .comp-header.hero-text-dark h2,
.theme-light .comp-header.hero-text-dark h4, .theme-light .comp-header.hero-text-dark p,
.theme-light .comp-header.hero-text-dark a { color: #123B28; }
.theme-light .comp-header.hero-text-dark .hero-intro { color: rgba(18,59,40,0.85); }
.theme-light .comp-header.hero-text-dark .scroll-down-arrow svg path { fill: #123B28; }
/* Hero TITLE ALIGNMENT (admin: Title alignment — left / centre / right).
   Left is the default column layout (unchanged). Centre / right realign EVERY text
   element as a group — badge, eyebrow, headline, tagline, intro and any button — and
   drop the right-hand reserve so the text can use, and centre within, the full width. */
.comp-header.hero-align-center .container .row:nth-child(1),
.comp-header.hero-align-right  .container .row:nth-child(1) { padding-right: 0; }
.comp-header.hero-align-center .flex-col { text-align: center; max-width: 50rem; margin-left: auto; margin-right: auto; }
.comp-header.hero-align-center .flex-col .hero-intro { margin-left: auto; margin-right: auto; }
.comp-header.hero-align-center .flex-col .btn { margin-right: 0; }
.comp-header.hero-align-right .flex-col { text-align: right; }
.comp-header.hero-align-right .flex-col .hero-intro { margin-left: auto; margin-right: 0; }
.comp-header.hero-align-right .flex-col .btn { margin-right: 0; }
/* the image scrim is --primary, which on paper turned into a white wash that
   bleached the photo — put it back to the deep green */
.theme-light .overlay.image-overlay-30 { background: var(--primary-overlay); }

/* The nav is fixed over everything and is drawn with --white. Over the hero photo
   it must be white; once you scroll onto the paper it must be ink. The wordmark
   (.nav-logo) sits OUTSIDE .nav-bar, so the flag goes on <body> to cover both. */
.theme-light .nav-bar,
.theme-light .nav-logo,
.theme-light .whatsapp-icon {
   --white: #123B28;
   color: var(--white);   /* the "menu" label has no colour of its own: it inherits */
}
.theme-light.nav-on-media .nav-bar,
.theme-light.nav-on-media .nav-logo,
.theme-light.nav-on-media .whatsapp-icon { --white: #FFFFFF; }
/* …unless that hero uses the DARK title tone (a light background). Then the logo, the
   hamburger + "menu" label, and the icon must be ink too, so they follow the hero's
   light/dark switch instead of staying white on a pale hero. Only while over the hero
   (nav-on-media); scrolled past onto paper the base rule is ink anyway. */
.theme-light.nav-on-media main.hero-tone-dark .nav-bar,
.theme-light.nav-on-media main.hero-tone-dark .nav-logo,
.theme-light.nav-on-media main.hero-tone-dark .whatsapp-icon { --white: #123B28; }
/* Menu open: the slide-out panel is paper, so the nav has to be ink again even
   though the hero is still behind it. */
.theme-light main.nav-active .nav-bar,
.theme-light main.nav-active .nav-logo,
.theme-light main.nav-active .whatsapp-icon { --white: #123B28; }
.theme-light .nav-logo svg path,
.theme-light .logo-icon-line svg path,
.theme-light .whatsapp-icon .whatsapp-inner svg path { fill: var(--white); }

/* --- Light theme, round 2 --------------------------------------------------
   Inner-page heroes only cover PART of the section with imagery (the photo is
   inset, the rest is page colour). On the dark theme that was invisible — the
   page was dark green anyway. On paper, the white hero type landed on white.
   So in the light theme the hero band itself is deep green: photo or no photo,
   the whole hero is dark and the white type always reads. */
.theme-light .comp-header { background: var(--primary-overlay); }
/* A video hero doesn't need the solid colour behind it (the video covers the header),
   and a solid colour would show as a green band if the video is offset up. Keep it
   transparent so any gap reveals the page's cream + watermark — the same background as
   the next section. The loading poster still covers it until the video is playing. */
.theme-light .comp-header.hero-has-video { background: transparent; }

/* =========================== Pre-footer band =============================
   Driscoll's-style colour band: the classic pre-footer content (title, subtitle,
   buttons, USP list) on the left, and a big cut-out image bleeding off the bottom
   on the right. Background defaults to the themed brand green (var(--primary)); the
   overflow:hidden clips the image at the band's bottom edge for that "poster" look.
   Its own text is always white, on green, regardless of the light/dark theme. */
.pfb { position: relative; overflow: hidden; background: var(--primary-overlay); color: #fff; }
.pfb .pfb-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 2.5em; }
.pfb-text { flex: 1 1 46%; min-width: 0; padding: 4.8em 0; position: relative; z-index: 2; }
.pfb-text h2 { color: #fff; margin: 0 0 .45em; }
.pfb-text h4 { color: rgba(255,255,255,0.85); font-weight: 400; margin: 0 0 1.5em; max-width: 26em; }
.pfb-buttons { display: flex; flex-wrap: wrap; gap: 1em 1.4em; margin-bottom: 2.2em; }
.pfb .btn { color: #fff; margin-right: 0; }
.pfb-usps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3em 2.4em; max-width: 40em; }
.pfb-usps li { display: flex; align-items: center; padding: .35em 0; }
.pfb-usps li svg { flex: 0 0 auto; }
.pfb-usps li p { margin: 0; padding-left: .55em; line-height: 1.2; font-size: .95em; color: rgba(255,255,255,0.9); }
.pfb-media { flex: 1 1 54%; min-width: 0; position: relative; min-height: 25em; align-self: stretch; }
.pfb-img {
   position: absolute; left: calc(50% + var(--pfb-img-x, 0vw)); bottom: 0; transform: translateX(-50%);
   width: var(--pfb-img-size, 140%); max-width: none; height: auto; margin-bottom: var(--pfb-img-y, -10%);
   filter: drop-shadow(0 18px 26px rgba(3,24,15,0.35));
   transition: transform .55s cubic-bezier(0.22,0.61,0.36,1);
   pointer-events: none;
}
.pfb:hover .pfb-img { transform: translateX(-50%) translateY(-2.6%); }   /* gentle Driscoll's lift */
@media screen and (max-width: 900px){
   .pfb .pfb-row { flex-direction: column; align-items: stretch; gap: 0; }
   .pfb-text { width: 100%; padding: 3.2em 0 0; }
   .pfb-media { width: 100%; min-height: 16em; }
   .pfb-img { position: relative; left: auto; bottom: auto; transform: none; display: block;
      width: 88%; max-width: 420px; margin: 1.6em auto -3%; }
   .pfb:hover .pfb-img { transform: none; }
}

/* =========================== R&D products showcase =========================
   Light intro column on the left; a dark brand-green interactive panel on the
   right with a featured variety (big image + details + prev/next) and a
   clickable thumbnail list of every variety. */
.section-rnd-products .rp-wrap { display: flex; gap: 3em; align-items: stretch; }
.section-rnd-products .rp-intro { flex: 0 0 30%; align-self: center; }
.section-rnd-products .rp-intro h2 { margin: .15em 0 .5em; }
.section-rnd-products .rp-intro p { color: var(--text-medium); max-width: 24em; }
/* Eyebrows on the new R&D blocks follow the site convention (secondary/red, uppercase). */
.section-rnd-products .rp-intro .eyebrow,
.section-focus-grid .eyebrow,
.section-process-steps .eyebrow {
   display: block; color: var(--secondary); letter-spacing: .1em; text-transform: uppercase;
   font-size: .72em; margin-bottom: .5em;
}

.section-rnd-products .rp-showcase {
   flex: 1 1 70%; display: flex; min-height: 20em; max-height: 21em; overflow: hidden;
   color: #fff; background: radial-gradient(120% 120% at 72% 30%, #14623c 0%, #0c3f28 46%, #072a1b 100%);
   border-radius: 24px 0 0 24px; margin-right: min(0px, calc(45em - 50vw));   /* flush to the right page edge */
}
.section-rnd-products .rp-stage {
   position: relative; flex: 1 1 auto; min-width: 0; padding: 2.4em; display: flex; align-items: flex-end;
}
.section-rnd-products .rp-media { position: absolute; inset: 0 3% 0 14%; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.section-rnd-products .rp-glow { position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%;
   background: radial-gradient(circle, rgba(120,200,150,0.28), rgba(120,200,150,0) 66%); }
.section-rnd-products .rp-img { position: relative; max-width: 100%; max-height: 94%; object-fit: contain;
   filter: drop-shadow(0 22px 30px rgba(3,20,12,0.5)); transition: opacity .3s ease; }
.section-rnd-products .rp-info { position: relative; z-index: 2; max-width: 15em; }
.section-rnd-products .rp-cat { display: block; color: var(--secondary); font-size: .72em; letter-spacing: .1em; text-transform: uppercase; }
.section-rnd-products .rp-count { display: block; color: rgba(255,255,255,0.55); font-size: .8em; margin: .5em 0 .3em; letter-spacing: .05em; }
.section-rnd-products .rp-name { color: #fff; font-size: 2.2em; line-height: 1.05; margin: 0; }
.section-rnd-products .rp-colors { display: block; color: var(--secondary); font-size: 1em; margin: .5em 0 0; }
.section-rnd-products .rp-colors[hidden] { display: none; }
.section-rnd-products .rp-desc { color: rgba(255,255,255,0.8); font-size: .9em; line-height: 1.5; margin: 1em 0 0; }
.section-rnd-products .rp-nav { display: flex; gap: .6em; margin-top: 1.6em; }
.section-rnd-products .rp-prev, .section-rnd-products .rp-next {
   width: 2.7em; height: 2.7em; border-radius: 50%; border: 1px solid rgba(255,255,255,0.28);
   background: transparent; color: #fff; font-size: 1.1em; line-height: 1; cursor: pointer;
   display: flex; align-items: center; justify-content: center; transition: background .2s ease, border-color .2s ease; }
.section-rnd-products .rp-prev:hover, .section-rnd-products .rp-next:hover { background: var(--secondary); border-color: var(--secondary); }

.section-rnd-products .rp-list { flex: 0 0 14.5em; overflow-y: auto; background: rgba(0,0,0,0.22); padding: .5em; }
.section-rnd-products .rp-item {
   display: flex; align-items: center; gap: .9em; width: 100%; padding: .95em .8em; border: 0; border-radius: 10px;
   background: transparent; color: rgba(255,255,255,0.75); cursor: pointer; text-align: left; transition: background .2s ease, color .2s ease; }
.section-rnd-products .rp-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
.section-rnd-products .rp-item.is-active { background: rgba(255,255,255,0.1); color: #fff; }
.section-rnd-products .rp-item-n { flex: 0 0 auto; font-size: .75em; color: rgba(255,255,255,0.5); width: 1.4em; }
.section-rnd-products .rp-item.is-active .rp-item-n { color: var(--secondary); }
.section-rnd-products .rp-item-thumb { flex: 0 0 auto; width: 2.6em; height: 2.6em; border-radius: 8px; background: rgba(255,255,255,0.08) center/cover no-repeat; }
.section-rnd-products .rp-item-name { flex: 1 1 auto; font-size: .92em; line-height: 1.15; }
@media screen and (max-width: 900px){
   .section-rnd-products .rp-wrap { flex-direction: column; gap: 1.6em; }
   .section-rnd-products .rp-intro { flex: none; }
   .section-rnd-products .rp-showcase { flex-direction: column; min-height: 0; max-height: none; margin-right: 0; border-radius: 16px; }
   .section-rnd-products .rp-stage { min-height: 22em; }
   .section-rnd-products .rp-media { inset: auto 0 2.5em 18%; }
   .section-rnd-products .rp-list { flex: none; display: flex; overflow-x: auto; }
   .section-rnd-products .rp-item { flex: 0 0 auto; flex-direction: column; width: 6.5em; text-align: center; }
   .section-rnd-products .rp-item-name { font-size: .8em; }
}

/* ---- Image + text + feature icons (full-bleed image left, "Research with a purpose") ---- */
.section-image-features { padding: 0; }
.section-image-features .if-wrap { display: flex; align-items: stretch; }
.section-image-features .if-media { flex: 0 0 46%; min-height: 34em; background: #e9e6df center center / cover no-repeat; }
.section-image-features .if-body { flex: 1 1 54%; min-width: 0; align-self: center; padding: 4.5em 7% 4.5em 4.5em; }
.section-image-features .if-eyebrow { display: block; color: var(--secondary); text-transform: uppercase; letter-spacing: .1em; font-size: .72em; margin-bottom: .5em; }
.section-image-features .if-body h2 { margin: .1em 0 .55em; }
.section-image-features .if-text { color: var(--text-medium); max-width: 34em; }
.section-image-features .if-features { display: flex; gap: 2.2em; margin-top: 2.8em; }
.section-image-features .if-feature { flex: 1 1 0; min-width: 0; }
.section-image-features .if-feat-icon { width: 2em; height: 2em; color: var(--secondary); margin-bottom: .55em; }
.section-image-features .if-feat-icon svg { width: 100%; height: 100%; display: block; }
.section-image-features .if-feature h4 { font-size: 1em; margin: 0 0 .35em; color: var(--white); }
.section-image-features .if-feature p { color: var(--text-medium); font-size: .85em; line-height: 1.45; margin: 0; }
@media screen and (max-width: 900px){
   .section-image-features .if-wrap { flex-direction: column; }
   .section-image-features .if-media { flex: none; min-height: 15em; }
   .section-image-features .if-body { flex: none; padding: 2.6em var(--viewport-padding, 6%); }
   .section-image-features .if-features { flex-direction: column; gap: 1.4em; margin-top: 1.8em; }
}

/* ---- Areas-of-focus grid: icon + title + text + photo cards ---- */
.section-focus-grid .fg-head { margin-bottom: 2.4em; }
.section-focus-grid .fg-head h2 { margin: .15em 0 0; }
.section-focus-grid .fg-grid { display: grid; gap: 2em; grid-template-columns: repeat(4, 1fr); }
.section-focus-grid .fg-grid.fg-cols-3 { grid-template-columns: repeat(3, 1fr); }
.section-focus-grid .fg-grid.fg-cols-2 { grid-template-columns: repeat(2, 1fr); }
.section-focus-grid .fg-grid.fg-cols-1 { grid-template-columns: 1fr; }
.section-focus-grid .fg-icon { width: 2.3em; height: 2.3em; color: var(--secondary); margin-bottom: .7em; }
.section-focus-grid .fg-icon svg { width: 100%; height: 100%; display: block; }
.section-focus-grid .fg-card h3 { font-size: 1.12em; margin: 0 0 .4em; }
.section-focus-grid .fg-card p { color: var(--text-medium); font-size: .9em; line-height: 1.5; margin: 0 0 1.15em; }
.section-focus-grid .fg-img { border-radius: 14px; aspect-ratio: 4 / 3; background: #e9e6df center/cover no-repeat; }
@media screen and (max-width: 900px){ .section-focus-grid .fg-grid, .section-focus-grid .fg-grid.fg-cols-3, .section-focus-grid .fg-grid.fg-cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 540px){ .section-focus-grid .fg-grid { grid-template-columns: 1fr !important; } }

/* ---- Process steps: horizontal numbered flow with arrows ---- */
.section-process-steps .ps-head { margin-bottom: 2em; }
.section-process-steps .ps-head h2 { margin: .15em 0 0; }
.section-process-steps .ps-row { display: flex; align-items: flex-start; gap: 1em; }
.section-process-steps .ps-step { flex: 1 1 0; min-width: 0; }
.section-process-steps .ps-num { display: inline-flex; align-items: center; justify-content: center; width: 2.7em; height: 2.7em;
   border-radius: 50%; border: 1px solid var(--secondary); color: var(--secondary); font-size: .9em; margin-bottom: .9em; }
.section-process-steps .ps-step h4 { font-size: .95em; letter-spacing: .05em; text-transform: uppercase; margin: 0 0 .4em; color: var(--white); }
.section-process-steps .ps-step p { color: var(--text-medium); font-size: .85em; line-height: 1.45; margin: 0; }
.section-process-steps .ps-arrow { flex: 0 0 auto; color: var(--secondary); font-size: 1.3em; align-self: flex-start; margin-top: .8em; }
@media screen and (max-width: 800px){
   .section-process-steps .ps-row { flex-direction: column; gap: .4em; }
   .section-process-steps .ps-step { display: flex; align-items: baseline; gap: 1em; }
   .section-process-steps .ps-num { margin-bottom: 0; flex: 0 0 auto; }
   .section-process-steps .ps-arrow { transform: rotate(90deg); margin: 0 0 0 1.1em; }
}

/* ---- Stat band: dark brand-green band of big numbers ---- */
/* !important so it wins over the theme's alternating section tint (sec-a/sec-b). */
.section-stat-band { background: var(--primary-overlay) !important; color: #fff; }
.section-stat-band .sb-eyebrow { display: block; color: rgba(255,255,255,0.6); margin-bottom: 1.4em; }
.section-stat-band .sb-row { display: flex; flex-wrap: wrap; gap: 2em; }
.section-stat-band .sb-item { flex: 1 1 0; min-width: 9em; }
.section-stat-band .sb-num { display: block; font-size: 3.1em; line-height: 1; color: #fff; }
.section-stat-band .sb-label { display: block; color: rgba(255,255,255,0.75); font-size: .92em; line-height: 1.35; margin-top: .55em; max-width: 12em; }
@media screen and (max-width: 700px){ .section-stat-band .sb-item { flex-basis: 42%; } }

/* ---- CTA: solid dark-green band variant (sectionClass: cta-dark), no image ---- */
.theme-light .section-cta.cta-dark { background: var(--primary-overlay) !important; }
.theme-light .section-cta.cta-dark .cta-title { color: #fff; }
.theme-light .section-cta.cta-dark .cta-text { color: rgba(255,255,255,0.82); }
.section-cta.cta-dark .btn { color: #fff; }

/* Sections that sit ON imagery keep white type (same trick as the hero). */
.theme-light .section-tech-facilities,
.theme-light .section-variety-cards,
.theme-light .section-marquee-gallery {
   --white: #FFFFFF;
   --text: rgba(255,255,255,0.85);
   --text-medium: rgba(255,255,255,0.7);
   --text-light: rgba(255,255,255,0.5);
   color: #FFFFFF;
}

/* Product specs: the cell separators are white at 10% — invisible on paper. */
.theme-light .section-product-detail .pd-spec-grid {
   background: rgba(18,59,40,0.14);
   border-color: rgba(18,59,40,0.14);
}
.theme-light .section-product-detail .pd-spec { background: #FFFFFF; }

/* --- Light theme, round 3 -------------------------------------------------- */

/* Product attribute chips: their outline is white at 22% — invisible on paper,
   so the rounded pills looked like bare text. */
.theme-light .section-product-detail .pd-chips li {
   border-color: rgba(18,59,40,0.10);
   background: rgba(14,82,52,0.07);
   color: #0E5234;
}

/* The hero photo is INSET (the theme framed it with the page colour, which used
   to be the same green as the page). On paper, giving the hero a dark background
   turned that frame into a strange green band under the video, holding the scroll
   arrow. In the light theme the media fills the hero instead: no band, and the
   type and the arrow always sit on the photo. */
.theme-light .comp-header .video-bg {
   top: 0 !important;
   left: 0; right: 0; bottom: 0;
   width: 100% !important;
   height: 100% !important;
}

/* Mobile-only scrim behind the burger (.nav-btn-back-fade): a rotated dark-green
   gradient that exists so the white nav icons read over photos. On paper it is a
   green smear in the corner, so it follows the nav: dark while the hero is behind
   it, paper (invisible) once you are on the page. */
.theme-light .nav-btn-back-fade {
   background: linear-gradient(to bottom, var(--primary) 0%, rgba(247,245,240,0.6) 55%, rgba(247,245,240,0) 100%);
}
.theme-light.nav-on-media .nav-btn-back-fade {
   background: linear-gradient(to bottom, rgba(6,41,27,0.9) 0%, rgba(6,41,27,0) 100%);
}

/* Careers list on mobile: the theme drops a full-height image strip on the right of
   every row (.assortiment-mobile-image, absolute, 7em wide). With a long vacancy
   title the row grows tall and the strip becomes a big block cutting across the
   text — and it shows even when the vacancy has no photo, because the tint overlay
   renders regardless. Desktop shows the image on hover instead, so mobile loses
   nothing by dropping it. */
@media screen and (max-width: 820px) {
   .assortiment-single-grid.is-jobs .assortiment-mobile-image { display: none; }
}

/* ---- Marquee v2: "ink paint" -------------------------------------------------
   An angled green brush stroke behind the running slogan. Opt-in per block
   (Pages -> quote-slide -> Style), so the classic strip stays one click away. */
.section-quote-slide.is-ink {
   /* ONE angle for the paint and the text — they must ride together */
   --qs-angle: -2.4deg;
   position: relative;
   overflow: hidden;
   border: 0;
   padding-top: var(--section-padding-small);
   padding-bottom: var(--section-padding-small);
}
.section-quote-slide.is-ink .qs-ink {
   position: absolute;
   left: -6%; right: -6%; top: 50%;
   width: 112%; height: 118%;
   transform: translateY(-50%) rotate(var(--qs-angle));
   pointer-events: none;
   z-index: 0;
}
/* The slogan is rotated on the CONTAINER, not on .quote-wrap: that element already
   carries the marquee's translate animation, and a transform there would be
   overwritten every frame. */
.section-quote-slide.is-ink .container { transform: rotate(var(--qs-angle)); }
.section-quote-slide.is-ink .qs-ink svg { width: 100%; height: 100%; display: block; }
.section-quote-slide.is-ink .qs-paint rect { fill: var(--primary-overlay); }   /* the paint */
.section-quote-slide.is-ink .qs-dry rect { fill: var(--primary); }             /* bristle gaps = the page showing through */
.section-quote-slide.is-ink .container { position: relative; z-index: 1; }
/* the text runs on top of the stroke, so it is always light */
.section-quote-slide.is-ink h5 { color: #FFFFFF; }
@media screen and (max-width: 540px) {
   .section-quote-slide.is-ink { --qs-angle: -3deg; }
   .section-quote-slide.is-ink .qs-ink { height: 132%; }
}

/* The rotating badge hangs off the bottom edge of the section: its top half sits on
   the photo, its bottom half on the page. The logo is white (right for the photo),
   so on the paper theme the lower half vanished into the background. Give it its own
   green disc — it then reads on both, and looks like a wax stamp. */
.theme-light .icon-svg-wrap::before {
   content: "";
   position: absolute;
   left: 50%; top: 50%;
   width: 58%; height: 58%;
   transform: translate(-50%, -50%);
   border-radius: 50%;
   background: var(--primary-overlay);
   z-index: 0;
}
.theme-light .icon-svg-wrap svg:nth-child(2) { z-index: 1; }

/* ---- Watermark: Maryem's pepper artwork ----------------------------------
   Served as a FILE and used as a CSS mask, not inlined: the artwork is 65KB and
   the watermark appears on every page, so inlining it would add 65KB to every
   single page load. As a mask it is fetched once, cached, and still takes its
   colour from the theme (the SVG's own black is irrelevant). */
.pattern-img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   background-color: var(--primary-dark);
   -webkit-mask: url("/media/pepperworld/pattern-peppers.svg") center / cover no-repeat;
           mask: url("/media/pepperworld/pattern-peppers.svg") center / cover no-repeat;
}
/* The theme's opacity lived on the `svg` selector, which no longer exists — carry it
   over, or the watermark screams instead of whispers. */
.pattern-top .pattern-img,
.pattern-page .pattern-img,
.pattern-loading .pattern-img { opacity: .10; }
@media screen and (max-width: 540px) {
   .pattern-top .pattern-img { opacity: .14; }
}
.theme-light .pattern-img { background-color: #123B28; opacity: .07; }

/* Watermark across the WHOLE page (not just the first viewport), tiled so it fills
   any page length. It sits behind the sections, so the hero — which has its own
   photo/video/colour — covers it: the pattern effectively begins under the hero. */
.pattern-full {
   position: absolute;
   inset: 0;
   z-index: 0;
   overflow: hidden;
   pointer-events: none;
   /* NOTE: do NOT promote this to its own GPU layer (transform: translateZ / will-change).
      It spans the whole page height, so a single composited texture hits the GPU
      max-texture-height limit and the watermark gets CUT off further down the page.
      The card-image tearing is fixed at the card level (per-tile layers), not here. */
}
/* The full-page watermark is a BACKGROUND-IMAGE (pre-coloured SVG), not a CSS mask.
   A mask repaints only part of its area when something nearby (a card hover, the
   popup) repaints, and a half-repainted mask shows torn edges — the green "bad
   pixels". A background-image never does that. */
.pattern-full .pattern-img.is-tiled {
   /* CRITICAL: .pattern-img (base) carries a `mask: url(pattern-peppers.svg) center/cover
      no-repeat` — ONE giant stretched copy of the pattern. Left on, it masked this
      repeating background with a second, page-sized pattern: the peppers came out
      chopped and disconnected, and the huge mask shape rescaled as you zoomed.
      The tiled watermark must have NO mask - it is a pre-coloured background image. */
   -webkit-mask: none;
           mask: none;
   background: url("/media/pepperworld/pattern-peppers-tile.svg") repeat top center;
   background-size: 2800px auto;
   opacity: .07;
}
.theme-light .pattern-full .pattern-img.is-tiled { opacity: .05; }
@media screen and (max-width: 700px) {
   .pattern-full .pattern-img.is-tiled { background-size: 1600px auto; }
}
/* sections must paint above the watermark */
.main-wrap-inside > .sec-band,
.main-wrap-inside > .blk-space,
.main-wrap-inside > .section,
.main-wrap-inside > header { position: relative; z-index: 1; }

}

/* Loading splash: its pattern is animated in by GSAP and must START invisible.
   The old rules sized/hid the <svg> element, which no longer exists — without this
   the watermark sat fully visible and enormous behind the splash. */
.pattern-loading .pattern-img {
   opacity: 0;
   -webkit-mask: url("/media/pepperworld/pattern-peppers.svg") no-repeat center;
           mask: url("/media/pepperworld/pattern-peppers.svg") no-repeat center;
   -webkit-mask-size: 100% auto;
           mask-size: 100% auto;
}

/* --- Light theme: text that sits on a photo / dark scrim must stay WHITE ------
   These use var(--white), which the paper palette maps to the green ink — right on
   paper, wrong on a dark image, where it vanished. */
.theme-light .comp-big-image .big-image-caption { color: #fff; }        /* caption on its dark bottom scrim */
.theme-light .section-cta.has-bg { --white: #fff; }                      /* CTA over an image: title white */
/* CTA on PAPER (no image): the body text is hard-coded white — make it ink */
.theme-light .section-cta:not(.has-bg) .cta-text { color: rgba(18,59,40,0.72); }


}

/* ---- Services block: heading + year-until-photo ---------------------------
   The circles are stacked and the sticky script reveals only the active one
   (.current) — the year label must follow exactly that rule or all of them pile up. */
.section-services .sv-head { max-width: 44em; margin: 0 auto 1em; text-align: center; }
.section-services .single-circ.no-image {
   display: flex; align-items: center; justify-content: center; border-radius: 50%;
   background: transparent; border: 1px solid transparent;
   transition: background .4s ease, border-color .4s ease;
}
.section-services .single-circ.no-image.current {
   background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16);
}
.theme-light .section-services .single-circ.no-image.current {
   background: rgba(18,59,40,0.04); border-color: rgba(18,59,40,0.12);
}
.section-services .circ-year {
   font-family: var(--font-heading, roc-grotesk-wide), sans-serif;
   font-size: clamp(1.6rem, 4vw, 3rem); font-weight: 700; color: var(--secondary);
   letter-spacing: .02em; opacity: 0; transition: opacity .4s ease;
}
.section-services .single-circ.current .circ-year { opacity: 1; }
.section-services .sv-year {
   display: block; color: var(--secondary); font-weight: 700;
   font-size: 1.1em; letter-spacing: .04em; margin-bottom: .2em;
}

/* The services block sets padding-top:0 for the case where it is the first section
   on a page. Anywhere else it needs room above it, or it butts into the block above. */
.blk-space > .section-services,
.sec-band > .section-services { padding-top: var(--blk-pad, var(--section-padding-medium)); }






/* ---- Home product categories --------------------------------------------
   ONLY the two additions requested. Everything about the image, the veil, the text
   position and the reveal is left exactly as the theme has it — my attempts to
   improve those made it worse each time. */
.section-assortiment-grid .row .uk-slider-items { padding: 10px 0 26px; }  /* room so the shadow is not clipped */
.section-assortiment-grid .row ul .single-assortiment-item { padding: 0 8px; }
.single-assortiment-item a {
   box-shadow: 0 6px 18px rgba(14,82,52,0.10);
   transition: box-shadow .35s ease;
}
.single-assortiment-item a:hover {
   box-shadow: 0 0 0 1px rgba(14,82,52,0.22), 0 14px 34px rgba(14,82,52,0.30), 0 0 26px rgba(14,82,52,0.22);
}

/* ---- Assortment: highlight the family you arrived at -----------------------
   Clicking a category on the home page lands on /assortiment#fam-<slug>. That
   family is marked active (a red accent bar + its number and name lit up) so it is
   obvious where you are, with a one-time pulse to draw the eye. Works via :target
   (native anchor nav) AND a .is-active class (set by JS for SPA / hashchange). */
.section-product-showcase .ps-family {
   position: relative;
   border-radius: 14px;
   padding-left: clamp(0px, 2vw, 1.6rem);
   padding-right: clamp(0px, 2vw, 1.6rem);
}
.section-product-showcase .ps-family::before {
   content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 4px;
   border-radius: 4px; background: var(--secondary);
   opacity: 0; transform: scaleY(.4); transform-origin: center;
   transition: opacity .45s ease, transform .45s ease;
}
.section-product-showcase .ps-family:target,
.section-product-showcase .ps-family.is-active {
   background: color-mix(in srgb, var(--secondary) 8%, transparent);
}
.section-product-showcase .ps-family:target::before,
.section-product-showcase .ps-family.is-active::before { opacity: 1; transform: scaleY(1); }
.section-product-showcase .ps-family:target .ps-fam-num,
.section-product-showcase .ps-family.is-active .ps-fam-num { color: var(--secondary); }
.section-product-showcase .ps-family:target .ps-fam-count,
.section-product-showcase .ps-family.is-active .ps-fam-count { color: var(--secondary); font-weight: 700; }

/* ---- Product "View details" popup ----------------------------------------
   The product page rendered in an overlay so closing keeps you on the list. */
body.pm-open { overflow: hidden; }
.pm-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-start; justify-content: center;
   padding: clamp(1rem, 4vh, 3rem) 1rem; background: rgba(6,41,27,0.6);
   opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; overflow-y: auto; }
.pm-overlay.show { opacity: 1; visibility: visible; }
.pm-panel { position: relative; width: min(1240px, 96vw); background: var(--primary, #F7F5F0); border-radius: 18px; overflow: hidden;
   box-shadow: 0 30px 80px rgba(0,0,0,0.4); transform: translateY(12px); transition: transform .25s ease; }
.theme-light .pm-panel { background: #F7F5F0; }
.pm-overlay.show .pm-panel { transform: none; }
.pm-close { position: absolute; top: 12px; right: 12px; z-index: 3; width: 40px; height: 40px; border: 0; border-radius: 50%;
   background: var(--secondary); color: #fff; font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
   box-shadow: 0 6px 16px rgba(0,0,0,0.2); }
.pm-loading { padding: 5rem 2rem; text-align: center; color: var(--text-medium, #667); }
/* the injected product-detail section: neutralise its full-page spacing inside the modal */
.pm-body .section-product-detail { padding: clamp(1.6rem, 4vw, 3rem) !important; border-radius: 18px; }
.pm-body .section-product-detail .container { padding: 0 !important; max-width: none !important; }
/* Quick-view popup is attribute-focused: hide the request CTA here (the full product
   page keeps it as its main call to action). */
.pm-body .section-product-detail .pd-cta { display: none; }
@media (prefers-reduced-motion: reduce) { .pm-overlay, .pm-panel { transition: none; } }

/* Play button always centred on its media (it is an .overlay filling the box). */
a.is-play { display: flex; align-items: center; justify-content: center; }
.section-article-split .as-media .is-play svg { width: 84px; height: 84px; }
.section-article-split .as-media .is-play { transition: background .3s ease; }
.section-article-split .as-media .is-play:hover { background: rgba(6,41,27,0.22); }

/* Contact page: location map (shown instead of the manager cards) */
.contact-map { margin-top: 1.6rem; max-width: 40em; }
.contact-map-frame { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; box-shadow: 0 12px 30px rgba(0,0,0,0.12); background: #e9e6df; }
.contact-map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.contact-map .btn { margin-top: 1.2rem; }