/*=========================================================
  ILIT WEBSITE
  style2.css
=========================================================*/
/*=========================================================
ROOT VARIABLES
=========================================================*/

:root {
    --primary: #5B8C6A;
    --primary-dark: #466E53;
    --primary-light: #F2F8F3;

    --secondary: #8DB596;
    --secondary-light: #F2F8F3;

    --text: #2D3B31;
    --text-light: #5C6F61;

    --white: #FFFFFF;
    --off-white: #EAF3ED;/*light green*/
    --border: #D8E6DB;

    --success: #4F8A5B;

    --shadow-sm: 0 2px 8px rgba(0,0,0,.05);
    --shadow: 0 8px 24px rgba(0,0,0,.08);
    --shadow-lg: 0 18px 45px rgba(0,0,0,.12);

    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 22px;

    --container-wide: 1180px;
    --container-narrow: 820px;
    --container-reading: 720px;

    --transition: .28s ease;
}


/* =========================
   RESET
========================= */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    overflow-x: clip;
}

body {
    font-family: "Inter", sans-serif;
    color: var(--text);
    background: var(--white);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}


/*=========================================================
TABLE
=========================================================*/

.table-wrapper{
    overflow-x:auto;
    border-radius:var(--radius-lg);
    background:var(--white);
    box-shadow:var(--shadow);
	will-change:transform;
	-webkit-overflow-scrolling: touch;
}


table {
	border-collapse: collapse;
	width: 100%;
	min-width: 760px;
}

thead{
    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );
    color:var(--white);
}

thead th{
    padding:22px 20px;
    text-align:center;
    font-size:1rem;
    font-weight:700;
}

thead th:first-child{
    text-align:left;
}

tbody td{
    padding:20px;
    border-bottom:1px solid var(--border);
    text-align:center;
    transition:var(--transition);
}

tbody td:first-child{
    text-align:left;
    font-weight:600;
    color:var(--text);
}

tbody tr{
    transition:var(--transition);
}

tbody tr:nth-child(even){
    background:#FAFBFC;
}

tbody tr:hover{
    background:var(--primary-light);
}

/*=========================================================
TYPOGRAPHY
=========================================================*/

h1{
    font-size:clamp(2.7rem,5vw,4.4rem);
    line-height:1.05;
    font-weight:800;
    letter-spacing:-1.5px;
}

h2{
    font-size:clamp(2rem,4vw,3rem);
    line-height:1.15;
    font-weight:700;
    margin-bottom:20px;
}

h3{
    font-size:clamp(1.15rem, 2.8vw, 1.75rem);
    font-weight:700;
    margin-bottom:14px;
}

h4{
    font-size:1.05rem;
    margin-bottom:12px;
}

p{
    margin-bottom:20px;
    color:var(--text-light);
	text-align:left;
}

/* =========================
   CONTAINERS
========================= */

.container {
    width: min(92%, var(--container-wide));
    margin-inline: auto;
}

.container.narrow {
    width: min(92%, var(--container-narrow));
}

.container.reading {
    width: min(92%, var(--container-reading));
}


/* =========================
   SECTIONS
========================= */

.section {
    padding: 20px 0;
    background: var(--white);
	position:relative;
	margin-top:45px;
	margin-bottom:45px;
}

.section.alt {
    padding: 20px 0;
	background: var(--off-white);
	margin-top:45px;
	margin-bottom:45px;
}

.section.soft {
    background: var(--primary-light);
	margin-top:45px;
	margin-bottom:45px;
}

.section-header {
    max-width: 820px;
    margin: 0 auto 60px;
    text-align: center;
	margin-bottom:45px;
}

.section-header p {
    max-width: 760px;
    margin: 0 auto;
}

.section-label{
    display:inline-block;
    font-size:.85rem;
    text-transform:uppercase;
    letter-spacing:2px;
    color:var(--primary);
    font-weight:700;
    margin-bottom:14px;
}


/*=========================================================
BUTTONS
=========================================================*/

.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:15px 28px;
    background:var(--primary);
    color:white;
    border-radius:10px;
    font-weight:600;
    transition:var(--transition);
    box-shadow:var(--shadow);
	position:relative;
	overflow:hidden;
}

.button:hover{
    background:var(--primary-dark);
    transform:translateY(-2px);
}

.button.secondary{
    background:white;
    color:var(--primary);
    border:2px solid var(--primary);
    box-shadow:none;
}

.button.secondary:hover{
    background:var(--primary-light);
}

.button.small{
    padding:12px 22px;
    font-size:.92rem;
}

/*=======================
Button Flash
====================*/
.button::after{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:120%;
    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.25),
        transparent
    );

    transition:left .55s ease;

}

.button:hover::after{

    left:130%;

}


/* =========================
   HERO
========================= */

.hero {
    position:relative;
	overflow:hidden;
	padding: 25px 0;
    background:
        linear-gradient(
            135deg,
            #FFFFFF 0%,
            #F4FAF4 55%,
            #EAF3ED 100%
        );
}

