:root {
  --primary: #123A51;
  --secondary: #1A797F;
  --accent: #9AE5EA;
  --accent-soft: #C4D9DF;
  --text: #393E41;
  --bg: #F4F8F9;
  --panel: #F1F2F3;
  --olive: #4D5339;
  --white: #FFFFFF;
  --serif: "EB Garamond", Georgia, serif;
  --sans: Helvetica, "Helvetica Neue", Arial, sans-serif;
  --maxw: 1270px;
  --radius: 8px;
}

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--serif); margin: 0 0 .5em; line-height: 1.1; }
h1 { font-size: 2.875rem; font-weight: 700; }
h2 { font-size: 2.875rem; font-weight: 700; }
h3 { font-size: 1.75rem; font-weight: 700; }
p { margin: 0 0 .9rem; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--secondary); }
img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--primary); color: var(--white); }

@media (max-width: 768px) {
  h1 { font-size: 2.25rem; }
  h2 { font-size: 2rem; }
}

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 1rem;
}

/* ---- buttons ---- */
.btn {
  display: inline-block;
  border: 0;
  border-radius: var(--radius);
  padding: .813rem 1.938rem;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: transform .25s, background .25s, color .25s;
}
.btn:active { transform: scale(.92); }
.btn--accent { background: var(--accent); color: var(--primary); }
.btn--accent:hover { background: var(--accent-soft); color: var(--primary); }
.btn--teal { background: var(--secondary); color: var(--white); }
.btn--teal:hover { background: var(--olive); color: var(--white); }
.btn--ghost { background: transparent; color: var(--white); border: 1px solid var(--white); }
.btn--ghost:hover { background: var(--accent-soft); color: var(--primary); }

.eyebrow {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  margin: 0 0 .5rem;
}

/* ---- header ---- */
.site-header { background: var(--primary); color: var(--white); }
.site-header .container {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-block: 1rem;
}
.site-header__logo img { max-width: 220px; }
.site-nav { margin-inline-start: auto; }
.site-nav ul { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.site-nav a { color: var(--white); font-weight: 500; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--accent); }
.site-nav li { position: relative; }
.site-nav .submenu {
  display: none;
  position: absolute;
  top: 100%; left: 0;
  background: var(--white);
  border-radius: var(--radius);
  min-width: 14em;
  padding: .5rem 0;
  z-index: 50;
}
.site-nav li:hover > .submenu { display: block; }
.site-nav .submenu a { display: block; color: var(--text); padding: .5rem 1rem; }
.site-nav .submenu a:hover { color: var(--secondary); }
.header-contact { display: flex; align-items: center; gap: 1.5rem; }
.header-contact a { color: var(--white); }

/* ---- hero ---- */
.hero { background: var(--primary); color: var(--white); }
.hero .container {
  display: grid;
  grid-template-columns: 6fr 4fr;
  gap: 2rem;
  align-items: center;
  padding-block: 4rem;
}
.hero img { border-radius: var(--radius); }
@media (max-width: 1024px) { .hero .container { grid-template-columns: 1fr; } }

/* ---- split (text + media) ---- */
.split .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
  padding-block: 5rem;
}
.split--reverse .split__media { order: -1; }
.split__media { position: relative; z-index: 0; }
.split__media img { border-radius: var(--radius); position: relative; z-index: 1; }
.split__media::before {
  content: "";
  position: absolute;
  inset: -40px -40px auto auto;
  width: 60%; height: 70%;
  background: var(--accent-soft);
  border-radius: var(--radius);
  z-index: -1;   /* was 0 */
}
.split--reverse .split__media::before { inset: -40px auto auto -40px; }
.split h2 { color: var(--primary); }
@media (max-width: 1024px) {
  .split .container { grid-template-columns: 1fr; }
  .split__media { order: -1 !important; }
}

/* feature list with check icons */
.check-list { list-style: none; margin: 0; padding: 0; }
.check-list li { display: flex; gap: .5rem; align-items: flex-start; padding-block: .5rem; }
.check-list svg { flex: 0 0 24px; }
.check-list--accent svg { color: var(--accent); }
.check-list--teal svg { color: var(--secondary); }

/* ---- centered intro ---- */
.intro { text-align: center; }
.intro .container { max-width: 900px; padding-block: 1rem 3rem; }
.intro h2 { color: var(--primary); }

