/* incusservices.com · design system (spec 001, revised 2026-09-02)
   Seline's structure ("quiet analyst's desk": hairline cards, pill controls, Inter Tight display at
   weight 400, generous rhythm) on the Incus palette, on BLACK with light text — Leslie's call after
   seeing both grounds. See DESIGN.md for the full rules.
   Colour budget: Incus cyan is the ONLY filled action colour (one per view) and the headline
   highlight; Incus orange is reserved for text links and small marks. Everything else is neutral.
   Type floors from the 2026-09-02 audit: no text below 13px, no weight below 400, body 17px. */

:root {
  --canvas: #000000;
  --card: #0e0e0e;
  --hair: #262626;
  --hair-2: #3a3a3a;
  --ash: #6f6f6f;        /* decorative only, never for text */
  --gray: #a3a3a3;       /* captions, meta, labels (>= 13px / 500); 8.6:1 on black */
  --text-2: #c6c6c6;     /* secondary copy, leads, excerpts */
  --body: #d9d9d9;       /* long-form body */
  --ink: #ffffff;        /* headings, primary text */
  --soot: #161616;       /* raised surfaces: code blocks, active pills */
  --cyan: #11baee;       /* Incus cyan: filled CTA, focus ring, highlight text (9.3:1 on black) */
  --cyan-ink: #11baee;
  --cyan-wash: rgba(17, 186, 238, 0.14);
  --orange: #f98720;     /* Incus orange: links, marks (7.2:1 on black) */
  --orange-ink: #f98720;
  --on-cyan: #000000;
  --tile: #f5f5f4;       /* client logos were drawn for white; they sit on light tiles */
  --max: 1200px;
  --gutter: 64px;
  --section: 96px;
  --r-card: 12px;
  --r-input: 8px;
  --r-pill: 9999px;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-float: 0 12px 45px rgba(0, 0, 0, 0.65);
  --font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Inter Tight", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (max-width: 767px) {
  :root { --gutter: 20px; --section: 64px; }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--canvas); color-scheme: dark; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--canvas); color: var(--body);
  font: 400 17px/1.65 var(--font); -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video, svg, iframe { max-width: 100%; height: auto; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--orange-ink); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--cyan); color: var(--on-cyan); }

