/* ============================================================
   Tribute for Work (/tribute-for-work/)
   Marketing page. Pairs with homepage.css (nav, footer, fonts)
   + footer.css. Page-scoped under .tfw, branded with the v3
   marketing tokens (--color-primary red, Newsreader/Roboto Flex).
   No DaisyUI, no --theme-* tokens.
   ============================================================ */

.tfw {
  /* Page-scoped tokens mapped onto v3 marketing brand */
  --tfw-primary: var(--color-primary);
  --tfw-primary-hover: var(--color-primary-hover);
  --tfw-ink: #0b1220;          /* dark hero / cta surface */
  --tfw-ink-soft: #131c2e;
  --tfw-text-strong: var(--color-dark);     /* #030712 */
  --tfw-text-body: #4b5563;
  --tfw-text-muted: #6b7280;
  --tfw-border: #e5e7eb;
  --tfw-surface: #ffffff;
  --tfw-sunken: var(--color-gray-light);    /* #f3f4f6 */
  --tfw-brand-soft: #fdecea;
  --tfw-brand-soft-bd: #f6c9c4;

  /* functional accent categories (appreciation map) — light & friendly */
  --tfw-career: #fb7185;   /* rose */
  --tfw-team: #2dd4bf;     /* teal */
  --tfw-personal: #fbbf24; /* amber */
  --tfw-company: #818cf8;  /* indigo */

  --tfw-radius-sm: 6px;
  --tfw-radius-md: 10px;
  --tfw-radius-lg: 16px;
  --tfw-radius-xl: 24px;
  --tfw-pill: 999px;

  --tfw-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.07);
  --tfw-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.10);
  --tfw-shadow-lg: 0 18px 48px rgba(15, 23, 42, 0.14);
  --tfw-shadow-brand: 0 8px 22px rgba(199, 31, 13, 0.28);

  font-family: 'Roboto Flex', sans-serif;
  color: var(--tfw-text-body);
  background: var(--tfw-surface);
  overflow-x: hidden;
}

.tfw *,
.tfw *::before,
.tfw *::after { box-sizing: border-box; }

.tfw-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1.75rem;
}

/* ---------- Shared section scaffolding ---------- */
.tfw-section { padding: 5.25rem 0; border-top: 1px solid var(--tfw-border); }
.tfw-section-sunken { background: var(--tfw-sunken); border-top-color: #d9dce3; }

.tfw-section-head {
  max-width: 680px;
  margin: 0 auto 3rem;
  text-align: center;
}
.tfw-section-title {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 600;
  font-size: 2.6rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--tfw-text-strong);
  margin: 0.75rem 0 0.75rem;
  text-wrap: balance;
}
.tfw-section-sub {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--tfw-text-body);
  margin: 0;
}
.tfw-section-cta { text-align: center; margin-top: 2.5rem; }

/* Thin top border per section, tinted to a slightly darker shade of each
   section's top background (orb/gradient colour) so the line blends in. */
