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



   J&P IRONLEAF WORKS



   Main stylesheet



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











/* ---------- 1. Design system ---------- */







:root {



    --forest: #17251e;



    --forest-light: #24372c;



    --forest-deep: #101a14;







    --accent: #b8d67c;



    --accent-dark: #9fbe61;







    --cream: #f6f5ef;



    --white: #ffffff;







    --text: #1c2821;



    --muted: #747b74;



    --border: #e4e6de;







    --font-body: "DM Sans", sans-serif;



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







    --container: 1180px;







    --radius-small: 8px;



    --radius-medium: 14px;



    --radius-large: 22px;



}











/* ---------- 2. Reset ---------- */







* {



    margin: 0;



    padding: 0;



    box-sizing: border-box;



}







html {



    scroll-behavior: smooth;



    scroll-padding-top: 90px;



}







body {



    font-family: var(--font-body);



    color: var(--text);



    background: var(--white);



    line-height: 1.7;



    overflow-x: hidden;



    -webkit-font-smoothing: antialiased;



}







body,



button,



a {



    -webkit-tap-highlight-color: transparent;



}







a {



    color: inherit;



    text-decoration: none;



}







button {



    font: inherit;



}







img,



svg {



    display: block;



    max-width: 100%;



}







button,



a {



    outline-offset: 4px;



}







::selection {



    color: var(--forest);



    background: var(--accent);



}







.container {



    width: min(var(--container), calc(100% - 64px));



    margin-inline: auto;



}







.section {



    padding: 115px 0;



}







.section-label {



    display: inline-block;



    margin-bottom: 22px;



    color: #71805e;



    font-size: 11px;



    font-weight: 700;



    letter-spacing: 2px;



    text-transform: uppercase;



}







h1,



h2,



h3,



h4 {



    font-family: var(--font-heading);



    line-height: 1.15;



    letter-spacing: -1.5px;



}







p {



    overflow-wrap: break-word;



}











/* ---------- 3. Buttons ---------- */







.button {



    min-height: 54px;



    padding: 0 22px;







    display: inline-flex;



    align-items: center;



    justify-content: center;



    gap: 18px;







    border: 1px solid transparent;



    border-radius: var(--radius-small);







    font-size: 13px;



    font-weight: 700;







    transition:



        background 0.25s ease,



        color 0.25s ease,



        border-color 0.25s ease,



        transform 0.25s ease;



}







.button:hover {



    transform: translateY(-3px);



}







.button span {



    font-size: 18px;



    line-height: 1;



}







.button-primary {



    color: var(--forest);



    background: var(--accent);



}







.button-primary:hover {



    background: #c9e691;



}







.button-outline {



    color: var(--white);



    border-color: rgba(255, 255, 255, 0.3);



    background: transparent;



}







.button-outline:hover {



    border-color: var(--accent);



    color: var(--accent);



}







.button-dark {



    color: var(--white);



    background: var(--forest);



}







.button-dark:hover {



    background: var(--forest-light);



}











/* ---------- 4. Header ---------- */







.site-header {



    position: sticky;



    top: 0;



    z-index: 1000;







    background: rgba(255, 255, 255, 0.96);



    border-bottom: 1px solid rgba(23, 37, 30, 0.08);







    backdrop-filter: blur(16px);



    -webkit-backdrop-filter: blur(16px);



}







.nav-wrapper {



    min-height: 84px;







    display: flex;



    align-items: center;



    justify-content: space-between;



    gap: 30px;



}







.brand {



    display: inline-flex;



    align-items: center;



    gap: 12px;



    flex-shrink: 0;



}







.brand-mark {



    width: 47px;



    height: 47px;







    display: grid;



    place-items: center;







    color: var(--accent);



    /* background: var(--forest); */







    border-radius: 10px;







    font-family: var(--font-heading);



    font-size: 19px;



    font-weight: 800;



    letter-spacing: -1.5px;



}







.brand-mark span {



    color: var(--white);



}







.brand-text {



    display: flex;



    flex-direction: column;



    gap: 2px;



}







.brand-text strong {



    font-family: var(--font-heading);



    font-size: 12px;



    font-weight: 800;



    letter-spacing: 1px;



}







.brand-text small {



    color: var(--muted);



    font-size: 9px;



    font-weight: 700;



    letter-spacing: 1.5px;



}







.navigation {



    display: flex;



    align-items: center;



    gap: 36px;



}







.navigation > a {



    font-size: 12px;



    font-weight: 600;



    transition: color 0.2s ease;



}







.navigation > a:hover {



    color: #728c4e;



}







.navigation .nav-cta {



    min-height: 44px;



    padding: 0 17px;







    display: inline-flex;



    align-items: center;



    gap: 12px;







    color: var(--white);



    background: var(--forest);







    border-radius: var(--radius-small);



}







.navigation .nav-cta:hover {



    color: var(--accent);



    background: var(--forest-light);



}







.nav-cta span {



    font-size: 17px;



}







.menu-toggle,



.mobile-navigation {



    display: none;



}











/* ---------- 5. Hero ---------- */







.hero {



    position: relative;



    isolation: isolate;



    overflow: hidden;







    min-height: 650px;



    padding: 100px 0 105px;







    color: var(--white);



    background: var(--forest);



}







.hero-pattern {



    position: absolute;



    z-index: -1;



    inset: 0;







    background-image:



        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),



        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);







    background-size: 55px 55px;







    mask-image: linear-gradient(to right, black, transparent 90%);



}







.hero-grid {



    display: grid;



    grid-template-columns: 1.08fr 0.92fr;



    align-items: center;



    gap: 65px;



}







.hero-content {



    position: relative;



    z-index: 2;



}







.eyebrow {



    display: flex;



    align-items: center;



    gap: 11px;







    font-size: 10px;



    font-weight: 700;



    letter-spacing: 1.7px;



}







.hero-eyebrow {



    color: #c3cfbf;



    margin-bottom: 30px;



}







