/* ============================================================
   INDIE Labs. — Site styles
   Layered on top of INDIE Group tokens (assets/tokens.css)
   Mode: Lab Dark (navy-900 + yellow accent), with light-mode flip
   ============================================================ */

/* Editorial serif — used italic for soft headlines, hero question, taglines.
   Adds the "luwes / art" feeling on top of the brand's Anton + Be Vietnam Pro. */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap");

:root {
  /* Page-level surface (overrides token defaults for the Labs site) */
  --labs-bg:        #001933;          /* navy-900 */
  --labs-surface:   #002E5C;          /* navy-700 */
  --labs-surface-2: #003a6f;
  --labs-sunken:    #000F1F;          /* strip / sunken band  */
  --labs-line:      rgba(250,250,247,0.10);
  --labs-line-2:    rgba(250,250,247,0.18);
  --labs-fg:        #FAFAF7;
  --labs-fg-2:      rgba(250,250,247,0.78);
  --labs-fg-3:      rgba(250,250,247,0.55);
  --labs-fg-4:      rgba(250,250,247,0.35);

  --labs-accent:    #F0D050;          /* yellow */
  --labs-accent-2:  #F04000;          /* parent orange — sparingly */

  --labs-paper:     #FAFAF7;          /* off-white island */
  --labs-ink:       #001933;

  --labs-lattice:   rgba(240,208,80,0.10);   /* lattice dot color */
  --labs-field-bg:  rgba(250,250,247,0.04);
  --labs-shadow-ink: 0,0,0;                  /* rgb triplet for box-shadows */

  /* Editorial serif token */
  --font-serif:   "Instrument Serif", "Times New Roman", serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--labs-bg);
  color: var(--labs-fg);
  font-family: var(--font-sans);
}

body {
  font-feature-settings: "ss01", "cv11";
}

::selection { background: var(--labs-accent); color: var(--labs-ink); }

a { color: inherit; }

/* ========== Lattice background (Labs signature) ========== */
.lattice {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(circle, var(--labs-lattice) 1px, transparent 1.2px);
  background-size: 24px 24px;
  background-position: 0 0;
  mask-image: linear-gradient(to bottom, black, black 60%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, black, black 60%, transparent);
}

.lattice--full {
  mask-image: none; -webkit-mask-image: none;
  opacity: 0.55;
}

/* ========== Hairline rule ========== */
.rule {
  height: 1px; background: var(--labs-line); width: 100%;
}
.rule-strong { background: var(--labs-line-2); }

/* ========== Tag / pill / mono ========== */
.mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum", "zero";
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--labs-accent);
}

.eyebrow-dim {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--labs-fg-3);
}

/* Editorial / soft headline (serif italic) — the "art" voice */
.h-serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
  color: var(--labs-fg);
}

/* Caveat handwritten accent */
.h-script {
  font-family: var(--font-script);
  font-weight: 700;
  color: var(--labs-accent);
  letter-spacing: -0.005em;
  line-height: 1;
}

.bracket-jp {
  font-family: var(--font-jp);
  color: var(--labs-accent);
}

/* ========== Button system ========== */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  padding: 14px 22px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              background var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out);
}

.btn-primary {
  background: var(--labs-accent);
  color: var(--labs-ink);
  border-color: var(--labs-ink);
  box-shadow: 4px 4px 0 rgba(var(--labs-shadow-ink), 1);
}
.btn-primary:hover { background: #f7dd6e; }
.btn-primary:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 rgba(var(--labs-shadow-ink), 1); }

.btn-ghost {
  background: transparent;
  color: var(--labs-fg);
  border: 1px solid var(--labs-line-2);
}
.btn-ghost:hover { background: rgba(250,250,247,0.06); border-color: var(--labs-fg-3); }

.btn-wa {
  background: #25D366;
  color: #001933;
  border: 1px solid #001933;
  box-shadow: 4px 4px 0 #001933;
}
.btn-wa:hover { background: #2EE373; }

.btn-sm {
  padding: 9px 14px;
  font-size: 13px;
}

/* ========== Cards & containers ========== */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

.section {
  padding: 96px 0;
  position: relative;
}

.section-sm { padding: 64px 0; }

.card {
  background: var(--labs-surface);
  border: 1px solid var(--labs-line);
  border-radius: 10px;
  padding: 28px;
  transition: border-color var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out);
}
.card:hover {
  border-color: var(--labs-line-2);
}

.card-paper {
  background: var(--labs-paper);
  color: var(--labs-ink);
  border: 1px solid rgba(0,0,0,0.08);
}

/* ========== Type helpers ========== */
.h-display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 0.94;
  margin: 0;
  text-wrap: balance;
}

h1.h-display { font-size: clamp(48px, 8vw, 112px); }
h2.h-display { font-size: clamp(40px, 5.5vw, 72px); }

.h-heavy {
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}

.lede {
  font-size: 19px;
  line-height: 1.6;
  color: var(--labs-fg-2);
  max-width: 56ch;
  text-wrap: pretty;
}

.lede-sm {
  font-size: 16px;
  line-height: 1.65;
  color: var(--labs-fg-2);
  max-width: 60ch;
  text-wrap: pretty;
}

/* ========== Underline brush — "answer" highlight ========== */
.brush {
  position: relative;
  display: inline-block;
}
.brush::after {
  content: "";
  position: absolute;
  left: -4px; right: -4px; bottom: 4px;
  height: 14px;
  background: var(--labs-accent);
  z-index: -1;
  transform: skewX(-6deg);
}

