/* Fonts: Barlow, Barlow Semi Condensed and Inter, all SIL Open Font License. */
@font-face { font-family: "Barlow"; src: url("/assets/fonts/barlow-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/assets/fonts/barlow-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("/assets/fonts/barlow-semi-condensed-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --blue: #00548b;
  --green: #25b570;
  --ink: #202c16;
  --grey: #777;
  --paper: #f7f7f7;
  --gutter: 7.5%;
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background: var(--paper); color: var(--blue); font: 500 19px/1.6 "Barlow", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
img, video, svg { display: block; }
a { color: inherit; text-decoration: none; transition: color .2s; }
a:hover { color: var(--green); }

/* Header */
.site-header { position: fixed; inset: 0 0 auto; z-index: 10; background: #fff; box-shadow: 0 0 20px 10px rgba(0, 0, 0, .08); }
.site-header__bar { display: flex; align-items: center; justify-content: space-between; height: 70px; padding: 0 30px; }
.logo img { width: 167px; height: 30px; }
.site-nav { display: flex; gap: 20px; font: 600 16px/1.4 "Inter", sans-serif; letter-spacing: -.02em; }
.menu-toggle { display: none; }

/* Hero */
.hero { position: relative; height: 100vh; overflow: hidden; background: var(--blue); }
.hero__video { position: absolute; top: 0; left: 50%; width: max(100%, 240vh); height: 100%; transform: translateX(-50%); object-fit: cover; }
.hero__video--mobile { display: none; }

/* Sections */
.split { display: grid; grid-template-columns: 2fr 5fr; column-gap: 40px; padding: 100px var(--gutter); }
h2 { color: var(--green); font: 500 60px/1 "Barlow Semi Condensed", sans-serif; text-transform: uppercase; }
.split__side { text-align: center; }
h3 { color: var(--ink); font: 700 20px/1.1 "Barlow", sans-serif; letter-spacing: .2em; text-transform: uppercase; }
.split--services h3 { margin-bottom: 20px; }

.portrait { width: 180px; height: 180px; margin: 40px auto 0; border-radius: 20px; box-shadow: 0 0 30px rgba(0, 0, 0, .06); }
.person { display: flex; align-items: center; justify-content: space-between; height: 40px; margin-bottom: 30px; }
.linkedin { display: block; width: 40px; height: 40px; padding: 4px; }
.linkedin svg { width: 32px; height: 32px; fill: var(--blue); transition: fill .2s; }
.linkedin:hover svg { fill: var(--green); }

/* Photo bands: full-width photos cropped to a fixed height. */
.band { height: 300px; overflow: hidden; }
.band--tall { height: 405px; }
.band img { width: 100%; height: 100%; object-fit: cover; }
.band--top img { object-position: top; }
.band--bottom img { object-position: bottom; }

/* Contact */
.contact { padding: 100px var(--gutter); text-align: center; }
.contact__email { display: inline-block; margin-top: 40px; font-size: 20px; line-height: 32px; }
.contact__legal { margin-top: 40px; color: var(--grey); font-size: 16px; line-height: 1.6; }

/* Small desktop and landscape tablet */
@media (max-width: 1199.98px) {
  body { font-size: 14px; }
  h2 { font-size: 44px; }
  h3 { font-size: 16px; }
  .site-nav { font-size: 13px; }
  .contact__legal { font-size: 12px; }
}

/* Phone and portrait tablet */
@media (max-width: 809.98px) {
  html { scroll-padding-top: 20px; }
  h2 { font-size: 50px; }
  h3 { font-size: 13px; }

  .menu-toggle { display: block; width: 28px; height: 28px; padding: 0; border: 0; background: none; color: var(--blue); cursor: pointer; }
  .menu-toggle svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.5; }
  .menu-toggle .icon-close { display: none; }
  .site-header.is-open .menu-toggle { color: var(--green); }
  .site-header.is-open .icon-open { display: none; }
  .site-header.is-open .icon-close { display: block; }

  .site-header__bar { flex-wrap: wrap; height: auto; padding: 20px 30px; }
  .site-nav { display: none; flex-basis: 100%; flex-direction: column; align-items: center; gap: 16px; padding: 39px 0 20px; font-size: 14px; }
  .site-header.is-open .site-nav { display: flex; }

  .hero { height: max(844px, 216.34vw); }
  .hero__video { left: 0; width: 100%; transform: none; }
  .hero__video--desktop { display: none; }
  .hero__video--mobile { display: block; }

  .split { display: block; padding: 60px var(--gutter) 100px; }
  .split__side { margin-bottom: 40px; text-align: left; }
  .split--team .split__side { text-align: center; }
  .band, .band--tall { height: 200px; }
  .contact__legal { font-size: 10px; }
}

/* Portrait tablet and large phones get more room above About and Services. */
@media (min-width: 391px) and (max-width: 809.98px) {
  #about, #services { padding-top: 100px; }
}