.status-dot {



    width: 8px;



    height: 8px;



    flex-shrink: 0;







    border-radius: 50%;



    background: var(--accent);







    box-shadow: 0 0 0 5px rgba(184, 214, 124, 0.12);



}







.hero h1 {



    margin-bottom: 27px;







    font-size: clamp(45px, 5.4vw, 74px);



    font-weight: 700;



    line-height: 1.06;



    letter-spacing: -4px;



}







.hero h1 span {



    color: var(--accent);



}







.hero-description {



    max-width: 475px;







    color: #bdc7bf;



    font-size: 15px;



    line-height: 1.9;



}







.hero-actions {



    display: flex;



    flex-wrap: wrap;



    gap: 12px;



    margin-top: 32px;



}







.hero-bottom {



    display: flex;



    align-items: center;



    gap: 13px;



    margin-top: 56px;



}







.hero-line {



    width: 35px;



    height: 1px;



    flex-shrink: 0;







    background: var(--accent);



}







.hero-bottom p {



    color: #b5c0b7;



    font-size: 11px;



}











/* Hero visual */







.hero-visual {



    position: relative;



    padding-bottom: 30px;



}







.visual-image {



    position: relative;



    overflow: hidden;







    min-height: 420px;







    background:



        linear-gradient(145deg, rgba(15, 28, 20, 0.12), rgba(10, 19, 14, 0.94)),



        url("https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?auto=format&fit=crop&w=1100&q=85")



        center / cover no-repeat;







    border: 1px solid rgba(255, 255, 255, 0.12);



    border-radius: var(--radius-medium);



}







.image-overlay {



    position: absolute;



    inset: 0;







    background:



        linear-gradient(



            180deg,



            rgba(12, 24, 17, 0.2) 0%,



            transparent 40%,



            rgba(12, 24, 17, 0.9) 100%



        );



}







.visual-top {



    position: absolute;



    top: 22px;



    left: 22px;



    right: 22px;







    display: flex;



    justify-content: space-between;



    gap: 12px;







    color: var(--white);



    font-size: 9px;



    font-weight: 700;



    letter-spacing: 1.3px;



}







.visual-bottom {



    position: absolute;



    bottom: 26px;



    left: 25px;



    right: 25px;







    display: flex;



    align-items: center;



    gap: 16px;



}







.visual-symbol {



    width: 58px;



    height: 58px;



    flex-shrink: 0;







    display: grid;



    place-items: center;







    color: var(--forest);



    background: var(--accent);







    border-radius: 10px;







    font-family: var(--font-heading);



    font-size: 18px;



    font-weight: 800;



}







.visual-bottom strong {



    font-family: var(--font-heading);



    font-size: 17px;



}







.visual-bottom p {



    margin-top: 5px;



    color: #c9d1c9;



    font-size: 12px;



}







.floating-card {



    position: absolute;



    right: -22px;



    bottom: 10px;







    display: flex;



    align-items: center;



    gap: 14px;







    padding: 18px;







    color: var(--text);



    background: var(--white);







    border: 1px solid var(--border);



    border-radius: 12px;







    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);



}







.floating-icon {



    width: 39px;



    height: 39px;



    flex-shrink: 0;







    display: grid;



    place-items: center;







    color: var(--forest);



    background: #edf3df;







    border-radius: 8px;







    font-size: 20px;



}







.floating-card strong {



    display: block;



    font-size: 12px;



}







.floating-card p {



    margin-top: 4px;



    color: var(--muted);



    font-size: 10px;



}







.visual-caption {



    display: flex;



    justify-content: space-between;



    gap: 12px;







    margin-top: 17px;







    color: #9ba99d;



    font-size: 9px;



    font-weight: 700;



    letter-spacing: 1.2px;



}







.hero-index {



    position: absolute;



    right: 30px;



    bottom: 25px;







    display: flex;



    align-items: center;



    gap: 12px;







    color: #8f9f92;



    font-size: 10px;



}







.index-line {



    width: 45px;



    height: 1px;



    background: var(--accent);



}











/* ---------- 6. Service ticker ---------- */







.service-ticker {



    overflow: hidden;



    background: var(--accent);



}







.ticker-inner {



    min-height: 76px;



    padding: 18px 32px;







    display: flex;



    align-items: center;



    justify-content: space-around;



    gap: 25px;







    white-space: nowrap;



}







.ticker-inner span {



    color: var(--forest);



    font-family: var(--font-heading);



    font-size: 11px;



    font-weight: 800;



    letter-spacing: 1.4px;



}







.ticker-inner i {



    width: 5px;



    height: 5px;



    flex-shrink: 0;







    background: var(--forest);



    border-radius: 50%;



}











/* ---------- 7. Section headings ---------- */







.section-heading {



    display: flex;



    align-items: flex-end;



    justify-content: space-between;



    gap: 50px;







    margin-bottom: 52px;



}







.section-heading h2,



.about-content h2 {



    font-size: clamp(36px, 4vw, 52px);



    font-weight: 700;



    letter-spacing: -2.6px;



}







.section-heading h2 span,



.about-content h2 span {



    color: #7b8c65;



}







.section-intro {



    max-width: 390px;



    color: var(--muted);



    font-size: 14px;



    line-height: 1.9;



}











/* ---------- 8. Service cards ---------- */







.services-section {



    background: var(--white);



}







.services-grid {



    display: grid;



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



    gap: 20px;



}







.service-card {



    min-height: 390px;



    padding: 28px;







    display: flex;



    flex-direction: column;



    align-items: flex-start;







    background: #fbfbf8;



    border: 1px solid var(--border);



    border-radius: var(--radius-medium);







    transition:



        transform 0.3s ease,



        border-color 0.3s ease,



        box-shadow 0.3s ease;



}







.service-card:hover {



    transform: translateY(-6px);



    border-color: #bdcda4;



    box-shadow: 0 20px 45px rgba(23, 37, 30, 0.07);



}







.service-card-featured {



    background: var(--forest);



    color: var(--white);



    border-color: var(--forest);



}







.card-top {



    width: 100%;



    margin-bottom: 35px;







    display: flex;



    align-items: flex-start;



    justify-content: space-between;



}







