/*
Theme Name: Hunavo Energy LPG
Author: Hunavo Energy
Description: Native WordPress landing page converted from supplied Lovable project.
Version: 1.6.0
Text Domain: hunavo
*/
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:'DM Sans',sans-serif;color:var(--foreground);background:var(--background)}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:'Manrope',sans-serif}a{text-decoration:none;color:inherit}img{max-width:100%;display:block}button{font:inherit}ul{padding-left:0} .screen-reader-text{position:absolute;left:-9999px}





:root {
  --background: oklch(1 0 0);
  --foreground: oklch(.2 .024 250);
  --primary: oklch(.48 .15 151);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(.97 .012 150);
  --muted-foreground: oklch(.49 .013 250);
  --card: oklch(1 0 0);
  --accent: oklch(.94 .035 150);
  --border: oklch(.92 .008 150);
  --destructive: oklch(.6 .19 23);
  --forest: oklch(.29 .075 161);
  --forest-light: oklch(.77 .075 151);
  --lime: oklch(.77 .16 130);
  --soft-shadow: 0 5px 24px oklch(.25 .04 150 / .045);
  --button-shadow: 0 4px 14px oklch(.48 .15 151 / .16);
  --radius: 8px;
}

.container { width: min(1160px, calc(100% - 80px)); margin-inline: auto; }
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab,var(--background) 95%,transparent); border-bottom: 1px solid var(--border); backdrop-filter: blur(16px); }
.header-inner { height: 91px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 35px; }
.brand { display: flex; align-items: center; position: relative; width: 120px; height: 66px; flex-shrink: 0; }
.brand svg { width: 50px; height: 60px; }
.brand-leaf { fill: var(--lime); }.brand-swoop { fill: var(--primary); }
.brand>span { font-family: var(--font-display); font-weight: 800; font-size: 17px; line-height: 1; margin-left: -16px; margin-top: 8px; }.brand small { display: block; text-align: right; font-size: 12px; margin-top: 3px; }
.desktop-nav { justify-self: center; display: flex; gap: 25px; align-items: center; }.desktop-nav a { font-size: 12px; font-weight: 600; padding: 12px 0; transition: color .2s; }.desktop-nav a:hover,.desktop-nav a:first-child { color: var(--primary); }
.header-actions { display: flex; gap: 8px; align-items: center; }.menu-toggle { display: none; }
.whatsapp-button { background: var(--primary); color: var(--primary-foreground); border-radius: 50px; min-height: 48px; padding: 0 24px; gap: 12px; font-size: 14px; font-weight: 700; box-shadow: var(--button-shadow); transition: background .2s, transform .2s; }.whatsapp-button:hover { background: var(--forest); transform: translateY(-2px); }.whatsapp-button svg { width: 19px; height: 19px; }.whatsapp-button svg:last-child { margin-left: 8px; width: 17px; }.header-whatsapp { min-height: 38px; padding-inline: 16px; font-size: 11px; gap: 7px; }.header-whatsapp svg { width: 15px; height: 15px; }
.hero { position: relative; overflow: hidden; background: var(--secondary); }.hero-image { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }.hero-inner { position: relative; min-height: 610px; display: flex; align-items: center; }.hero-copy { padding-block: 48px 55px; width: 58%; animation: rise-in .7s ease-out both; }.eyebrow { color: var(--primary); font-size: 10px; text-transform: uppercase; font-weight: 800; letter-spacing: 1.6px; display: flex; gap: 8px; align-items: center; }.hero-eyebrow { margin-bottom: 20px; }.hero-eyebrow>span { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }.hero h1 { font-size: 52px; font-weight: 800; line-height: 1.13; }.hero h1 span,h2 span { color: var(--primary); }.hero-description { margin-top: 20px; font-size: 18px; font-weight: 500; line-height: 1.6; }.hero-benefits { display: flex; gap: 29px; margin: 25px 0; }.hero-benefits>div { display: flex; flex-direction: column; align-items: center; gap: 9px; font-size: 10px; font-weight: 600; }.icon-circle { display: grid; place-items: center; width: 57px; height: 57px; border-radius: 50%; color: var(--primary); background: var(--accent); }.icon-circle svg { width: 26px; height: 26px; stroke-width: 1.8; }.location-note { display: flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 11px; font-weight: 600; }.location-note svg { color: var(--primary); }.hero-badge { position: absolute; top: 50px; right: -8px; width: 116px; height: 116px; border-radius: 50%; background: var(--primary); color: var(--primary-foreground); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; text-align: center; box-shadow: var(--button-shadow); transform: rotate(7deg); font-size: 11px; line-height: 1.4; font-weight: 600; }.hero-bottom-line { position: absolute; bottom: 0; width: 100%; height: 4px; background: var(--primary); }
.section { padding-block: 65px; }.section-heading { text-align: center; margin-bottom: 31px; }.section-heading .eyebrow { justify-content: center; margin-bottom: 10px; }.section-heading h2 { font-size: 31px; font-weight: 800; line-height: 1.3; }.section-description { max-width: 590px; margin: 12px auto 0; color: var(--muted-foreground); font-size: 13px; line-height: 1.7; }.benefit-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; }.benefit-card { position: relative; border: 1px solid var(--border); border-radius: 8px; padding: 28px 24px; background: var(--card); box-shadow: var(--soft-shadow); transition: transform .25s, border-color .25s; }.benefit-card:hover { transform: translateY(-5px); border-color: var(--primary); }.card-number { position: absolute; right: 18px; top: 20px; color: var(--border); font-family: var(--font-display); font-size: 13px; font-weight: 700; }.benefit-card h3 { margin-top: 19px; font-size: 15px; font-weight: 800; line-height: 1.5; max-width: 175px; }.benefit-card p { margin-top: 10px; font-size: 12px; color: var(--muted-foreground); line-height: 1.7; }
.comparison-section { background: var(--secondary); padding-block: 45px; }.comparison-section .section-heading { margin-bottom: 23px; }.comparison-grid { display: grid; grid-template-columns: minmax(0,1fr) 50px minmax(0,1fr); align-items: center; gap: 20px; }.comparison-side { display: grid; grid-template-columns: 180px minmax(0,1fr); align-items: center; gap: 23px; }.comparison-side img { width: 180px; height: 200px; object-fit: contain; mix-blend-mode: multiply; }.comparison-side.composite { grid-template-columns: 132px minmax(0,1fr); }.comparison-side.composite img { width: 118px; height: 210px; object-fit: contain; }.comparison-side h3 { font-size: 15px; font-weight: 800; line-height: 1.5; margin-bottom: 16px; }.comparison-list { padding: 0; margin: 0; list-style: none; display: grid; gap: 12px; font-size: 11px; }.comparison-list li { display: flex; gap: 8px; align-items: center; }.comparison-list svg { background: var(--primary); color: var(--primary-foreground); width: 15px; height: 15px; padding: 2px; flex-shrink: 0; border-radius: 50%; }.comparison-list.traditional svg { background: var(--destructive); }.comparison-label { display: inline-block; color: var(--muted-foreground); font-size: 10px; margin-top: 20px; border-top: 1px solid var(--border); padding-top: 10px; }.composite .comparison-label { color: var(--primary); }.versus { width: 44px; height: 44px; display: grid; place-items: center; background: var(--primary); color: var(--primary-foreground); font-size: 14px; font-weight: 800; border-radius: 50%; }
.services-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }.service-card { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 25px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--soft-shadow); }.service-photo { overflow: hidden; border-radius: 5px; min-height: 230px; background: var(--secondary); }.service-photo img { width: 100%; height: 100%; object-fit: cover; }.cylinder-photo img { height: 226px; object-fit: contain; padding: 12px; mix-blend-mode: multiply; }.service-content { padding: 16px 10px 16px 0; display: flex; flex-direction: column; align-items: flex-start; }.service-tag { text-transform: uppercase; font-size: 8px; font-weight: 700; color: var(--primary); letter-spacing: 1px; }.service-content h3 { margin-top: 10px; font-size: 18px; font-weight: 800; }.service-content p { font-size: 12px; line-height: 1.7; color: var(--muted-foreground); margin: 12px 0 20px; }.service-content .whatsapp-button { margin-top: auto; padding-inline: 15px; min-height: 39px; font-size: 10px; gap: 7px; }.service-content .whatsapp-button svg { width: 15px; height: 15px; }
.ordering-section { background: var(--forest); color: var(--primary-foreground); padding-block: 47px 52px; }.ordering-section .eyebrow { color: var(--forest-light); }.ordering-section h2 span { color: var(--primary-foreground); }.steps-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 70px; max-width: 980px; margin: 0 auto; }.order-step { text-align: center; position: relative; }.order-step:not(:last-child)::after { content: ''; position: absolute; top: 36px; left: calc(50% + 50px); width: calc(100% - 30px); border-top: 1px dashed var(--forest-light); opacity: .5; }.step-icon { position: relative; width: 76px; height: 76px; display: grid; place-items: center; background: var(--background); color: var(--primary); border-radius: 50%; margin: 0 auto; }.step-icon>svg { width: 31px; height: 31px; stroke-width: 1.8; }.step-icon>span { position: absolute; top: -2px; left: -3px; background: var(--accent); width: 24px; height: 24px; border: 3px solid var(--forest); border-radius: 50%; font-size: 11px; display: grid; place-items: center; font-weight: 800; }.order-step h3 { margin-top: 20px; font-size: 15px; font-weight: 700; }.order-step p { color: var(--forest-light); font-size: 12px; line-height: 1.65; max-width: 240px; margin: 9px auto 0; }
.area-section { display: grid; grid-template-columns: 1fr 1fr; min-height: 335px; }.area-image { min-width: 0; overflow: hidden; }.area-image img { height: 100%; width: 100%; object-fit: cover; max-height: 380px; }.area-copy { padding: 46px 40px 44px 52px; max-width: 590px; }.area-copy h2 { font-size: 29px; line-height: 1.3; font-weight: 800; margin-top: 12px; }.area-copy>p:not(.eyebrow) { font-size: 12px; line-height: 1.75; color: var(--muted-foreground); margin-top: 15px; max-width: 430px; }.area-copy>p.area-note { font-size: 10px; margin-top: 8px; }.area-copy .whatsapp-button { margin-top: 20px; min-height: 42px; font-size: 12px; }
.faq-section { padding-block: 55px; border-top: 1px solid var(--border); }.faq-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 12px 22px; }.faq-item { border: 1px solid var(--border); border-radius: 6px; }.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; padding: 17px 20px; font-size: 12px; font-weight: 600; }.faq-item summary::-webkit-details-marker { display: none; }.faq-item summary svg { flex-shrink: 0; color: var(--primary); transition: transform .2s; }.faq-item[open] summary svg { transform: rotate(180deg); }.faq-item[open] { border-color: var(--primary); }.faq-item p { padding: 0 20px 18px; font-size: 12px; line-height: 1.75; color: var(--muted-foreground); }.faq-more { text-align: center; margin-top: 26px; color: var(--muted-foreground); font-size: 11px; }.faq-more a { color: var(--primary); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; margin-left: 5px; }
.footer-cta { background: var(--forest); color: var(--primary-foreground); padding-block: 26px; }.footer-cta-inner { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 48px; }.brand-inverse { color: var(--primary-foreground); }.brand-inverse .brand-swoop { fill: var(--primary-foreground); }.footer-cta h2 { font-size: 22px; font-weight: 800; }.footer-cta p { font-size: 12px; color: var(--forest-light); margin-top: 8px; }.footer-cta .whatsapp-button { border: 1px solid var(--forest-light); }.footer-bottom { display: flex; align-items: center; justify-content: space-between; min-height: 65px; gap: 20px; }.footer-contacts { display: flex; align-items: center; gap: 27px; }.footer-contacts a,.footer-contacts span { display: flex; gap: 7px; align-items: center; font-size: 10px; }.footer-contacts svg { color: var(--primary); }.footer-bottom>p { color: var(--muted-foreground); font-size: 9px; }.skip-link { position: fixed; left: 20px; top: -70px; z-index: 100; background: var(--primary); color: var(--primary-foreground); padding: 12px 20px; }.skip-link:focus { top: 12px; }.mobile-nav { display: none; }
@keyframes rise-in { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
@media(min-width:1500px) { .hero-inner { min-height: 665px; }.hero-image { object-position: center 52%; } }
@media(max-width:1100px) { .container { width: calc(100% - 48px); }.header-inner { gap: 20px; }.desktop-nav { gap: 15px; }.desktop-nav a { font-size: 11px; }.hero h1 { font-size: 46px; }.hero-inner { min-height: 570px; }.hero-badge { right: 0; width: 96px; height: 96px; font-size: 9px; }.comparison-side { grid-template-columns: 130px minmax(0,1fr); gap: 16px; }.comparison-side img { width: 130px; }.comparison-side.composite { grid-template-columns: 95px minmax(0,1fr); }.comparison-side.composite img { width: 90px; }.service-card { grid-template-columns: 140px minmax(0,1fr); gap: 17px; }.service-content h3 { font-size: 16px; }.service-content .whatsapp-button { padding-inline: 12px; }.footer-cta-inner { gap: 25px; } }
@media(max-width:850px) { .desktop-nav { display: none; }.header-inner { grid-template-columns: minmax(0,1fr) auto; height: 77px; }.menu-toggle { display: inline-flex; }.header-whatsapp { font-size: 10px; }.mobile-nav { display: grid; padding: 8px 24px 18px; border-top: 1px solid var(--border); }.mobile-nav a { display: flex; justify-content: space-between; padding: 12px 0; font-size: 13px; }.hero h1 { font-size: 39px; }.hero-description { font-size: 15px; }.hero-inner { min-height: 545px; }.hero-badge { top: 30px; width: 85px; height: 85px; }.benefit-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.comparison-grid { grid-template-columns: 1fr; gap: 16px; }.comparison-side,.comparison-side.composite { grid-template-columns: 170px minmax(0,1fr); max-width: 490px; width: 100%; margin: 0 auto; }.comparison-side img { width: 150px; height: 165px; }.comparison-side.composite img { width: 90px; height: 170px; margin: auto; }.versus { margin: auto; width: 35px; height: 35px; font-size: 11px; }.services-grid { gap: 16px; }.service-card { grid-template-columns: 1fr; gap: 0; padding: 10px; }.service-photo { min-height: 200px; height: 200px; }.cylinder-photo img { height: 200px; }.service-content { padding: 18px 12px 12px; }.service-content h3 { font-size: 18px; }.steps-grid { gap: 35px; }.area-copy { padding: 32px; }.area-copy h2 { font-size: 23px; }.footer-cta-inner { grid-template-columns: minmax(0,1fr) auto; }.footer-cta .brand { display: none; }.footer-cta h2 { font-size: 19px; }.footer-contacts { gap: 14px; } }
@media(max-width:600px) { .container { width: calc(100% - 36px); }.header-inner { height: 72px; }.brand { width: 108px; }.brand svg { width: 45px; height: 52px; }.brand>span { font-size: 15px; }.header-whatsapp { padding-inline: 12px; min-height: 35px; }.header-whatsapp svg:last-child { display: none; }.header-actions { gap: 4px; }.hero-inner { min-height: 715px; align-items: flex-start; }.hero-image { height: 360px; top: auto; bottom: 0; object-position: 72% center; }.hero { background: var(--background); }.hero-copy { width: 100%; padding: 32px 0 0; }.hero-eyebrow { font-size: 9px; margin-bottom: 13px; }.hero h1 { font-size: 37px; line-height: 1.15; }.hero-description { font-size: 14px; margin-top: 14px; }.hero-benefits { gap: 24px; margin-block: 18px; }.icon-circle { width: 45px; height: 45px; }.icon-circle svg { width: 23px; height: 23px; }.hero-benefits>div { font-size: 9px; gap: 7px; }.hero-copy .whatsapp-button { min-height: 43px; font-size: 12px; }.location-note { margin-top: 10px; font-size: 10px; }.hero-badge { top: auto; bottom: 200px; right: 0; width: 85px; height: 85px; font-size: 8px; }.hero-badge svg { width: 18px; height: 18px; }.section { padding-block: 42px; }.section-heading { margin-bottom: 25px; }.section-heading h2 { font-size: 25px; line-height: 1.35; }.section-heading .eyebrow { font-size: 9px; letter-spacing: 1.3px; }.section-description { font-size: 12px; }.benefit-grid { gap: 12px; }.benefit-card { padding: 20px 16px; }.benefit-card h3 { font-size: 13px; margin-top: 14px; }.benefit-card p { font-size: 11px; line-height: 1.65; }.comparison-side,.comparison-side.composite { grid-template-columns: 120px minmax(0,1fr); gap: 15px; }.comparison-side img { width: 120px; }.comparison-side h3 { font-size: 13px; margin-bottom: 12px; }.comparison-list { font-size: 10px; gap: 11px; }.comparison-label { font-size: 9px; }.services-grid { grid-template-columns: 1fr; }.service-card { grid-template-columns: 120px minmax(0,1fr); padding: 9px; gap: 14px; }.service-photo { height: 100%; min-height: 220px; }.cylinder-photo img { height: 215px; padding: 14px 5px; }.service-content { padding: 14px 4px 14px 0; }.service-tag { font-size: 7px; }.service-content h3 { font-size: 16px; }.service-content p { font-size: 11px; margin-block: 10px 14px; }.service-content .whatsapp-button { font-size: 9px; min-height: 35px; padding-inline: 10px; gap: 5px; }.service-content .whatsapp-button svg:last-child { margin-left: 0; }.steps-grid { grid-template-columns: 1fr; gap: 30px; }.order-step { display: grid; grid-template-columns: 65px minmax(0,1fr); column-gap: 23px; text-align: left; max-width: 330px; margin: auto; width: 100%; }.step-icon { grid-row: 1/3; width: 65px; height: 65px; }.order-step h3 { margin-top: 4px; font-size: 14px; }.order-step p { margin: 6px 0 0; font-size: 11px; max-width: none; }.order-step:not(:last-child)::after { top: 72px; left: 32px; width: 0; height: 22px; border-top: none; border-left: 1px dashed var(--forest-light); }.area-section { grid-template-columns: 1fr; }.area-image { height: 230px; }.area-copy { padding: 33px 24px 38px; }.area-copy h2 { font-size: 26px; }.faq-grid { grid-template-columns: 1fr; gap: 10px; }.faq-item summary { padding: 16px; font-size: 11px; }.faq-more { font-size: 10px; line-height: 1.8; }.footer-cta-inner { grid-template-columns: 1fr; gap: 21px; text-align: center; }.footer-cta-inner>.whatsapp-button { justify-self: center; min-height: 43px; font-size: 12px; }.footer-cta h2 { font-size: 20px; }.footer-cta p { font-size: 11px; }.footer-bottom { flex-direction: column; justify-content: center; gap: 14px; padding-block: 22px; }.footer-contacts { gap: 18px; }.footer-contacts a,.footer-contacts span { font-size: 9px; }.footer-contacts a:last-child { display: none; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } *,*::before,*::after { animation: none !important; transition: none !important; } }

/* Native theme adjustments */
.site-header .brand img,.footer-cta .brand img{max-width:210px;max-height:66px;width:auto;object-fit:contain}.footer-cta .brand img{background:white;border-radius:8px;padding:5px}.wa-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:#078b35;color:white;border-radius:100px;padding:14px 22px;font-size:13px;font-weight:800;box-shadow:0 6px 15px #087b3330;white-space:nowrap}.wa-btn:hover{background:#006d29;color:white}.mobile-nav[hidden]{display:none!important}.menu-toggle{display:none;background:transparent;border:0;font-size:25px;cursor:pointer}.faq-item summary{cursor:pointer}.faq-item summary::marker{content:''}.faq-item summary{list-style:none}.faq-item summary::-webkit-details-marker{display:none}.icon-circle{font-size:25px}.benefit-card .icon-circle{margin-bottom:16px}.step-icon{font-size:35px}.footer-contacts a{display:inline-flex;gap:6px;align-items:center}.brand{display:inline-flex;align-items:center}.service-photo img{width:100%;height:100%;object-fit:cover}.cylinder-photo img{object-fit:contain}.comparison-side img{object-fit:contain}.hero-benefits .icon-circle{font-size:25px}.hero-badge{font-size:11px}.skip-link{position:absolute;left:-9999px}.skip-link:focus{left:10px;top:10px;z-index:1000;background:white;padding:10px}.footer-cta .wa-btn{flex-shrink:0}
@media(max-width:850px){.menu-toggle{display:inline-flex}.desktop-nav{display:none!important}.mobile-nav{display:flex;flex-direction:column;padding:14px 24px;background:white}.mobile-nav a{padding:10px}.header-whatsapp{display:none!important}.hero-inner{min-height:520px}.hero-copy{width:68%}.hero h1{font-size:clamp(30px,5vw,48px)}}
@media(max-width:600px){.site-header .brand img{max-width:160px}.hero-image{opacity:.27}.hero-copy{width:100%}.hero-badge{display:none}.hero-benefits{gap:12px}.hero h1{font-size:35px}.container{width:calc(100% - 32px)}.footer-cta-inner{gap:16px}.wa-btn{white-space:normal;text-align:center}}

/* 1.1.0 - consistent SVG icon rendering */
.icon-circle svg,.step-icon svg{display:block;flex-shrink:0;stroke:currentColor;fill:none}.wa-btn svg{display:block;flex-shrink:0;width:17px;height:17px;stroke:currentColor}.location-note svg,.eyebrow svg,.footer-contacts svg{display:inline-block;vertical-align:middle;flex-shrink:0}.wa-btn{gap:9px}.wa-btn svg:last-child{margin-left:2px}.icon-circle{font-size:initial}.step-icon{font-size:initial}

/* Hunavo v1.2: uncropped hero and legible brand logo */
@media (min-width: 851px) {
 .hero { background: #f9fbfa; }
 .hero-image { width:100%; height:100%; object-fit:contain; object-position:right center; }
 .hero-copy { width:55%; max-width:650px; }
 .site-header .brand img { width:155px; max-width:155px; max-height:62px; height:auto; }
 .hero-badge { right:0; top:58px; }
}
@media (min-width: 1500px) {
 .hero-inner { min-height:665px; }
 .hero-image { object-position:right center; }
}
@media (min-width:851px) and (max-width:1250px) {
 .hero-image { width:85%; right:0; left:auto; object-fit:contain; }
 .hero-copy { width:57%; }
}
@media (max-width:850px) {
 .site-header .brand img { width:145px; max-width:145px; max-height:55px; height:auto; }
 .hero-image { object-fit:contain; object-position:right bottom; }
}
@media (max-width:600px) {
 .site-header .brand img { width:135px; max-width:135px; max-height:50px; }
 .hero-image { width:100%; height:350px; opacity:1; object-fit:contain; object-position:right bottom; }
 .hero { background:#fff; }
 .hero-inner { min-height:740px; }
 .hero-copy { position:relative; z-index:1; }
}

/* Footer social links and agency credit - v1.3 */
.footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 28px;padding-block:18px;min-height:82px}
.footer-social{display:flex;align-items:center;gap:12px}
.footer-social a{display:inline-flex;align-items:center;gap:7px;color:var(--foreground);font-size:11px;font-weight:600;padding:8px 10px;border-radius:7px;transition:background .2s,color .2s}
.footer-social a svg{color:var(--primary);flex-shrink:0}
.footer-social a:hover{background:var(--secondary);color:var(--primary)}
.footer-credits{text-align:right}
.footer-credits p{margin:0 0 5px;font-size:10px;line-height:1.6;color:var(--muted-foreground)}
.footer-credits p:last-child{margin-bottom:0}
.footer-credits a{display:inline-flex;align-items:center;gap:4px;color:var(--primary);font-weight:800}
.footer-credits a:hover{text-decoration:underline}
@media(max-width:950px){.footer-bottom{justify-content:center;text-align:center}.footer-credits{text-align:center}}
@media(max-width:600px){.footer-bottom{gap:14px}.footer-contacts{flex-wrap:wrap;justify-content:center}.footer-social{justify-content:center;width:100%}.footer-credits{width:100%}.footer-credits p{font-size:10px}}

/* v1.5: responsive artwork with accessible, clickable WhatsApp CTA */
.hero{position:relative;min-height:0!important;overflow:hidden;background:#f7fbf8}
.hunavo-banner{display:block;position:relative;width:100%;line-height:0}
.hunavo-banner img{display:block;width:100%;height:auto;object-fit:contain}
.hero .hero-inner{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.hero .hero-bottom-line{display:none}
.hunavo-banner-cta{position:absolute;z-index:5;left:7.5%;top:79%;width:23%;height:9%;border-radius:999px;cursor:pointer}
.hunavo-banner-cta:focus-visible{outline:4px solid #fff;outline-offset:3px;box-shadow:0 0 0 7px #087c35}
@media(max-width:700px){.hunavo-banner-cta{left:5%;top:75%;width:40%;height:10%}}

/* v1.6 approved original desktop and square mobile creative */
@media(max-width:700px){.hunavo-banner-cta{left:5.2%;top:75%;width:39%;height:9%;}}

/* v1.7: exact user-approved hero banners (desktop 1857x847, mobile 1275x1233) */
.hunavo-banner img{width:100%;height:auto;display:block}
.hunavo-banner-cta{left:7.6%;top:78.5%;width:20%;height:9%}
@media(max-width:700px){.hunavo-banner-cta{left:5.2%;top:75%;width:38.2%;height:8.5%}}

/* v1.8: mobile header with always-visible WhatsApp order button */
@media (max-width:850px) {
 .site-header .header-inner{grid-template-columns:minmax(0,1fr) auto;gap:10px;height:76px;}
 .site-header .header-actions{display:flex;align-items:center;gap:12px;min-width:0;}
 .site-header .header-whatsapp{display:inline-flex!important;align-items:center;flex-shrink:0;padding:0;min-height:0;}
 .site-header .header-whatsapp .wa-btn{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:10px 13px;min-height:36px;font-size:11px;line-height:1;border-radius:999px;}
 .site-header .header-whatsapp .wa-btn svg{width:14px;height:14px;flex-shrink:0;}
 .site-header .header-whatsapp .wa-btn svg:last-child{display:none;}
 .site-header .menu-toggle{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:34px;height:38px;font-size:25px;line-height:1;color:#142018;}
 .site-header .brand{min-width:0;}
 .site-header .brand img{display:block;width:130px;max-width:100%;height:auto;max-height:53px;object-fit:contain;}
}
@media (max-width:420px) {
 .site-header .header-inner{gap:5px;height:72px;}
 .site-header .header-actions{gap:5px;}
 .site-header .brand img{width:105px;max-width:105px;}
 .site-header .header-whatsapp .wa-btn{font-size:10px;padding:9px 10px;gap:5px;min-height:34px;}
 .site-header .header-whatsapp .wa-btn svg{width:13px;height:13px;}
 .site-header .menu-toggle{width:28px;font-size:23px;}
}
@media (max-width:350px) {
 .site-header .brand img{width:88px;max-width:88px;}
 .site-header .header-whatsapp .wa-btn{font-size:9px;padding:8px;}
}

/* v1.9: independent mobile CTA prevents older header-whatsapp hiding rules */
.mobile-header-cta{display:none}
@media(max-width:850px){
 .site-header .header-inner{display:flex;align-items:center;justify-content:space-between;gap:8px;width:calc(100% - 32px);height:72px}
 .site-header .brand{width:auto;height:auto;flex:0 1 110px;min-width:0}
 .site-header .brand img{width:110px;max-width:100%;height:auto;max-height:52px}
 .site-header .header-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex:0 0 auto}
 .site-header .desktop-header-whatsapp{display:none!important}
 .site-header .mobile-header-cta{display:inline-flex!important;align-items:center;justify-content:center;gap:6px;background:#008b36;color:#fff!important;text-decoration:none;border-radius:999px;padding:10px 12px;font-size:11px;line-height:1.1;font-weight:700;white-space:nowrap;min-height:36px;box-shadow:0 4px 14px #008b3624}
 .site-header .mobile-header-cta svg{width:15px;height:15px;flex-shrink:0}
 .site-header .menu-toggle{display:inline-flex!important;width:30px;height:38px;flex:0 0 30px;align-items:center;justify-content:center;padding:0}
}
@media(max-width:390px){
 .site-header .brand{flex-basis:91px}
 .site-header .brand img{width:91px}
 .site-header .header-actions{gap:5px}
 .site-header .mobile-header-cta{padding:9px 9px;font-size:10px;gap:4px}
 .site-header .mobile-header-cta svg{width:13px;height:13px}
 .site-header .menu-toggle{width:26px;flex-basis:26px}
}
@media(max-width:340px){.site-header .brand{flex-basis:78px}.site-header .brand img{width:78px}.site-header .mobile-header-cta{font-size:9px;padding:8px 7px}}