/* Opus Group AI: the whole site's look. Plain pages, one idea at a time.

   House rules:
   Mona Sans for everything. The italic serif on one phrase in a page's main heading and nowhere else.
   Body text 17px, 16px on a phone. Nothing under 15px on a content page.
   --ink for reading, --ink-2 for secondary. No fainter grey for words.
   One gold button per screen. Links are near white.
   Things are separated by pictures, hairlines and space, not boxes behind the text.
   Nothing moves on a content page apart from the video on Home, inside its own frame. */

@font-face { font-family: 'Mona Sans'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(/assets/fonts/mona-sans-var.woff2) format('woff2'); }
@font-face { font-family: 'Noto Serif Display'; font-style: italic; font-weight: 200; font-display: swap; src: url(/assets/fonts/noto-serif-display-italic.woff2) format('woff2'); }

:root {
  color-scheme: dark;

  --bg: #06070b;
  --bg-2: #0c0e15;
  --ink: #f6f7fb;
  --ink-2: rgba(246, 247, 251, .84);
  --ink-3: rgba(246, 247, 251, .72);
  --line: rgba(255, 255, 255, .13);
  --line-2: rgba(255, 255, 255, .26);
  --on-gold: #1a1204;

  --gold: #e9bd60;
  --gold-hi: #f9de9a;
  --gold-lo: #b78833;
  --gold-wash: rgba(233, 189, 96, .13);
  --gold-edge: rgba(233, 189, 96, .46);
  --blue: #3f8cff;
  --blue-hi: #8fc2ff;
  --blue-wash: rgba(63, 140, 255, .14);
  --glass-edge: rgba(255, 255, 255, .14);
  --glass-edge-2: rgba(255, 255, 255, .08);

  --font-sans: 'Mona Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Noto Serif Display', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-mono: var(--font-sans);

  --t-page: clamp(40px, 4.6vw, 66px);
  --t-section: clamp(28px, 3.2vw, 44px);
  --t-lead: clamp(18px, 1.5vw, 21px);
  --t-body: 17px;

  --gutter: clamp(16px, 5vw, 64px);
  --space: clamp(64px, 9vw, 120px);
  --bar-h: 72px;
  --r-pic: 14px;
  --r-pill: 999px;
  --ease-out: cubic-bezier(.22, .8, .24, 1);
}

@media (max-width: 1000px) { :root { --bar-h: 62px; } }
@media (max-width: 640px) { :root { --t-body: 16px; } }

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--bg); -webkit-text-size-adjust: 100%; }

body {
  position: relative;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--t-body)/1.55 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* One very soft glow at the top of the page. */
body.page::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  height: min(760px, 90vh);
  pointer-events: none;
  background:
    radial-gradient(52% 70% at 74% 0, rgba(63, 140, 255, .1), transparent 72%),
    radial-gradient(44% 60% at 22% 0, rgba(233, 189, 96, .055), transparent 72%);
}

