/* =========================================

   GLOBAL STYLES

========================================= */

* {

    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

    scroll-padding-top: 85px;

}

body {

    margin: 0;

    color: #092c4c;

    font-family: "Manrope", Arial, sans-serif;

    background: #ffffff;

}

button,

input,

select,

textarea {

    font: inherit;

}

button,

a {

    -webkit-tap-highlight-color: transparent;

}

a {

    text-decoration: none;

    color: inherit;

}

button {

    cursor: pointer;

}

img {

    max-width: 100%;

}

.container {

    width: min(1160px, calc(100% - 60px));

    margin: auto;

}

h1,

h2,

h3,

p {

    margin-top: 0;

}

h1,

h2,

h3 {

    font-family: "Cormorant Garamond", Georgia, serif;

    font-weight: 600;

}

h2 {

    font-size: clamp(36px, 3.7vw, 54px);

    line-height: 1.08;

}

p {

    line-height: 1.85;

}

/* =========================================

   NAVBAR

========================================= */

.site-header {

    height: 86px;

    position: sticky;

    top: 0;

    z-index: 50;

    background: #ffffff;

    box-shadow: 0 1px 4px #00233a12;

}

.nav-wrap {

    width: min(1270px, calc(100% - 54px));

    height: 100%;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}

.logo img {

    height: 69px;

    width: 85px;

    object-fit: contain;

}

.nav {

    display: flex;

    align-items: center;

    gap: 32px;

    font-size: 12px;

    color: #082d53;

}

.nav a:hover {

    color: #cb8b20;

}

.nav-cta,

.btn.navy {

    background: #052c56;

    color: #ffffff;

    padding: 15px 22px;

    font-size: 12px;

    font-weight: 700;

}

.menu-toggle {

    display: none;

    background: none;

    border: 0;

    font-size: 25px;

}

/* =========================================

   HERO SLIDER

========================================= */

.hero {

    height: 555px;

    position: relative;

    overflow: hidden;

    background: #032b57;

}

.slides,

.slide {

    position: absolute;

    inset: 0;

}

.slide {

    opacity: 0;

    visibility: hidden;

    transition:

        opacity 0.65s ease,

        visibility 0.65s;

}

.slide.active {

    opacity: 1;

    visibility: visible;

    z-index: 2;

}

.slide-img,

.slide-overlay {

    position: absolute;

    inset: 0;

}

.slide-img {

    background-position: center;

    background-size: cover;

    transform: scale(1);

    will-change: transform;

}

.slide.active .slide-img {

    animation: heroZoom 2s linear forwards;

}

@keyframes heroZoom {

    from {

        transform: scale(1);

    }

    to {

        transform: scale(1.12);

    }

}

.slide-overlay {

    background: linear-gradient(

        90deg,

        rgba(3, 28, 51, var(--shade, 0.65)),

        rgba(3, 28, 51, 0.42) 55%,

        rgba(3, 28, 51, 0.10)

    );

}

.hero-content {

    position: relative;

    z-index: 1;

    padding-top: 110px;

    color: #ffffff;

}

.eyebrow,

.section-kicker {

    font-family: "Manrope", sans-serif;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2.8px;

    text-transform: uppercase;

    color: #315d46;

}

.hero .eyebrow {

    color: #e7a53a;

}

.hero h1 {

    font-size: clamp(48px, 6vw, 82px);

    line-height: 1.02;

    margin: 25px 0;

    max-width: 800px;

}

.hero h1 em {

    font-style: normal;

    color: #cf8a21;

}

.hero p {

    max-width: 600px;

    font-size: 14px;

    color: #e4e8eb;

}

.hero-actions {

    display: flex;

    gap: 14px;

    margin-top: 26px;

}

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    border: 0;

    border-radius: 3px;

    padding: 15px 22px;

    font-size: 12px;

    font-weight: 700;

}

.btn.gold {

    background: #cf8a21;

    color: #ffffff;

    border-radius: 30px;

}

.btn.outline {

    border: 1px solid #e2e2e2;

    color: #ffffff;

    border-radius: 30px;

}

