/*
Theme Name: BCV Theme
Theme URI: https://quotigo.live/
Author: Robert
Author URI: https://quotigo.live/
Description: A lightweight theme based on the provided mock-up. Uses only the CSS/classes from the example so visual parity is exact. Fully responsive header and widgetized footer.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bcv-theme
*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root{
  	--tx:#ffffff;
  	--bg:#000000;          /* Pure black background */
 	--bg-soft: #e6e7e8;     /* Slightly lighter black */
	--bg-body: #2f4f50;
	--card:#1a1a1a;        /* Card background */
  	--ink:#ffffff;         /* White text */
  	--muted:#cccccc;       /* Muted text */
  	--line:#333333;        /* Borders */
  	--brand:#cc0000;       /* Burnt dark orange accent */
  	--brand-2:#ff0000;     /* Secondary orange accent */
  	--warning:#f5000b;
  	--max:1370px;
  	--in: #256b6b;
  	--radius:12px;
	--mitem: #2f4f50;
}

html,body{height:100%}
* {
	font-family: Poppins;
}

body{
  margin:0;
  background: var(--bg-body);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:var(--brand); text-decoration:none}
img{max-width:100%; height:auto; display:block}
.wrap{max-width:var(--max);margin-inline:auto;padding: clamp(16px,3vw,28px);}
.stack{display:grid; gap: clamp(14px, 2.2vw, 28px)}
.grid{display:grid;gap: clamp(16px,2.4vw,24px);}
.grid.cols-2{grid-template-columns: repeat(1,minmax(0,1fr))}
.grid.cols-2{grid-template-columns: repeat(2,minmax(0,1fr))}
.grid.cols-3{grid-template-columns: repeat(3,minmax(0,1fr))}
.grid.cols-4{grid-template-columns: repeat(4,minmax(0,1fr))}
@media (max-width: 980px){
  .grid.cols-2, .grid.cols-3, .grid.cols-4{grid-template-columns: 1fr}
}
header.site{
  position:sticky; top:0; z-index:50; backdrop-filter: blur(8px);
  background: rgba(0,0,0,.8);
}
.site .bar{display:flex; align-items:center; justify-content:space-between}
.brand{display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.2px}
.brand .mark{width:36px; aspect-ratio:1; border-radius:10px; display:grid; place-items:center;
  background: radial-gradient(100% 100% at 50% 0%, var(--brand) 0%, #990000 60%, #663300 100%);
}
.cta{display:inline-grid; place-items:center; padding:10px 16px; border-radius:12px; font-weight:600;
  background: linear-gradient(180deg, var(--brand) 0%, #990000 100%); color:#ffffff; border:1px solid #cc0000;
}
.cta.secondary{background: linear-gradient(180deg, var(--brand-2), #cc0000); border-color:#e60000;}

/* Hero */
.hero{position:relative; overflow:hidden; }
.hero .wrap{display:grid; gap:28px; align-items:center}
.eyebrow{font-size:.85rem; text-transform:uppercase; letter-spacing:.24em; color:var(--muted)}
h1{font-size:clamp(34px, 4.6vw, 56px); line-height:1.06; margin:6px 0 8px; color:var(--ink)}
.lede{font-size:clamp(16px,1.4vw,19px); color:var(--muted); max-width: 70ch}
.hero .actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:8px}
.hero .art{position:relative; background: radial-gradient(120% 80% at 20% 10%, rgba(204,85,0,.2), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 40%);
  border:1px solid var(--line); padding: 18px;}
.hero .video{
  aspect-ratio: 16 / 9; border-radius: 14px; background:#111111; border:1px solid var(--line);
  display:grid; place-items:center; color:var(--muted); font-size:14px
}

/* Trust bar */
.trust{background: var(--bg-soft);/* border-top:1px solid var(--line); *//* border-bottom:1px solid var(--line); */}
.trust .logos{display:grid;grid-template-columns: repeat(6, minmax(0,1fr));gap: 10px;opacity: 1;}
@media (max-width: 980px){ .trust .logos{grid-template-columns: repeat(3,1fr)} }
.trust .logo{height: 150px;border-radius:12px;border:1px dashed var(--line);display:grid;place-items:center;color:var(--muted)}

/* Value pillars */
.pillars .card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.00)); border:1px solid var(--line);
  border-radius: var(--radius); padding:22px;}
