:root {
  --ih-blue: #1f6fae;
  --ih-deep: #143955;
  --ih-cyan: #29a7c7;
  --ih-soft: #eef7fb;
  --ih-border: #dbe7ef;
}
.md-header { background-color: var(--ih-deep); }
.md-tabs { background-color: #1f6fae; }
/* Make the header logo more prominent — Material's default is quite small */
.md-header__button.md-logo img,
.md-header__button.md-logo svg { height: 2rem; width: auto; }
.md-typeset h1, .md-typeset h2, .md-typeset h3 { color: var(--ih-deep); font-weight: 400; }
.md-typeset a { color: #1f6fae; text-decoration: underline; text-decoration-thickness: from-font; }
.md-typeset a:hover { color: var(--ih-deep); }
/* Nav/button/card-title links are positionally distinct already, so color alone is fine there (WCAG 1.4.1) */
.md-tabs__link, .md-nav__link, .ih-button, .ih-card h3 a { text-decoration: none; }

/* Centered hero (Wix-style). Width-of-content-column by default — safe at every breakpoint,
   including the "tablet" width where Material shows a persistent left sidebar (the old 100vw/
   negative-margin breakout trick is relative to the viewport, not the content column, so it
   overlapped that sidebar). True edge-to-edge bleed is added back only at the wide desktop
   breakpoint (>=76.25em) where Material switches to top tabs and there is no left sidebar. */
.ih-hero {
  width: 100%;
  margin: 0 0 2.5rem 0;
  padding: 3.5rem 2rem;
  border-radius: 18px;
  background-size: cover;
  background-position: center 75%; /* the source photo's bright horizon/sun-glare band sits low in the frame */
  color: white;
  text-align: center;
}
@media (min-width: 76.25em) {
  .ih-hero {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    margin-top: -1.5rem;
    margin-bottom: 2.5rem;
    padding: 5rem 2rem;
    border-radius: 0;
  }
}
.ih-hero .ih-hero-inner { max-width: 760px; margin: 0 auto; }
.ih-hero h1, .ih-hero h2, .ih-hero p { color: white; }
.ih-hero h1 { font-size: 3.2rem; margin-bottom: .3rem; font-weight: 300; letter-spacing: .01em; }
.ih-hero h2 { font-size: 1.25rem; margin-top: .25rem; font-weight: 300; opacity: .95; }
.ih-hero p { font-size: 1.05rem; }
.ih-hero .ih-kicker { color: white; opacity: .85; }
.ih-button { display:inline-block; margin:.25rem .5rem .25rem 0; padding:.7rem 1rem; border-radius:6px; background:#1f6fae; color:white !important; font-weight:600; text-decoration:none; }
.ih-button.secondary { background:white; color:#1f6fae !important; border:1px solid #1f6fae; }
@media (max-width: 760px) {
  .ih-hero h1 { font-size: 2.2rem; }
}
.ih-card-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:1rem; margin:1.1rem 0 2rem 0; }
.ih-card { border:1px solid var(--ih-border); border-radius:14px; padding:1rem; background:#fff; box-shadow:0 6px 20px rgba(20,57,85,.07); }
.ih-card h3 { margin-top:.2rem; font-weight:600; }
.ih-card img { width:100%; height:160px; object-fit:cover; border-radius:10px; margin-bottom:.75rem; background:#f5f7f9; }
.ih-card.tall img { height:230px; object-fit:contain; }
.ih-card.logo img { height:100px; object-fit:contain; }
.ih-kicker { text-transform:uppercase; letter-spacing:.08em; color:#1f6fae; font-size:.75rem; font-weight:700; margin-bottom:.4rem; }
.ih-highlight { background:var(--ih-soft); border-left:5px solid var(--ih-cyan); padding:1rem; border-radius:8px; margin:1rem 0 1.5rem 0; }
.ih-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.75rem; margin:1rem 0 2rem; }
.ih-metric { background:#fff; border:1px solid var(--ih-border); border-radius:12px; padding:1rem; text-align:center; }
.ih-metric strong { display:block; font-size:1.6rem; color:var(--ih-blue); }
.ih-timeline .ih-entry { border-left:3px solid var(--ih-cyan); padding:.2rem 0 1rem 1rem; margin-left:.35rem; }
.ih-entry h3 { margin-bottom:.15rem; }
.ih-meta { color:#5f6f7a; font-size:.9rem; margin-top:0; }
.ih-project-hero { width:100%; max-height:360px; object-fit:cover; border-radius:16px; box-shadow:0 8px 28px rgba(20,57,85,.12); margin:1rem 0; }
/* Portrait headshot treatment — distinct from the wide project-hero banner crop, which zooms badly on portrait photos */
.ih-headshot { display:block; width:260px; max-width:80%; border-radius:16px; box-shadow:0 8px 28px rgba(20,57,85,.12); margin:1rem auto 1.5rem; }
.ih-small-note { color:#5f6f7a; font-size:.88rem; } /* darkened from #697a86: that failed WCAG AA (4.44:1); #5f6f7a passes at 5.2:1 */
.ih-logo-strip { display:flex; gap:1.5rem; flex-wrap:wrap; align-items:center; margin:1rem 0 2rem; }
.ih-logo-strip img { max-height:68px; max-width:180px; object-fit:contain; }

/* Dark mode overrides — card/metric/highlight components hardcoded light-mode colors and went unreadable under the slate palette */
[data-md-color-scheme="slate"] .ih-card {
  background: var(--md-default-bg-color);
  border-color: var(--md-default-fg-color--lightest);
}
[data-md-color-scheme="slate"] .ih-metric {
  background: var(--md-default-bg-color);
  border-color: var(--md-default-fg-color--lightest);
}
[data-md-color-scheme="slate"] .ih-highlight {
  background: var(--md-code-bg-color);
}
[data-md-color-scheme="slate"] .ih-button.secondary {
  background: var(--md-default-bg-color);
  color: #6cb1e8 !important;
  border-color: #6cb1e8;
}
[data-md-color-scheme="slate"] .ih-card img {
  background: var(--md-code-bg-color);
}