.btn.green {

    background: #18513c;

    color: #ffffff;

}

.hero-controls {

    position: absolute;

    z-index: 8;

    bottom: 30px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    align-items: center;

    justify-content: space-between;

    pointer-events: none;

}

.dots,

.arrows {

    display: flex;

    gap: 10px;

    pointer-events: auto;

}

.dot {

    width: 20px;

    height: 6px;

    border: 0;

    border-radius: 6px;

    background: #ffffff80;

    padding: 0;

}

.dot.active {

    width: 36px;

    background: #cf8a21;

}

.arrows button {

    width: 43px;

    height: 43px;

    border: 1px solid #ffffffb0;

    border-radius: 50%;

    background: #00000033;

    color: #ffffff;

    font-size: 30px;

    line-height: 1;

}

/* =========================================

   ABOUT US

========================================= */

.about-section {

    padding: 86px 0 105px;

}

.about-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 7%;

    align-items: start;

}

.about-photo {

    position: relative;

}

.about-main {

    display: block;

    width: 100%;

    height: 468px;

    object-fit: cover;

}

.about-overlap {

    position: absolute;

    right: -37px;

    bottom: -37px;

    width: 183px;

    height: 183px;

    background: #ffffff;

    padding: 8px;

    box-shadow: 0 14px 30px #00000022;

}

.about-overlap img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.about-text {

    padding: 16px 0 0;

}

.about-text h2 {

    font-size: clamp(42px, 4vw, 55px);

    max-width: 550px;

    color: #032b57;

}

.gold-rule {

    width: 61px;

    height: 1px;

    background: #c6a264;

    margin: 28px 0 32px;

}

.about-text p {

    font-size: 15px;

    color: #5e6c67;

    max-width: 550px;

}

.about-values {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;

    border-top: 1px solid #dddcd3;

    margin-top: 35px;

    padding-top: 30px;

}

.about-values div {

    font-family: "Cormorant Garamond", serif;

    font-size: 19px;

}

.about-values i {

    display: block;

    background: #89a184;

    width: 23px;

    height: 2px;

    margin-top: 9px;

}

/* =========================================

   PRODUCTS

========================================= */

.products-section,

.cert-section {

    padding: 90px 0;

    background: #f9f8f4;

}

.section-row {

    display: flex;

    justify-content: space-between;

    align-items: end;

    gap: 30px;

    margin-bottom: 28px;

}

.section-row h2 {

    margin: 12px 0 0;

}

.section-row p {

    font-size: 12px;

    color: #68756e;

}

.products-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 25px;

}

.product-card {

    text-align: left;

    padding: 0;

    border: 1px solid #e3e4dc;

    background: #ffffff;

    overflow: hidden;

    color: inherit;

    transition:

        transform 0.25s,

        box-shadow 0.25s;

}

.product-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 12px 28px #00000022;

}

.product-img {

    height: 240px;

    overflow: hidden;

}

.product-img img {

    height: 100%;

    width: 100%;

    object-fit: cover;

    transition: transform 0.5s;

}

.product-card:hover img {

    transform: scale(1.05);

}

.product-info {

    padding: 20px;

}

.product-name {

    display: flex;

    justify-content: space-between;

}

.product-name h3 {

    font-size: 29px;

    margin: 0 0 10px;

}

.product-name span {

    font-family: "Manrope", sans-serif;

    font-size: 12px;

}

.product-info p {

    font-size: 12px;

    color: #6d7773;

    min-height: 55px;

}

.product-link {

    font-size: 12px;

    color: #18513c;

    font-weight: 700;

}

/* =========================================

   BENEFITS SECTION — FIGMA DESIGN

========================================= */

.benefits-section {

    padding: 88px 0 105px;

    background: #faf7f2;

    overflow: hidden;

}

.benefits-grid {

    display: grid;

    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

    gap: 60px;

    align-items: start;

}

/* LEFT IMAGE */

.benefits-image {

    position: relative;

    width: 100%;

    padding-bottom: 25px;

}

.benefits-image > img {

    display: block;

    width: 100%;

    height: 540px;

    object-fit: cover;

    object-position: center;

    border-radius: 5px;

}

