/* Departure Labs — public site stylesheet (dark theme).
   The public pages use this file; the /admin screens keep departure.css, which
   stays on the light palette. Layout patterns follow the Hackurity reference
   (dark base, centered section heads with an accent rule, product cards built
   on real screenshots, a CTA card, a column footer), in
   Departure Labs' own navy/orange palette and fonts. Every text/background
   pairing below was checked with the WCAG relative-luminance formula; see
   decisions.md. */

/* Type follows devicons.io: Bricolage Grotesque (variable: weight 200-800,
   optical size 12-96) for headings and body, IBM Plex Mono for small
   uppercase labels. Both SIL OFL 1.1, self-hosted (the CSP allows no font
   origin but 'self'); license texts sit beside the files in /fonts. Latin
   subset only, the same files Google Fonts serves. */
@font-face {
  font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('/fonts/BricolageGrotesque-var.woff2') format('woff2');
}
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/IBMPlexMono-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/IBMPlexMono-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/IBMPlexMono-600.woff2') format('woff2'); }

:root {
  color-scheme: dark;
  --bg: #0b1218;          /* page base */
  --navy: #0b2137;        /* the logo's navy, used for alternating bands */
  --card: #132230;        /* raised surfaces */
  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.18);
  --text: #ffffff;        /* 16:1+ on every background below */
  --muted: rgba(255, 255, 255, 0.72);  /* 8.9:1+ */
  --faint: rgba(255, 255, 255, 0.60);  /* 6.6:1+ */
  --orange: #f62c1a;      /* the mark's own orange: decorative rules and large text only (4.07:1+) */
  --orange-text: #ee5c4f; /* small orange text: 4.83:1+ */
  --orange-btn: #ce1808;  /* button fill under white text: 5.59:1 */
  --orange-btn-hover: #e71b09; /* 4.61:1 */
  --font-heading: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Bricolage Grotesque", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --edge: clamp(20px, 5vw, 72px);
  --max: 1200px;
  --radius: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-heading); font-weight: 700; letter-spacing: -0.03em; margin: 0; }
