/* Shared site styles — loaded by every page */
:root {
  /* Poppins everywhere */
  --tnf-display: 'Poppins', system-ui, -apple-system, sans-serif;
  --tnf-sans: 'Poppins', system-ui, -apple-system, sans-serif;
  --tnf-logo-display: 'Poppins', system-ui, -apple-system, sans-serif;
  --tnf-logo-sans: 'Poppins', system-ui, -apple-system, sans-serif;
  --tnf-green: #2BD884;
  --tnf-green-dk: #16B26C;
  --tnf-turq: #5BC0DE;
  --tnf-turq-dk: #3FA7C9;
  --tnf-blue: #1B6478;
  --tnf-blue-dk: #0F4A5C;
  --tnf-blue-xdk: #072A35;
  --tnf-cream: #FAF8F2;
  --tnf-paper: #F4F1EA;
  --tnf-ink: #0B2630;
  --tnf-ink-soft: #3A5560;
  --tnf-line: rgba(11, 38, 48, 0.12);
  --tnf-line-soft: rgba(11, 38, 48, 0.07);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: var(--tnf-sans);
  color: var(--tnf-ink);
  background: var(--tnf-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}
button { font-family: inherit; cursor: pointer; }
a { color: inherit; }
img { display: block; max-width: 100%; }

/* Card hover lift utility */
.tnf-card-hover {
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s;
}
.tnf-card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(11,38,48,0.12);
}

/* Timeline card — shadow lift only (inline transform drives the reveal) */
.tnf-tl-card:hover {
  box-shadow: 0 14px 34px rgba(11,38,48,0.11) !important;
}

/* Subtle reveal on load — used by hero polaroids etc. */
@keyframes tnf-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.tnf-fade { animation: tnf-fade-up .8s cubic-bezier(.2,.7,.2,1) both; }

/* Detail-dock content swap — used by services process section */
@keyframes tnf-process-swap {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.tnf-process-fade { animation: tnf-process-swap .35s cubic-bezier(.2,.7,.2,1) both; }

/* Required-field shake — quote modal validation */
@keyframes tnf-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}
.tnf-shake { animation: tnf-shake .5s cubic-bezier(.36,.07,.19,.97) both; }

/* Respect users who prefer reduced motion — tone down CSS animations/transitions */
@media (prefers-reduced-motion: reduce) {
  html, body { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}