/* NAVY CAPTION CARD */

.benefit-caption {

    position: absolute;

    left: -22px;

    bottom: 0;

    width: 258px;

    max-width: calc(100% - 10px);

    min-height: 125px;

    background: #032b57;

    border-radius: 8px;

    padding: 19px 23px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: center;

    gap: 13px;

    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.13);

    z-index: 3;

}

.benefit-caption svg {

    flex-shrink: 0;

}

.benefit-caption p {

    margin: 0;

    font-family: "Manrope", sans-serif;

    font-size: 14px;

    line-height: 1.55;

    font-weight: 700;

    color: #ffffff;

}

/* RIGHT CONTENT */

.benefits-content {

    min-width: 0;

    padding-top: 4px;

}

.benefits-content .section-kicker {

    color: #18513c;

    font-family: "Manrope", sans-serif;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2.8px;

    text-transform: uppercase;

    margin-bottom: 13px;

}

.benefits-content > h2 {

    font-family: "Cormorant Garamond", Georgia, serif;

    font-size: clamp(42px, 4vw, 55px);

    font-weight: 600;

    line-height: 1.08;

    color: #032b57;

    margin: 0 0 34px;

    max-width: 550px;

}

.benefits-intro {

    font-family: "Manrope", sans-serif;

    font-size: 14px;

    line-height: 1.8;

    color: #61716b;

    margin: -15px 0 25px;

}

/* FOUR BENEFIT CARDS */

.benefit-items {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    column-gap: 32px;

    row-gap: 54px;

    margin-top: 15px;

}

.benefit-item {

    min-width: 0;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

}

/* CIRCULAR ICONS */

.benefit-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 54px;

    height: 54px;

    flex: 0 0 54px;

    border-radius: 50%;

    background: #ffffff;

    color: #d58b00;

    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.07);

    margin-bottom: 20px;

    transition:

        transform 0.3s ease,

        box-shadow 0.3s ease;

}

.benefit-icon svg {

    width: 23px;

    height: 23px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

}

.benefit-item:hover .benefit-icon {

    transform: translateY(-4px);

    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.11);

}

/* BENEFIT TITLE */

.benefit-item h3 {

    font-family: "Cormorant Garamond", Georgia, serif;

    font-size: 21px;

    font-weight: 600;

    line-height: 1.3;

    color: #032b57;

    margin: 0 0 12px;

}

/* BENEFIT DESCRIPTION */

.benefit-item p {

    font-family: "Manrope", sans-serif;

    font-size: 13px;

    font-weight: 400;

    line-height: 1.75;

    color: #607189;

    margin: 0;

}

/* =========================================

   EXPORT PROCESS

========================================= */

.process-section {

    padding: 90px 0;

}

.center {

    text-align: center;

}

.process-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 20px;

    margin-top: 42px;

}

.process-card {

    position: relative;

    text-align: center;

}

.process-card img {

    width: 100%;

    height: 160px;

    object-fit: cover;

}

.process-num {

    display: block;

    color: #b68b47;

    border: 1px solid #d8c5a7;

    border-radius: 50%;

    width: 40px;

    height: 40px;

    line-height: 39px;

    margin: 0 auto 18px;

    font-size: 12px;

}

.process-card h3 {

    font-size: 23px;

    margin: 15px 0 6px;

}

.process-card p {

    font-size: 12px;

    color: #6d7671;

}

/* =========================================

   COMMITMENT

========================================= */

.commitment {

    background-size: cover;

    background-position: center;

    padding: 92px 0;

    color: #ffffff;

}

.commitment h2 {

    max-width: 650px;

    font-size: 55px;

    margin: 18px 0;

}

.commitment p {

    max-width: 650px;

    font-size: 14px;

}

.section-kicker.light {

    color: #e1a648;

}

/* =========================================

   CERTIFICATIONS

========================================= */

.cert-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 25px;

    margin-top: 38px;

}

.cert-card {

    background: #ffffff;

    padding: 20px;

    text-align: center;

    box-shadow: 0 5px 20px #00000011;

}