.card-number {



    color: #929b8b;



    font-size: 11px;



    font-weight: 700;



    letter-spacing: 1px;



}







.service-card-featured .card-number {



    color: #b8c4b8;



}







.card-icon {



    width: 58px;



    height: 58px;







    display: grid;



    place-items: center;







    color: var(--forest);



    background: #eaf0df;







    border-radius: 12px;



}







.card-icon svg {



    width: 35px;



    height: 35px;



}







.service-card h3 {



    margin-bottom: 14px;



    font-size: 21px;



    font-weight: 700;



    letter-spacing: -0.7px;



}







.service-card > p {



    margin-bottom: 23px;







    color: var(--muted);



    font-size: 13px;



    line-height: 1.9;



}







.service-card-featured > p {



    color: #c0c9c0;



}







.service-tags {



    display: flex;



    flex-wrap: wrap;



    gap: 7px;







    margin-bottom: 27px;



}







.service-tags span {



    padding: 6px 9px;







    color: #5d6b54;



    background: #edf1e6;







    border-radius: 4px;







    font-size: 10px;



    font-weight: 600;



}







.service-card-featured .service-tags span {



    color: #e2e9dd;



    background: #2c4032;



}







.card-link {



    width: 100%;



    margin-top: auto;



    padding-top: 18px;







    display: flex;



    align-items: center;



    justify-content: space-between;



    gap: 12px;







    border-top: 1px solid var(--border);







    font-size: 11px;



    font-weight: 700;







    transition: color 0.2s ease;



}







.card-link:hover {



    color: #7b925b;



}







.service-card-featured .card-link {



    border-color: rgba(255, 255, 255, 0.14);



}







.card-link span {



    font-size: 17px;



}











/* ---------- 9. About ---------- */







.about-section {



    background: var(--cream);



}







.about-grid {



    display: grid;



    grid-template-columns: 0.9fr 1.1fr;



    align-items: center;



    gap: 95px;



}







.about-visual {



    min-width: 0;



}







.about-image {



    position: relative;



    overflow: hidden;







    min-height: 510px;







    background:



        linear-gradient(180deg, rgba(20, 37, 27, 0.08), rgba(20, 37, 27, 0.8)),



        url("https://images.unsplash.com/photo-1641893823219-38b433f736c0?auto=format&fit=crop&w=1000&q=85")



        center / cover no-repeat;







    border-radius: var(--radius-medium);



}







.about-image-overlay {



    position: absolute;



    inset: 0;







    background: linear-gradient(



        140deg,



        rgba(23, 37, 30, 0.12),



        transparent 50%,



        rgba(23, 37, 30, 0.55)



    );



}







.about-image-label {



    position: absolute;



    top: 23px;



    left: 22px;



    right: 22px;







    display: flex;



    justify-content: space-between;



    gap: 12px;







    color: var(--white);



    font-size: 9px;



    font-weight: 700;



    letter-spacing: 1px;



}







.about-stamp {



    position: absolute;



    right: 25px;



    bottom: 25px;







    width: 100px;



    height: 100px;







    display: flex;



    flex-direction: column;



    align-items: center;



    justify-content: center;







    color: var(--forest);



    background: var(--accent);







    border-radius: 50%;



}







.about-stamp span {



    font-family: var(--font-heading);



    font-size: 26px;



    font-weight: 800;



    letter-spacing: -2px;



}







.about-stamp small {



    font-size: 7px;



    font-weight: 800;



    letter-spacing: 2px;



}







.about-image-caption {



    margin-top: 15px;







    color: #76806e;



    font-size: 9px;



    font-weight: 700;



    letter-spacing: 1.5px;



}







.about-content h2 {



    margin-bottom: 25px;



    font-size: clamp(34px, 3.5vw, 46px);



}







.about-content > p {



    margin-bottom: 18px;







    color: #6d756d;



    font-size: 14px;



    line-height: 1.95;



}







.values-list {



    display: grid;



    gap: 19px;







    margin: 30px 0;



}







.value-item {



    display: flex;



    align-items: flex-start;



    gap: 14px;



}







.value-check {



    width: 25px;



    height: 25px;



    flex-shrink: 0;







    display: grid;



    place-items: center;







    color: var(--forest);



    background: #e3ebd5;







    border-radius: 50%;







    font-size: 12px;



    font-weight: 800;



}







.value-item strong {



    display: block;



    margin-bottom: 3px;







    font-size: 13px;



}







.value-item p {



    color: var(--muted);



    font-size: 12px;



}







.about-content .button {



    margin-top: 5px;



}











/* ---------- 10. Sectors ---------- */







.sectors-section {



    background: var(--white);



}







.sectors-grid {



    display: grid;



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



    gap: 20px;



}







.sector-card {



    position: relative;



    isolation: isolate;



    overflow: hidden;







    min-height: 410px;







    display: flex;



    align-items: flex-end;







    color: var(--white);



    background-color: var(--forest);







    border-radius: var(--radius-medium);







    background-position: center;



    background-size: cover;







    transition: transform 0.3s ease;



}







.sector-card:hover {



    transform: translateY(-5px);



}







.sector-residential {



    background-image: url(



        "https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=900&q=85"



    );



}







.sector-commercial {



    background-image: url(



        "https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=900&q=85"



    );



}







.sector-industrial {



    background-image: url(



        "https://images.unsplash.com/photo-1565008447742-97f6f38c985c?auto=format&fit=crop&w=900&q=85"



    );



}







.sector-overlay {



    position: absolute;



    z-index: -1;



    inset: 0;







    background: linear-gradient(



        180deg,



        rgba(10, 20, 14, 0.05) 0%,



        rgba(10, 20, 14, 0.45) 45%,



        rgba(10, 20, 14, 0.94) 100%



    );



}







.sector-content {



    width: 100%;



    padding: 27px;



}







.sector-number {



    display: inline-block;



    margin-bottom: 18px;







    color: var(--accent);



    font-size: 9px;



    font-weight: 700;



    letter-spacing: 1.5px;



}







