/* ==========================================================================
   Claivo design tokens
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* base palette */
  --clr-ink:   #231F1D;
  --clr-clay:  #C97C5D;
  --clr-sand:  #D9A88F;
  --clr-paper: #F7F3EF;
  --clr-stone: #9C9088;
  --clr-white: #FFFFFF;

  /* semantic aliases */
  --surface-page:    var(--clr-paper);
  --surface-card:    var(--clr-white);
  --surface-inverse: var(--clr-ink);
  --surface-sunken:  color-mix(in srgb, var(--clr-ink) 3%, var(--clr-paper));
  --surface-hover:   color-mix(in srgb, var(--clr-clay) 10%, transparent);

  --text-primary:         var(--clr-ink);
  --text-primary-inverse: var(--clr-paper);
  --text-secondary:       color-mix(in srgb, var(--clr-ink) 55%, transparent);
  --text-muted:           color-mix(in srgb, var(--clr-ink) 40%, transparent);
  --text-on-accent:       var(--clr-paper);

  --border-subtle:  color-mix(in srgb, var(--clr-ink) 8%, transparent);
  --border-default: color-mix(in srgb, var(--clr-ink) 16%, transparent);
  --border-strong:  color-mix(in srgb, var(--clr-ink) 30%, transparent);

  --accent:         var(--clr-clay);
  --accent-hover:   color-mix(in srgb, var(--clr-clay) 88%, black);
  --accent-tint:    color-mix(in srgb, var(--clr-clay) 14%, var(--clr-paper));
  --accent-on-dark: var(--clr-sand);

  /* typography */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Space Grotesk', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --text-display-xl: 600 56px/1.05 var(--font-display);
  --text-display-l:  600 40px/1.1  var(--font-display);
  --text-display-m:  600 30px/1.15 var(--font-display);
  --text-heading-l:  600 24px/1.25 var(--font-display);
  --text-heading-m:  600 20px/1.3  var(--font-display);
  --text-heading-s:  600 16px/1.35 var(--font-display);

  --text-body-l: 400 17px/1.6 var(--font-body);
  --text-body-m: 400 15px/1.6 var(--font-body);
  --text-body-s: 400 13px/1.5 var(--font-body);

  --text-label: 500 11px/1.3  var(--font-mono);
  --text-data:  500 18px/1.3  var(--font-mono);
  --text-tag:   600 10.5px/1  var(--font-mono);

  --tracking-display: -0.01em;
  --tracking-tag:      0.12em;

  /* spacing (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;

  /* radii & shadows */
  --radius-xs: 2px;
  --radius-s:  4px;
  --radius-m:  6px;
  --radius-l:  12px;
  --radius-pill: 999px;

  --shadow-card:    0 1px 3px rgba(35, 31, 29, 0.06);
  --shadow-raised:  0 4px 16px rgba(35, 31, 29, 0.10);
  --shadow-overlay: 0 12px 40px rgba(35, 31, 29, 0.22);

  --ease-standard:    cubic-bezier(0.2, 0, 0, 1);
  --duration-fast:    120ms;
  --duration-standard: 200ms;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-display);
  background: var(--surface-page);
  color: var(--text-primary);
}
h1, h2, h3, p, figure { margin: 0; }
a { color: var(--clr-clay); text-decoration: none; }
a:hover { color: var(--accent-hover); }
img, svg { display: block; max-width: 100%; }

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

/* ==========================================================================
   Type utility classes
   ========================================================================== */