.cert-card img {

    width: 100%;

    height: 150px;

    object-fit: contain;

}

.cert-card h3 {

    font-size: 21px;

}

.cert-card p,

.cert-card small {

    font-size: 12px;

    color: #64716a;

}

.muted {

    color: #65736a;

}

/* =========================================

   CONTACT

========================================= */

.contact-section {

    padding: 90px 0;

    background: #faf8f3;

}

.contact-grid {

    display: grid;

    grid-template-columns: 0.9fr 1.1fr;

    gap: 60px;

}

.contact-info h2 {

    margin: 16px 0 28px;

}

.contact-info > p {

    font-size: 13px;

    color: #52685c;

}

.contact-thumbs {

    display: flex;

    gap: 12px;

    margin-top: 36px;

}

.contact-thumbs img {

    width: 30%;

    height: 105px;

    object-fit: cover;

}

.enquiry-form {

    padding: 36px;

    background: #ffffff;

    box-shadow: 0 10px 30px #00000011;

}

.enquiry-form h3 {

    font-size: 29px;

}

.form-cols {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;

}

.enquiry-form label {

    display: block;

    font-size: 11px;

    font-weight: 700;

    color: #345347;

    margin-bottom: 16px;

}

.enquiry-form input,

.enquiry-form select,

.enquiry-form textarea {

    display: block;

    width: 100%;

    border: 0;

    border-bottom: 1px solid #ccd4cd;

    padding: 12px 0;

    outline: none;

    background: #ffffff;

    font-size: 13px;

    color: #032b57;

}

.enquiry-form input:focus,

.enquiry-form textarea:focus {

    border-color: #18513c;

}

.honeypot {

    position: absolute !important;

    left: -9999px;

}

.form-message {

    padding: 10px;

    background: #e6f1e9;

    margin: 10px 0;

    font-size: 12px;

}

/* =========================================

   FAQ

========================================= */

.faq-section {

    padding: 90px 0;

}

.faq-grid {

    display: grid;

    grid-template-columns: 1fr 1.2fr;

    gap: 80px;

}

.faq-grid p {

    color: #6b7870;

    font-size: 13px;

}

.faq-list details {

    border-bottom: 1px solid #d8ddd7;

    padding: 16px 0;

}

.faq-list summary {

    display: flex;

    justify-content: space-between;

    cursor: pointer;

    font-size: 13px;

    color: #1a4435;

    list-style: none;

}

.faq-list summary span {

    font-size: 22px;

}

.faq-list details p {

    margin: 15px 0 0;

}

/* =========================================

   BOTTOM CTA

========================================= */

.bottom-cta {

    text-align: center;

    padding: 80px 0;

    background-position: center;

    background-size: cover;

}

.bottom-cta h2 {

    max-width: 660px;

    margin: 18px auto;

}

.bottom-cta p {

    font-size: 13px;

}

/* =========================================

   FOOTER

========================================= */

.footer {

    background: #032b57;

    color: #ffffff;

    padding: 55px 0 20px;

}

.footer-grid {

    display: grid;

    grid-template-columns: 2fr 1fr 1fr 1.4fr;

    gap: 35px;

}

.footer-grid > div {

    display: flex;

    flex-direction: column;

    align-items: start;

    gap: 12px;

}

.footer-logo {

    height: 85px;

    max-width: 110px;

    object-fit: contain;

    background: #ffffff;

    padding: 4px;

}

.footer-grid p,

.footer-grid a {

    font-size: 12px;

    color: #d3dce2;

    margin: 0;

}

.footer-bottom {

    border-top: 1px solid #ffffff33;

    margin-top: 45px;

    padding-top: 20px;

    font-size: 11px;

    color: #bdcad5;

}

/* =========================================

   PRODUCT MODAL

========================================= */

.modal {

    position: fixed;

    inset: 0;

    z-index: 200;

    background: #001c30a8;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 22px;

}

.modal.open {

    display: flex;

}

.modal-panel {

    background: #fbfaf6;

    width: min(1120px, 100%);

    max-height: 95vh;

    overflow: auto;

    box-shadow: 0 20px 60px #00000055;

}

