/*
Theme Name: GroupsPro
Theme URI: https://groupspro.com.au
Author: GroupsPro
Author URI: https://groupspro.com.au
Description: A dark construction and trades services WordPress theme with yellow accents. Designed for building, electrical, plumbing and trade service businesses.
Version: 1.0.0
Requires at least: 5.9
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: groupspro
Tags: dark, construction, trades, business, one-page, custom-colors, custom-logo, custom-menu, featured-images, footer-widgets, threaded-comments
*/

/* =========================================================
   CSS CUSTOM PROPERTIES
   ========================================================= */
:root {
    --color-black:      #0a0a0a;
    --color-dark:       #111111;
    --color-dark-2:     #1a1a1a;
    --color-dark-3:     #222222;
    --color-yellow:     #f5c518;
    --color-yellow-dk:  #d4a80a;
    --color-white:      #ffffff;
    --color-gray:       #888888;
    --color-gray-lt:    #cccccc;
    --color-error:      #ff4444;
    --color-success:    #34c759;

    --font-heading: 'Barlow Condensed', sans-serif;
    --font-body:    'Open Sans', sans-serif;

    --container-max: 1280px;
    --container-pad: clamp(1.25rem, 4vw, 3rem);

    --radius:     4px;
    --radius-lg:  8px;
    --transition: all 0.3s ease;
    --shadow:     0 4px 24px rgba(0, 0, 0, 0.5);
}

/* =========================================================
   RESET & BASE
   ========================================================= */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    background-color: var(--color-black);
    color:            var(--color-white);
    font-family:      var(--font-body);
    font-size:        1rem;
    line-height:      1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a {
    color:           var(--color-yellow);
    text-decoration: none;
    transition:      var(--transition);
}

a:hover { color: var(--color-yellow-dk); }

ul, ol { list-style: none; }

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

h1, h2, h3, h4, h5, h6 {
    font-family:    var(--font-heading);
    font-weight:    800;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height:    1.1;
}

/* =========================================================
   LAYOUT UTILITIES
   ========================================================= */
.container {
    max-width: var(--container-max);
    margin:    0 auto;
    padding:   0 var(--container-pad);
}

.section-pad {
    padding: 6rem 0;
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             0.5rem;
    padding:         0.85rem 2rem;
    font-family:     var(--font-heading);
    font-size:       0.9rem;
    font-weight:     700;
    text-transform:  uppercase;
    letter-spacing:  2px;
    border-radius:   var(--radius);
    border:          2px solid transparent;
    cursor:          pointer;
    transition:      var(--transition);
    white-space:     nowrap;
}

.btn-primary {
    background:   var(--color-yellow);
    color:        var(--color-black);
    border-color: var(--color-yellow);
}
.btn-primary:hover {
    background:   var(--color-yellow-dk);
    border-color: var(--color-yellow-dk);
    color:        var(--color-black);
}

.btn-outline {
    background:   transparent;
    color:        var(--color-white);
    border-color: rgba(255,255,255,0.5);
}
.btn-outline:hover {
    background:   var(--color-white);
    color:        var(--color-black);
    border-color: var(--color-white);
}

.btn-outline-yellow {
    background:   transparent;
    color:        var(--color-yellow);
    border-color: var(--color-yellow);
}
.btn-outline-yellow:hover {
    background: var(--color-yellow);
    color:      var(--color-black);
}

/* =========================================================
   TOP BAR
   ========================================================= */
.site-topbar {
    background:    var(--color-dark);
    border-bottom: 1px solid rgba(245,197,24,0.1);
    padding:       0.5rem 0;
    font-size:     0.78rem;
    color:         var(--color-gray);
}

.topbar-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
    max-width:       var(--container-max);
    margin:          0 auto;
    padding:         0 var(--container-pad);
}

.topbar-contact {
    display:     flex;
    align-items: center;
    gap:         1.5rem;
}

.topbar-contact a {
    color:       var(--color-gray);
    font-size:   0.78rem;
    display:     flex;
    align-items: center;
    gap:         0.4rem;
}
.topbar-contact a:hover { color: var(--color-yellow); }
.topbar-contact i       { color: var(--color-yellow); }

