/* =========================================================
   No Stone — site-specific tokens layered on Coinbase DS
   ========================================================= */

:root {
  /* === Brand colour overrides (replace Coinbase Blue voltage) === */
  --color-primary:           #3167ac;        /* No Stone primary blue (logo bracket + N) */
  --color-primary-active:    #265288;        /* darker press state */
  --color-primary-disabled:  #aac1d8;

  /* Ink — match the navy of the NO STONE wordmark, slightly warmer than pure black */
  --color-ink:           #1f2a40;
  --color-body-strong:   #1f2a40;
  --color-body:          #4a5468;
  --color-muted:         #6a7287;
  --color-muted-soft:    #9ba3b4;

  /* Surfaces — dark editorial surface gets a hint of navy rather than pure black */
  --color-surface-dark:          #0f1626;
  --color-surface-dark-elevated: #1b2436;

  /* No Stone secondary — used sparingly: chip backgrounds, dividers, accents on dark */
  --ns-blue-soft:        #82b7de;
  --ns-blue-tint:        #e9f1f8;            /* very light tint of the primary, for chip bg */

  /* Sticky nav frost */
  --frost-light-bg: rgba(255, 255, 255, 0.72);
  --frost-dark-bg:  rgba(15, 22, 38, 0.55);
  --frost-blur:     saturate(180%) blur(18px);

  /* AU accent — only ever paired with primary as a small flag dot */
  --au-red:    #e4002b;
  --au-blue:   #00008b;
}

/* Page-level resets for embedded artboards */
.ns-page {
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-canvas);
  width: 100%;
  position: relative;
}

/* Standard editorial band paddings (artboards are 1280 wide, narrower than the 1200 max — use 80/64) */
.ns-band {
  padding: 96px 64px;
}
.ns-band--soft { background: var(--color-surface-soft); }
.ns-band--dark { background: var(--color-surface-dark); color: var(--color-on-dark); }
.ns-band__inner { max-width: 1152px; margin: 0 auto; }

/* Display weights — DS keeps display at 400, but No Stone allows up to 500 for very long display lines on light bg
   (still never goes bold). Keep 400 default. */

/* Hairline-list rows */
.ns-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  border-top: 1px solid var(--color-hairline);
}
.ns-row:last-child { border-bottom: 1px solid var(--color-hairline); }

/* Mono caption (used for index numbers, dates, durations) */
.ns-mono-cap {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

/* Eyebrow caption (e.g. AUSTRALIA · MSP CONSULTANCY) */
.ns-eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.ns-eyebrow--on-dark { color: var(--color-on-dark-soft); }
.ns-eyebrow--primary { color: var(--color-primary); }

/* Frosted nav surface */
.ns-nav-frost-light {
  background: var(--frost-light-bg);
  backdrop-filter: var(--frost-blur);
  -webkit-backdrop-filter: var(--frost-blur);
  border-bottom: 1px solid var(--color-hairline-soft);
}
.ns-nav-frost-dark {
  background: var(--frost-dark-bg);
  backdrop-filter: var(--frost-blur);
  -webkit-backdrop-filter: var(--frost-blur);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Floating product-card on dark hero */
.ns-float-card {
  background: var(--color-surface-dark-elevated);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 24px;
  color: var(--color-on-dark);
}
.ns-float-card--light {
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  color: var(--color-ink);
  box-shadow: 0 24px 48px -12px rgba(10, 11, 13, 0.18), 0 8px 16px -8px rgba(10, 11, 13, 0.08);
}

/* AU flag dot — tiny accent next to "Australian-built" lockups */
.ns-au-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 9999px;
  background: var(--au-red);
  margin-right: 6px;
  vertical-align: 1px;
}

/* Stats display number */
.ns-stat-num {
  font-family: var(--font-display);
  font-size: 80px;
  font-weight: 400;
  letter-spacing: -2px;
  line-height: 1;
  color: var(--color-ink);
}
.ns-stat-num--on-dark { color: var(--color-on-dark); }

/* Service / engagement list — dense vertical rhythm */
.ns-service-row {
  display: grid;
  grid-template-columns: 56px 1fr 1fr 140px;
  gap: 24px;
  align-items: center;
  padding: 28px 0;
  border-top: 1px solid var(--color-hairline);
  cursor: pointer;
  transition: background-color 150ms ease-out;
}
.ns-service-row:hover { background: var(--color-surface-soft); }
.ns-service-row:last-child { border-bottom: 1px solid var(--color-hairline); }

/* Tag chip */
.ns-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  background: var(--color-surface-strong);
  color: var(--color-ink);
}
.ns-chip--ghost {
  background: transparent;
  border: 1px solid var(--color-hairline);
  color: var(--color-body);
}
.ns-chip--on-dark {
  background: rgba(255,255,255,0.08);
  color: var(--color-on-dark);
}
.ns-chip--primary {
  background: var(--ns-blue-tint);
  color: var(--color-primary);
}
.ns-chip--soft {
  background: rgba(130, 183, 222, 0.18);
  color: var(--color-primary);
}

/* Section header lockup */
.ns-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  margin-bottom: 48px;
}

/* CTA link with arrow */
.ns-link {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ns-link--on-dark { color: var(--color-on-dark); }
.ns-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Vertical hairline divider */
.ns-vrule {
  width: 1px;
  background: var(--color-hairline);
  align-self: stretch;
}
.ns-vrule--on-dark { background: rgba(255,255,255,0.1); }

/* CTA pair — when two buttons sit next to each other, give them equal width
   so the row reads as a balanced unit rather than two different shapes. */
.ns-cta-pair {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.ns-cta-pair.ns-cta-pair--center {
  justify-content: center;
}
.ns-cta-pair > .btn {
  min-width: 240px;
  justify-content: center;
}
.ns-cta-pair--hero > .btn {
  min-width: 220px;
}

/* Subtle grid bg pattern for direction B */
.ns-grid-bg {
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: -1px -1px;
}