/* ==========================================================
   HUSK & GROUNDS™
   Premium Natural Drinking Straws
   Version 2.0
========================================================== */


/* ==========================================================
   CSS VARIABLES
========================================================== */

:root {

    --cream: #F7F4ED;
    --white: #FFFFFF;

    --coffee: #4B3728;
    --olive: #6D7A47;
    --gold: #C7A15A;

    --charcoal: #333333;
    --light: #666666;

    --border: #E8E1D6;

    --shadow: 0 18px 40px rgba(0, 0, 0, .08);

    --radius: 18px;

    --transition: .35s ease;

    --max-width: 1280px;

}


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

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

html{

    width:100%;

    overflow-x:hidden;

    scroll-behavior:smooth;

}

body{

    width:100%;

    max-width:100%;

    overflow-x:hidden;

    padding-top:60px;

    background:var(--cream);

    color:var(--charcoal);

    font-family:'Lato',sans-serif;

    line-height:1.7;

}


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

h1,
h2,
h3,
h4 {

    font-family: 'Cormorant Garamond', serif;

    color: var(--coffee);

    font-weight: 600;

    line-height: 1.15;

}

h1 {

    font-size: 4.4rem;

}

h2 {

    font-size: 2.7rem;

}

h3 {

    font-size: 1.45rem;

}

h4 {

    font-size: 1.15rem;

}

p {

    font-size: 1rem;

    color: var(--light);

}

a {

    text-decoration: none;

    color: inherit;

}

img {

    width: 100%;

    display: block;

}


/* ==========================================================
   PAGE
========================================================== */

.brochure {

    width: 100%;

}

.page {

    width: 100%;

    min-height: auto;

    padding: 70px 40px;

    display: flex;

    justify-content: center;

    align-items: center;

    background: var(--cream);

    border: none;

    box-shadow: none;

}

.page-content {

    width: 100%;

    max-width: 1280px;

    margin: auto;

}

/* ==========================================================
   SECTION HEADINGS
========================================================== */

.section-heading {

    margin-bottom: 20px;

}

.section-heading.center {

    text-align: left;

}

.section-heading p {

    text-transform: uppercase;

    letter-spacing: 3px;

    color: var(--olive);

    font-size: .9rem;

    margin-bottom: 14px;

}

.section-heading h2 {

    max-width: 700px;

}


/* ==========================================================
   TOP BAR
========================================================== */

.top-bar {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 60px;

}

.company-logo img {

    width: 300px;

}

.brand-logo img {

    width: 220px;

}

html{
    scroll-behavior:smooth;
    scroll-padding-top:70px;
}

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

.hero-section{

    display:grid;

    grid-template-columns:1.1fr 0.9fr;

    gap:50px;

    align-items:center;

    margin:20px 0;

}

.eyebrow {

    color: var(--gold);

    letter-spacing: 4px;

    text-transform: uppercase;

    font-size: .85rem;

    margin-bottom: 20px;

}

.hero-text h1 {

    margin-bottom: 18px;

}

.hero-text h2 {

    color: var(--olive);

    margin-bottom: 28px;

    font-size: 2.2rem;

}

.hospitality-text{

    font-size:2rem;

    color:var(--olive);

    font-family:'Cormorant Garamond',serif;

    font-weight:500;

}

.intro {

    font-size: 1.05rem;

    max-width: 520px;

    margin-bottom: 35px;

}


/* ==========================================================
   BUTTON PILLS
========================================================== */

.hero-buttons {

    display: flex;

    gap: 12px;

    flex-wrap: wrap;

}

.pill{
    border-radius:30px;
    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:auto;

    max-width:none;

    padding:10px 18px;

    border:1px solid #d9d9d9;

    background:#fff;

    color:var(--charcoal);

    font-size:.85rem;

    font-weight:600;

    white-space:nowrap;

}

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

.hero-image {

    position: relative;

}

.hero-image img {

    width: 100%;

    max-width: 280px;

    height: auto;

    margin: auto;

    border-radius: 26px;

    box-shadow: var(--shadow);

}

/* ==========================================================
   FEATURE STRIP
========================================================== */

.feature-strip {

    display: grid;

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

    gap: 22px;

    margin-top: 20px;

}

.feature {

    background: white;

    padding: 28px;

    border-radius: var(--radius);

    text-align: center;

    border:0.75pt solid var(--border);

    transition: var(--transition);

}