/* ---------- type ---------- */
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 400; color: var(--ink); text-wrap: balance; }
h1, .display { font-size: clamp(38px, 4.6vw, 60px); line-height: 1.08; letter-spacing: -0.021em; }
h2, .h2      { font-size: clamp(28px, 3vw, 38px); line-height: 1.15; letter-spacing: -0.025em; }
h3, .h3      { font-size: 24px; line-height: 1.25; letter-spacing: -0.017em; }
h4, .h4      { font-size: 19px; line-height: 1.3; letter-spacing: -0.01em; font-weight: 500; font-family: var(--font); }
p  { margin: 0; }
.lead   { font-size: 19px; line-height: 1.55; font-weight: 400; color: var(--text-2); max-width: 62ch; }
.muted  { color: var(--text-2); }
.eyebrow {
  font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray);
}
/* the one highlight per headline (Seline pattern, Incus cyan) */
.spark { color: var(--cyan-ink); background: var(--cyan-wash); border-radius: 6px; padding: 0 0.18em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
strong, b { font-weight: 600; color: var(--ink); }

/* ---------- layout ---------- */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: 0 0 var(--section) 0; }
.section:first-of-type { padding-top: 48px; }
.stack   { display: flex; flex-direction: column; gap: 24px; }
.stack-lg{ display: flex; flex-direction: column; gap: 48px; }
.cols-2  { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: start; }
.cols-3  { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; align-items: start; }
.cols-4  { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; align-items: start; }
.cols-2 > *, .cols-3 > *, .cols-4 > * { min-width: 0; }
@media (max-width: 991px) { .cols-3, .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
.measure { max-width: 62ch; }
.hairline { border: 0; border-top: 1px solid var(--hair); margin: 0; }

/* ---------- buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 24px; border-radius: var(--r-pill); border: 1px solid transparent;
  background: var(--cyan); color: var(--on-cyan); font: 600 15px/1 var(--font); cursor: pointer;
  white-space: nowrap; box-shadow: var(--shadow-card); transition: filter .15s ease;
}
.btn:hover { color: var(--on-cyan); filter: brightness(1.06); }
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 40px; padding: 0 18px; border-radius: var(--r-pill); border: 1px solid var(--hair-2);
  background: var(--card); color: var(--ink); font: 500 14px/1 var(--font); white-space: nowrap;
}
.btn-ghost:hover { border-color: var(--gray); color: var(--ink); }
.link { display: inline-flex; align-items: center; gap: 8px; color: var(--orange-ink); font-weight: 500; font-size: 15px; }
.link:hover { color: var(--ink); }
.link svg { flex: 0 0 auto; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }

/* ---------- header ---------- */
.site-header { position: relative; z-index: 20; background: var(--canvas); border-bottom: 1px solid var(--hair); }
.site-header .wrap { max-width: none; padding: 0 clamp(20px, 3vw, 48px); }
.site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 80px; }
.brand img { display: block; width: 136px; height: 56px; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a { font-size: 14px; font-weight: 400; color: var(--text-2); padding: 0 12px; height: 40px; display: inline-flex; align-items: center; border-radius: var(--r-pill); white-space: nowrap; }
.nav a:hover { color: var(--ink); background: #161616; }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 500; }
.menu-toggle {
  display: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--hair-2); border-radius: var(--r-pill);
  background: var(--card); color: var(--ink); cursor: pointer; align-items: center; justify-content: center;
}
.menu-toggle span { display: block; width: 18px; height: 1.5px; background: currentColor; position: relative; }
.menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: currentColor; }
.menu-toggle span::before { top: -6px; } .menu-toggle span::after { top: 6px; }
@media (max-width: 1279px) { .site-header .cta-desktop { display: none; } }
@media (max-width: 1099px) {
  .nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .site-header.is-open .nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; left: 0; right: 0; top: 80px; padding: 12px var(--gutter) 24px;
    background: var(--card); border-bottom: 1px solid var(--hair); box-shadow: var(--shadow-float);
  }
  .site-header.is-open .nav a { font-size: 16px; height: 48px; padding: 0 12px; border-radius: 8px; width: 100%; }
}

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: center; padding: 72px 0 var(--section); }
.hero > * { min-width: 0; }
.hero .constellation { display: flex; justify-content: center; }
.hero .constellation svg { width: min(520px, 100%); height: auto; }
@media (max-width: 991px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding-top: 32px; gap: 32px; }
  .hero .constellation { order: -1; }
  .hero .constellation svg { width: min(320px, 76vw); }
}
.page-hero { padding: 72px 0 56px; display: flex; flex-direction: column; gap: 20px; max-width: 820px; }
@media (max-width: 767px) { .page-hero { padding-top: 36px; } }