.sector-content h3 {



    margin-bottom: 13px;







    font-size: 27px;



    font-weight: 700;



    letter-spacing: -1px;



}







.sector-content p {



    max-width: 300px;



    margin-bottom: 24px;







    color: #d2d9d2;



    font-size: 12px;



    line-height: 1.9;



}







.sector-link {



    display: flex;



    align-items: center;



    justify-content: space-between;



    gap: 12px;







    padding-top: 16px;







    border-top: 1px solid rgba(255, 255, 255, 0.25);







    font-size: 10px;



    font-weight: 700;



}







.sector-link span {



    font-size: 17px;



}







.sector-link:hover {



    color: var(--accent);



}











/* ---------- 11. Contact ---------- */







.contact-section {



    position: relative;



    isolation: isolate;



    overflow: hidden;







    padding: 100px 0;







    color: var(--white);



    background: var(--forest);



}







.contact-pattern {



    position: absolute;



    z-index: -1;



    inset: 0;







    background-image:



        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),



        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);







    background-size: 50px 50px;



}







.contact-grid {



    display: grid;



    grid-template-columns: 1fr 0.8fr;



    align-items: center;



    gap: 100px;



}







.section-label-light {



    color: var(--accent);



}







.contact-content h2 {



    margin-bottom: 25px;







    font-size: clamp(42px, 5vw, 62px);



    font-weight: 700;



    letter-spacing: -3px;



}







.contact-content h2 span {



    color: var(--accent);



}







.contact-content > p {



    max-width: 490px;







    color: #c1cbc2;



    font-size: 14px;



    line-height: 1.95;



}







.contact-points {



    display: flex;



    flex-wrap: wrap;



    gap: 10px;







    margin-top: 30px;



}







.contact-points span {



    padding: 9px 12px;







    color: #e0e7df;



    border: 1px solid rgba(255, 255, 255, 0.17);



    border-radius: 5px;







    font-size: 10px;



    font-weight: 600;



}







.contact-panel {



    padding: 32px;







    color: var(--text);



    background: var(--white);







    border-radius: var(--radius-medium);



}







.contact-panel-top {



    display: flex;



    justify-content: space-between;



    gap: 12px;







    margin-bottom: 34px;



    padding-bottom: 16px;







    border-bottom: 1px solid var(--border);







    color: #7c8872;



    font-size: 9px;



    font-weight: 700;



    letter-spacing: 1px;



}







.contact-panel h3 {



    margin-bottom: 15px;







    font-size: 24px;



    font-weight: 700;



    letter-spacing: -1px;



}







.contact-panel > p {



    margin-bottom: 26px;







    color: var(--muted);



    font-size: 13px;



    line-height: 1.9;



}







.contact-button {



    width: 100%;



}







.contact-note {



    display: block;



    margin-top: 17px;







    color: var(--muted);



    font-size: 10px;



    line-height: 1.8;



    text-align: center;



}











/* ---------- 12. Footer ---------- */







.site-footer {



    padding: 42px 0 20px;



    background: #101a14;



    color: var(--white);



}







.footer-main {



    display: flex;



    align-items: center;



    justify-content: space-between;



    gap: 35px;







    padding-bottom: 35px;







    border-bottom: 1px solid rgba(255, 255, 255, 0.12);



}







.footer-brand .brand-mark {



    background: #2a3c30;



}







.footer-brand .brand-text strong {



    color: var(--white);



}







.footer-brand .brand-text small {



    color: #a7b2a8;



}







.footer-main > p {



    max-width: 360px;







    color: #aeb9b0;



    font-size: 11px;



    line-height: 1.9;



}







.back-to-top {



    flex-shrink: 0;







    color: var(--accent);



    font-size: 11px;



    font-weight: 700;



}







.back-to-top:hover {



    color: var(--white);



}







.footer-bottom {



    padding-top: 22px;







    display: flex;



    justify-content: space-between;



    gap: 20px;







    color: #8d9b8f;



    font-size: 10px;



}











/* ---------- 13. Laptop and tablet ---------- */







@media (max-width: 1050px) {







    .container {



        width: min(var(--container), calc(100% - 48px));



    }







    .hero-grid {



        gap: 35px;



    }







    .hero h1 {



        font-size: clamp(46px, 6vw, 65px);



    }







    .visual-image {



        min-height: 390px;



    }







    .floating-card {



        right: -10px;



    }







    .about-grid {



        gap: 50px;



    }







    .contact-grid {



        gap: 50px;



    }







    .service-card {



        padding: 24px;



    }







    .navigation {



        gap: 22px;



    }



}











/* ---------- 14. Tablet ---------- */







@media (max-width: 800px) {







    .section {



        padding: 85px 0;



    }







    .nav-wrapper {



        min-height: 76px;



    }







    .navigation {



        gap: 16px;



    }







    .navigation > a {



        font-size: 11px;



    }







    .navigation .nav-cta {



        padding-inline: 12px;



    }







    .hero {



        padding: 80px 0 90px;



    }







    .hero-grid {



        grid-template-columns: 1fr;



        gap: 55px;



    }







    .hero-content {



        max-width: 650px;



    }







    .hero h1 {



        font-size: clamp(52px, 9vw, 75px);



    }







    .hero-visual {



        width: 100%;



        max-width: 600px;



    }







    .visual-image {



        min-height: 430px;



    }







    .hero-index {



        display: none;



    }







    .ticker-inner {



        justify-content: flex-start;



        gap: 25px;



    }







    .section-heading {



        align-items: flex-start;



        flex-direction: column;



        gap: 20px;



        margin-bottom: 40px;



    }







    .section-intro {



        max-width: 550px;



    }







    .services-grid {



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



    }







    .service-card:last-child {



        grid-column: 1 / -1;



    }







    .service-card {



        min-height: 360px;



    }







    .about-grid {



        grid-template-columns: 1fr;



        gap: 50px;



    }







    .about-visual {



        max-width: 600px;



    }







    .about-image {



        min-height: 450px;



    }







    .about-content {



        max-width: 650px;



    }







    .sectors-grid {



        grid-template-columns: 1fr;



    }







    .sector-card {



        min-height: 340px;



    }







    .contact-grid {



        grid-template-columns: 1fr;



        gap: 45px;



    }







    .contact-panel {



        max-width: 560px;



    }







    .footer-main {



        flex-wrap: wrap;



    }



}