.feature:hover {

    transform: translateY(-8px);

}

.feature-icon {

    width: 64px;

    height: 64px;

    margin: auto;

    margin-bottom: 18px;

    border-radius: 50%;

    background: #F2EEE6;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--olive);

    font-size: 1.4rem;

}

.feature h3 {

    margin-bottom: 10px;

}

.feature p {

    font-size: .92rem;

}

.feature h3{

    font-size:1.05rem;

}

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

.cover-footer {

    margin-top: 60px;

    display: flex;

    justify-content: space-between;

    border:0.75pt solid var(--border);

    padding-top: 24px;

    font-size: .95rem;

    color: var(--coffee);

}


/* ==========================================================
   UTILITIES
========================================================== */

.center {

    text-align: center;

}

.mt-40 {

    margin-top: 40px;

}

.mt-60 {

    margin-top: 60px;

}

.mb-40 {

    margin-bottom: 40px;

}

.mb-60 {

    margin-bottom: 60px;

}

.seo-intro{

    max-width:900px;
    margin:28px auto 36px;
    text-align:center;
    font-size:0.95rem;
    line-height:1.7;
    color:var(--light);

}

.seo-intro strong{

    color:var(--olive);
    font-weight:700;

}

/* ==========================================================
   PAGE 2
========================================================== */

.two-column{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

    align-items:center;

}

.left-column img{

    width:100%;

    max-width:280px;

    height:auto;

    display:block;

    margin:0 auto;

}

.right-column .lead {

    font-size: 1.15rem;

    color: var(--charcoal);

    margin-bottom: 18px;

    line-height: 1.9;

}


/* ==========================================================
   FEATURE GRID
========================================================== */

.feature-grid {

    display: grid;

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

    gap: 28px;

}

.feature-card {

    background: white;

    border-radius: 22px;

    padding: 35px;

    border:0.75pt solid var(--border);

    box-shadow: var(--shadow);

    transition: var(--transition);

}

.feature-card:hover {

    transform: translateY(-8px);

}

.card-number {

    width: 52px;

    height: 52px;

    border-radius: 50%;

    background: var(--olive);

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: bold;

    margin-bottom: 20px;

}

.feature-card h3 {

    margin-bottom: 15px;

}

.feature-card p {

    line-height: 1.8;

}


/* ==========================================================
   MATERIAL STORY
========================================================== */

.material-story {

    margin-top: 60px;

}

.materials {
    margin-top: 45px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 35px;
}

.material {

    text-align: center;

    background: white;

    padding: 35px;

    border-radius: 22px;

    border:0.75pt solid var(--border);

    box-shadow: var(--shadow);

    transition: .3s;

}

.material:hover {

    transform: translateY(-8px);

}

.material img {

    width: 150px;

    height: 150px;

    object-fit: cover;

    margin: auto;

    border-radius: 50%;

    margin-bottom: 25px;

    border: 8px solid #f6f2ea;

}

.material h3 {

    margin-bottom: 18px;

}

.material p {

    font-size: .95rem;

}


/* ==========================================================
   QUOTE
========================================================== */

.quote-section{

    margin-top:24px;
    padding:20px 28px;

    background:#faf8f2;

    border:0.75pt solid var(--border);

    border-radius:16px;

    text-align:center;

}

.quote-section blockquote{

    margin:0;

    font-size:1rem;

    line-height:1.5;

    font-weight:500;

    font-style:italic;

    color:var(--dark);

}

/* ==========================================================
   PERFORMANCE PAGE
========================================================== */

.performance-page {

    background: #FBF9F5;

}

.performance-hero {

    display: grid;

    grid-template-columns: 45% 55%;

    gap: 60px;

    align-items: center;

    margin-bottom: 70px;

}

.performance-image img {

    border-radius: 24px;

    box-shadow: var(--shadow);

}

.performance-text .lead {

    font-size: 1.2rem;

    line-height: 2;

    color: var(--charcoal);

}


/* ==========================================================
   COMPLIANCE GRID
========================================================== */

.compliance-grid {

    display: grid;

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

    gap: 30px;

}

.compliance-card{

    background:white;

    border-radius:24px;

    padding:28px 24px;

    text-align:center;

    box-shadow:var(--shadow);

    border:0.75pt solid var(--border);

    transition:.3s;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

}

