/* Design: Horizon. The banner becomes a full-height hero with the globe in view, under a navy
   header, with soft cards and pill buttons below. Loads after site.css. */

:root { --radius: 8px; --night: #0b2a40; }

.btn { border-radius: 999px; }

/* Header */
.site-header {
  --ink: #ffffff;
  --ink-2: #c6d8e4;
  --mark: #ffffff;
  border-bottom: 0;
  background: var(--night);
  color: #ffffff;
}
.site-header .submenu, .site-header .nav-mobile { --ink: #0f2a3f; --ink-2: #3f5566; --mark: #cf141c; }
.site-header .btn-mark { background: #cf141c; border-color: #cf141c; color: #ffffff; }
.site-header .btn-mark:hover { background: #ad0f16; border-color: #ad0f16; }
.site-header :focus-visible { outline-color: #ffffff; }
.site-header .nav-mobile :focus-visible, .site-header .submenu :focus-visible { outline-color: var(--focus); }
.site-header .submenu, .site-header .nav-mobile { background: #ffffff; border-color: #d5dee5; }
.site-header .submenu a:hover, .site-header .submenu a[aria-current="page"] { background: #eef3f7; }

/* Hero: everything sits on the banner */
.hero {
  padding-block: clamp(48px, 7vw, 104px);
  border-bottom: 0;
  background: linear-gradient(100deg, rgba(8, 32, 50, 0.72), rgba(8, 32, 50, 0.5) 60%, rgba(8, 32, 50, 0.42)), #0f3a57 url("../img/banner.jpg") right center / cover no-repeat;
}
.hero-banner { padding-block: 0; background: none; }
.hero-copy {
  --ink: #ffffff;
  --ink-2: #dbe7ef;
  --paper: #0f2a3f;
  color: #ffffff;
}
.hero :focus-visible { outline-color: #ffffff; }
.erd-canvas { border: 0; border-radius: 16px; box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.55); }
.erd figcaption { color: #dbe7ef; }

/* Cards */
.service-rows, .why-grid, .models, .case-teasers { display: grid; gap: 20px; border-top: 0; }
.service-rows, .models, .case-teasers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.service-row, .why-item, .model, .case-teaser {
  display: block;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 12px 30px -24px var(--shadow);
}
.service-row { transition: transform 150ms ease, box-shadow 150ms ease; }
.service-row:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -20px var(--shadow); }
.service-row h3 { margin-bottom: 10px; font-size: var(--step-1); }
.doc-sheet, .fit-panel, .proof-card { border-radius: 14px; }

.cta-band {
  background: linear-gradient(rgba(8, 32, 50, 0.55), rgba(8, 32, 50, 0.55)), #0f3a57 url("../img/banner.jpg") right center / cover no-repeat;
}

/* Inner pages share the hero treatment */
.page-head {
  --ink: #ffffff;
  --ink-2: #dbe7ef;
  --ink-3: #dbe7ef;
  border-bottom: 0;
  background: linear-gradient(rgba(8, 32, 50, 0.55), rgba(8, 32, 50, 0.55)), #0f3a57 url("../img/banner.jpg") right center / cover no-repeat;
  color: #ffffff;
}
.page-head :focus-visible { outline-color: #ffffff; }

.site-footer {
  --ink: #ffffff;
  --ink-2: #c6d8e4;
  --ink-3: #c1d4e0;
  --line: rgba(255, 255, 255, 0.2);
  --mark: #ffffff;
  border-top: 0;
  background: var(--night);
  color: #ffffff;
}

@media (max-width: 859px) {
  .service-rows, .models, .case-teasers { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 759px) {
  .why-grid { grid-template-columns: minmax(0, 1fr); }
}
.site-footer .todo { color: #0f2a3f; }