.topbar-social {
    display:     flex;
    align-items: center;
    gap:         0.75rem;
}
.topbar-social a {
    color:    var(--color-gray);
    font-size:0.8rem;
}
.topbar-social a:hover { color: var(--color-yellow); }

/* =========================================================
   HEADER / NAVIGATION
   ========================================================= */
.site-header {
    position:          sticky;
    top:               0;
    z-index:           1000;
    background:        rgba(10,10,10,0.97);
    backdrop-filter:   blur(10px);
    border-bottom:     1px solid rgba(245,197,24,0.08);
    transition:        var(--transition);
}

.site-header.is-scrolled {
    box-shadow: 0 2px 24px rgba(0,0,0,0.6);
    background: rgba(10,10,10,0.99);
}

.nav-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             2rem;
    max-width:       var(--container-max);
    margin:          0 auto;
    padding:         0 var(--container-pad);
    height:          72px;
}

/* Logo */
.site-logo {
    font-family:    var(--font-heading);
    font-size:      1.7rem;
    font-weight:    900;
    color:          var(--color-white);
    text-transform: uppercase;
    letter-spacing: 3px;
    line-height:    1;
    flex-shrink:    0;
}
.site-logo:hover        { color: var(--color-white); }
.site-logo span         { color: var(--color-yellow); }
.site-logo img          { max-height: 52px; width: auto; }
.custom-logo-link { display: block; }

/* Primary nav */
.primary-nav { flex: 1; display: flex; justify-content: center; }

.primary-nav ul {
    display:     flex;
    align-items: center;
    gap:         2rem;
}

.primary-nav a {
    font-family:    var(--font-heading);
    font-size:      0.82rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color:          var(--color-white);
    padding:        0.25rem 0;
    border-bottom:  2px solid transparent;
}
.primary-nav a:hover,
.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a {
    color:              var(--color-yellow);
    border-bottom-color:var(--color-yellow);
}

/* Nav CTA button */
.nav-cta {
    flex-shrink: 0;
}

/* Mobile toggle */
.mobile-menu-toggle {
    display:        none;
    flex-direction: column;
    justify-content:center;
    gap:            5px;
    background:     none;
    border:         none;
    cursor:         pointer;
    padding:        0.4rem;
    flex-shrink:    0;
}
.mobile-menu-toggle span {
    display:    block;
    width:      24px;
    height:     2px;
    background: var(--color-white);
    transition: var(--transition);
    transform-origin: center;
}
.mobile-menu-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-toggle.is-active span:nth-child(2) { opacity: 0; }
.mobile-menu-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =========================================================
   HERO SECTION
   ========================================================= */
.hero {
    min-height: calc(100vh - 72px);
    background: var(--color-black);
    position:   relative;
    overflow:   hidden;
    display:    flex;
    align-items:center;
}

.hero::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: radial-gradient(ellipse at 68% 50%, rgba(245,197,24,0.06) 0%, transparent 55%),
                radial-gradient(ellipse at 5% 85%, rgba(245,197,24,0.03) 0%, transparent 40%);
    pointer-events: none;
}

.hero-inner {
    position:             relative;
    z-index:              1;
    max-width:            var(--container-max);
    width:                100%;
    margin:               0 auto;
    padding:              4rem var(--container-pad);
    display:              grid;
    grid-template-columns:1fr 1fr;
    gap:                  4rem;
    align-items:          center;
}

.hero-eyebrow {
    display:        block;
    font-family:    var(--font-heading);
    font-size:      0.75rem;
    font-weight:    700;
    letter-spacing: 5px;
    color:          var(--color-yellow);
    text-transform: uppercase;
    margin-bottom:  1.5rem;
}

.hero-title {
    font-size:      clamp(3.2rem, 7vw, 6rem);
    font-weight:    900;
    text-transform: uppercase;
    line-height:    1;
    letter-spacing: -1px;
    margin-bottom:  1.5rem;
}
.hero-title .highlight { color: var(--color-yellow); }

.hero-subtitle {
    font-size:    0.95rem;
    color:        var(--color-gray-lt);
    line-height:  1.75;
    margin-bottom:2.5rem;
    max-width:    480px;
}