h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
img, video, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a, button, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; border-radius: 6px; }
[tabindex="-1"]:focus { outline: none; }
::selection { background: rgba(233, 189, 96, .32); color: #fff; }

.skip {
  position: absolute;
  z-index: 100;
  left: 12px;
  top: -80px;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--gold);
  color: var(--on-gold);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { top: 10px; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* ---------- Type ---------- */

.display { font-size: clamp(42px, 11vw, 76px); font-size: 12.3cqw; font-weight: 700; line-height: .98; letter-spacing: -.04em; }
.display .serif-i { white-space: nowrap; }
.page-h { font-size: var(--t-page); font-weight: 700; line-height: 1.02; letter-spacing: -.034em; text-wrap: balance; }
.section-h { font-size: var(--t-section); font-weight: 680; line-height: 1.08; letter-spacing: -.028em; text-wrap: balance; }
.lead { font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.serif-i {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 200;
  letter-spacing: -.02em;
  font-size: 1.1em;
  line-height: .9;
  -webkit-text-stroke: .018em currentColor;
  paint-order: stroke fill;
}


/* ---------- Buttons and links ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.005em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s, border-color .2s, color .2s;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-gold { background: var(--gold); color: var(--on-gold); }
.btn-gold:hover { background: var(--gold-hi); }
.btn-line { border-color: var(--line-2); color: var(--ink); }
.btn-line:hover { border-color: rgba(255, 255, 255, .56); }
.btn-sm { min-height: 44px; padding: 9px 20px; font-size: 16px; }

.go {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
}
.go svg { width: 17px; height: 17px; flex: none; }
.go span { border-bottom: 1px solid var(--line-2); transition: border-color .2s; }
.go:hover span { border-color: var(--ink); }


/* ---------- Top of every page ---------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.site-head-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: calc(1200px + 2 * var(--gutter));
  min-height: var(--bar-h);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  min-height: 44px;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -.012em;
  text-decoration: none;
}
.brand img { width: 30px; height: 30px; }
.brand b { font-weight: 650; color: var(--gold-hi); }

.site-nav { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 30px); }
.site-nav a:not(.btn) {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ink-2);
  transition: color .2s;
}
.site-nav a:not(.btn):hover { color: var(--ink); }
.site-nav a[aria-current]:not(.btn) { color: var(--ink); }
.site-nav a[aria-current]:not(.btn)::after { content: ''; position: absolute; left: 0; right: 0; bottom: 8px; height: 1.5px; background: var(--ink); }
.site-nav .btn[aria-current] { border-color: rgba(255, 255, 255, .56); }

.menu { display: none; }
.menu > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  font-size: 16px;
  font-weight: 550;
  cursor: pointer;
  list-style: none;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary .menu-open, .menu:not([open]) > summary .menu-close { display: none; }

.menu-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  max-height: calc(100vh - var(--bar-h));
  max-height: calc(100dvh - var(--bar-h));
  overflow-y: auto;
  padding: 10px var(--gutter) 28px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.menu-panel a {
  display: flex;
  align-items: center;
  min-height: 52px;
  font-size: 20px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.menu-panel a[aria-current] { font-weight: 650; }
.menu-panel p { display: grid; gap: 2px; margin-top: 18px; }
.menu-panel p a { min-height: 44px; border: 0; font-size: 17px; color: var(--ink-2); }

@media (max-width: 1000px) {
  .site-nav { display: none; }
  .menu { display: block; }
}


/* ---------- Page structure ---------- */

.wrap { width: 100%; max-width: calc(1200px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.page-top { padding-top: clamp(56px, 7vw, 96px); }
.page-top .lead { max-width: 40em; margin-top: 20px; }
.section { padding-top: var(--space); }
.section-rule { margin-top: var(--space); padding-top: var(--space); border-top: 1px solid var(--line); }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 28px; margin-bottom: 36px; }

/* The closing block on a page: a slightly lighter panel, so it reads as its own thing. */
.band { margin: var(--space) 0; padding: 0 var(--gutter); }
.band .wrap { display: grid; justify-items: start; gap: 28px; max-width: 1200px; padding: clamp(36px, 6vw, 72px) clamp(24px, 5vw, 64px); background: #0b0d14; border: 1px solid var(--line); border-radius: 22px; }
.band h2 { max-width: 18em; }

main:focus { outline: none; }


/* ---------- A grid of things to open ---------- */

.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 32px; }
.grid-gap { margin-top: clamp(44px, 5vw, 64px); }
@media (max-width: 1000px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 24px; } }
@media (max-width: 640px) { .grid { grid-template-columns: minmax(0, 1fr); gap: 48px; } }

.tile { display: grid; align-content: start; gap: 0; text-decoration: none; color: inherit; scroll-margin-top: calc(var(--bar-h) + 20px); -webkit-user-drag: none; }
.tile img { -webkit-user-drag: none; }
.tile-pic {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--r-pic);
  background: var(--bg-2);
  box-shadow: 0 0 0 1px var(--line);
  transition: box-shadow .2s;
}
.tile-pic img { width: 100%; height: 100%; object-fit: cover; }
a.tile:hover .tile-pic { box-shadow: 0 0 0 1px rgba(255, 255, 255, .5); }
.sample {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  background: rgba(6, 7, 11, .86);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
}
.tile h2, .tile h3 { margin-top: 20px; font-size: clamp(21px, 1.8vw, 24px); font-weight: 650; line-height: 1.18; letter-spacing: -.018em; }
.tile p { margin-top: 8px; color: var(--ink-2); text-wrap: pretty; }
.tile-go { display: inline-flex; align-items: center; gap: 9px; margin-top: 12px; min-height: 32px; font-weight: 600; }
.tile-go svg { width: 17px; height: 17px; flex: none; transition: transform .2s var(--ease-out); }
a.tile:hover .tile-go svg { transform: translateX(3px); }

/* App pictures: one phone, cropped by the bottom of the picture. */
.tile-app .tile-pic { aspect-ratio: 1 / 1; display: flex; justify-content: center; align-items: flex-start; padding-top: 56px; background: radial-gradient(90% 70% at 50% 0, #15181f, var(--bg-2)); }
.tile-app .tile-pic img { width: 62%; height: auto; object-fit: initial; border-radius: 22px 22px 0 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, .26), 0 0 0 7px #101217, 0 0 0 8px rgba(255, 255, 255, .22); }


/* ---------- Home ---------- */

.home-top {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 72px);
  min-height: calc(100vh - var(--bar-h));
  min-height: calc(100svh - var(--bar-h));
  padding-top: clamp(32px, 4vw, 56px);
  padding-bottom: clamp(32px, 4vw, 56px);
}
@media (min-width: 1001px) {
  .home-top { min-height: min(calc(100svh - var(--bar-h)), 820px); grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr); }
}
/* The longest headline line, "Custom solutions", fills the column at any width. */
.home-copy { display: grid; justify-items: start; gap: 26px; min-width: 0; container-type: inline-size; }
.home-copy .lead { max-width: 30em; }
.home-film { display: block; text-decoration: none; color: inherit; min-width: 0; }
@media (min-width: 1001px) { .home-film { margin: 0 calc(-1 * clamp(0px, 3vw, 56px)) 0 0; } }
.home-frame {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  width: min(100%, 68vh, 640px);
  width: min(100%, 68svh, 640px);
  margin: 0 auto;
  overflow: hidden;
}
.home-frame video::-webkit-media-controls { display: none !important; }
.home-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  /* The edges of the picture fade into the page, so the drone floats. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent), linear-gradient(to bottom, transparent, #000 14%, #000 74%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent), linear-gradient(to bottom, transparent, #000 14%, #000 74%, transparent);
  mask-composite: intersect;
}
.home-cap { margin-top: 12px; text-align: center; color: var(--ink-2); text-wrap: balance; }

.who { padding: clamp(44px, 5vw, 72px) 0; border-top: 1px solid var(--line); }
.who h2 { font-size: 20px; font-weight: 600; letter-spacing: -.012em; color: var(--ink-2); }
.who ul { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 36px; margin-top: 26px; }
.who li { font-size: clamp(21px, 2vw, 25px); font-weight: 600; letter-spacing: -.02em; color: var(--ink); }

@media (max-width: 1000px) {
  .home-top { grid-template-columns: minmax(0, 1fr); align-content: start; min-height: 0; gap: 28px; }
  .home-frame { width: min(100%, 560px); }
}
/* A phone: the film's top is empty sky, so it's cropped away and the drone sits right under the button. */
@media (max-width: 640px) {
  .home-top { gap: 14px; padding-top: 26px; }
  .home-copy { gap: 20px; }
  .home-frame { width: 100%; aspect-ratio: 4 / 3; }
  .home-frame video {
    object-fit: cover;
    object-position: 50% 58%;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 84%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 84%, transparent);
  }
  .home-cap { margin-top: 6px; }
}
/* A short phone: a little less air, so more of the drone is on the first screen. */
@media (max-width: 640px) and (max-height: 600px) {
  .home-top { padding-top: 16px; }
  .home-copy { gap: 14px; }
}
/* A phone on its side: words on the left, film on the right, all on one screen. */
@media (max-height: 500px) and (orientation: landscape) {
  .home-top { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 24px; min-height: 0; padding-top: 14px; padding-bottom: 14px; }
  .home-copy { gap: 10px; }
  .display { font-size: min(9.4cqw, 48px); }
  .lead { font-size: 16px; line-height: 1.35; }
  .btn { min-height: 44px; padding: 8px 22px; }
  .home-frame { width: min(100%, 58vh); aspect-ratio: 1 / 1; }
  .home-frame video { object-fit: contain; object-position: 50% 50%; }
  .home-cap { display: none; }
}
@media (max-width: 640px) {
  .who ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
}


/* ---------- How it works ---------- */

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 48px; margin-top: clamp(48px, 6vw, 80px); }
.steps li { padding-top: 22px; border-top: 1px solid var(--line-2); }
.steps b { display: block; font-size: 20px; font-weight: 600; color: var(--ink-2); }
.steps h2 { margin-top: 14px; font-size: clamp(24px, 2.2vw, 30px); font-weight: 650; line-height: 1.14; letter-spacing: -.02em; }
.steps p { margin-top: 12px; color: var(--ink-2); max-width: 30em; text-wrap: pretty; }
@media (max-width: 1000px) { .steps { grid-template-columns: minmax(0, 1fr); } }


