:root{
  --blue:#0E5BD9;
  --navy:#0B1B2B;
  --ink:#0a1522;
  --muted:#4a6076;
  --line:#e7edf4;
  --shadow:0 18px 36px rgba(0,0,0,.15);
  --radius:16px;
  --container:1100px; /* tighter for 480–1024 sweet spot */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:#fff;color:var(--ink);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
.container{max-width:var(--container);margin-inline:auto;padding:0 18px}
.kicker{letter-spacing:.18em;text-transform:uppercase;color:#7390ab;font-size:.78rem;margin:.25rem 0 .75rem}
.muted-body{color:#56708a}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:1rem;top:1rem;background:#000;color:#fff;padding:.5rem .75rem;border-radius:.5rem;z-index:10000}

/* image mask fixes rounded-corner issue */
.media-mask{border-radius:16px;overflow:hidden;background:#000}
.media-mask img{border-radius:0!important;display:block;width:100%;height:100%;object-fit:cover}

/* Header (white) */
.site-header.light{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #e9eef5}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.site-nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.site-nav a{color:#2a3b4d;text-decoration:none;font-weight:600}
.site-nav a:hover{color:#000}
.nav-toggle{display:none;background:none;border:1px solid #c9d6e3;padding:.35rem .6rem;border-radius:.5rem}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;text-decoration:none;border-radius:999px;padding:.7rem 1rem;border:1px solid transparent}
.btn.primary{background:var(--blue);color:#fff;box-shadow:var(--shadow)}
.btn.ghost{border-color:#b7c9e0;color:#17314d;background:transparent}
.btn.white{background:#fff;color:#000}
.btn:hover{filter:brightness(1.04)}

/* HERO */
.hero{position:relative;min-height:64vh;display:grid;place-items:center;overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero.hero-light::after{
  content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.0) 0%,rgba(0,0,0,.55) 70%,rgba(0,0,0,.75) 100%);
}
.hero-content{position:relative;z-index:1;color:#fff;text-shadow:0 6px 24px rgba(0,0,0,.45)}
.hero-title{font-size:clamp(1.9rem,4vw,3rem);margin:0 0 .5rem}
.hero-sub{max-width:44ch;margin:0 0 1rem}

/* Split card (text left, image right) */
.split-card{padding:48px 0}
.split-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:center}
.split-head{font-size:clamp(1.4rem,3vw,2rem);margin:.25rem 0 .5rem}
.split-media{position:relative}
.split-caption{position:absolute;left:0;right:0;bottom:0;padding:.8rem;background:linear-gradient(180deg,transparent,rgba(0,0,0,.55));color:#fff}

/* Promise band */
.promise{position:relative;padding:56px 0}
.promise-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35}
.promise-content{position:relative}
.promise .lead{max-width:55ch}
.promise .em{border-bottom:3px solid var(--blue)}

/* Capabilities: 1 row / 5 cols (wrap on small) */
.cap-head{display:flex;align-items:center;justify-content:space-between;margin:8px 0 14px}
.view-all{color:#839bb4;font-size:.85rem}
.cap-row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;list-style:none;margin:0;padding:0}
.cap-tile a{display:block;position:relative}
.cap-tile img{height:40vh}
.cap-tile span{position:absolute;left:0;right:0;bottom:10%;text-align:center;color:#fff;font-weight:600;font-size:clamp(1.2rem,2.2vw,1.8rem);text-shadow:0 6px 24px rgba(0,0,0,.45)}

/* Projects (3 cards) */
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;list-style:none;padding:0;margin:0}
.proj-card a{display:block;border:1px solid #e6edf5;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.04)}
.proj-card img{aspect-ratio:16/10}
.proj-body{padding:12px 14px 16px}
.proj-body h3{margin:.2rem 0 .35rem;font-size:1.02rem}
.proj-body p{margin:0;color:#607791}

/* Highlights (1 row / 4 columns) */
.vid-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;list-style:none;margin:0;padding:0}
.vid-row a{display:block;position:relative}
.vid-row img{aspect-ratio:9/12}
.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:999px;background:#ff2d2d;color:#fff;display:grid;place-items:center;font-size:1.1rem;box-shadow:var(--shadow)}
.vid-row p{position:absolute;left:10px;top:10px;margin:0;background:rgba(0,0,0,.45);color:#fff;padding:.35rem .6rem;border-radius:.5rem}

/* Dark CTA band */
.cta-band{background:var(--navy);color:#fff;padding:56px 0;margin-top:16px}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:18px}
.cta-inner h2{margin:0;font-size:clamp(1.2rem,3vw,1.9rem)}
.btn.white{border:1px solid rgba(255,255,255,.35)}

/* Footer (white) */
.site-footer.light{border-top:1px solid #e9eef5;background:#fff;color:#0c2135}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px;align-items:start;padding:24px 0}
.site-footer a{color:#0c2135;text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.muted-dark{color:#607791;margin:.6rem 0 0}

/* Reveal on scroll */
.observe{opacity:0;transform:translateY(14px);transition:opacity .6s ease, transform .6s ease}
.observe.revealed{opacity:1;transform:none}

/* RESPONSIVE — tuned for 480–1024 */
@media (max-width: 1024px){
  :root{ --container:920px }
  .cap-row{grid-template-columns:repeat(5,1fr)}
  .cap-tile img{height:32vh}
  .split-grid{grid-template-columns:1fr;gap:18px}
  .proj-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 768px){
  :root{ --container:92vw }
  .site-nav ul{display:none;position:absolute;right:18px;top:64px;background:#fff;border:1px solid #e3eaf3;border-radius:10px;padding:12px;box-shadow:var(--shadow)}
  .site-nav ul.show{display:grid;gap:10px}
  .nav-toggle{display:inline-block}
  .cap-row{grid-template-columns:repeat(2,1fr)}
  .proj-grid{grid-template-columns:1fr}
  .vid-row{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 480px){
  .hero{min-height:58vh}
  .cap-tile img{height:28vh}
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}
}
/* 1) Add this near your :root */
:root{
  /* ...existing vars... */
  --header-h: 64px;
}

/* 2) Keep your existing .site-header.light as-is (sticky is fine) */

/* 3) Push the hero content + image down */
.hero{
  padding-top: var(--header-h); /* ensures visible gap under the white header */
}

/* 4) (Optional) If the hero looks too tall on mobile, trim a bit */
@media (max-width: 480px){
  .hero{ padding-top: calc(var(--header-h) - 8px); }
}
/* Keeps the wordmark tidy */
.brand img{
  height: 32px;       /* or 32px if you prefer */
  width: auto;
  display: block;
}