/* ==========================================================================
   Chopper Trading — static site
   Rebuilt from the original WordPress/Elementor site with the same
   colors, fonts, and layout. Design tokens below match the Elementor
   global kit exactly.
   ========================================================================== */

:root {
  /* Palette (from Elementor global kit) */
  --c-light: #E8E8E8;      /* primary — light gray */
  --c-teal: #257F9E;       /* secondary — teal */
  --c-steel: #54889E;      /* text — steel blue */
  --c-accent: #7E979D;     /* accent — gray teal */
  --c-slate: #7D9BA2;
  --c-mist: #C5D3D5;
  --c-dark-teal: #2C5861;
  --c-heading: #4A4A4A;
  --c-silver: #D1D1D1;
  --c-white: #FFFFFF;
  --c-ink: #000000;

  /* Type */
  --f-heading: "Montserrat", sans-serif;
  --f-body: "Lato", sans-serif;
  --f-base: "Roboto", sans-serif;

  --container-narrow: 640px;
  --container-wide: 1400px;
}

/* Reset ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--f-base);
  font-size: 17px;
  line-height: 1.9;
  color: var(--c-ink);
  background: var(--c-white);
  /* footer always reaches the bottom of the viewport */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main { flex: 1 0 auto; }

/* StatCounter still tracks, but its injected badge must not add a white
   strip below the footer */
.statcounter { display: none; }

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

h1, h2, h3, h4 { font-family: var(--f-heading); margin: 0; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--c-teal); text-decoration: none; transition: color .3s; }
a:hover { color: var(--c-steel); }

.screen-reader-only {
  position: absolute; width: 1px; height: 1px;
  clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}

/* Icons (inline SVG) */
.icon { display: inline-block; width: 1em; height: 1em; fill: currentColor; vertical-align: -0.125em; }

/* Header ------------------------------------------------------------------ */

.site-header {
  background: var(--c-light);
  position: relative;
  z-index: 100;
}

.header-inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  display: flex;
  align-items: center;
  min-height: 66px;
}

.logo { display: block; padding: 8px 10px; flex: 0 0 auto; }
.logo img { width: 144px; display: block; }

/* Main navigation */
.main-nav { flex: 1 1 auto; padding-left: 6px; }

.main-nav .menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

.main-nav .menu > li { position: relative; }

.main-nav .menu > li > a {
  display: block;
  padding: 13px 15px;
  font-family: var(--f-heading);
  font-size: 11.56px;
  font-weight: 600;
  letter-spacing: -0.3px;
  line-height: 1em;
  color: var(--c-ink);
  position: relative;
}

/* underline pointer (matches Elementor "underline" hover) */
.main-nav .menu > li > a::after {
  content: "";
  position: absolute;
  left: 15px; right: 15px; bottom: 6px;
  height: 1px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s;
}

.main-nav .menu > li > a:hover::after,
.main-nav .menu > li > a[aria-current="page"]::after { transform: scaleX(1); }

.main-nav .caret { width: .8em; height: .8em; margin-left: 5px; fill: var(--c-ink); }

/* Dropdowns */
.main-nav .sub {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: var(--c-white);
  box-shadow: 0 3px 15px rgba(0, 0, 0, .15);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
  z-index: 50;
}

.main-nav li:hover > .sub,
.main-nav li:focus-within > .sub { opacity: 1; visibility: visible; }

.main-nav .sub a {
  display: block;
  padding: 13px 20px;
  font-family: var(--f-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--c-accent);
  border-bottom: 1px solid var(--c-white);
}

.main-nav .sub li:last-child a { border-bottom: 0; }

.main-nav .sub a:hover { color: var(--c-ink); background: var(--c-light); }

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  margin-left: auto;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  color: var(--c-slate);
  cursor: pointer;
}
.nav-toggle:hover { color: var(--c-teal); }
.nav-toggle .icon { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: inline-block; }

/* Header action buttons */
.header-actions { margin-left: auto; display: flex; align-self: stretch; }

.btn-block {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--f-heading);
  font-size: 12px;
  font-weight: 700;
  line-height: 0.9em;
  letter-spacing: -0.2px;
  padding: 28px 40px 23px;
  transition: background-color .3s, color .3s;
}

