/* Co-Raq Labs — shared stylesheet (all pages)
   MOBILE FIRST: the base rules below are the phone layout.
   One breakpoint, @media (min-width: 760px), upgrades to tablet/desktop.
   Do not add max-width media queries. */

:root {
  color-scheme: dark;
  /* Color */
  --bg: #101113;          /* page */
  --fg: #f1f0ec;          /* headings, primary text */
  --text: #b1b6b0;        /* intro / body copy */
  --text-2: #a8b0a7;      /* card body copy */
  --muted: #a1a5a0;       /* labels, status text */
  --dim: #797e78;         /* counters, row numbers */
  --line: #303330;        /* 1px dividers */
  --sage: #b2c1ae;        /* focus ring */
  --head-em: #919991;     /* second line of the hero headline */
  --red: #DF4649;         /* Co-Raq red: "Labs", section labels */
  --green: #3EDB7E;       /* status light, internal-link arrows, email arrow */
  --caution: #F2B731;     /* caution labels */
  --btn-bg: #151716;      /* email button */
  --btn-line: #3a4239;
  /* Type */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Spacing rhythm (phone values) */
  --gutter: 18px;         /* side margin */
  --gap-hero: 24px;       /* header line → headline, intro → first divider */
  --gap-row: 16px;        /* top/bottom padding inside every row */
  --tap: 44px;            /* minimum touch target */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 400 14px/1.6 var(--font);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--sage); outline-offset: 4px; border-radius: 2px; }
h1, h2, p { margin: 0; }