/* ---------- Questions ---------- */

.faq { max-width: 760px; margin-top: clamp(40px, 5vw, 64px); }
.faq > div { padding: 28px 0; border-top: 1px solid var(--line); }
.faq > div:last-child { border-bottom: 1px solid var(--line); }
.faq dt { font-size: clamp(21px, 1.9vw, 24px); font-weight: 650; line-height: 1.22; letter-spacing: -.018em; }
.faq dd { margin-top: 10px; color: var(--ink-2); text-wrap: pretty; }


/* ---------- Contact ---------- */

.contact-big { display: grid; gap: 10px; margin-top: clamp(36px, 5vw, 56px); }
.contact-big a { display: inline-flex; align-items: center; min-height: 44px; width: fit-content; font-size: clamp(24px, 4vw, 44px); font-weight: 650; line-height: 1.2; letter-spacing: -.024em; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s; overflow-wrap: anywhere; }
.contact-big a:hover { border-color: var(--line-2); }
.contact-who { margin-top: 20px; color: var(--ink-2); }
.contact-act { margin-top: 32px; }


/* ---------- 404 ---------- */

.lost { display: grid; justify-items: start; gap: 24px; padding-top: clamp(80px, 12vw, 160px); padding-bottom: clamp(80px, 12vw, 160px); }