/* ---------- 15. Mobile navigation ---------- */







@media (max-width: 600px) {







    .container {



        width: calc(100% - 36px);



    }







    html {



        scroll-padding-top: 75px;



    }







    .nav-wrapper {



        min-height: 70px;



        gap: 15px;



    }







    .brand {



        gap: 9px;



    }







    .brand-mark {



        width: 41px;



        height: 41px;



        font-size: 17px;



    }







    .brand-text strong {



        font-size: 10px;



    }







    .brand-text small {



        font-size: 8px;



        letter-spacing: 1px;



    }







    .navigation {



        display: none;



    }







    .menu-toggle {



        width: 43px;



        height: 43px;



        flex-shrink: 0;







        display: flex;



        flex-direction: column;



        align-items: center;



        justify-content: center;



        gap: 6px;







        border: 1px solid var(--border);



        border-radius: 8px;







        background: var(--white);



        cursor: pointer;



    }







    .menu-toggle span {



        width: 18px;



        height: 2px;







        background: var(--forest);



        border-radius: 2px;







        transition: transform 0.2s ease;



    }







    .menu-toggle[aria-expanded="true"] span:first-child {



        transform: translateY(4px) rotate(45deg);



    }







    .menu-toggle[aria-expanded="true"] span:last-child {



        transform: translateY(-4px) rotate(-45deg);



    }







    .mobile-navigation {



        position: absolute;



        top: 100%;



        left: 0;



        right: 0;







        padding: 8px 18px 18px;







        flex-direction: column;



        gap: 0;







        background: var(--white);



        border-bottom: 1px solid var(--border);







        box-shadow: 0 20px 30px rgba(0, 0, 0, 0.06);



    }







    .mobile-navigation.is-open {



        display: flex;



    }







    .mobile-navigation a {



        padding: 15px 5px;







        border-bottom: 1px solid var(--border);







        font-size: 13px;



        font-weight: 600;



    }







    .mobile-navigation a:last-child {



        margin-top: 12px;



        padding: 14px;







        color: var(--white);



        background: var(--forest);







        border: 0;



        border-radius: 6px;







        text-align: center;



    }











    /* Mobile hero */







    .hero {



        padding: 65px 0 60px;



    }







    .hero-grid {



        gap: 42px;



    }







    .eyebrow {



        font-size: 9px;



        letter-spacing: 1.1px;



    }







    .hero-eyebrow {



        margin-bottom: 25px;



    }







    .hero h1 {



        margin-bottom: 23px;







        font-size: clamp(43px, 11.5vw, 61px);



        letter-spacing: -2.8px;



        line-height: 1.08;



    }







    .hero-description {



        font-size: 13px;



        line-height: 1.9;



    }







    .hero-actions {



        flex-direction: column;



        align-items: stretch;



        gap: 10px;







        margin-top: 27px;



    }







    .hero-actions .button {



        width: 100%;



    }







    .hero-bottom {



        margin-top: 34px;



    }







    .hero-bottom p {



        font-size: 10px;



    }







    .visual-image {



        min-height: 340px;



        background-position: center;



    }







    .visual-top {



        top: 17px;



        left: 16px;



        right: 16px;







        font-size: 8px;



    }







    .visual-bottom {



        left: 17px;



        right: 17px;



        bottom: 19px;



        gap: 12px;



    }







    .visual-symbol {



        width: 48px;



        height: 48px;



        font-size: 15px;



    }







    .visual-bottom strong {



        font-size: 14px;



    }







    .visual-bottom p {



        font-size: 10px;



    }







    .floating-card {



        right: -25px;



        bottom: 15px;







        gap: 10px;



        padding: 12px;







        max-width: 240px;



    }







    .floating-icon {



        width: 33px;



        height: 33px;



    }







    .floating-card strong {



        font-size: 10px;



    }







    .floating-card p {



        font-size: 9px;



    }







    .visual-caption {



        flex-direction: column;



        gap: 6px;



        font-size: 7px;



    }











    /* Mobile ticker */







    .ticker-inner {



        min-height: 65px;



        padding: 15px 18px;



        gap: 18px;



    }







    .ticker-inner span {



        font-size: 9px;



    }







    .ticker-inner i {



        width: 4px;



        height: 4px;



    }











    /* Mobile section headings */







    .section {



        padding: 70px 0;



    }







    .section-label {



        margin-bottom: 17px;



        font-size: 9px;



        letter-spacing: 1.5px;



    }







    .section-heading {



        gap: 18px;



        margin-bottom: 30px;



    }







    .section-heading h2,



    .about-content h2 {



        font-size: clamp(32px, 8.3vw, 43px);



        letter-spacing: -1.8px;



    }







    .section-intro {



        font-size: 13px;



    }











    /* Mobile services */







    .services-grid {



        grid-template-columns: 1fr;



        gap: 14px;



    }







    .service-card,



    .service-card:last-child {



        grid-column: auto;



        min-height: auto;



        padding: 24px;



    }







    .card-top {



        margin-bottom: 25px;



    }







    .card-icon {



        width: 50px;



        height: 50px;



    }







    .card-icon svg {



        width: 30px;



        height: 30px;



    }







    .service-card h3 {



        font-size: 20px;



    }







    .service-card > p {



        font-size: 12px;



    }







    .card-link {



        margin-top: 5px;



    }











    /* Mobile about */







    .about-grid {



        gap: 38px;



    }







    .about-image {



        min-height: 360px;



    }







    .about-image-label {



        top: 17px;



        left: 15px;



        right: 15px;







        font-size: 8px;



    }







    .about-stamp {



        right: 16px;



        bottom: 16px;







        width: 78px;



        height: 78px;



    }







    .about-stamp span {



        font-size: 22px;



    }







    .about-image-caption {



        font-size: 8px;



        letter-spacing: 1px;



    }







    .about-content > p {



        font-size: 13px;



    }







    .values-list {



        gap: 17px;



        margin: 25px 0;



    }







    .about-content .button {



        width: 100%;



        padding-inline: 12px;



        gap: 10px;







        font-size: 11px;



    }











    /* Mobile sectors */







    .sectors-grid {



        gap: 14px;



    }







    .sector-card {



        min-height: 340px;



    }







    .sector-content {



        padding: 22px;



    }







    .sector-content h3 {



        font-size: 25px;



    }







    .sector-content p {



        font-size: 12px;



    }











    /* Mobile contact */







    .contact-section {



        padding: 70px 0;



    }







    .contact-grid {



        gap: 35px;



    }







    .contact-content h2 {



        font-size: clamp(40px, 10vw, 53px);



        letter-spacing: -2px;



    }







    .contact-content > p {



        font-size: 13px;



    }







    .contact-points {



        gap: 7px;



    }







    .contact-points span {



        padding: 8px 9px;



        font-size: 9px;



    }







    .contact-panel {



        padding: 23px;



    }







    .contact-panel-top {



        margin-bottom: 25px;



        font-size: 8px;



    }







    .contact-panel h3 {



        font-size: 22px;



    }







    .contact-panel > p {



        font-size: 12px;



    }











    /* Mobile footer */







    .site-footer {



        padding-top: 32px;



    }







    .footer-main {



        align-items: flex-start;



        flex-direction: column;



        gap: 22px;







        padding-bottom: 27px;



    }







    .footer-main > p {



        font-size: 11px;



    }







    .footer-bottom {



        flex-direction: column;



        gap: 10px;







        font-size: 9px;



        line-height: 1.8;



    }







}











