/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }

:root{
  --border: #e9e9e9;
  --border-strong: #eee;
  --text: #111;
  --muted: #333;

  --container: 1040px;

  /* CTA sizing */
  --cta-gap: 18px;
  --cta-radius: 16px;
  --cta-pad: 26px;
  --cta-minh: 250px;

  /* Icon badge (standardized) */
  --badge: 56px;            /* change this to 52/60 if you want */
  --badge-radius: 9px;    /* circle 999px; use 12px for rounded square */
  --badge-bg: #fafafa;
  --badge-border: #ededed;

  /* Inside-image sizing */
  --icon-scale: 0.68;       /* how much of the badge the image fills */
}

/* =========================
   Global
========================= */
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin: 0;
  line-height: 1.5;
  color: var(--text);
}

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

/* =========================
   Header / Nav
========================= */
.site-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-strong);
  position: sticky;
  top: 0;
  background: #fff;
}

.brand{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  text-decoration: none;
  color: inherit;
}

.brand-text{ white-space: nowrap; }

.logo{
  width: 80px;
  height: 80px;
  object-fit: contain;
  flex: 0 0 auto;
}

.nav a{
  margin-left: 12px;
  text-decoration: none;
  color: inherit;
}
.nav a:hover{ text-decoration: underline; }

/* =========================
   Footer
========================= */
.site-footer{
  border-top: 1px solid var(--border-strong);
  padding: 16px 24px;
}

/* =========================
   Hero
========================= */
.hero{
  padding: 28px 0 14px;
  margin: 0;
  max-width: none;   /* <-- important: don't constrain the whole hero */
  text-align: left;
}

.hero h1{
  margin: 0 0 10px;
  font-size: 40px;
  line-height: 1.15;
}

/* Keep only the paragraph readable */
.hero .tagline{
  margin: 0;
  max-width: 85ch;
}

/* Contact line can stay full width (or keep it narrow if you prefer) */
.hero .contact-line{
  margin: 12px 0 0;
}

/* =========================
   CTA Grid
========================= */
.cta-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cta-gap);
  margin-top: 22px;

  /* force consistent behavior */
  justify-items: stretch;
  align-items: stretch;
}

.cta-card{
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--cta-radius);
  padding: var(--cta-pad);
  text-decoration: none;
  color: inherit;
  background: #fff;
  min-height: var(--cta-minh);
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.cta-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.06);
}

/* =========================
   CTA Title Row (Stable!)
========================= */
.cta-title{
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
}

/* The badge is THE standardizer */
.cta-icon-wrap{
  width: var(--badge);
  height: var(--badge);
  border-radius: var(--badge-radius);
  background: var(--badge-bg);
  border: 1px solid var(--badge-border);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;
  overflow: hidden; /* prevents any weird PNG overflow */
}

/* Icon itself: always fits, never overlaps text */
.cta-icon{
  width: calc(var(--badge) * var(--icon-scale));
  height: calc(var(--badge) * var(--icon-scale));
  object-fit: contain;
  display: block;
}

/* Title typography */
.cta-title-text{
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
}

/* Body copy + link */
.cta-text{ margin: 0 0 14px; color: var(--muted); }
.cta-link{ font-weight: 600; text-decoration: underline; }

/* =========================
   Responsive
========================= */
@media (max-width: 900px){
  .cta-grid{ grid-template-columns: 1fr; }
  .hero h1{ font-size: 34px; }
}