/* Expo Connect USA — layout cloned from tradeshowconnects.com, colors sampled from reference screenshots */

:root{
  --navy-heading:#002E68;
  --navy-pill:#09407C;
  --navy-btn-dark:#04374F;
  --drawer-bg:#222222;
  --hamburger-bg:#999999;
  --section-blue:#428BCA;
  --header-box-light:#D5E7F5;
  --yellow:#FFDE75;
  --gold:#D5C66B;
  --chart-orange:#D59229;
  --chart-teal:#29C2CF;
  --chart-lightblue:#09A7EC;
  --chart-purple:#555EAA;
  --text-gray:#5a5a5a;
  --white:#ffffff;
  --divider:#e2e2e2;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  color:#444;
  line-height:1.7;
  background:#fff;
}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
h1,h2,h3,h4{margin:0 0 20px;font-weight:700;}
p{margin:0 0 16px;color:var(--text-gray);font-size:15.5px;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

/* ---------- Hamburger + drawer nav ---------- */
.hamburger{
  position:fixed;top:20px;right:20px;z-index:200;
  width:46px;height:46px;background:var(--hamburger-bg);
  border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  outline:none;
}
.hamburger:focus-visible{outline:2px solid #fff;outline-offset:2px;}
.hamburger.is-hidden{visibility:hidden;opacity:0;pointer-events:none;}
.hamburger:hover{background:#808080;}
.hamburger span{display:block;width:22px;height:2px;background:#fff;position:relative;}
.hamburger span::before,.hamburger span::after{
  content:'';position:absolute;left:0;width:22px;height:2px;background:#fff;
}
.hamburger span::before{top:-7px;}
.hamburger span::after{top:7px;}

.drawer{
  position:fixed;top:0;right:-320px;width:300px;height:100%;
  background:var(--drawer-bg);z-index:199;transition:right .3s ease;
  padding:26px 0 0;
}
.drawer.open{right:0;}
.drawer-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:0 24px 22px;border-bottom:1px solid #3a3a3a;
}
.drawer-head span{color:#f2f2f2;font-weight:600;font-size:18px;letter-spacing:0.01em;}
.drawer-close{
  background:#fff;color:#111;width:30px;height:30px;border:none;font-size:16px;cursor:pointer;
}
.drawer ul{list-style:none;margin:0;padding:0;}
.drawer > ul > li > a{
  display:block;padding:18px 24px;color:#fff;font-size:16px;font-weight:600;
  border-bottom:1px solid #2c2c2c;letter-spacing:0.02em;
}
.drawer > ul > li > a:hover{color:var(--chart-lightblue);}
.drawer .submenu{background:#1b1b1b;}
.drawer .submenu li a{
  padding:12px 24px 12px 40px;color:#9a9a9a;font-size:13px;font-weight:400;border-bottom:1px solid #262626;
}
.drawer-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.35);z-index:198;
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.drawer-overlay.show{opacity:1;pointer-events:auto;}

/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:100vh;
  background-image:linear-gradient(rgba(10,60,100,0.55), rgba(10,60,100,0.55)), url('../images/home-banner.webp');
  background-size:cover;background-position:center;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
}
.hero-inner{position:relative;z-index:2;padding:40px 20px;}
.hero-badge{
  width:230px;height:230px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;margin:0 auto 30px;
  box-shadow:0 10px 40px rgba(0,0,0,0.25);
}
.hero-badge img{width:150px;}
.hero-find{
  display:inline-block;background:var(--navy-btn-dark);color:#fff;
  padding:14px 30px;font-size:15px;font-weight:600;border:none;cursor:pointer;
}
.hero-find:hover{background:#062845;}

/* ---------- Generic section spacing ---------- */
.section{padding:70px 0;}
.section.tight{padding-top:0;}
.section h2{
  text-align:center;color:var(--navy-heading);font-size:38px;
}
.section > .wrap > p.lede{
  text-align:center;margin:0 auto 30px;
}
hr.divider{
  border:none;border-top:1px solid var(--divider);width:80px;margin:0 auto 40px;
}
.blue-bg{background:var(--section-blue);}
.blue-bg h2,.blue-bg h3{color:#fff;}
.blue-bg p{color:#eaf3fb;}
.blue-bg hr.divider{border-top-color:rgba(255,255,255,0.5);}

/* ---------- Online / Offline events ---------- */
h3.event-type{
  text-align:center;color:var(--navy-heading);font-size:24px;margin-bottom:24px;
}
.btn-row{
  display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:26px;
}
.btn-row .pill{
  background:var(--navy-pill);color:#fff;padding:16px 20px;font-weight:600;font-size:14.5px;
  flex:1 1 0;min-width:160px;text-align:center;
}

/* ---------- Real content images (replace recreated diagrams) ---------- */
.content-img{
  display:block;width:100%;height:auto;max-width:950px;margin:40px auto 0;
}

/* ---------- Contact callout banner ---------- */
.callout-banner{
  width:100%;min-height:220px;
  background-image:url('../images/callout.jpg');
  background-size:cover;background-position:center;
}
@media (max-width:600px){
  .callout-banner{min-height:140px;}
}

/* ---------- About us 3-column ---------- */
.about-cols{
  display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:50px;
}
.about-col{text-align:center;}
.icon-circle{
  width:90px;height:90px;border-radius:50%;background:rgba(255,255,255,0.18);
  display:flex;align-items:center;justify-content:center;margin:0 auto 22px;
  border:2px solid rgba(255,255,255,0.5);
}
.icon-circle svg{width:40px;height:40px;stroke:#fff;fill:none;stroke-width:1.8;}
.col-header{
  background:var(--header-box-light);color:var(--navy-heading);font-weight:700;
  padding:14px;font-size:15px;margin-bottom:2px;
}
.col-list{list-style:none;margin:0;padding:0;}
.col-list li{
  background:var(--navy-pill);color:#fff;font-weight:600;font-size:13px;
  padding:13px 10px;margin-bottom:2px;
}

/* ---------- Chart ---------- */
.chart-wrap{
  margin-top:50px;background:transparent;
}
.chart-title{text-align:center;color:#fff;font-size:20px;margin-bottom:30px;font-weight:700;}
.chart{
  display:flex;align-items:flex-end;justify-content:center;gap:36px;height:280px;
  padding:0 10px;position:relative;border-bottom:1px solid rgba(255,255,255,0.4);
}
.chart::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:1px;background:rgba(255,255,255,0.4);
}
.bar-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;position:relative;}
.bar-col .pct{
  background:var(--navy-pill);color:#fff;font-size:11px;font-weight:700;
  width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  margin-bottom:8px;
}
.bar-col .bar{width:56px;border-radius:2px 2px 0 0;}
.bar-col .lbl{
  margin-top:12px;color:#fff;font-size:12px;text-align:center;max-width:90px;font-weight:600;
}

/* ---------- Basics phase table ---------- */
.phase-table{
  display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr;gap:16px;margin-top:46px;align-items:end;
}
.phase-labels{display:flex;flex-direction:column;gap:8px;}
.phase-labels span{
  background:var(--yellow);color:var(--navy-heading);font-weight:700;font-size:13px;
  padding:14px 10px;text-align:center;
}
.phase-col{display:flex;flex-direction:column;gap:8px;justify-content:flex-end;height:100%;}
.phase-col span{
  background:var(--navy-pill);color:#fff;font-weight:600;font-size:12px;
  padding:11px 8px;text-align:center;
}
.phase-caption{text-align:center;font-size:12.5px;color:var(--text-gray);font-weight:600;margin-top:10px;letter-spacing:0.03em;}

.revenue-list{list-style:none;margin:40px auto 0;padding:0;max-width:760px;}
.revenue-list li{
  background:var(--yellow);color:var(--navy-heading);font-weight:700;font-size:14.5px;
  padding:16px 22px;margin-bottom:10px;
}

/* ---------- Rock it icon row + database grid ---------- */
.icon-row{
  display:flex;justify-content:center;gap:60px;margin:44px 0 50px;flex-wrap:wrap;
}
.icon-item{text-align:center;}
.icon-sq{
  width:64px;height:64px;background:var(--yellow);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;
}
.icon-sq svg{width:30px;height:30px;stroke:var(--navy-heading);fill:none;stroke-width:1.8;}
.icon-item span{color:#fff;font-weight:600;font-size:13.5px;}

.db-grid{display:grid;grid-template-columns:0.9fr 1fr 1fr 1fr 1fr;gap:14px;align-items:start;}
.db-box{
  background:var(--gold);color:var(--navy-heading);font-weight:700;font-size:12.5px;
  padding:18px 12px;text-align:center;letter-spacing:0.02em;align-self:center;
  position:relative;
}
.db-arrow{
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:26px;font-weight:700;
}
.db-col{display:flex;flex-direction:column;gap:8px;}
.db-col span{
  background:var(--navy-pill);color:#fff;font-weight:600;font-size:12px;padding:10px 8px;text-align:center;
}

/* ---------- Post event / metrics graphic blocks ---------- */
.graphic-block{
  margin:44px 0;background:var(--section-blue);padding:34px;text-align:center;
}
.graphic-block svg{max-width:100%;}

/* ---------- Contact ---------- */
.contact-info-line{
  text-align:center;max-width:760px;margin:0 auto 10px;color:#fff;
}
.contact-info-line a{color:#fff;font-weight:700;text-decoration:underline;}
.contact-info-line .email-highlight{
  background:var(--navy-btn-dark);color:#fff;padding:2px 10px;font-weight:700;
  text-decoration:none;display:inline-block;
}
#contact .contact-info-line.subtitle{color:#dbe9f7;}

.contact-form-panel{
  background:rgba(255,255,255,0.14);border-radius:4px;
  max-width:820px;margin:50px auto 0;padding:45px 30px 40px;
}
.form-heading{text-align:center;}
.form-heading h3{color:#fff;font-size:20px;margin-bottom:6px;}
.form-heading h3.accent{color:var(--chart-orange);}
.form-heading p{color:#eaf3fb;}

form.enquiry{max-width:640px;margin:30px auto 0;}
form.enquiry .field{margin-bottom:18px;position:relative;}
form.enquiry label{
  display:block;font-size:13px;font-weight:700;color:#fff;margin-bottom:6px;
}
form.enquiry input,form.enquiry textarea{
  width:100%;padding:13px 14px;border:1px solid #d5d5d5;font-family:inherit;font-size:14.5px;
  background:#fafafa;
}
form.enquiry input:focus,form.enquiry textarea:focus{
  outline:none;border-color:var(--section-blue);background:#fff;
}
form.enquiry .error-msg{
  display:none;color:#c0392b;font-size:12.5px;margin-top:5px;font-weight:600;
}
form.enquiry .field.has-error input,
form.enquiry .field.has-error textarea{border-color:#c0392b;background:#fff5f5;}
form.enquiry .field.has-error .error-msg{display:block;}
form.enquiry .field.success input,
form.enquiry .field.success textarea{border-color:#2e9e5b;}

.submit-btn{
  width:100%;background:#E01B24;color:#fff;border:none;padding:16px;
  font-weight:700;letter-spacing:0.05em;text-transform:uppercase;font-size:13.5px;cursor:pointer;
}
.submit-btn:hover{background:#b8151c;}
.form-status{
  text-align:center;margin-top:16px;font-weight:600;font-size:14px;display:none;
}
.form-status.show{display:block;}
.form-status.ok{color:#bff5d4;}
.form-status.error{color:#ffd4d4;}
.privacy-note{text-align:center;font-size:12px;color:#dbe9f7;margin-top:14px;}

footer{
  background:var(--drawer-bg);color:#bbb;text-align:center;padding:24px;font-size:13px;
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .about-cols{grid-template-columns:1fr;}
  .phase-table{grid-template-columns:1fr;}
  .phase-col{flex-direction:column;}
  .db-grid{grid-template-columns:1fr;}
  .db-arrow{transform:rotate(90deg);}
  .chart{gap:14px;}
  .bar-col .bar{width:34px;}
  .icon-row{gap:28px;}
}
@media (max-width:600px){
  .section h2{font-size:28px;}
  .hero-badge{width:180px;height:180px;}
  .hero-badge img{width:120px;}
}