:root {
  --ink: #08212b;
  --panel: #0a2630;
  --white: #102731;
  --muted: #55707a;
  --cyan: #00a9c7;
  --blue: #0c79d4;
}

body {
  background: #08212b;
}

.site-header {
  max-width: none;
  padding-left: max(48px, 8vw);
  padding-right: max(48px, 8vw);
  background: #0b3436;
  border-bottom: 1px solid rgba(199, 232, 232, 0.12);
}

.brand { color: #f7fbfb; }
.brand small { color: #94afb2; }
.main-nav > a:not(.button) { color: #c2d4d4; }
.main-nav > a:not(.button):hover { color: #007f9e; }

.hero {
  min-height: 720px;
  grid-template-columns: minmax(370px, 615px);
  background-image: linear-gradient(90deg, rgba(4, 15, 18, 0.98) 0%, rgba(4, 15, 18, 0.9) 35%, rgba(4, 15, 18, 0.42) 62%, rgba(4, 15, 18, 0.08) 100%), url("assets/beach-office-hero.png?v=13");
  background-position: center, center;
  background-size: cover;
}

.hero h1 { color: #f8ffff; }
.hero h1 em { color: #12d3dd; }
.hero-text { color: #c3d5d5; }
.hero-note { color: #a9c0c1; }
.eyebrow { color: #007f9e; }
.button { color: #f8ffff; background: linear-gradient(115deg, #008eac, #0874cf); box-shadow: 0 12px 28px rgba(0, 107, 145, 0.2); }
.button span { color: #d8fbff; }
.text-link { color: #092a35; }

.trust-strip { background: #f7f4ea; border-color: rgba(8, 33, 43, 0.1); color: #48616a; }

@media (max-width: 900px) {
  .site-header { padding-left: 30px; padding-right: 30px; background: #0b3436; }
  .hero { background-position: center, 62% center; }
  .main-nav.is-open { background: #fbfaf4; border-bottom-color: rgba(8, 33, 43, 0.1); }
}

@media (max-width: 560px) {
  .site-header { padding-left: 22px; padding-right: 22px; background: #0b3436; }
  .hero {
    min-height: 650px;
    background-image: linear-gradient(90deg, rgba(4, 15, 18, 0.94), rgba(4, 15, 18, 0.6)), url("assets/beach-office-hero.png?v=13");
    background-position: center, 67% center;
  }
}