:root {
    --gold: #c98f39;
    --gold-hover: #ad772d;
    --dark: #222222;
    --dark-soft: #444444;
    --light: #f5f5f5;
    --text: #222222;
    --text-soft: #555555;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
}


/* HEADER */

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

    padding: 15px 30px;

    background-color: #1f1f1f;
}


/* LOGO */

.logo img {
    width: 170px;
}


/* NAVIGATION */

nav a {
    color: white;
    text-decoration: none;

    margin: 0 12px;
}

nav a.nav-quote {
    color: var(--gold);
    border-bottom: 2px solid var(--gold);
    padding-bottom: 8px;
}


/* PHONE NUMBERS */

.header-contact p {
    color: white;

    margin: 3px 0;
}


/* HERO SECTION */

.hero {
    background-image:
    linear-gradient(
        rgba(0, 0, 0, 0.20),
        rgba(0, 0, 0, 0.20)
    ),
    url("../images/home/hero-1.jpg");

transition: background-image 1s ease-in-out;
    background-size: cover;
    background-position: center center;

    min-height: 500px;

    display: flex;
    flex-direction: column;

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

    text-align: center;

    color: white;
}


/* HERO TITLE */

.hero h1 {
    font-size: 48px;

    margin-bottom: 15px;
}


/* HERO TEXT */

.hero p {
    font-size: 18px;

    margin-bottom: 25px;
}


/* HERO BUTTON */

.hero a {
    color: white;

    text-decoration: none;

    background-color: var(--gold);

    padding: 14px 28px;
}
.stats {
    display: flex;
    background-color: #1f1f1f;
    padding: 12px;
    gap: 12px;
}

.stats div {
    flex: 1;
    background-color: #d8a14a;
    text-align: center;
    padding: 25px 10px;
}

.stats h2 {
    font-size: 48px;
    margin: 0;
    color: #111111;
}

.stats p {
    margin: 8px 0 0;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: #333333;
}
.about {
    display: flex;
    align-items: stretch;
    background-color: #f5f5f5;
}

.about-image {
    width: 50%;
}

.about-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.about-content {
    width: 50%;
    padding: 55px 55px;
    box-sizing: border-box;
}

.about-content h2 {
    font-size: 36px;
    margin-top: 0;
    margin-bottom: 25px;
    color: var(--text);
}

.about-content p {
    font-size: 17px;
    line-height: 1.7;
    color: #555555;
    margin-bottom: 20px;
}

.about-content a {
    display: inline-block;
    margin-top: 10px;
    padding: 14px 28px;

    background-color: var(--gold);
    color: white;

    text-decoration: none;
}
/* =========================
   MATERIALS SECTION
========================= */

.materials {
    padding: 70px 30px;
    background-color: #ffffff;
    text-align: center;
}

.materials h2 {
    font-size: 36px;
    margin-bottom: 40px;
    color: #222222;
}

.materials-grid {
    display: flex;
    gap: 15px;
}

.material-card {
    position: relative;
    width: 33.333%;
    height: 400px;
    overflow: hidden;
}

.material-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.material-content {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 40px;

    padding: 20px;

    background-color: rgba(0, 0, 0, 0.60);

    color: white;
    text-align: center;
}

.material-content h3 {
    margin: 0 0 10px;
    font-size: 26px;
}

.material-content p {
    margin: 0 0 15px;
    font-size: 16px;
}

.material-content a {
    color: var(--gold);
    text-decoration: none;
    font-weight: bold;
}
/* =========================
   WHY CHOOSE US
========================= */

.why-us {
    padding: 80px 50px;

    background-image:
        linear-gradient(
            rgba(0, 0, 0, 0.48),
            rgba(0, 0, 0, 0.48)
        ),
        url("../images/home/process.jpg");

    background-size: cover;
    background-position: center;

    color: white;
    text-align: center;
}

.why-us > h2 {
    font-size: 40px;
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--gold);
}

.why-us > p {
    font-size: 22px;
    margin-bottom: 45px;
}

.why-us div {
    display: inline-block;

    width: 42%;

    vertical-align: top;

    margin: 15px;
    padding: 25px;

    box-sizing: border-box;

    background-color: rgba(0, 0, 0, 0.45);
}

.why-us div h3 {
    color: var(--gold);

    font-size: 21px;

    margin-top: 0;
}

.why-us div p {
    line-height: 1.6;
}

.why-us > a {
    display: inline-block;

    margin-top: 30px;
    padding: 14px 30px;

    background-color: var(--gold);

    color: white;
    text-decoration: none;
}
/* =========================
   4 STEP PROCESS
========================= */

.process {
    padding: 80px 50px;
    background-color: #444444;
    color: white;
}

.process > h2 {
    text-align: center;
    font-size: 38px;
    color: var(--gold);
    margin-top: 0;
    margin-bottom: 40px;
}

.process-layout {
    display: flex;
    align-items: stretch;
    gap: 50px;
}

.process-image {
    width: 50%;
}

.process-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.process-steps {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.process-step {
    margin-bottom: 25px;
}

.process-step h3 {
    margin: 0 0 8px;
    color: var(--gold);
    font-size: 22px;
}

.process-step p {
    margin: 0;
    line-height: 1.6;
    color: #dddddd;
}
/* =========================
   FEATURED WORKS
========================= */

.gallery {
    background-color: #222;
    padding: 70px 30px;
    text-align: center;
}

.gallery h2 {
    color: var(--gold);
    font-size: 36px;
    margin-bottom: 40px;
}


/* Gallery Grid */

.gallery-grid {
    max-width: 1200px;
    margin: 0 auto 35px;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}


/* Individual Image */

.gallery-item {
    position: relative;
    height: 300px;
    overflow: hidden;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    display: block;

    transition: transform 0.4s ease;
}


/* Overlay */

.gallery-overlay {
    position: absolute;

    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.55);

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

    opacity: 0;

    transition: opacity 0.4s ease;
}


.gallery-overlay h3 {
    color: white;
    font-size: 22px;
    margin: 0;
}


/* Mouse Hover */

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-item:hover img {
    transform: scale(1.05);
}


/* Gallery Button */

.gallery-button {
    display: inline-block;

    background-color: var(--gold);
    color: white;

    padding: 13px 28px;

    text-decoration: none;

    margin-top: 15px;

    transition: background-color 0.3s ease;
}

.gallery-button:hover {
    background-color: var(--gold-hover);
}
/* =========================
   LUXURY CTA
========================= */

.luxury-cta {
    min-height: 320px;

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

    text-align: center;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.55),
            rgba(255, 255, 255, 0.55)
        ),
        url("../images/home/hero-1.jpg");

    background-size: cover;
    background-position: center;

    padding: 40px 20px;

    box-sizing: border-box;
}

.luxury-cta h2 {
    margin: 0 0 25px;

    font-size: 34px;
    font-weight: 500;

    color: var(--gold);
}

.luxury-cta a {
    display: inline-block;

    padding: 14px 28px;

    background-color: var(--gold);
    color: white;

    text-decoration: none;
}

.luxury-cta a:hover {
    background-color: var(--gold-hover);
}
/* =========================
   FOOTER
========================= */

.site-footer {
    background-color: #222222;
    color: white;
    padding-top: 70px;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;

    display: flex;
    justify-content: space-between;
    gap: 50px;

    padding: 0 40px 60px;
}

.footer-column {
    flex: 1;
}

.footer-column h3 {
    font-size: 25px;
    margin-top: 0;
    margin-bottom: 25px;

    color: white;
}

.footer-column p {
    color: #dddddd;
    line-height: 1.7;
}

.footer-column > a {
    display: block;

    color: #dddddd;
    text-decoration: none;

    margin-bottom: 14px;
}

.footer-column a:hover {
    color: var(--gold);
}


/* CONTACT LINKS */

.footer-column p a {
    color: #dddddd;
    text-decoration: none;
}

.footer-column p a:hover {
    color: var(--gold);
}


/* SOCIAL LINKS */

.footer-social {
    margin-top: 25px;
}

.footer-social a {
    display: inline-block;

    color: white;
    text-decoration: none;

    border: 1px solid #777777;

    padding: 9px 12px;
    margin-right: 7px;
}

.footer-social a:hover {
    background-color: var(--gold);
    border-color: var(--gold);
}


/* COMPANY / LOGO */

.footer-company {
    text-align: center;
}

.footer-company img {
    width: 150px;
    margin-bottom: 15px;
}


/* COPYRIGHT */

.footer-bottom {
    border-top: 1px solid #444444;

    text-align: center;

    padding: 20px;
}

.footer-bottom p {
    margin: 0;
    color: #aaaaaa;
    font-size: 14px;
}
/* =========================
   FINAL QUOTE CTA
========================= */

.quote-cta {
    text-align: center;

    padding: 70px 20px;

    background-color: #f6f6f6;

    border-top: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
}

.quote-cta h2 {
    max-width: 850px;

    margin: 0 auto 20px;

    font-size: 32px;
    font-weight: 500;

    color: var(--gold);
}

.quote-cta p {
    max-width: 700px;

    margin: 0 auto 30px;

    font-size: 17px;
    line-height: 1.7;

    color: #555555;
}

.quote-cta a {
    display: inline-block;

    padding: 14px 30px;

    background-color: var(--gold);
    color: white;

    text-decoration: none;

    transition: background-color 0.3s ease;
}

.quote-cta a:hover {
    background-color: var(--gold-hover);
}
/* =========================
   REVIEWS
========================= */

.reviews {
    padding: 80px 30px;

    background-color: #f7f7f7;

    text-align: center;
}

.reviews h2 {
    margin-top: 0;
    margin-bottom: 45px;

    font-size: 36px;
    font-weight: 500;

    color: var(--gold);
}

.reviews-grid {
    max-width: 1200px;
    margin: 0 auto 40px;

    display: flex;
    gap: 25px;
}

.review-card {
    flex: 1;

    padding: 35px 30px;

    background-color: #ffffff;
    border-top: 4px solid var(--gold);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);

    box-sizing: border-box;
    transition: transform 0.3s ease;
}

.review-card:hover {
    transform: translateY(-5px);
}

.review-text {
    font-size: 16px;
    line-height: 1.7;

    color: #555555;
}

.review-card h3 {
    margin-bottom: 8px;

    color: #222222;
}

.review-stars {
    color: var(--gold);

    font-size: 20px;

    letter-spacing: 3px;
}


/* REVIEW BUTTONS */

.reviews-buttons {
    margin-top: 35px;
}

.reviews-button,
.google-review-button {
    display: inline-block;

    margin: 8px;

    padding: 14px 28px;

    text-decoration: none;
}

.reviews-button {
    background-color: var(--gold);
    color: white;
}

.google-review-button {
    border: 1px solid #cccccc;

    background-color: white;
    color: #333333;
}

.reviews-button:hover {
    background-color: var(--gold-hover);
}

.google-review-button:hover {
    background-color: #f3f3f3;
}

/* =========================
   MATERIAL PAGES
========================= */


/* HERO */

.material-page-hero {
    min-height: 480px;

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

    text-align: center;

    background-size: cover;
    background-position: center;

    padding: 40px 20px;

    color: white;
}


.quartz-hero {
    background-image:
        linear-gradient(
            rgba(0, 0, 0, 0.40),
            rgba(0, 0, 0, 0.40)
        ),
        url("../images/quartz/quartz-hero.jpg");
}


.material-page-hero-content {
    max-width: 750px;
}


.material-page-hero h1 {
    font-size: 52px;
    margin-bottom: 18px;
}


.material-page-hero p {
    font-size: 19px;
    line-height: 1.6;

    margin-bottom: 30px;
}


.material-page-hero a {
    display: inline-block;

    background-color: #d89b5b;
    color: white;

    padding: 14px 28px;

    text-decoration: none;
}


/* INTRODUCTION */

.material-intro {
    display: flex;

    max-width: 1200px;

    margin: auto;

    min-height: 520px;
}


.material-intro-content {
    width: 50%;

    padding: 70px 60px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}


.material-intro-content h2 {
    font-size: 38px;

    margin-bottom: 20px;
}


.material-intro-content p {
    font-size: 16px;
    line-height: 1.8;

    margin-bottom: 18px;
}


.material-intro-content a {
    display: inline-block;

    width: fit-content;

    margin-top: 10px;

    background-color: #d89b5b;
    color: white;

    padding: 13px 25px;

    text-decoration: none;
}


.material-intro-image {
    width: 50%;
}


.material-intro-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}


/* COLLECTION */

.material-collection {
    padding: 70px 40px;

    text-align: center;

    background-color: #f5f5f5;
}


.material-collection h2 {
    font-size: 38px;

    margin-bottom: 12px;
}


.material-collection > p {
    font-size: 16px;

    margin-bottom: 40px;
}


.material-collection-grid {
    max-width: 1200px;

    margin: auto;

    display: grid;

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

    gap: 20px;
}
/* =========================
   BRAND PRODUCT PAGE
========================= */

.brand-page-hero {
    padding: 80px 20px;
    text-align: center;
    background-color: #eeeeee;
}

.brand-page-hero h1 {
    font-size: 44px;
    margin-bottom: 15px;
}

.brand-page-hero p {
    font-size: 17px;
    margin-bottom: 25px;
}

.brand-page-hero a {
    display: inline-block;
    padding: 12px 24px;

    background-color: var(--gold);
    color: white;

    text-decoration: none;
}


/* COLLECTION */

.brand-products {
    padding: 70px 30px;
    background-color: #f7f7f7;
}

.brand-products > h2 {
    text-align: center;
    font-size: 36px;
    margin: 0 0 40px;
}

.brand-products-grid {
    max-width: 1200px;
    margin: auto;

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

    gap: 20px;
}


/* STONE CARD */

.stone-card {
    background-color: white;
    border: 1px solid #dddddd;

    overflow: hidden;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.stone-card img {
    width: 100%;
    height: 230px;

    object-fit: cover;

    display: block;
}

.stone-card h3 {
    margin: 0;
    padding: 18px 12px;

    text-align: center;

    font-size: 17px;
    font-weight: 500;
}

.stone-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 8px 22px
        rgba(0, 0, 0, 0.12);
}
/* =========================
   RESPONSIVE - TABLET
========================= */

@media (min-width: 769px) and (max-width: 1024px) {

    /* HEADER */

    header {
        padding: 14px 20px;
    }

    .logo img {
        width: 140px;
    }

    nav a {
        margin: 0 6px;
        font-size: 13px;
    }

    .header-contact {
        font-size: 12px;
    }


    /* HERO */

    .hero {
        min-height: 440px;
        padding: 20px;
        box-sizing: border-box;
    }

    .hero h1 {
        font-size: 40px;
    }

    .hero p {
        font-size: 17px;
    }


    /* STATS */

    .stats h2 {
        font-size: 40px;
    }

    .stats p {
        font-size: 12px;
        letter-spacing: 2px;
    }


    /* ABOUT */

    .about-content {
        padding: 45px 35px;
    }

    .about-content h2 {
        font-size: 30px;
    }

    .about-content p {
        font-size: 15px;
    }


    /* MATERIALS */

    .materials {
        padding: 60px 20px;
    }

    .materials-grid {
        gap: 10px;
    }

    .material-card {
        height: 340px;
    }

    .material-content {
        bottom: 20px;
        padding: 16px;
    }

    .material-content h3 {
        font-size: 22px;
    }

    .material-content p {
        font-size: 14px;
    }


    /* WHY US */

    .why-us {
        padding: 60px 30px;
    }

    .why-us div {
        width: 44%;
        margin: 10px;
        padding: 22px;
    }

    .why-us > h2 {
        font-size: 34px;
    }


    /* PROCESS */

    .process {
        padding: 60px 30px;
    }

    .process-layout {
        gap: 30px;
    }

    .process > h2 {
        font-size: 34px;
    }

    .process-step h3 {
        font-size: 20px;
    }


    /* LUXURY CTA */

    .luxury-cta {
        min-height: 280px;
    }

    .luxury-cta h2 {
        font-size: 30px;
    }


    /* GALLERY */

    .gallery {
        padding: 60px 25px;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .gallery-item {
        height: 270px;
    }


    /* REVIEWS */

    .reviews {
        padding: 60px 25px;
    }

    .reviews-grid {
        gap: 18px;
    }

    .review-card {
        padding: 25px 20px;
    }


    /* FINAL CTA */

    .quote-cta {
        padding: 60px 25px;
    }

    .quote-cta h2 {
        font-size: 30px;
    }


    /* FOOTER */

    .footer-container {
        gap: 25px;
        padding-left: 25px;
        padding-right: 25px;
    }

    .footer-column h3 {
        font-size: 21px;
    }

    .footer-column p,
    .footer-column a {
        font-size: 14px;
    }

    .footer-company img {
        width: 135px;
    }
}
/* =========================
   RESPONSIVE - MOBILE
========================= */
/* MOBILE MENU BUTTON */

.menu-toggle {
    display: none;
}
@media (max-width: 768px) {

   header {
    position: relative;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
}

.logo img {
    width: 130px;
}

.menu-toggle {
    display: block;
    background: none;
    border: none;
    color: white;
    font-size: 32px;
    cursor: pointer;
}

nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #222222;
    z-index: 1000;
    text-align: center;
 }
nav.nav-open {
    display: block;
}

nav a {
    display: block;
    margin: 0;
    padding: 15px 20px;
    border-top: 1px solid #444444;
    font-size: 15px;
}

.header-contact {
    display: none;
}

    .hero {
    min-height: 380px;
    padding: 20px;
    box-sizing: border-box;
}

.hero h1 {
    font-size: 32px;
    line-height: 1.2;
    margin-bottom: 12px;
}

.hero p {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 20px;
}

.hero a {
    padding: 12px 22px;
}

   .stats {
    flex-direction: column;
    gap: 8px;
    padding: 8px;
}

.stats div {
    padding: 18px 10px;
}

.stats h2 {
    font-size: 38px;
}

.stats p {
    font-size: 13px;
    letter-spacing: 2px;
}

    .about {
    flex-direction: column;
}

.about-image {
    width: 100%;
    height: 280px;
}

.about-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-content {
    width: 100%;
    padding: 35px 22px;
}

.about-content h2 {
    font-size: 28px;
    line-height: 1.25;
}

.about-content p {
    font-size: 16px;
}

    .materials {
    padding: 50px 20px;
}

.materials h2 {
    font-size: 30px;
    margin-bottom: 30px;
}

.materials-grid {
    flex-direction: column;
    gap: 18px;
}

.material-card {
    width: 100%;
    height: 320px;
}

.material-content {
    bottom: 20px;
    padding: 16px;
}

.material-content h3 {
    font-size: 24px;
}

.material-content p {
    font-size: 15px;
}

    .why-us {
    padding: 55px 20px;
}

.why-us > h2 {
    font-size: 30px;
}

.why-us > p {
    font-size: 18px;
    margin-bottom: 30px;
}

.why-us div {
    display: block;
    width: 100%;
    margin: 12px 0;
    padding: 22px 18px;
}

.why-us div h3 {
    font-size: 20px;
}

.why-us > a {
    margin-top: 22px;
    padding: 12px 24px;
}

    .process {
    padding: 55px 20px;
}

.process > h2 {
    font-size: 30px;
    margin-bottom: 30px;
}

.process-layout {
    flex-direction: column;
    gap: 30px;
}

.process-image {
    width: 100%;
    height: 280px;
}

.process-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.process-steps {
    width: 100%;
}

.process-step {
    margin-bottom: 22px;
}

.process-step h3 {
    font-size: 20px;
}

.process-step p {
    font-size: 15px;
}

    /* LUXURY CTA */

.luxury-cta {
    min-height: 260px;
    padding: 35px 20px;
}

.luxury-cta h2 {
    font-size: 28px;
    line-height: 1.3;
}

.luxury-cta a {
    padding: 12px 24px;
}
/* MATERIAL PAGE */

.material-page-hero {
    min-height: 360px;
    padding: 30px 20px;
}

.material-page-hero h1 {
    font-size: 36px;
}

.material-page-hero p {
    font-size: 16px;
}


.material-intro {
    flex-direction: column;
}

.material-intro-content {
    width: 100%;
    padding: 45px 22px;
    box-sizing: border-box;
}

.material-intro-content h2 {
    font-size: 30px;
}

.material-intro-image {
    width: 100%;
    height: 300px;
}


.material-collection {
    padding: 50px 20px;
}

.material-collection h2 {
    font-size: 30px;
}

.material-collection-grid {
    grid-template-columns: 1fr;
}

/* FEATURED WORKS */

.gallery {
    padding: 55px 20px;
}

.gallery h2 {
    font-size: 30px;
    margin-bottom: 30px;
}

.gallery-grid {
    grid-template-columns: 1fr;
    gap: 14px;
}

.gallery-item {
    height: 260px;
}

.gallery-overlay h3 {
    font-size: 20px;
}

.gallery-button {
    padding: 12px 24px;
}


/* REVIEWS */

.reviews {
    padding: 55px 20px;
}

.reviews h2 {
    font-size: 30px;
    margin-bottom: 30px;
}

.reviews-grid {
    flex-direction: column;
    gap: 18px;
}

.review-card {
    padding: 25px 20px;
}

.review-text {
    font-size: 15px;
}

.review-stars {
    font-size: 18px;
}

.reviews-buttons {
    margin-top: 25px;
}

.reviews-button,
.google-review-button {
    display: block;
    width: 100%;
    max-width: 320px;

    margin: 10px auto;

    box-sizing: border-box;
}


/* FINAL QUOTE CTA */

.quote-cta {
    padding: 55px 20px;
}

.quote-cta h2 {
    font-size: 28px;
    line-height: 1.3;
}

.quote-cta p {
    font-size: 15px;
}

.quote-cta a {
    padding: 12px 24px;
}
.brand-page-hero {
    padding: 55px 20px;
}

.brand-page-hero h1 {
    font-size: 32px;
}

.brand-products {
    padding: 50px 20px;
}

.brand-products > h2 {
    font-size: 30px;
}

.brand-products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.stone-card img {
    height: 180px;
}

.stone-card h3 {
    font-size: 15px;
    padding: 14px 8px;
}

/* FOOTER */

.site-footer {
    padding-top: 50px;
}

.footer-container {
    flex-direction: column;

    gap: 35px;

    padding: 0 20px 40px;

    text-align: center;
}

.footer-column {
    width: 100%;
}

.footer-column h3 {
    font-size: 22px;
    margin-bottom: 18px;
}

.footer-column p {
    font-size: 15px;
}

.footer-column > a {
    margin-bottom: 12px;
}

.footer-company img {
    width: 130px;
}

.footer-bottom {
    padding: 18px 15px;
}

.footer-bottom p {
    font-size: 13px;
}
}