.tag {
  display: block;
  font: var(--text-tag);
  letter-spacing: var(--tracking-tag);
  text-transform: uppercase;
}
.display-xl {
  font: var(--text-display-xl);
  font-size: clamp(36px, 3.2vw + 24px, 56px);
  line-height: 1.08;
  letter-spacing: var(--tracking-display);
}
.display-l  { font: var(--text-display-l);  letter-spacing: var(--tracking-display); }
.heading-l  { font: var(--text-heading-l); }
.heading-m  { font: var(--text-heading-m); }
.heading-s  { font: var(--text-heading-s); }
.body-l { font: var(--text-body-l); }
.body-m { font: var(--text-body-m); }
.body-s { font: var(--text-body-s); }
.data   { font: var(--text-data); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 24px;
  font: 600 15px/1.3 var(--font-display);
  letter-spacing: var(--tracking-display);
  border-radius: var(--radius-m);
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary { background: var(--clr-clay); color: var(--clr-paper); }
.btn-primary:hover { background: var(--accent-hover); color: var(--clr-paper); }
.btn-secondary { background: var(--clr-paper); color: var(--clr-ink); }
.btn-secondary:hover { background: var(--clr-white); color: var(--clr-ink); }
.btn-sm {
  padding: 6px 12px;
  font: 600 13px/1.3 var(--font-display);
  border-radius: var(--radius-s);
}

/* ==========================================================================
   Site header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px clamp(20px, 5vw, 48px);
  background: var(--clr-paper);
  border-bottom: 1px solid var(--border-subtle);
}
.site-header__logo {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
}
.site-header__logo-text {
  font: 600 22px/1 var(--font-display);
  letter-spacing: var(--tracking-display);
  color: var(--clr-ink);
}
.logo-cursor {
  width: 5px;
  height: 19px;
  background: var(--clr-clay);
  margin-left: 4px;
  border-radius: 1px;
}
.site-header__nav {
  display: flex;
  gap: 32px;
}
.site-header__nav a {
  font: 500 14px var(--font-display);
  color: var(--text-secondary);
}
@media (max-width: 720px) {
  .site-header__nav { display: none; }
}

/* ==========================================================================
   Site footer
   ========================================================================== */
.site-footer {
  background: var(--clr-ink);
  color: var(--clr-sand);
  padding: 40px clamp(20px, 5vw, 48px);
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
  align-items: flex-start;
  border-top: 1px solid color-mix(in srgb, var(--clr-paper) 10%, transparent);
}
.site-footer__brand { display: flex; flex-direction: column; gap: 8px; }
.site-footer__logo { display: flex; align-items: center; gap: 2px; }
.site-footer__logo-text {
  font: 600 20px/1 var(--font-display);
  letter-spacing: var(--tracking-display);
  color: var(--clr-paper);
}
.site-footer .logo-cursor { width: 4px; height: 15px; }
.site-footer__tagline {
  font: 500 10px/1 var(--font-mono);
  letter-spacing: var(--tracking-tag);
  color: var(--clr-sand);
}
.site-footer nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.site-footer nav .tag { color: var(--clr-sand); opacity: 0.7; }
.site-footer nav a, .site-footer__contact a {
  font: var(--text-body-s);
  color: var(--clr-paper);
}
.site-footer__contact { display: flex; flex-direction: column; gap: 10px; }

/* ==========================================================================
   Sections (shared)
   ========================================================================== */
.section {
  padding: clamp(48px, 8vw, 72px) clamp(20px, 5vw, 48px);
}
.section--intro {
  background: var(--clr-ink);
  padding: clamp(56px, 8vw, 80px) clamp(20px, 5vw, 48px) clamp(48px, 7vw, 64px);
}
.section--paper { background: var(--clr-paper); }
.section--sunken { background: var(--surface-sunken); }

.section--cta {
  padding: clamp(40px, 7vw, 56px) clamp(20px, 5vw, 48px);
  background: var(--clr-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.section--cta__heading { font: var(--text-heading-l); color: var(--clr-paper); }
.section--cta__sub { font: var(--text-body-m); color: var(--clr-sand); margin-top: 8px; }

/* ==========================================================================
   Hero (home)
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--clr-ink);
  padding: clamp(48px, 8vw, 72px) clamp(20px, 5vw, 48px) clamp(40px, 6vw, 64px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 48px;
  align-items: center;
}

/* Hero intro overlay (built by js/scenes.js; sits over the hero only) */
.hero-intro {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: var(--clr-ink);
  opacity: 1;
  transition: opacity 0.9s ease;
}
.hero-intro--fading { opacity: 0; pointer-events: none; }
.hero-intro__skip {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 2;
  background: transparent;
  border: 1px solid rgba(247, 243, 239, 0.35);
  color: #F7F3EF;
  font: 500 12px/1 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 16px;
  border-radius: var(--radius-m);
  cursor: pointer;
}
.hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.hero__eyebrow { color: var(--clr-clay); white-space: nowrap; }
.hero__title { color: var(--clr-paper); max-width: 560px; }
.hero__sub { color: var(--clr-sand); max-width: 480px; }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__fineprint { color: var(--clr-stone); }

.hero__mockup { display: flex; flex-direction: column; gap: 12px; }
.hero__mockup-label { display: flex; justify-content: space-between; align-items: center; }
.chat-card {
  background: var(--clr-paper);
  border-radius: var(--radius-m);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow-raised);
}
.chat-bubble {
  padding: 10px 14px;
  border-radius: var(--radius-m);
  font: var(--text-body-s);
}
.chat-bubble--user {
  align-self: flex-end;
  max-width: 80%;
  background: var(--border-subtle);
  color: var(--clr-ink);
}
.chat-bubble--ai {
  align-self: flex-start;
  max-width: 88%;
  background: var(--accent-tint);
  color: var(--clr-ink);
  line-height: 1.55;
  padding: 12px 14px;
}
.chat-divider { height: 1px; background: var(--border-subtle); }
.chat-source { display: flex; align-items: center; gap: 8px; }
.chat-source span { font: var(--text-body-s); color: var(--text-secondary); }
.chat-source svg { width: 14px; height: 14px; color: var(--clr-clay); flex: none; }

/* ==========================================================================
   Coverage strip
   ========================================================================== */
.coverage-strip {
  display: flex;
  flex-wrap: wrap;
  background: var(--clr-paper);
  border-bottom: 1px solid var(--border-subtle);
}
.coverage-item {
  flex: 1 1 240px;
  padding: 24px clamp(20px, 5vw, 48px);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: 10px;
}
.coverage-item:last-child { border-right: none; }
.coverage-item svg { width: 18px; height: 18px; color: var(--clr-clay); flex: none; }
.coverage-item span { font: var(--text-body-s); color: var(--text-secondary); }
@media (max-width: 720px) {
  .coverage-item { border-right: none; border-bottom: 1px solid var(--border-subtle); }
  .coverage-item:last-child { border-bottom: none; }
}

/* ==========================================================================
   Steps grid ("How it works")
   ========================================================================== */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}
.step { display: flex; flex-direction: column; gap: 12px; }
.step .data { color: var(--clr-clay); }
.step h3 { font: var(--text-heading-s); color: var(--clr-ink); }
.step p { font: var(--text-body-s); color: var(--text-secondary); }

/* ==========================================================================
   Visibility demo cards
   ========================================================================== */
.visibility-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}
.card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.card__labelrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card__label { font: var(--text-tag); letter-spacing: var(--tracking-tag); text-transform: uppercase; color: var(--text-muted); }
.card__caption { font: var(--text-body-s); color: var(--text-secondary); }