/* Page frame: content column with safe-area aware gutters */
.wrap {
  width: 100%; max-width: calc(1000px + 2 * var(--gutter)); margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

/* ---------- Header ----------
   Phone: logo left, page button right, status on its own row below.
   ≥760px: status far left · logo centered · button far right. */
.site-header { padding-top: env(safe-area-inset-top); }
.site-header .bar {
  border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "brand nav" "status status";
  align-items: center; column-gap: 16px; row-gap: 10px; padding: 12px 0;
}
.brand { grid-area: brand; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; min-height: var(--tap); }
.brand-mark { width: 31px; height: 31px; display: block; flex: none; }
.brand-word { font-size: 18px; font-weight: 650; letter-spacing: -.035em; line-height: 1; }
.brand-word .labs { color: var(--red); }

.status {
  grid-area: status; display: inline-flex; align-items: center; gap: 9px;
  font-size: 10px; font-weight: 650; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
.status i {
  width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--green);
  box-shadow: 0 0 0 3px rgba(62,219,126,.16), 0 0 8px rgba(62,219,126,.55);
  animation: statuslight 2.8s ease-in-out infinite;
}
@keyframes statuslight { 50% { box-shadow: 0 0 0 4px rgba(62,219,126,.08), 0 0 12px rgba(62,219,126,.35); } }

.toplink {
  grid-area: nav; justify-self: end; display: inline-flex; align-items: center; min-height: var(--tap);
  font-size: 12px; color: #b5b8b2; white-space: nowrap;
}
.toplink:hover { color: #fff; }
.toplink .ar {
  display: inline-block; margin-left: 6px; font-size: 1.25em; line-height: 1; font-weight: 700;
  color: var(--green); transition: transform .18s ease;
}
.toplink:hover .ar { transform: translateX(3px); }

/* ---------- Hero ---------- */
.hero { padding: var(--gap-hero) 0 calc(var(--gap-hero) - 4px); }
.hero h1 {
  font-size: clamp(42px, 11.5vw, 76px); line-height: 1.02; letter-spacing: -.075em; font-weight: 510;
  max-width: 850px; margin: 0 0 calc(.2em + 12px);
  text-box: trim-both cap alphabetic;           /* removes the font's built-in blank space above caps */
}
@supports not (text-box: trim-both cap alphabetic) { .hero h1 { margin-top: -.16em; margin-bottom: 14px; } }
.hero h1 em { font-style: normal; color: var(--head-em); }
.hero p { max-width: 660px; font-size: 15px; line-height: 1.6; color: var(--text); text-wrap: pretty; }

/* ---------- Section label bar ---------- */
.sectionhead {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 14px 0 12px; border-top: 1px solid var(--line);
}
.eyebrow { font-size: 10px; font-weight: 650; letter-spacing: .18em; text-transform: uppercase; color: var(--red); }
.sectionhead .count { font-size: 11px; color: var(--dim); }

/* ---------- Project rows (homepage) ---------- */
.project {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: var(--gap-row) 0; border-top: 1px solid var(--line);
}
.project .num { align-self: start; padding-top: 7px; font-size: 11px; color: #777e78; }
.project .title { display: flex; align-items: center; gap: 9px; min-width: 0; }
.project .icon { width: 26px; height: 26px; flex: none; display: block; }
.project h2 { font-size: clamp(23px, 6.4vw, 32px); font-weight: 510; letter-spacing: -.055em; line-height: 1.1; overflow-wrap: anywhere; }
.project p { margin: 6px 0 0 35px; max-width: 680px; font-size: 12px; line-height: 1.5; color: #abb2aa; }
.project .arrow { font-size: 22px; color: #8c948c; transition: transform .2s, color .2s; }
.project:hover .arrow { transform: translate(3px, -3px); color: #fff; }

/* ---------- Service cards (client services) ---------- */
.services { display: grid; grid-template-columns: 1fr; column-gap: 35px; }
.service { border-top: 1px solid var(--line); padding: var(--gap-row) 0 calc(var(--gap-row) + 2px); }
.service .n { font-size: 10px; color: #7e897d; }
.service h2 { margin: 6px 0 5px; font-size: 23px; font-weight: 500; letter-spacing: -.045em; line-height: 1.25; }
.service p { max-width: 410px; font-size: 13px; line-height: 1.6; color: var(--text-2); }
.service .terms {
  display: inline-block; margin-top: 10px; font-size: 10px; font-weight: 650; letter-spacing: .14em;
  text-transform: uppercase; color: var(--caution);
}

/* ---------- Inquiries ---------- */
.contact {
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  padding: var(--gap-row) 0 calc(var(--gap-row) + 4px); border-top: 1px solid var(--line);
}
.contact h2 { margin: 0 0 6px; font-size: 18px; font-weight: 500; letter-spacing: -.04em; }
.contact p { max-width: 560px; line-height: 1.6; color: #a5aea5; text-wrap: pretty; }
.mail {
  display: inline-flex; align-items: center; gap: 12px; min-height: var(--tap); padding: 0 16px; flex: none;
  border: 1px solid var(--btn-line); border-radius: 3px; background: var(--btn-bg);
  font-size: 13px; color: #e3eae0; white-space: nowrap; transition: border-color .18s ease, color .18s ease;
}
.mail .lbl {
  font-size: 10px; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; color: #7e897d;
  padding-right: 12px; border-right: 1px solid var(--btn-line); line-height: 1.6;
}
.mail .ar { color: var(--green); font-weight: 700; transition: transform .18s ease; }
.mail:hover { border-color: #829683; color: #fff; }
.mail:hover .ar { transform: translate(2px, -2px); }

/* ---------- Footer ---------- */
.site-footer .wrap > div {
  border-top: 1px solid var(--line); text-align: center; font-size: 11px; letter-spacing: .01em; color: #858b84;
  padding: var(--gap-row) 0 calc(var(--gap-row) + 6px + env(safe-area-inset-bottom));
}

/* ---------- Tablet / desktop (≥760px) ---------- */
@media (min-width: 760px) {
  :root { --gutter: 26px; --gap-hero: 30px; --gap-row: 18px; }
  .site-header .bar {
    grid-template-columns: 1fr auto 1fr; grid-template-areas: "status brand nav";
    column-gap: 18px; padding: 0; min-height: 60px;
  }
  .status { justify-self: start; }
  .brand { justify-self: center; gap: 11px; }
  .brand-mark { width: 35px; height: 35px; }
  .brand-word { font-size: 20px; }
  .hero h1 { margin-bottom: calc(.2em + 14px); }
  .project { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .project .title { gap: 12px; }
  .project .icon { width: 30px; height: 30px; }
  .project p { margin-left: 42px; font-size: 13px; }
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact { flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .status i { animation: none; }
  .toplink .ar, .project .arrow, .mail, .mail .ar { transition: none; }
}