.modal-head {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 20px 28px;

    background: #ffffff;

    border-bottom: 1px solid #dddddd;

}

.modal-head h2 {

    font-size: 38px;

    margin: 8px 0;

}

.modal-close {

    font-size: 30px;

    border: 1px solid #dddddd;

    background: #ffffff;

    padding: 0 12px;

}

.modal-columns {

    display: grid;

    grid-template-columns: 43% 57%;

}

.modal-image {

    width: 100%;

    height: 300px;

    object-fit: cover;

}

.modal-overview,

.modal-variants {

    padding: 22px 28px;

}

.modal-overview {

    background: #eff4ec;

}

.modal-overview p,

.modal-variants li,

.modal-right p {

    font-size: 12px;

    line-height: 1.8;

    color: #52635c;

}

.modal-variants ul {

    padding-left: 19px;

}

.modal-variants li {

    margin-bottom: 6px;

}

.modal-right {

    padding: 24px 30px;

}

.modal-right h3 {

    font-size: 28px;

    margin: 10px 0 22px;

}

.journey {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 7px;

    margin-bottom: 38px;

}

.journey > div {

    border-top: 1px solid #d3d7d0;

    padding-top: 13px;

}

.journey span {

    display: block;

    width: 29px;

    height: 29px;

    line-height: 29px;

    text-align: center;

    background: #e6eee5;

    color: #18513c;

    border-radius: 50%;

    font-size: 11px;

}

.journey strong {

    display: block;

    font-size: 11px;

    margin-top: 10px;

}

.journey small {

    display: block;

    font-size: 9px;

    color: #8a938d;

}

.specs {

    border-collapse: collapse;

    width: 100%;

    font-size: 12px;

}

.specs th,

.specs td {

    padding: 12px;

    border: 1px solid #d8ddd5;

    text-align: left;

}

.specs th {

    background: #f0f3ed;

    width: 40%;

}

.pack-label {

    margin-top: 36px;

}

.modal-foot {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 20px 28px;

    background: #ffffff;

    border-top: 1px solid #dddddd;

    font-size: 11px;

}

/* =========================================

   SCROLL REVEAL

========================================= */

.reveal {

    opacity: 0;

    transform: translateY(25px);

    transition:

        opacity 0.65s,

        transform 0.65s;

}

.reveal.seen {

    opacity: 1;

    transform: translateY(0);

}

/* =========================================

   TABLET RESPONSIVE

========================================= */

@media (max-width: 1024px) {

    .nav {

        gap: 15px;

    }

    .benefits-grid {

        gap: 35px;

    }

    .benefits-image > img {

        height: 490px;

    }

    .benefit-items {

        column-gap: 20px;

        row-gap: 35px;

    }

    .benefits-content > h2 {

        font-size: 45px;

    }

    .about-grid {

        gap: 45px;

    }

    .about-main {

        height: 400px;

    }

    .about-overlap {

        width: 145px;

        height: 145px;

        right: -15px;

    }

}

/* =========================================

   MOBILE RESPONSIVE

========================================= */