/* IMAGE LIGHTBOX */

.image-lightbox {
    display: none;
    position: fixed;
    inset: 0;

    background: rgba(0, 0, 0, 0.90);

    z-index: 9999;

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

    padding: 20px;
}

.image-lightbox.active {
    display: flex;
}

.image-lightbox-content {
    position: relative;

    width: 95vw;
    height: 92vh;

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;
}

.image-lightbox img {
    width: 90vw;
    height: 80vh;

    max-width: 95vw;
    max-height: 85vh;

    object-fit: contain;

    display: block;
}

.image-lightbox h3 {
    color: white;

    margin: 12px 0 0;

    font-size: 20px;
}

.image-lightbox-close {
    position: fixed;

    top: 20px;
    right: 30px;

    color: white;

    font-size: 42px;

    cursor: pointer;

    background: none;
    border: none;

    z-index: 10000;
}
/* =========================
   QUARTZ BRANDS
========================= */

.quartz-brands-grid {
    max-width: 1200px;
    margin: 35px auto 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.brand-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;

    background-color: #ffffff;
    border: 1px solid #dddddd;
    color: #222222;
    text-decoration: none;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.brand-card img {
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    display: block;

    transition: transform 0.35s ease;
}

.brand-card-name {
    display: block;
    padding: 15px 12px;

    background-color: #ffffff;
    color: #222222;

    text-align: center;
    font-size: 18px;
    font-weight: 600;
}

.brand-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.brand-card:hover img {
    transform: scale(1.03);
}

.brand-card:hover .brand-card-name {
    color: var(--gold);
}

/* TABLET - QUARTZ BRANDS */
@media (min-width: 769px) and (max-width: 1024px) {
    .quartz-brands-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* MOBILE - QUARTZ BRANDS */
@media (max-width: 768px) {
    .quartz-brands-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .brand-card-name {
        padding: 13px 10px;
        font-size: 17px;
    }
}
/* =====================================
   PREMIUM QUARTZ INTRO
===================================== */

.material-intro {
    position: relative;
    background:
        linear-gradient(
            135deg,
            #f7f9fb 0%,
            #eef3f6 50%,
            #e7edf1 100%
        );

    overflow: hidden;
}

/* subtle cold glow */
.material-intro::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    left: -180px;
    top: -220px;

    background: radial-gradient(
        circle,
        rgba(116, 149, 170, 0.18),
        transparent 68%
    );

    pointer-events: none;
}

.quartz-intro-content {
    position: relative;
    z-index: 2;
    padding: 70px 65px;
}


/* SMALL PREMIUM LABEL */

.quartz-eyebrow {
    display: inline-block;
    margin-bottom: 18px;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.5px;

    color: #708796;
}


/* MAIN TITLE */

.quartz-intro-content h1 {
    margin: 0 0 25px;

    font-size: clamp(38px, 4vw, 58px);
    line-height: 1.05;
    letter-spacing: -1.5px;

    font-weight: 700;
    color: #16222c;
}

.quartz-intro-content h1 span {
    color: #667f90;
    font-weight: 500;
}


/* TEXT */

.quartz-intro-content p {
    max-width: 540px;

    margin: 0 0 18px;

    font-size: 16px;
    line-height: 1.9;

    color: #53616c;
}


/* PREMIUM BUTTON */

.premium-quote-btn {
    position: relative;

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

    margin-top: 16px;
    padding: 16px 31px;

    overflow: hidden;

    border-radius: 4px;

    background:
        linear-gradient(
            135deg,
            #263b49 0%,
            #526f80 50%,
            #263b49 100%
        );

    color: #ffffff;
    text-decoration: none;

    font-size: 14px;
    font-weight: 600;
    letter-spacing: .5px;

    box-shadow:
        0 10px 25px rgba(24, 46, 60, 0.25),
        0 3px 8px rgba(0, 0, 0, 0.14);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


/* SHINE EFFECT */

.premium-quote-btn::before {
    content: "";

    position: absolute;
    top: -50%;
    left: -70%;

    width: 45%;
    height: 200%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.55),
            transparent
        );

    transform: rotate(20deg);

    transition: left .7s ease;
}

.premium-quote-btn span {
    position: relative;
    z-index: 2;
}

.premium-quote-btn:hover {
    transform: translateY(-4px);

    box-shadow:
        0 18px 38px rgba(24, 46, 60, 0.30),
        0 6px 14px rgba(0, 0, 0, 0.17);
}

.premium-quote-btn:hover::before {
    left: 135%;
}


/* IMAGE */

.material-intro-image {
    position: relative;
    z-index: 2;

    overflow: hidden;

    box-shadow:
        -15px 18px 45px rgba(22, 39, 50, 0.18),
        0 5px 15px rgba(0, 0, 0, 0.10);
}

.material-intro-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 1.2s cubic-bezier(.2,.8,.2,1),
        filter .8s ease;
}

.material-intro-image:hover img {
    transform: scale(1.045);

    filter:
        contrast(1.04)
        brightness(1.03);
}


/* COLLECTION AREA */

.material-collection {
    position: relative;

    background:
        linear-gradient(
            180deg,
            #eef3f6 0%,
            #f7f9fa 55%,
            #ffffff 100%
        );
}


/* COLLECTION TITLE */

.material-collection h2 {
    color: #182630;

    font-size: clamp(30px, 3vw, 42px);
    letter-spacing: -.8px;

    text-shadow:
        0 2px 12px rgba(36, 59, 73, .08);
}

.material-collection > p {
    color: #74838d;
}


/* RESPONSIVE */

@media (max-width: 768px) {

    .quartz-intro-content {
        padding: 50px 28px;
    }

    .quartz-intro-content h1 {
        font-size: 38px;
    }

    .quartz-intro-content p {
        font-size: 15px;
    }
}
/* =====================================
   PREMIUM QUARTZ INTRO - FINAL
===================================== */

.premium-quartz-intro {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    gap: 0;

    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #f4f7f9 0%,
            #eaf0f4 50%,
            #e4ebef 100%
        );
}


/* TEXT SIDE */

.quartz-intro-content {
    position: relative;
    z-index: 2;

    margin: 0;
    padding: 70px 65px;

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

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

    box-shadow:
        10px 0 35px rgba(25, 45, 58, 0.08),
        inset 0 1px 0 rgba(255,255,255,0.75);

    animation: quartzTextIn 0.9s ease both;
}


/* SMALL TITLE */

.quartz-eyebrow {
    display: inline-block;
    position: relative;

    margin-bottom: 18px;
    padding-left: 32px;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.5px;

    color: #708796;
}

.quartz-eyebrow::before {
    content: "";

    position: absolute;
    left: 0;
    top: 50%;

    width: 20px;
    height: 1px;

    background: #7f97a7;
}


/* MAIN TITLE */

.quartz-intro-content h1 {
    margin: 0 0 25px;

    font-size: clamp(38px, 4vw, 58px);
    line-height: 1.05;
    letter-spacing: -1.5px;

    font-weight: 700;
    color: #16222c;

    text-shadow:
        0 2px 3px rgba(255,255,255,0.7),
        0 8px 18px rgba(48, 67, 78, 0.08);
}

.quartz-intro-content h1 span {
    display: block;

    color: #667f90;
    font-weight: 500;
}


/* PARAGRAPHS */

.quartz-intro-content p {
    max-width: 540px;

    margin: 0 0 18px;

    font-size: 16px;
    line-height: 1.9;

    color: #53616c;
}


/* BUTTON */

.premium-quote-btn {
    position: relative;

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

    margin-top: 16px;
    padding: 16px 31px;

    overflow: hidden;

    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.18);

    background:
        linear-gradient(
            135deg,
            #263b49 0%,
            #526f80 50%,
            #263b49 100%
        );

    color: #ffffff;
    text-decoration: none;

    font-size: 14px;
    font-weight: 600;
    letter-spacing: .5px;

    box-shadow:
        0 14px 30px rgba(25, 49, 63, 0.28),
        inset 0 1px 0 rgba(255,255,255,0.18);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


/* BUTTON SHINE */

.premium-quote-btn::before {
    content: "";

    position: absolute;
    top: -50%;
    left: -70%;

    width: 45%;
    height: 200%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.55),
            transparent
        );

    transform: rotate(20deg);

    transition: left .7s ease;
}

.premium-quote-btn span {
    position: relative;
    z-index: 2;
}

.premium-quote-btn:hover {
    transform: translateY(-4px);

    box-shadow:
        0 20px 40px rgba(24, 46, 60, 0.34),
        0 8px 16px rgba(0, 0, 0, 0.14);
}

.premium-quote-btn:hover::before {
    left: 135%;
}


/* IMAGE SIDE */

.premium-quartz-intro .material-intro-image {
    margin: 0;
    padding: 0;

    position: relative;
    z-index: 2;

    overflow: hidden;
    border: none;

    box-shadow:
        -18px 22px 50px rgba(25, 42, 52, 0.22),
        0 10px 25px rgba(0, 0, 0, 0.12);

    animation: quartzImageIn 1s ease both;
}

.premium-quartz-intro .material-intro-image img {
    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    object-fit: cover;
    border: none;

    transition:
        transform 1.2s cubic-bezier(.2,.8,.2,1),
        filter .8s ease;
}

.premium-quartz-intro .material-intro-image:hover img {
    transform: scale(1.045);

    filter:
        contrast(1.04)
        brightness(1.03);
}


/* ANIMATIONS */

@keyframes quartzTextIn {

    from {
        opacity: 0;
        transform: translateX(-35px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes quartzImageIn {

    from {
        opacity: 0;
        transform: translateX(35px) scale(0.985);
    }

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


/* MOBILE */

@media (max-width: 768px) {

    .quartz-intro-content {
        padding: 50px 28px;
    }

    .quartz-intro-content h1 {
        font-size: 38px;
    }

    .quartz-intro-content p {
        font-size: 15px;
    }
}
/* ==================================================
   QUARTZ CINEMATIC HERO
================================================== */

.quartz-cinematic-hero {
    position: relative;

    min-height: 78vh;
    min-height: 720px;

    display: flex;
    align-items: center;

    padding: 80px clamp(40px, 8vw, 140px);

    box-sizing: border-box;
    overflow: hidden;

    background-image:
        linear-gradient(
            90deg,
            rgba(9, 18, 24, 0.90) 0%,
            rgba(13, 27, 36, 0.76) 38%,
            rgba(20, 35, 44, 0.35) 70%,
            rgba(15, 25, 31, 0.15) 100%
        ),
        url("../images/quartz/quartz-hero.jpg");

    background-size: cover;
    background-position: center;

    color: white;

    isolation: isolate;
}


/* dark premium depth */

.quartz-cinematic-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(8, 17, 22, 0.10),
            rgba(8, 17, 22, 0.03) 55%,
            rgba(8, 17, 22, 0.60)
        );

    z-index: -1;
}


/* cool light reflection */

.quartz-hero-light {
    position: absolute;

    width: 720px;
    height: 720px;

    left: -300px;
    top: 50%;

    transform: translateY(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(115, 169, 198, 0.22) 0%,
            rgba(92, 141, 167, 0.08) 38%,
            transparent 70%
        );

    filter: blur(10px);

    pointer-events: none;
}


/* CONTENT */

.quartz-cinematic-content {
    position: relative;
    z-index: 3;

    width: min(720px, 62vw);

    animation: quartzHeroEntrance 1.1s
               cubic-bezier(.16,.8,.3,1) both;
}


/* SMALL LABEL */

.quartz-hero-label {
    display: inline-flex;
    align-items: center;

    gap: 14px;

    margin-bottom: 28px;

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

    letter-spacing: 4px;

    color: rgba(225, 238, 245, 0.72);
}

.quartz-hero-label::before {
    content: "";

    width: 45px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            #8cb4c9,
            rgba(140,180,201,0.15)
        );
}


/* HUGE TITLE */

.quartz-cinematic-content h1 {
    margin: 0 0 28px;

    font-size:
        clamp(68px, 8vw, 132px);

    line-height: .86;

    letter-spacing: -5px;

    font-weight: 700;

    color: #ffffff;

    text-shadow:
        0 8px 35px rgba(0,0,0,.30);
}

.quartz-cinematic-content h1 span {
    display: block;

    margin-top: 24px;

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

    line-height: 1;

    letter-spacing: -2px;

    font-weight: 300;

    color: #b8ccd7;
}


/* DESCRIPTION */

.quartz-cinematic-content p {
    max-width: 600px;

    margin: 0 0 38px;

    font-size: 17px;
    line-height: 1.9;

    color: rgba(235, 242, 246, .77);

    text-shadow:
        0 3px 15px rgba(0,0,0,.25);
}


/* BUTTON AREA */

.quartz-hero-actions {
    display: flex;
    align-items: center;

    gap: 16px;

    flex-wrap: wrap;
}


/* MAIN SHINY BUTTON */

.quartz-btn-primary {
    position: relative;

    min-width: 190px;

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

    gap: 25px;

    padding: 17px 22px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #dce8ee,
            #a9c1ce 45%,
            #dce8ee
        );

    color: #14242d;

    text-decoration: none;

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

    letter-spacing: .5px;

    border: 1px solid rgba(255,255,255,.70);

    box-shadow:
        0 18px 40px rgba(0,0,0,.30),
        0 4px 12px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.95);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


/* travelling shine */

.quartz-btn-primary::before {
    content: "";

    position: absolute;

    top: -80%;
    left: -70%;

    width: 40%;
    height: 260%;

    transform: rotate(20deg);
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.85),
            transparent
        );

    transition: left .75s ease;
}

.quartz-btn-primary span,
.quartz-btn-primary b {
    position: relative;
    z-index: 2;
}

.quartz-btn-primary b {
    font-size: 20px;
    font-weight: 400;

    transition: transform .35s ease;
}

.quartz-btn-primary:hover {
    transform: translateY(-5px);

    box-shadow:
        0 25px 50px rgba(0,0,0,.38),
        0 7px 18px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,1);
}

.quartz-btn-primary:hover::before {
    left: 140%;
}

.quartz-btn-primary:hover b {
    transform: translateX(5px);
}


/* GLASS BUTTON */

.quartz-btn-glass {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 17px 25px;

    color: rgba(255,255,255,.90);

    text-decoration: none;

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

    letter-spacing: .4px;

    border:
        1px solid rgba(255,255,255,.30);

    background:
        rgba(255,255,255,.07);

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 10px 30px rgba(0,0,0,.16);

    transition:
        background .35s ease,
        transform .35s ease,
        border-color .35s ease;
}

.quartz-btn-glass:hover {
    transform: translateY(-4px);

    background:
        rgba(255,255,255,.14);

    border-color:
        rgba(255,255,255,.55);
}