.hero-ctas {
    display:      flex;
    gap:          1rem;
    flex-wrap:    wrap;
    margin-bottom:3.5rem;
}

/* Stats bar (bottom of hero) */
.hero-stats {
    display:    flex;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top:2rem;
    margin-top: auto;
}

.stat-item {
    flex:         1;
    padding-right:2rem;
    border-right: 1px solid rgba(255,255,255,0.08);
}
.stat-item:last-child  { border-right:none; padding-right:0; }
.stat-item + .stat-item { padding-left:2rem; }

.stat-number {
    display:     block;
    font-family: var(--font-heading);
    font-size:   2.6rem;
    font-weight: 900;
    color:       var(--color-yellow);
    line-height: 1;
}
.stat-label {
    font-size:      0.72rem;
    color:          var(--color-gray);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Radar / Circular Graphic */
.hero-graphic {
    display:         flex;
    align-items:     center;
    justify-content: center;
    position:        relative;
}

.radar-wrap {
    position: relative;
    width:    380px;
    height:   380px;
}

.radar-svg {
    width:     100%;
    height:    100%;
    animation: radarSpin 40s linear infinite;
}
@keyframes radarSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.radar-overlay {
    position:  absolute;
    top:       50%;
    left:      50%;
    transform: translate(-50%, -50%);
    text-align:center;
    z-index:   2;
}
.radar-overlay .big-num {
    display:     block;
    font-family: var(--font-heading);
    font-size:   3.5rem;
    font-weight: 900;
    color:       var(--color-yellow);
    line-height: 1;
}
.radar-overlay .sub-text {
    font-family:    var(--font-heading);
    font-size:      0.65rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 3px;
    color:          var(--color-gray);
}

/* Badge chips on the radar */
.radar-badge {
    position:      absolute;
    background:    var(--color-dark-2);
    border:        1px solid rgba(245,197,24,0.25);
    border-radius: 4px;
    padding:       0.5rem 0.9rem;
    display:       flex;
    align-items:   center;
    gap:           0.5rem;
    font-family:   var(--font-heading);
    font-size:     0.72rem;
    font-weight:   700;
    text-transform:uppercase;
    letter-spacing:1px;
    color:         var(--color-white);
    white-space:   nowrap;
}
.radar-badge i          { color: var(--color-yellow); }
.radar-badge.badge--top { top:0; right:5%; }
.radar-badge.badge--rt  { right:-10%; top:50%; transform:translateY(-50%); }
.radar-badge.badge--bot { bottom:5%; left:5%; }

/* =========================================================
   SERVICES SECTION
   ========================================================= */
.services {
    background: var(--color-dark);
    padding:    6rem 0;
}

.section-header {
    text-align:    center;
    margin-bottom: 4rem;
}
.section-header .section-title { margin-bottom: 1rem; }
.section-header p {
    color:      var(--color-gray);
    max-width:  600px;
    margin:     0 auto;
    font-size:  0.95rem;
    line-height:1.7;
}
.section-title {
    font-size:      clamp(1.8rem, 4vw, 2.8rem);
    font-weight:    800;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height:    1.1;
}
.section-title span { color: var(--color-yellow); }

.services-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1.5rem;
}

.service-card {
    background:    var(--color-dark-2);
    border:        1px solid rgba(255,255,255,0.05);
    border-radius: var(--radius-lg);
    padding:       2.5rem 2rem;
    transition:    var(--transition);
    position:      relative;
    overflow:      hidden;
}
.service-card::after {
    content:     '';
    position:    absolute;
    bottom:      0;
    left:        0;
    right:       0;
    height:      3px;
    background:  var(--color-yellow);
    transform:   scaleX(0);
    transform-origin: left;
    transition:  var(--transition);
}
.service-card:hover {
    border-color: rgba(245,197,24,0.25);
    transform:    translateY(-5px);
    box-shadow:   var(--shadow);
}
.service-card:hover::after { transform: scaleX(1); }