.kpi{display:flex; align-items:center; gap:10px; font-weight:700}
.kpi .dot{width:10px; height:10px; border-radius:999px; background:var(--brand)}
.card h3{margin:.2rem 0 .6rem; color:var(--ink)}
.meta{color:var(--muted); font-size:.95rem}

/* Sectors */
.sectors .sector{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:grid}
.sector .media{aspect-ratio: 16/10; background: linear-gradient(180deg, rgba(204,85,0,.14), rgba(204,85,0,.02))}
.sector .copy{padding:18px}

/* Process */
.process .step{display:grid; gap:8px; border:1px solid var(--line); border-radius: var(--radius); padding:18px}
.step .num{font-weight:800; color:var(--brand)}

/* Case studies */
.cases .case{display:grid; gap:12px; border:1px solid var(--line); border-radius:var(--radius); padding:18px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.00))}
.tag{font-size:.8rem; color:#000; background:var(--brand); border-radius: 999px; padding:3px 8px; font-weight:700; display:inline-block}

/* Testimonial */
.testi{/* border-top:1px solid var(--line); *//* border-bottom:1px solid var(--line); */}
blockquote{font-size: clamp(18px,2vw,22px); line-height:1.5; margin:0; color:var(--ink)}

/* Contact */
form.contact{display:grid; gap:14px}
.field{display:grid; gap:6px}
input, textarea, select{
  background:#1a1a1a; border:1px solid var(--line); color:var(--ink); padding:12px 14px; border-radius:12px; font-size:16px
}
textarea{min-height:120px}

footer{/* border-top:1px solid var(--line); */color:var(--muted)}
.footer-grid{display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap:24px}
@media (max-width: 980px){ .footer-grid{grid-template-columns:1fr} }
.small{font-size:.9rem; color:var(--muted)}

nav li {
    list-style: none;
    display: inline-flex;
}

ul.small a {
    text-decoration: none;
    list-style: none;
    color: #888888;
    transition: 0.5s;
}
ul.small a:hover {
    color: #ff0000;
}

/* ============================
   Navigation
   ============================ */
/* Desktop primary nav */
.primary-nav {
  display:flex;
  gap:1rem;
}
.primary-nav ul {
  display:flex;
  gap:1rem;
  margin:0; padding:0; list-style:none;
}
.primary-nav li { position:relative; }
.primary-nav a {display:block;padding:8px 10px;color:#2f4f50;text-decoration:none;transition:  0.5s;}
.primary-nav .sub-menu {
  display:none;
  position:absolute;
  top:100%;
  left:0;
  background:var(--bg-soft);
  padding:10px;
  border:1px solid var(--line);
  border-radius:12px;
  min-width:180px;
  z-index:60;
}
.primary-nav li:hover > .sub-menu { display:block; }

/* Hamburger button */
.menu-toggle {
  display:none;
  flex-direction:column;
  gap:5px;
  background: #e6e7e8;
  border:none;
  cursor:pointer;
  padding:6px;
  align-items:center;
}
.menu-toggle .bar { width:24px; height:3px; background:var(--ink); border-radius:2px; }

/* Mobile behavior */
@media(max-width:768px){
  .site .bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px; /* Match theme's stack gap */
  }
  .site-logo {
    order: 1;
    justify-self: center;
  }
  .site .bar > div { /* Targets div containing .menu-toggle */
    order: 2;
    display: flex;
    width: 100%;
    max-width: 300px; /* Constrain for balance */
    justify-content: center;
  }
  .menu-toggle {
    display: flex;
    /* margin-right: 0px; Space between hamburger and CTA */
    background-color: #e6e7e8;
  }

  .menu-toggle .bar {
    background-color: #304e4d;
  }
  
  .cta {
    order: 2; /* Same order as .menu-toggle div to stay in same row */
  }
  .primary-nav {
    position: fixed;
    top: 0;
    left: -100%;
    width: 260px;
    background: var(--bg-soft);
    padding: 2rem 1.5rem;
    flex-direction: column;
    gap: 1rem;
    transition: left .28s cubic-bezier(.2,.9,.2,1);
    z-index: 1100;
    overflow: auto;
  }
  .primary-nav.open { left: 0; }
  .primary-nav ul {
    flex-direction: column;
    gap: .75rem;
  }
  .primary-nav li { display: block; }
  .primary-nav .sub-menu {
    position: static;
    border: none;
    background: transparent;
    padding-left: 14px;
    display: none;
  }
  .primary-nav li.open > .sub-menu { display: block; }

  /* Overlay */
  .nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 1099;
  }
  .nav-overlay.active { display: block; }

  /* Hero tweaks */
  .hero .art {
      padding: 6px;
      top: 25px!important;
      transform: rotate(0deg);
    }
}