/* ---------- content blocks ---------- */
.block { display: flex; flex-direction: column; gap: 14px; }
.block > h2 { margin-bottom: 6px; }
.block .h3 + p, .block h3 + p { color: var(--text-2); font-size: 16px; }
.feature p { color: var(--text-2); font-size: 16px; }
.testimonial { display: flex; flex-direction: column; gap: 16px; }
.testimonial q, .testimonial .quote { font-size: 20px; line-height: 1.5; font-weight: 400; color: var(--ink); quotes: none; }
.testimonial .who { font-size: 13px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray); }
.wordmarks { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 24px 16px; align-items: center; }
.wordmarks div { font-size: 14px; font-weight: 500; letter-spacing: 0.04em; color: var(--text-2); text-align: center; white-space: nowrap; }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.gallery img { width: 100%; height: auto; border-radius: var(--r-card); display: block; border: 1px solid var(--hair); }
@media (max-width: 767px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.figure img { display: block; width: 100%; height: auto; border-radius: var(--r-card); }
.figure.natural img { width: auto; max-width: 100%; }
.embed-script { width: 100%; min-height: 320px; }
.embed-script iframe { width: 100%; border: 0; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.card { padding: 24px; background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-card); box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 10px; }
.card h3 { font-size: 19px; font-weight: 500; letter-spacing: -0.01em; font-family: var(--font); }
.card p { color: var(--text-2); font-size: 15px; line-height: 1.6; font-weight: 400; }
.card p a:empty { display: none; }
@media (max-width: 991px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .cards { grid-template-columns: minmax(0, 1fr); gap: 12px; } }
.embed { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--r-card); }
.bgimage { padding: 40px; border-radius: var(--r-card); background-size: cover; background-position: center; }
ul.plain { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.list { margin: 0; padding-left: 1.2em; color: var(--body); display: flex; flex-direction: column; gap: 8px; }

/* ---------- long-form prose (posts, policies) ---------- */
.prose { font-weight: 400; font-size: 17px; line-height: 1.65; color: var(--body); max-width: 66ch; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 2em; font-size: clamp(26px, 2.6vw, 32px); letter-spacing: -0.025em; }
.prose h3 { margin-top: 1.7em; font-size: 23px; }
.prose h4 { margin-top: 1.4em; font-size: 19px; }
.prose p, .prose li { color: var(--body); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--orange-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.4em; }
.prose img { display: block; border-radius: var(--r-card); margin: 2em 0; border: 1px solid var(--hair); }
.prose blockquote { margin: 1.6em 0; padding-left: 1.2em; font-style: italic; color: var(--text-2); border-left: 2px solid var(--hair-2); }
.prose pre { overflow-x: auto; padding: 18px 20px; border-radius: 10px; background: var(--soot); border: 1px solid var(--hair); color: #e7e5e4; font-size: 14px; line-height: 1.55; }
.prose code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em; color: var(--ink); }
.prose pre code { color: inherit; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--hair); vertical-align: top; }
.prose th { color: var(--ink); font-weight: 600; }
.prose iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--r-card); }
.prose hr { border: 0; border-top: 1px solid var(--hair); }
.post-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray); }
.post-list { display: flex; flex-direction: column; gap: 0; }
.post-list article { padding: 28px 0; border-top: 1px solid var(--hair); display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 28px; align-items: baseline; }
.post-list article:last-child { border-bottom: 1px solid var(--hair); }
.post-list h3 { font-size: 22px; }
.post-list h3 a { color: var(--ink); }
.post-list h3 a:hover { color: var(--orange-ink); }
.post-list p { color: var(--text-2); font-size: 16px; line-height: 1.6; margin-top: 8px; max-width: 62ch; }
@media (max-width: 767px) { .post-list article { grid-template-columns: minmax(0, 1fr); gap: 6px; } }
.pagination { display: flex; flex-wrap: wrap; gap: 8px; }
.pagination a, .pagination span { min-width: 44px; height: 44px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-pill); border: 1px solid var(--hair-2); background: var(--card); font-size: 14px; font-weight: 500; color: var(--text-2); }
.pagination a:hover { border-color: var(--gray); color: var(--ink); }
.pagination [aria-current="page"] { background: var(--ink); border-color: var(--ink); color: #000000; }

/* ---------- forms ---------- */
.form { display: flex; flex-direction: column; gap: 18px; }
.form label { display: flex; flex-direction: column; gap: 8px; }
.form label > span { font-size: 14px; font-weight: 500; color: var(--ink); }
.form input, .form textarea, .form select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--hair-2); border-radius: var(--r-input); background: var(--card);
  color: var(--ink); font: 400 16px/1.4 var(--font); outline: none; min-height: 48px;
}
.form input::placeholder, .form textarea::placeholder { color: var(--gray); }
.form input:focus, .form textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px var(--cyan-wash); }
.form textarea { min-height: 132px; resize: vertical; }
.form .cf-turnstile { min-height: 65px; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .btn { align-self: flex-start; }
.form-note { font-size: 14px; color: var(--gray); }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--hair); padding: 40px 0 48px; background: var(--canvas); }
.site-footer .row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; row-gap: 20px; }
.site-footer .brand img { width: 116px; height: 48px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 6px 4px; }
.site-footer nav a { font-size: 14px; color: var(--text-2); padding: 10px 10px; border-radius: var(--r-pill); display: inline-flex; align-items: center; min-height: 40px; }
@media (max-width: 767px) { .site-footer nav a { min-height: 44px; } }
.site-footer nav a:hover { color: var(--ink); background: #161616; }
.site-footer .fine { margin-top: 24px; font-size: 14px; color: var(--gray); display: flex; flex-wrap: wrap; gap: 6px 24px; }

/* ---------- utilities ---------- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 40px; }

/* ---------- client logos (home): white hairline tiles, greyscale at rest ---------- */
.logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.logos .logo { height: 100px; padding: 20px 28px; background: var(--tile); border: 1px solid transparent; border-radius: var(--r-card); display: flex; align-items: center; justify-content: center; transition: border-color .2s ease; }
.logos .logo:hover, .logos .logo:focus-within { background: #ffffff; }
.logos img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain;
             filter: grayscale(1); opacity: 0.8; transition: filter .3s ease, opacity .3s ease; }
.logos .logo:hover img, .logos .logo:focus-within img { filter: none; opacity: 1; }
.logos .tile { padding: 0; overflow: hidden; }
.logos .tile img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 991px) { .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .logos .logo { height: 76px; padding: 14px 18px; border-radius: 10px; } }