.btn-apply {
  background: var(--c-silver);
  color: var(--c-teal);
}
.btn-apply:hover { background: #8E8E8E; color: var(--c-mist); }

.btn-contact {
  background: #7E989D;
  color: var(--c-white);
  padding: 28px 45px 24px;
}
.btn-contact:hover { background: #56666D; color: var(--c-mist); }

/* Buttons ----------------------------------------------------------------- */

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-heading);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 15px 35px;
  border: 1px solid currentColor;
  border-radius: 6px;
  transition: background-color .3s, color .3s, border-color .3s;
}

.btn-outline.light { color: var(--c-white); }
.btn-outline.light:hover { background: var(--c-dark-teal); border-color: var(--c-dark-teal); color: var(--c-white); }

.btn-outline.teal { color: var(--c-teal); }
.btn-outline.teal:hover { background: var(--c-dark-teal); border-color: var(--c-dark-teal); color: var(--c-white); }

/* Hero sections ------------------------------------------------------------ */

/* Dark hero used on the home page ("blackdot" tile = solid black) */
.hero-dark {
  background: var(--c-ink);
  color: var(--c-white);
  display: flex;
  align-items: center;
}

.hero-dark .hero-inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  width: 100%;
  padding: 5em 36px 3em;
}

.hero-dark h1,
.hero-dark h2 {
  font-size: 3.2em;
  font-weight: 700;
  line-height: 1em;
  letter-spacing: -1px;
  color: var(--c-white);
  padding: 1em 0;
  margin: 0;
}

.hero-dark .hero-text {
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  color: var(--c-white);
  max-width: 700px;
  padding: 1em 1em 1em 0;
}

.hero-dark .hero-text a { color: var(--c-steel); font-weight: 700; }
.hero-dark .hero-text a:hover { color: var(--c-mist); }

.hero-home { min-height: 55vh; }

/* Empty dark banners on interior pages */
.banner-dark { background: var(--c-ink); }
.banner-dark.h40 { min-height: 40vh; }
.banner-dark.h60 { min-height: 60vh; }

/* Full-image heroes */
.hero-image { background-repeat: no-repeat; }

.hero-about {
  background-image: url("../img/chicagoboard.jpeg");
  background-position: 0 0;
  background-size: cover;
  min-height: calc(100vh - 66px);
}

.hero-contain {
  background-position: center center;
  background-size: contain;
  min-height: 70vh;
}

.hero-culture { background-image: url("../img/dsc_2207.jpeg"); }
.hero-perks { background-image: url("../img/dsc_2287.jpeg"); }

/* Home: flip boxes ---------------------------------------------------------- */

.flip-row { display: flex; }
.flip-row > * { flex: 1 1 0; }

.flip-box { position: relative; height: 201px; overflow: hidden; }

.flip-box .layer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 35px;
  background-repeat: no-repeat;
  background-position: 100% 100%;
  transition: opacity .6s;
}

.flip-box .back { opacity: 0; }
.flip-box:hover .back, .flip-box:focus-within .back { opacity: 1; }
.flip-box:hover .front { opacity: 0; }

.flip-box h3 {
  font-size: 22.4px;
  font-weight: 700;
  color: var(--c-light);
  margin: 0 0 10px;
}

.flip-box .desc {
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2em;
  color: var(--c-white);
}

.flip-box .back h3 { font-size: 25.6px; color: var(--c-white); text-align: center; margin: 0; }

.flip-box .back {
  align-items: center;
  color: var(--c-white);
}