.service-icon {
    width:           56px;
    height:          56px;
    background:      rgba(245,197,24,0.08);
    border:          1px solid rgba(245,197,24,0.25);
    border-radius:   var(--radius);
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin-bottom:   1.5rem;
    transition:      var(--transition);
}
.service-card:hover .service-icon {
    background: rgba(245,197,24,0.15);
    border-color: rgba(245,197,24,0.5);
}
.service-icon i {
    font-size: 1.5rem;
    color:     var(--color-yellow);
}

.service-card h3 {
    font-size:     1.25rem;
    font-weight:   700;
    margin-bottom: 0.75rem;
    color:         var(--color-white);
    letter-spacing:1px;
}
.service-card p {
    font-size:    0.875rem;
    color:        var(--color-gray);
    line-height:  1.7;
    margin-bottom:1.5rem;
}
.service-link {
    font-family:    var(--font-heading);
    font-size:      0.78rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color:          var(--color-yellow);
    display:        inline-flex;
    align-items:    center;
    gap:            0.4rem;
}
.service-link i { transition: var(--transition); }
.service-card:hover .service-link i { transform: translateX(4px); }

/* =========================================================
   RESULTS / WHY CHOOSE US SECTION
   ========================================================= */
.results {
    background: var(--color-black);
    padding:    6rem 0;
    overflow:   hidden;
}

.results-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   5rem;
    align-items:           center;
}

.section-eyebrow {
    display:        block;
    font-family:    var(--font-heading);
    font-size:      0.72rem;
    font-weight:    700;
    letter-spacing: 5px;
    color:          var(--color-yellow);
    text-transform: uppercase;
    margin-bottom:  0.4rem;
}

.results-left .section-title { margin-bottom: 2rem; }

.results-list { margin-bottom: 2.5rem; }
.results-list li {
    display:       flex;
    align-items:   flex-start;
    gap:           1rem;
    padding:       0.8rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size:     0.9rem;
    color:         var(--color-gray-lt);
}
.results-list li:last-child { border-bottom: none; }
.results-list li .check-icon {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           22px;
    height:          22px;
    min-width:       22px;
    background:      var(--color-yellow);
    color:           var(--color-black);
    font-size:       0.7rem;
    font-weight:     700;
    border-radius:   50%;
    margin-top:      2px;
}

/* Right column – stats card */
.results-right { position: relative; }

.results-ghost-number {
    position:      absolute;
    top:           -4rem;
    left:          -2rem;
    font-family:   var(--font-heading);
    font-size:     clamp(9rem, 18vw, 14rem);
    font-weight:   900;
    color:         var(--color-yellow);
    line-height:   1;
    opacity:       0.06;
    user-select:   none;
    pointer-events:none;
    z-index:       0;
}

.results-card {
    position:      relative;
    z-index:       1;
    background:    var(--color-dark);
    border:        1px solid rgba(255,255,255,0.05);
    border-radius: var(--radius-lg);
    padding:       3rem;
}

.results-card-title {
    font-size:      0.72rem;
    letter-spacing: 5px;
    color:          var(--color-yellow);
    margin-bottom:  0.5rem;
    display:        block;
    font-family:    var(--font-heading);
    font-weight:    700;
    text-transform: uppercase;
}
.results-card h3 {
    font-size:     1.6rem;
    margin-bottom: 2.5rem;
}