.compliance-card:hover {

    transform: translateY(-10px);

}

.tick {

    width: 70px;

    height: 70px;

    margin: auto;

    margin-bottom: 25px;

    border-radius: 50%;

    background: var(--olive);

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 2rem;

    font-weight: bold;

}

.compliance-card h3 {
font-size:.95rem;

    line-height:1.3;

    margin:10px 0 8px;
    margin-bottom: 18px;

    min-height: 65px;

}

.compliance-card p {
 font-size:.82rem;
    line-height:1.45;
}

/* ==========================================================
   PRODUCT SPECIFICATIONS
========================================================== */

.specifications-section {

    margin-top: 60px;

}

.spec-grid {

    margin-top: 40px;

    display: grid;

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

    gap: 24px;

}

.spec-item {

    background: white;

    padding: 28px;

    border-radius: 18px;

    border:0.75pt solid var(--border);

    box-shadow: var(--shadow);

}

.spec-title {

    display: block;

    color: var(--olive);

    font-size: .82rem;

    letter-spacing: 1px;

    text-transform: uppercase;

    margin-bottom: 10px;

}

.spec-value {

    display: block;

    color: var(--coffee);

    font-weight: 700;

    font-size: 1.05rem;

}


/* ==========================================================
   APPLICATIONS
========================================================== */

.applications-section {

    margin-top: 24px;

}

.applications-title{

    text-align:center;

    font-size:1.45rem;

    font-weight:700;

    color:var(--dark);

    margin-bottom:22px;

    letter-spacing:.5px;

}

.applications-grid {

    display: grid;

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

    gap: 28px;

    margin-top: 40px;

}

.application-card {

    background: white;

    border-radius: 20px;

    overflow: hidden;

    border:0.75pt solid var(--border);

    box-shadow: var(--shadow);

    transition: .3s;

}

.application-card:hover {

    transform: translateY(-8px);

}

.application-card img {

    height: 220px;

    object-fit: cover;

}

.application-card h3 {

    padding: 22px;

    text-align: center;

}


/* ==========================================================
   COLLECTION
========================================================== */

.collection-grid {

    display: grid;

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

    gap: 45px;

}

.collection-card {

    background: white;

    border-radius: 24px;

    overflow: hidden;

    box-shadow: var(--shadow);

    border:0.75pt solid var(--border);

}

.collection-card img {

    height: 340px;

    object-fit: cover;

}

.collection-content {

    padding: 35px;

}

.collection-content h3 {

    margin-bottom: 10px;

}

.collection-content h4 {

    color: var(--olive);

    margin-bottom: 20px;

}

.collection-content p {

    margin-bottom: 25px;

}

.collection-content ul {

    padding-left: 20px;

}

.collection-content li {

    margin-bottom: 12px;

    color: var(--charcoal);

}

.collection-card.featured {

    border: 3px solid var(--gold);

}


/* ==========================================================
   PARTNER SECTION
========================================================== */

.partner-section {

    margin-top: 60px;

}

.partner-intro {

    max-width: 850x;

    margin: 0 0 45px 0;

    text-align: left;

    font-size: 1.08rem;

}

.partner-grid {

    display: grid;

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

    gap: 28px;

}

.partner-card {

    background: white;

    padding: 35px;

    border-radius: 20px;

    text-align: center;

    box-shadow: var(--shadow);

}

.partner-icon {

    width: 60px;

    height: 60px;

    margin: auto auto 20px;

    border-radius: 50%;

    background: var(--olive);

    color: white;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 1.6rem;

}

.partner-card h3 {

    margin-bottom: 15px;

}


/* ==========================================================
   CLOSING BANNER
========================================================== */

