/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Oxygen', sans-serif; font-size: 14px; background: #000; color: #222; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
img { display: block; }

/* ── Layout ────────────────────────────────────────────────── */
#page { min-width: 960px; }
.inner { width: 960px; margin: 0 auto; }

/* ── Top tagline bar ───────────────────────────────────────── */
#tagline-bar {
  background: #000;
  text-align: center;
  padding: 8px 0 9px;
  font-family: 'Armata', sans-serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: #fff;
  text-transform: uppercase;
}

/* ── Header ────────────────────────────────────────────────── */
#site-header { background: #e5e5e5; padding: 12px 0 10px; }
#site-header .inner { display: flex; align-items: center; justify-content: space-between; }
#header-logo img { width: 210px; height: 69px; }
#header-phone {
  font-family: 'Armata', sans-serif;
  font-size: 28px;
  color: #000;
  letter-spacing: 0.04em;
}

/* ── Navigation ────────────────────────────────────────────── */
#site-nav { background: #e5e5e5; }
#site-nav .inner { display: flex; justify-content: center; }
#site-nav ul { list-style: none; display: flex; }
#site-nav li { position: relative; }
#site-nav li a {
  display: block;
  padding: 9px 18px;
  font-family: 'Oxygen', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #222;
}
#site-nav li a.active {
  background: #fff;
}
#site-nav li a:hover:not(.active) { background: #d8d8d8; text-decoration: none; }
#site-nav li ul {
  display: none; position: absolute; top: 100%; left: 0;
  background: #fff; border: 1px solid #bbb; min-width: 195px;
  z-index: 200; flex-direction: column;
}
#site-nav li:hover > ul { display: flex; }
#site-nav li ul li a { padding: 7px 14px; font-size: 12px; border: none; margin: 0; color: #333; }
#site-nav li ul li a:hover { background: #f0f0f0; }

/* ── Content wrapper ───────────────────────────────────────── */
#content-wrapper { background: #000; }
#content-box { width: 960px; margin: 0 auto; background: #ebebeb; overflow: hidden; }

/* ── Page title bar (interior pages) ──────────────────────── */
#page-title {
  background: #1a1a1a;
  padding: 12px 20px;
  font-family: 'Armata', sans-serif;
  font-size: 18px;
  color: #fff;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Body text ─────────────────────────────────────────────── */
.body-text {
  font-family: 'Oxygen', sans-serif;
  font-size: 14px;
  color: #333;
  line-height: 1.7;
  margin-bottom: 16px;
}
.body-text p + p { margin-top: 10px; }
.body-text ul { margin: 10px 0 10px 20px; list-style: disc; }
.body-text ul li { margin-bottom: 5px; line-height: 1.6; }

/* ── Main columns ──────────────────────────────────────────── */
#main-cols { display: flex; align-items: stretch; }

/* ── Process sidebar (home + process pages) ────────────────── */
#col-process {
  flex: 0 0 320px;
  width: 320px;
  background: #ebeaea;
  padding: 20px 14px 24px;
}
#col-process .col-process-content {
  background-color: #000;
  padding: 20px;
}
#col-process h3 {
  font-family: 'Armata', sans-serif;
  font-size: 20px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
#process-links { background: #fff; padding: 4px 0; }
#process-links a {
  display: block;
  padding: 11px 18px;
  font-family: 'Oxygen', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #333;
  text-decoration: none;
  text-align: center;
  border-bottom: 1px solid #eee;
}
#process-links a:last-child { border-bottom: none; }
#process-links a:hover { background: #f5f5f5; }
#process-links a.current { background: #e8e8e8; color: #000; text-decoration: underline; }

/* ── Right content column (home + process pages) ───────────── */
#col-content {
  display: flex;
  flex-direction: column;
  gap: 25px;
  flex: 1;
  padding: 20px 22px;
  background: #ebebeb;
}
#col-content h1 {
  font-family: 'Armata', sans-serif;
  font-size: 26px;
  color: #333;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.35;
  margin-bottom: 16px;
}
#col-content h2 {
  font-family: 'Armata', sans-serif;
  font-size: 16px;
  color: #333;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.35;
  margin-bottom: 18px;
}
#col-content h3 {
  font-family: 'Armata', sans-serif;
  font-size: 14px;
  color: #333;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 18px 0 8px;
}

/* ── Process banner (process pages) ───────────────────────── */
#process-banner { padding: 5px 10px; background: #ebebeb; line-height: 0; }
#process-banner img { width: 940px; height: 310px; display: block; }

/* ── Left image column (about, services, experience) ───────── */
#col-image {
  background: #ebebeb;
  padding: 14px 10px;
  align-self: stretch;
}
#col-image .col-image-inner-wrapper {
  display: flex;
  flex-direction: column;
  gap: 25px;
  padding: 25px;
  background-color: #000;
}
#col-image img { width: 220px; display: block; margin: 0 auto; }

/* ── Right text column (about, services, experience) ───────── */
#col-text {
  display: flex;
  flex-direction: column;
  gap: 25px;
  flex: 1;
  padding: 22px 24px;
  background: #ebebeb;
}
#col-text h1 {
  font-family: 'Armata', sans-serif;
  font-size: 26px;
  color: #333;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.35;
  margin-bottom: 16px;
}
#col-text h2 {
  font-family: 'Armata', sans-serif;
  font-size: 16px;
  color: #333;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.35;
  margin-bottom: 16px;
}
#col-text h3 {
  font-family: 'Armata', sans-serif;
  font-size: 14px;
  color: #333;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 18px 0 8px;
}

/* ── Footer ────────────────────────────────────────────────── */
#site-footer { background: #000; padding: 20px 0 0; color: #ccc; }
#site-footer .inner { display: flex; gap: 0; align-items: flex-start; }
.ft-address { flex: 0 0 480px; width: 480px; padding: 0 20px 20px 0; }
.ft-address address, .ft-address p { font-style: normal; font-size: 13px; line-height: 1.9; color: #bbb; }
.ft-address a { color: #ddd; }
.ft-address a:hover { color: #fff; }
.ft-contact { flex: 0 0 480px; width: 480px; padding: 0 0 20px 20px; }
.ft-contact h4 {
  font-family: 'Armata', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: right;
  margin-bottom: 4px;
}
.ft-contact .ft-phone {
  font-family: 'Armata', sans-serif;
  font-size: 20px;
  color: #fff;
  letter-spacing: 0.04em;
  text-align: right;
  margin-bottom: 16px;
}

/* ── Footer bottom bar ─────────────────────────────────────── */
#footer-bar {
  clear: both;
  background: #000;
  text-align: center;
  padding: 12px 0;
  font-family: 'Oxygen', sans-serif;
  font-size: 11px;
  color: #555;
  letter-spacing: 0.05em;
}