.hero::before{

    content:"";
	display:block;
    position:absolute;

    right:-180px;
    top:-180px;

    width:520px;
    height:520px;

    border-radius:50%;

    background:rgba(91,140,106,.1);

    z-index:0;

}

.hero::after{

    content:"";
	display:block;
    position:absolute;

    left:-120px;
    bottom:-140px;

    width:380px;
    height:380px;

    border-radius:50%;

    background:rgba(141,181,150,.1);
	z-index:0;
}

.hero-grid{
    display:grid;
    grid-template-columns:1fr; /*1.05fr .95fr; when an image becomes available*/ 
    max-width: 900px;
	margin-inline:auto;
	/*align-items:center;
    gap:70px;
	position:relative;
	z-index:5;
	*/
}

.hero-text {
    text-align: center;
	/*max-width: 850px;
	margin-inline: auto;
	*/
}

.hero-description {
    max-width: 760px;
    margin: 28px auto 32px;
    font-size: 1.15rem;
}

.hero-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;
	/*margin-bottom:40px;*/
}

/*.hero-image{
    animation:fadeIn 1s ease,
	float 6s ease-in-out infinite;
}

.hero-image img{
    width:100%;
    max-width:560px;
    margin-inline:auto;

}
*/

.hero-logo {
    margin-top: 20px; /* Space between the buttons and the logo */
    display: flex;
    justify-content: center;
}

.hero-logo img {
    max-width: 300px; /* Limits the logo size so it doesn't span too wide */
    height: auto;     /* Maintains the original proportions of the image */
}

.eyebrow{
    display:inline-block;
    padding:8px 18px;
    border-radius:999px;
    background:var(--primary-light);
    color:var(--primary);
    font-weight:700;
    margin-bottom:26px;
}
/* =========================
   CONTACT
========================= */

.contact-intro {
    max-width: 800px;
    margin: 0 auto 55px;
    text-align: center;
}

.office-information {
    max-width: 900px;
    margin: 0 auto;
    /*padding-top: 45px;*/
    /*border-top: 10px solid rgba(255,255,255,.25);*/
    text-align: center;
}

.office-locations {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-bottom: 35px;
}

/*.office {
    padding: 25px;
    border-radius: var(--radius);
    background: rgba(255,255,255,.08);
}
*/
.contact-details {
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: center;
    gap: 12px 32px;
}

/*.contact-details div {
    white-space: nowrap;
}
*/

.contact-details a:hover {
    opacity: .8;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1024px) {
    nav ul {
        gap: 18px;
    }

    .container {
        width: min(92%, 960px);
    }
}

@media (max-width: 900px) {
    .office-locations {
        grid-template-columns: 1fr;
    }

    .contact-details {
        grid-template-columns: repeat(2, auto);
    }
	
	.table-wrapper::after {
    content: "Swipe to compare →";
    display: block;
    padding: 10px 16px;
    font-size: .8rem;
    color: var(--text-light);
    text-align: right;
	}
	
    /* Hamburger */

    #menu-button {
        display: flex !important;
        width: 48px;
        height: 48px;
        padding: 0;
        border: none;
        background: transparent !important;
        cursor: pointer;

        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 5px;

        position: relative;
        z-index: 1002;
    }

    #menu-button span {
        display: block !important;
        width: 26px;
        height: 3px;
        padding: 0;
        margin: 0;
        background-color: #2D3B31 !important;
        border-radius: 2px;
        opacity: 1 !important;
        transition: transform .25s ease, opacity .25s ease;
    }


    /* Hamburger → X */

    #menu-button[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    #menu-button[aria-expanded="true"] span:nth-child(2) {
        opacity: 0 !important;
    }

    #menu-button[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }


    /* Navigation panel */

    #site-navigation {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;

        background: var(--white);
        border-top: 1px solid var(--border);
        box-shadow: var(--shadow);

        padding: 4px 5% 10px;

        z-index: 1001;
    }

    #site-navigation.open {
        display: block;
    }


    /* Menu list */

    #site-navigation ul {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 0;

        width: 100%;
        margin: 0;
        padding: 0;

        list-style: none;
    }


    /* Menu items */

    #site-navigation li {
        width: 100%;
        margin: 0;
        padding: 0;
    }


    /* Regular menu links */

    #site-navigation li > a:not(.button) {
        display: block;

        width: 100%;

        padding: 5px 8px;
        margin: 0;

        line-height: 1.3;
    }


    /* Consultation button */

    #site-navigation li > a.button.small {
        display: flex;

        width: 100%;

        padding: 8px 16px;
        margin: 5px 0 2px;

        line-height: 1.3;

        justify-content: center;
    }
}

	.nav-container{
		min-height: 70px;
	}