/* ========== Lab badge (the seal motif) ========== */
.seal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--labs-surface);
  border: 1px solid var(--labs-line-2);
  color: var(--labs-accent);
}

/* ========== Terminal / code block ========== */
.terminal {
  background: #000814;
  border: 1px solid rgba(250,250,247,0.18);
  border-radius: 10px;
  padding: 20px 22px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  color: rgba(250,250,247,0.78);
}
.terminal .prompt  { color: #F0D050; }
.terminal .comment { color: rgba(250,250,247,0.40); }
.terminal .key     { color: #6fc1ff; }
.terminal .str     { color: #8be58b; }

/* ========== Inputs ========== */
.field {
  background: var(--labs-field-bg);
  border: 1px solid var(--labs-line-2);
  border-radius: 6px;
  padding: 12px 14px;
  color: var(--labs-fg);
  font: inherit;
  font-size: 15px;
  width: 100%;
  outline: none;
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.field:focus { border-color: var(--labs-accent); background: var(--labs-field-bg); filter: brightness(1.04); }
.field::placeholder { color: var(--labs-fg-4); }

/* ========== Service / use-case / process grids ========== */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

/* ========== Split layouts (responsive) — replaces inline gridTemplateColumns ========== */
.split {
  display: grid;
  gap: 56px;
  align-items: start;
}
.split-hero  { grid-template-columns: 1.5fr 1fr; }
.split-side  { grid-template-columns: 1fr 1.3fr; }
.split-head  { grid-template-columns: 1.2fr 1fr; align-items: end; }
.split-faq   { grid-template-columns: 1fr 1.6fr; }
.split-form  { grid-template-columns: 1fr 2fr; }
.split-cta   { grid-template-columns: 1.6fr 1fr; align-items: center; }
.split-eq    { grid-template-columns: 1fr 1fr; }

@media (max-width: 1024px) {
  .split { gap: 40px; }
  .split-hero, .split-side, .split-head, .split-faq, .split-form, .split-cta, .split-eq {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; }
  .container { padding: 0 20px; }
  .section { padding: 64px 0; }
  .section-sm { padding: 48px 0; }
  h1.h-display { font-size: clamp(40px, 11vw, 64px); }
  h2.h-display { font-size: clamp(32px, 8vw, 52px); }
}

/* Sticky aside disabled on mobile */
@media (max-width: 1024px) {
  .sticky-side { position: static !important; top: auto !important; }
  /* Reset flip-order in stacked service blocks */
  .svc-block > * { order: 0 !important; }
}

/* Hero side card never sticks below tablet */
@media (max-width: 1024px) {
  .hero-side-stack { margin-top: 24px; }
}

/* ========== Animations ========== */
@keyframes blink { 0%,49% { opacity:1 } 50%,100% { opacity:0 } }
.caret {
  display: inline-block; width: 0.55em; height: 1em;
  background: var(--labs-accent);
  vertical-align: -0.15em;
  margin-left: 4px;
  animation: blink 1.05s steps(1,end) infinite;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-up { animation: fadeUp 400ms var(--ease-out) both; }

/* ========== Nav ========== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; height: 64px;
  display: flex; align-items: center; padding: 0 32px; gap: 28px;
  background: transparent;
  border-bottom: 1px solid transparent;
  z-index: 20;
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), backdrop-filter var(--dur) var(--ease-out);
}
.nav.scrolled {
  background: var(--labs-nav-scrolled, rgba(0,25,51,0.72));
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom-color: var(--labs-line);
}

/* Nav mobile: shrink padding + hide center links (logo + CTA only) */
@media (max-width: 720px) {
  .nav { padding: 0 16px; gap: 10px; }
  .nav .nav-links { display: none; }
  .nav .nav-subtitle { display: none; }
}
.nav a.navlink {
  font-size: 14px; font-weight: 500;
  color: var(--labs-fg-2);
  text-decoration: none;
  position: relative;
  padding: 4px 0;
}
.nav a.navlink:hover { color: var(--labs-fg); }
.nav a.navlink.active { color: var(--labs-accent); }
.nav a.navlink.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--labs-accent);
}

/* ========== Footer (always dark — stamp/foundation feel) ========== */
.footer {
  border-top: 1px solid rgba(250,250,247,0.10);
  background: #000F1F;
  color: #FAFAF7;
  padding: 64px 0 32px;
  margin-top: 96px;
}
.footer .rule { background: rgba(250,250,247,0.10); }
.footer .grid-footer {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
}
@media (max-width: 900px) {
  .footer .grid-footer { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 540px) {
  .footer .grid-footer { grid-template-columns: 1fr; }
}

/* ========== Marquee (logo strip) ========== */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee {
  display: flex; gap: 56px; align-items: center;
  width: max-content;
  animation: marquee 40s linear infinite;
}

/* ========== Misc ========== */
.stamp-corner {
  position: absolute; top: 20px; right: 24px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--labs-fg-3);
  display: flex; align-items: center; gap: 8px;
}
.stamp-corner::before {
  content: ""; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--labs-accent);
  box-shadow: 0 0 0 3px rgba(240,208,80,0.18);
}

.text-accent { color: var(--labs-accent); }
.text-fg2 { color: var(--labs-fg-2); }
.text-fg3 { color: var(--labs-fg-3); }