.closing-banner {

    margin-top: 60px;

    background: linear-gradient(135deg, #4B3728, #6D7A47);

    color: white;

    border-radius: 24px;

    padding: 60px;

    text-align: center;

}

.closing-banner h2 {

    color: white;

    margin-bottom: 20px;

}

.closing-banner p {

    color: #f3f3f3;

    max-width: 800px;

    margin: auto;

}


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

.contact-footer {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 60px;
    border:0.75pt solid var(--border);
    padding-top: 50px;
}

.footer-top {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    align-items: start;
    width: 100%;
}

.footer-bottom {
    display: flex;
    justify-content: center;
    align-items: left;
    gap: 60px;
    width: 100%;
    margin-top: 20px;
}

.footer-image-wrap {
    display: flex;
    justify-content: left;
}

.footer-showcase-image{

    width:100%;
    max-width:500px;
    height:auto;
    object-fit:contain;

    border-radius:16px;
    box-shadow:var(--shadow);

}

.footer-logo {
    width: 100%;
    max-width: 300px;
    height: auto;
    margin-bottom: 0px;
}

.contact-footer h4 {
    margin-bottom: 18px;
}

.contact-footer p {
    margin-bottom: 10px;
}

.qr-container {
    display: flex;
    flex-direction: column;
    align-items: right;
}

.qr-box {
    width: 450px;
    height: 450px;
    border: 2px dashed var(--olive);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    font-weight: bold;
    color: var(--olive);
    background: var(--white);
}

.cover-page {

    width: 100%;

    min-height:65vh;
    padding:28px 30px;

    display: flex;

    justify-content: center;

    align-items: center;

    position: relative;

    background: var(--cream);

}

.cover-page img {

    width: 65%;

    max-width: 700px;

    min-width: 280px;

    height: auto;

    object-fit: contain;

    display: block;

}

/* ==========================================================
   TABLET (≤1100px)
========================================================== */

@media (max-width:1100px){

    .page-content{
        max-width:100%;
        padding:0 20px;
    }

    .hero-section,
    .two-column,
    .performance-hero,
    .collection-grid{
        grid-template-columns:1fr;
        gap:40px;
    }

    .feature-strip,
    .materials,
    .compliance-grid,
    .partner-grid,
    .spec-grid,
    .applications-grid{
        grid-template-columns:repeat(2,1fr);
        gap:20px;
    }

}

/* ==========================================================
   PRODUCT RANGE (PAGE 4)
========================================================== */

.diameter-row {
    display: flex;
    gap: 8px;
    margin-bottom: 30px;
    width: 100%;
}

.diameter-row img {
    flex: 1;
    min-width: 0;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
}

.product-split-layout {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 40px;
    align-items: stretch;
    margin-bottom: 40px;
}

.product-range-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.product-range-image {
    display: flex;
    width: 100%;
}

.product-range-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: var(--shadow);
}

.product-range-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--white);
    border:0.75pt solid var(--border);
    border-left: 6px solid var(--gold);
    border-radius: 16px;
    padding: 20px 30px;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.product-range-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.1);
}

.card-diameter {
    width: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border:0.75pt solid var(--border);
    padding-right: 20px;
    margin-right: 25px;
}

.card-diameter .diam-num {
    font-size: 2.2rem;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    color: var(--coffee);
    line-height: 1;
}

.card-diameter .diam-unit {
    font-size: 0.7rem;
    color: var(--light);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 4px;
    font-weight: 700;
}

.card-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.card-details h3 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--coffee);
    font-family: 'Cormorant Garamond', serif;
    letter-spacing: 0.5px;
}

.card-details .length {
    font-size: 0.8rem;
    color: var(--light);
}

.badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.badge {
    background: #EFECE5;
    color: #6E6658;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.card-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
}

.card-price .price-val {
    font-size: 2rem;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    color: var(--coffee);
    line-height: 1;
}

.card-price .price-val span {
    font-size: 1.2rem;
    vertical-align: super;
    margin-right: 2px;
}

.card-price .price-unit {
    font-size: 0.7rem;
    color: var(--light);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 4px;
    font-weight: 700;
}

.bottom-features-grid{

    display:grid;
    grid-template-columns:repeat(2,minmax(320px,380px));
    justify-content:center;
    gap:24px;
    margin:35px auto 0;

}

.bottom-feature-card{

    background:var(--white);
    border:0.75pt solid var(--border);
    border-radius:16px;
    padding:22px 20px;

    text-align:center;

    box-shadow:var(--shadow);

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;

    transition:var(--transition);

}

.bottom-feature-card:hover {
    transform: translateY(-2px);
}

.bottom-feature-card svg {
    color: var(--coffee);
}

.bottom-feature-card h3 {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--coffee);
    margin: 0;
    font-family: 'Lato', sans-serif;
}