.results-stat-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   1rem;
}
.results-stat {
    padding:       1.5rem 1rem;
    background:    rgba(245,197,24,0.04);
    border:        1px solid rgba(245,197,24,0.12);
    border-radius: var(--radius);
    text-align:    center;
}
.results-stat .num {
    display:     block;
    font-family: var(--font-heading);
    font-size:   2.2rem;
    font-weight: 900;
    color:       var(--color-yellow);
    line-height: 1;
    margin-bottom:0.3rem;
}
.results-stat .lbl {
    font-size:      0.72rem;
    color:          var(--color-gray);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* =========================================================
   QUOTE / CONTACT SECTION
   ========================================================= */
.quote-section {
    background: var(--color-dark);
    padding:    6rem 0;
}

.quote-grid {
    display:               grid;
    grid-template-columns: 1fr 1.3fr;
    gap:                   5rem;
    align-items:           flex-start;
}

.quote-left .section-title { margin-bottom: 1.5rem; }
.quote-left p {
    color:       var(--color-gray-lt);
    font-size:   0.95rem;
    line-height: 1.75;
    margin-bottom:2rem;
}

.contact-items { margin-top: 2rem; }
.contact-item {
    display:       flex;
    align-items:   center;
    gap:           1rem;
    padding:       0.9rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size:     0.9rem;
    color:         var(--color-gray-lt);
}
.contact-item:last-child { border-bottom: none; }
.contact-item .icon-wrap {
    width:           40px;
    height:          40px;
    min-width:       40px;
    background:      rgba(245,197,24,0.08);
    border:          1px solid rgba(245,197,24,0.2);
    border-radius:   var(--radius);
    display:         flex;
    align-items:     center;
    justify-content: center;
}
.contact-item i { color: var(--color-yellow); }

/* ---- Form Card ---- */
.quote-form-card {
    background:    var(--color-dark-2);
    border:        1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius-lg);
    padding:       2.5rem;
}
.quote-form-card h3 {
    font-size:     1.4rem;
    margin-bottom: 2rem;
    padding-bottom:1rem;
    border-bottom: 2px solid var(--color-yellow);
}

/* ---- Form Shared Styles (works with CF7 + WPForms + fallback) ---- */
.quote-form,
.wpcf7-form,
.wpforms-form { width: 100%; }

.form-group,
.wpcf7-form .form-group,
.wpforms-field { margin-bottom: 1.1rem; }

.form-group label,
.wpcf7-form label,
.wpforms-form label,
.wpforms-field-label {
    display:        block;
    font-family:    var(--font-heading);
    font-size:      0.72rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color:          var(--color-gray-lt);
    margin-bottom:  0.45rem;
}

.required { color: var(--color-yellow); }

