/* ============================================================
   Centive site — layer on top of centive-tokens.css
   Light-canvas theme, motion, marquee, nav, responsive helpers
   ============================================================ */

/* ---------- Light canvas theme (Tweak toggle) ---------- */
html[data-theme="light"] {
  --canvas:           #ffffff;
  --surface-soft:     #f5f5f2;
  --surface-card:     #ffffff;
  --surface-elevated: #f0f0ec;
  --hairline:         #e5e4df;
  --hairline-hover:   #cfcec8;
  --ink:              #0a0a0a;
  --body:             #3b3b38;
  --muted:            #6b6b66;
  --muted-soft:       #9a9a93;
  --on-primary:       #0a0a0a;
  --overlay:          rgba(20, 20, 18, 0.55);
  --focus-ring:       rgba(184, 188, 60, 0.45);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
body {
  background: var(--canvas);
  color: var(--body);
  font-family: var(--font-sans);
  transition: background 200ms ease, color 200ms ease;
}

a { color: inherit; }

::selection { background: var(--primary); color: #0a0a0a; }

.wrap { max-width: var(--max-content); margin: 0 auto; padding-left: 32px; padding-right: 32px; }

/* ---------- Smooth interactive transitions ---------- */
a, button { transition: color 120ms ease-out, background 120ms ease-out, border-color 120ms ease-out, opacity 120ms ease-out; }

/* ---------- Scroll-reveal motion ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 640ms cubic-bezier(.16,.84,.34,1), transform 640ms cubic-bezier(.16,.84,.34,1);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

/* ---------- Logo marquee ---------- */
.marquee {
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 28px;
  padding-right: 28px;
  animation: marquee-scroll 60s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* ---------- Logo tiles inside marquee ---------- */
.logo-tile {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.logo-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Nav ---------- */
.nav-link { position: relative; }
.nav-link::after {
  content: "";
  position: absolute; left: 0; right: 100%; bottom: -6px; height: 2px;
  background: var(--primary);
  transition: right 160ms ease-out;
}
.nav-link:hover::after, .nav-link[data-active="true"]::after { right: 0; }
.nav-link[data-active="true"] { color: var(--ink); }

/* ---------- Animated underline links ---------- */
.ul-link { text-decoration: none; }
.ul-link:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--primary); }

/* ---------- Hover affordances ---------- */
article.card:hover { border-color: var(--hairline-hover) !important; }
.arrow-row:hover .arrow { transform: translateX(5px); }
.arrow { transition: transform 160ms ease-out; }

button.btn-primary:hover { background: var(--primary-active) !important; }
button.btn-secondary:hover { border-color: var(--hairline-hover) !important; }

/* ---------- Hero gridline backdrop (subtle, on-brand) ---------- */
.gridlines {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000, transparent 75%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000, transparent 75%);
  opacity: 0.5;
}

/* ---------- Caret blink for clause card ---------- */
.caret { display: inline-block; width: 8px; height: 1.05em; background: var(--primary); margin-left: 2px; vertical-align: text-bottom; animation: caret-blink 1.1s steps(1) infinite; }
@keyframes caret-blink { 50% { opacity: 0; } }

/* ---------- Mobile nav ---------- */
#mobile-menu { display: none; }

/* Collapse the (now longer, mono) link set to the burger only on small
   screens so the centered links never collide with the logo / CTA. */
@media (max-width: 800px) {
  .nav-desktop { display: none !important; }
  .nav-burger { display: inline-flex !important; }
}

@media (max-width: 860px) {
  .wrap { padding-left: 22px; padding-right: 22px; }
  .grid-2 { grid-template-columns: 1fr !important; }
  .grid-3 { grid-template-columns: 1fr !important; }
  .grid-4 { grid-template-columns: 1fr 1fr !important; }
  .hero-h1 { font-size: clamp(40px, 12vw, 60px) !important; }
  .sec { padding-top: 64px !important; padding-bottom: 64px !important; }
}
@media (max-width: 540px) {
  .grid-4 { grid-template-columns: 1fr !important; }
}

/* ---------- Team faces (B&W per brand) ---------- */
.team-grid image-slot { filter: grayscale(1) contrast(1.04); transition: filter 160ms ease-out; }
.team-grid article.card:hover image-slot { filter: grayscale(0) contrast(1); }
@media (max-width: 860px) {
  .team-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 540px) {
  .team-grid { grid-template-columns: 1fr !important; }
}

/* ---------- Lease health check layout ---------- */
@media (max-width: 860px) {
  .hc-layout { grid-template-columns: 1fr !important; }
}

/* ---------- Case study layout ---------- */
@media (max-width: 860px) {
  .cs-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
}

/* Services process responsive */
@media (max-width: 860px) {
  .svc-phase { grid-template-columns: 1fr !important; gap: 20px !important; }
  .svc-phase-items { grid-template-columns: 1fr !important; }
  .svc-phase-head { position: static !important; }
  .svc-bullets { grid-template-columns: 1fr !important; }
}

/* ---------- Reduced motion (system pref OR Tweak toggle) ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track { animation: none; }
  .caret { animation: none; }
}
html.no-motion .reveal { opacity: 1; transform: none; transition: none; }
html.no-motion .marquee-track { animation: none; }
html.no-motion .caret { animation: none; }
html.no-motion .arrow { transition: none; }