/* Animated scene panels inside the visibility cards (filled by js/scenes.js) */
.scene-panel {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-s);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.scene-panel--maps { background: #EFE9E2; }
.scene-panel--ai { background: var(--clr-ink); }

/* ==========================================================================
   FAQ accordion
   ========================================================================== */
.faq-list { display: flex; flex-direction: column; max-width: 720px; }
.faq-list details { border-bottom: 1px solid var(--border-subtle); padding: 18px 0; }
.faq-list details:last-child { border-bottom: none; }
.faq-list summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font: var(--text-heading-s);
  color: var(--clr-ink);
}
.faq-list summary svg { width: 18px; height: 18px; color: var(--clr-clay); flex: none; }
.faq-list p { margin: 12px 0 0; font: var(--text-body-m); color: var(--text-secondary); }

/* ==========================================================================
   Services page
   ========================================================================== */
.service-rows { display: flex; flex-direction: column; gap: 56px; }
.service-row {
  display: grid;
  grid-template-columns: minmax(180px, 0.6fr) 2fr;
  gap: 32px;
  align-items: start;
}
.service-row h2 { font: var(--text-heading-l); color: var(--clr-ink); }
.service-row__body { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.service-row__body p { font: var(--text-body-m); color: var(--text-secondary); }
.hairline { height: 1px; background: var(--border-subtle); }
@media (max-width: 640px) {
  .service-row { grid-template-columns: 1fr; gap: 12px; }
}

/* ==========================================================================
   Blog
   ========================================================================== */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.blog-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  color: inherit;
}
a.blog-card:hover { color: inherit; }
a.blog-card:hover h2 { color: var(--accent-hover); }
.blog-card--soon { opacity: 0.55; box-shadow: none; }
.blog-card__tag { font: var(--text-tag); letter-spacing: var(--tracking-tag); text-transform: uppercase; color: var(--clr-clay); }
.blog-card--soon .blog-card__tag { color: var(--text-muted); }
.blog-card h2 { font: var(--text-heading-m); color: var(--clr-ink); }
.blog-card p { font: var(--text-body-s); color: var(--text-secondary); }
.blog-card__read { font: 600 13px var(--font-display); color: var(--clr-clay); }

