:root {
  --ink:#17343c;
  --muted:#64777d;
  --deep:#102f38;
  --sea:#1e6a74;
  --paper:#fffdfa;
  --line:#dce5e2;
  --soft:#edf4f1;
  --shadow:0 20px 55px rgba(16,47,56,.10);
}

* { box-sizing:border-box; }
html { color-scheme:light; }
body { margin:0; min-height:100vh; background:linear-gradient(145deg,#f8f9f6 0%,#edf5f1 100%); color:var(--ink); font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.shell { width:min(920px,calc(100% - 36px)); margin-inline:auto; }
.intro { padding:48px 0 76px; }
.brand { display:inline-block; margin-bottom:76px; color:var(--deep); font-size:18px; font-weight:900; text-decoration:none; }
.eyebrow { margin:0; color:var(--sea); font-size:12px; font-weight:900; letter-spacing:.17em; }
.eyebrow.dark { color:var(--sea); }
h1 { max-width:760px; margin:12px 0 22px; font-size:clamp(48px,9vw,92px); line-height:.95; letter-spacing:-.055em; }
h1 span { color:var(--sea); font-weight:500; }
.lead { max-width:650px; margin:0; color:var(--muted); font-size:clamp(17px,2.5vw,21px); line-height:1.6; }
.section-head { display:flex; align-items:end; justify-content:space-between; margin-bottom:18px; }
h2 { margin:5px 0 0; font-size:34px; letter-spacing:-.03em; }
.project-card { display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center; padding:22px; border:1px solid var(--line); border-radius:22px; background:var(--paper); box-shadow:var(--shadow); color:var(--ink); text-decoration:none; transition:transform .2s ease,border-color .2s ease; }
.project-card:hover { transform:translateY(-3px); border-color:#a8c7bf; }
.project-card:focus-visible { outline:3px solid #8bc1b4; outline-offset:3px; }
.project-icon { display:grid; place-items:center; width:58px; height:58px; border-radius:18px; background:var(--soft); font-size:29px; }
.project-copy { display:grid; gap:4px; }
.project-copy strong { font-size:20px; }
.project-copy span { color:var(--muted); line-height:1.45; }
.project-arrow { color:var(--sea); font-size:30px; }
footer { display:flex; justify-content:space-between; gap:20px; margin-top:82px; padding:26px 0 38px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }

@media (max-width:560px) {
  .intro { padding-top:30px; }
  .brand { margin-bottom:58px; }
  .project-card { grid-template-columns:auto 1fr; padding:18px; }
  .project-arrow { display:none; }
  .project-copy span { font-size:14px; }
}