/* ---------- The slim bar. App pages use it too ---------- */

.w-bar {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  height: 56px;
  padding: 0 clamp(8px, 2vw, 24px);
  background: #08090e;
  border-bottom: 1px solid var(--line);
}
.w-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  min-height: 44px;
  padding: 0 12px 0 6px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 10px;
  transition: background-color .2s;
}
.w-back svg { width: 18px; height: 18px; flex: none; }
.w-back:hover { background: rgba(255, 255, 255, .08); }
.w-title { font-size: 16px; font-weight: 550; line-height: 1.2; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; text-align: center; }
.w-sample { justify-self: end; font-size: 15px; color: var(--ink-2); white-space: nowrap; }
.w-sample-short, .w-title-short, .w-back-short { display: none; }
@media (max-width: 1000px) {
  .w-bar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; }
  .w-title { overflow: hidden; text-overflow: ellipsis; }
  .w-title-long { display: none; }
  .w-title-short { display: inline; }
  .w-sample-long { display: none; }
  .w-sample-short { display: inline; }
  .w-sample { padding-right: 6px; }
}
@media (max-width: 640px) {
  .w-back-long { display: none; }
  .w-back-short { display: inline; }
}


/* ---------- Bottom of every page ---------- */

.site-foot { border-top: 1px solid var(--line); padding: clamp(40px, 5vw, 64px) 0 40px; }
.foot-grid { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 28px 64px; }
.foot-links { display: grid; grid-template-columns: repeat(2, auto); gap: 2px 40px; }
.foot-links a, .foot-reach a { display: flex; align-items: center; min-height: 40px; font-size: 16px; text-decoration: none; color: var(--ink-2); transition: color .2s; }
.foot-links a:hover, .foot-reach a:hover { color: var(--ink); }
.foot-reach { display: grid; align-content: start; gap: 2px; }
.foot-line { margin-top: 28px; font-size: 15px; color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}