.tfw-tears { border-top: 1px solid var(--tfw-brand-soft-bd); }   /* coral band */
.tfw-calendar { border-top-color: #ccd2ec; }                     /* cool indigo/blue orbs */
.tfw-howsection { border-top-color: #c6d9f3; }                   /* light-blue orbs */
.tfw-bottomcta { border-top-color: #f0cbc5; }                    /* coral/cyan glow */

.tfw-accent {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  background: linear-gradient(120deg, #93c5fd 0%, #fca5a5 55%, #fde68a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding-right: 10px;
}
.tfw-accent-red {
  font-family: 'Newsreader', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  color: var(--tfw-primary);
}

/* ---------- Pills / eyebrows ---------- */
.tfw-pill {
  display: inline-block;
  font-weight: 600;
  font-size: 0.8125rem;
  padding: 0.375rem 0.875rem;
  border-radius: var(--tfw-pill);
}
.tfw-pill-brand { background: var(--tfw-primary); color: #fff; box-shadow: var(--tfw-shadow-brand); }
.tfw-pill-info { background: #e0f2fe; color: #0369a1; }
.tfw-pill-gold { background: #fef3c7; color: #b45309; }
.tfw-pill-dark { background: var(--tfw-ink); color: #fff; }
.tfw-pill-teal { background: #d1fae5; color: #047857; }

.tfw-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.8125rem;
  padding: 0.4375rem 0.8125rem;
  border-radius: var(--tfw-pill);
}
.tfw-eyebrow-light {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fecaca;
}
.tfw-eyebrow-light svg { color: #fca5a5; }

/* ---------- Buttons ---------- */
.tfw-btn {
  display: inline-block;
  cursor: pointer;
  font-family: 'Roboto Flex', sans-serif;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-white);
  background: var(--gradient-primary);
  border: none;
  padding: 0.875rem 1.75rem;
  border-radius: 0.5rem;
  text-decoration: none;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: background var(--transition-base), transform var(--transition-fast), box-shadow var(--transition-base);
}
.tfw-btn:hover { background: var(--gradient-primary-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.tfw-btn:active { transform: scale(0.99); }
.tfw-btn-block { width: 100%; }
.tfw-btn-sm { padding: 0.6875rem 1.25rem; font-size: 0.9375rem; }

.tfw-textlink {
  display: inline-block;
  margin-top: 1.25rem;
  color: var(--tfw-primary);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
}
.tfw-textlink:hover { color: var(--tfw-primary-hover); }

/* Star rating rendered from the star PNG; font-size:0 hides the ★ text fallback */
.tfw-stars {
  display: inline-block;
  vertical-align: middle;
  height: 15px;
  width: 87px;
  font-size: 0;
  background-image: url("star.9beaa7b37839.png");
  background-size: 15px 15px;
  background-repeat: space;
}
.tfw-stars-lg { height: 20px; width: 116px; background-size: 20px 20px; }

/* ============================================================
   SCROLL REVEAL — blocks rise & fade in as they enter view.
   JS adds .tfw-anim to enable, then strips the classes once each
   element has revealed so hover transforms keep working.
   ============================================================ */
.tfw-anim .tfw-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.55s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.tfw-anim .tfw-reveal.is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .tfw-anim .tfw-reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   BRIEFCASE INTRO (5s) — drops & rises at varying speeds
   ============================================================ */
.tfw-briefcases {
  position: absolute;  /* scoped to the hero; clipped by .tfw-hero overflow:hidden */
  inset: 0;
  z-index: 1;          /* above the hero glow, below the hero content (z-index 95) */
  overflow: hidden;
  pointer-events: none;
  transition: opacity 0.8s ease;
}
.tfw-briefcases.is-out { opacity: 0; }
.tfw-bc {
  position: absolute;
  top: 0;
  will-change: transform, opacity;
  animation-name: tfwBcMove;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
.tfw-bc img { display: block; width: 100%; height: auto; }
@keyframes tfwBcMove {
  0%   { transform: translateY(var(--from)) rotate(var(--r0)); opacity: 0; }
  12%  { opacity: var(--op, 1); }
  88%  { opacity: var(--op, 1); }
  100% { transform: translateY(var(--to)) rotate(var(--r1)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tfw-briefcases { display: none; }
}

/* ============================================================
   HERO
   ============================================================ */
.tfw-hero {
  position: relative;
  overflow: hidden;
  background: var(--tfw-ink);
  padding-top: calc(var(--nav-height) + 1rem);
}
.tfw-hero-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(58% 80% at 8% 0%, rgba(199, 31, 13, 0.34) 0%, transparent 56%),
    radial-gradient(55% 75% at 100% 18%, rgba(29, 78, 216, 0.26) 0%, transparent 56%);
  pointer-events: none;
}
/* Subtle diagonal edge-lit line — lighter upper-left, darker lower-right,
   with a faint bright seam at the boundary. */
.tfw-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2; /* above glow + briefcases, below hero content (z-index 95) */
  pointer-events: none;
  /* "\" seam in the left-centre gap: darker below-left, faint light above-right.
     Move the 46% stop to slide the line left/right; change 50deg for steepness. */
  background: linear-gradient(
    50deg,
    rgba(0, 0, 0, 0.08) 0%,
    rgba(0, 0, 0, 0.08) 40.97%,
    rgba(255, 255, 255, 0.18) 41%,
    rgba(255, 255, 255, 0.04) 41.03%,
    rgba(255, 255, 255, 0.04) 100%
  );
  /* fade the whole overlay (and the seam) before it reaches the top/bottom edges */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
.tfw-hero-grid {
  position: relative;
  z-index: 95; /* lift hero copy + form above the briefcase layer (z-index 90) */
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  gap: 3.25rem;
  align-items: center;
  padding-top: 3.5rem;
  padding-bottom: 4.5rem;
}
.tfw-hero-title {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 500;
  font-size: 3.75rem;
  line-height: 1.04;
  letter-spacing: -0.02em;
  /* override homepage.css's global gradient-fill on bare h1 */
  background: none;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  margin: 1.125rem 0 0;
  text-wrap: balance;
}
.tfw-hero-sub {
  font-size: 1.1875rem;
  line-height: 1.55;
  color: #e5e7eb;
  margin: 1.375rem 0 0;
  max-width: 33rem;
}
.tfw-hero-bullets {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 1.75rem;
}
.tfw-bullet { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; font-size: 0.9375rem; color: #e5e7eb; }
.tfw-bullet-dark { color: var(--tfw-text-strong); font-size: 1rem; }
.tfw-check {
  width: 22px; height: 22px; flex: none;
  border-radius: 50%;
  background: #34d399; color: #052e16;
  display: flex; align-items: center; justify-content: center;
}
.tfw-check svg { width: 13px; height: 13px; }
.tfw-check-soft { background: #059669; color: #fff; }

.tfw-hero-proof { display: flex; align-items: center; gap: 0.875rem; margin-top: 2rem; }
.tfw-avatars { display: flex; }
.tfw-avatar {
  width: 38px; height: 38px; margin-left: -10px;
  border-radius: 50%;
  border: 2.5px solid var(--tfw-ink);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; font-size: 0.8125rem;
}
.tfw-avatars .tfw-avatar:first-child { margin-left: 0; }
.tfw-proof-text { font-size: 0.875rem; color: #cbd5e1; line-height: 1.4; }
.tfw-proof-text b { color: #fff; }

/* ---------- Intake form card ---------- */
.tfw-form-card {
  background: #fff;
  border: 1px solid var(--tfw-border);
  border-radius: var(--tfw-radius-xl);
  box-shadow: var(--tfw-shadow-lg);
  padding: 1.875rem 1.875rem 1.625rem;
}
.tfw-form-title {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--tfw-text-strong);
  margin: 0;
}
.tfw-form-lede { font-size: 0.9rem; color: var(--tfw-text-body); margin: 0.4375rem 0 1.25rem; line-height: 1.45; }
.tfw-form { display: flex; flex-direction: column; gap: 0.9375rem; }
.tfw-field-row { display: flex; gap: 0.75rem; }
.tfw-field { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.tfw-label {
  display: block;
  font-size: 0.6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--tfw-text-muted);
  margin-bottom: 0.375rem;
}
.tfw-field input,
.tfw-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--tfw-border);
  border-radius: var(--tfw-radius-md);
  font: 500 0.9375rem 'Roboto Flex', sans-serif;
  color: var(--tfw-text-strong);
  background: #fff;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.tfw-field textarea { resize: vertical; }
.tfw-field input:focus,
.tfw-field textarea:focus {
  border-color: #f6a39b;
  box-shadow: 0 0 0 3px rgba(199, 31, 13, 0.16);
}
.tfw-field input::placeholder,
.tfw-field textarea::placeholder { color: #9ca3af; }

/* Occasion pills */
.tfw-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tfw-chip {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.5625rem 0.875rem;
  border-radius: var(--tfw-pill);
  font: 600 0.8125rem 'Roboto Flex', sans-serif;
  cursor: pointer; user-select: none;
  background: #fff;
  border: 1px solid var(--tfw-border);
  color: var(--tfw-text-strong);
  transition: all var(--transition-fast);
}
.tfw-chip:hover { border-color: var(--tfw-brand-soft-bd); background: var(--tfw-brand-soft); }
.tfw-chip.is-selected {
  background: var(--tfw-primary);
  border-color: var(--tfw-primary);
  color: #fff;
  box-shadow: var(--tfw-shadow-brand);
}
.tfw-chip.is-selected:hover { background: var(--tfw-primary-hover); }

/* Honeypot — visually hidden, off the tab order, but reachable by bots */
.tfw-hp {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

.tfw-btn[aria-busy="true"] { opacity: 0.7; pointer-events: none; }

.tfw-form-error { font-size: 0.84rem; color: var(--color-primary); font-weight: 600; margin: 0; }
.tfw-form-fineprint { text-align: center; font-size: 0.78rem; color: var(--tfw-text-muted); margin: 0.125rem 0 0; }

.tfw-form-success { text-align: center; padding: 1.75rem 0.5rem 1.25rem; }
.tfw-success-icon {
  width: 64px; height: 64px; margin: 0 auto 1.125rem;
  border-radius: 50%;
  background: var(--tfw-brand-soft);
  color: var(--tfw-primary);
  display: flex; align-items: center; justify-content: center;
}
.tfw-form-success .tfw-form-lede { max-width: 21rem; margin: 0.75rem auto 0; font-size: 0.95rem; line-height: 1.55; }

/* ============================================================
   TRUST BAR
   ============================================================ */
.tfw-trust { background: #fff; border-top: 1px solid var(--tfw-border); }
.tfw-trust-inner {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding-top: 1.75rem; padding-bottom: 1.75rem;
}
.tfw-trust-label {
  font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--tfw-text-muted);
  text-align: center;
}
.tfw-trust-logos {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 1.75rem 4rem;
}
.tfw-logo {
  height: 40px;
  width: auto;
  max-width: 190px;
  object-fit: contain;
}
.tfw-logo-square { height: 62px; }
.tfw-logo-kaiser { height: 50px; }
.tfw-logo-godaddy { height: 34px; }

@media (max-width: 767px) {
  .tfw-trust-logos { gap: 1.5rem 2.5rem; }
  .tfw-logo { height: 30px; }
  .tfw-logo-square { height: 46px; }
  .tfw-logo-kaiser { height: 38px; }
}

/* ============================================================
   TEARS STAT BAND
   ============================================================ */
.tfw-tears { position: relative; overflow: hidden; background: var(--tfw-brand-soft); }
.tfw-tears-glow {
  position: absolute; inset: 0;
  background: radial-gradient(60% 120% at 50% 0%, #fbd5d0, transparent 62%);
  pointer-events: none;
}
.tfw-tears-inner { position: relative; max-width: 980px; margin: 0 auto; padding: 5.25rem 1.75rem; text-align: center; }
.tfw-tears-stat {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 600; font-size: 5.5rem;
  letter-spacing: -0.03em; line-height: 1;
  margin: 2.5rem 0 0.375rem;
  color: var(--tfw-text-strong);
}
.tfw-tears-pct { font-size: 3.125rem; margin-left: 0.12em; }
.tfw-tears-copy { font-size: 1.25rem; color: var(--tfw-text-body); max-width: 600px; margin: 0 auto 2.25rem; line-height: 1.5; }
.tfw-tears-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.125rem 3.5rem; }
.tfw-ministat-n { font-family: 'Newsreader', Georgia, serif; font-weight: 600; font-size: 2.125rem; color: var(--tfw-text-strong); line-height: 1; }
.tfw-ministat-star { width: 0.72em; height: 0.72em; vertical-align: 0.04em; margin-left: 0.06em; }
.tfw-ministat-l { font-size: 0.875rem; color: var(--tfw-text-muted); margin-top: 0.5rem; }

/* Crying-emoji confetti burst from the 83.4% stat */
.tfw-burst {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: visible;
}
.tfw-burst-emoji {
  position: absolute;
  height: auto;
  will-change: transform, opacity;
  user-select: none;
}

/* Mini-stats drop in progressively once the band scrolls into view (JS adds
   .will-animate so they stay visible if JS is off, then .is-in to reveal). */
.tfw-tears-stats.will-animate .tfw-ministat {
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tfw-tears-stats.will-animate.is-in .tfw-ministat { opacity: 1; transform: translateY(0); }
.tfw-tears-stats.will-animate.is-in .tfw-ministat:nth-child(1) { transition-delay: 0.05s; }
.tfw-tears-stats.will-animate.is-in .tfw-ministat:nth-child(2) { transition-delay: 0.20s; }
.tfw-tears-stats.will-animate.is-in .tfw-ministat:nth-child(3) { transition-delay: 0.35s; }

/* ============================================================
   GRIDS
   ============================================================ */
.tfw-grid { display: grid; gap: 1.375rem; }
.tfw-grid-3 { grid-template-columns: repeat(3, 1fr); }

/* ---------- Product suite ---------- */
.tfw-product {
  background: #fff;
  border: 1px solid var(--tfw-border);
  border-radius: var(--tfw-radius-lg);
  box-shadow: var(--tfw-shadow-sm);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.tfw-product:hover { transform: translateY(-3px); box-shadow: var(--tfw-shadow-md); }
.tfw-product-media { aspect-ratio: 16 / 9; position: relative; overflow: hidden; background: var(--tfw-sunken); }
.tfw-product-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tfw-product-tag {
  position: absolute; top: 12px; left: 12px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--tfw-text-strong);
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.02em;
  padding: 0.3125rem 0.625rem; border-radius: var(--tfw-pill);
}
.tfw-product-body { padding: 1.375rem; }
.tfw-product-body h3 { font-family: 'Newsreader', Georgia, serif; font-weight: 600; font-size: 1.3125rem; color: var(--tfw-text-strong); margin: 0; }
.tfw-product-body p { font-size: 0.9rem; color: var(--tfw-text-body); line-height: 1.55; margin: 0.5rem 0 0; }

/* Responsive grid */
.tfw-product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.375rem;
  margin-top: 3rem;
}

@media (max-width: 900px) {
  .tfw-product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .tfw-product-grid { grid-template-columns: 1fr; gap: 1rem; margin-top: 2.25rem; }
}

/* ---------- Appreciation map ---------- */
.tfw-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.625rem 1.375rem; margin-bottom: 2rem; }
.tfw-legend-item { display: flex; align-items: center; gap: 0.5rem; font-weight: 500; font-size: 0.875rem; color: var(--tfw-text-body); }
.tfw-legend-dot { width: 12px; height: 12px; border-radius: 4px; }
.tfw-legend-dot[data-cat="career"] { background: var(--tfw-career); }
.tfw-legend-dot[data-cat="team"] { background: var(--tfw-team); }
.tfw-legend-dot[data-cat="personal"] { background: var(--tfw-personal); }
.tfw-legend-dot[data-cat="company"] { background: var(--tfw-company); }

/* soft tint so the white calendar tiles read as cards */
/* Soft category-color orbs glowing behind the calendar tiles */
.tfw-calendar {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #fbfcfe 0%, #f5f7fc 100%);
}
.tfw-calendar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(46% 72% at 4% 10%, rgba(251, 113, 133, 0.26) 0%, transparent 60%),   /* rose — big, top-left */
    radial-gradient(30% 50% at 73% -6%, rgba(129, 140, 248, 0.22) 0%, transparent 58%),  /* indigo — small, top */
    radial-gradient(58% 84% at 98% 82%, rgba(45, 212, 191, 0.20) 0%, transparent 60%),   /* teal — large, bottom-right */
    radial-gradient(40% 64% at 20% 106%, rgba(251, 191, 36, 0.24) 0%, transparent 60%),  /* amber — bottom-left */
    radial-gradient(26% 42% at 58% 44%, rgba(129, 140, 248, 0.10) 0%, transparent 62%);  /* faint center, depth */
}
.tfw-calendar > .tfw-container { position: relative; z-index: 1; }

.tfw-months { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.875rem; }
.tfw-month {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--tfw-border);
  border-radius: var(--tfw-radius-lg);
  box-shadow: var(--tfw-shadow-sm);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.tfw-month:hover { transform: translateY(-3px); box-shadow: var(--tfw-shadow-md); }
.tfw-month-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: #fcfcfe;
  border-bottom: 1px solid var(--tfw-border);
}
.tfw-month-name {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--tfw-text-strong);
}
.tfw-month-events {
  list-style: none;
  margin: 0;
  padding: 0.75rem 1rem 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
.tfw-event {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--tfw-text-body);
}
.tfw-event-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; }
.tfw-event[data-cat="career"] .tfw-event-dot { background: var(--tfw-career); }
.tfw-event[data-cat="team"] .tfw-event-dot { background: var(--tfw-team); }
.tfw-event[data-cat="personal"] .tfw-event-dot { background: var(--tfw-personal); }
.tfw-event[data-cat="company"] .tfw-event-dot { background: var(--tfw-company); }

/* ---------- How it works (circular hub infographic) ---------- */
/* Light-blue section with soft sky/indigo orb glows */
.tfw-howsection {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #f4f9ff 0%, #e8f1fd 100%);
}
.tfw-howsection::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(44% 62% at 6% 10%, rgba(96, 165, 250, 0.24) 0%, transparent 60%),   /* blue — top-left */
    radial-gradient(34% 50% at 93% 4%, rgba(129, 140, 248, 0.20) 0%, transparent 58%),  /* indigo — top-right */
    radial-gradient(54% 76% at 92% 94%, rgba(56, 189, 248, 0.20) 0%, transparent 62%),  /* sky — bottom-right */
    radial-gradient(40% 58% at 10% 102%, rgba(147, 197, 253, 0.22) 0%, transparent 60%);/* light blue — bottom-left */
}
.tfw-howsection > .tfw-container { position: relative; z-index: 1; }


.tfw-howto {
  display: grid;
  grid-template-columns: 480px 1fr;
  gap: 1.5rem;
  align-items: center;
  max-width: 1060px;
  margin: 0 auto;
}

/* Left: hub graphic */
.tfw-howto-graphic { position: relative; width: 480px; height: 520px; }
.tfw-howto-orbit {
  position: absolute;
  width: 420px; height: 420px;
  left: -10px; top: 50px;
  border: 2px dashed #cfd4dd;
  border-radius: 50%;
}
.tfw-howto-core {
  position: absolute;
  width: 340px; height: 340px;
  left: 30px; top: 90px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 32%, #ffffff 0%, #f1f3f8 100%);
  box-shadow: 0 22px 50px rgba(15, 23, 42, 0.12), inset 0 0 0 1px rgba(15, 23, 42, 0.04);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 3rem;
}
.tfw-howto-core-icon { margin-bottom: 0.5rem; }
.tfw-howto-core-icon img { display: block; width: 116px; height: auto; }
.tfw-howto-core p {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 600;
  font-size: 1.55rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--tfw-text-strong);
  max-width: 12rem;
  margin: 0;
}

.tfw-howto-bubble {
  position: absolute;
  width: 104px; height: 104px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  background: linear-gradient(145deg, #e8604f 0%, #d12d1a 100%); /* brand red, softened */
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.18);
}
.tfw-howto-bubble svg { width: 44px; height: 44px; }
.tfw-bubble-1 { left: 288px; top: 52px; }   /* top */
.tfw-bubble-2 { left: 358px; top: 208px; }  /* middle */
.tfw-bubble-3 { left: 288px; top: 364px; }  /* bottom */

/* Right: step write-ups */
.tfw-howto-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 470px;
}
.tfw-howto-item { padding: 0.25rem 0; }
.tfw-howto-kicker {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.tfw-howto-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.tfw-howto-kicker { color: #c71f0d; }
.tfw-howto-item h3 {
  font-family: 'Roboto Flex', sans-serif;
  font-weight: 700; font-size: 1.375rem; color: var(--tfw-text-strong);
  margin: 0.5rem 0 0.4375rem;
}
.tfw-howto-item p { font-size: 0.95rem; line-height: 1.6; color: var(--tfw-text-body); margin: 0; max-width: 30rem; }

@media (max-width: 900px) {
  .tfw-howto { grid-template-columns: 1fr; gap: 2.5rem; justify-items: center; }
  .tfw-howto-graphic { transform: scale(0.82); transform-origin: top center; height: 440px; }
  .tfw-howto-list { min-height: 0; gap: 1.75rem; max-width: 30rem; }
}
@media (max-width: 560px) {
  .tfw-howto-graphic { display: none; } /* TODO: mobile-optimized hub */
}

/* ---------- Why Tribute / values (frosted-glass cards on the dark section) ---------- */
.tfw-value {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--tfw-radius-lg);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 2rem 1.75rem;
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.tfw-value:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.32);
}
.tfw-value-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px; height: 54px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 1.125rem;
}
.tfw-value-icon img { width: 30px; height: 30px; object-fit: contain; display: block; }
.tfw-value-tag { display: inline-block; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #fca5a5; }
.tfw-value h3 { font-family: 'Newsreader', Georgia, serif; font-weight: 600; font-size: 1.375rem; color: #ffffff; margin: 0.625rem 0 0.5rem; }
.tfw-value p { font-size: 0.9375rem; color: #cbd5e1; line-height: 1.6; margin: 0; }

/* Dark variant — used on the "feel seen" section to break up the light sections.
   White value cards pop against it. */
.tfw-darksection {
  position: relative;
  overflow: hidden;
  background: var(--tfw-ink);
  border-top-color: rgba(255, 255, 255, 0.08);
}
.tfw-darksection::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(52% 72% at 10% 0%, rgba(199, 31, 13, 0.22) 0%, transparent 60%),
    radial-gradient(50% 70% at 92% 100%, rgba(29, 78, 216, 0.20) 0%, transparent 60%);
}
.tfw-darksection > .tfw-container { position: relative; z-index: 1; }
.tfw-darksection .tfw-section-title { color: #ffffff; }
.tfw-darksection .tfw-section-sub { color: #cbd5e1; }
.tfw-darksection .tfw-accent-red { color: #fca5a5; } /* lighter coral reads on dark */

/* ---------- Video examples ---------- */
.tfw-video {
  display: block;
  width: 100%;
  padding: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--tfw-border);
  border-radius: var(--tfw-radius-lg);
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--tfw-shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.tfw-video:hover { transform: translateY(-3px); box-shadow: var(--tfw-shadow-lg); }
.tfw-video:focus-visible { outline: 2px solid var(--tfw-primary); outline-offset: 3px; }
.tfw-video-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0b1220;
  overflow: hidden;
}
.tfw-video-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}
.tfw-video:hover .tfw-video-img { transform: scale(1.03); }
.tfw-play {
  position: relative;
  z-index: 1;
  width: 58px; height: 58px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--tfw-shadow-md);
}
.tfw-play::after {
  content: "";
  width: 0; height: 0;
  border-left: 16px solid var(--tfw-primary);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  margin-left: 4px;
}
.tfw-video-cap { padding: 0.9375rem 1.125rem; background: #fff; font-weight: 600; font-size: 0.9375rem; color: var(--tfw-text-strong); }

/* ---------- Video modal ---------- */
.tfw-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.tfw-modal[hidden] { display: none; }
.tfw-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 18, 32, 0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: tfwFade 0.2s ease both;
}
.tfw-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 880px;
  animation: tfwFade 0.25s ease both;
}
.tfw-modal-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--tfw-radius-lg);
  overflow: hidden;
  box-shadow: var(--tfw-shadow-lg);
}
.tfw-modal-video iframe,
.tfw-modal-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.tfw-modal-close {
  position: absolute;
  top: -2.75rem;
  right: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  line-height: 1;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.tfw-modal-close:hover { background: rgba(255, 255, 255, 0.24); }
@keyframes tfwFade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 767px) {
  .tfw-modal-close { top: -2.5rem; }
}

/* ---------- Testimonials ---------- */
.tfw-quote {
  background: #fff;
  border: 1px solid var(--tfw-border);
  border-radius: var(--tfw-radius-lg);
  box-shadow: var(--tfw-shadow-sm);
  padding: 1.875rem 1.75rem;
  margin: 0;
  display: flex; flex-direction: column;
}
.tfw-quote blockquote { font-size: 0.975rem; color: var(--tfw-text-strong); line-height: 1.6; margin: 0.75rem 0 1.25rem; flex: 1; }
.tfw-quote figcaption { display: flex; align-items: center; gap: 0.75rem; font-size: 0.8125rem; color: var(--tfw-text-muted); line-height: 1.35; }
.tfw-quote figcaption b { color: var(--tfw-text-strong); font-size: 0.9rem; }
.tfw-quote-avatar {
  width: 42px; height: 42px; flex: none; border-radius: 50%;
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 0.9375rem;
}

/* ============================================================
   BOTTOM CTA
   ============================================================ */
.tfw-bottomcta { position: relative; overflow: hidden; background: var(--tfw-sunken); }
.tfw-bottomcta-glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(50% 110% at 18% 0%, #fbd5d0, transparent 58%),
    radial-gradient(50% 110% at 100% 100%, #cffafe, transparent 58%);
  pointer-events: none;
}
.tfw-bottomcta-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 0.92fr;
  gap: 3.375rem;
  align-items: center;
}
.tfw-bottomcta-mark { color: #fca5a5; margin-bottom: 0.375rem; }
.tfw-bottomcta .tfw-section-title { font-size: 2.75rem; font-weight: 500; }
.tfw-bottomcta-copy .tfw-section-sub { max-width: 27.5rem; }
.tfw-bottomcta-bullets { display: flex; flex-direction: column; gap: 0.875rem; margin-top: 1.875rem; }

/* ============================================================
   STICKY CTA
   ============================================================ */
.tfw-sticky {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 60;
  background: rgba(11, 18, 32, 0.86);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 -8px 24px rgba(11, 18, 32, 0.22);
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.tfw-sticky.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.tfw-sticky-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.125rem; padding-top: 0.875rem; padding-bottom: 0.875rem; }
.tfw-sticky-text { font-weight: 500; font-size: 0.95rem; color: #f3f4f6; }
.tfw-sticky .tfw-btn { flex: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1023px) {
  .tfw-hero-grid { grid-template-columns: 1fr; gap: 2.5rem; padding-bottom: 6rem; }
  .tfw-hero-title { font-size: 3rem; }
  .tfw-bottomcta-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .tfw-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .tfw-months { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
  .tfw-section { padding: 3.75rem 0; }
  .tfw-container { padding: 0 1.25rem; }
  .tfw-hero-title { font-size: 2.375rem; }
  .tfw-hero-sub { font-size: 1.0625rem; }
  .tfw-section-title { font-size: 2rem; }
  .tfw-bottomcta .tfw-section-title { font-size: 2.125rem; }
  .tfw-tears-stat { font-size: 4rem; }
  .tfw-tears-pct { font-size: 2.25rem; }
  .tfw-tears-copy { font-size: 1.0625rem; }
  .tfw-grid-3 { grid-template-columns: 1fr; }
  .tfw-months { grid-template-columns: repeat(2, 1fr); }
  .tfw-form-card { padding: 1.5rem 1.25rem 1.375rem; }
  .tfw-sticky-text { font-size: 0.85rem; }
  .tfw-sticky-inner { gap: 0.75rem; }
  /* match the tears band's vertical rhythm to the other sections */
  .tfw-tears-inner { padding: 3.75rem 1.25rem; }
  .tfw-sticky-more { display: none; }
}

@media (max-width: 420px) {
  .tfw-field-row { flex-direction: column; }
  .tfw-months { grid-template-columns: 1fr; }
}

/* ============================================================
   Page-only footer override (outside .tfw, so scoped by body class).
   Hide the shared marketing footer CTA ("Ready to give the most
   meaningful gift on earth?" through the Facebook reviews line) and
   its divider — only on /tribute-for-work/. Footer columns stay.
   ============================================================ */
body.tribute-for-work-page .footer-cta-content,
body.tribute-for-work-page .footer-divider {
  display: none;
}