/* Caudex Technology — static rebuild of www.caudextech.com
   Brand greens: heading green #6BBE45, deep green #159B48, logo green #4EA042 */

@font-face {
  font-family: "Lexend Deca";
  src: url("assets/fonts/lexend-deca-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --green: #6BBE45;
  --green-deep: #159B48;
  --green-logo: #4EA042;
  --black: #000;
  --white: #fff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  background: var(--black);
  color: var(--white);
  font-family: "Lexend Deca", "Montserrat", Arial, Helvetica, sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 10;
  background: var(--green);
  color: var(--black);
  padding: 10px 16px;
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus { top: 8px; }

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

.site-header {
  height: 102px;
  display: flex;
  align-items: center;
  padding: 0 42px;
}

.brand {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  text-decoration: none;
}

/* ---------- Section headings ---------- */

.section-title {
  font-weight: 500;
  font-size: 70px;
  line-height: 1.4;
  letter-spacing: 0.15em;
  color: var(--green);
  text-align: center;
}

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

.hero {
  padding: 320px 20px 825px;
  display: flex;
  justify-content: center;
}

.hero-lockup {
  width: min(672px, 88vw);
  height: auto;
}

.hero-lockup-stack { display: none; }

/* ---------- About ---------- */

.about {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 20px;
}

.about p {
  font-size: 17px;
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 1.55;
}

/* text sits vertically centered beside the chevrons and tucks slightly
   inside their tips, so the arrows appear to frame the copy */
.about-row {
  display: flex;
  align-items: center;
}

.about-row-intro {
  margin-top: -10px;
}

.about-row-intro .about-chevron {
  width: 300px;
  flex: none;
}

.about-row-intro p {
  max-width: 580px;
  margin-left: -48px;
}

.about-row-mission {
  justify-content: flex-end;
  margin-top: -40px;
}

.about-row-mission p {
  text-align: right;
  max-width: 560px;
  margin-right: -40px;
}

.about-row-mission .about-chevron {
  width: 265px;
  flex: none;
}

/* ---------- Services ---------- */

.services {
  margin-top: 420px;
}

.services .section-title {
  margin-bottom: 128px;
}

.service-cards {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.card {
  min-height: 432px;
  padding: 50px 30px 40px;
  text-align: center;
}

.card-icon {
  width: 94px;
  height: 94px;
  margin: 0 auto 36px;
}

.card h3 {
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  margin-bottom: 44px;
}

.card p {
  font-size: 16px;
  letter-spacing: 0.04em;
  line-height: 1.4;
  max-width: 300px;
  margin: 0 auto;
}

.card-vcu         { background: var(--black); }
.card-dbw         { background: var(--white); color: var(--black); }
.card-dbw h3      { color: var(--green); }
.card-integration { background: var(--green); }
.card-consulting  { background: var(--green-deep); }
.card-consulting h3 { color: var(--black); }

/* ---------- Contact ---------- */

.contact {
  margin-top: 420px;
  text-align: center;
  padding: 0 20px;
}

.contact .section-title {
  font-size: 50px;
  line-height: 0.9;
  margin-bottom: 44px;
}

.contact-name {
  font-weight: 500;
  font-size: 35px;
  line-height: 1.4;
  margin-bottom: 14px;
}

.contact-email a { text-decoration: none; }
.contact-email a:hover { color: var(--green); }

.contact-address {
  margin-top: 16px;
}

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

.site-footer {
  text-align: center;
  padding: 40px 20px 18px;
}

.site-footer p {
  font-size: 13px;
}

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

@media (max-width: 1100px) {
  .hero { padding: 224px 20px 448px; }
  .services { margin-top: 240px; }
  .section-title { font-size: 54px; }
  .service-cards { grid-template-columns: repeat(2, 1fr); }
  .contact { margin-top: 180px; }
}

@media (max-width: 720px) {
  /* fixed header, as on the Wix mobile site */
  body { padding-top: 56px; }
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    height: 56px;
    background: var(--black);
    padding: 0 25px;
  }
  .brand { font-size: 17px; }

  /* hero: stacked logo, vertically centered in the first screen (matches Wix mobile) */
  .hero {
    padding: 0 20px 40px;
    min-height: calc(100vh - 56px);
    min-height: calc(100svh - 56px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .hero-lockup { display: none; }
  .hero-lockup-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 21px;
    margin-bottom: 92px; /* Wix positions the lockup slightly above center */
  }
  .hero-lockup-stack img:first-child { width: 59px; }
  .hero-lockup-stack img:last-child  { width: 181px; }

  .section-title { font-size: 40px; }
  .contact .section-title { font-size: 30px; }

  /* about: giant chevron sits behind the copy as a background layer
     (geometry measured off the Wix mobile rendering) */
  .about { position: relative; overflow: hidden; padding: 36px 25px 36px; }
  .about .section-title { margin-bottom: 31px; }
  .about-row { display: block; }
  .about-row-intro { margin-top: 0; }
  .about-row-mission .about-chevron { display: none; }
  .about-row-intro .about-chevron {
    display: block;
    position: absolute;
    width: 119vw;
    max-width: none;
    right: -29vw;
    top: 13px;
    z-index: 0;
    opacity: 0.5;
  }
  .about p { position: relative; z-index: 1; }
  .about-row-intro p { margin-left: 0; font-size: 15px; line-height: 1.5; max-width: none; }
  .about-row-mission p { margin-right: 0; font-size: 15px; line-height: 1.5; max-width: none; }
  .about-row-mission { margin-top: 54px; }

  .services { margin-top: 140px; }
  .services .section-title { margin-bottom: 56px; }
  .service-cards { grid-template-columns: 1fr; }
  .card { min-height: 0; }

  .contact { margin-top: 140px; }
  .contact-name { font-size: 26px; }

  .site-header { padding: 0 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}