/*
Theme Name: WB Group America
Theme URI: https://wbgroupamerica.com
Author: WB Group America LLC
Author URI: https://wbgroupamerica.com
Description: WB Group America — Official website theme. Edit homepage content via Pages in the WordPress admin.
Version: 1.0
License: Proprietary
Text Domain: wbgroupamerica
*/

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
:root{
  --wb-deep:#002266;--wb-navy:#003380;--wb-blue:#0050b3;
  --wb-mid:#0066cc;--wb-light:#3388dd;--wb-tint:#e8f0fb;
  --wb-grey:#f2f4f7;--wb-rule:#d4dbe8;
  --wb-text:#111827;--wb-body:#374151;--wb-muted:#6b7280;
  --white:#ffffff;
}
body{font-family:'Roboto Condensed',sans-serif;font-weight:300;background:var(--white);color:var(--wb-text);line-height:1.6;overflow-x:hidden}

/* NAV */
.site-nav{position:fixed;top:0;left:0;right:0;z-index:200;background:var(--white);border-bottom:3px solid var(--wb-blue);height:60px;display:flex;align-items:stretch;justify-content:space-between;padding:0 48px;transition:box-shadow .25s}
.site-nav.scrolled{box-shadow:0 2px 12px rgba(0,51,128,.14)}
.nav-brand{display:flex;align-items:center;text-decoration:none}
.nav-brand-mark{width:34px;height:34px;background:linear-gradient(135deg,var(--wb-blue) 0%,var(--wb-deep) 100%);clip-path:polygon(20% 0%,100% 0%,80% 100%,0% 100%);flex-shrink:0}
.nav-brand-top{font-size:15px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--wb-deep);line-height:1.1}
.nav-brand-bottom{font-size:9px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--wb-blue)}
.nav-menu{display:flex;align-items:stretch}
.nav-item{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--wb-body);text-decoration:none;padding:0 18px;display:flex;align-items:center;border-bottom:3px solid transparent;margin-bottom:-3px;transition:color .2s,border-color .2s}
.nav-item:hover{color:var(--wb-blue);border-color:var(--wb-blue)}
.nav-cta{background:var(--wb-blue);color:var(--white) !important;border-bottom:3px solid var(--wb-deep) !important;margin-left:8px;padding:0 22px;transition:background .2s !important}
.nav-cta:hover{background:var(--wb-deep) !important}

/* HERO */
.hero{margin-top:60px;background:var(--wb-deep);position:relative;overflow:hidden;min-height:600px;display:flex;align-items:flex-end;padding:80px 48px 70px}
.hero-shape-1{position:absolute;top:0;right:0;width:55%;height:100%;background:linear-gradient(160deg,#003a99 0%,var(--wb-deep) 60%);clip-path:polygon(18% 0%,100% 0%,100% 100%,0% 100%)}
.hero-shape-2{position:absolute;top:0;right:0;width:28%;height:100%;background:linear-gradient(160deg,rgba(0,80,179,.5) 0%,transparent 80%);clip-path:polygon(28% 0%,100% 0%,100% 100%,0% 100%)}
.hero-rule-bottom{position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(to right,var(--wb-mid),var(--wb-light),transparent)}
.hero-content{position:relative;z-index:1;max-width:660px}
.hero-eyebrow{font-size:10px;font-weight:700;letter-spacing:.4em;text-transform:uppercase;color:var(--wb-light);margin-bottom:20px;display:flex;align-items:center;gap:12px}
.hero-eyebrow::before{content:'';display:block;width:28px;height:2px;background:var(--wb-mid)}
h1.hero-h{font-size:clamp(36px,5.5vw,68px);font-weight:700;line-height:1.0;color:var(--white);letter-spacing:-.01em;margin-bottom:20px}
h1.hero-h .light{font-weight:300}
.hero-body{font-size:14px;font-weight:300;color:rgba(255,255,255,.62);line-height:1.75;max-width:520px;margin-bottom:40px}
.hero-stats{display:flex;gap:0;border-top:1px solid rgba(255,255,255,.12);padding-top:28px}
.hero-stat{flex:1;padding:0 24px;border-right:1px solid rgba(255,255,255,.1)}
.hero-stat:first-child{padding-left:0}
.hero-stat:last-child{border-right:none}
.hstat-val{font-size:clamp(18px,2.5vw,28px);font-weight:700;color:var(--white);line-height:1}
.hstat-lbl{font-size:9px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.38);margin-top:5px}

/* BLUE BAND */
.blue-band{background:var(--wb-blue);padding:16px 48px;display:flex;align-items:center;gap:40px;overflow-x:auto}
.band-item{display:flex;align-items:center;gap:9px;white-space:nowrap;flex-shrink:0}
.band-dot{width:5px;height:5px;background:rgba(255,255,255,.45);clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%)}
.band-text{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.82)}