.bottom-feature-card p {
    font-size: 0.8rem;
    color: var(--light);
    line-height: 1.5;
    margin: 0;
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1100px) {
    .bottom-features-grid 
{
grid-template-columns:1fr;
    }

    .product-split-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .product-range-image {
        height: 400px;
    }
}

/* ==========================================================
   MOBILE (≤768px)
========================================================== */

@media (max-width:768px){

.seo-intro{

    font-size:0.85rem;
    line-height:1.6;
    margin:20px auto 28px;

}

html{
    font-size:15px;
scroll-padding-top:75px;
}

body{
    overflow-x:hidden;
}

.page{
    padding:20px 14px;
    min-height:auto;
}

.page-content{
    width:100%;
    max-width:100%;
    margin:0 auto;
    padding:0;
}

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

h1{
    font-size:2rem;
    line-height:1.15;
}

h2{
    font-size:1.55rem;
    line-height:1.2;
}

h3{
    font-size:1rem;
}

p{
    font-size:.9rem;
    line-height:1.55;
}

.section-heading{
    margin-bottom:24px;
}

.section-heading p{
    font-size:.72rem;
    letter-spacing:2px;
}

.section-heading h2{
    font-size:1.55rem;
}


/* ===========================
   MOBILE COVER PAGE
=========================== */

.cover-page{

    min-height:auto;

    display:block;

    padding:80px 14px 20px;

}

/* ===========================
   HOME OFFSET
=========================== */
/* ===========================
   NAVBAR (MOBILE)
=========================== */

.navbar{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:9999;

    background:#ffffffee;

    backdrop-filter:blur(10px);

    box-shadow:0 2px 10px rgba(0,0,0,.08);

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

    padding:10px 12px;

    box-sizing:border-box;

}

/* Hide the small logo on mobile */

.nav-logo{

    display:none;

}

.nav-links{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    align-items:center;

    list-style:none;

    margin:0;

    padding:0;

    gap:8px 18px;

}

.nav-links li{

    margin:0;
    padding:0;

}

.nav-links a{

    display:block;

    text-decoration:none;

    color:#4b4b4b;

    font-size:.82rem;

    font-weight:600;

    line-height:1.15;

    padding:2px 0;

    white-space:nowrap;

}

#home{

    padding-top:80px;

}

/* ===========================
   HOME
=========================== */

.top-bar{

    flex-direction:column;
    align-items:center;
    gap:18px;
    margin-bottom:22px;

}

.company-logo img{

    width:120px;

}

.brand-logo img{

    width:150px;

}

.hero-section{

    display:grid;
    grid-template-columns:1fr;
    gap:20px;
    align-items:center;

}

.hero-image{

    order:1;
    text-align:center;

}

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

.hero-text{

    order:2;
    text-align:center;

}

.eyebrow{

    font-size:.78rem;
    margin-bottom:10px;

}

.intro{

    margin:16px auto;
    max-width:100%;

}

.hero-buttons{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:18px;

}

.pill{

    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:10px;
    border-radius:12px;
    font-size:.82rem;
    line-height:1.08;

}

.feature-strip{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    margin-top:24px;

}

.feature{

    padding:14px;
    border-radius:16px;

}

.feature-icon{

    font-size:1.35rem;

}

.feature h3{

    margin:8px 0 6px;
    font-size:.92rem;

}

.feature p{

    font-size:.80rem;
    line-height:1.45;

}

/* ===========================
   PRODUCT RANGE
=========================== */

.product-range-card{

    flex-direction:column;
    align-items:flex-start;
    gap:15px;

}

.card-diameter{

    border-right:none;
    border:0.75pt solid var(--border);
    padding-right:0;
    padding-bottom:15px;
    margin-right:0;
    margin-bottom:10px;
    width:100%;
    align-items:flex-start;
    text-align:left;

}

.card-price{

    align-items:flex-start;

}

}

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

.footer-top{

    display:grid;
    grid-template-columns:1fr;
    gap:24px;

    text-align:center;
    justify-items:center;

}

.footer-left,
.footer-center,
.footer-right{

    width:100%;

}

.footer-logo{

    width:180px;
    max-width:100%;
    margin:auto;

}

.footer-bottom{

    display:flex;
    justify-content:center;

}

.footer-image-wrap{

    justify-content:center;

}

.footer-showcase-image{

    width:100%;
    max-width:320px;
    height:auto;
    object-fit:contain;

}

