/*
Theme Name: Vondale Group
Theme URI: https://vondalegroup.com/
Author: Vondale Group
Author URI: https://vondalegroup.com/
Description: A premium, conversion-focused website design agency theme for Vondale Group. Deep midnight navy, warm ivory, and vivid conversion orange (#FF4D00). Includes homepage, services, ready-made website shop, portfolio, pricing, blog, contact and consultation templates, with WooCommerce-compatible cart/checkout fallbacks. No plugins are required to activate and display the theme; WooCommerce is optional for full cart/checkout.
Version: 1.3.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vondale-group
Tags: custom-menu, featured-images, translation-ready, wide-blocks
*/
:root{--navy:#0B1B33;--navy2:#12294F;--navy3:#0A1526;--orange:#FF4D00;--orange2:#E64400;--ivory:#FDFBF7;--cream:#F6F1E8;--gold:#C9A96A;--grey:#5B6472;--line:#E5E0D6;--white:#fff;--radius:10px;--shadow:0 12px 30px rgba(11,27,51,.10)}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--navy)}body{margin:0;font-family:Manrope,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#1B2433;background:var(--ivory);line-height:1.65;font-size:16.5px;display:flex;flex-direction:column;min-height:100vh}main{flex:1}
a{color:var(--navy)}a:hover{color:var(--orange)}img,svg{max-width:100%;height:auto}
h1,h2,h3,h4{font-family:"DM Serif Display",Georgia,serif;color:var(--navy);line-height:1.15;margin:0 0 .6em}
h1{font-size:clamp(2.1rem,4.5vw,3.6rem)}h2{font-size:clamp(1.7rem,3.2vw,2.5rem)}h3{font-size:1.35rem}p{margin:0 0 1em}
.wrap{max-width:1200px;margin:0 auto;padding:0 22px}.section{padding:64px 0}.section.alt{background:var(--cream)}.section.navy{background:var(--navy);color:#fff}.section.navy h2,.section.navy h3{color:#fff}.eyebrow{letter-spacing:.14em;text-transform:uppercase;color:var(--orange);font-weight:800;font-size:.78rem;margin-bottom:10px}.lead{font-size:1.15rem;color:var(--grey);max-width:760px}.section.navy .lead{color:#D7DEE8}
.skip-link{position:absolute;left:-9999px}.skip-link:focus{left:12px;top:12px;z-index:999;background:#fff;padding:10px}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
/* Header */
.site-header{position:sticky;top:0;z-index:100;background:var(--navy);color:#fff;box-shadow:0 6px 24px rgba(0,0,0,.18)}
.header-inner{display:flex;align-items:center;gap:18px;min-height:76px}
.logo{display:flex;align-items:center;gap:11px;color:#fff;text-decoration:none;flex:0 0 auto}.logo-text{line-height:1}.logo-text strong{font-family:"DM Serif Display",Georgia,serif;font-size:1.45rem;display:block}.logo-text span{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:#D7DEE8}
.main-nav{flex:1;display:flex}.main-nav ul{list-style:none;margin:0;padding:0;display:flex;flex:1}.main-nav li{flex:1 1 0;position:relative}.main-nav a{display:flex;align-items:center;justify-content:center;height:76px;padding:0 6px;color:#fff;text-decoration:none;font-weight:700;font-size:.88rem;text-align:center;white-space:nowrap}.main-nav a:hover,.main-nav a:focus{background:rgba(255,255,255,.08);color:#fff}
.main-nav .sub-menu{display:none;position:absolute;left:0;top:100%;background:#fff;min-width:240px;box-shadow:0 16px 40px rgba(0,0,0,.2);z-index:20}.main-nav .sub-menu li{flex:none}.main-nav .sub-menu a{color:var(--navy);height:auto;padding:13px 16px;justify-content:flex-start;white-space:normal}.main-nav li:hover>.sub-menu,.main-nav li:focus-within>.sub-menu{display:block}
.btn{display:inline-block;background:var(--orange);color:#fff!important;text-decoration:none;font-weight:800;padding:14px 22px;border-radius:8px;border:0;cursor:pointer;text-align:center}.btn:hover{background:var(--orange2);color:#fff}.btn.secondary{background:transparent;border:2px solid var(--navy);color:var(--navy)!important}.btn.light{border-color:#fff;color:#fff!important}.btn.small{padding:11px 16px;font-size:.9rem}
.header-cta{flex:0 0 auto}.menu-toggle{display:none;background:transparent;border:1px solid #fff;color:#fff;padding:10px 14px;border-radius:8px;font-weight:800}
.mobile-cta{display:none;position:fixed;left:16px;right:16px;bottom:16px;z-index:90;text-align:center;box-shadow:0 12px 30px rgba(0,0,0,.25)}
.mobile-cta.visible{display:block}
/* Hero / mockups */
.hero{background:var(--navy);color:#fff;padding:56px 0 60px}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center}.hero h1{color:#fff}.hero p{color:#D7DEE8}.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px}
.device{background:#fff;border-radius:14px;padding:14px;color:var(--navy);box-shadow:0 20px 50px rgba(0,0,0,.3)}.device-bar{display:flex;gap:6px;margin-bottom:12px}.device-bar i{width:10px;height:10px;border-radius:50%;background:#ddd;display:block}.device-body{background:var(--cream);border-radius:8px;padding:18px}.device-body .bar{height:12px;background:#D8D2C6;border-radius:99px;margin:10px 0}.device-body .bar.short{width:55%}.device-row{display:flex;gap:10px}.device-row div{flex:1;background:#fff;border:1px solid var(--line);border-radius:8px;padding:14px;font-size:.85rem}
.page-head{background:var(--navy);color:#fff;padding:52px 0 34px}.page-head h1{color:#fff}.page-head p{color:#D7DEE8;margin-top:28px}.banner{margin-top:34px;background:linear-gradient(135deg,var(--navy2),var(--navy));border-radius:14px;padding:34px;color:#fff;border:1px solid rgba(255,255,255,.18)}.banner strong{color:#fff;font-family:"DM Serif Display",Georgia,serif;font-size:1.4rem}.banner .cap{font-size:.85rem;color:#D7DEE8;margin-top:14px}.banner-visual{display:flex;gap:10px;margin-top:18px}.banner-visual i{display:block;height:12px;border-radius:99px;background:rgba(255,255,255,.35);flex:1}.banner-visual i:nth-child(2){background:var(--orange);flex:2}.banner-visual i:nth-child(3){flex:.7}
.banner--services{background:linear-gradient(135deg,#12294F,#0B1B33 60%,#7A2E00)}
.banner--shop{background:linear-gradient(135deg,#0B1B33,#2A1A4A)}
.banner--pricing{background:linear-gradient(135deg,#1A2E4A,#0B1B33);border-color:var(--gold)}
.banner--contact{background:linear-gradient(135deg,#123A2E,#0B1B33)}
.banner--consultation{background:linear-gradient(135deg,#7A2E00,#0B1B33)}
.banner--portfolio{background:linear-gradient(135deg,#3A2A12,#0B1B33)}
.banner--blog{background:linear-gradient(135deg,#2A2438,#0B1B33)}
.banner--faq{background:linear-gradient(135deg,#12294F,#243A5E)}
.banner--legal{background:linear-gradient(135deg,#263142,#0B1B33)}
.banner--legal-privacy-policy{background:linear-gradient(135deg,#263142,#0B1B33)}
.banner--legal-terms-conditions{background:linear-gradient(135deg,#1A2E4A,#7A5A1A)}
.banner--legal-cookie-policy{background:linear-gradient(135deg,#3A2A12,#0B1B33)}
.banner--legal-refund-policy{background:linear-gradient(135deg,#123A2E,#0B1B33)}
.banner--legal-accessibility-statement{background:linear-gradient(135deg,#2A2438,#0B1B33)}
.banner--about{background:linear-gradient(135deg,#0B1B33,#7A5A1A)}
.banner--process{background:linear-gradient(135deg,#12294F,#0B1B33 55%,#FF4D00)}
.banner--our-process{background:linear-gradient(135deg,#12294F,#0B1B33 55%,#FF4D00)}
.banner--custom{background:linear-gradient(135deg,#1A2E4A,#7A2E00)}
.banner--custom-website-design{background:linear-gradient(135deg,#1A2E4A,#7A2E00)}
/* Cards / grids */
.grid{display:grid;gap:20px}.grid.cols-3{grid-template-columns:repeat(3,1fr)}.grid.cols-4{grid-template-columns:repeat(4,1fr)}.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px;display:flex;flex-direction:column;height:100%}.card h3{margin-top:0}.card .grow{flex:1}
.product-card{display:flex;flex-direction:column;height:100%}.product-card .thumb{background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;border-radius:10px;padding:26px;min-height:170px;display:flex;align-items:flex-end}.product-card .meta-row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;height:28px;flex-wrap:nowrap}.product-card .meta-row .cat{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);font-size:.72rem;font-weight:800}.badge{white-space:nowrap;flex-shrink:0;background:#EEF2F7;border-radius:99px;padding:5px 10px;font-size:.75rem;font-weight:800}.price-line{display:flex;align-items:center;height:52px;font-weight:800;font-size:1.25rem;color:var(--navy)}.price-line small{font-size:.85rem;font-weight:600;color:var(--grey);margin-left:8px}
.card-actions{margin-top:auto;display:flex;flex-direction:column;gap:10px}.card-actions .row{display:flex;gap:10px}.card-actions .row .btn{flex:1;padding:12px 8px;font-size:.88rem;white-space:nowrap}.card-actions .btn.purchase{width:100%;height:48px;display:flex;align-items:center;justify-content:center}
.filters{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0}.filters a,.filters button{background:#fff;border:1px solid var(--line);border-radius:99px;padding:10px 16px;text-decoration:none;color:var(--navy);font-weight:700;cursor:pointer}.filters a.active,.filters button.active{background:var(--navy);color:#fff}
/* Pricing */
.pricing-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}.price-card{position:relative}.price-card.featured{border:2px solid var(--orange)}.recommended{display:inline-block;background:var(--orange);color:#fff;font-weight:800;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;border-radius:99px;padding:6px 12px;margin-bottom:12px}
.process-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.detail-section{border:1px solid var(--line);background:#fff;border-radius:12px;padding:28px;margin-top:28px}
.device-mini{display:flex;gap:14px;margin-top:18px}.device-mini div{flex:1;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:10px;padding:14px;color:#fff;font-size:.85rem}
.social-links{margin-top:16px}.social-links a{color:#fff!important;font-weight:800}
table{width:100%;border-collapse:collapse;background:#fff}th,td{border:1px solid var(--line);padding:12px;text-align:left}th{background:var(--navy);color:#fff}.table-wrap{overflow-x:auto}
/* Forms */
.form-wrap{margin-top:48px}.vg-form{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px;max-width:760px}.vg-form label{display:block;font-weight:700;margin:14px 0 6px}.vg-form input,.vg-form select,.vg-form textarea{width:100%;padding:13px;border:1px solid #C9CED6;border-radius:8px;font:inherit}.vg-form .hp{position:absolute;left:-9999px;visibility:hidden}.notice{background:#EAF6EC;border:1px solid #BFE3C3;padding:14px;border-radius:8px}.error{background:#FDECEA;border:1px solid #F5B5B0;padding:14px;border-radius:8px}
.faq-item{border:1px solid var(--line);background:#fff;border-radius:10px;margin-bottom:12px}.faq-item summary{cursor:pointer;font-weight:800;padding:18px;list-style:none}.faq-item div{padding:0 18px 18px}
/* Footer */
.site-footer{background:var(--navy);color:#fff;padding:56px 0 0;margin:0;margin-top:auto}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr;gap:28px;padding-bottom:36px}.site-footer h3,.site-footer h4{color:#fff}.site-footer a{color:#D7DEE8;text-decoration:none}.site-footer a:hover{color:#fff}.site-footer ul{list-style:none;padding:0;margin:0}.site-footer li{margin-bottom:9px}.legal-bar{border-top:1px solid rgba(255,255,255,.18);padding:18px 0 22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:#D7DEE8;font-size:.9rem}.legal-bar a{color:#D7DEE8}
/* Misc */
.breadcrumbs{font-size:.9rem;color:#8A93A3;margin-bottom:16px}.breadcrumbs a{color:#D7DEE8}.tag{display:inline-block;background:var(--cream);border:1px solid var(--line);border-radius:99px;padding:6px 12px;font-size:.85rem;margin:0 6px 6px 0}.step-num{width:46px;height:46px;border-radius:50%;background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;margin-bottom:12px}.testimonial-placeholder{border:2px dashed var(--gold);background:#FFFDF5;padding:28px;border-radius:12px}.wp-caption,.aligncenter{max-width:100%}
@media(max-width:1024px){.grid.cols-4{grid-template-columns:repeat(2,1fr)}.pricing-grid{grid-template-columns:repeat(2,1fr)}.process-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:repeat(2,1fr)}.hero-grid{grid-template-columns:1fr}}
@media(max-width:768px){.main-nav{display:none}.main-nav.open{display:block;position:absolute;left:0;right:0;top:76px;background:var(--navy);padding:10px 22px 22px}.main-nav.open ul{flex-direction:column}.main-nav.open li{flex:none}.main-nav.open a{height:auto;padding:13px 0;justify-content:flex-start}.main-nav.open .sub-menu{position:static;display:block;background:transparent;box-shadow:none}.main-nav.open .sub-menu a{color:#D7DEE8;padding:9px 0 9px 16px}.menu-toggle{display:block}.header-cta{display:none}.grid.cols-3,.grid.cols-2,.grid.cols-4{grid-template-columns:1fr}.pricing-grid{grid-template-columns:1fr}.process-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.section{padding:44px 0}.hero-actions .btn,.card-actions .btn{width:100%}.card-actions .row{flex-direction:column}.card-actions .row .btn{width:100%}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* v1.2.0 direct-HTML visual system: local CSS/SVG mockups only, no external images, no invented client photos */
.page-intro{margin-top:28px}
.visual{margin:24px 0;background:linear-gradient(135deg,var(--navy),var(--navy2));border-radius:14px;padding:26px;color:#fff;border:1px solid rgba(255,255,255,.18)}
.visual.light{background:linear-gradient(135deg,#fff,var(--cream));color:var(--navy);border-color:var(--line)}
.visual strong{font-family:"DM Serif Display",Georgia,serif;font-size:1.25rem;color:#fff}
.visual.light strong{color:var(--navy)}
.visual p{color:#D7DEE8;margin:10px 0 0}
.visual.light p{color:var(--grey)}
.visual-bars{display:flex;gap:10px;margin-top:18px}
.visual-bars i{display:block;height:12px;border-radius:99px;background:rgba(255,255,255,.35);flex:1}
.visual-bars i:nth-child(2){background:var(--orange);flex:2}
.visual.light .visual-bars i{background:#D8D2C6}
.visual.light .visual-bars i:nth-child(2){background:var(--orange)}
.visual-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
.visual-grid div{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:10px;padding:14px;font-size:.9rem}
.visual.light .visual-grid div{background:#fff;border-color:var(--line)}
.thumb-visual{background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;border-radius:10px;padding:22px;min-height:150px;display:flex;flex-direction:column;justify-content:flex-end;margin-bottom:16px}
.thumb-visual .bar{height:10px;background:rgba(255,255,255,.35);border-radius:99px;margin-top:10px}
.thumb-visual .bar.short{width:55%}
.thumb-visual .bar.orange{background:var(--orange)}
.mockup-browser{background:#fff;border-radius:12px;padding:12px;color:var(--navy);box-shadow:0 12px 30px rgba(11,27,51,.12)}
.mockup-browser .dots{display:flex;gap:6px;margin-bottom:10px}
.mockup-browser .dots i{width:10px;height:10px;border-radius:50%;background:#ddd;display:block}
.mockup-browser .body{background:var(--cream);border-radius:8px;padding:16px}
.mockup-browser .body .bar{height:11px;background:#D8D2C6;border-radius:99px;margin:9px 0}
.mockup-browser .body .bar.short{width:55%}
/* Plugin compatibility: styles apply only if those plugins are present; none are required */
.woocommerce .price,.woocommerce-Price-amount{color:var(--navy);font-weight:800}
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button{background:var(--orange);color:#fff;border-radius:8px}
.wpcf7-form label,.wpforms-form label{font-weight:700;display:block;margin:12px 0 6px}
.wpcf7-form input,.wpcf7-form textarea,.wpcf7-form select,.wpforms-form input,.wpforms-form textarea,.wpforms-form select{width:100%;padding:13px;border:1px solid #C9CED6;border-radius:8px;font:inherit}
@media(max-width:768px){.visual-grid{grid-template-columns:1fr}}

.banner--variant-1{background:linear-gradient(135deg,#12294F,#0B1B33)}
.banner--variant-2{background:linear-gradient(135deg,#1A2E4A,#7A2E00)}
.banner--variant-3{background:linear-gradient(135deg,#123A2E,#0B1B33)}
.banner--variant-4{background:linear-gradient(135deg,#2A2438,#0B1B33)}
.page-head .page-intro{margin-top:28px}