.form-group input,
.form-group select,
.form-group textarea,
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="number"],
.wpcf7-form select,
.wpcf7-form textarea,
.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form input[type="tel"],
.wpforms-form select,
.wpforms-form textarea {
    width:        100%;
    background:   var(--color-dark-3);
    border:       1px solid rgba(255,255,255,0.08);
    border-radius:var(--radius);
    color:        var(--color-white);
    font-family:  var(--font-body);
    font-size:    0.9rem;
    padding:      0.8rem 1rem;
    transition:   var(--transition);
    appearance:   none;
    -webkit-appearance: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus,
.wpforms-form input:focus,
.wpforms-form select:focus,
.wpforms-form textarea:focus {
    outline:    none;
    border-color:var(--color-yellow);
    box-shadow: 0 0 0 3px rgba(245,197,24,0.1);
}

/* Custom select arrow */
.form-group select,
.wpcf7-form select,
.wpforms-form select {
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23f5c518' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 1rem center;
    padding-right:       2.5rem;
    cursor:              pointer;
}
.form-group select option,
.wpcf7-form select option,
.wpforms-form select option {
    background: var(--color-dark-3);
    color:      var(--color-white);
}

.form-group textarea,
.wpcf7-form textarea,
.wpforms-form textarea {
    min-height: 130px;
    resize:     vertical;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:     1rem;
}

/* Placeholders */
.form-group input::placeholder,
.form-group textarea::placeholder,
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder,
.wpforms-form input::placeholder,
.wpforms-form textarea::placeholder { color: rgba(255,255,255,0.22); }

/* Submit Button */
.btn-submit,
.wpcf7-form input[type="submit"],
.wpcf7-submit,
.wpforms-submit {
    width:          100%    !important;
    background:     var(--color-yellow) !important;
    color:          var(--color-black)  !important;
    border:         none    !important;
    border-radius:  var(--radius)       !important;
    padding:        1rem 2rem           !important;
    font-family:    var(--font-heading) !important;
    font-size:      1rem    !important;
    font-weight:    700     !important;
    text-transform: uppercase           !important;
    letter-spacing: 2px     !important;
    cursor:         pointer  !important;
    transition:     var(--transition)   !important;
    margin-top:     0.75rem !important;
}
.btn-submit:hover,
.wpcf7-form input[type="submit"]:hover,
.wpcf7-submit:hover,
.wpforms-submit:hover {
    background: var(--color-yellow-dk) !important;
}

/* CF7 feedback messages */
.wpcf7-not-valid-tip {
    color:     var(--color-error);
    font-size: 0.78rem;
    margin-top:0.3rem;
    display:   block;
}
.wpcf7-response-output {
    margin-top:   1rem;
    padding:      0.75rem 1rem;
    border-radius:var(--radius);
    font-size:    0.875rem;
    border:       1px solid;
}
.wpcf7-mail-sent-ok {
    background:   rgba(52,199,89,0.08);
    border-color: rgba(52,199,89,0.3);
    color:        var(--color-success);
}
.wpcf7-validation-errors, .wpcf7-acceptance-missing {
    background:   rgba(255,68,68,0.08);
    border-color: rgba(255,68,68,0.3);
    color:        var(--color-error);
}

/* WPForms confirmation */
.wpforms-confirmation-container-full {
    padding:      1rem;
    background:   rgba(52,199,89,0.08);
    border:       1px solid rgba(52,199,89,0.3);
    color:        var(--color-success);
    border-radius:var(--radius);
}

/* Form success/error notice */
.form-notice {
    padding:      0.75rem 1rem;
    border-radius:var(--radius);
    margin-bottom:1rem;
    font-size:    0.875rem;
}
.form-notice--success {
    background:   rgba(52,199,89,0.08);
    border:       1px solid rgba(52,199,89,0.3);
    color:        var(--color-success);
}
.form-notice--error {
    background:   rgba(255,68,68,0.08);
    border:       1px solid rgba(255,68,68,0.3);
    color:        var(--color-error);
}

/* =========================================================
   SITE FOOTER
   ========================================================= */
.site-footer {
    background: #050505;
    border-top: 1px solid rgba(255,255,255,0.04);
    padding:    5rem 0 2rem;
}

.footer-grid {
    display:               grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap:                   3rem;
    margin-bottom:         4rem;
}

.footer-logo {
    font-family:    var(--font-heading);
    font-size:      1.6rem;
    font-weight:    900;
    color:          var(--color-white);
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom:  1rem;
    display:        inline-block;
}
.footer-logo span   { color: var(--color-yellow); }
.footer-logo img    { max-height: 48px; width: auto; }
.footer-logo:hover  { color: var(--color-white); }

.footer-brand p {
    font-size:    0.875rem;
    color:        var(--color-gray);
    line-height:  1.75;
    margin-bottom:1.75rem;
    max-width:    280px;
}

.footer-social {
    display: flex;
    gap:     0.6rem;
}
.social-link {
    width:           36px;
    height:          36px;
    background:      var(--color-dark-2);
    border:          1px solid rgba(255,255,255,0.08);
    border-radius:   var(--radius);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--color-gray);
    font-size:       0.85rem;
    transition:      var(--transition);
}
.social-link:hover {
    background:   var(--color-yellow);
    border-color: var(--color-yellow);
    color:        var(--color-black);
}

.footer-col h4 {
    font-family:    var(--font-heading);
    font-size:      0.78rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 3px;
    color:          var(--color-yellow);
    margin-bottom:  1.5rem;
}
.footer-col ul li { margin-bottom: 0.6rem; }
.footer-col ul li a {
    font-size:  0.875rem;
    color:      var(--color-gray);
    transition: var(--transition);
    display:    inline-flex;
    align-items:center;
    gap:        0.4rem;
}
.footer-col ul li a:hover {
    color:       var(--color-yellow);
    padding-left:4px;
}
.footer-col ul li i { color: var(--color-yellow); font-size: 0.8rem; }

.footer-bottom {
    border-top:      1px solid rgba(255,255,255,0.04);
    padding-top:     2rem;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             1rem;
}
.footer-bottom p, .footer-bottom a {
    font-size: 0.8rem;
    color:     var(--color-gray);
}
.footer-bottom a:hover { color: var(--color-yellow); }
.footer-bottom-links { display: flex; gap: 1.5rem; }

/* =========================================================
   INNER PAGES
   ========================================================= */
