:root{
  /* Option C — Fresh & Technical */
  --bg: #F8FAFC;           /* page background */
  --surface: #FFFFFF;      /* cards/sections */
  --surface-2: #F1F5F9;    /* subtle section alt bg */
  --border: #E2E8F0;

  /* Layout */
  --max: 1040px; /* keeps content from feeling edge-to-edge */
  --pad: 24px;

  --text: #0F172A;         /* dark slate */
  --muted: #64748B;        /* slate gray */

  --accent: #0D9488;       /* teal */
  --accent-hover: #0F766E; /* darker teal */

  --shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
  --radius: 16px;
}

/*
  IMPORTANT:
  Dark-mode overrides were removed on purpose.
  GitHub Pages sites should look consistent regardless of a visitor's OS theme.
  If you want a dark mode later, we can add a toggle.
*/

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}

/* Links + buttons */
a{ color: var(--accent); }
a:hover{ color: var(--accent-hover); }

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

.header{
  position:sticky;top:0;z-index:10;
  backdrop-filter:saturate(160%) blur(10px);
  background:color-mix(in oklab, var(--bg), transparent 10%);
  border-bottom:1px solid var(--border);
}
.header-inner{
  max-width:var(--max);margin:0 auto;padding:14px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding: 2rem 2rem;
}

.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{height:42px;width:auto;display:block}

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

.logo-wrap{
  display: flex;
  align-items: center;
}

.logo-wrap img{
  height: 90px;        /* ← primary control */
  width: auto;
  max-width: none;
}


.nav{display:flex;gap:18px;flex-wrap:wrap}
.nav a{text-decoration:none;color:var(--muted);font-weight:600}
.nav a:hover{color:var(--text)}

.hero{padding:72px 0 44px;display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:start}
.hero h1{font-size:clamp(34px,5vw,54px);line-height:1.05;margin:0 0 10px}
.hero p{margin:0 0 18px;color:var(--muted);font-size:clamp(16px,2vw,19px)}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}

.kicker{display:inline-flex;align-items:center;gap:10px;padding:7px 12px;border-radius:999px;border:1px solid var(--border);color:var(--muted);font-weight:600;font-size:13px}
.kicker-dot{width:8px;height:8px;border-radius:999px;background:var(--accent)}

.btnrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 16px;border-radius:14px;font-weight:800;text-decoration:none;border:1px solid var(--border)}
/* HTML uses class="btn primary" */
.btn.primary{
  background: var(--accent);
  color: #fff;
  border-color: rgba(255,255,255,0.14);
}
.btn.primary:hover{ background: var(--accent-hover); }
.btn.ghost{background:transparent;color:var(--text)}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.section{padding:46px 0}
.section + .section{border-top:1px solid var(--border)}
.section h2{margin:0 0 10px;font-size:22px}
.section p.lead{margin:0 0 18px;color:var(--muted)}

.service-title{margin:0 0 8px;font-size:18px}
.small{color:var(--muted);margin:0}

.form{display:grid;gap:12px;margin-top:10px}
.input{width:100%;padding:12px 12px;border-radius:12px;border:1px solid var(--border);background:color-mix(in oklab, var(--surface), transparent 0%);color:var(--text)}
label{font-weight:700;font-size:13px;color:var(--muted)}

.footer{padding:30px 0 60px;color:var(--muted);text-align:center;font-size:14px;border-top:1px solid var(--border);margin-top:34px}

/* Make sections breathe on large screens */
main.container{padding-left:var(--pad);padding-right:var(--pad)}

/* Optional subtle background banding for depth */
.section.band{
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.badge{font-size:12px;border:1px solid var(--border);border-radius:999px;padding:6px 10px;color:var(--muted)}

.card, .section-block{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.section-alt{
  background: var(--surface-2);
}


@media (max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:34px}
  .grid{grid-template-columns:1fr}
  .header{position:static}
}