/* SHARED SECTION STYLES */
.sec{padding:80px 48px}
.sec-label{font-size:10px;font-weight:700;letter-spacing:.35em;text-transform:uppercase;color:var(--wb-blue);margin-bottom:14px;display:flex;align-items:center;gap:12px}
.sec-label::before{content:'';width:20px;height:2px;background:var(--wb-blue);display:block}
.sec-h{font-size:clamp(24px,3vw,38px);font-weight:700;color:var(--wb-deep);line-height:1.05;letter-spacing:-.01em;margin-bottom:18px}
.sec-body{font-size:14px;font-weight:300;color:var(--wb-body);line-height:1.8;margin-bottom:14px}

/* ABOUT */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.cred-stack{display:flex;flex-direction:column;gap:1px}
.cred-item{background:var(--wb-grey);border-left:4px solid var(--wb-blue);padding:16px 20px;transition:background .2s,border-color .2s}
.cred-item:hover{background:var(--wb-tint);border-color:var(--wb-deep)}
.cred-name{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--wb-deep);margin-bottom:3px}
.cred-desc{font-size:12px;font-weight:300;color:var(--wb-body)}

/* TECH */
.tech-section{background:var(--wb-grey);border-top:1px solid var(--wb-rule);border-bottom:1px solid var(--wb-rule)}
.tech-intro{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:36px}
.tech-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--wb-rule);border:1px solid var(--wb-rule)}
.tech-card{background:var(--white);padding:26px 22px;position:relative;overflow:hidden;transition:background .2s}
.tech-card:hover{background:var(--wb-tint)}
.tech-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(to right,var(--wb-blue),var(--wb-mid))}
.tech-cat{font-size:9px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--wb-blue);margin-bottom:10px}
.tech-name{font-size:15px;font-weight:700;color:var(--wb-deep);margin-bottom:9px;line-height:1.1}
.tech-desc{font-size:12px;font-weight:300;color:var(--wb-body);line-height:1.7;margin-bottom:12px}
.tech-badge{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--wb-blue);border:1px solid var(--wb-rule);padding:3px 8px;background:var(--white)}

/* GROUP */
.group-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.group-stats{display:flex;gap:0;margin-top:32px;padding-top:28px;border-top:2px solid var(--wb-rule)}
.group-stat{flex:1;padding-right:20px;margin-right:20px;border-right:1px solid var(--wb-rule)}
.group-stat:last-child{border-right:none;margin-right:0}
.gstat-val{font-size:30px;font-weight:700;color:var(--wb-deep);line-height:1}
.gstat-lbl{font-size:9px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--wb-muted);margin-top:5px}
.group-link{display:inline-flex;align-items:center;gap:7px;margin-top:24px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--wb-blue);text-decoration:none;border-bottom:1px solid var(--wb-rule);padding-bottom:2px;transition:color .2s,border-color .2s}
.group-link:hover{color:var(--wb-deep);border-color:var(--wb-deep)}
.sub-list{margin-top:16px}
.sub-item{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--wb-rule)}
.sub-item:first-child{border-top:1px solid var(--wb-rule)}
.sub-mark{width:20px;height:20px;background:linear-gradient(135deg,var(--wb-blue),var(--wb-deep));clip-path:polygon(20% 0%,100% 0%,80% 100%,0% 100%);flex-shrink:0}
.sub-name{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--wb-deep)}
.sub-desc{font-size:11px;font-weight:300;color:var(--wb-muted);margin-left:auto;letter-spacing:.02em}

/* CONTACT */
.contact-section{background:var(--wb-grey);border-top:3px solid var(--wb-blue)}
.contact-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:80px;align-items:start}
.contact-address{margin-top:24px;font-size:13px;font-weight:300;color:var(--wb-body);line-height:1.85}
.contact-address strong{font-weight:700;font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--wb-blue);display:block;margin-top:16px;margin-bottom:3px}
.contact-address strong:first-child{margin-top:0}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.form-group{margin-bottom:10px}
.form-label{display:block;font-size:9px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--wb-muted);margin-bottom:4px}
.form-field{width:100%;background:var(--white);border:1px solid var(--wb-rule);padding:9px 11px;font-family:'Roboto Condensed',sans-serif;font-size:13px;font-weight:300;color:var(--wb-text);outline:none;border-radius:0;-webkit-appearance:none;transition:border-color .2s}
.form-field:focus{border-color:var(--wb-blue)}
.form-field::placeholder{color:#b0b8c8}
textarea.form-field{resize:vertical;min-height:84px}
.form-note{font-size:11px;font-weight:300;color:var(--wb-muted);line-height:1.6;margin-bottom:12px}
.form-btn{font-family:'Roboto Condensed',sans-serif;font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--white);background:var(--wb-blue);border:none;padding:11px 26px;cursor:pointer;transition:background .2s}
.form-btn:hover{background:var(--wb-deep)}