p { margin: 0; }
a { color: var(--orange-text); }
a:hover { color: #ff8a7f; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--orange-text); outline-offset: 2px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--edge); }

/* — nav — */
.nav {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.nav-brand { display: flex; align-items: center; gap: 8.8px; margin-right: auto; text-decoration: none; }
.nav-brand-mark { width: 54px; height: 27px; }
.nav-brand-word {
  font-family: var(--font-heading); font-weight: 700; font-size: 18px; letter-spacing: -0.02em;
  /* Aligns the wordmark's baseline with the mark's visual bottom rather than
     its box; measured, see decisions.md ("Nav wordmark baseline"). */
  transform: translateY(6.01px);
}
.nav-brand-word .w1 { color: #ffffff; }
.nav-brand-word .w2 { color: var(--orange-text); }
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-links a { color: var(--muted); text-decoration: none; font-size: 15px; white-space: nowrap; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: #ffffff; }
.nav .btn { min-height: 38px; padding: 8px 18px; font-size: 15px; }
@media (max-width: 900px) { .nav-links .nav-secondary { display: none; } }
@media (max-width: 520px) { .nav-links { gap: 16px; } .nav .btn { display: none; } }

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 10px 24px; border-radius: 999px;
  font: inherit; font-size: 16px; font-weight: 600; letter-spacing: 0.01em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 1.5px solid transparent; transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.btn-primary, .btn-primary:hover { color: #ffffff; }
.btn-primary { background: var(--orange-btn); }
.btn-primary:hover { background: var(--orange-btn-hover); }
.btn-ghost { color: #ffffff; border-color: rgba(255, 255, 255, 0.55); background: transparent; }
.btn-ghost:hover { color: #ffffff; border-color: #ffffff; background: rgba(255, 255, 255, 0.06); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

/* — sections — */
.band { padding: 104px 0; }
.band-navy { background: linear-gradient(165deg, var(--navy) 0%, var(--bg) 85%); }
.band-tight { padding: 72px 0; }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.section-head h2 { font-size: clamp(34px, 3.8vw, 50px); line-height: 1.05; font-weight: 800; letter-spacing: -0.04em; text-wrap: balance; }
.section-head h2::after {
  content: ""; display: block; width: 44px; height: 3px; border-radius: 2px;
  background: var(--orange); margin: 22px auto 0;
}
.section-head p { color: var(--muted); font-size: 18px; margin-top: 20px; }
.kicker {
  display: block; font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--orange-text); margin: 0 0 14px;
}

/* — hero — */
/* overflow-x: clip, not hidden: the glow behind the screenshot (below) bleeds
   past the right edge and made phones scroll sideways by a pixel; clip trims
   it without turning the hero into a scroll container. */
.hero { padding: 96px 0 104px; overflow-x: clip; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(46px, 6vw, 80px); line-height: 0.98; font-weight: 800; letter-spacing: -0.05em; }
.hero h1 .accent { color: var(--orange); }
.hero-sub { color: var(--muted); font-size: 19px; line-height: 1.6; margin-top: 26px; max-width: 34em; }
.hero-visual { position: relative; }
/* The cut corner echoes the reference's clipped hero image; the soft glow
   keeps a dark screenshot from dissolving into the dark page. */
.hero-visual::before {
  content: ""; position: absolute; inset: 8% -6% -8% 6%; z-index: -1;
  background: radial-gradient(closest-side, rgba(246, 44, 26, 0.22), transparent);
  filter: blur(30px);
}
.hero-visual .frame { clip-path: polygon(0 0, 100% 0, 100% 82%, 88% 100%, 0 100%); }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; } .hero { padding-top: 64px; } }

/* — screenshot frame (browser chrome) — */
.frame {
  margin: 0; overflow: hidden; border-radius: 12px; background: var(--card);
  border: 1px solid var(--line-strong); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.frame::before {
  content: ""; display: block; height: 24px; border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle, rgba(255,255,255,.28) 3.5px, transparent 4px) 10px 50% / 13px 13px no-repeat,
    radial-gradient(circle, rgba(255,255,255,.28) 3.5px, transparent 4px) 25px 50% / 13px 13px no-repeat,
    radial-gradient(circle, rgba(255,255,255,.28) 3.5px, transparent 4px) 40px 50% / 13px 13px no-repeat,
    #0f1b25;
}
.frame a, .frame img { display: block; width: 100%; height: auto; }
.frame figcaption { font-size: 15px; line-height: 1.45; color: var(--muted); padding: 12px 16px; border-top: 1px solid var(--line); }

/* — cards — */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.card {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  padding: 32px 30px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--line);
}
/* Faint diagonal sheen, a nod to the reference's cards. */
.card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,0.045) 0 22%, transparent 22.2%);
}
.card h3 { font-size: 22px; line-height: 1.25; }
.card p { color: var(--muted); font-size: 16.5px; margin-top: 14px; }
.card .more { margin-top: auto; padding-top: 22px; font-weight: 600; font-size: 15.5px; text-decoration: none; }
.card .num { font-family: var(--font-mono); font-size: 15px; color: var(--orange-text); margin-bottom: 18px; }
@media (max-width: 920px) { .cards { grid-template-columns: 1fr; } }

/* — showcase (work) cards: screenshot on top — */
.showcase .card { padding: 0; }
.showcase .card .frame { border-radius: 0; border: 0; border-bottom: 1px solid var(--line); box-shadow: none; }
.showcase .card .body { padding: 26px 28px 28px; display: flex; flex-direction: column; flex: 1; }
.showcase .card .kicker { margin-bottom: 8px; }

/* — Pulse — */
/* Pulse lockup: the app's own mark (dark tile, blue EKG trace, same path and
   colors as Pulse's favicon) with a heartbeat that sweeps the trace on a loop.
   pathLength="100" on the path keeps the dash math in percent. */