/* ---- services ---- */
.service .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: stretch;
}
.service:nth-of-type(even) .service__card { order: 2; }
.service__card {
  background: var(--primary);
  color: var(--white);
  border-radius: var(--radius);
  padding: 2rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.service__card h3 { color: var(--white); }
.service__card .btn { align-self: flex-start; }
.service__img {
  min-height: 378px;
  border-radius: var(--radius);
  background-size: cover;
  background-position: center;
}
@media (max-width: 1024px) {
  .service .container { grid-template-columns: 1fr; }
  .service__card { order: 0 !important; }
}

/* ---- banner ---- */
.banner { background: var(--olive); color: var(--white); text-align: center; }
.banner .container { padding-block: 4rem; }
.banner h2 { color: var(--white); }

/* ---- cta / valuation ---- */
.cta { background: var(--primary); color: var(--white); text-align: center; }
.cta .container { max-width: 900px; padding-block: 5rem; }
.cta h2 { color: var(--white); }

/* ---- forms ---- */
.form { display: grid; gap: 1.25rem; max-width: 640px; margin-inline: auto; text-align: left; }
.form--two { grid-template-columns: 1fr 1fr; }
.form input, .form textarea {
  width: 100%;
  border: none;
  border-radius: var(--radius);
  background: var(--white);
  color: var(--text);
  font: inherit;
  font-size: .875rem;
  padding: .75rem 1rem;
}
.form label { display: block; color: var(--white); font-size: 1rem; margin-bottom: .25rem; }
.form .full { grid-column: 1 / -1; }
.form button { justify-self: center; grid-column: 1 / -1; }
@media (max-width: 640px) { .form--two { grid-template-columns: 1fr; } }

/* ---- contact form (light background, unlike the dark .cta forms) ---- */
.contact-split .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  padding-block: 4rem 5rem;
  align-items: start;
}
.contact-split__info h2,
.contact-split__info h3,
.contact-split__form h2 { color: var(--primary); }
.contact-split__form .form { margin-inline: 0; max-width: none; }
.contact-split__form .form label { color: var(--text); }
.contact-split__form .form input,
.contact-split__form .form textarea { border: 1px solid var(--accent-soft); }
.contact-split__form .form button { justify-self: start; }
@media (max-width: 1024px) {
  .contact-split .container { grid-template-columns: 1fr; }
}

/* ---- client logo marquee ---- */
.clients { background: var(--white); text-align: center; padding-block: 4rem; }
.clients h2 { color: var(--primary); }
.marquee { overflow: hidden; margin-top: 2rem; }
.marquee__track {
  display: flex;
  align-items: center;
  gap: 2rem;
  width: max-content;
  animation: marquee 60s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee img { height: 60px; width: auto; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---- footer ---- */
.site-footer { background: var(--panel); }
.site-footer__legal .container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2.5rem;
  padding-block: 5rem 3rem;
  font-size: .8rem;
}
.site-footer__main { background: var(--primary); color: var(--white); }
.site-footer__main .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  padding-block: 3rem;
}
.site-footer__main a { color: var(--white); }
.site-footer__main ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.site-footer__bar { background: var(--primary); color: var(--white); border-top: 1px solid var(--white); }
.site-footer__bar .container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  padding-block: 1.25rem;
  font-size: .875rem;
}
.site-footer__bar a { color: var(--white); text-decoration: underline; }
@media (max-width: 1024px) {
  .site-footer__legal .container,
  .site-footer__main .container { grid-template-columns: 1fr; }
}


/* Home Page Dark Blue Box under Image */
.image-overlay {
  background: var(--primary);
  padding: 1.75rem 2rem;
  border-radius: var(--radius);
  position: relative;
  z-index: 2;
  width: 90%;
  margin-top: -3rem; /* Pulls the box up to overlap the image perfectly */
}

.image-overlay .check-list li {
  color: var(--white);
  padding-block: 0.5rem;
  font-size: 1rem;
}

.image-overlay .check-list--accent svg {
  color: var(--accent);
}

/* Contact Page Bullets & Icons */
.icon-list {
  list-style: none; /* Kills the default browser bullets */
  padding: 0;
  margin: 0;
}

.icon-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.icon-list svg {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  color: var(--primary);
  margin-top: 4px; /* Aligns the icon to the text */
}

.hp { display: none }