@media (max-width: 700px) {
    .section {
        padding: 70px 0;
    }

    .contact-details {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .hero-buttons {
    flex-direction: column;
    align-items: center;
	}

	.hero-buttons .button {
    width: min(100%, 360px);
	}
	
	.table-wrapper::after {
    content: "Swipe to compare →";
    display: block;
    padding: 10px 16px;
    font-size: .8rem;
    color: var(--text-light);
    text-align: right;
	}
}
/*============================================
CARDS
========================================*/

.card{
    background:white;
    border:1px solid var(--border);
	box-shadow: 0 4px 18px rgba(45, 59, 49, .06);
	border-radius:var(--radius-lg);
    padding:34px;
	/*--box-shadow:var(--shadow);*/
    transition:var(--transition);
	margin-bottom: 18px;
	will-change:transform;
}

.card:last-child{
	margin-bottom: 0;
}


/*=========================================================
FAQ
=========================================================*/

.faq{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.faq-item{
    background:var(--white);
	border:1px solid var(--border);
	box-shadow: 0 4px 18px rgba(45, 59, 49, .06);
    border-radius:var(--radius);
	/*box-shadow:var(--shadow);*/
    overflow:hidden;
	will-change:transform;
}

.faq-question{
    width:100%;
    padding:24px 28px;
    background:none;
    border:none;
    cursor:pointer;
    text-align:left;
    font-size:1.08rem;
    font-weight:600;
    color:var(--text);
    position:relative;
    transition:var(--transition);
}

.faq-question:hover{
    background:var(--primary-light);
}

.faq-question::after{
    content:"+";
    position:absolute;
    right:28px;
    top:50%;
    transform:translateY(-50%);
    font-size:1.6rem;
    font-weight:300;
    color:var(--primary);
    transition:var(--transition);
}

.faq-item.active .faq-question::after{
    content:"–";
}

.faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height .35s ease;
}

.faq-answer p{
    padding:0 28px 28px;
    margin:0;
}


/*=========================================================
CALL TO ACTION
=========================================================*/

.cta{
    position:relative;
    overflow:hidden;
    padding:110px 0;
    text-align:center;
    color:var(--white);
    background:
		linear-gradient(
			135deg,
			#4F7D5C,
			#7BA885
		);
}

.cta::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    right:-220px;
    top:-220px;
    border-radius:50%;
    background:rgba(255,255,255,.08);

}

.cta::after{
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    left:-120px;
    bottom:-120px;
    border-radius:50%;
    background:rgba(255,255,255,.06);
}

.cta .container{
    position:relative;
    z-index:2;
}

.cta h2{
    color:white;
    margin-bottom:24px;
}

.cta p{
    color:rgba(255,255,255,.92);
    max-width:760px;
    margin:0 auto 40px;
    font-size:1.1rem;
}

.cta .button{
    background:white;
    color:var(--primary);
    box-shadow:none;
}

.cta .button:hover{
    background:#F3F8FF;
    transform:translateY(-3px);
}



/*=========================================================
HEADER
=========================================================*/

header{
    position:sticky;
    top:0;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(10,10,10,.25);
	z-index:1000;
}

.nav-container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    min-height:82px;
	position:relative;
}

.logo{
    font-size:1.5rem;
    font-weight:800;
    color:var(--primary);
	padding-right:5px;
}

nav ul{
    display:flex;
    gap:34px;
    align-items:center;
	list-style:none;
	padding:0;
	margin:0;
}


nav a {
    display: inline-block;
    padding: 4px 4px;            /* Gives the link a button-like footprint */
    font-weight: 500;
    color: var(--text-dark, #333); /* Fallback color for text */
    border-radius: 6px;           /* Subtle rounded corners matching modern buttons */
    background: transparent;      /* Hidden by default (blends with the header background) */
    transition: var(--transition);
    text-decoration: none;        /* Removes default underline */
}


nav a:hover {
    color: var(--primary);        /* Your theme color for the text */
    background: rgba(91, 140, 106, 0.12); /* Soft shade-shift matching your green palette */
}


nav a.active {
    color: #FFFFFF;               /* White text so it pops */
    background: rgba(91, 140, 106, 0.9); /* Solid shift to your theme color */
}

#menu-button{
    display:none;
}

/*=========================================================
FOOTER
=========================================================*/

footer{
    background:#2E4534;
    color:#CBD5E1;
    padding:70px 0;
}

footer h3,
footer h4{
    color:white;
    margin-bottom:10px;
}

footer p{
    color:#CBD5E1;
    margin-bottom:10px;
	line-height: 1.1;
}


/*=========================================================
ACCESSIBILITY
=========================================================*/

a:focus-visible,
button:focus-visible{
    outline:3px solid var(--secondary);
    outline-offset:5px;
}

::selection{
    background:var(--primary);
    color:var(--white);
}

/*=========================================================
REDUCED MOTION
=========================================================*/

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

    *{
        animation:none !important;
        transition:none !important;
        scroll-behavior:auto !important;
    }
}


/*=========================================================
PRINT STYLES
=========================================================*/

@media print{

    header,
    .hero-buttons,
    #menu-button,
    .cta,


    body{

        color:black;
        background:white;

    }

    .section{

        padding:30px 0;

        page-break-inside:avoid;

    }

    .card,
    .step,
    .faq-item{

        box-shadow:none;

        border:1px solid #999;

    }

    a{

        color:black;

        text-decoration:none;

    }

}