/* ===========================================================
   Epcatem — static rebuild
   Palette: deep navy #0E2A47, steel blue #1C4E80, sky accent #2E9CCA,
            warm signal #F2A93B, off-white #F7F9FB, ink #16232E
   Type: 'Sora' (display/headings) + 'Inter' (body)
=========================================================== */

:root{
  --navy: #0E2A47;
  --steel: #1C4E80;
  --sky: #2E9CCA;
  --signal: #F2A93B;
  --paper: #F7F9FB;
  --ink: #16232E;
  --ink-soft: #52616f;
  --line: #dde5ec;
  --radius: 4px;
  --maxw: 1140px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: 'Inter', -apple-system, Segoe UI, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
}
h1,h2,h3,h4{
  font-family: 'Sora', 'Inter', sans-serif;
  color: var(--navy);
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}
a{ color: inherit; text-decoration: none; }
img{ max-width:100%; display:block; }
.wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* -------- Header -------- */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height: 78px;
}
.site-header .logo img{ height: 42px; }
.site-header nav ul{
  list-style:none; display:flex; gap: 2.2rem; margin:0; padding:0;
}
.site-header nav a{
  font-weight:600; font-size:.92rem; letter-spacing:.03em;
  text-transform: uppercase; color: var(--steel);
  padding: .3rem 0; border-bottom: 2px solid transparent;
  transition: border-color .2s, color .2s;
}
.site-header nav a:hover,
.site-header nav a:focus-visible{ color: var(--signal); border-color: var(--signal); }

/* -------- Hero / Our Focus -------- */
.hero{
  background: linear-gradient(160deg, var(--navy) 0%, var(--steel) 62%, var(--sky) 130%);
  color: #fff;
  padding: 5.5rem 0 4.5rem;
}
.hero .eyebrow{
  color: var(--signal); font-weight:700; letter-spacing:.16em;
  text-transform: uppercase; font-size:.8rem; margin-bottom:.9rem;
}
.hero h1{
  color:#fff; font-size: clamp(2rem, 4vw, 2.9rem); max-width: 20ch;
}
.hero blockquote{
  margin: 1.6rem 0 0; padding-left: 1.2rem;
  border-left: 3px solid var(--signal);
  font-size: 1.15rem; color: #dfe9f2; max-width: 62ch; font-style: italic;
}

/* -------- Aim strip -------- */
.aim-strip{
  background: var(--signal);
  color: var(--navy);
  padding: 2.2rem 0;
  text-align:center;
}
.aim-strip h2{ color: var(--navy); font-size:1rem; letter-spacing:.14em; text-transform:uppercase; }
.aim-strip p{ margin:0; font-size:1.15rem; font-weight:600; max-width: 60ch; margin:0 auto;}

/* -------- Values (Speed / Integrity / Reliability) -------- */
.values{ padding: 4.5rem 0; }
.values .grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap: 2rem;
}
.value-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  padding: 2.2rem 1.8rem; text-align:center;
  border-top: 3px solid var(--sky);
  transition: transform .18s, box-shadow .18s;
}
.value-card:hover{ transform: translateY(-4px); box-shadow: 0 12px 28px rgba(14,42,71,.09); }
.value-card img{ height:52px; margin: 0 auto 1.1rem; }
.value-card h4{ text-transform:uppercase; letter-spacing:.08em; font-size:1rem; }
.value-card p{ color: var(--ink-soft); font-size:.95rem; margin:0; }

/* -------- Mission -------- */
.mission{ background:#fff; padding: 4.5rem 0; border-top:1px solid var(--line); }
.mission .inner{ display:grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items:start;}
.mission h2{ font-size:1.9rem; }
.mission-list{ list-style:none; margin:1.6rem 0 0; padding:0; display:grid; gap: 1.1rem; }
.mission-list li{ display:flex; gap:.8rem; align-items:flex-start; }
.mission-list .mark{
  flex:0 0 auto; width:22px; height:22px; border-radius:50%;
  background: var(--sky); color:#fff; font-size:.7rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; margin-top:.2rem;
}
.mission-list h5{ margin:0 0 .15rem; font-size:.98rem; color: var(--navy); }
.mission-list p{ margin:0; color: var(--ink-soft); font-size:.9rem; }
.mission-media img{ border-radius: var(--radius); }
.mission-media p{ color: var(--ink-soft); font-size:.95rem; margin-top:1rem; }
.mission-media strong{ color: var(--navy); }

/* -------- About -------- */
.about{ padding: 4.5rem 0; }
.about .inner{ display:grid; grid-template-columns: 1fr 1.1fr; gap: 3rem; align-items:center; }
.about img{ border-radius: var(--radius); }
.about h2{ font-size: 1.9rem; }
.about p{ color: var(--ink-soft); }
.about strong{ color: var(--navy); }
.cta-btn{
  display:inline-block; margin-top: 1.2rem;
  background: var(--navy); color:#fff; font-weight:600;
  padding: .8rem 1.7rem; border-radius: var(--radius);
  letter-spacing:.03em; transition: background .2s;
}
.cta-btn:hover{ background: var(--steel); }

/* -------- Contact page -------- */
.page-title{
  background: var(--navy); color:#fff; padding: 3rem 0; text-align:center;
}
.page-title h1{ color:#fff; margin:0; }
.contact-section{ padding: 4rem 0; }
.contact-section .inner{ display:grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; }
.form-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  padding: 2rem;
}
.form-card h3{ margin-top:0; }
.field{ margin-bottom: 1.1rem; }
.field label{ display:block; font-size:.85rem; font-weight:600; color: var(--navy); margin-bottom:.35rem; }
.field input, .field textarea{
  width:100%; padding:.7rem .8rem; border:1px solid var(--line); border-radius: var(--radius);
  font-family:inherit; font-size:.95rem;
}
.field textarea{ min-height: 130px; resize: vertical; }
.form-card button{
  background: var(--signal); color: var(--navy); border:none; font-weight:700;
  padding: .8rem 1.8rem; border-radius: var(--radius); cursor:pointer;
  letter-spacing:.03em; transition: background .2s;
}
.form-card button:hover{ background: #e0961f; }
.info-card{ color: var(--ink-soft); }
.info-card h4{ text-transform:uppercase; font-size:.85rem; letter-spacing:.1em; color: var(--steel); }
.info-card dl{ margin: 1rem 0 0; }
.info-card dt{ font-weight:700; color: var(--navy); margin-top: 1rem; }
.info-card dd{ margin:.2rem 0 0; }

/* -------- Footer -------- */
.site-footer{
  background: var(--navy); color:#cfd9e3; padding: 3rem 0 2rem;
}
.site-footer .inner{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1.5rem; }
.site-footer img{ height:38px; margin-bottom:.6rem; }
.site-footer .tagline{ font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:#9fb1c1; }
.site-footer .social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border:1px solid #2c4c68; border-radius:50%;
  transition: border-color .2s, color .2s;
}
.site-footer .social a:hover{ border-color: var(--signal); color: var(--signal); }
.site-footer .legal{ font-size:.78rem; color:#7f93a5; margin-top: 1.6rem; }

/* -------- Responsive -------- */
@media (max-width: 860px){
  .site-header nav ul{ gap: 1.2rem; }
  .values .grid{ grid-template-columns: 1fr; }
  .mission .inner, .about .inner, .contact-section .inner{ grid-template-columns: 1fr; }
  .mission-media{ order: -1; }
}
@media (prefers-reduced-motion: reduce){
  .value-card{ transition:none; }
}