:root{
  --bg:#ffffff;
  --ink:#0b0f10;
  --muted:#3a4a48;
  --teal:#120240;    /* brand primary */
  --teal-2:#120240;  /* same as primary for a flat gradient tile */
  --line:#e7eceb;
}

*{ box-sizing:border-box }

html{
  scroll-behavior:smooth;
  scroll-padding-top:72px; /* space for sticky header if used later */
}

body{
  margin:0;
  font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans";
  color:var(--ink);
  background:var(--bg);
}

.wrapper{
  max-width:980px;
  margin:0 auto;
  padding:0 24px;
}

/* =======================
   Header
   ======================= */
header{
  border-bottom:1px solid var(--line);
  background:#fff;
}
.head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:80px;
}
.brand{
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
  color:inherit;
}
.brand img{
  height:90px; /* adjust as needed for your logo aspect ratio */
}
.badge{
  padding:10px 18px;
  border:0;                 /* no border, keep clean */
  border-radius:8px;
  color:#0b0f10;
  background:#fff;
  font-weight:700;
  font-size: 25px;
}

/* =======================
   Full-width image
   ======================= */
.full{ width:100% }
.full img{
  display:block;
  width:100%;
  height:auto;              /* natural size fallback */
}

/* Force a specific hero height (banner look).
   Change 550px to taste (e.g., 400/600/700).
   `object-fit: cover` maintains fill without distortion. */
#hero-image img{
  width:100%;
  height:550px;
  object-fit:cover;
}

/* =======================
   Sections
   ======================= */
.section{ padding:48px 0 }
.section h2{ margin:0 0 12px }
.section p{
  margin:0;
  color:#30403e;
  line-height:1.6;
}

/* =======================
   Contact
   ======================= */
.contact{
  padding:48px 0 72px;
  border-top:1px solid var(--line);
}
.grid-3{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:16px;
}
.card{
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px 16px;
  background:#f8fbfb;
}
.card a{
  color:inherit;
  text-decoration:none;
}
.card a:hover{ text-decoration:underline }

/* Contact – plain editorial style */
.card.card--plain{
  background:#fff;                /* keep your card look (or remove) */
  border:1px solid var(--line);
  gap:12px;                       /* space between icon and text */
}

/* Icon sizing and rendering */
.i{
  width:22px;                     /* tuned for 16px–18px body text */
  height:22px;
  display:block;
}

/* Outline style (inherits color from text) */
.i--outline{
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* Optional: set contact text/icon color slightly muted */
.contact .card{ color:#3a4a48; }  /* or keep default; they’ll inherit */


/* (Re)state for clarity */
.card{ gap:12px; }

/* =======================
   Footer
   ======================= */
footer{
  border-top:1px solid var(--line);
  color:#6b7b79;
  text-align:center;
  padding:18px 0 48px;
}

/* =======================
   Responsive
   ======================= */
@media (max-width:900px){
  .grid-3{ grid-template-columns:1fr }
  .brand img{ height:72px }        /* scale logo a touch on mobile */
  #hero-image img{ height:420px }  /* shorter banner on mobile if desired */
}