.pulse-logo { display: inline-flex; align-items: center; gap: 0.28em; }
.pulse-mark { width: 1.05em; height: 1.05em; flex: none; overflow: visible; }
.pulse-mark rect { fill: #252b2d; stroke: var(--line-strong); stroke-width: 1; }
.pulse-mark path { fill: none; stroke: #65add0; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pulse-mark .pulse-ecg-base { opacity: 0.45; }
.pulse-mark .pulse-ecg {
  stroke-dasharray: 34 166; stroke-dashoffset: 34;
  filter: drop-shadow(0 0 1.5px rgba(101, 173, 208, 0.9));
  animation: pulse-ecg 2.4s linear infinite;
}
@keyframes pulse-ecg {
  0% { stroke-dashoffset: 34; }
  65%, 100% { stroke-dashoffset: -100; }
}
@media (prefers-reduced-motion: reduce) {
  .pulse-mark .pulse-ecg { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
}
.pulse-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.pulse-copy h3 { font-size: 22px; }
.pulse-copy > p { color: var(--muted); margin-top: 14px; }
.module-group { margin-top: 30px; }
.module-group h4 {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--faint); margin: 0 0 12px;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chips li {
  font-size: 15px; line-height: 1.2; padding: 8px 13px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.07); border: 1px solid var(--line); color: #ffffff;
}
@media (max-width: 960px) { .pulse-grid { grid-template-columns: 1fr; } }

/* — CTA card + contact — */
.cta-card {
  position: relative; overflow: hidden; max-width: 980px; margin: 0 auto; text-align: center;
  padding: 64px clamp(24px, 5vw, 64px); border-radius: 20px;
  background: linear-gradient(150deg, #13304b 0%, var(--navy) 55%, #0e1a24 100%);
  border: 1px solid var(--line-strong);
}
.cta-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,0.05) 0 20%, transparent 20.2%);
}
.cta-card h2 { font-size: clamp(34px, 4vw, 52px); line-height: 1.05; font-weight: 800; letter-spacing: -0.04em; }
.cta-card > p { color: var(--muted); font-size: 18px; margin: 18px auto 0; max-width: 36em; }
.cta-card .btn-row { justify-content: center; }
.booking-embed {
  margin: 44px auto 0; max-width: 960px; overflow: hidden; text-align: left;
  border-radius: 14px; border: 1px solid var(--line-strong); background: #132230;
}
/* Heights measured against the tallest step of the real booking flow; a
   cross-origin frame can't report its own height. See decisions.md. */
.booking-embed iframe { display: block; width: 100%; height: 620px; border: 0; }
@media (max-width: 640px) { .booking-embed iframe { height: 1000px; } }

.legacy-toggle { margin-top: 28px; }
.legacy-toggle-btn {
  padding: 0; border: 0; background: none; font: inherit; font-size: 16px; cursor: pointer;
  color: var(--orange-text); text-decoration: underline; text-underline-offset: 3px;
}
.legacy-form { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line); text-align: left; }
.legacy-form[hidden] { display: none; }
.legacy-form-title { font-size: 22px; }
.legacy-form .sub { color: var(--muted); margin-top: 10px; }
.contact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; margin-top: 28px; }
.field-wide, .contact-actions { grid-column: 1 / -1; }
/* Off-screen, not display:none: some bots skip hidden fields but still fill
   genuinely present ones. A filled value marks the submission as spam. */
