/* ============================================================
   CaribouLabs — single-screen hero
   ============================================================ */
:root {
  --brand-red: #bf1e2e;
  --brand-red-hi: #d83644;
  --night: #0d0f12;

  --font: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1200px;
  --pad: clamp(20px, 5vw, 64px);
  --radius: 2px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100svh;
  display: flex; flex-direction: column;
  font-family: var(--font);
  color: #fff;
  background: var(--night);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { width: min(100% - calc(var(--pad) * 2), var(--wrap)); margin-inline: auto; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--brand-red); color: #fff; padding: 10px 16px;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--brand-red); outline-offset: 3px; }

/* ---------- Backdrop ----------
   Fixed, so the footer can live outside <main> as a real contentinfo landmark
   and still sit over the video. */
.backdrop { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.scrim {
  position: fixed; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(10,12,15,.94) 0%, rgba(10,12,15,.62) 52%, rgba(10,12,15,.30) 100%),
    linear-gradient(0deg, rgba(10,12,15,.92) 0%, rgba(10,12,15,0) 55%);
}

/* ---------- Top bar ---------- */
.topbar { padding-top: clamp(18px, 3vh, 30px); }
.topbar .wrap { display: flex; justify-content: flex-end; align-items: center; gap: 20px; }
.topbar-link {
  font-size: .9rem; font-weight: 500; text-decoration: none;
  color: rgba(255,255,255,.7); transition: color .2s;
}
.topbar-link:hover { color: #fff; }

/* ---------- Hero ---------- */
.hero {
  flex: 1;
  display: flex; align-items: flex-end;
  padding-block: clamp(32px, 8vh, 96px);
}

.logo { height: clamp(52px, 6vw, 78px); width: auto; margin-bottom: clamp(24px, 5vh, 48px); }

h1 {
  font-size: clamp(2.3rem, 5.4vw, 4.2rem); font-weight: 700;
  letter-spacing: -.033em; line-height: 1.06; margin: 0 0 22px;
}
.lede {
  font-size: clamp(1rem, 1.35vw, 1.18rem); max-width: 62ch;
  color: rgba(255,255,255,.82); margin: 0 0 36px;
}
/* On a desktop monitor the subhead must hold one line — release the measure
   cap once there is room for the full string. */
@media (min-width: 1100px) { .lede { max-width: none; } }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 1.05rem; padding: 16px 32px; border-radius: var(--radius);
  background: var(--brand-red); color: #fff; text-decoration: none;
  transition: background .2s;
}
.btn:hover { background: var(--brand-red-hi); }

/* ---------- Contact form ----------
   The form page carries more content than the hero, so the headline and rhythm
   scale down to keep it on one screen. */
.page-form h1 { font-size: clamp(1.9rem, 4vw, 3.1rem); margin-bottom: 20px; }
.page-form .logo { margin-bottom: clamp(18px, 4vh, 36px); }
.page-form .hero { padding-block: clamp(20px, 3.5vh, 44px); }

/* ---------- Contact form ---------- */
.contact-form { max-width: 34rem; margin-top: 8px; }
.contact-form label {
  display: block; font-size: .82rem; font-weight: 500;
  color: rgba(255,255,255,.6); margin: 0 0 6px;
}
.contact-form label + * { margin-bottom: 16px; }
.contact-form input[type="email"],
.contact-form textarea {
  display: block; width: 100%; font: inherit; font-size: 1rem; color: #fff;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius); padding: 12px 14px;
  transition: border-color .2s, background .2s;
}
.contact-form textarea { resize: vertical; min-height: 5.5rem; }
.contact-form ::placeholder { color: rgba(255,255,255,.3); }
.contact-form input[type="email"]:focus,
.contact-form textarea:focus { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); }

.contact-form .btn { border: 0; cursor: pointer; font-family: inherit; }
.contact-form .btn:disabled { opacity: .5; cursor: default; }

/* honeypot — off-screen rather than display:none, which some bots detect */
.hp { position: absolute; left: -9999px; }

.form-status { margin: 14px 0 0; font-size: .9rem; min-height: 1.4em; color: rgba(255,255,255,.6); }
.form-status.ok { color: #7fd08a; }
.form-status.err { color: var(--brand-red-hi); }

/* ---------- Sent confirmation ----------
   Native <dialog>: focus trap, Escape-to-close and backdrop come free. */
.sent {
  border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius);
  background: #14171b; color: #fff; padding: 34px 34px 30px;
  width: min(100% - 40px, 26rem); font-family: var(--font);
}
.sent::backdrop { background: rgba(6,7,9,.72); }
.sent h2 { font-size: 1.5rem; letter-spacing: -.02em; margin: 0 0 10px; }
.sent p { margin: 0 0 26px; color: rgba(255,255,255,.7); line-height: 1.55; }
.sent .btn { border: 0; cursor: pointer; font-family: inherit; padding: 12px 26px; font-size: 1rem; }
/* the default red focus ring is invisible on the red button */
.sent .btn:focus-visible { outline-color: #fff; }

/* alternative to the form, for people who prefer their own mail client */
.alt-contact { margin: 16px 0 0; font-size: .9rem; color: rgba(255,255,255,.5); }
.alt-contact a { color: rgba(255,255,255,.8); text-decoration: underline; text-underline-offset: 3px; }
.alt-contact a:hover { color: #fff; }

/* ---------- Footer ---------- */
.site-footer { padding-bottom: clamp(18px, 3vh, 30px); font-size: .82rem; color: rgba(255,255,255,.5); }
.site-footer p { margin-block: 0; text-align: right; }

/* ---------- Short viewports (landscape phones) ----------
   Without this the content outgrows the screen and the logo scrolls away,
   which breaks the one-screen promise. */
@media (max-height: 600px) {
  .topbar { padding-top: 14px; }
  .contact-form label + * { margin-bottom: 12px; }
  .contact-form textarea { min-height: 4.5rem; }
  .hero { padding-block: 20px; }
  .logo { height: 40px; margin-bottom: 14px; }
  h1 { font-size: clamp(1.4rem, 3.4vw, 2rem); margin-bottom: 12px; }
  .lede { font-size: .98rem; margin-bottom: 18px; }
  .btn { padding: 11px 22px; font-size: .95rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .backdrop { display: none; }
  body { background: var(--night) url(assets/img/hero-poster.webp) center/cover fixed no-repeat; }
}