/* ============================================
   Agrilntelli - Design System (formcreativegroup style)
   ============================================ */

@font-face {
    font-family: 'ErasDemi';
    src: url('../fonts/ERASDEMI.TTF') format('truetype');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'ErasMedium';
    src: url('../fonts/ERASMD.TTF') format('truetype');
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'ErasLight';
    src: url('../fonts/ERASLGHT.TTF') format('truetype');
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: 'ErasBold';
    src: url('../fonts/ERASBD.TTF') format('truetype');
    font-weight: 800;
    font-display: swap;
}

:root {
    --foreground: #000000;
    --background: #FFFFFF;
    --border: #808080;
    --border-light: #eee;
    --first-color: #32411a;
    --second-color: #ffffff;
    --light-color: rgba(50, 65, 26, 0.4);
    --accent-green: #015D3B;
    --dark-bg: #292929;
    --light-gray: #f4f4f4;
    --muted-text: #999;
    --gray-text: #666;
    --error-color: #AA0000;
    --font-heading: 'ErasDemi', 'ErasBold', 'Lucida Sans', Tahoma, sans-serif;
    --font-body: 'ErasMedium', 'Lucida Sans', Tahoma, sans-serif;
    --font-light: 'ErasLight', 'Lucida Sans', Tahoma, sans-serif;
    --font-mono: 'ErasMedium', 'Lucida Sans', Tahoma, sans-serif;
    --grid-gap-mobile: 15px;
    --grid-gap-desktop: 25px;
    --gutter-mobile: 15px;
    --gutter-desktop: 25px;
    --section-margin-mobile: 75px;
    --section-margin-desktop: 100px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
body { font-family: var(--font-body); color: var(--foreground); background-color: var(--background); font-size: 16px; line-height: 1.5; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color 0.15s ease-in-out; }
ul { list-style: none; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 400; line-height: 1.1; }
.font-p { font-family: var(--font-body); }
.caption { font-family: var(--font-mono); font-size: 10px; line-height: 1.2; }

.Layout-section { margin-left: var(--gutter-mobile); margin-right: var(--gutter-mobile); }
.Layout-section.grid { display: grid; gap: var(--grid-gap-mobile); grid-template-columns: repeat(4, 1fr); }
.Layout-section.bottomMargin { margin-bottom: var(--section-margin-mobile); }
.Layout-section.topMargin { margin-top: var(--section-margin-mobile); }
.content-main { grid-column: 1 / span 4; }
.content-full { grid-column: 1 / span 4; }
.img-col { margin-top: 20px; }

.button { color: currentColor; border: 1px solid var(--foreground); cursor: pointer; display: inline-flex; padding: 7.5px 15px; overflow: hidden; position: relative; font-size: 10px; background: transparent; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out; align-items: center; line-height: 1.6; border-radius: 80px; letter-spacing: 0.5px; justify-content: center; text-decoration: none; font-family: var(--font-mono); }
.button:hover { color: var(--background); }
.button .iconContainer { display: block; overflow: hidden; margin-top: 1px; margin-left: 5px; line-height: 0; }
.button .iconContainer svg { width: 18px; height: auto; display: block; }
.button .buttonLabel { opacity: 0.5; }
.button .clone { top: 0; left: 0; color: var(--background); right: 0; bottom: 0; overflow: hidden; position: absolute; transform: translateY(110%); background-color: var(--foreground); transition: transform 0.35s cubic-bezier(0.61, 1, 0.88, 1); }
.button:hover .clone { transform: translateY(0%); }
.button .cloneContent { top: 0; left: 0; right: 0; bottom: 0; display: inline-flex; padding: 7.5px 15px; position: absolute; transform: translateY(-110%); align-items: center; justify-content: center; transition: transform 0.35s cubic-bezier(0.61, 1, 0.88, 1); }
.button:hover .cloneContent { transform: translateY(0%); }

.section-header { margin-bottom: 75px; }
.section-header .title { opacity: 1; grid-column: 1 / span 4; }
.section-header .copyContainer { opacity: 1; grid-column: 1 / span 4; }
.section-header .copy { margin: 0 0 25px; }

.lines { top: 0; left: 0; right: 0; bottom: 0; display: grid; z-index: -1; position: absolute; pointer-events: none; }
.verticalLine { width: 1px; opacity: 0.15; background-color: var(--border); justify-self: end; }
.verticalLine.desktopOnly { display: none; }
.horizontalLine { left: calc(var(--gutter-mobile) * -1); right: calc(var(--gutter-mobile) * -1); bottom: 0; height: 1px; opacity: 0.15; position: absolute; background-color: var(--border); }
.horizontalLine.top { top: 0; bottom: auto; }

.imageContainer { width: 100%; display: block; position: relative; overflow: hidden; }
.imageContainer picture::before { display: block; content: ""; }
.imageContainer picture { display: block; }
.imageContainer img { top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; position: relative; }

.link-underline { display: inline-flex; position: relative; }
.link-underline::after { left: 0; right: 0; bottom: 0; height: 1px; content: ""; display: block; position: absolute; transform: scaleX(0); transition: transform 0.15s ease-in-out; background-color: currentColor; transform-origin: 0 0; }
.link-underline:hover::after, .link-underline.active::after { transform: scaleX(1); }

.curtain { top: 0; left: 0; right: 0; bottom: 0; display: flex; overflow: hidden; position: absolute; pointer-events: none; }
.curtain .left { width: 50%; background-color: var(--background); }
.curtain .right { width: 50%; background-color: var(--background); }

.RichText > div > p:last-child, .RichText > p:last-child { margin-bottom: 0; }

.ls-arrow { text-align: center; }
@media (min-width: 1024px) {
    .Layout-section { margin-left: 0; margin-right: 0; padding-left: var(--gutter-desktop); padding-right: var(--gutter-desktop); }
    .Layout-section.grid { gap: var(--grid-gap-desktop); grid-template-columns: repeat(7, 1fr); }
    .Layout-section.bottomMargin { margin-bottom: var(--section-margin-desktop); }
    .Layout-section.topMargin { margin-top: var(--section-margin-desktop); }
    .section-header { margin-bottom: 100px; }
    .section-header .title { grid-column: 1 / span 3; }
    .section-header .copyContainer { max-width: 400px; grid-column: 5 / span 2; }
    .section-header .copyContainer.end { align-self: end; }
    .verticalLine.desktopOnly { display: block; }
    .horizontalLine { left: calc(var(--gutter-desktop) * -1); right: calc(var(--gutter-desktop) * -1); }
    .content-main { grid-column: 1 / span 7; }
    .content-full { grid-column: 1 / span 7; }
    .content-side { grid-column: 6 / span 2; }
    .product-layout { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--grid-gap-desktop); }
    .product-layout .text-col { grid-column: 1 / span 4; }
    .product-layout .img-col { grid-column: 6 / span 2; margin-top: 0; }
    .product-layout .ls-arrow { grid-column: 1 / span 7; }
    .hero-title { font-size: 7.5vw; grid-column: 1 / span 7; margin-bottom: 50px; }
    .hero-copy { grid-column: 1 / span 3; }
    .hero-captions { grid-column: 1 / span 7; }
    .hero-buttons { grid-column: 1 / span 7; }
}