@media (max-width: 760px) {

    .container {

        width: min(calc(100% - 32px), 560px);

    }

    .site-header {

        height: 72px;

    }

    .nav-wrap {

        width: calc(100% - 30px);

    }

    .logo img {

        height: 60px;

    }

    .menu-toggle {

        display: block;

        margin-left: auto;

    }

    .nav {

        display: none;

        position: absolute;

        top: 72px;

        left: 0;

        right: 0;

        background: #ffffff;

        padding: 18px;

        box-shadow: 0 10px 15px #00000022;

        flex-direction: column;

        align-items: start;

    }

    .nav.open {

        display: flex;

    }

    .nav-cta {

        display: none;

    }

    .hero {

        height: 600px;

    }

    .hero-content {

        padding-top: 95px;

    }

    .hero h1 {

        font-size: 48px;

    }

    .hero p {

        font-size: 13px;

    }

    .about-grid,

    .benefits-grid,

    .contact-grid,

    .faq-grid {

        grid-template-columns: 1fr;

        gap: 60px;

    }

    .about-section {

        padding: 55px 0 85px;

    }

    .about-main {

        height: 360px;

    }

    .about-overlap {

        right: 0;

        bottom: -26px;

        width: 135px;

        height: 135px;

    }

    .about-text {

        padding: 0;

    }

    .products-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    .process-grid,

    .cert-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    .benefits-section,

    .process-section,

    .cert-section,

    .products-section,

    .contact-section,

    .faq-section {

        padding: 65px 0;

    }

    .section-row {

        display: block;

    }

    /* BENEFITS MOBILE */

    .benefits-grid {

        gap: 50px;

    }

    .benefits-image {

        padding-bottom: 30px;

    }

    .benefits-image > img {

        height: 400px;

    }

    .benefit-caption {

        left: 0;

        bottom: 0;

        width: 225px;

        min-height: 105px;

        padding: 17px 20px;

    }

    .benefits-content {

        padding-top: 0;

    }

    .benefits-content > h2 {

        font-size: 43px;

        margin-bottom: 30px;

    }

    .benefit-items {

        column-gap: 25px;

        row-gap: 35px;

    }

    .footer-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    .modal-columns {

        grid-template-columns: 1fr;

    }

    .modal-panel {

        max-height: 94vh;

    }

    .journey {

        grid-template-columns: repeat(5, 1fr);

    }

}

/* =========================================

   SMALL MOBILE RESPONSIVE

========================================= */

@media (max-width: 480px) {

    .hero h1 {

        font-size: 42px;

    }

    .hero-actions {

        flex-wrap: wrap;

    }

    .products-grid,

    .cert-grid {

        grid-template-columns: 1fr;

    }

    .product-img {

        height: 230px;

    }

    .process-grid {

        grid-template-columns: 1fr 1fr;

    }

    .process-card img {

        height: 110px;

    }

    .process-card h3 {

        font-size: 19px;

    }

    /* BENEFITS SMALL MOBILE */

    .benefits-image > img {

        height: 330px;

    }

    .benefit-items {

        grid-template-columns: 1fr 1fr;

        column-gap: 18px;

        row-gap: 35px;

    }

    .benefit-icon {

        width: 48px;

        height: 48px;

        flex-basis: 48px;

    }

    .benefit-item h3 {

        font-size: 19px;

    }

    .benefit-item p {

        font-size: 12px;

    }

    .benefits-content > h2 {

        font-size: 39px;

    }

    .form-cols {

        grid-template-columns: 1fr;

    }

    .enquiry-form {

        padding: 22px;

    }

    .journey {

        grid-template-columns: repeat(3, 1fr);

    }

    .modal-foot {

        gap: 15px;

        flex-wrap: wrap;

    }

    .modal-head h2 {

        font-size: 30px;

    }

    .footer-grid {

        gap: 24px;

    }

    .about-values {

        gap: 8px;

    }

    .about-values div {

        font-size: 17px;

    }

}

/* =========================================

   REDUCED MOTION

========================================= */

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior: auto;

    }

    .slide.active .slide-img {

        animation: none;

    }

    .reveal {

        opacity: 1;

        transform: none;

        transition: none;

    }

    .benefit-icon {

        transition: none;

    }

    .benefit-item:hover .benefit-icon {

        transform: none;

    }

}
/* IMAYA MERCANTILE — Figma-aligned refinements */