/* Focus & hover accessibility */
.primary-nav a:focus, .primary-nav a:hover { outline: none; color: var(--brand); }
.menu-toggle:focus { outline: 2px solid rgba(255,255,255,.12); border-radius: 4px; }

            nav li {
                list-style: none;
                display: inline-flex;
                transition: 0.5s;
            }

            nav li:hover {
                color: #ff0000;
            }

            ul.small a {
                text-decoration: none;
                list-style: none;
                color: #888888;
                transition: 0.5s;
            }

            ul.small a:hover {
                color: #ff0000;
            }

            .menu-item a {
                color: var(--mitem);
            }

            div.hero-image {
                display: block;
                width: 100%;
                background-image: url(/wp-content/uploads/2025/09/Screenshot-2025-09-15-at-19.29.09.png);
                background-size: cover;
                background-position: center;
                overflow: hidden;
                height: 100%;
                border-radius: 10px;
                box-shadow: 0 10px 20px #000000;
            }

            button.sow-submit {
                border-radius: 12px!important;
                font-weight: 600!important;
                background: linear-gradient(180deg, var(--brand) 0%, #990000 100%)!important;
                color: #ffffff!important;
                border: 1px solid #cc0000!important;
                min-width: 200px;
                font-size: 1rem
            }

            .so-widget-sow-contact-form-default-0ad113089bf3-38 .sow-contact-form {
                padding: 10px;
                border: #3c434a solid 1px!important;
                background-color: #3c434a!important;
                border-radius: 12px;
                padding: 24px;
            }

            .sow-form-field .sow-text-field {
                border: 1px #50575e solid!important;
            }

            .sow-field-container textarea {
                border-color: #ff0000 !important;
            }

            header {
                background-color: rgb(230 231 232)!important;
            }

            .site-logo {
                max-width: 240px;
            }

            .flogo {
                max-width: 280px;
            }

            .cta {
                display: inline-block;
                place-items: center;
                padding: 10px 16px;
                border-radius: 12px;
                font-weight: 600;
                background: linear-gradient(180deg, var(--brand) 0%, #990000 100%);
                color: #ffffff;
                border: 1px solid #cc0000;
                min-width: 150px;
                text-align: center;
            }

            .cta.secondary {
                background: linear-gradient(180deg, var(--brand-2), #cc0000);
                border-color: #e60000;
            }

            .cta.ghost {
                background: transparent;
                border: 1px solid var(--line);
                color: var(--ink)
            }

            @media(max-width: 768px) {
                .eyebrow {
                    display: inline-flex;
                    font-size: .85rem;
                    text-transform: uppercase;
                    letter-spacing: .6em;
                    color: var(--muted);
                    justify-content: space-between;
                }

                .bcv-honey {
                    position: absolute;
                    width: 73%;
                    height: 100%;
                    right: 0px;
                    overflow: hidden;
                    background-image: url(/wp-content/uploads/2025/10/hex-pattern.png);
                    background-repeat: no-repeat;
                    background-size: 500px;
                    z-index: -1;
                }
            }

            @media(min-width: 769px) {
                .bcv-honey {
                    position: absolute;
                    width: 44%;
                    height: 100%;
                    right: 0px;
                    overflow: hidden;
                    background-image: url(/wp-content/uploads/2025/10/hex-pattern.png);
                    background-repeat: no-repeat;
                    z-index: -1;
                }

                .eyebrow {
                    font-size: .85rem;
                    text-transform: uppercase;
                    letter-spacing: 1.2em;
                    color: var(--muted);
                }
            }

            .art {
                transform: rotate(9deg);
                padding: 0px!important;
            }

            .hero .video {
                aspect-ratio: 4 / 3;
            }

            .hero .art {
                top: -25px;
                border-radius: 0px;
            }

            div.hero-image {
                border-radius: 0px;
            }

            .separator {
                display: block;
                height: 2px;
                width: 100px;
                background-color: #e6e7e8;
                margin: 30px 0px;
            }

            .cta.ghost {
                background: transparent;
                border: 1px solid var(--line);
                color: var(--ink);
            }

            .cta.ghost {
                background: transparent;
                border: 1px solid #e6e7e8;
                color: var(--ink);
            }

            .cta {
                display: inline-block;
                place-items: center;
                padding: 10px 16px;
                border-radius: 12px;
                font-weight: 600;
                background: linear-gradient(180deg, var(--brand) 0%, #990000 100%);
                color: #ffffff;
                border: 1px solid #cc0000;
            }

            .kpi .dot {
                width: 6px;
                height: 29px;
                border-radius: 999px;
                background: var(--brand);
            }

            .container {
                display: inline-flex;
                width: 100%;
            }

            .col-3 {
                max-width: 33%;
                float: left;
                padding: 0px;
                padding: 0px 126px 0px 0px;
            }

            .cta {
                color: #ffffff!important;
            }

            .paragraph {
                display: inline-block;
                font-size: 1.2rem;
                line-height: 1.3;
                margin-bottom: 16px;
                text-align: justify;
                letter-spacing: 1.3px;
            }

            .badge {
                display: block;
                position: relative;
                width: 25px;
                height: 25px;
                padding: 10px 16px;
                border-radius: 12px;
                font-weight: 600;
                background: linear-gradient(180deg, var(--brand) 0%, #990000 100%);
                color: #ffffff;
                border: 1px solid #cc0000;
            }

            .red {
                color: #ff0000;
            }

            .siteorigin-panels-stretch {
                background-color: #e6e7e8
            }

            .widget-title {
                font-size: 1.5rem;
                position: relative;
                margin-bottom: 0.75rem;
            }

            .widget-title::after {
                content: '';
                display: block;
                width: 100px;
                height: 3px;
                background-color: #2f4f50;
                margin-top: 1.5rem;
            }

            .bcv-big {
                display: inline-block;
                font-size: 2rem;
                color: var(--brand);
            }

            footer {
                margin-top: 30px;
                border-top: 1px solid var(--brand) ;
                box-shadow: 0 0 20px var(--muted);
            }

            .so-widget-sow-contact-form-default-0ad113089bf3-38 .sow-contact-form {
                border: #2f4f50 solid 1px !important;
                background-color: #2f4f5000 !important;
            }

            input, textarea, select {
                background-color: var(--in)!important;
                color: var(--tx);
            }

            .sow-testimonial {
                border-radius: var(--radius);
                padding: 1px;
            }

            .sow-testimonial-user {
                position: relative;
            }

            .sow-testimonial-user::before {
                content: "";
                position: absolute;
                left: -1px;
                /* Align to the left */
                bottom: -25px;
                width: 110px;
                /* Match background-size for clarity */
                height: 110px;
                /* Match background-size for clarity */
                background-image: url(/wp-content/uploads/2025/10/bcv-honey-white-1-e1761322936721.png);
                background-repeat: no-repeat;
                background-size: 110px;
                opacity: 0.25;
                z-index: 0;
            }