/* FOOTER */
.site-footer{background:var(--wb-deep);padding:22px 48px;display:flex;align-items:center;justify-content:space-between}
.footer-brand{display:flex;align-items:center;gap:10px}
.footer-mark{width:22px;height:22px;background:rgba(255,255,255,.2);clip-path:polygon(20% 0%,100% 0%,80% 100%,0% 100%)}
.footer-name{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.65)}
.footer-links{display:flex;gap:18px}
.footer-links a{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.4);text-decoration:none;transition:color .2s}
.footer-links a:hover{color:rgba(255,255,255,.75)}
.footer-copy{font-size:10px;color:rgba(255,255,255,.28);letter-spacing:.03em}

/* ── MOBILE NAV ─────────────────────────────────────────────────────── */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 4px;   /* larger touch target */
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--wb-deep);
  transition: opacity .2s, transform .2s;
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────── */

/* ---- 960px: tablet / small laptop ---- */
@media(max-width:960px){

  /* Nav */
  .site-nav { padding: 0 20px; }
  .nav-toggle { display: flex; }
  .nav-menu {
    display: none;
    position: fixed;
    inset: 60px 0 0 0;
    background: var(--white);
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 20px 24px;
    z-index: 199;
    border-top: 1px solid var(--wb-rule);
    gap: 0;
    overflow-y: auto;
  }
  .nav-menu.is-open { display: flex; }
  .nav-item {
    padding: 15px 0;
    border-bottom: 1px solid var(--wb-rule);
    border-right: none;
    width: 100%;
    font-size: 13px;
    margin-bottom: 0;
    min-height: 44px; /* WCAG touch target */
    display: flex;
    align-items: center;
  }
  .nav-cta {
    margin-left: 0;
    margin-top: 16px;
    padding: 13px 20px;
    width: 100%;
    justify-content: center;
  }

  /* Hero */
  .hero { padding: 64px 20px 54px; }
  .hero-stats { flex-wrap: wrap; gap: 20px; }
  .hero-stat { flex: 0 0 calc(50% - 10px); border-right: none; padding: 0; }

  /* Sections */
  .sec { padding: 56px 20px; }
  .about-grid,
  .tech-intro,
  .group-grid,
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }

  /* Technologies grid: 2 columns on tablet */
  .tech-grid { grid-template-columns: 1fr 1fr; }

  /* Blue band */
  .blue-band { padding: 12px 20px; gap: 24px; }

  /* Group stats: wrap at tablet */
  .group-stats { flex-wrap: wrap; gap: 24px; }
  .group-stat {
    flex: 0 0 calc(50% - 12px);
    border-right: none;
    margin-right: 0;
    padding-right: 0;
  }

  /* Sub-list: stack description below name on tablet */
  .sub-item { flex-wrap: wrap; gap: 4px; }
  .sub-desc { margin-left: 32px; flex-basis: 100%; }

  /* Contact form row: collapse to single column */
  .form-row { grid-template-columns: 1fr; gap: 0; }

  /* Footer */
  .site-footer {
    flex-direction: column;
    gap: 14px;
    text-align: center;
    padding: 20px;
  }
  .footer-links { flex-wrap: wrap; justify-content: center; }
}

/* ---- 540px: phones ---- */
@media(max-width:540px){

  /* Hero */
  h1.hero-h { font-size: 32px; }
  .hero { padding: 48px 16px 44px; min-height: 0; }
  .hero-stats { gap: 16px; }
  .hero-stat { flex: 0 0 calc(50% - 8px); }

  /* Sections */
  .sec { padding: 44px 16px; }

  /* Technologies: single column on phones */
  .tech-grid { grid-template-columns: 1fr; }

  /* Group stats: single column */
  .group-stats { flex-direction: column; gap: 20px; }
  .group-stat { flex: 0 0 auto; }

  /* Nav */
  .site-nav { padding: 0 16px; }
  .blue-band { padding: 10px 16px; gap: 20px; }

  /* Footer */
  .site-footer { padding: 20px 16px; }
}

/* ---- 380px: very small phones ---- */
@media(max-width:380px){
  h1.hero-h { font-size: 28px; }
  .hero-stat { flex: 0 0 100%; }
  .hstat-val { font-size: 22px; }
}