/* FINAL FIGMA PROCESS + CONTACT LAYOUT — 14 OCT */
.process-section {background:#faf8f1;padding:94px 0 105px;color:#315941}
.process-section .container,.contact-section .container{width:min(1154px,calc(100% - 64px));max-width:1154px}
.process-heading{text-align:center;margin-bottom:52px}
.process-heading .section-kicker{display:block;color:#c28c38;font:700 11px Manrope,sans-serif;letter-spacing:2.5px;text-transform:uppercase;margin-bottom:13px}
.process-heading h2{color:#315941;font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(42px,4.2vw,60px);line-height:1.1;margin:0}
.process-heading-line{display:block;width:61px;height:1px;background:#d3a35e;margin:24px auto 0}
.process-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:0}
.process-card{position:relative;text-align:center;min-width:0}
.process-timeline{height:76px;position:relative;display:flex;align-items:center;justify-content:center;margin-bottom:26px}
.process-timeline:after{content:'';position:absolute;top:50%;left:50%;width:calc(100% + 24px);height:1px;background:#c99d5b;z-index:0}
.process-card:last-child .process-timeline:after{display:none}
.process-icon{position:relative;z-index:1;width:46px;height:46px;border-radius:50%;border:1px solid #d4aa6a;background:white;color:#315941;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px #0001}
.process-icon svg{width:21px;height:21px}
.process-photo{width:100%;height:203px;overflow:hidden}
.process-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.process-card:hover .process-photo img{transform:scale(1.055)}
.process-step-label{color:#c59b63;font-family:'Cormorant Garamond',serif;font-size:14px;margin:18px 0 8px}
.process-card h3{color:#315941;font-family:'Cormorant Garamond',serif;font-size:25px;font-weight:500;line-height:1.2;margin:0 0 10px}
.process-card p{color:#64716b;font-family:Manrope,sans-serif;font-size:12px;line-height:1.75;margin:0 auto;max-width:245px}
.contact-section{background:#faf8f1;padding:90px 0 100px}
.contact-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:70px;align-items:start}
.contact-info{min-width:0}
.contact-info .section-kicker{color:#c58e3c;font:700 11px Manrope,sans-serif;letter-spacing:2.4px;margin-bottom:15px}
.contact-info h2{font-family:'Cormorant Garamond',serif;font-size:clamp(42px,4vw,58px);font-weight:500;line-height:1.1;color:#032b57;margin:0}
.contact-gold-line{display:block;width:61px;height:1px;background:#d6a05a;margin-top:23px}
.contact-details{display:flex;flex-direction:column;gap:25px;margin-top:37px}
.contact-detail{display:flex;align-items:center;gap:16px}
.contact-detail-icon{width:39px;height:39px;min-width:39px;display:flex;align-items:center;justify-content:center;border:1px solid #e0bf89;border-radius:50%;color:#032b57}
.contact-detail-icon svg{width:16px;height:16px}
.contact-detail>div:last-child{display:flex;flex-direction:column;gap:5px}
.contact-detail-label{color:#c58e3c;font:700 10px Manrope,sans-serif;letter-spacing:2px}
.contact-detail a,.contact-detail>div:last-child>span:last-child{color:#586c60;font:400 13px/1.6 Manrope,sans-serif;text-decoration:none}
.contact-thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin-top:94px}
.contact-thumbs img{display:block;width:100%;height:125px;object-fit:cover}
.enquiry-form{background:white;padding:44px 46px 46px;border:0;border-radius:0;box-shadow:0 12px 38px #00000017}
.enquiry-form h3{font-family:'Cormorant Garamond',serif;color:#315941;font-size:33px;font-weight:500;margin:0 0 26px}
.form-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 27px}
.enquiry-form label{display:block;margin:0;color:#405a4c;font:700 10px/1.6 Manrope,sans-serif}
.enquiry-form label>span:first-child{display:block;letter-spacing:1.1px;text-transform:uppercase}
.enquiry-form input:not(.honeypot),.enquiry-form select,.enquiry-form textarea{display:block;width:100%;min-width:0;background:transparent;border:0;border-bottom:1px solid #d8d9ce;border-radius:0;outline:none;box-shadow:none;padding:13px 0 11px;color:#032b57;font:400 13px Manrope,sans-serif;transition:border-color .2s}
.enquiry-form input:not(.honeypot):focus,.enquiry-form select:focus,.enquiry-form textarea:focus{border-bottom-color:#315941;box-shadow:0 1px 0 #315941}
.enquiry-form select{cursor:pointer;min-height:43px}
.contact-message-field{margin-top:27px!important}
.enquiry-form textarea{height:94px;min-height:94px;resize:vertical}
.contact-submit{display:inline-flex;justify-content:center;align-items:center;gap:12px;background:#315941;color:white;border:0;border-radius:0;font:600 12px Manrope,sans-serif;padding:16px 29px;margin-top:31px;cursor:pointer}
.contact-submit:hover{background:#204331}
.honeypot{position:absolute!important;left:-9999px!important;opacity:0}
@media(max-width:900px){.process-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:42px}.process-card:nth-child(2) .process-timeline:after{display:none}.contact-grid{grid-template-columns:1fr;gap:45px}.contact-thumbs{margin-top:40px}}
@media(max-width:600px){.process-section,.contact-section{padding:65px 0 75px}.process-section .container,.contact-section .container{width:calc(100% - 32px)}.process-grid{gap:25px 14px}.process-timeline{height:60px;margin-bottom:12px}.process-photo{height:125px}.process-card h3{font-size:20px}.process-card p{font-size:11px}.contact-thumbs img{height:95px}.enquiry-form{padding:29px 22px}.form-cols{grid-template-columns:1fr;gap:20px}}
@media(prefers-reduced-motion:reduce){.process-photo img{transition:none}}

/* ===========================================================
   IMAYA CONTACT FORM — authoritative Figma-style layout
   =========================================================== */
#contact { scroll-margin-top: 86px; }
.contact-section { padding: 90px 0 100px; background: #faf8f1; }
.contact-grid { align-items: start; }
.enquiry-form { padding: 44px 46px 46px; min-width: 0; }
.enquiry-form .form-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 27px;
  row-gap: 22px;
  align-items: start;
}
.enquiry-form .form-cols > * { min-width: 0; }
.enquiry-form .form-cols > label,
.enquiry-form .form-cols > .product-field { margin: 0; }
.enquiry-form .field-label {
  display: block;
  color: #405a4c;
  font: 700 10px/1.6 Manrope, sans-serif;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}
.enquiry-form .product-field { grid-column: auto; }
.enquiry-form .product-multiselect { position: relative; width: 100%; }
.enquiry-form .product-select-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 10px 0 8px;
  border: 0;
  border-bottom: 1px solid #d8d9ce;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
  color: #032b57;
  text-align: left;
  font: 400 13px Manrope, sans-serif;
}
.enquiry-form .product-select-control:focus-visible { border-bottom-color: #315941; }
.enquiry-form .product-selected { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.enquiry-form .product-placeholder { color: #687a71; }
.enquiry-form .product-chevron { flex-shrink: 0; }
.enquiry-form .product-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 6px; background: #f1f0e9; color: #315941;
  font: 500 11px Manrope, sans-serif;
}
.enquiry-form .product-chip-remove {
  padding: 0 2px; border: 0; background: transparent;
  color: #315941; font: 16px/1 Manrope, sans-serif;
}
.enquiry-form .product-options {
  position: absolute; top: calc(100% + 5px); left: 0; right: 0;
  max-height: 215px; overflow-y: auto; z-index: 40;
  border: 1px solid #e5e2d9; background: #fff;
  box-shadow: 0 12px 24px #00000018;
}
.enquiry-form .product-options[hidden] { display: none !important; }
.enquiry-form .product-option {
  display: flex; align-items: center; gap: 10px;
  margin: 0; padding: 10px 12px;
  color: #315941; font: 500 12px Manrope, sans-serif;
  cursor: pointer;
}
.enquiry-form .product-option:hover { background: #f6f5ef; }
.enquiry-form .product-option input[type="checkbox"] {
  display: inline-block; flex: 0 0 auto; width: 15px; height: 15px;
  padding: 0; margin: 0; accent-color: #315941;
  border: initial; box-shadow: none;
}
.enquiry-form .product-empty { padding: 12px; margin: 0; font-size: 12px; }
.enquiry-form .phone-field { grid-column: 1; }
.enquiry-form .contact-message-field { margin-top: 27px; }
@media (max-width: 600px) {
  .enquiry-form .form-cols { grid-template-columns: 1fr; }
  .enquiry-form .phone-field { grid-column: 1; }
  .enquiry-form { padding: 29px 22px; }
  #contact { scroll-margin-top: 72px; }
  .contact-section { padding: 65px 0 75px; }
}