/* SCROLL INDICATOR */

.quartz-scroll-hint {
    position: absolute;

    right: clamp(25px, 4vw, 70px);
    bottom: 35px;

    display: flex;
    align-items: center;

    gap: 13px;

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

    letter-spacing: 3px;

    color: rgba(255,255,255,.52);

    transform: rotate(-90deg)
               translateX(100%);

    transform-origin: right bottom;
}

.quartz-scroll-hint span {
    display: block;

    width: 45px;
    height: 1px;

    background:
        rgba(255,255,255,.40);

    position: relative;

    overflow: hidden;
}

.quartz-scroll-hint span::after {
    content: "";

    position: absolute;

    width: 20px;
    height: 1px;

    background: white;

    animation:
        quartzScrollLine 2s ease-in-out infinite;
}


/* ANIMATION */

@keyframes quartzHeroEntrance {

    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes quartzScrollLine {

    0% {
        left: -20px;
    }

    50% {
        left: 45px;
    }

    100% {
        left: 45px;
    }
}


/* TABLET */

@media
(min-width: 769px)
and (max-width: 1024px) {

    .quartz-cinematic-hero {
        min-height: 620px;

        padding:
            70px 55px;
    }

    .quartz-cinematic-content {
        width: 70%;
    }
}


/* MOBILE */

@media (max-width: 768px) {

    .quartz-cinematic-hero {
        min-height: 650px;

        padding:
            80px 24px 65px;

        align-items: flex-end;

        background-position: 65% center;
    }

    .quartz-cinematic-content {
        width: 100%;
    }

    .quartz-hero-label {
        font-size: 9px;
        letter-spacing: 2.5px;
    }

    .quartz-cinematic-content h1 {
        font-size: 58px;
        letter-spacing: -3px;
    }

    .quartz-cinematic-content h1 span {
        margin-top: 18px;

        font-size: 34px;
        letter-spacing: -1.5px;
    }

    .quartz-cinematic-content p {
        font-size: 15px;
        line-height: 1.7;
    }

    .quartz-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .quartz-btn-primary,
    .quartz-btn-glass {
        width: 100%;
        box-sizing: border-box;
    }

    .quartz-scroll-hint {
        display: none;
    }
}
/* ==================================================
   QUARTZ STORY — ARCHITECTURAL SECTION
================================================== */

.quartz-story {
    position: relative;

    display: grid;
    grid-template-columns: 58% 42%;

    min-height: 680px;

    padding:
        110px clamp(35px, 7vw, 120px);

    box-sizing: border-box;

    background:
        linear-gradient(
            135deg,
            #eef3f5 0%,
            #f8fafb 52%,
            #e7eef1 100%
        );

    overflow: hidden;
}


/* giant ambient glow */

.quartz-story::before {
    content: "";

    position: absolute;

    width: 650px;
    height: 650px;

    right: -260px;
    top: -280px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(123, 166, 188, .18),
            rgba(123, 166, 188, .04) 45%,
            transparent 70%
        );

    pointer-events: none;
}


/* =========================
   IMAGE
========================= */

.quartz-story-visual {
    position: relative;

    height: 520px;

    overflow: visible;

    z-index: 1;
}


.quartz-story-visual img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    box-shadow:
        0 35px 70px rgba(25, 42, 52, .22),
        0 12px 28px rgba(25, 42, 52, .13);

    transition:
        transform 1.1s cubic-bezier(.2,.8,.2,1),
        filter .8s ease;
}


.quartz-story-visual:hover img {
    transform: scale(1.018);

    filter:
        brightness(1.035)
        contrast(1.035);
}


/* subtle glass line over image */

.quartz-story-visual::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            115deg,
            rgba(255,255,255,.15),
            transparent 32%,
            transparent 70%,
            rgba(129,165,183,.08)
        );
}


/* =========================
   FLOATING BADGE
========================= */

.quartz-story-badge {
    position: absolute;

    left: -28px;
    bottom: -30px;

    z-index: 5;

    min-width: 165px;

    padding: 24px 27px;

    box-sizing: border-box;

    background:
        rgba(19, 34, 43, .92);

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

    border:
        1px solid rgba(255,255,255,.13);

    box-shadow:
        0 20px 45px rgba(17,31,40,.30),
        inset 0 1px 0 rgba(255,255,255,.12);

    color: white;
}


.quartz-story-badge strong {
    display: block;

    margin-bottom: 5px;

    font-size: 21px;
    font-weight: 500;

    letter-spacing: -.5px;
}


.quartz-story-badge span {
    font-size: 10px;

    letter-spacing: 2px;

    text-transform: uppercase;

    color:
        rgba(209,226,235,.62);
}


/* =========================
   CONTENT
========================= */

.quartz-story-content {
    position: relative;

    z-index: 4;

    align-self: center;

    margin-left: -65px;

    padding:
        70px 65px 65px;

    background:
        rgba(250,252,253,.82);

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

    border:
        1px solid rgba(255,255,255,.75);

    box-shadow:
        0 30px 70px rgba(29,49,60,.16),
        0 8px 22px rgba(29,49,60,.08),
        inset 0 1px 0 rgba(255,255,255,.95);
}


/* label */

.quartz-section-label {
    display: flex;
    align-items: center;

    gap: 15px;

    margin-bottom: 25px;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 3.5px;

    color: #78909d;
}


.quartz-section-label::before {
    content: "";

    width: 34px;
    height: 1px;

    background: #78909d;
}


/* title */

.quartz-story-content h2 {
    max-width: 540px;

    margin:
        0 0 30px;

    font-size:
        clamp(40px, 4.2vw, 65px);

    line-height: .98;

    letter-spacing: -2.5px;

    font-weight: 650;

    color: #17262f;
}


.quartz-story-content h2 span {
    display: block;

    margin-top: 8px;

    font-weight: 300;

    color: #708894;
}


/* text */

.quartz-story-content p {
    max-width: 520px;

    margin:
        0 0 20px;font-size: 15px;
    line-height: 1.85;

    color: #65747c;
}


.quartz-story-content
.quartz-story-lead {

    font-size: 17px;

    color: #455761;
}


/* =========================
   TEXT LINK
========================= */

.quartz-text-link {
    position: relative;

    display: inline-flex;
    align-items: center;

    gap: 18px;

    margin-top: 16px;
    padding-bottom: 7px;

    color: #1c303b;

    text-decoration: none;

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

    letter-spacing: .4px;
}


.quartz-text-link::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            #607d8b,
            rgba(96,125,139,.15)
        );

    transform-origin: left;

    transition:
        transform .4s ease;
}


.quartz-text-link span {
    font-size: 18px;

    transition:
        transform .35s ease;
}


.quartz-text-link:hover span {
    transform:
        translate(4px,-4px);
}


.quartz-text-link:hover::after {
    transform: scaleX(.45);
}


/* =========================
   TABLET
========================= */

@media
(min-width:769px)
and (max-width:1100px) {

    .quartz-story {
        grid-template-columns:
            55% 45%;

        padding:
            80px 45px;
    }

    .quartz-story-content {
        margin-left: -45px;

        padding:
            50px 40px;
    }

    .quartz-story-visual {
        height: 470px;
    }
}


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

@media (max-width:768px) {

    .quartz-story {
        display: block;

        min-height: auto;

        padding:
            60px 22px 70px;
    }


    .quartz-story-visual {
        height: 390px;

        margin-bottom: 0;
    }


    .quartz-story-badge {
        left: 15px;
        bottom: -25px;

        min-width: 145px;

        padding: 18px 20px;
    }


    .quartz-story-content {
        margin:
            -15px 0 0 20px;

        padding:
            70px 28px 40px;
    }


    .quartz-story-content h2 {
        font-size: 42px;

        letter-spacing: -1.8px;
    }


    .quartz-story-content p {
        font-size: 14px;
    }


    .quartz-story-content
    .quartz-story-lead {

        font-size: 16px;
    }
}
/* ==================================================
   MODERN QUARTZ COLLECTION
================================================== */

.quartz-collection-modern {
    position: relative;

    padding:
        130px clamp(30px, 7vw, 120px)
        150px;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #f7f9fa 0%,
            #edf2f4 100%
        );
}


/* ambient background glow */

.quartz-collection-modern::before {
    content: "";

    position: absolute;

    width: 800px;
    height: 800px;

    left: -350px;
    top: -300px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(122,164,187,.15),
            transparent 68%
        );

    pointer-events: none;
}


/* HEADER */

.quartz-collection-header {
    position: relative;
    z-index: 2;

    max-width: 1250px;

    margin:
        0 auto 75px;

    display: grid;

    grid-template-columns:
        1.45fr .7fr;

    gap: 80px;

    align-items: end;
}


.quartz-collection-header h2 {
    max-width: 760px;

    margin: 0;

    font-size:
        clamp(46px, 5.5vw, 78px);

    line-height: .96;

    letter-spacing: -3px;

    color: #17262f;
}


.quartz-collection-header h2 span {
    display: block;

    margin-top: 8px;

    font-weight: 300;

    color: #728995;
}


.quartz-collection-header > p {
    margin: 0 0 5px;

    font-size: 15px;
    line-height: 1.9;

    color: #687881;
}


/* GRID */

.quartz-modern-grid {
    position: relative;
    z-index: 2;

    max-width: 1250px;

    margin: auto;

    display: grid;

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

    gap: 30px;
}


/* CARD */

.quartz-modern-card {
    position: relative;

    display: block;

    overflow: hidden;

    background:
        rgba(255,255,255,.78);

    text-decoration: none;

    border:
        1px solid rgba(255,255,255,.85);

    box-shadow:
        0 16px 35px rgba(29,48,59,.10),
        0 4px 12px rgba(29,48,59,.06);

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        box-shadow .45s ease;
}


/* CARD SHINE */

.quartz-modern-card::before {
    content: "";

    position: absolute;

    z-index: 5;

    top: -80%;
    left: -80%;

    width: 45%;
    height: 250%;

    pointer-events: none;

    transform: rotate(20deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.52),
            transparent
        );

    transition: left .8s ease;
}


/* IMAGE */

.quartz-card-image {
    position: relative;

    aspect-ratio: 1.75 / 1;

    overflow: hidden;

    background: #e4eaed;
}


.quartz-card-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(13,27,35,.10)
        );

    pointer-events: none;
}


.quartz-card-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .8s
        cubic-bezier(.2,.8,.2,1),
        filter .6s ease;
}


/* FOOTER */

.quartz-card-footer {
    min-height: 74px;

    display: grid;

    grid-template-columns:
        38px 1fr 30px;

    align-items: center;

    gap: 10px;

    padding: 0 23px;

    box-sizing: border-box;

    background:
        rgba(252,253,253,.94);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}


.quartz-card-number {
    font-size: 9px;
    font-weight: 600;

    letter-spacing: 1.5px;

    color: #9aaab2;
}


.quartz-card-footer h3 {
    margin: 0;

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

    letter-spacing: -.25px;

    color: #233640;
}


.quartz-card-arrow {
    display: flex;

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

    width: 30px;
    height: 30px;

    border-radius: 50%;

    background:
        #edf2f4;

    color: #546f7c;

    font-size: 15px;

    transition:
        background .35s ease,
        color .35s ease,
        transform .35s ease;
}


/* HOVER */
.quartz-modern-card:hover {
    transform:
        translateY(-10px);

    box-shadow:
        0 30px 60px rgba(25,45,56,.18),
        0 10px 25px rgba(25,45,56,.10);
}


.quartz-modern-card:hover::before {
    left: 145%;
}


.quartz-modern-card:hover
.quartz-card-image img {

    transform: scale(1.07);

    filter:
        brightness(1.03)
        contrast(1.035);
}


.quartz-modern-card:hover
.quartz-card-arrow {

    background: #223844;

    color: white;

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


/* last card */

.quartz-modern-card-last {
    grid-column: 2;
}


/* TABLET */

@media
(min-width:769px)
and (max-width:1050px) {

    .quartz-collection-modern {
        padding:
            95px 45px 110px;
    }

    .quartz-collection-header {
        grid-template-columns:
            1fr;

        gap: 25px;

        margin-bottom: 55px;
    }

    .quartz-collection-header > p {
        max-width: 600px;
    }

    .quartz-modern-grid {
        grid-template-columns:
            repeat(2,1fr);
    }

    .quartz-modern-card-last {
        grid-column: auto;
    }
}


/* MOBILE */

@media (max-width:768px) {

    .quartz-collection-modern {
        padding:
            80px 20px 90px;
    }

    .quartz-collection-header {
        display: block;

        margin-bottom: 45px;
    }

    .quartz-collection-header h2 {
        margin-bottom: 25px;

        font-size: 46px;

        letter-spacing: -2px;
    }

    .quartz-modern-grid {
        grid-template-columns:
            1fr;

        gap: 20px;
    }

    .quartz-modern-card-last {
        grid-column: auto;
    }

    .quartz-card-footer {
        min-height: 68px;

        padding:
            0 18px;
    }
}
/* ==================================================
   WHY QUARTZ — DARK PERFORMANCE SECTION
================================================== */

.quartz-performance {
    position: relative;

    padding:
        140px clamp(30px, 7vw, 120px)
        150px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #111d24 0%,
            #172832 50%,
            #0d171d 100%
        );

    color: white;
}


/* cold ambient light */

.quartz-performance::before {
    content: "";

    position: absolute;

    width: 750px;
    height: 750px;

    right: -300px;
    top: -300px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(101, 158, 188, .18),
            rgba(101, 158, 188, .05) 42%,
            transparent 70%
        );

    pointer-events: none;
}


/* top subtle line */

.quartz-performance::after {
    content: "";

    position: absolute;

    left: 7%;
    right: 7%;
    top: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(180,210,225,.32),
            transparent
        );
}


/* HEADER */

.quartz-performance-heading {
    position: relative;
    z-index: 2;

    max-width: 1250px;

    margin:
        0 auto 85px;

    display: grid;

    grid-template-columns:
        1.4fr .65fr;

    gap: 90px;

    align-items: end;
}


.quartz-dark-label {
    display: flex;
    align-items: center;

    gap: 15px;

    margin-bottom: 25px;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 4px;

    color:
        rgba(188,215,228,.58);
}


.quartz-dark-label::before {
    content: "";

    width: 40px;
    height: 1px;

    background:
        #789cad;
}


.quartz-performance-heading h2 {
    margin: 0;

    font-size:
        clamp(52px, 6vw, 88px);

    line-height: .92;

    letter-spacing: -4px;

    color: #f3f7f9;
}


.quartz-performance-heading h2 span {
    display: block;

    margin-top: 10px;

    font-weight: 300;

    color: #8ba6b4;
}


.quartz-performance-heading > p {
    margin: 0 0 4px;

    max-width: 450px;

    font-size: 15px;
    line-height: 1.9;

    color:
        rgba(219,231,237,.62);
}


/* GRID */

.quartz-performance-grid {
    position: relative;
    z-index: 2;

    max-width: 1250px;

    margin: auto;

    display: grid;

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

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

    border-bottom:
        1px solid rgba(255,255,255,.13);
}


/* ITEM */

.quartz-performance-item {
    position: relative;

    min-height: 300px;

    padding:
        35px 28px 40px;

    box-sizing: border-box;

    border-right:
        1px solid rgba(255,255,255,.12);

    overflow: hidden;

    transition:
        background .4s ease,
        transform .4s ease;
}


.quartz-performance-item:last-child {
    border-right: none;
}


/* hover glow */

.quartz-performance-item::before {
    content: "";

    position: absolute;

    width: 240px;
    height: 240px;

    left: 50%;
    bottom: -170px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(122,180,208,.17),
            transparent 68%
        );

    opacity: 0;

    transition:
        opacity .45s ease,
        bottom .45s ease;
}


.quartz-performance-item:hover {
    background:
        rgba(255,255,255,.035);

    transform:
        translateY(-4px);
}


.quartz-performance-item:hover::before {
    opacity: 1;
    bottom: -100px;
}


/* NUMBER */

.quartz-performance-number {
    display: block;

    margin-bottom: 65px;

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

    letter-spacing: 2px;

    color:
        rgba(184,211,224,.46);
}


/* TITLE */

.quartz-performance-item h3 {
    position: relative;

    margin:
        0 0 18px;

    font-size: 21px;
    font-weight: 500;

    letter-spacing: -.4px;

    color: #edf4f7;
}


/* TEXT */

.quartz-performance-item p {
    position: relative;
    margin: 0;

    font-size: 13px;
    line-height: 1.8;

    color:
        rgba(211,226,233,.55);
}


/* TABLET */

@media
(min-width:769px)
and (max-width:1050px) {

    .quartz-performance {
        padding:
            100px 45px 110px;
    }

    .quartz-performance-heading {
        grid-template-columns:
            1fr;

        gap: 25px;
    }

    .quartz-performance-grid {
        grid-template-columns:
            repeat(2,1fr);
    }

    .quartz-performance-item:nth-child(2) {
        border-right: none;
    }

    .quartz-performance-item:nth-child(-n+2) {
        border-bottom:
            1px solid rgba(255,255,255,.12);
    }
}


/* MOBILE */

@media (max-width:768px) {

    .quartz-performance {
        padding:
            85px 22px 95px;
    }

    .quartz-performance-heading {
        display: block;

        margin-bottom: 55px;
    }

    .quartz-performance-heading h2 {
        margin-bottom: 25px;

        font-size: 52px;

        letter-spacing: -2.5px;
    }

    .quartz-performance-grid {
        grid-template-columns:
            1fr;
    }

    .quartz-performance-item {
        min-height: auto;

        padding:
            30px 10px 35px;

        border-right: none;

        border-bottom:
            1px solid rgba(255,255,255,.12);
    }

    .quartz-performance-item:last-child {
        border-bottom: none;
    }

    .quartz-performance-number {
        margin-bottom: 35px;
    }
}
/* =========================================
   COMPACT WHY QUARTZ SECTION
========================================= */

.quartz-performance {
    padding:
        65px clamp(30px, 7vw, 120px)
        70px;
}

.quartz-performance-heading {
    margin:
        0 auto 35px;

    gap: 40px;
}

.quartz-performance-heading h2 {
    font-size:
        clamp(46px, 5vw, 72px);
}

.quartz-performance-heading > p {
    max-width: 390px;
}

.quartz-performance-grid {
    max-width: 1180px;
}

.quartz-performance-item {
    min-height: 190px;

    padding:
        22px 22px 30px;
}

.quartz-performance-number {
    margin-bottom: 24px;
}

.quartz-performance-item h3 {
    font-size: 19px;
}

.quartz-performance-item p {
    font-size: 12.5px;
    line-height: 1.7;
}


/* TABLET */