/* ---------- 16. Small phones ---------- */







@media (max-width: 360px) {







    .container {



        width: calc(100% - 28px);



    }







    .brand-text strong {



        font-size: 9px;



    }







    .hero h1 {



        font-size: 41px;



    }







    .visual-image {



        min-height: 300px;



    }







    .floating-card {



        right: 5px;



        padding: 10px;



    }







    .section-heading h2,



    .about-content h2 {



        font-size: 31px;



    }







    .service-card {



        padding: 20px;



    }







    .contact-panel {



        padding: 19px;



    }







}











/* ---------- 17. Reduced motion ---------- */







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







    html {



        scroll-behavior: auto;



    }







    *,



    *::before,



    *::after {



        animation-duration: 0.01ms !important;



        animation-iteration-count: 1 !important;



        transition-duration: 0.01ms !important;



    }







}







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

   J&P IRONLEAF WORKS — MOTION & INTERACTION ENHANCEMENTS

   Additive layer: preserves the existing design system.

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



/* Cinematic hero entrance */

@keyframes jpHeroContentIn {

    from { opacity: 0; transform: translate3d(0, 30px, 0); }

    to   { opacity: 1; transform: translate3d(0, 0, 0); }

}



@keyframes jpHeroVisualIn {

    from { opacity: 0; transform: translate3d(0, 24px, 0) scale(.975); }

    to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }

}



@keyframes jpHeroEyebrowIn {

    from { opacity: 0; transform: translate3d(0, 12px, 0); }

    to   { opacity: 1; transform: translate3d(0, 0, 0); }

}



.hero-content {

    animation: jpHeroContentIn 850ms cubic-bezier(.2, .7, .2, 1) both;

}



.hero-eyebrow {

    animation: jpHeroEyebrowIn 650ms 120ms cubic-bezier(.2, .7, .2, 1) both;

}



.hero-visual {

    animation: jpHeroVisualIn 1050ms 180ms cubic-bezier(.2, .7, .2, 1) both;

}



/* Slow, gentle floating movement */

@keyframes jpFloatImage {

    0%, 100% { transform: translate3d(0, 0, 0); }

    50%      { transform: translate3d(0, -9px, 0); }

}



@keyframes jpFloatCard {

    0%, 100% { transform: translate3d(0, 0, 0); }

    50%      { transform: translate3d(0, -7px, 0); }

}



.hero-visual .visual-image {

    animation: jpFloatImage 7s ease-in-out 1.2s infinite;

    will-change: transform;

}



.hero-visual .floating-card {

    animation: jpFloatCard 5.5s ease-in-out 1.5s infinite;

    will-change: transform;

}



/* Scroll reveal: content enters only as it approaches the viewport */

.scroll-reveal {

    opacity: 0;

    transform: translate3d(0, 26px, 0);

    transition:

        opacity 720ms cubic-bezier(.2, .65, .25, 1),

        transform 720ms cubic-bezier(.2, .65, .25, 1);

    transition-delay: var(--reveal-delay, 0ms);

}



.scroll-reveal.is-visible {

    opacity: 1;

    transform: translate3d(0, 0, 0);

}



/* Headings receive a slightly more deliberate entrance */

.section-heading.scroll-reveal,

.about-content > .section-label.scroll-reveal,

.about-content > h2.scroll-reveal,

.contact-content > .section-label.scroll-reveal,

.contact-content > h2.scroll-reveal {

    transform: translate3d(0, 32px, 0);

}



.section-heading.scroll-reveal.is-visible,

.about-content > .section-label.scroll-reveal.is-visible,

.about-content > h2.scroll-reveal.is-visible,

.contact-content > .section-label.scroll-reveal.is-visible,

.contact-content > h2.scroll-reveal.is-visible {

    transform: translate3d(0, 0, 0);

}



/* Service card interaction */

.service-card {

    position: relative;

    isolation: isolate;

    overflow: hidden;

    transition:

        transform 420ms cubic-bezier(.2, .7, .2, 1),

        border-color 350ms ease,

        box-shadow 420ms ease,

        background-color 350ms ease;

}