.page-hero {
    background: var(--color-dark);
    padding:    5rem 0 4rem;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.page-hero h1 {
    font-size:      clamp(2rem, 5vw, 3.5rem);
    margin-bottom:  1rem;
}
.page-hero .breadcrumb {
    font-size: 0.85rem;
    color:     var(--color-gray);
}
.page-hero .breadcrumb a { color: var(--color-yellow); }

.page-content {
    max-width:  var(--container-max);
    margin:     0 auto;
    padding:    4rem var(--container-pad);
}

/* Blog */
.posts-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   2rem;
}
.post-card {
    background:    var(--color-dark);
    border:        1px solid rgba(255,255,255,0.05);
    border-radius: var(--radius-lg);
    overflow:      hidden;
    transition:    var(--transition);
}
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.post-card .post-thumb { aspect-ratio: 16/9; overflow: hidden; background: var(--color-dark-2); }
.post-card .post-thumb img { width:100%; height:100%; object-fit:cover; transition: var(--transition); }
.post-card:hover .post-thumb img { transform: scale(1.04); }
.post-card-body { padding: 1.75rem; }
.post-card-body h3 { font-size:1.2rem; margin-bottom:0.75rem; }
.post-card-body h3 a { color: var(--color-white); }
.post-card-body h3 a:hover { color: var(--color-yellow); }
.post-meta { font-size:0.78rem; color:var(--color-gray); margin-bottom:0.75rem; }
.post-excerpt { font-size:0.875rem; color:var(--color-gray); line-height:1.7; }

/* Single post */
.single-content { max-width: 820px; margin: 0 auto; }
.single-content h2,
.single-content h3 { margin-bottom: 1rem; margin-top: 2rem; }
.single-content p  { color: var(--color-gray-lt); margin-bottom: 1.25rem; line-height:1.8; }

/* =========================================================
   WORDPRESS CORE REQUIRED
   ========================================================= */
.aligncenter { text-align: center; margin: 1.5rem auto; }
.alignright  { float: right; margin: 0 0 1em 2em; }
.alignleft   { float: left;  margin: 0 2em 1em 0; }
.wp-caption  { max-width: 100%; }

.screen-reader-text {
    clip:     rect(1px, 1px, 1px, 1px);
    height:   1px;
    overflow: hidden;
    position: absolute;
    width:    1px;
    word-wrap:normal !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
    .hero-inner { grid-template-columns: 1fr; gap: 3rem; }
    .hero-graphic { display: none; }
    .hero-title { font-size: clamp(3rem, 8vw, 5rem); }
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .results-grid { grid-template-columns: 1fr; gap: 3rem; }
    .results-ghost-number { display: none; }
    .quote-grid { grid-template-columns: 1fr; gap: 3rem; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .posts-grid  { grid-template-columns: repeat(2, 1fr); }
}

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

    .primary-nav {
        display:    none;
        position:   fixed;
        top:        72px;
        left:       0;
        right:      0;
        bottom:     0;
        background: rgba(10,10,10,0.98);
        padding:    2rem;
        flex-direction: column;
        align-items:    flex-start;
        justify-content:flex-start;
        overflow-y: auto;
        z-index:    999;
    }
    .primary-nav.is-open { display: flex; }
    .primary-nav ul { flex-direction: column; gap: 0; width: 100%; }
    .primary-nav a { padding: 1rem 0; font-size: 1.1rem; border-bottom: 1px solid rgba(255,255,255,0.05); display: block; }
    .mobile-menu-toggle { display: flex; }
    .nav-cta { display: none; }

    .services-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; text-align: center; }
    .footer-bottom-links { justify-content: center; }
    .posts-grid { grid-template-columns: 1fr; }
    .hero-stats { flex-direction: column; gap: 1.5rem; }
    .stat-item { border-right: none; padding: 0 0 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
    .stat-item:last-child { border-bottom: none; padding-bottom: 0; }
    .stat-item + .stat-item { padding-left: 0; }
}

@media (max-width: 480px) {
    .hero-ctas { flex-direction: column; }
    .hero-ctas .btn { text-align: center; width: 100%; }
    .results-stat-grid { grid-template-columns: 1fr; }
    .radar-badge { display: none; }
}