@media
(min-width:769px)
and (max-width:1050px) {

    .quartz-performance {
        padding:
            75px 40px 80px;
    }

    .quartz-performance-heading {
        margin-bottom: 40px;
    }
}


/* MOBILE */

@media (max-width:768px) {

    .quartz-performance {
        padding:
            65px 22px 70px;
    }

    .quartz-performance-heading {
        margin-bottom: 40px;
    }

    .quartz-performance-heading h2 {
        font-size: 46px;
    }

    .quartz-performance-item {
        padding:
            25px 8px 28px;
    }

    .quartz-performance-number {
        margin-bottom: 25px;
    }
}
/* ==================================================
   QUARTZ INSPIRATION
================================================== */

.quartz-inspiration {
    padding:
        110px clamp(30px, 7vw, 120px)
        120px;

    background:
        linear-gradient(
            180deg,
            #f5f8fa 0%,
            #e9eff2 100%
        );
}


/* HEADER */

.quartz-inspiration-head {
    max-width: 1250px;

    margin:
        0 auto 60px;

    display: grid;

    grid-template-columns:
        1.4fr .65fr;

    gap: 70px;

    align-items: end;
}


.quartz-inspiration-head h2 {
    margin: 0;

    font-size:
        clamp(46px, 5vw, 74px);

    line-height: .95;

    letter-spacing: -3px;

    color: #17262f;
}


.quartz-inspiration-head h2 span {
    display: block;

    margin-top: 8px;

    font-weight: 300;

    color: #748a96;
}


.quartz-inspiration-head > p {
    margin: 0 0 5px;

    font-size: 15px;
    line-height: 1.85;

    color: #6d7a81;
}


/* LAYOUT */

.quartz-inspiration-layout {
    max-width: 1250px;

    margin: auto;

    display: grid;

    grid-template-columns:
        1.55fr .85fr;

    gap: 22px;
}


.quartz-inspiration-large,
.quartz-inspiration-small {
    position: relative;

    display: block;

    overflow: hidden;

    background: #dfe6e9;

    text-decoration: none;

    box-shadow:
        0 18px 40px rgba(25,43,54,.14);

    transition:
        transform .45s ease,
        box-shadow .45s ease;
}


.quartz-inspiration-large {
    min-height: 600px;
}


.quartz-inspiration-side {
    display: grid;

    grid-template-rows:
        1fr 1fr;

    gap: 22px;
}


.quartz-inspiration-small {
    min-height: 289px;
}


.quartz-inspiration-large img,
.quartz-inspiration-small img {

    width: 100%;
    height: 100%;

    position: absolute;
    inset: 0;

    display: block;

    object-fit: cover;

    transition:
        transform 1s
        cubic-bezier(.2,.8,.2,1),
        filter .6s ease;
}


/* image depth */

.quartz-inspiration-large::before,
.quartz-inspiration-small::before {

    content: "";

    position: absolute;
    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            180deg,
            transparent 40%,
            rgba(8,20,27,.72) 100%
        );
}


/* OVERLAY */

.quartz-inspiration-overlay {
    position: absolute;

    z-index: 3;

    left: 28px;
    right: 28px;
    bottom: 25px;

    color: white;
}


.quartz-inspiration-overlay span {
    display: block;

    margin-bottom: 8px;

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

    letter-spacing: 2px;

    color:
        rgba(219,234,241,.65);
}


.quartz-inspiration-overlay h3 {
    margin: 0;

    font-size: 22px;
    font-weight: 500;

    letter-spacing: -.4px;
}


/* HOVER */

.quartz-inspiration-large:hover,
.quartz-inspiration-small:hover {

    transform:
        translateY(-7px);

    box-shadow:
        0 30px 60px rgba(24,43,53,.20);
}


.quartz-inspiration-large:hover img,
.quartz-inspiration-small:hover img {

    transform:
        scale(1.055);

    filter:
        brightness(1.04)
        contrast(1.04);
}


/* TABLET */

@media
(min-width:769px)
and (max-width:1050px) {

    .quartz-inspiration {
        padding:
            85px 45px 95px;
    }

    .quartz-inspiration-head {
        grid-template-columns:
            1fr;

        gap: 25px;
    }

    .quartz-inspiration-layout {
        grid-template-columns:
            1fr;
    }

    .quartz-inspiration-large {
        min-height: 500px;
    }

    .quartz-inspiration-side {
        grid-template-columns:
            1fr 1fr;

        grid-template-rows:
            auto;
    }

    .quartz-inspiration-small {
        min-height: 280px;
    }
}


/* MOBILE */

@media (max-width:768px) {

    .quartz-inspiration {
        padding:
            70px 20px 80px;
    }

    .quartz-inspiration-head {
        display: block;

        margin-bottom: 40px;
    }

    .quartz-inspiration-head h2 {
        margin-bottom: 22px;

        font-size: 46px;

        letter-spacing: -2px;
    }
    .quartz-inspiration-layout {
        display: block;
    }

    .quartz-inspiration-large {
        min-height: 420px;

        margin-bottom: 18px;
    }

    .quartz-inspiration-side {
        display: block;
    }

    .quartz-inspiration-small {
        min-height: 300px;

        margin-bottom: 18px;
    }
}
/* ==================================================
   FINAL QUARTZ CTA
================================================== */

.quartz-final-cta {
    position: relative;

    min-height: 400px;

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

    padding: 60px 30px;

    box-sizing: border-box;

    overflow: hidden;

    background:
    radial-gradient(
        circle at 50% 20%,
        rgba(125, 155, 170, 0.20),
        transparent 55%
    ),
    linear-gradient(
    135deg,
    #48575f 0%,
    #3b4b54 50%,
    #303e46 100%
);

    color: white;
}


/* subtle top border */

.quartz-final-cta::before {
    content: "";

    position: absolute;

    top: 0;
    left: 8%;
    right: 8%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(176,212,230,.40),
            transparent
        );
}


/* cold glow */

.quartz-final-cta-glow {
    position: absolute;

    width: 750px;
    height: 750px;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(91,157,192,.20) 0%,
            rgba(91,157,192,.08) 35%,
            transparent 70%
        );

    filter: blur(10px);

    pointer-events: none;
}


/* MAIN GLASS PANEL */

.quartz-final-cta-inner {
    position: relative;
    z-index: 2;

    width: min(900px, 90%);

    padding: 48px 55px;

    box-sizing: border-box;

    text-align: center;

    background:
        rgba(255,255,255,.055);

    border:
        1px solid rgba(255,255,255,.15);

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

    box-shadow:
        0 35px 80px rgba(0,0,0,.32),
        0 10px 30px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.10);
}


/* SMALL LABEL */

.quartz-final-label {
    display: block;

    margin-bottom: 25px;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 4px;

    color:
        rgba(191,219,232,.60);
}


/* TITLE */

.quartz-final-cta h2 {
    margin: 0 0 25px;

    font-size:
        clamp(46px, 5vw, 68px);

    line-height: .92;

    letter-spacing: -4px;

    color: #f4f8fa;
}


.quartz-final-cta h2 span {
    display: block;

    margin-top: 8px;

    font-weight: 300;

    color: #91aeba;
}


/* TEXT */

.quartz-final-cta p {
    max-width: 600px;

    margin:
        0 auto 35px;

    font-size: 15px;
    line-height: 1.85;

    color:
        rgba(222,235,241,.67);
}


/* BUTTON AREA */

.quartz-final-actions {
    display: flex;

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

    gap: 15px;

    flex-wrap: wrap;
}


/* PRIMARY BUTTON */

.quartz-final-primary {
    position: relative;

    min-width: 190px;

    display: inline-flex;

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

    gap: 25px;

    padding: 17px 22px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #e2edf2,
            #a9c4d1 48%,
            #e2edf2
        );

    border:
        1px solid rgba(255,255,255,.65);

    color: #142630;

    text-decoration: none;

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

    box-shadow:
        0 18px 40px rgba(0,0,0,.32),
        inset 0 1px 0 rgba(255,255,255,.95);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


/* shine */

.quartz-final-primary::before {
    content: "";

    position: absolute;

    top: -80%;
    left: -70%;

    width: 40%;
    height: 260%;

    transform: rotate(20deg);

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

    transition:
        left .75s ease;
}


.quartz-final-primary span,
.quartz-final-primary b {
    position: relative;
    z-index: 2;
}


.quartz-final-primary b {
    font-size: 20px;

    transition:
        transform .35s ease;
}


.quartz-final-primary:hover {
    transform: translateY(-5px);

    box-shadow:
        0 27px 55px rgba(0,0,0,.42);
}
.quartz-final-primary:hover::before {
    left: 145%;
}


.quartz-final-primary:hover b {
    transform:
        translateX(5px);
}


/* SECOND BUTTON */

.quartz-final-secondary {
    display: inline-flex;

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

    padding: 17px 27px;

    border:
        1px solid rgba(255,255,255,.28);

    background:
        rgba(255,255,255,.06);

    color:
        rgba(255,255,255,.90);

    text-decoration: none;

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

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

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease;
}


.quartz-final-secondary:hover {
    transform: translateY(-4px);

    background:
        rgba(255,255,255,.13);

    border-color:
        rgba(255,255,255,.50);
}


/* MOBILE */

@media (max-width:768px) {

    .quartz-final-cta {
        min-height: auto;

        padding:
            70px 20px;
    }

    .quartz-final-cta-inner {
        width: 100%;

        padding:
            55px 25px;
    }

    .quartz-final-cta h2 {
        font-size: 52px;

        letter-spacing: -2.5px;
    }

    .quartz-final-actions {
        flex-direction: column;
    }

    .quartz-final-primary,
    .quartz-final-secondary {
        width: 100%;

        box-sizing: border-box;
    }
}
/* ==================================================
   MODERN PREMIUM FOOTER
================================================== */

.modern-footer {
    position: relative;

    padding:
        75px clamp(30px, 7vw, 120px)
        25px;

    background:
        linear-gradient(
            135deg,
            #0a1217 0%,
            #101d24 55%,
            #091116 100%
        );

    color: white;

    overflow: hidden;
}


/* subtle light */

.modern-footer::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    left: -220px;
    top: -260px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(94,151,180,.12),
            transparent 70%
        );

    pointer-events: none;
}


/* TOP */

.modern-footer-top {
    position: relative;
    z-index: 2;

    max-width: 1250px;

    margin:
        0 auto 55px;

    display: grid;

    grid-template-columns:
        1.1fr 1.5fr;

    gap: 100px;
}


/* BRAND */

.modern-footer-logo {
    display: inline-block;

    margin-bottom: 25px;
}


.modern-footer-logo img {
    width: 115px;

    display: block;

    opacity: .92;
}


.modern-footer-brand h3 {
    max-width: 430px;

    margin:
        0 0 20px;

    font-size:
        clamp(30px, 3vw, 43px);

    line-height: 1;

    letter-spacing: -1.6px;

    font-weight: 600;

    color: #f1f6f8;
}


.modern-footer-brand h3 span {
    display: block;

    margin-top: 7px;

    font-weight: 300;

    color: #839eab;
}


.modern-footer-brand p {
    max-width: 400px;

    margin: 0;

    font-size: 13px;
    line-height: 1.8;

    color:
        rgba(210,225,232,.55);
}


/* LINK AREA */

.modern-footer-links {
    display: grid;

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

    gap: 45px;
}


.modern-footer-column {
    display: flex;
    flex-direction: column;

    align-items: flex-start;
}


.modern-footer-title {
    margin-bottom: 25px;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 3px;

    color:
        rgba(176,205,219,.50);
}


.modern-footer-column > a {
    position: relative;

    margin-bottom: 13px;

    color:
        rgba(235,242,245,.72);

    text-decoration: none;

    font-size: 13px;

    transition:
        color .3s ease,
        transform .3s ease;
}


.modern-footer-column > a:not(.modern-footer-quote):hover {
    color: white;

    transform:
        translateX(4px);
}


/* QUOTE LINK */

.modern-footer-quote {
    display: inline-flex !important;

    align-items: center;

    gap: 20px;

    margin-top: 10px !important;
    margin-bottom: 0 !important;

    padding:
        12px 16px;

    border:
        1px solid rgba(255,255,255,.20);

    background:
        rgba(255,255,255,.04);

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

    color: white !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07);

    transition:
        background .3s ease,
        transform .3s ease,
        border-color .3s ease !important;
}


.modern-footer-quote span {
    font-size: 16px;

    transition:
        transform .3s ease;
}


.modern-footer-quote:hover {
    background:
        rgba(255,255,255,.09);

    border-color:
        rgba(255,255,255,.38);

    transform:
        translateY(-3px);
}


.modern-footer-quote:hover span {
    transform:
        translateX(4px);
}


/* BOTTOM */

.modern-footer-bottom {
    position: relative;
    z-index: 2;

    max-width: 1250px;

    margin: auto;

    padding-top: 22px;

    display: flex;

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

    border-top:
        1px solid rgba(255,255,255,.10);
}


.modern-footer-bottom p {
    margin: 0;

    font-size: 11px;

    color:
        rgba(199,216,224,.42);
}


.modern-footer-bottom div {
    display: flex;

    gap: 25px;
}


.modern-footer-bottom a {
    font-size: 11px;

    color:
        rgba(199,216,224,.42);

    text-decoration: none;

    transition:
        color .3s ease;
}
.modern-footer-bottom a:hover {
    color:
        rgba(235,244,248,.85);
}


/* TABLET */

@media
(min-width:769px)
and (max-width:1050px) {

    .modern-footer {
        padding:
            65px 45px 25px;
    }

    .modern-footer-top {
        grid-template-columns:
            .9fr 1.6fr;

        gap: 60px;
    }

    .modern-footer-links {
        gap: 30px;
    }
}


/* MOBILE */

@media (max-width:768px) {

    .modern-footer {
        padding:
            60px 22px 25px;
    }

    .modern-footer-top {
        display: block;

        margin-bottom: 45px;
    }

    .modern-footer-brand {
        margin-bottom: 50px;
    }

    .modern-footer-links {
        grid-template-columns:
            1fr 1fr;

        gap:
            40px 25px;
    }

    .modern-footer-contact {
        grid-column:
            1 / -1;
    }

    .modern-footer-bottom {
        flex-direction: column;

        align-items: flex-start;

        gap: 15px;
    }
}
/* =========================================
   SCROLL REVEAL
========================================= */

.reveal {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity 0.9s ease,
        transform 0.9s ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* =========================================
   STAGGER REVEAL
========================================= */

.quartz-modern-card.reveal {
    transition-delay: var(--delay, 0s);
}
/* =========================================
   PREMIUM BUTTON SHINE
========================================= */

.quartz-btn-primary,
.quartz-btn-glass,
.quartz-final-primary,
.quartz-final-secondary,
.modern-footer-quote {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.quartz-btn-primary::before,
.quartz-btn-glass::before,
.quartz-final-primary::before,
.quartz-final-secondary::before,
.modern-footer-quote::before {
    content: "";
    position: absolute;

    top: -50%;
    left: -70%;

    width: 45%;
    height: 200%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.28),
        transparent
    );

    transform: skewX(-22deg);

    transition: left .75s ease;

    pointer-events: none;
    z-index: 0;
}

.quartz-btn-primary:hover::before,
.quartz-btn-glass:hover::before,
.quartz-final-primary:hover::before,
.quartz-final-secondary:hover::before,
.modern-footer-quote:hover::before {
    left: 130%;
}

.quartz-btn-primary > *,
.quartz-btn-glass > *,
.quartz-final-primary > *,
.quartz-final-secondary > *,
.modern-footer-quote > * {
    position: relative;
    z-index: 1;
}


/* =========================================
   PREMIUM QUARTZ CARD HOVER
========================================= */

.quartz-modern-card {
    transition:
        transform .45s cubic-bezier(.2,.7,.2,1),
        box-shadow .45s ease;
}

.quartz-modern-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 22px 45px rgba(12, 24, 31, .16);
}

.quartz-card-image {
    overflow: hidden;
}

.quartz-card-image img {
    transition:
        transform .7s cubic-bezier(.2,.7,.2,1),
        filter .5s ease;
}

.quartz-modern-card:hover .quartz-card-image img {
    transform: scale(1.045);
    filter: brightness(1.03);
}

.quartz-card-arrow {
    transition:
        transform .35s ease;
}

.quartz-modern-card:hover .quartz-card-arrow {
    transform: translate(3px, -3px);
}


/* WHY QUARTZ — subtle lift */

.quartz-performance-item {
    transition:
        transform .4s ease,
        background .4s ease,
        box-shadow .4s ease;
}

.quartz-performance-item:hover {
    transform: translateY(-5px);

    background: rgba(255,255,255,.025);

    box-shadow:
        0 18px 35px rgba(0,0,0,.10);
}
/* =========================================
   QUARTZ HERO ENTRANCE
========================================= */

.quartz-cinematic-content .quartz-hero-label,
.quartz-cinematic-content h1,
.quartz-cinematic-content > p,
.quartz-cinematic-content .quartz-hero-actions {
    opacity: 0;
    transform: translateY(28px);
    animation: quartzHeroEnter .9s cubic-bezier(.2,.7,.2,1) forwards;
}

.quartz-cinematic-content .quartz-hero-label {
    animation-delay: .15s;
}

.quartz-cinematic-content h1 {
    animation-delay: .3s;
}

.quartz-cinematic-content > p {
    animation-delay: .48s;
}

.quartz-cinematic-content .quartz-hero-actions {
    animation-delay: .66s;
}

.quartz-scroll-hint {
    opacity: 0;
    animation: quartzHeroFade 1s ease forwards;
    animation-delay: .95s;
}