.field-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.field > label { display: block; font-size: 15px; margin-bottom: 6px; color: var(--muted); }
.input {
  width: 100%; min-height: 44px; padding: 9px 13px; font: inherit; font-size: 16px; color: #ffffff;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-strong); border-radius: 10px;
}
.input::placeholder { color: rgba(255, 255, 255, 0.45); }
.input:focus-visible { border-color: var(--orange-text); outline-offset: 0; }
textarea.input { resize: vertical; min-height: 110px; }
.contact-actions { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.contact-note { font-size: 15px; color: var(--muted); }
@media (max-width: 640px) { .contact-form { grid-template-columns: 1fr; } }

/* — footer — */
.site-footer { border-top: 1px solid var(--line); padding: 64px 0 36px; background: #080e13; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.footer-grid h4 { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 14px; }
.footer-grid h4::after { content: ""; display: block; width: 22px; height: 2px; background: var(--orange); margin-top: 8px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 9px; }
.footer-grid a { color: var(--muted); text-decoration: none; font-size: 15px; }
.footer-grid a:hover { color: #ffffff; }
.footer-blurb { color: var(--muted); font-size: 15px; margin-top: 16px; max-width: 30em; }
.footer-base { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.06em; color: var(--faint); }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > :first-child { grid-column: 1 / -1; } }

/* — page hero (inner pages) — */
.page-hero { padding: 88px 0 64px; }
.page-hero h1 { font-size: clamp(40px, 5vw, 66px); line-height: 1.0; font-weight: 800; letter-spacing: -0.045em; max-width: 15em; }
.page-hero .hero-sub { margin-top: 22px; }

/* — industries — */
.industry-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.industry-grid .card { padding: 28px; }
.industry-grid .card h3 { font-size: 20px; }
@media (max-width: 920px) { .industry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .industry-grid { grid-template-columns: 1fr; } }
.split2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 820px) { .split2 { grid-template-columns: 1fr; } }
.chips-center { justify-content: center; }

/* — /work — */
.work-tabs {
  position: sticky; top: 68px; z-index: 5;
  /* overflow-y must be explicit: overflow-x alone makes the browser compute
     overflow-y as auto, and the tabs' -1px margin-bottom overflows by 1px,
     drawing a stray vertical scrollbar. */
  display: flex; gap: 4px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.work-tab {
  flex: 0 0 auto; font: inherit; font-size: 15px; font-weight: 600; white-space: nowrap;
  padding: 14px 16px; margin-bottom: -1px; cursor: pointer;
  background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--faint);
}
.work-tab:hover { color: #ffffff; }
.work-tab[aria-selected="true"] { color: #ffffff; border-bottom-color: var(--orange); }
.work-panel { padding: 56px 0 24px; }
html:not(.work-tabbed) .work-panel + .work-panel { border-top: 1px solid var(--line); }
.work-head { max-width: 62ch; }
.work-name { font-size: clamp(28px, 3vw, 38px); line-height: 1.2; margin: 0 0 14px; }
html.work-tabbed .work-name {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.work-blurb { color: var(--muted); font-size: 18px; }
.work-compare { color: var(--faint); font-size: 16px; margin-top: 14px; }
.work-compare strong { color: #ffffff; font-weight: 600; }
.work-head .chips { margin-top: 24px; }
.work-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.work-shots .frame:first-child, .work-shots .frame:last-child:nth-child(even) { grid-column: 1 / -1; }
@media (max-width: 760px) {
  .work-shots { grid-template-columns: 1fr; }
  .work-shots .frame:first-child, .work-shots .frame:last-child:nth-child(even) { grid-column: auto; }
}

/* — legal pages — */
.legal { max-width: 68ch; padding: 80px 0 96px; }
.legal h1 { font-size: clamp(34px, 4vw, 48px); }
.legal-updated { color: var(--faint); margin: 12px 0 32px; }
.legal h2 { font-size: 21px; margin: 40px 0 10px; }
.legal p, .legal li { color: var(--muted); font-size: 16.5px; line-height: 1.7; }
.legal p + p { margin-top: 14px; }
.legal ul { padding-left: 1.2em; margin: 10px 0; }
.legal li { margin-bottom: 6px; }
.legal strong { color: #ffffff; }
.legal-back { margin-top: 40px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.btn-row-center { justify-content: center; }
.industries-teaser { margin: 72px auto 0; }
.industries-teaser .chips { margin-top: 4px; }