:root{
  --navy:#0B2545; --navy-2:#0d1b2a; --teal:#2BB0A6; --silver:#E5E7EB;
  --dark:#111827; --mid:#374151; --white:#ffffff;
}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--mid);background:var(--white)}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* Header */
/* Header layout */
header {
  background-color: #0a192f; /* navy blue */
  color: white;
  padding: 0;
  margin: 0;
}

.header-container {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* left | center | right */
  align-items: center;
  padding: 10px 20px;
}

/* Left: logo + tagline */
.logo-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo {
  height: 50px;
}

.tagline {
  font-size: 14px;
  color: white;
  opacity: 0.9;
}

/* Center nav */
.nav-center ul {
  display: flex;
  justify-content: center;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-center a {
  color: white;
  text-decoration: none;
  font-weight: 500;
}

.nav-center a:hover {
  color: #e63946; /* red accent hover */
}


/* Right nav */
.nav-right {
  display: flex;
  justify-content: flex-end;
}

.get-help-btn {
  background: #e63946; /* red accent */
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
}

/* Right-side button */
.get-help-btn {
  background-color: #e63946; /* red accent */
  color: white;
  padding: 10px 20px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.2s;
}

.get-help-btn:hover {
  background-color: #b71c1c;
}


/* Hero */
.hero{background:radial-gradient(1200px 400px at 70% -100px, rgba(43,176,166,.15), transparent), var(--navy);color:#e5ecf6}
.hero .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:start;padding:72px 0}
.kicker{text-transform:uppercase;letter-spacing:.04em;opacity:.9;font-size:.82rem}
h1{font-size:clamp(2rem,4vw,3rem);color:#f5fbfa;margin:.2rem 0 .75rem}
.hero p{color:#d8e7f2;line-height:1.6}
.badges{display:flex;gap:.6rem;margin-top:1rem;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .6rem;border:1px solid rgba(255,255,255,.2);border-radius:999px;font-size:.8rem;color:#cfe7e4}

/* Lockup */
.tilt{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.card{background:#fff;border:1px solid #eef2f7;border-radius:18px;box-shadow:0 10px 40px rgba(11,37,69,.08);padding:1.25rem}
.lockup{max-width:520px}
.lockup-row{display:flex;align-items:center;gap:16px}
.lockup .shield{height:76px;width:auto;display:block}
.wordmark .primary{font-weight:800;font-size:42px;color:#0B2545;letter-spacing:.06em}
.wordmark .reflection{font-weight:800;font-size:42px;letter-spacing:.06em;color:#0B2545;opacity:.28;transform:scaleY(-1);margin-top:-8px}

/* Grid helpers */
.grid{display:grid;gap:1.25rem}
.grid.one{grid-template-columns:1fr}
.grid.two{grid-template-columns:64px 1fr;align-items:center}
.grid.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}.lockup,.tilt .card{width:100%}}

/* Sections */
section{padding:70px 0}
h2{color:var(--dark);font-size:clamp(1.4rem,2.4vw,2rem);margin:0 0 .75rem}
h3{color:var(--dark);margin:.25rem 0}
.small{font-size:.92rem}
.logoCircle{height:64px;width:64px;border-radius:16px;background:conic-gradient(from 200deg, rgba(43,176,166,.2), rgba(11,37,69,.35));display:grid;place-items:center}
.logoCircle img{height:30px;width:auto}

/* Contact / CTA */
.cta{background:linear-gradient(180deg,rgba(43,176,166,.1),transparent), #0f223a;color:#eaf4f7}
.form{display:grid;gap:.75rem;max-width:520px}
.form input,.form textarea{padding:.8rem;border:1px solid #cfe1e7;border-radius:10px;background:#0b254503;color:#0b2545}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Readability for help card */
.help-card, .help-card h3, .help-card p, .help-card .small, .help-card div, .help-card a{color:#0B2545!important}
.help-card a{text-decoration:underline}
.help-card a:hover{color:#08304f}

/* Compliance section background */
.soft{background:linear-gradient(180deg,#f7fbfc,#fff)}

/* Footer */
footer{border-top:1px solid #e6eef5;padding:30px 0;color:#6b7280}
footer .row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:space-between}

/* === Namespaced header (no collisions) === */
.site-header{
  background: rgba(13,27,42,.96);
  backdrop-filter: saturate(1.1) blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  position: sticky; top: 0; z-index: 50;
}
.header-row{
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* left | center | right */
  align-items: center;
  height: 68px;
  gap: 12px;
}

/* Left block */
.brand-lockup{display:flex; align-items:center; gap:.6rem; color:#fff; text-decoration:none}
.brand-lockup .logo{height:32px; width:auto; display:block}
.brand-lockup .tagline{font-size:.9rem; color:#fff; opacity:.85}

/* Center nav */
.main-nav{display:flex; gap:1.2rem; justify-content:center}
.main-nav a{color:#e6ecf6; text-decoration:none; font-weight:500; opacity:.95}
.main-nav a:hover{opacity:1}

/* Right block */
.cta{display:flex; justify-content:flex-end}
.btn{display:inline-block; background:#2BB0A6; color:#08241f; padding:.55rem .9rem; border-radius:12px; font-weight:700; box-shadow:0 6px 20px rgba(43,176,166,.25)}
.btn:hover{filter:brightness(.96)}

/* Active state for About when on about.html */
body.about-page .main-nav #nav-about{ text-decoration: underline; }

/* Mobile */
@media (max-width: 900px){
  .header-row{grid-template-columns: 1fr auto auto; height:auto; padding:8px 0}
  .main-nav{display:none;} /* (simple for now; can add hamburger later) */
}

.header-cta{ display:flex; justify-content:flex-end; }
/* Grid layout for contact section */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2rem;
  align-items: start;
}

.contact-lockup {
  text-align: center;
}

.contact-lockup .shield {
  width: 80px;
  margin-bottom: 0.5rem;
}

.contact-lockup .wordmark .primary {
  color: #fff;
  font-size: 1.8rem;
  font-weight: bold;
}

.contact-lockup .wordmark .reflection {
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.4rem;
}

.contact-lockup .small {
  font-size: 0.9rem;
  color: #ccc;
  margin-top: 0.5rem;
}
/* Contact section: lockup left, form right */
.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 1.8fr;
  gap: 2rem;
  align-items: start;
}
.contact-brand { text-align: center; }
.contact-lockup { width: 100%; max-width: 420px; height: auto; display: block; margin: 0 auto; }

/* Optional: stack on small screens */
@media (max-width: 900px){
  .contact-grid { grid-template-columns: 1fr; }
  .contact-brand { order: -1; } /* logo first */
}
/* Extra space between Core Services and Why Choose DIFR */
#services .grid.three {
  margin-bottom: 3rem;  /* adjust to 2rem–4rem to taste */
}

/* Make service cards used as <a> feel clickable */
a.card { display:block; color:inherit; text-decoration:none; }
a.card:hover { transform: translateY(-2px); transition: transform .15s ease; }

/* Services polish */
.services-section { padding: 70px 0; background: linear-gradient(180deg,#f7fbfc,#fff); }
.service-cards .service { text-align: left; transition: transform .18s ease, box-shadow .18s ease; }
.service-cards .service:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(11,37,69,.08); }
.svc-ill { width: 72px; height: 72px; margin: .25rem 0 .75rem; display:block; }
.section-spacer { height: 36px; }      /* space between grids */
.section-spacer-sm { height: 18px; }   /* space before dashed card */

/* Optional: make bullets tighter and balanced */
#services ul.small { margin:.5rem 0 0 1.1rem; }
#services h3 { margin:.35rem 0 .35rem; }

/* service/why cards visual tuning */
.service-cards .service {
  display: grid;
  grid-template-columns: 80px 1fr;
  grid-template-rows: auto auto;
  grid-column-gap: 1rem;
  align-items: start;
}
.service-cards .service .svc-ill {
  grid-row: 1 / span 2;
  width: 64px; height: 64px;
  margin: .25rem 0 0;
  filter: drop-shadow(0 6px 12px rgba(11,37,69,.08));
}
.service-cards .service h3 {
  margin: 0 0 .25rem;
}
.service-cards .service ul.small {
  margin: 0.25rem 0 0 1rem;
}

/* Optional hover polish */
.service-cards .service:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(11,37,69,.10);
}

/* A little more space between the two grids on the home page */
#services .section-spacer { height: 40px; }

/* Core Services section */
#services .grid.three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  align-items: stretch; /* makes all cards equal height */
}

#services .card {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* left-align content */
  justify-content: flex-start;
  padding: 1.5rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  text-align: left;
}

#services .card img,
#services .card svg {
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
}

#services .card h3 {
  margin: 0 0 .5rem;
  font-size: 1.25rem;
}

#services .card ul {
  margin: 0;
  padding-left: 1.25rem;
}

/* Normalize all images */
img { max-width: 100%; height: auto; display: block; }

/* Cap “icon/illustration” sizes used in cards */
.svc-ill { width: 64px; height: 64px; object-fit: contain; }

/* Ensure service cards align and don’t stretch */
#services .grid.three { align-items: stretch; }
#services .card { display: grid; grid-template-columns: 64px 1fr; column-gap: 1rem; }
#services .card .svc-ill { grid-row: 1 / span 2; }