@keyframes quartzHeroEnter {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes quartzHeroFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
/* =========================================
   QUARTZ HERO PARALLAX SUPPORT
========================================= */

.quartz-cinematic-hero {
    background-attachment: scroll;
    background-position: center 50%;
    background-size: cover;
    will-change: background-position;
}
/* =========================================
   FLOATING QUOTE BUTTON
========================================= */

.floating-quote-btn {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 999;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 14px 20px;

    background: rgba(25, 38, 46, 0.92);
    backdrop-filter: blur(10px);

    color: #fff;
    text-decoration: none;

    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;

    box-shadow:
        0 12px 30px rgba(0,0,0,.22);

    font-size: 14px;
    letter-spacing: .03em;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}

.floating-quote-btn:hover {
    transform: translateY(-4px);

    background: rgba(38, 55, 65, 0.98);

    box-shadow:
        0 18px 38px rgba(0,0,0,.28);
}

.floating-quote-btn span {
    transition: transform .3s ease;
}

.floating-quote-btn:hover span {
    transform: translate(2px, -2px);
}

@media (max-width: 768px) {
    .floating-quote-btn {
        right: 16px;
        bottom: 16px;

        padding: 12px 16px;

        font-size: 13px;
    }
}
/* =========================================================
   PREMIUM HOME 2026 — unified with Quartz / Marble / Granite
   ========================================================= */
.home-premium{--home-ink:#17242c;--home-slate:#42545e;--home-mist:#eef2f3;--home-line:rgba(25,42,51,.14);--home-white:#f9fbfb;background:#f6f8f8;color:var(--home-ink);overflow:hidden}
.home-premium *{box-sizing:border-box}.home-kicker{display:inline-block;font-size:11px;font-weight:700;letter-spacing:2.6px;color:#d9e2e6}.home-kicker.dark{color:#6d818c}.home-hero{position:relative;min-height:calc(100vh - 76px);height:820px;display:flex;align-items:center;padding:80px max(6vw,45px);color:#fff;overflow:hidden;background:#263740}.home-hero-media{position:absolute;inset:0;background:url("../images/home/hero-1.jpg") center/cover no-repeat;transform:scale(1.02);animation:homeHeroIn 1.6s cubic-bezier(.2,.7,.2,1) both}.home-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,24,30,.72) 0%,rgba(18,31,38,.45) 45%,rgba(18,31,38,.12) 75%),linear-gradient(0deg,rgba(13,24,30,.3),transparent 45%)}.home-hero-content{position:relative;z-index:2;width:min(790px,72vw);padding-top:15px}.home-hero h1{margin:24px 0 24px;font-size:clamp(60px,7.4vw,112px);line-height:.88;letter-spacing:-5px;font-weight:600}.home-hero h1 em,.home-final-cta h2 em{font-family:Georgia,'Times New Roman',serif;font-weight:400;color:#cbd8dd}.home-hero-content>p{max-width:600px;margin:0 0 34px;font-size:18px;line-height:1.75;color:rgba(255,255,255,.82)}.home-actions{display:flex;gap:12px;flex-wrap:wrap}.home-btn{position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:30px;min-width:205px;padding:16px 20px;text-decoration:none;font-size:13px;font-weight:700;letter-spacing:.3px;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease,background .3s ease}.home-btn:before{content:"";position:absolute;top:-80%;left:-55%;width:34%;height:260%;background:rgba(255,255,255,.18);transform:rotate(24deg);transition:left .55s ease}.home-btn:hover:before{left:125%}.home-btn:hover{transform:translateY(-2px)}.home-btn-primary{background:linear-gradient(135deg,#506a78,#304753);color:#fff;box-shadow:0 14px 35px rgba(8,21,29,.26)}.home-btn-ghost{border:1px solid rgba(255,255,255,.42);color:#fff;background:rgba(255,255,255,.05);backdrop-filter:blur(5px)}.home-btn-light{background:#e9eef0;color:#263842;margin-top:40px}.home-hero-note{position:absolute;z-index:2;right:max(5vw,40px);bottom:68px;display:flex;gap:18px;align-items:flex-start;border-top:1px solid rgba(255,255,255,.32);padding-top:14px;width:260px}.home-hero-note span{font-size:11px;letter-spacing:2px;color:#b9c8cf}.home-hero-note p{margin:0;font-size:12px;line-height:1.55;color:rgba(255,255,255,.7)}.home-scroll{position:absolute;z-index:2;left:30px;bottom:54px;font-size:9px;letter-spacing:2px;writing-mode:vertical-rl;color:rgba(255,255,255,.62)}.home-scroll i{display:block;width:1px;height:45px;background:rgba(255,255,255,.4);margin:12px auto 0}
.home-intro{max-width:1320px;margin:auto;padding:125px 6vw 135px;display:grid;grid-template-columns:1fr 2.15fr;gap:70px}.home-intro-label{padding-top:10px}.home-intro-label span{font-size:10px;font-weight:700;letter-spacing:2.5px;color:#7a8d97}.home-intro-copy h2{margin:0 0 32px;font-size:clamp(43px,5vw,70px);line-height:1.03;letter-spacing:-2.5px;font-weight:600}.home-intro-copy h2 span{font-family:Georgia,'Times New Roman',serif;font-weight:400;color:#708690}.home-intro-copy p{max-width:690px;margin:0 0 30px;color:#61717a;font-size:17px;line-height:1.9}.home-text-link{display:inline-flex;gap:25px;align-items:center;color:#263b46;text-decoration:none;font-size:13px;font-weight:700;border-bottom:1px solid #9cabb2;padding-bottom:8px;transition:gap .3s ease}.home-text-link:hover{gap:34px}
.home-materials{padding:105px 4vw 115px;background:#e8edef}.home-section-head{max-width:1320px;margin:0 auto 55px;display:flex;align-items:end;justify-content:space-between;gap:30px}.home-section-head h2{margin:13px 0 0;font-size:clamp(42px,4.8vw,66px);line-height:1;letter-spacing:-2.3px;font-weight:600}.home-section-head>p{margin:0 0 6px;color:#6c7c84;font-size:14px}.home-material-grid{max-width:1320px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.home-material-card{position:relative;height:610px;overflow:hidden;color:#fff;text-decoration:none;background:#293b45}.home-material-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .5s ease}.home-material-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(13,24,29,.82),rgba(15,27,33,.03) 67%),linear-gradient(90deg,rgba(20,34,41,.18),transparent)}.home-material-card:hover img{transform:scale(1.045);filter:saturate(.9)}.home-material-index{position:absolute;top:24px;right:24px;font-size:10px;letter-spacing:2px;color:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.32);width:40px;height:40px;display:grid;place-items:center}.home-material-copy{position:absolute;left:30px;right:30px;bottom:30px}.home-material-copy small{font-size:9px;letter-spacing:2.3px;color:#c7d3d8}.home-material-copy h3{font-size:46px;letter-spacing:-1.7px;margin:9px 0 10px;font-weight:500}.home-material-copy p{margin:0 0 23px;max-width:280px;font-size:13px;line-height:1.6;color:rgba(255,255,255,.74)}.home-material-copy b{display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(255,255,255,.3);padding-top:14px;font-size:11px;letter-spacing:.5px}.home-material-copy b i{font-style:normal;font-size:16px;transition:transform .3s}.home-material-card:hover b i{transform:translate(3px,-3px)}
.home-craft{display:grid;grid-template-columns:1.05fr .95fr;min-height:760px;background:#f7f9f9}.home-craft-image{position:relative;overflow:hidden}.home-craft-image img{width:100%;height:100%;object-fit:cover;display:block}.home-craft-image>span{position:absolute;left:24px;bottom:24px;background:rgba(27,43,51,.84);backdrop-filter:blur(8px);color:#e9eff1;padding:12px 15px;font-size:9px;letter-spacing:2px}.home-craft-copy{padding:105px 7vw;display:flex;flex-direction:column;justify-content:center}.home-craft-copy h2{font-size:clamp(43px,4.7vw,67px);line-height:1.02;letter-spacing:-2.4px;margin:17px 0 28px;font-weight:600}.home-craft-copy>p{max-width:600px;color:#65757d;line-height:1.85;font-size:16px;margin:0 0 38px}.home-values{border-top:1px solid var(--home-line)}.home-values>div{display:grid;grid-template-columns:42px 1fr;column-gap:16px;padding:21px 0;border-bottom:1px solid var(--home-line)}.home-values strong{grid-row:1/3;font-size:10px;color:#81939c;letter-spacing:1px;padding-top:4px}.home-values h3{margin:0 0 5px;font-size:15px}.home-values p{margin:0;color:#7a898f;font-size:12px;line-height:1.5}
.home-process-new{padding:110px 5vw 115px;background:linear-gradient(135deg,#344750,#263942 60%,#21323a);color:#fff}.home-process-new .home-section-head h2{color:#fff}.home-process-new .home-section-head>p{color:#aebdc3}.home-process-grid{max-width:1320px;margin:auto;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16)}.home-process-card{padding:40px 28px 44px;min-height:230px;border-right:1px solid rgba(255,255,255,.16);transition:background .35s ease}.home-process-card:last-child{border-right:0}.home-process-card:hover{background:rgba(255,255,255,.055)}.home-process-card span{font-size:10px;color:#9fb0b8;letter-spacing:2px}.home-process-card h3{font-size:28px;font-weight:500;margin:48px 0 12px}.home-process-card p{font-size:13px;line-height:1.65;color:#aebbc1;margin:0;max-width:230px}.home-process-new>.home-btn{margin-left:max(calc((100% - 1320px)/2),0px)}
.home-work{padding:115px 4vw 125px;background:#f1f4f4}.home-work-grid{max-width:1320px;margin:auto;display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:330px 330px;gap:12px}.home-work-card{position:relative;overflow:hidden;color:#fff;text-decoration:none}.home-work-large{grid-row:1/3}.home-work-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1)}.home-work-card:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(13,25,31,.7),transparent 58%)}.home-work-card:hover img{transform:scale(1.035)}.home-work-card>div{position:absolute;z-index:2;left:25px;bottom:23px}.home-work-card small{font-size:9px;letter-spacing:2px;color:#c7d3d8}.home-work-card h3{font-size:24px;font-weight:500;margin:7px 0 0}.home-final-cta{min-height:560px;padding:95px 5vw;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:#fff;background:radial-gradient(circle at 50% 0,rgba(115,143,157,.28),transparent 40%),linear-gradient(135deg,#40545e,#293d47 55%,#22343d)}.home-final-cta h2{font-size:clamp(55px,6vw,85px);line-height:.98;letter-spacing:-3px;margin:22px 0}.home-final-cta p{color:#c3cfd4;font-size:15px;margin:0 0 30px}
.home-reveal{opacity:0;transform:translateY(25px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}.home-reveal.is-visible{opacity:1;transform:none}.home-material-card:nth-child(2),.home-process-card:nth-child(2){transition-delay:.08s}.home-material-card:nth-child(3),.home-process-card:nth-child(3){transition-delay:.16s}.home-process-card:nth-child(4){transition-delay:.24s}@keyframes homeHeroIn{from{opacity:.4;transform:scale(1.08)}to{opacity:1;transform:scale(1.02)}}
@media(max-width:900px){.home-hero{height:700px;min-height:700px;padding:65px 30px}.home-hero-content{width:90%}.home-hero h1{letter-spacing:-3px}.home-hero-note{display:none}.home-scroll{display:none}.home-intro{grid-template-columns:1fr;padding:80px 30px;gap:25px}.home-material-grid{grid-template-columns:1fr}.home-material-card{height:520px}.home-craft{grid-template-columns:1fr}.home-craft-image{height:520px}.home-craft-copy{padding:75px 35px}.home-process-grid{grid-template-columns:repeat(2,1fr)}.home-process-card:nth-child(2){border-right:0}.home-process-card:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.16)}.home-work-grid{grid-template-columns:1fr;grid-template-rows:520px 320px 320px}.home-work-large{grid-row:auto}.home-section-head{align-items:flex-start;flex-direction:column}}
@media(max-width:600px){.home-hero{height:620px;min-height:620px;padding:55px 21px}.home-hero-content{width:100%}.home-hero h1{font-size:55px;letter-spacing:-2.8px}.home-hero-content>p{font-size:15px}.home-actions{display:grid}.home-btn{width:100%;min-width:0}.home-intro{padding:65px 22px 75px}.home-intro-copy h2,.home-section-head h2,.home-craft-copy h2{font-size:39px;letter-spacing:-1.5px}.home-materials,.home-work{padding:70px 16px 80px}.home-section-head{margin-bottom:35px}.home-material-card{height:470px}.home-material-copy{left:22px;right:22px;bottom:22px}.home-material-copy h3{font-size:39px}.home-craft-image{height:390px}.home-craft-copy{padding:65px 22px}.home-process-new{padding:75px 18px 80px}.home-process-grid{grid-template-columns:1fr}.home-process-card{border-right:0;border-bottom:1px solid rgba(255,255,255,.16)!important;min-height:190px;padding:30px 15px}.home-process-card:last-child{border-bottom:0!important}.home-process-card h3{margin-top:28px}.home-process-new>.home-btn{margin-left:0}.home-work-grid{grid-template-rows:430px 270px 270px}.home-final-cta{min-height:480px;padding:70px 20px}.home-final-cta h2{font-size:49px;letter-spacing:-2px}}
@media(prefers-reduced-motion:reduce){.home-reveal,.home-material-card img,.home-work-card img,.home-hero-media{transition:none!important;animation:none!important}.home-reveal{opacity:1;transform:none}}


/* =====================================
   HOME COMPACT TUNING — 2026-09-06
   Keeps the same premium visual language while reducing scale.
===================================== */
@media (min-width: 901px) {
  .home-hero { height: 680px; min-height: 680px; padding-top: 60px; padding-bottom: 60px; }
  .home-hero h1 { font-size: clamp(54px, 6.2vw, 92px); margin: 20px 0 20px; }
  .home-hero-content > p { margin-bottom: 26px; font-size: 16px; }
  .home-hero-note { bottom: 46px; }
  .home-scroll { bottom: 40px; }

  .home-intro { padding-top: 88px; padding-bottom: 94px; gap: 55px; }
  .home-intro-copy h2 { font-size: clamp(40px, 4.2vw, 60px); margin-bottom: 24px; }
  .home-intro-copy p { font-size: 16px; margin-bottom: 24px; }

  .home-materials { padding-top: 78px; padding-bottom: 86px; }
  .home-section-head { margin-bottom: 40px; }
  .home-section-head h2 { font-size: clamp(39px, 4.1vw, 58px); }
  .home-material-card { height: 500px; }
  .home-material-copy h3 { font-size: 40px; }

  .home-craft { min-height: 620px; }
  .home-craft-copy { padding-top: 75px; padding-bottom: 75px; }
  .home-craft-copy h2 { font-size: clamp(40px, 4vw, 58px); margin-bottom: 22px; }
  .home-craft-copy > p { margin-bottom: 28px; }
  .home-values > div { padding-top: 16px; padding-bottom: 16px; }

  .home-process-new { padding-top: 80px; padding-bottom: 86px; }
  .home-process-card { min-height: 195px; padding-top: 30px; padding-bottom: 32px; }
  .home-process-card h3 { margin-top: 34px; font-size: 25px; }
  .home-btn-light { margin-top: 30px; }

  .home-work { padding-top: 82px; padding-bottom: 90px; }
  .home-work-grid { grid-template-rows: 285px 285px; }

  .home-final-cta { min-height: 440px; padding-top: 70px; padding-bottom: 70px; }
  .home-final-cta h2 { font-size: clamp(50px, 5.2vw, 72px); }
}

/* =========================================================
   PREMIUM ABOUT 2026 — unified with Home / Quartz / Marble / Granite
   Prepared for future Admin Site Settings integration
   ========================================================= */
.about-premium{--about-ink:#17242c;--about-slate:#42545e;--about-mist:#eef2f3;--about-line:rgba(25,42,51,.14);--about-white:#f9fbfb;background:#f6f8f8;color:var(--about-ink);overflow:hidden}
.about-premium *{box-sizing:border-box}
.about-kicker{display:inline-block;font-size:11px;font-weight:700;letter-spacing:2.6px;color:#d9e2e6}.about-kicker.dark{color:#6d818c}
.about-hero{position:relative;height:680px;min-height:680px;display:flex;align-items:center;padding:60px max(6vw,45px);color:#fff;overflow:hidden;background:#263740}
.about-hero-media{position:absolute;inset:0;background:url("../images/home/process.jpg") center/cover no-repeat;transform:scale(1.03);animation:aboutHeroIn 1.5s cubic-bezier(.2,.7,.2,1) both}
.about-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,23,29,.84) 0%,rgba(17,31,38,.63) 40%,rgba(18,31,38,.18) 75%),linear-gradient(0deg,rgba(13,24,30,.42),transparent 48%)}
.about-hero-light{position:absolute;width:650px;height:650px;left:-270px;top:50%;transform:translateY(-50%);border-radius:50%;background:radial-gradient(circle,rgba(125,169,191,.18),rgba(92,141,167,.06) 40%,transparent 70%);filter:blur(10px)}
.about-hero-content{position:relative;z-index:2;width:min(760px,72vw);padding-top:10px}.about-hero h1{margin:20px 0 20px;font-size:clamp(54px,6.2vw,92px);line-height:.92;letter-spacing:-4px;font-weight:600}.about-hero h1 em,.about-story h2 em,.about-craft-copy h2 em,.about-materials-copy h2 em,.about-final-cta h2 em{font-family:Georgia,'Times New Roman',serif;font-weight:400;color:#cbd8dd}.about-hero-content>p{max-width:610px;margin:0 0 28px;font-size:16px;line-height:1.75;color:rgba(255,255,255,.82)}
.about-actions{display:flex;gap:12px;flex-wrap:wrap}.about-btn{position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:30px;min-width:205px;padding:16px 20px;text-decoration:none;font-size:13px;font-weight:700;letter-spacing:.3px;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease,background .3s ease}.about-btn:before{content:"";position:absolute;top:-80%;left:-55%;width:34%;height:260%;background:rgba(255,255,255,.23);transform:rotate(19deg);transition:left .55s ease}.about-btn:hover:before{left:125%}.about-btn:hover{transform:translateY(-3px)}.about-btn-primary{background:#eef3f5;color:#1c303a;box-shadow:0 12px 28px rgba(0,0,0,.19)}.about-btn-ghost{color:#fff;border:1px solid rgba(255,255,255,.34);background:rgba(21,37,45,.18);backdrop-filter:blur(6px)}
.about-scroll{position:absolute;z-index:2;right:max(6vw,45px);bottom:40px;display:flex;align-items:center;gap:12px;font-size:9px;letter-spacing:2px;color:rgba(255,255,255,.6)}.about-scroll i{width:44px;height:1px;background:rgba(255,255,255,.5);display:block}
.about-story{max-width:1320px;margin:auto;padding:92px 4vw 100px;display:grid;grid-template-columns:1fr 2.15fr;gap:70px}.about-story-label{padding-top:10px}.about-story-label span{font-size:10px;font-weight:700;letter-spacing:2.5px;color:#7a8d97}.about-story-copy h2{margin:0 0 28px;font-size:clamp(40px,4.4vw,62px);line-height:1.03;letter-spacing:-2.3px;font-weight:600}.about-story-copy h2 em{display:inline;color:#708690}.about-story-copy p{max-width:760px;margin:0 0 21px;color:#61717a;font-size:16px;line-height:1.9}.about-story-copy .about-lead{font-size:19px;color:#3f535e}
.about-craft{display:grid;grid-template-columns:1.06fr .94fr;min-height:630px;background:#1e3039;color:#fff}.about-craft-image{position:relative;min-height:630px;overflow:hidden}.about-craft-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}.about-craft-image:hover img{transform:scale(1.035)}.about-craft-image:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,23,29,.45),transparent 60%)}.about-craft-badge{position:absolute;z-index:2;left:28px;bottom:26px;padding:17px 20px;background:rgba(22,42,52,.76);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.16)}.about-craft-badge strong{display:block;font-size:20px;font-weight:500}.about-craft-badge span{display:block;margin-top:4px;font-size:10px;letter-spacing:1.3px;color:#c7d4da;text-transform:uppercase}.about-craft-copy{padding:75px max(5vw,55px);display:flex;flex-direction:column;justify-content:center}.about-craft-copy h2{margin:16px 0 22px;font-size:clamp(40px,4vw,58px);line-height:1.02;letter-spacing:-2px;font-weight:600}.about-craft-copy h2 em{display:block}.about-craft-copy>p{max-width:590px;margin:0 0 28px;color:#b9c8ce;font-size:15px;line-height:1.85}.about-values{border-top:1px solid rgba(255,255,255,.17)}.about-values>div{display:grid;grid-template-columns:44px 105px 1fr;gap:12px;align-items:start;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.14)}.about-values span{font-size:10px;color:#7892a0;letter-spacing:1.5px}.about-values h3{margin:0;font-size:14px;font-weight:600}.about-values p{margin:0;color:#9fb0b8;font-size:12px;line-height:1.55}
.about-principles{padding:86px 4vw 92px;background:#e8edef}.about-section-head{max-width:1320px;margin:0 auto 42px;display:flex;align-items:end;justify-content:space-between;gap:30px}.about-section-head h2{margin:13px 0 0;font-size:clamp(39px,4.1vw,58px);line-height:1;letter-spacing:-2.2px;font-weight:600}.about-section-head>p{max-width:380px;margin:0 0 5px;color:#6c7c84;font-size:14px;line-height:1.7}.about-principles-grid{max-width:1320px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(24,43,52,.16);border-bottom:1px solid rgba(24,43,52,.16)}.about-principle{min-height:265px;padding:30px 28px 32px;border-right:1px solid rgba(24,43,52,.16)}.about-principle:last-child{border-right:0}.about-principle>span{font-size:10px;letter-spacing:2px;color:#748b96}.about-principle h3{margin:48px 0 16px;font-size:25px;font-weight:500;letter-spacing:-.7px}.about-principle p{margin:0;max-width:320px;color:#66767e;font-size:14px;line-height:1.75}
.about-materials{padding:88px 4vw 95px;background:#f6f8f8}.about-materials-copy{max-width:1320px;margin:0 auto 42px}.about-materials-copy h2{margin:13px 0 20px;font-size:clamp(40px,4.3vw,60px);line-height:1;letter-spacing:-2.2px;font-weight:600}.about-materials-copy h2 em{color:#708690}.about-materials-copy p{max-width:650px;margin:0;color:#61717a;font-size:15px;line-height:1.8}.about-material-links{max-width:1320px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.about-material-card{position:relative;height:360px;overflow:hidden;color:#fff;text-decoration:none;background:#293b45}.about-material-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .5s ease}.about-material-card:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(12,25,31,.82),transparent 67%)}.about-material-card:hover img{transform:scale(1.045);filter:saturate(.9)}.about-material-card>div{position:absolute;z-index:2;left:24px;right:24px;bottom:22px}.about-material-card span{font-size:9px;letter-spacing:2px;color:#c8d3d8}.about-material-card h3{margin:7px 0 16px;font-size:36px;font-weight:500;letter-spacing:-1.2px}.about-material-card b{display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:1.3px;text-transform:uppercase}.about-material-card b i{font-style:normal;font-size:18px;transition:transform .3s ease}.about-material-card:hover b i{transform:translateX(5px)}
.about-local{max-width:1320px;margin:auto;padding:82px 4vw 88px;display:grid;grid-template-columns:1.5fr .7fr;gap:80px;align-items:end}.about-local h2{margin:13px 0 0;font-size:clamp(38px,4vw,56px);line-height:1.05;letter-spacing:-2px;font-weight:600}.about-local-details{padding-left:26px;border-left:1px solid rgba(26,45,54,.18)}.about-local-details p{margin:0 0 20px;color:#61717a;font-size:15px;line-height:1.8}.about-local-details a{color:#263b46;text-decoration:none;font-size:20px;font-weight:600}
.about-final-cta{min-height:440px;padding:70px 5vw;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:#fff;background:radial-gradient(circle at 50% 0,rgba(115,143,157,.28),transparent 40%),linear-gradient(135deg,#40545e,#293d47 55%,#22343d)}.about-final-cta h2{font-size:clamp(50px,5.2vw,72px);line-height:.98;letter-spacing:-3px;margin:20px 0}.about-final-cta p{max-width:620px;color:#c3cfd4;font-size:15px;line-height:1.75;margin:0 0 28px}
.about-reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}.about-reveal.is-visible{opacity:1;transform:none}.about-principle:nth-child(2),.about-material-card:nth-child(2){transition-delay:.08s}.about-principle:nth-child(3),.about-material-card:nth-child(3){transition-delay:.16s}
@keyframes aboutHeroIn{from{opacity:.45;transform:scale(1.08)}to{opacity:1;transform:scale(1.03)}}
@media(max-width:900px){.about-hero{height:700px;min-height:700px;padding:65px 30px}.about-hero-content{width:90%}.about-scroll{display:none}.about-story{grid-template-columns:1fr;padding:78px 30px;gap:24px}.about-craft{grid-template-columns:1fr}.about-craft-image{min-height:500px;height:500px}.about-craft-copy{padding:70px 34px}.about-section-head{align-items:flex-start;flex-direction:column}.about-principles-grid{grid-template-columns:1fr}.about-principle{border-right:0;border-bottom:1px solid rgba(24,43,52,.16);min-height:210px}.about-principle:last-child{border-bottom:0}.about-material-links{grid-template-columns:1fr}.about-material-card{height:470px}.about-local{grid-template-columns:1fr;gap:35px;padding:75px 30px}.about-local-details{padding-left:0;border-left:0;border-top:1px solid rgba(26,45,54,.18);padding-top:28px}}
@media(max-width:600px){.about-hero{height:620px;min-height:620px;padding:55px 21px}.about-hero-content{width:100%}.about-hero h1{font-size:54px;letter-spacing:-2.8px}.about-hero-content>p{font-size:15px}.about-actions{display:grid}.about-btn{width:100%;min-width:0}.about-story{padding:62px 22px 68px}.about-story-copy h2,.about-craft-copy h2,.about-section-head h2,.about-materials-copy h2,.about-local h2{font-size:38px;letter-spacing:-1.5px}.about-story-copy .about-lead{font-size:17px}.about-craft-image{height:380px;min-height:380px}.about-craft-copy{padding:60px 22px}.about-values>div{grid-template-columns:36px 84px 1fr;gap:8px}.about-principles{padding:66px 18px 72px}.about-section-head{margin-bottom:30px}.about-principle{padding:28px 16px;min-height:200px}.about-principle h3{margin-top:35px}.about-materials{padding:68px 16px 74px}.about-material-card{height:410px}.about-local{padding:62px 22px 68px}.about-final-cta{min-height:440px;padding:70px 20px}.about-final-cta h2{font-size:48px;letter-spacing:-2px}}
@media(prefers-reduced-motion:reduce){.about-reveal,.about-material-card img,.about-craft-image img,.about-hero-media{transition:none!important;animation:none!important}.about-reveal{opacity:1;transform:none}}
\n\n/* =========================================================\n   ABOUT SHORT + UNIFIED HERO — 2026-09-06\n   ========================================================= */\n.about-short .about-hero{height:620px;min-height:620px}\n.about-short .about-hero-content{width:min(790px,72vw)}\n.about-short .about-hero h1{font-family:Arial,sans-serif;font-size:clamp(62px,6.8vw,100px);line-height:.91;letter-spacing:-4px;font-weight:700;margin:18px 0 20px}\n.about-short .about-hero h1 span{display:block;font-family:Arial,sans-serif;font-size:.62em;line-height:1.05;letter-spacing:-2.4px;font-weight:400;color:#edf3f5;margin-top:8px}\n.about-short .about-story{padding-top:76px;padding-bottom:80px}\n.about-short .about-story-copy h2{font-family:Arial,sans-serif;font-weight:700}\n.about-short .about-story-copy h2 span{font-family:Arial,sans-serif;font-weight:400;color:#708690}\n.about-short .about-principles{padding-top:72px;padding-bottom:78px}\n.about-short .about-principle{min-height:225px}\n.about-short .about-principle h3{margin-top:36px}\n.about-short .about-final-cta{min-height:370px;padding-top:58px;padding-bottom:58px}\n.about-short .about-final-cta h2{font-family:Arial,sans-serif;font-size:clamp(48px,5vw,68px);font-weight:700;letter-spacing:-2.5px}\n.about-short .about-final-cta h2 span{font-family:Arial,sans-serif;font-weight:400;color:#cbd8dd}\n@media(max-width:900px){.about-short .about-hero{height:650px;min-height:650px}.about-short .about-story{padding-top:68px;padding-bottom:72px}}\n@media(max-width:600px){.about-short .about-hero{height:590px;min-height:590px}.about-short .about-hero h1{font-size:56px;letter-spacing:-2.8px}.about-short .about-hero h1 span{letter-spacing:-1.6px}.about-short .about-story{padding-top:58px;padding-bottom:62px}.about-short .about-principles{padding-top:58px;padding-bottom:62px}.about-short .about-final-cta{min-height:360px;padding-top:58px;padding-bottom:58px}}\n

/* =========================================================
   UNIFIED SITE VISUAL SYSTEM — 2026-09-06
   Home / About / Gallery / Quartz / Marble / Granite
   + Quartz brand page polish
   ========================================================= */
:root{
    --site-deep:#172830;
    --site-deep-2:#243a45;
    --site-mid:#506a78;
    --site-ice:#c7d7df;
    --site-mist:#eef2f3;
    --site-paper:#f7f9f9;
    --site-ink:#17242c;
    --site-muted:#6b7d86;
    --site-line:rgba(31,53,64,.14);
}

/* One typographic rhythm across the main hero areas. */
.home-kicker,
.about-kicker,
.gallery-kicker,
.quartz-hero-label{
    display:inline-flex !important;
    align-items:center !important;
    gap:14px !important;
    margin:0 0 22px !important;
    font-family:Arial,sans-serif !important;
    font-size:11px !important;
    line-height:1 !important;
    font-weight:700 !important;
    letter-spacing:.24em !important;
    text-transform:uppercase !important;
    color:rgba(225,238,245,.78) !important;
}
.home-kicker:not(.dark)::before,
.about-kicker:not(.dark)::before,
.gallery-kicker::before,
.quartz-hero-label::before{
    content:"" !important;
    width:42px !important;
    height:1px !important;
    flex:0 0 42px !important;
    background:linear-gradient(90deg,#9fc1d2,rgba(159,193,210,.12)) !important;
}
.home-kicker.dark,.about-kicker.dark{color:#6d818c !important;}
.home-kicker.dark::before,.about-kicker.dark::before{display:none !important;}

/* Desktop: close proportions and positioning on all primary pages. */
@media (min-width:901px){
    .home-hero,
    .about-short .about-hero,
    .quartz-cinematic-hero,
    .gallery-hero{
        min-height:640px !important;
        height:640px !important;
        box-sizing:border-box !important;
    }
    .home-hero,
    .about-short .about-hero,
    .quartz-cinematic-hero{
        padding:64px clamp(44px,7vw,120px) !important;
    }
    .home-hero-content,
    .about-short .about-hero-content,
    .quartz-cinematic-content,
    .gallery-hero-copy{
        width:min(790px,68vw) !important;
        max-width:790px !important;
    }
}

.home-hero h1,
.about-short .about-hero h1,
.quartz-cinematic-content h1,
.gallery-hero-copy h1{
    margin:0 0 22px !important;
    font-family:Arial,sans-serif !important;
    font-size:clamp(62px,6.6vw,96px) !important;
    line-height:.91 !important;
    letter-spacing:-.048em !important;
    font-weight:700 !important;
    color:#fff !important;
    text-shadow:0 8px 34px rgba(0,0,0,.24) !important;
}
.home-hero h1 em,
.about-short .about-hero h1 span,
.quartz-cinematic-content h1 span,
.gallery-hero-copy h1 span{
    display:block !important;
    margin-top:.17em !important;
    font-family:Arial,sans-serif !important;
    font-size:.56em !important;
    line-height:1.02 !important;
    letter-spacing:-.035em !important;
    font-style:normal !important;
    font-weight:300 !important;
    color:#c5d5dd !important;
}
.home-hero-content>p,
.about-short .about-hero-content>p,
.quartz-cinematic-content>p,
.gallery-hero-copy>p{
    max-width:620px !important;
    margin:0 0 30px !important;
    font-family:Arial,sans-serif !important;
    font-size:16px !important;
    line-height:1.75 !important;
    color:rgba(239,245,247,.78) !important;
}

/* Shared premium button language. */
.home-btn-primary,.about-btn-primary,.quartz-btn-primary{
    background:linear-gradient(135deg,#587483,#304955) !important;
    border:1px solid rgba(255,255,255,.10) !important;
    box-shadow:0 14px 34px rgba(7,20,28,.24) !important;
}
.home-btn-ghost,.about-btn-ghost,.quartz-btn-glass,.gallery-hero-link{
    border-color:rgba(255,255,255,.36) !important;
    background:rgba(255,255,255,.055) !important;
    color:#fff !important;
    backdrop-filter:blur(7px) !important;
}

/* Gallery loads its page CSS after style.css, so these intentional
   important overrides keep only the hero in the unified system. */
.gallery-hero-copy{
    left:clamp(44px,7vw,120px) !important;
    right:auto !important;
    top:50% !important;
    bottom:auto !important;
    transform:translateY(-50%) !important;
    text-align:left !important;
}
.gallery-hero-link{
    display:inline-flex !important;
    align-items:center !important;
    gap:26px !important;
    padding:15px 20px !important;
    border:1px solid rgba(255,255,255,.36) !important;
    text-decoration:none !important;
    font-size:13px !important;
    font-weight:700 !important;
}

/* Keep individual photography, but use the same cool depth treatment. */
.home-hero-shade,.about-hero-shade{
    background:linear-gradient(90deg,rgba(10,21,27,.84) 0%,rgba(18,32,39,.64) 40%,rgba(20,35,43,.20) 74%),linear-gradient(0deg,rgba(10,20,26,.42),transparent 48%) !important;
}
.quartz-cinematic-hero::after,
.home-hero::after,
.about-hero::after,
.gallery-hero::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(118deg,transparent 0 42%,rgba(210,231,240,.055) 49%,transparent 57%);
    mix-blend-mode:screen;
    z-index:1;
}
.home-hero-content,.about-hero-content,.quartz-cinematic-content,.gallery-hero-copy{z-index:3 !important;}

/* Tablet / mobile rhythm remains common. */
@media(max-width:900px){
    .home-hero,.about-short .about-hero,.quartz-cinematic-hero,.gallery-hero{
        min-height:650px !important;height:650px !important;
    }
    .home-hero,.about-short .about-hero,.quartz-cinematic-hero{padding:58px 30px !important;}
    .home-hero-content,.about-short .about-hero-content,.quartz-cinematic-content,.gallery-hero-copy{width:min(90%,760px) !important;max-width:none !important;}
    .gallery-hero-copy{left:30px !important;right:30px !important;width:auto !important;}
    .home-hero h1,.about-short .about-hero h1,.quartz-cinematic-content h1,.gallery-hero-copy h1{font-size:clamp(56px,10vw,78px) !important;}
}
@media(max-width:600px){
    .home-hero,.about-short .about-hero,.quartz-cinematic-hero,.gallery-hero{min-height:590px !important;height:590px !important;}
    .home-hero,.about-short .about-hero,.quartz-cinematic-hero{padding:48px 21px !important;}
    .gallery-hero-copy{left:21px !important;right:21px !important;}
    .home-hero h1,.about-short .about-hero h1,.quartz-cinematic-content h1,.gallery-hero-copy h1{font-size:52px !important;letter-spacing:-.045em !important;}
    .home-hero h1 em,.about-short .about-hero h1 span,.quartz-cinematic-content h1 span,.gallery-hero-copy h1 span{font-size:.58em !important;}
    .home-hero-content>p,.about-short .about-hero-content>p,.quartz-cinematic-content>p,.gallery-hero-copy>p{font-size:15px !important;line-height:1.65 !important;}
    .home-kicker,.about-kicker,.gallery-kicker,.quartz-hero-label{font-size:10px !important;letter-spacing:.2em !important;gap:10px !important;}
    .home-kicker:not(.dark)::before,.about-kicker:not(.dark)::before,.gallery-kicker::before,.quartz-hero-label::before{width:28px !important;flex-basis:28px !important;}
}

/* ---------------------------------------------------------
   QUARTZ BRAND PAGES — visual polish only, structure intact
   --------------------------------------------------------- */
.brand-page-hero{
    position:relative;
    overflow:hidden;
    min-height:360px;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:70px 24px;
    color:#fff;
    background:
        radial-gradient(circle at 78% 20%,rgba(140,183,203,.16),transparent 34%),
        linear-gradient(135deg,#0f1d24 0%,#1d313b 55%,#14242c 100%);
}
.brand-page-hero::before{
    content:"";
    position:absolute;
    inset:-80% auto -80% -20%;
    width:34%;
    transform:rotate(19deg);
    background:linear-gradient(90deg,transparent,rgba(219,237,245,.08),transparent);
    animation:brandHeroSheen 7s ease-in-out infinite;
    pointer-events:none;
}
.brand-page-hero>*{position:relative;z-index:1;}
.brand-page-hero h1{
    margin:0 0 16px;
    font-family:Arial,sans-serif;
    font-size:clamp(44px,5vw,68px);
    line-height:.96;
    letter-spacing:-.045em;
    font-weight:600;
    color:#fff;
}
.brand-page-hero p{
    max-width:580px;
    margin:0 0 26px;
    font-size:16px;
    line-height:1.7;
    color:rgba(235,243,246,.72);
}
.brand-page-hero a{
    position:relative;
    overflow:hidden;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:160px;
    padding:14px 20px;
    border:1px solid rgba(255,255,255,.28);
    background:rgba(255,255,255,.055);
    backdrop-filter:blur(7px);
    color:#fff;
    font-size:13px;
    font-weight:700;
    text-decoration:none;
    transition:transform .3s ease,background .3s ease,border-color .3s ease;
}
.brand-page-hero a::before{
    content:"";
    position:absolute;
    top:-90%;left:-55%;width:32%;height:280%;
    transform:rotate(23deg);
    background:rgba(255,255,255,.18);
    transition:left .55s ease;
}
.brand-page-hero a:hover{transform:translateY(-2px);background:rgba(89,119,134,.34);border-color:rgba(205,226,235,.48);}
.brand-page-hero a:hover::before{left:125%;}
.brand-products{background:linear-gradient(180deg,#f3f6f7,#e9eef0);padding-top:72px;}
.brand-products>h2{color:var(--site-ink);font-size:clamp(32px,3vw,44px);font-weight:600;letter-spacing:-.035em;}
.stone-card{
    border:1px solid rgba(41,67,79,.13);
    background:rgba(255,255,255,.86);
    box-shadow:0 12px 30px rgba(27,45,55,.06);
    transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}
.stone-card{position:relative;}
.stone-card::after{
    content:"";
    position:absolute;inset:0;
    pointer-events:none;
    background:linear-gradient(120deg,transparent 0 40%,rgba(255,255,255,.30) 49%,transparent 58%);
    transform:translateX(-130%);
    transition:transform .75s ease;
}
.stone-card:hover{transform:translateY(-6px);border-color:rgba(70,104,120,.24);box-shadow:0 22px 48px rgba(24,43,53,.13);}
.stone-card:hover::after{transform:translateX(130%);}
.stone-card h3{color:#243841;font-weight:600;letter-spacing:-.01em;}
@keyframes brandHeroSheen{0%,62%,100%{left:-30%;opacity:0}72%{opacity:1}88%{left:112%;opacity:0}}
@media(max-width:600px){.brand-page-hero{min-height:320px;padding:58px 20px}.brand-page-hero h1{font-size:42px}.brand-products{padding:54px 16px}.brand-products-grid{grid-template-columns:1fr 1fr;gap:10px}.stone-card img{height:155px}}

/* =========================================================
   CONTACT PREMIUM — 2026-09-06
   Images intentionally use CSS variables so Admin/Site Settings
   can replace them later without rebuilding page markup.
   ========================================================= */
.contact-premium{--contact-ink:#17222b;--contact-deep:#15222c;--contact-blue:#263b4a;--contact-soft:#eef0ef;--contact-line:rgba(22,35,44,.14);--contact-hero-image:none;--contact-bottom-image:none;background:#f4f4f1;color:var(--contact-ink)}
.contact-hero{position:relative;min-height:650px;display:flex;align-items:center;overflow:hidden;background:#18242d}
.contact-hero-media{position:absolute;inset:0;background-image:var(--contact-hero-image),linear-gradient(125deg,#263945,#101820);background-size:cover;background-position:center;transform:scale(1.01)}
.contact-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,16,22,.82) 0%,rgba(9,16,22,.52) 48%,rgba(9,16,22,.18) 100%),linear-gradient(0deg,rgba(8,15,20,.34),transparent 55%)}
.contact-hero-content{position:relative;z-index:2;width:min(1180px,calc(100% - 80px));margin:auto;color:#fff;padding:90px 0 70px}
.contact-kicker{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.22em;margin-bottom:22px;color:#d9e0e3}.contact-kicker.dark{color:#65747d}
.contact-hero h1,.contact-final-cta h2{margin:0;font-size:clamp(56px,6vw,88px);line-height:.96;letter-spacing:-.045em;font-weight:750}.contact-hero h1 span,.contact-final-cta h2 span{font-weight:300;color:#d7dde0}
.contact-hero-content>p{max-width:610px;font-size:17px;line-height:1.75;color:rgba(255,255,255,.78);margin:28px 0 34px}
.contact-hero-actions{display:flex;gap:12px;flex-wrap:wrap}.contact-btn{min-height:48px;display:inline-flex;align-items:center;gap:20px;padding:0 22px;border:1px solid rgba(255,255,255,.28);text-decoration:none;font-size:13px;font-weight:700;letter-spacing:.03em;transition:.3s ease;position:relative;overflow:hidden}.contact-btn-primary{background:#eef1ef;color:#17222b;border-color:#eef1ef}.contact-btn-ghost{color:#fff;background:rgba(255,255,255,.04);backdrop-filter:blur(8px)}.contact-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.18)}
.contact-intro{width:min(1180px,calc(100% - 80px));margin:auto;padding:105px 0 90px;display:grid;grid-template-columns:1.05fr .95fr;gap:100px;align-items:start}.contact-intro h2,.contact-form-heading h2{font-size:clamp(42px,4.4vw,64px);line-height:1;letter-spacing:-.04em;margin:0 0 26px}.contact-intro h2 span,.contact-form-heading h2 span{font-weight:300;color:#66747c}.contact-intro-copy>p{max-width:590px;line-height:1.8;color:#5b666c;font-size:16px}
.contact-details-card{background:#172630;color:#fff;box-shadow:0 28px 70px rgba(22,34,43,.15)}.contact-detail{display:grid;grid-template-columns:58px 1fr;gap:20px;padding:27px 30px;border-bottom:1px solid rgba(255,255,255,.1)}.contact-detail:last-child{border-bottom:0}.contact-detail>span{font-size:11px;color:#8fa0aa;letter-spacing:.16em;padding-top:3px}.contact-detail small{display:block;color:#9eabb2;font-size:10px;letter-spacing:.18em;margin-bottom:8px}.contact-detail p,.contact-detail a{margin:0;color:#fff;text-decoration:none;line-height:1.55;font-size:16px}
.contact-form-section{background:#e9ebea;padding:100px max(40px,calc((100% - 1180px)/2));display:grid;grid-template-columns:.75fr 1.25fr;gap:90px;align-items:start}.contact-form-heading{position:sticky;top:40px}.contact-form-heading p{line-height:1.75;color:#626d73;max-width:420px}.contact-form-card{background:#f8f8f5;padding:42px;box-shadow:0 22px 60px rgba(22,34,43,.08);border:1px solid rgba(30,45,54,.08)}.contact-field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}.contact-form-card label{display:block;font-size:10px;font-weight:700;letter-spacing:.15em;color:#53616a;margin-bottom:18px}.contact-form-card input,.contact-form-card select,.contact-form-card textarea{width:100%;box-sizing:border-box;margin-top:9px;border:1px solid #ccd1d2;background:#fff;padding:14px 15px;color:#1b2830;font:inherit;font-size:14px;outline:none;transition:.25s}.contact-form-card input:focus,.contact-form-card select:focus,.contact-form-card textarea:focus{border-color:#5e7481;box-shadow:0 0 0 3px rgba(70,94,108,.08)}.contact-form-card textarea{resize:vertical}.contact-submit{border:0;background:#1c2e39;color:#fff;min-height:50px;padding:0 24px;display:inline-flex;align-items:center;gap:28px;font-weight:700;cursor:pointer}.contact-form-note{font-size:11px!important;color:#7a858a!important;margin:18px 0 0!important;line-height:1.55!important}
.contact-final-cta{position:relative;min-height:500px;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;background:#17242d;color:#fff}.contact-final-media{position:absolute;inset:0;background-image:var(--contact-bottom-image),radial-gradient(circle at 70% 30%,#354957,#121c23);background-size:cover;background-position:center}.contact-final-shade{position:absolute;inset:0;background:rgba(9,16,21,.66)}.contact-final-inner{position:relative;z-index:2;width:min(760px,calc(100% - 40px));padding:75px 0}.contact-final-cta h2{font-size:clamp(44px,5vw,68px)}.contact-final-cta p{max-width:620px;margin:25px auto 30px;line-height:1.75;color:rgba(255,255,255,.76)}
.contact-reveal{opacity:0;transform:translateY(22px);transition:opacity .75s ease,transform .75s ease}.contact-reveal.is-visible{opacity:1;transform:none}
@media(max-width:800px){.contact-hero{min-height:590px}.contact-hero-content{width:calc(100% - 40px);padding:70px 0 55px}.contact-hero h1{font-size:clamp(46px,13vw,66px)}.contact-intro{width:calc(100% - 40px);padding:75px 0;grid-template-columns:1fr;gap:45px}.contact-form-section{padding:75px 20px;grid-template-columns:1fr;gap:35px}.contact-form-heading{position:static}.contact-form-card{padding:26px 20px}.contact-field-row{grid-template-columns:1fr}.contact-final-cta{min-height:460px}}
.contact-hero-media {
    background-image:
        linear-gradient(
            90deg,
            rgba(7, 16, 21, 0.35),
            rgba(7, 16, 21, 0.15)
        ),
        url("../images/contact/contact-hero.jpg") !important;

    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
.contact-premium {
    --contact-bottom-image: url("../images/contact/contact-bottom.jpg");
}
/* =========================================================
   CONTACT FORM SECTION — CORRECT PATCH
   Uses the actual class names already present in contact.html
   Does NOT change the hero or the bottom stone CTA.
========================================================= */

/* WHOLE FORM AREA */
.contact-form-section {
    position: relative;
    padding: 110px max(40px, calc((100% - 1180px) / 2));
    display: grid;
    grid-template-columns: 0.78fr 1.22fr;
    gap: 95px;
    align-items: start;

    background:
        radial-gradient(
            circle at 8% 18%,
            rgba(109, 139, 157, 0.12),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #f4f6f6 0%,
            #e9edee 100%
        );
}

/* LEFT TITLE AREA */
.contact-form-heading {
    position: sticky;
    top: 40px;
    padding-top: 10px;
}

.contact-form-heading .contact-kicker {
    color: #667b87;
}

.contact-form-heading h2 {
    margin: 0 0 28px;
    font-size: clamp(48px, 4.7vw, 70px);
    line-height: 0.98;
    letter-spacing: -0.045em;
    color: #17252e;
}

.contact-form-heading h2 span {
    color: #718691;
    font-weight: 300;
}

.contact-form-heading p {
    max-width: 430px;
    margin: 0;
    font-size: 16px;
    line-height: 1.85;
    color: #64727a;
}

/* FORM CARD */
.contact-form-card {
    position: relative;
    padding: 48px 50px;

    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(45, 70, 84, 0.10);

    box-shadow:
        0 32px 80px rgba(28, 48, 60, 0.12),
        inset 0 1px 0 rgba(255,255,255,.78);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* TWO COLUMN ROW */
.contact-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

/* LABELS */
.contact-form-card label {
    display: block;
    margin-bottom: 25px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.17em;
    color: #61747f;
}

/* INPUTS */
.contact-form-card input,
.contact-form-card select,
.contact-form-card textarea {
    width: 100%;
    box-sizing: border-box;

    margin-top: 10px;
    padding: 15px 2px;

    border: 0;
    border-bottom: 1px solid #c7d0d4;
    border-radius: 0;
    outline: none;

    background: transparent;

    color: #1c2d36;
    font: inherit;
    font-size: 15px;

    transition:
        border-color .28s ease,
        padding-left .28s ease,
        background-color .28s ease;
}

.contact-form-card input:focus,
.contact-form-card select:focus,
.contact-form-card textarea:focus {
    border-bottom-color: #4f6e7e;
    padding-left: 6px;
    box-shadow: none;
    background: rgba(255,255,255,.38);
}

.contact-form-card textarea {
    min-height: 125px;
    resize: vertical;
}

/* SEND BUTTON */
.contact-submit {
    position: relative;

    min-width: 205px;
    min-height: 52px;
    padding: 0 22px;

    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;

    border: 0;

    background:
        linear-gradient(
            135deg,
            #213844 0%,
            #496777 100%
        );

    color: #fff;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: .03em;

    cursor: pointer;

    box-shadow:
        0 15px 32px rgba(29, 52, 65, .22);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.contact-submit:hover {
    transform: translateY(-3px);
    box-shadow:
        0 21px 40px rgba(29, 52, 65, .29);
}

/* SMALL NOTE */
.contact-form-note {
    max-width: 455px;
    margin: 20px 0 0 !important;

    font-size: 11px !important;
    line-height: 1.65 !important;
    color: #89969d !important;
}

/* MOBILE */
@media (max-width: 800px) {
    .contact-form-section {
        padding: 75px 20px;
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .contact-form-heading {
        position: static;
    }

    .contact-form-heading h2 {
        font-size: 46px;
    }

    .contact-form-card {
        padding: 30px 24px;
    }

    .contact-field-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
}


/* =========================================================
   PREMIUM FLOATING HEADER — HOME TEST — 2026-09-06
   Transparent over the page hero. This block intentionally
   overrides the older global header rules above.
========================================================= */
.premium-floating-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1200;

    display: grid;
    grid-template-columns: minmax(150px, 210px) 1fr minmax(170px, 210px);
    align-items: center;
    gap: 22px;

    width: 100%;
    box-sizing: border-box;
    padding: 22px 34px;

    background: linear-gradient(180deg, rgba(8,18,24,.34) 0%, rgba(8,18,24,.10) 68%, transparent 100%);
    border-bottom: 1px solid rgba(255,255,255,.10);
}

.premium-floating-header .site-header-logo {
    justify-self: start;
    line-height: 0;
}

.premium-floating-header .site-header-logo a {
    display: inline-block;
}

.premium-floating-header .site-header-logo img {
    display: block;
    width: 156px;
    max-height: 62px;
    object-fit: contain;
}

.premium-floating-header .site-header-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 1.45vw, 24px);
}

.premium-floating-header .site-header-nav a {
    position: relative;
    margin: 0;
    padding: 10px 2px 11px;

    color: rgba(255,255,255,.90);
    text-decoration: none;
    white-space: nowrap;

    font-size: 12px;
    font-weight: 600;
    letter-spacing: .035em;

    transition: color .25s ease, transform .25s ease;
}

.premium-floating-header .site-header-nav a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 0;
    height: 8px;

    border-bottom: 1px solid rgba(255,255,255,.72);
    border-radius: 0 0 50% 50%;
    transform: translateX(-50%);
    opacity: 0;

    transition: width .28s ease, opacity .28s ease;
}

.premium-floating-header .site-header-nav a:hover {
    color: #fff;
    transform: translateY(-1px);
}

.premium-floating-header .site-header-nav a:hover::after {
    width: calc(100% + 12px);
    opacity: .48;
}

.premium-floating-header .site-header-nav a.active,
.premium-floating-header .site-header-nav a[aria-current="page"] {
    color: #fff;
}

.premium-floating-header .site-header-nav a.active::after,
.premium-floating-header .site-header-nav a[aria-current="page"]::after {
    width: calc(100% + 16px);
    opacity: 1;
}

.premium-floating-header .site-header-nav a.nav-quote {
    color: #fff;
    border: 0;
    padding-bottom: 11px;
}

.premium-floating-header .header-contact {
    justify-self: end;
}

.premium-floating-header .header-phone {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    color: #fff;
    text-decoration: none;
    white-space: nowrap;

    font-size: 13px;
    font-weight: 600;
    letter-spacing: .035em;

    transition: opacity .25s ease, transform .25s ease;
}

.premium-floating-header .header-phone:hover {
    opacity: .78;
    transform: translateY(-1px);
}

.premium-floating-header .header-phone-icon {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;

    border: 1px solid rgba(255,255,255,.42);
    border-radius: 50%;

    font-size: 13px;
    line-height: 1;
}

@media (max-width: 1100px) and (min-width: 769px) {
    .premium-floating-header {
        grid-template-columns: 135px 1fr 150px;
        gap: 12px;
        padding: 18px 20px;
    }

    .premium-floating-header .site-header-logo img { width: 128px; }
    .premium-floating-header .site-header-nav { gap: 10px; }
    .premium-floating-header .site-header-nav a { font-size: 10.5px; }
    .premium-floating-header .header-phone { font-size: 11px; }
}

@media (max-width: 768px) {
    .premium-floating-header {
        position: absolute;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 15px 18px;
        background: linear-gradient(180deg, rgba(7,16,21,.48), transparent);
    }

    .premium-floating-header .site-header-logo img {
        width: 124px;
        max-height: 50px;
    }

    .premium-floating-header .menu-toggle {
        display: block;
        order: 3;
        padding: 4px 0 4px 12px;
        color: #fff;
        font-size: 28px;
        line-height: 1;
    }

    .premium-floating-header .header-contact {
        display: block;
        margin-left: auto;
    }

    .premium-floating-header .header-phone span:last-child {
        display: none;
    }

    .premium-floating-header .header-phone-icon {
        width: 31px;
        height: 31px;
    }

    .premium-floating-header .site-header-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        padding: 10px 18px 18px;
        box-sizing: border-box;
        background: rgba(14,28,35,.96);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        text-align: left;
    }

    .premium-floating-header .site-header-nav.nav-open {
        display: block;
    }

    .premium-floating-header .site-header-nav a {
        display: block;
        padding: 14px 4px;
        border-top: 1px solid rgba(255,255,255,.10);
        font-size: 13px;
    }

    .premium-floating-header .site-header-nav a::after {
        left: 4px;
        bottom: 7px;
        transform: none;
    }

    .premium-floating-header .site-header-nav a.active::after,
    .premium-floating-header .site-header-nav a[aria-current="page"]::after {
        width: 46px;
    }
}


/* =========================================================
   HAITHAM STONE — FINAL FLOATING HEADER + LIGHTER HEROES
   2026-09-06
   ========================================================= */

/* Header: larger, aligned, floating directly over the Hero */
.premium-floating-header{
    position:absolute !important;
    top:0;left:0;right:0;
    z-index:1200;
    display:grid !important;
    grid-template-columns:minmax(175px,220px) minmax(520px,1fr) auto !important;
    align-items:center !important;
    gap:28px !important;
    width:100%;
    min-height:104px;
    padding:18px clamp(28px,3.2vw,58px) !important;
    box-sizing:border-box;
    background:linear-gradient(180deg,rgba(8,18,24,.22) 0%,rgba(8,18,24,.07) 62%,transparent 100%) !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
}
.premium-floating-header .site-header-logo{justify-self:start;line-height:0;}
.premium-floating-header .site-header-logo a{display:inline-block;}
.premium-floating-header .site-header-logo img{
    display:block;
    width:178px !important;
    max-width:100%;
    max-height:74px !important;
    object-fit:contain;
    background:transparent !important;
}
.premium-floating-header .site-header-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:clamp(14px,1.35vw,25px) !important;
}
.premium-floating-header .site-header-nav a{
    position:relative;
    z-index:1;
    margin:0 !important;
    padding:11px 7px !important;
    border:0 !important;
    color:rgba(255,255,255,.88) !important;
    text-decoration:none;
    white-space:nowrap;
    font-size:14px !important;
    line-height:1;
    font-weight:600 !important;
    letter-spacing:.018em !important;
    transition:color .25s ease,transform .25s ease;
}
/* Remove the old smile underline. */
.premium-floating-header .site-header-nav a::after{display:none !important;}
/* Active page: refined thin oval around the page name. */
.premium-floating-header .site-header-nav a::before{
    content:"";
    position:absolute;
    z-index:-1;
    inset:2px -7px 1px;
    border:1px solid transparent;
    border-radius:999px;
    transform:scale(.88);
    opacity:0;
    transition:opacity .25s ease,transform .25s ease,border-color .25s ease,background .25s ease;
}
.premium-floating-header .site-header-nav a.active,
.premium-floating-header .site-header-nav a[aria-current="page"]{color:#fff !important;}
.premium-floating-header .site-header-nav a.active::before,
.premium-floating-header .site-header-nav a[aria-current="page"]::before{
    border-color:rgba(188,211,222,.78);
    background:rgba(83,112,126,.08);
    opacity:1;
    transform:scale(1);
}
.premium-floating-header .site-header-nav a:hover{
    color:#bcd3de !important;
    transform:translateY(-1px);
}
.premium-floating-header .site-header-nav a:hover::before{
    border-color:rgba(188,211,222,.34);
    opacity:1;
    transform:scale(1);
}
.premium-floating-header .header-actions{
    justify-self:end;
    display:flex;
    align-items:center;
    gap:10px;
}
.premium-floating-header .header-phone,
.premium-floating-header .header-quote{
    min-height:43px;
    box-sizing:border-box;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
    text-decoration:none;
    font-size:13px;
    font-weight:700;
    letter-spacing:.02em;
    transition:transform .25s ease,background .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.premium-floating-header .header-phone{
    gap:9px;
    padding:5px 13px 5px 6px;
    color:#fff;
    border:1px solid rgba(196,216,225,.28);
    border-radius:999px;
    background:rgba(34,57,69,.40);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}
.premium-floating-header .header-phone-icon{
    display:inline-grid;
    place-items:center;
    width:31px;height:31px;
    border:1px solid rgba(203,222,231,.30);
    border-radius:50%;
    background:rgba(83,112,126,.34);
    color:#e9f1f4;
    font-size:13px;
}
.premium-floating-header .header-quote{
    gap:15px;
    padding:0 17px;
    color:#fff;
    border:1px solid rgba(194,216,226,.20);
    border-radius:4px;
    background:linear-gradient(135deg,#587483,#304955);
    box-shadow:0 10px 25px rgba(7,20,28,.18);
}
.premium-floating-header .header-phone:hover,
.premium-floating-header .header-quote:hover{transform:translateY(-2px);}
.premium-floating-header .header-phone:hover{background:rgba(63,88,101,.54);border-color:rgba(201,221,230,.48);}
.premium-floating-header .header-quote:hover{background:linear-gradient(135deg,#668493,#385462);box-shadow:0 14px 30px rgba(7,20,28,.25);}

/* Hero images: keep text readable but reveal more of the photography. */
.home-hero-shade,
.about-hero-shade{
    background:linear-gradient(90deg,rgba(10,21,27,.57) 0%,rgba(18,32,39,.38) 42%,rgba(20,35,43,.10) 76%),linear-gradient(0deg,rgba(10,20,26,.20),transparent 48%) !important;
}
/* IMPORTANT: keep each Quartz / Marble / Granite page original hero image.
   Do not override background-image here. */
.quartz-cinematic-hero::before{
    background:linear-gradient(180deg,rgba(8,17,22,.05),rgba(8,17,22,.01) 58%,rgba(8,17,22,.28)) !important;
}
.contact-hero-shade{
    background:linear-gradient(90deg,rgba(9,16,22,.55) 0%,rgba(9,16,22,.34) 48%,rgba(9,16,22,.10) 100%),linear-gradient(0deg,rgba(8,15,20,.16),transparent 55%) !important;
}
/* Gallery uses its own page stylesheet on some pages; these selectors safely
   lighten the common overlay names when present. */
.gallery-hero-shade,.gallery-hero-overlay,.gallery-hero .hero-overlay{
    background:linear-gradient(90deg,rgba(9,18,24,.54),rgba(12,24,31,.25) 55%,rgba(12,24,31,.08)) !important;
}

@media(max-width:1250px) and (min-width:769px){
    .premium-floating-header{
        grid-template-columns:145px 1fr auto !important;
        gap:15px !important;
        padding:16px 22px !important;
        min-height:92px;
    }
    .premium-floating-header .site-header-logo img{width:145px !important;max-height:62px !important;}
    .premium-floating-header .site-header-nav{gap:9px !important;}
    .premium-floating-header .site-header-nav a{font-size:11.5px !important;padding:10px 4px !important;}
    .premium-floating-header .header-phone-number{display:none;}
    .premium-floating-header .header-phone{padding:5px;}
    .premium-floating-header .header-quote{padding:0 13px;font-size:12px;}
}
@media(max-width:768px){
    .premium-floating-header{
        position:absolute !important;
        display:flex !important;
        flex-direction:row !important;
        justify-content:space-between !important;
        align-items:center !important;
        min-height:82px;
        padding:13px 17px !important;
        background:linear-gradient(180deg,rgba(7,16,21,.34),transparent) !important;
    }
    .premium-floating-header .site-header-logo img{width:132px !important;max-height:55px !important;}
    .premium-floating-header .header-actions{margin-left:auto;gap:7px;}
    .premium-floating-header .header-phone-number{display:none;}
    .premium-floating-header .header-phone{min-height:39px;padding:4px;border-radius:50%;}
    .premium-floating-header .header-phone-icon{width:29px;height:29px;}
    .premium-floating-header .header-quote{min-height:39px;padding:0 11px;font-size:11px;gap:7px;}
    .premium-floating-header .menu-toggle{display:block;order:4;padding:4px 0 4px 8px;color:#fff;font-size:27px;line-height:1;}
    .premium-floating-header .site-header-nav{
        display:none;
        position:absolute;
        top:100%;left:0;right:0;
        width:100%;
        padding:10px 18px 18px;
        box-sizing:border-box;
        background:rgba(14,28,35,.96);
        backdrop-filter:blur(14px);
        -webkit-backdrop-filter:blur(14px);
        text-align:left;
    }
    .premium-floating-header .site-header-nav.nav-open{display:block;}
    .premium-floating-header .site-header-nav a{display:block;padding:14px 8px !important;border-top:1px solid rgba(255,255,255,.09) !important;font-size:13px !important;}
    .premium-floating-header .site-header-nav a::before{inset:7px auto 6px 0;width:105px;}
}

/* =========================================================
   HAITHAM STONE — HEADER SCALE REFINEMENT — 2026-09-06
   Bigger header, clearer navigation and stronger actions.
   ========================================================= */
@media (min-width: 769px) {
    .premium-floating-header {
        min-height: 124px !important;
        padding: 24px clamp(30px, 3.4vw, 64px) !important;
        grid-template-columns: minmax(185px, 235px) minmax(0, 1fr) auto !important;
        gap: clamp(20px, 2vw, 34px) !important;
    }

    .premium-floating-header .site-header-logo img {
        width: 196px !important;
        max-height: 86px !important;
    }

    .premium-floating-header .site-header-nav {
        gap: clamp(15px, 1.45vw, 28px) !important;
    }

    .premium-floating-header .site-header-nav a {
        font-size: 15px !important;
        font-weight: 600 !important;
        padding: 13px 8px !important;
        letter-spacing: .012em !important;
    }

    .premium-floating-header .site-header-nav a::before {
        inset: 2px -9px 1px !important;
    }

    .premium-floating-header .header-phone,
    .premium-floating-header .header-quote {
        min-height: 48px !important;
        font-size: 14px !important;
    }

    .premium-floating-header .header-phone {
        padding: 6px 15px 6px 7px !important;
    }

    .premium-floating-header .header-phone-icon {
        width: 34px !important;
        height: 34px !important;
        font-size: 14px !important;
    }

    .premium-floating-header .header-quote {
        padding: 0 20px !important;
        gap: 12px !important;
    }
}

/* Keep the same premium size on normal laptop widths instead of shrinking too early. */
@media (max-width: 1250px) and (min-width: 981px) {
    .premium-floating-header {
        min-height: 116px !important;
        grid-template-columns: 165px minmax(0, 1fr) auto !important;
        gap: 14px !important;
        padding: 20px 22px !important;
    }

    .premium-floating-header .site-header-logo img {
        width: 162px !important;
        max-height: 72px !important;
    }

    .premium-floating-header .site-header-nav {
        gap: 11px !important;
    }

    .premium-floating-header .site-header-nav a {
        font-size: 13.5px !important;
        padding: 12px 5px !important;
    }

    .premium-floating-header .header-phone,
    .premium-floating-header .header-quote {
        min-height: 45px !important;
        font-size: 12.5px !important;
    }

    .premium-floating-header .header-phone-number {
        display: inline !important;
    }

    .premium-floating-header .header-phone {
        padding: 5px 11px 5px 5px !important;
    }

    .premium-floating-header .header-phone-icon {
        width: 32px !important;
        height: 32px !important;
    }

    .premium-floating-header .header-quote {
        padding: 0 14px !important;
    }
}

/* Compact tablet only when space genuinely becomes tight. */
@media (max-width: 980px) and (min-width: 769px) {
    .premium-floating-header {
        min-height: 104px !important;
        grid-template-columns: 145px minmax(0,1fr) auto !important;
        gap: 10px !important;
        padding: 18px 16px !important;
    }

    .premium-floating-header .site-header-logo img {
        width: 142px !important;
        max-height: 64px !important;
    }

    .premium-floating-header .site-header-nav { gap: 7px !important; }
    .premium-floating-header .site-header-nav a { font-size: 12px !important; padding: 11px 3px !important; }
    .premium-floating-header .header-phone-number { display: none !important; }
    .premium-floating-header .header-phone { padding: 5px !important; }
    .premium-floating-header .header-quote { min-height: 43px !important; padding: 0 12px !important; font-size: 12px !important; }
}


/* =========================================================
   HERO VISIBILITY — SAFE FINAL OVERRIDES — 2026-09-06
   IMPORTANT: overlays only. No hero image path is changed here.
   ========================================================= */
.home-hero-shade{
    background:linear-gradient(90deg,rgba(10,21,27,.44) 0%,rgba(18,32,39,.27) 43%,rgba(20,35,43,.07) 78%),linear-gradient(0deg,rgba(10,20,26,.13),transparent 50%) !important;
}
.about-hero-shade{
    background:linear-gradient(90deg,rgba(10,21,27,.44) 0%,rgba(18,32,39,.27) 43%,rgba(20,35,43,.07) 78%),linear-gradient(0deg,rgba(10,20,26,.13),transparent 50%) !important;
}
/* Quartz, Marble and Granite use this shared cinematic hero treatment.
   Only its dark overlay is lightened; each page keeps its own background image. */
.quartz-cinematic-hero::before{
    background:linear-gradient(180deg,rgba(8,17,22,.025),rgba(8,17,22,0) 58%,rgba(8,17,22,.18)) !important;
}
.contact-hero-shade{
    background:linear-gradient(90deg,rgba(9,16,22,.38) 0%,rgba(9,16,22,.20) 48%,rgba(9,16,22,.05) 100%),linear-gradient(0deg,rgba(8,15,20,.10),transparent 58%) !important;
}
.gallery-hero-shade,
.gallery-hero-overlay,
.gallery-hero .hero-overlay{
    background:linear-gradient(90deg,rgba(9,18,24,.38),rgba(12,24,31,.16) 55%,rgba(12,24,31,.04)) !important;
}


/* =========================================================
   HAITHAM STONE — PREMIUM FOOTER V2 — HOME TEST — 2026-09-06
   Scoped to .haitham-footer so older footer styles stay untouched.
   ========================================================= */
.haitham-footer{
    position:relative;
    overflow:hidden;
    padding:78px clamp(28px,5vw,78px) 26px;
    background:
        radial-gradient(circle at 14% 0%,rgba(126,157,172,.14),transparent 34%),
        linear-gradient(145deg,#17262e 0%,#1d3039 48%,#122028 100%);
    color:#edf3f5;
}
.haitham-footer::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.025) 46%,transparent 68%);
}
.haitham-footer-top,
.haitham-footer-bottom{position:relative;z-index:1;max-width:1320px;margin:0 auto;}
.haitham-footer-top{
    display:grid;
    grid-template-columns:minmax(300px,.95fr) minmax(540px,1.45fr);
    gap:clamp(64px,8vw,125px);
    align-items:start;
    padding-bottom:66px;
}
.haitham-footer-brand{max-width:460px;}
.haitham-footer-logo{
    display:inline-flex;
    align-items:center;
    text-decoration:none;
    margin-bottom:28px;
}
.haitham-footer-logo img{
    display:block;
    width:210px;
    max-width:100%;
    height:auto;
    max-height:104px;
    object-fit:contain;
    object-position:left center;
}
.haitham-footer-brand h3{
    margin:0 0 18px;
    font-size:clamp(31px,3.15vw,48px);
    line-height:1.04;
    letter-spacing:-1.8px;
    font-weight:500;
    color:#f6f9fa;
}
.haitham-footer-brand h3 span{
    font-family:Georgia,'Times New Roman',serif;
    font-weight:400;
    color:#aebfc7;
}
.haitham-footer-brand p{
    max-width:430px;
    margin:0;
    font-size:14px;
    line-height:1.8;
    color:rgba(220,232,237,.64);
}
.haitham-footer-links{
    display:grid;
    grid-template-columns:.8fr .8fr 1.25fr;
    gap:clamp(30px,4vw,62px);
}
.haitham-footer-column{min-width:0;}
.haitham-footer-title{
    display:block;
    margin:4px 0 24px;
    padding-bottom:14px;
    border-bottom:1px solid rgba(255,255,255,.12);
    font-size:10px;
    font-weight:700;
    letter-spacing:2.4px;
    color:#91a7b2;
}
.haitham-footer-column>a:not(.haitham-footer-quote),
.haitham-footer-column address{
    display:block;
    margin:0 0 13px;
    color:rgba(239,246,248,.78);
    text-decoration:none;
    font-size:13px;
    line-height:1.65;
    font-style:normal;
}
.haitham-footer-column>a:not(.haitham-footer-quote){
    width:fit-content;
    transition:color .25s ease,transform .25s ease;
}
.haitham-footer-column>a:not(.haitham-footer-quote):hover{
    color:#fff;
    transform:translateX(4px);
}
.haitham-footer-contact address{margin-top:3px;color:rgba(210,224,230,.58);}
.haitham-footer-quote{
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    min-width:178px;
    margin-top:11px;
    padding:13px 16px;
    box-sizing:border-box;
    border:1px solid rgba(255,255,255,.20);
    background:linear-gradient(135deg,rgba(102,131,145,.42),rgba(49,75,87,.48));
    box-shadow:inset 0 1px rgba(255,255,255,.07);
    color:#fff;
    text-decoration:none;
    font-size:12px;
    font-weight:700;
    transition:transform .25s ease,border-color .25s ease,background .25s ease;
}
.haitham-footer-quote:hover{
    transform:translateY(-2px);
    border-color:rgba(255,255,255,.42);
    background:linear-gradient(135deg,rgba(115,148,164,.56),rgba(54,84,98,.62));
}
.haitham-footer-quote span{font-size:16px;transition:transform .25s ease;}
.haitham-footer-quote:hover span{transform:translate(3px,-3px);}
.haitham-footer-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding-top:22px;
    border-top:1px solid rgba(255,255,255,.10);
}
.haitham-footer-bottom p,
.haitham-footer-legal{
    margin:0;
    color:rgba(201,217,224,.43);
    font-size:10px;
    letter-spacing:.35px;
}
.haitham-footer-legal{letter-spacing:1.8px;}

@media (max-width:1000px){
    .haitham-footer{padding:68px 34px 24px;}
    .haitham-footer-top{grid-template-columns:1fr;gap:52px;padding-bottom:54px;}
    .haitham-footer-brand{max-width:560px;}
    .haitham-footer-links{grid-template-columns:1fr 1fr 1.25fr;}
}
@media (max-width:680px){
    .haitham-footer{padding:58px 22px 23px;}
    .haitham-footer-top{gap:44px;padding-bottom:44px;}
    .haitham-footer-logo img{width:176px;max-height:90px;}
    .haitham-footer-brand h3{font-size:35px;letter-spacing:-1.3px;}
    .haitham-footer-links{grid-template-columns:1fr 1fr;gap:38px 28px;}
    .haitham-footer-contact{grid-column:1 / -1;}
    .haitham-footer-bottom{align-items:flex-start;flex-direction:column;gap:11px;}
}


/* =========================================================
   HAITHAM STONE — FOOTER V3 REFINEMENT
   Keeps a reserved email row ready for future Admin settings.
   ========================================================= */
@media (min-width:681px){
    .haitham-footer{padding-top:70px;}
    .haitham-footer-top{padding-bottom:58px;}
}
.haitham-footer-brand h3{
    font-size:clamp(29px,2.75vw,43px);
    line-height:1.06;
    margin-bottom:16px;
}
.haitham-footer-brand p{
    color:rgba(226,236,240,.72);
}
.haitham-footer-column>a:not(.haitham-footer-quote),
.haitham-footer-column address{
    color:rgba(242,247,249,.84);
}
.haitham-footer-contact address{
    color:rgba(222,234,239,.70);
}
.haitham-footer-email{
    min-height:21px;
}
.haitham-footer-email.is-empty{
    visibility:hidden;
    pointer-events:none;
    user-select:none;
}
.haitham-footer-quote{
    min-width:184px;
    min-height:45px;
    margin-top:13px;
    padding:13px 17px;
    border-color:rgba(255,255,255,.18);
    background:linear-gradient(135deg,#506a78,#304753);
    box-shadow:0 10px 26px rgba(6,18,25,.18),inset 0 1px rgba(255,255,255,.09);
}
.haitham-footer-quote:hover{
    border-color:rgba(255,255,255,.34);
    background:linear-gradient(135deg,#5d7887,#38515e);
    box-shadow:0 14px 30px rgba(6,18,25,.24),inset 0 1px rgba(255,255,255,.10);
}


/* =========================================================
   HAITHAM STONE — OPENING HOURS
   Prepared for future Site Settings / Admin connection.
   ========================================================= */
.haitham-footer-hours{
    margin-top:10px;
    padding-top:12px;
    border-top:1px solid rgba(255,255,255,.10);
}
.haitham-footer-hours-title{
    display:block;
    margin-bottom:6px;
    color:rgba(183,203,212,.72);
    font-size:9px;
    font-weight:700;
    letter-spacing:.18em;
}
.haitham-footer-hours p{
    margin:0;
    color:rgba(222,234,239,.76);
    font-size:13px;
    line-height:1.55;
}
.contact-detail-hours p + p{margin-top:2px;}