.service-card::before {

    content: "";

    position: absolute;

    z-index: -1;

    inset: 0;

    pointer-events: none;

    opacity: 0;

    background: radial-gradient(

        340px circle at var(--pointer-x, 50%) var(--pointer-y, 50%),

        rgba(184, 214, 124, .17),

        transparent 68%

    );

    transition: opacity 350ms ease;

}



.service-card:hover::before {

    opacity: 1;

}



.service-card:hover {

    transform: translateY(-9px);

    border-color: rgba(159, 190, 97, .8);

    box-shadow: 0 24px 55px rgba(23, 37, 30, .12);

}



.card-icon {

    transition:

        transform 420ms cubic-bezier(.2, .7, .2, 1),

        color 300ms ease,

        background-color 300ms ease;

}



.service-card:hover .card-icon {

    transform: translateY(-4px) rotate(-5deg);

    background: var(--accent);

}



.card-icon svg {

    transition: transform 420ms cubic-bezier(.2, .7, .2, 1);

}



.service-card:hover .card-icon svg {

    transform: scale(1.08);

}



.card-link span,

.sector-link span,

.button span {

    display: inline-block;

    transition: transform 300ms cubic-bezier(.2, .7, .2, 1);

}



.card-link:hover span,

.sector-link:hover span,

.button:hover span {

    transform: translate(3px, -3px);

}



/* Sector cards: richer image movement and layered hover response */

.sector-card {

    transition:

        transform 500ms cubic-bezier(.2, .7, .2, 1),

        box-shadow 500ms ease;

    box-shadow: 0 8px 24px rgba(16, 26, 20, .08);

}



.sector-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 24px 48px rgba(16, 26, 20, .2);

}



.sector-card .sector-overlay {

    transition: opacity 450ms ease, background 450ms ease;

}



.sector-card:hover .sector-overlay {

    background: linear-gradient(

        180deg,

        rgba(10, 20, 14, .12) 0%,

        rgba(10, 20, 14, .52) 42%,

        rgba(10, 20, 14, .97) 100%

    );

}



.sector-content {

    transform: translateY(5px);

    transition: transform 450ms cubic-bezier(.2, .7, .2, 1);

}



.sector-card:hover .sector-content {

    transform: translateY(0);

}



.sector-number {

    transition: letter-spacing 350ms ease, color 350ms ease;

}



.sector-card:hover .sector-number {

    letter-spacing: 2px;

    color: #d0e99a;

}



/* Buttons and contact panel */

.button {

    position: relative;

    overflow: hidden;

    transition:

        transform 300ms cubic-bezier(.2, .7, .2, 1),

        box-shadow 300ms ease,

        background-color 250ms ease,

        color 250ms ease,

        border-color 250ms ease;

}



.button:hover {

    transform: translateY(-3px);

    box-shadow: 0 12px 24px rgba(10, 20, 14, .14);

}



.contact-panel {

    transition:

        transform 500ms cubic-bezier(.2, .7, .2, 1),

        box-shadow 500ms ease;

    box-shadow: 0 18px 48px rgba(0, 0, 0, .12);

}



.contact-panel:hover {

    transform: translateY(-5px);

    box-shadow: 0 26px 58px rgba(0, 0, 0, .2);

}



.contact-points span {

    transition:

        color 250ms ease,

        background-color 250ms ease,

        border-color 250ms ease,

        transform 250ms ease;

}



.contact-points span:hover {

    color: var(--forest);

    background: var(--accent);

    border-color: var(--accent);

    transform: translateY(-3px);

}



/* Continuous ticker; JS creates a second accessible visual copy */

.service-ticker {

    position: relative;

}



.ticker-inner {

    display: flex;

    justify-content: flex-start;

    overflow: hidden;

    padding-inline: 0;

}



.ticker-track {

    min-height: 76px;

    padding: 18px 25px;

    display: flex;

    flex: 0 0 auto;

    align-items: center;

    justify-content: space-around;

    gap: 25px;

    white-space: nowrap;

    animation: jpTickerScroll 34s linear infinite;

}



.ticker-track-clone {

    animation-delay: 0s;

}



@keyframes jpTickerScroll {

    from { transform: translateX(0); }

    to   { transform: translateX(-100%); }

}



.service-ticker:hover .ticker-track {

    animation-play-state: paused;

}



/* Keyboard focus remains visible and consistent */

.button:focus-visible,

.card-link:focus-visible,

.sector-link:focus-visible,

.navigation a:focus-visible,

.mobile-navigation a:focus-visible,

.menu-toggle:focus-visible {

    outline: 2px solid var(--accent-dark);

    outline-offset: 4px;

}



/* Mobile: retain motion but keep it light and avoid awkward overflow */

@media (max-width: 800px) {

    .hero-visual .visual-image {

        animation-duration: 9s;

    }



    .hero-visual .floating-card {

        animation-duration: 7s;

    }



    .service-card:hover,

    .sector-card:hover,

    .contact-panel:hover {

        transform: translateY(-3px);

    }



    .ticker-track {

        min-height: 65px;

        gap: 18px;

        padding-inline: 18px;

        animation-duration: 27s;

    }

}



@media (max-width: 600px) {

    .hero-visual .visual-image,

    .hero-visual .floating-card {

        animation: none;

        will-change: auto;

    }



    .scroll-reveal {

        transform: translate3d(0, 18px, 0);

        transition-duration: 600ms;

    }



    .service-card:hover {

        transform: translateY(-3px);

    }



    .sector-content {

        transform: none;

    }



    .contact-panel:hover {

        transform: none;

    }



    .ticker-track {

        animation-duration: 24s;

    }

}



/* Reduced-motion accessibility: remove continuous and entrance motion */

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

    html {

        scroll-behavior: auto;

    }



    .hero-content,

    .hero-eyebrow,

    .hero-visual,

    .hero-visual .visual-image,

    .hero-visual .floating-card,

    .ticker-track {

        animation: none !important;

    }



    .scroll-reveal,

    .scroll-reveal.is-visible {

        opacity: 1 !important;

        transform: none !important;

        transition: none !important;

    }



    .service-card,

    .sector-card,

    .contact-panel,

    .button,

    .card-icon,

    .card-icon svg,

    .contact-points span {

        transition: none !important;

    }



    .service-card:hover,

    .sector-card:hover,

    .contact-panel:hover,

    .button:hover {

        transform: none !important;

    }

}