.flip-collab .front { background-color: #247F9E; background-image: url("../img/collaborationicon150-1.png"); }
.flip-collab .back  { background-color: #0E3E4E; background-image: url("../img/collaborationicon150-1.png"); }
.flip-innov .front  { background-color: #55879E; background-image: url("../img/innovationicon150.png"); }
.flip-innov .back   { background-color: #2B444F; background-image: url("../img/innovationicon150.png"); }
.flip-results .front { background-color: #7E989D; background-image: url("../img/resultsdriven150.png"); }
.flip-results .back  { background-color: #434F51; background-image: url("../img/resultsdriven150.png"); }

/* Content sections ----------------------------------------------------------- */

.container-narrow {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 10px;
}

.section { margin: 5em 0 3em; }

.section-title {
  font-size: 36px;
  font-weight: 700;
  line-height: 39.6px;
  color: var(--c-heading);
  margin: 0 0 1em;
}

.rich-text {
  font-family: var(--f-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  color: var(--c-ink);
}

.rich-text.small { font-size: 16px; }

.rich-text img.alignright { float: right; margin: 0 0 1.5em 2em; }
.rich-text img.alignleft { float: left; margin: 0 2em 1.5em 0; }

/* Recruiting: alternating full-width media rows */
.media-row { display: flex; align-items: center; }
.media-row .media { flex: 0 0 50%; }
.media-row .media img { display: block; width: 100%; }
.media-row .col-text { flex: 0 0 50%; padding: 3em 40px; }
.media-row .col-text .inner { max-width: 620px; }
.media-row .media + .col-text .inner { margin-right: auto; margin-left: 5%; }
.media-row .col-text:first-child { display: flex; justify-content: flex-end; }
.media-row .col-text:first-child .inner { margin-right: 5%; }

/* Wide centered image (DRW logo, charities) */
.image-feature { text-align: center; }
.image-feature img { display: inline-block; }

/* Gallery ---------------------------------------------------------------------- */

.gallery-title {
  text-align: center;
  padding: 3em 0;
  margin: 0;
  font-size: 36px;
  font-weight: 700;
  line-height: 39.6px;
  color: var(--c-heading);
}

.masonry {
  display: flex;
  gap: 2px;
  max-width: 1140px;
  margin: 0 auto 4em;
  padding: 0 10px;
}

.masonry .col { flex: 1 1 0; display: flex; flex-direction: column; gap: 2px; }

.masonry a {
  display: block;
  position: relative;
  cursor: zoom-in;
}

.masonry a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  opacity: 0;
  transition: opacity .3s;
}

.masonry a:hover::after { opacity: 1; }

.masonry img { display: block; width: 100%; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.lightbox.open { display: flex; }

.lightbox img {
  max-width: 90vw;
  max-height: 88vh;
  display: block;
  box-shadow: 0 0 40px rgba(0, 0, 0, .6);
}

.lightbox button {
  position: absolute;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 30px;
  line-height: 1;
  padding: 18px;
  cursor: pointer;
  opacity: .8;
}

.lightbox button:hover { opacity: 1; }
.lightbox .lb-close { top: 10px; right: 16px; }
.lightbox .lb-prev { left: 6px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { right: 6px; top: 50%; transform: translateY(-50%); }

/* Video backgrounds ---------------------------------------------------------------- */

.has-video { position: relative; overflow: hidden; }

.bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

.video-overlay {
  position: absolute;
  inset: 0;
  background: var(--c-ink);
  z-index: 1;
  pointer-events: none;
}

.video-overlay.o86 { opacity: .86; }
.video-overlay.o75 { opacity: .75; }

.has-video > .hero-inner { position: relative; z-index: 2; }

/* Press section ------------------------------------------------------------------ */

.press {
  position: relative;
  overflow: hidden;
  min-height: 326px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--c-ink);
  padding: 3em 20px;
}

.press::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-ink);
  opacity: .75;
  z-index: 1;
}

.press > * { position: relative; z-index: 2; }

/* parallax background layer (scroll + mouse motion, like the original) */
.press .press-bg {
  position: absolute;
  left: 0;
  right: 0;
  top: -70px;
  bottom: -70px;
  background: url("../img/Equations_Nuetral-1.jpeg") center/cover no-repeat;
  z-index: 0;
  will-change: transform;
}

.press h2 {
  font-size: 50px;
  font-weight: 700;
  line-height: 1em;
  color: var(--c-light);
  margin: 0 0 28px;
}

/* Footer --------------------------------------------------------------------------- */

.site-footer { background: var(--c-mist); }

.footer-main {
  display: flex;
  align-items: flex-start;
  padding: 80px 20px;
  max-width: var(--container-wide);
  margin: 0 auto;
}

.footer-main > div { flex: 1 1 0; }

.footer-brand { padding-right: 7em; }
.footer-brand .footer-logo img { width: 197px; display: block; }

.footer-tagline {
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.1em;
  letter-spacing: 0.4px;
  color: var(--c-white);
  padding: 1em 0 2em;
  margin: 0 0 30px;
}

.social-icons { display: flex; gap: 10px; }

.social-icons a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-steel);
  color: var(--c-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .3s;
}

.social-icons a:hover { background: var(--c-mist); color: var(--c-white); }
.social-icons .icon { width: 18px; height: 18px; }

.footer-heading {
  font-size: 32px;
  font-weight: 700;
  color: var(--c-slate);
  margin: 0 0 1em;
}

.footer-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  column-gap: 4em;
  row-gap: 1.6em;
}

.footer-menu a {
  font-family: var(--f-heading);
  font-size: 12px;
  font-weight: 700;
  color: var(--c-steel);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.footer-menu a:hover { color: var(--c-accent); }
.footer-menu .caret { width: .9em; height: .9em; }

/* Contact block (contact info lives here; the nav Contact button links to it) */
.footer-contact {
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-dark-teal);
}

.footer-contact p { margin: 0 0 0.9em; }
.footer-contact a { color: var(--c-teal); }
.footer-contact a:hover { color: var(--c-dark-teal); text-decoration: underline; }
.footer-contact .btn-outline { margin-top: 0.8em; font-size: 12px; padding: 12px 26px; }

.footer-bottom {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 20px 40px;
}

.footer-bottom hr {
  border: 0;
  border-top: 1px solid rgba(84, 136, 158, .4);
  margin: 0 0 24px;
}

.footer-bottom p {
  text-align: center;
  font-family: var(--f-body);
  font-size: 0.7em;
  font-weight: 600;
  line-height: 1.4em;
  letter-spacing: 3px;
  color: var(--c-ink);
  margin: 0;
}

.footer-bottom a { color: var(--c-steel); }
.footer-bottom a:hover { color: var(--c-accent); }

/* Responsive ------------------------------------------------------------------------ */

@media (max-width: 1024px) {
  .btn-block { padding: 24px 24px 15px; }
  .btn-contact { padding: 24px 34px 15px; }

  /* collapse nav to burger (matches original: dropdown on tablet & mobile) */
  .main-nav { position: static; }
  .nav-toggle { display: inline-flex; align-items: center; }
  .main-nav .menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--c-white);
    flex-direction: column;
    align-items: stretch;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
  }
  .main-nav.open .menu { display: flex; }
  .main-nav .menu > li > a { font-size: 12px; padding: 13px 20px; color: var(--c-accent); }
  .main-nav .menu > li > a::after { display: none; }
  .main-nav .menu > li > a:hover { color: var(--c-ink); background: var(--c-light); }
  .main-nav .sub {
    position: static;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    background: var(--c-white);
  }
  .main-nav .sub a { padding-left: 40px; }

  .footer-main { flex-wrap: wrap; gap: 2em; padding: 2em; }
  .footer-brand { flex: 1 1 100%; padding-right: 0; }

  .press h2 { font-size: 40px; }
}

@media (max-width: 767px) {
  .bg-video.hide-mobile { display: none; }

  .hero-dark h1, .hero-dark h2 { font-size: 3em; }
  .hero-dark .hero-inner { padding: 2em 26px; }

  .flip-row { flex-direction: column; }
  .flip-box { height: 30vh; }

  .header-inner { flex-wrap: wrap; }
  .btn-block { padding: 14px 24px; }

  .media-row { flex-direction: column; }
  .media-row .media, .media-row .col-text { flex: 1 1 auto; width: 100%; }
  .media-row .col-text { padding: 2em 20px; }
  .media-row .col-text:first-child { order: 1; }
  .media-row .media { order: 0; }

  .masonry { flex-direction: column; gap: 10px; }
  .masonry .col { gap: 10px; }

  .footer-main { flex-direction: column; }
  .footer-menu { grid-template-columns: 1fr; }

  .section { margin: 3em 0 2em; }

  .rich-text img.alignright,
  .rich-text img.alignleft { float: none; display: block; margin: 0 auto 1.5em; }

  .press h2 { font-size: 32px; }
}