/* Blog post article */
.article {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(48px, 8vw, 72px) clamp(20px, 5vw, 48px) clamp(64px, 9vw, 96px);
}
.article__back { font: 600 13px var(--font-display); color: var(--clr-clay); }
.article__meta { margin: 20px 0 4px; font: var(--text-tag); letter-spacing: var(--tracking-tag); text-transform: uppercase; color: var(--text-muted); }
.article__title {
  margin: 0 0 20px;
  font: var(--text-display-l);
  font-size: clamp(30px, 2vw + 20px, 40px);
  line-height: 1.12;
  letter-spacing: var(--tracking-display);
  color: var(--clr-ink);
}
.article__lede { margin: 0 0 24px; font: var(--text-body-l); color: var(--clr-ink); line-height: 1.7; }
.article h2 { margin: 32px 0 12px; font: var(--text-heading-l); color: var(--clr-ink); }
.article p { margin: 0 0 16px; font: var(--text-body-m); color: var(--text-secondary); line-height: 1.7; }
.article .faq-list { margin-top: 16px; }
.article-cta {
  margin-top: 48px;
  padding: 24px;
  background: var(--surface-sunken);
  border-radius: var(--radius-m);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.article-cta span { font: var(--text-heading-s); color: var(--clr-ink); }
.article-cta .btn { padding: 11px 20px; font: 600 14px var(--font-display); }

/* ==========================================================================
   Audit form
   ========================================================================== */
.form-wrap { width: 100%; max-width: 560px; margin: 0 auto; }
form.audit-form { display: flex; flex-direction: column; gap: 20px; }
form.audit-form label {
  font: 600 13px var(--font-display);
  color: var(--clr-ink);
  display: block;
  margin-bottom: 6px;
}
form.audit-form input {
  font: var(--text-body-m);
  font-family: var(--font-display);
  color: var(--clr-ink);
  background: var(--clr-paper);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-s);
  padding: 12px 14px;
  width: 100%;
  box-sizing: border-box;
}
form.audit-form input::placeholder { color: var(--text-muted); }
form.audit-form input:focus { outline: 2px solid var(--clr-clay); outline-offset: 1px; }
form.audit-form .btn { width: 100%; }
form.audit-form .fineprint { margin: 0; font: var(--text-body-s); color: var(--text-muted); text-align: center; }
/* honeypot field, hidden from sighted users and most bots that don't render CSS */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.confirm-card {
  background: var(--surface-sunken);
  border-radius: var(--radius-m);
  padding: 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.confirm-card__icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-pill);
  background: var(--clr-clay);
  color: var(--clr-paper);
  display: flex; align-items: center; justify-content: center;
}
.confirm-card h2 { font: var(--text-heading-l); color: var(--clr-ink); }
.confirm-card p { font: var(--text-body-m); color: var(--text-secondary); max-width: 420px; }

.error-text { font: var(--text-body-s); color: var(--status-danger, #B5544A); margin: 0; }

/* ==========================================================================
   About page
   ========================================================================== */
.about-body { max-width: 720px; display: flex; flex-direction: column; gap: 20px; }
.about-body p:first-child { font: var(--text-body-l); color: var(--clr-ink); line-height: 1.7; }
.about-body p { font: var(--text-body-m); color: var(--text-secondary); line-height: 1.7; }

/* ==========================================================================
   Utility
   ========================================================================== */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}