/* =========================================
   J&P — COMPACT PROJECT ENQUIRY FORM
========================================= */

.project-enquiry-form {
    display: flex;
    flex-direction: column;
    gap: 11px;
    width: 100%;
    margin-top: 16px;
}

/* TWO-COLUMN ROW */

.project-enquiry-form .form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

/* FORM GROUP */

.project-enquiry-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

/* LABELS */

.project-enquiry-form label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--ink, #173D30);
}

/* INPUTS & SELECT */

.project-enquiry-form input,
.project-enquiry-form select {
    width: 100%;
    height: 40px;
    padding: 0 11px;

    font-family: inherit;
    font-size: 0.8rem;

    color: var(--ink, #173D30);
    background: var(--surface, #fff);

    border: 1px solid var(--line, #dedfe7);
    border-radius: 3px;
    outline: none;

    transition: border-color 0.2s ease;
}

/* TEXTAREA */

.project-enquiry-form textarea {
    width: 100%;
    height: 76px;
    min-height: 76px;
    padding: 10px 11px;

    font-family: inherit;
    font-size: 0.8rem;
    line-height: 1.5;

    color: var(--ink, #173D30);
    background: var(--surface, #fff);

    border: 1px solid var(--line, #dedfe7);
    border-radius: 3px;
    outline: none;

    resize: vertical;
    transition: border-color 0.2s ease;
}

/* PLACEHOLDERS */

.project-enquiry-form input::placeholder,
.project-enquiry-form textarea::placeholder {
    color: var(--muted, #87918c);
    opacity: 0.75;
}

/* FOCUS */

.project-enquiry-form input:focus,
.project-enquiry-form select:focus,
.project-enquiry-form textarea:focus {
    border-color: #537d68;
}

/* SELECT */

.project-enquiry-form select {
    cursor: pointer;
}

/* SUBMIT BUTTON */

.project-enquiry-form .contact-button {
    width: 100%;
    min-height: 43px;
    padding: 11px 15px;
    margin-top: 2px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    font-size: 0.75rem;
    cursor: pointer;
}

/* NOTE */

.project-enquiry-form .contact-note {
    font-size: 0.68rem;
    line-height: 1.4;
    color: var(--muted, #87918c);
}

/* =========================================
   DARK MODE
========================================= */

.dark .project-enquiry-form label {
    color: var(--ink, #f4f4f8);
}

.dark .project-enquiry-form input,
.dark .project-enquiry-form select,
.dark .project-enquiry-form textarea {
    background: var(--surface, #17171d);
    color: var(--ink, #f4f4f8);
    border-color: var(--line, #2d2d38);
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .project-enquiry-form {
        gap: 12px;
    }

    .project-enquiry-form .form-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .project-enquiry-form input,
    .project-enquiry-form select {
        height: 42px;
        font-size: 16px;
    }

    .project-enquiry-form textarea {
        height: 85px;
        min-height: 85px;
        font-size: 16px;
    }

}
/* =========================================
   J&P BRAND LOGO
========================================= */

.brand-mark {
        width: 87px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.brand-mark img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* Footer logo */
.footer-brand .brand-mark {
    width: 62px;
    height: 52px;
}

/* Mobile */
@media (max-width: 600px) {
    .brand-mark {
        width: 48px;
        height: 42px;
    }

    .footer-brand .brand-mark {
        width: 52px;
        height: 46px;
    }
}
/* =========================================
   FLOATING WHATSAPP BUTTON
========================================= */

.whatsapp-float {
    position: fixed;
    right: 25px;
    bottom: 25px;
    width: 60px;
    height: 60px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #25D366;
    color: #ffffff;

    font-size: 32px;
    text-decoration: none;

    border-radius: 50%;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);

    z-index: 9999;

    transition: all 0.3s ease;
    animation: whatsappPulse 2.5s infinite;
}

.whatsapp-float:hover {
    background: #1ebe5d;
    color: #ffffff;
    transform: translateY(-5px) scale(1.06);
    box-shadow: 0 12px 30px rgba(37, 211, 102, 0.35);
}

/* Tooltip */

.whatsapp-tooltip {
    position: absolute;
    right: 75px;

    background: #17251d;
    color: #ffffff;

    font-size: 13px;
    font-weight: 600;

    padding: 10px 15px;
    border-radius: 8px;

    white-space: nowrap;
    opacity: 0;
    visibility: hidden;

    transform: translateX(8px);
    transition: all 0.3s ease;
}

.whatsapp-float:hover .whatsapp-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* Pulse Animation */

@keyframes whatsappPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
    }

    70% {
        box-shadow: 0 0 0 14px rgba(37, 211, 102, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* Mobile */

@media (max-width: 768px) {
    .whatsapp-float {
        width: 55px;
        height: 55px;
        right: 18px;
        bottom: 18px;
        font-size: 29px;
    }

    .whatsapp-tooltip {
        display: none;
    }
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
    .whatsapp-float {
        animation: none;
        transition: none;
    }
}
/* WhatsApp Icon Fix */

.whatsapp-float {
    display: flex;
    align-items: center;
    justify-content: center;
}

.whatsapp-float svg {
    width: 34px;
    height: 34px;
    display: block;
    fill: #ffffff;
    flex-shrink: 0;
}

.whatsapp-float:hover svg {
    transform: scale(1.08);
    transition: transform 0.3s ease;
}

/* Consistent SVG arrow icons */
.button svg,
.nav-cta svg,
.card-link svg,
.sector-link svg,
.back-to-top svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
    transition: transform 0.3s ease;
}

.button:hover svg,
.nav-cta:hover svg,
.card-link:hover svg,
.sector-link:hover svg {
    transform: translate(3px, -3px);
}

.back-to-top:hover svg {
    transform: translateY(-3px);
}
.floating-icon svg {
    width: 22px;
    height: 22px;
    display: block;
}