/* ---------- auto-scrolling card strip (testimonials) ---------- */
.carousel { position: relative; container-type: inline-size; overflow: hidden; --n: 3; --gap: 20px; --dur: 54s; padding: 4px 0; }
.carousel .track { display: flex; width: max-content; animation: carousel var(--dur) linear infinite; will-change: transform; }
.carousel .set { display: flex; gap: var(--gap); padding-right: var(--gap); }
.carousel .card { flex: 0 0 calc((100cqw - (var(--n) - 1) * var(--gap)) / var(--n)); }
.carousel:hover .track, .carousel:focus-within .track, .carousel.is-paused .track { animation-play-state: paused; }
@keyframes carousel { to { transform: translate3d(-50%, 0, 0); } }
.carousel-pause { margin-top: 16px; background: var(--card); border: 1px solid var(--hair-2); color: var(--text-2); border-radius: var(--r-pill);
                  padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
.carousel-pause:hover { color: var(--ink); border-color: var(--gray); }
@media (max-width: 991px) { .carousel { --n: 2; } }
@media (max-width: 767px) { .carousel { --n: 1; --gap: 12px; } }
@media (prefers-reduced-motion: reduce) {
  .carousel .track { animation: none; width: auto; }
  .carousel { overflow-x: auto; scroll-snap-type: x mandatory; }
  .carousel .set[aria-hidden] { display: none; }
  .carousel .card { scroll-snap-align: start; }
  .carousel-pause { display: none; }
}

/* ---------- hero globe (canvas replaces the SVG when JS runs) ---------- */
.hero .constellation canvas.globe { width: min(520px, 100%); height: auto; aspect-ratio: 1 / 1; display: block; }
@media (max-width: 991px) { .hero .constellation canvas.globe { width: min(320px, 76vw); } }

/* ---------- social buttons (footer) ---------- */
.social { display: flex; gap: 8px; }
.social a { width: 40px; height: 40px; border: 1px solid var(--hair-2); background: var(--card); border-radius: var(--r-pill); display: inline-flex; align-items: center; justify-content: center; color: var(--text-2); transition: color .2s, border-color .2s; }
.social a:hover, .social a:focus-visible { color: var(--ink); border-color: var(--gray); }

/* browser autofill keeps the dark field */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--card) inset; box-shadow: 0 0 0 1000px var(--card) inset;
  -webkit-text-fill-color: var(--ink); caret-color: var(--ink); transition: background-color 9999s ease-out 0s;
}