.footer-right a{

    word-break:break-word;
    overflow-wrap:anywhere;

}

/* ==========================================================
   PRINT (IMPORTANT)
========================================================== */

@page {
    size: 297mm 210mm;
    margin: 0;
}

@media print {
    *{
        box-shadow:none !important;
        transition:none !important;
        animation:none !important;
    }
    html {
        margin: 0;
        padding: 0;
        .feature,
        .feature-card,
        .material,
        .application-card,
        .product-range-card,
        .partner-card{
            border-radius:8px;
        }
    }
    html,body{
        width:297mm;
        height:210mm;
    }

    body {
        margin: 0;
        padding: 0;
        display: block !important;
        background: var(--cream);
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .page {
        width:297mm;
        min-height:210mm;
        height:auto;
        page-break-after: always;
        page-break-inside: avoid;
        box-sizing: border-box;
        padding: 8mm 15mm;
        margin: 0;
        display: block;
        overflow: hidden;
        background: var(--cream) !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .page:last-child {
        page-break-after: auto;
    }

    .page-content{

    	width:100%;

    	max-width:100%;

    	margin:0 auto;

	}

    /* Typography scaling for print */
    h1 {
        font-size: 2.2rem !important;
        margin-bottom: 10px !important;
    }

    h2 {
        font-size: 1.5rem !important;
        margin-bottom: 8px !important;
    }

    h3 {
        font-size: 1.1rem !important;
        margin-bottom: 6px !important;
    }

    p {
        font-size: 0.78rem !important;
        line-height: 1.35 !important;
    }

    .section-heading {
        margin-bottom: 15px !important;
    }

    .section-heading p {
        margin-bottom: 4px !important;
        font-size: 0.75rem !important;
    }

    /* Page 1 (Cover) */
    .top-bar {
        margin-bottom: 15px !important;
    }
    .company-logo img {
        width: 120px !important;
    }
    .brand-logo img {
        width: 150px !important;
    }
    .hero-section {
        gap: 30px !important;
    }
    .hero-text h2 {
        font-size: 1.4rem !important;
        margin-bottom: 15px !important;
    }
    .intro 
	{
	max-width:520px;
    	margin-top:12px;
        margin-bottom: 15px !important;
        font-size: 0.85rem !important;
    }
    .hero-image img {
        max-height: 180px !important;
        object-fit: cover;
    }
    .feature-strip {
        margin-top: 20px !important;
        gap: 12px !important;
    }
    .feature {
        padding: 12px !important;
    }
    .feature-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 1rem !important;
        margin-bottom: 6px !important;
    }

    /* Page 2 (Why Husk & Grounds) */
    
.right-column{

    width:100% !important;

    max-width:100% !important;

    margin:0 !important;

    padding:0 !important;

    overflow:visible !important;

}

.two-column{

    display:grid !important;

    grid-template-columns:1fr !important;

    gap:18px !important;

    width:100% !important;

}
    .left-column img {
        max-height: 160px !important;
        object-fit: cover;
    }
    .right-column .lead {
        margin-bottom: 15px !important;
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
    }
    .feature-grid {
        gap: 10px !important;
    }
    .feature-card {
	width:100%;
    	box-sizing:border-box;
        padding: 10px !important;
    }
    .card-number {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.75rem !important;
        margin-bottom: 6px !important;
    }
    .material-story {
        margin-top: 15px !important;
    }
    .materials {
        margin-top: 10px !important;
        gap: 12px !important;
padding:18px;
    }
    .material {
        padding: 10px !important;
    }
    .material img {
        width: 60px !important;
        height: 60px !important;
        margin-bottom: 8px !important;
        border-width: 3px !important;
object-fit:cover;
    }
    .quote-section
 {
    padding:14px 16px;
    border-radius:14px;
        margin-top: 15px !important;
    }
    .quote-section blockquote 
{
font-size:.88rem;
    line-height:1.45;
    }

    /* Page 3 (Performance & Compliance) */
    .performance-hero {
        gap: 30px !important;
        margin-bottom: 20px !important;
    }
    .performance-image img {
        max-height: 160px !important;
        object-fit: cover;
    }
    .performance-text .lead {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }
    .compliance-grid{

    display:grid !important;

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

    gap:12px !important;

    align-items:stretch;

}
    .compliance-card{

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    height:100%;

    padding:14px;

    box-sizing:border-box;

}
    .tick {
        width: 36px !important;
        height: 36px !important;
        font-size: 1.1rem !important;
        margin-bottom: 8px !important;
    }
    .compliance-card h3{

    font-size:.95rem;

    line-height:1.3;

    margin:10px 0 8px;

}
    .specifications-section {
        margin-top: 15px !important;
    }
    .spec-grid {
        margin-top: 10px !important;
        gap: 10px !important;
    }
    .spec-item {
        padding: 10px !important;
    }
    .applications-section {
        margin-top: 15px !important;
    }
    .applications-grid {
        margin-top: 10px !important;
        gap: 10px !important;
    }
    .application-card img {
        height: 80px !important;
    }
    .application-card h3 {
        padding: 8px !important;
        font-size: 0.8rem !important;
    }

    /* Page 4 (Product Range) */
    .diameter-row {
        margin-bottom: 12px !important;
    }
    .product-split-layout {
        gap: 20px !important;
        margin-bottom: 15px !important;
    }
    .product-range-card {
        padding: 8px 12px !important;
    }
    .card-diameter {
        width: 60px !important;
        padding-right: 10px !important;
        margin-right: 12px !important;
    }
    .card-diameter .diam-num {
        font-size: 1.5rem !important;
    }
    .card-details h3 {
        font-size: 0.95rem !important;
    }
    .badge {
        padding: 2px 8px !important;
        font-size: 0.6rem !important;
    }
    .product-range-image img {
        border-radius: 12px !important;
    }
    .bottom-features-grid {
        gap: 10px !important;
    }
    .bottom-feature-card {
        padding: 8px !important;
    }
    .bottom-feature-card svg {
        width: 16px !important;
        height: 16px !important;
    }

    /* Page 5 (Partners & Contact) */
    .partner-section {
        margin-top: 15px !important;
    }
    .partner-intro {
        margin-bottom: 15px !important;
        font-size: 0.85rem !important;
    }
    .partner-grid {
        gap: 12px !important;
    }
    .partner-card {
        padding: 12px !important;
    }
    .partner-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.9rem !important;
        margin-bottom: 8px !important;
    }
    .closing-banner {
        margin-top: 15px !important;
        padding: 20px 30px !important;
    }
    .closing-banner h2 {
        font-size: 1.4rem !important;
    }
    .contact-footer {
        margin-top: 15px !important;
        padding-top: 15px !important;
        gap: 15px !important;
    }
    .footer-top {
        gap: 15px !important;
    }
    .footer-bottom {
        gap: 30px !important;
        margin-top: 10px !important;
    }
    .footer-showcase-image, .qr-box {
        width: 140px !important;
        height: 140px !important;
    }
    .footer-logo {
        max-width: 150px !important;
    }

    .hero-section,
    .two-column,
    .performance-hero {
        display: grid;
    }

    .feature:hover,
    .feature-card:hover,
    .material:hover,
    .application-card:hover,
    .compliance-card:hover {
        transform: none;
    }

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

/* ==========================
   NAVIGATION
========================== */

.navbar{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:9999;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 16px;

    background:#ffffffee;

    backdrop-filter:blur(10px);

    box-shadow:0 2px 12px rgba(0,0,0,.08);

}
.nav-logo img{

    height:48px;

}

.nav-links{

    display:flex;

    gap:35px;

    list-style:none;

    margin:0;

    padding:0;

}

.nav-links a{

    text-decoration:none;

    color:#4b4b4b;

    font-weight:600;

    transition:.3s;

}

.nav-links a:hover{

    color:#7A8B3A;

}

/* =====================================
   Floating WhatsApp Button
===================================== */

.whatsapp-button{

    position:fixed;

    right:25px;

    bottom:25px;

    z-index:9999;

    display:flex;

    align-items:center;

    gap:12px;

    background:#25D366;

    color:#fff;

    text-decoration:none;

    padding:14px 18px;

    border-radius:50px;

    box-shadow:0 10px 30px rgba(0,0,0,.18);

    font-weight:600;

    transition:all .3s ease;

}

.whatsapp-button:hover{

    transform:translateY(-3px);

    box-shadow:0 16px 36px rgba(0,0,0,.22);

}

.whatsapp-button img{

    width:28px;

    height:28px;

}

}