/* Remote Flight Pty Ltd's website (D158): plain pages, no scripts, no cookies, nothing loaded from anywhere else. The colours are the logo's. */

:root {
  --navy: #15283a;
  --navy-soft: #2a4157;
  --khaki: #b5b38c;
  --khaki-light: #e9e8d9;
  --ink: #1b2733;
  --muted: #56636f;
  --line: #e2e2d6;
  --white: #ffffff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
}

a { color: var(--navy-soft); }
a:hover { color: var(--navy); }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

header.site { background: var(--navy); }
header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--white); font-weight: 800; font-size: 1.2rem; letter-spacing: 0.08em; text-transform: uppercase; }
.brand img { width: 48px; height: 48px; border-radius: 6px; }
nav a { margin-left: 22px; text-decoration: none; color: var(--khaki-light); font-weight: 500; }
nav a:first-child { margin-left: 0; }
nav a:hover { color: var(--white); }

/* The banner: a silent, looping film behind the words, darkened on the left so they can be read. Its first frame stands in while it loads,
   and instead of it for anyone who has asked their device for less motion. */
.hero { position: relative; overflow: hidden; background: var(--navy) url("banner.jpg") center / cover no-repeat; }
.hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(21, 40, 58, 0.88) 0%, rgba(21, 40, 58, 0.62) 50%, rgba(21, 40, 58, 0.15) 100%); }
.hero .wrap { position: relative; z-index: 1; display: flex; align-items: center; min-height: 480px; padding-top: 64px; padding-bottom: 64px; }
.hero .wrap > div { max-width: 600px; }
.hero h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1.2; margin: 0 0 16px; color: var(--white); }
.hero p { font-size: 1.12rem; color: var(--khaki-light); margin: 0 0 22px; }
.button { display: inline-block; background: var(--navy); color: var(--white); text-decoration: none; padding: 12px 22px; border-radius: 6px; font-weight: 600; }
.button:hover { background: var(--navy-soft); color: var(--white); }
.hero .button { background: var(--khaki); color: var(--navy); }
.hero .button:hover { background: var(--khaki-light); color: var(--navy); }
@media (max-width: 760px) { .hero .wrap { min-height: 380px; } .hero::after { background: rgba(21, 40, 58, 0.7); } }
@media (prefers-reduced-motion: reduce) { .hero video { display: none; } }

section { padding: 56px 0; }
section + section { border-top: 1px solid var(--line); }
h2 { font-size: 1.7rem; margin: 0 0 8px; color: var(--navy); }
.lead { color: var(--muted); font-size: 1.08rem; max-width: 720px; margin: 0 0 28px; }

.services { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.service { border: 1px solid var(--line); border-top: 4px solid var(--khaki); border-radius: 8px; padding: 22px; }
.service h3 { margin: 0 0 8px; font-size: 1.15rem; color: var(--navy); }
.service p { margin: 0; color: var(--muted); }

.contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.contact div { background: var(--khaki-light); border-radius: 8px; padding: 18px 20px; }
.contact strong { display: block; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 4px; }

footer.site { background: var(--navy); color: var(--khaki-light); padding: 22px 0; font-size: 0.9rem; }
footer.site .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
footer.site a { color: var(--khaki-light); margin-left: 16px; }

.page { padding: 48px 0; max-width: 760px; }
.page h1 { font-size: 2rem; margin-top: 0; color: var(--navy); }
.page h2 { font-size: 1.25rem; margin-top: 28px; }
.updated { color: var(--muted); }