/* ==============================================================
   26 BRANDING AGENCY — HOME PAGE COMPONENTS (Option B Cinematic)
   Scoped component styles for the homepage sections.
   Uses tokens from tokens.css.
   ============================================================== */

/* ==============================================================
   HERO
   ============================================================== */
.hero-26page {
  position:relative; overflow:hidden;
  padding:var(--s-12) 0 var(--s-11);
  min-height:620px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(239,41,41,.04), transparent 60%),
    linear-gradient(180deg, var(--c-ink-25) 0%, var(--bg-page) 100%);
}
.hero-26page::before {
  content:""; position:absolute; inset:0;
  background:radial-gradient(600px circle at var(--mx,70%) var(--my,30%), rgba(239,41,41,.08), transparent 40%);
  pointer-events:none; z-index:0;
  transition:background-position var(--d-cine) var(--ease-out);
}
/* Emblem watermark: wrapper handles parallax drift, inner handles spin + breathing */
.hero-bg-emblem {
  position:absolute; right:-180px; top:50%;
  width:780px; height:780px;
  pointer-events:none; z-index:0; will-change:transform;
  transform:translateY(-50%) translateZ(0);
  animation:hero-emblem-drift 24s ease-in-out infinite;
}
.hero-bg-emblem-inner {
  position:absolute; inset:0;
  background-image:url('/assets/images/redemblem.png');
  background-size:contain; background-repeat:no-repeat; background-position:center;
  opacity:.06;
  filter:blur(.5px);
  will-change:transform, opacity;
  animation:
    hero-emblem-spin 180s linear infinite,
    hero-emblem-breathe 11s ease-in-out infinite;
}
@keyframes hero-emblem-drift {
  0%,100% { transform:translateY(-50%) translateX(0); }
  50%     { transform:translateY(calc(-50% + 22px)) translateX(-14px); }
}
@keyframes hero-emblem-spin {
  from { transform:rotate(0deg)   scale(1); }
  50%  { transform:rotate(180deg) scale(1.025); }
  to   { transform:rotate(360deg) scale(1); }
}
@keyframes hero-emblem-breathe {
  0%,100% { opacity:.05; filter:blur(.6px); }
  50%     { opacity:.085; filter:blur(0); }
}

/* Cinematic noise grain overlay — very subtle, adds film-texture */
.hero-noise {
  position:absolute; inset:0; pointer-events:none; z-index:1;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.8 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:hero-noise-shift 8s steps(6) infinite;
}
@keyframes hero-noise-shift {
  0%   { transform:translate(0,0); }
  20%  { transform:translate(-2%,1%); }
  40%  { transform:translate(1%,-2%); }
  60%  { transform:translate(-1%,2%); }
  80%  { transform:translate(2%,-1%); }
  100% { transform:translate(0,0); }
}
@media (prefers-reduced-motion:reduce) {
  .hero-bg-emblem, .hero-bg-emblem-inner, .hero-noise { animation:none !important; }
}
/* Hero-inner fills the menu-width container (1280) — same as nav, footer, all sections */
.hero-inner { max-width:1280px; position:relative; z-index:2; padding:0 var(--s-4); margin:0 auto; }

@media (min-width:768px) { .hero-26page { padding:var(--s-14) 0 var(--s-12); min-height:720px; } .hero-inner { padding:0 var(--s-6); } }

.hero-tagline-row { display:flex; align-items:center; flex-wrap:wrap; gap:var(--s-3); margin-bottom:var(--s-6); font-family:var(--font-mono); font-size:var(--t-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); }
.hero-tagline-row .tag { color:var(--text-primary); font-weight:600; position:relative; }
.hero-tagline-row .tag::before { content:""; display:inline-block; width:6px; height:6px; background:var(--c-red-600); border-radius:50%; margin-right:var(--s-2); vertical-align:middle; }
.hero-tagline-row .sep { color:var(--border-default); }

.hero-title-26 {
  font-size:var(--t-4xl); line-height:1.05; letter-spacing:-.04em; font-weight:800;
  margin-bottom:var(--s-6); color:var(--text-primary);
}
.hero-title-26 .accent { color:var(--text-accent); }
.hero-title-26 em { font-family:var(--font-serif); font-style:italic; font-weight:400; letter-spacing:-.02em; }
@media (min-width:640px) { .hero-title-26 { font-size:var(--t-5xl); margin-bottom:var(--s-7); } }
@media (min-width:1024px) { .hero-title-26 { font-size:var(--t-6xl); } }

.hero-sub-26 { font-size:var(--t-md); line-height:1.6; color:var(--text-secondary); max-width:820px; margin-bottom:var(--s-8); }
.hero-sub-26 strong { color:var(--text-primary); font-weight:600; }
@media (min-width:768px) { .hero-sub-26 { font-size:var(--t-lg); margin-bottom:var(--s-9); } }

.hero-ctas-26 { display:flex; gap:var(--s-3); flex-wrap:wrap; align-items:center; }
.hero-ctas-26 .hint { font-family:var(--font-mono); font-size:var(--t-xs); color:var(--text-muted); padding-left:var(--s-3); width:100%; margin-top:var(--s-2); }
@media (min-width:640px) { .hero-ctas-26 .hint { width:auto; margin-top:0; } }

.hero-meta-26 {
  margin-top:var(--s-10); display:grid; grid-template-columns:repeat(2,1fr);
  gap:var(--s-5); padding-top:var(--s-7);
  border-top:1px solid var(--border-subtle); position:relative; z-index:2;
}
@media (min-width:768px) { .hero-meta-26 { grid-template-columns:repeat(4,1fr); gap:var(--s-6); margin-top:var(--s-12); } }
.hero-meta-item { display:flex; flex-direction:column; gap:4px; }
.hero-meta-num { font-family:var(--font-mono); font-weight:600; font-size:var(--t-xl); letter-spacing:-.02em; color:var(--text-primary); line-height:1; }
@media (min-width:768px) { .hero-meta-num { font-size:var(--t-2xl); } }
/* Federal supplier variant — smaller (to fit code), red accent, slightly tracked */
.hero-meta-badge { font-size:var(--t-md) !important; letter-spacing:0.04em !important; color:var(--text-accent) !important; font-weight:700; }
@media (min-width:768px) { .hero-meta-badge { font-size:var(--t-lg) !important; } }
.hero-meta-label { font-size:var(--t-xs); color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em; font-weight:500; }

/* Button styles (hero CTAs) */
.btn-26 { display:inline-flex; align-items:center; gap:var(--s-2); padding:10px 16px; border-radius:var(--r-2); font-size:var(--t-sm); font-weight:600; transition:all var(--d-fast) var(--ease-out); white-space:nowrap; border:1px solid transparent; cursor:pointer; position:relative; overflow:hidden; }
.btn-26-red { background:var(--c-red-600); color:var(--c-white); border-color:var(--c-red-600); }
.btn-26-red:hover { background:var(--c-red-700); box-shadow:var(--shadow-glow-strong); transform:translateY(-1px); }
.btn-26-red::before {
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
  transform:translateX(-100%); transition:transform var(--d-slow);
}
.btn-26-red:hover::before { transform:translateX(100%); }
.btn-26-outline { border-color:var(--border-default); color:var(--text-primary); background:var(--c-white); }
.btn-26-outline:hover { border-color:var(--border-strong); transform:translateY(-1px); }
.btn-26-primary { background:var(--c-ink-900); color:var(--c-white); border-color:var(--c-ink-900); }
.btn-26-primary:hover { background:var(--c-ink-1000); transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn-26-lg { padding:14px 22px; font-size:var(--t-base); }
.btn-26 .arrow { font-size:10px; transition:transform var(--d-fast); }
.btn-26:hover .arrow { transform:translateX(3px); }

/* ==============================================================
   CLIENT LOGO STRIP — marquee
   ============================================================== */
.logo-strip-26 { padding:var(--s-9) 0; background:var(--c-white); border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle); overflow:hidden; }
.logo-strip-label-26 { text-align:center; font-family:var(--font-mono); font-size:var(--t-xs); color:var(--text-muted); letter-spacing:.12em; text-transform:uppercase; margin-bottom:var(--s-6); font-weight:500; padding:0 var(--s-4); }
.logo-viewport-26 { position:relative; overflow:hidden; mask-image:linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%); -webkit-mask-image:linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%); }
/* 80s glide: slow, cinematic. With 18+ logos the track is long, so slower duration keeps the pace steady. */
.logo-track-26 { display:flex; gap:var(--s-11); align-items:center; animation:logo-scroll 80s linear infinite; width:max-content; }
.logo-track-26:hover { animation-play-state:paused; }
@keyframes logo-scroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.logo-track-26 img { height:36px; width:auto; filter:grayscale(100%) contrast(.4); opacity:.55; transition:all var(--d-base); }
.logo-track-26 img:hover { filter:grayscale(0) contrast(1); opacity:1; }
@media (min-width:768px) { .logo-track-26 img { height:44px; } }

/* ==============================================================
   PERSONAS — two starting points
   ============================================================== */
.personas-26 { padding:var(--s-11) 0; position:relative; }
.personas-grid-26 { display:grid; grid-template-columns:1fr; gap:var(--s-5); }
@media (min-width:768px) { .personas-grid-26 { grid-template-columns:1fr 1fr; } }
.persona-card-26 {
  background:var(--c-white); border:1px solid var(--border-subtle); border-radius:var(--r-5);
  padding:var(--s-7); transition:all var(--d-base) var(--ease-out);
  position:relative; overflow:hidden; display:block; color:inherit;
}
@media (min-width:768px) { .persona-card-26 { padding:var(--s-8); } }
.persona-card-26::before {
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--c-red-600); transform:scaleY(0); transform-origin:top;
  transition:transform var(--d-base) var(--ease-out);
}
.persona-card-26:hover { border-color:var(--border-default); box-shadow:var(--shadow-lg); transform:translateY(-3px); }
.persona-card-26:hover::before { transform:scaleY(1); }
.persona-card-26 > * { position:relative; z-index:1; }
.persona-eyebrow-26 { font-family:var(--font-mono); font-size:var(--t-xs); color:var(--text-muted); letter-spacing:.1em; text-transform:uppercase; margin-bottom:var(--s-3); display:flex; align-items:center; gap:var(--s-2); font-weight:600; }
.persona-eyebrow-26 .num { color:var(--text-accent); font-weight:700; }
.persona-title-26 { font-size:var(--t-xl); font-weight:700; letter-spacing:-.02em; margin-bottom:var(--s-3); color:var(--text-primary); }
@media (min-width:768px) { .persona-title-26 { font-size:var(--t-2xl); } }
.persona-desc-26 { font-size:var(--t-base); color:var(--text-secondary); line-height:1.6; margin-bottom:var(--s-5); }
@media (min-width:768px) { .persona-desc-26 { font-size:var(--t-md); } }
.persona-link-26 { display:inline-flex; align-items:center; gap:var(--s-2); font-size:var(--t-sm); font-weight:600; color:var(--text-primary); }
.persona-card-26:hover .persona-link-26 { color:var(--text-accent); }

/* ==============================================================
   SECTION HEADERS (section-26-* classes from components.css — unified)
   ============================================================== */
.section-header-26 { display:flex; flex-direction:column; align-items:stretch; justify-content:space-between; margin-bottom:var(--s-8); gap:var(--s-4); }
@media (min-width:768px) { .section-header-26 { flex-direction:row; align-items:end; gap:var(--s-6); margin-bottom:var(--s-9); } }
.section-eyebrow-26 {
  font-family:var(--font-mono); font-size:var(--t-xs); letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-muted); margin-bottom:var(--s-3); font-weight:600;
  display:inline-flex; align-items:center; gap:var(--s-2);
}
.section-eyebrow-26::before { content:""; width:24px; height:1.5px; background:var(--c-red-600); }
.section-title-26 {
  font-size:var(--t-2xl); line-height:1.1; letter-spacing:-.025em;
  font-weight:800; max-width:720px; color:var(--text-primary);
}
@media (min-width:768px) { .section-title-26 { font-size:var(--t-3xl); } }
.section-title-26 em { font-family:var(--font-serif); font-style:italic; font-weight:400; letter-spacing:-.02em; }
.section-desc-26 { font-size:var(--t-base); color:var(--text-secondary); max-width:440px; line-height:1.6; }
@media (min-width:768px) { .section-desc-26 { font-size:var(--t-md); } }

/* ==============================================================
   ECOSYSTEM — 4-brand bento grid
   ============================================================== */
.ecosystem-26 { padding:var(--s-11) 0 var(--s-12); }
.eco-grid-26 { display:grid; grid-template-columns:1fr; gap:var(--s-4); }
@media (min-width:640px) { .eco-grid-26 { grid-template-columns:1fr 1fr; } }
@media (min-width:1024px) { .eco-grid-26 { grid-template-columns:repeat(4,1fr); } }
.eco-card-26 {
  background:var(--c-white); border:1px solid var(--border-subtle); border-radius:var(--r-5);
  padding:var(--s-6); position:relative; overflow:hidden;
  transition:all var(--d-base) var(--ease-out); display:block; color:inherit;
}
@media (min-width:768px) { .eco-card-26 { padding:var(--s-7); } }
.eco-card-26:hover { border-color:var(--border-default); transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.eco-card-26 > * { position:relative; z-index:1; }
.eco-num-26 { font-family:var(--font-mono); font-size:11px; color:var(--text-muted); margin-bottom:var(--s-5); letter-spacing:.05em; font-weight:500; }
.eco-icon-26 { width:44px; height:44px; border-radius:var(--r-3); display:flex; align-items:center; justify-content:center; margin-bottom:var(--s-4); font-size:18px; font-weight:800; transition:transform var(--d-base) var(--ease-spring); }
.eco-card-26:hover .eco-icon-26 { transform:scale(1.06) rotate(-3deg); }
.eco-card-26:nth-child(1) .eco-icon-26 { background:var(--c-red-600); color:var(--c-white); }
.eco-card-26:nth-child(2) .eco-icon-26 { background:var(--c-ink-900); color:var(--c-white); }
.eco-card-26:nth-child(3) .eco-icon-26 { background:var(--c-red-600); color:var(--c-white); }
.eco-card-26:nth-child(4) .eco-icon-26 { background:var(--c-ink-900); color:var(--c-white); }
.eco-name-26 { font-size:var(--t-md); font-weight:700; margin-bottom:var(--s-2); letter-spacing:-.01em; }
@media (min-width:768px) { .eco-name-26 { font-size:var(--t-lg); } }
.eco-name-26 .prefix { color:var(--text-muted); font-weight:500; }
.eco-desc-26 { font-size:var(--t-sm); color:var(--text-secondary); line-height:1.6; margin-bottom:var(--s-4); }
.eco-tags-26 { display:flex; flex-wrap:wrap; gap:4px; }
.eco-tag-26 { font-family:var(--font-mono); font-size:10px; padding:3px 7px; background:var(--c-ink-50); border:1px solid var(--border-subtle); border-radius:var(--r-1); color:var(--text-secondary); letter-spacing:.03em; font-weight:500; }

/* ==============================================================
   PRICING — 3-tier cinematic
   ============================================================== */
.pricing-26 { padding:var(--s-12) 0; background:var(--c-white); border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle); }
/* Tiers fill the menu-width container (1280) — aligned with nav, hero, footer */
.tiers-26 { display:grid; grid-template-columns:1fr; gap:var(--s-4); margin:0 auto; align-items:stretch; }
@media (min-width:768px) { .tiers-26 { grid-template-columns:repeat(3,1fr); } .pricing-26 { padding:var(--s-13) 0; } }
.tier-26 {
  background:var(--c-white); border:1px solid var(--border-default); border-radius:var(--r-5);
  padding:var(--s-7); display:flex; flex-direction:column; position:relative;
  transition:all var(--d-base) var(--ease-out);
}
.tier-26:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.tier-26.hero-tier-26 {
  background:
    radial-gradient(ellipse 100% 80% at 50% 0%, rgba(239,41,41,.14), transparent 60%),
    linear-gradient(180deg, var(--c-ink-800) 0%, var(--c-ink-900) 60%, var(--c-ink-1000) 100%);
  color:var(--c-white); border-color:var(--c-ink-800);
  box-shadow:var(--shadow-xl);
  padding-top:calc(var(--s-7) + 6px); overflow:hidden;
}
@media (min-width:768px) { .tier-26.hero-tier-26 { transform:translateY(-12px); } .tier-26.hero-tier-26:hover { transform:translateY(-16px); } }
.tier-26.hero-tier-26::before {
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--c-red-500), var(--c-red-700), var(--c-red-500));
  background-size:200% 100%; animation:slide-gradient 4s linear infinite;
}
@keyframes slide-gradient { 0% { background-position:0% 0%; } 100% { background-position:200% 0%; } }
.tier-26.hero-tier-26 > * { position:relative; z-index:1; }

.tier-label-26 { display:inline-flex; align-items:center; gap:var(--s-2); font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); margin-bottom:var(--s-4); font-weight:600; }
.tier-26.hero-tier-26 .tier-label-26 { color:var(--c-red-400); }
.tier-label-dot-26 { width:6px; height:6px; background:currentColor; border-radius:50%; }
.tier-26.hero-tier-26 .tier-label-dot-26 { box-shadow:0 0 0 3px rgba(255,69,69,.2); animation:dot-pulse 2s ease-in-out infinite; }
@keyframes dot-pulse { 0%,100% { box-shadow:0 0 0 0 rgba(255,69,69,.4); } 50% { box-shadow:0 0 0 6px rgba(255,69,69,0); } }

.tier-name-26 { font-size:var(--t-lg); font-weight:700; margin-bottom:var(--s-2); letter-spacing:-.015em; }
@media (min-width:768px) { .tier-name-26 { font-size:var(--t-xl); } }
.tier-tagline-26 { font-size:var(--t-sm); color:var(--text-secondary); margin-bottom:var(--s-5); line-height:1.55; min-height:3em; }
.tier-26.hero-tier-26 .tier-tagline-26 { color:var(--c-ink-300); }

.tier-price-row-26 { display:flex; align-items:baseline; gap:var(--s-2); margin-bottom:var(--s-2); }
.tier-price-26 { font-family:var(--font-mono); font-size:var(--t-3xl); font-weight:700; letter-spacing:-.025em; line-height:1; }
@media (min-width:768px) { .tier-price-26 { font-size:var(--t-4xl); } }
.tier-period-26 { font-size:var(--t-sm); color:var(--text-muted); font-family:var(--font-mono); }
.tier-26.hero-tier-26 .tier-period-26 { color:var(--c-ink-300); }

.tier-note-26 { font-size:var(--t-xs); color:var(--text-muted); margin-bottom:var(--s-6); padding-bottom:var(--s-5); border-bottom:1px solid var(--border-subtle); font-family:var(--font-mono); }
.tier-26.hero-tier-26 .tier-note-26 { color:var(--c-ink-300); border-bottom-color:rgba(255,255,255,.08); }
.credit-badge-26 { display:inline-block; background:var(--c-red-600); color:var(--c-white); padding:3px 8px; border-radius:var(--r-1); font-size:10px; font-weight:700; letter-spacing:.04em; margin-left:4px; font-family:var(--font-mono); }

.tier-bullets-26 { list-style:none; padding:0; margin:0 0 var(--s-5) 0; flex-grow:1; display:flex; flex-direction:column; gap:var(--s-3); }
.tier-bullets-26 li { font-size:var(--t-sm); line-height:1.55; padding-left:var(--s-5); position:relative; }
.tier-bullets-26 li::before { content:""; position:absolute; left:0; top:8px; width:12px; height:2px; background:var(--c-red-600); }
.tier-26.hero-tier-26 .tier-bullets-26 li::before { background:var(--c-red-400); }
.tier-bullets-26 li strong { font-weight:700; }
.bullet-sub { color:var(--text-muted); font-size:.92em; }

/* Extra-shoot add-on line · sits between bullets and CTA */
.tier-extra-26 {
  font-family:var(--font-mono); font-size:var(--t-xs); letter-spacing:.02em;
  color:var(--text-secondary); line-height:1.5;
  padding:var(--s-3) var(--s-4);
  background:var(--c-ink-50); border:1px dashed var(--border-default); border-radius:var(--r-2);
  margin-bottom:var(--s-5);
}
.tier-26.hero-tier-26 .tier-extra-26 { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.15); color:var(--c-ink-200); }

.tier-cta-26 { display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2); padding:12px 20px; border-radius:var(--r-2); font-size:var(--t-sm); font-weight:600; transition:all var(--d-fast); position:relative; overflow:hidden; }
.tier-26:not(.hero-tier-26) .tier-cta-26 { background:var(--c-ink-900); color:var(--c-white); }
.tier-26:not(.hero-tier-26) .tier-cta-26:hover { background:var(--c-ink-1000); }
.tier-26.hero-tier-26 .tier-cta-26 { background:var(--c-red-600); color:var(--c-white); box-shadow:var(--shadow-glow); }
.tier-26.hero-tier-26 .tier-cta-26:hover { background:var(--c-red-500); box-shadow:var(--shadow-glow-strong); }

.tiers-disclaimer-26 { text-align:center; margin-top:var(--s-9); font-size:var(--t-xs); font-family:var(--font-mono); color:var(--text-muted); letter-spacing:.04em; }

/* ==============================================================
   PROOF — dark section with viral grid
   ============================================================== */
.proof-26 {
  padding:var(--s-12) 0; background:var(--c-ink-900); color:var(--c-white);
  position:relative; overflow:hidden;
}
@media (min-width:768px) { .proof-26 { padding:var(--s-13) 0; } }
.proof-26::before {
  content:""; position:absolute; inset:0; z-index:0;
  background-image:radial-gradient(rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:32px 32px;
}
.proof-26::after {
  content:""; position:absolute; left:-200px; top:-200px; width:600px; height:600px; z-index:0;
  background:radial-gradient(circle, rgba(239,41,41,.09) 0%, transparent 60%);
  animation:drift 18s ease-in-out infinite;
}
@keyframes drift { 0%,100% { transform:translate(0,0); } 50% { transform:translate(100px,60px); } }
.proof-26 > * { position:relative; z-index:1; }
.proof-26 .section-title-26, .proof-26 .section-desc-26 { color:var(--c-white); }
.proof-26 .section-eyebrow-26 { color:var(--c-ink-400); }
.proof-26 .section-eyebrow-26::before { background:var(--c-red-500); }

.proof-grid-26 { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-3); margin-bottom:var(--s-8); }
@media (min-width:640px) { .proof-grid-26 { grid-template-columns:repeat(3,1fr); } }
@media (min-width:1024px) { .proof-grid-26 { grid-template-columns:repeat(6,1fr); grid-auto-rows:1fr; } }
.proof-tile-26 {
  position:relative; aspect-ratio:9/16; border-radius:var(--r-4);
  padding:var(--s-4); display:flex; flex-direction:column; justify-content:space-between;
  overflow:hidden; transition:all var(--d-base) var(--ease-out); cursor:pointer;
  color:var(--c-white); text-decoration:none;
  /* thumbnail backdrop */
  background-image:var(--tile-thumb, none);
  background-size:cover; background-position:center;
  border:1px solid var(--c-ink-700);
}
/* Dark gradient overlay — makes number/client legible on top of any thumb */
.proof-tile-26::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(5,8,19,.15) 0%, rgba(5,8,19,.55) 55%, rgba(5,8,19,.92) 100%);
}
.proof-tile-26 > * { position:relative; z-index:1; }
.proof-tile-26 .proof-tile-meta { z-index:2; }
.proof-tile-26:hover { transform:translateY(-6px); border-color:var(--c-ink-500); }
.proof-tile-26:hover::before { background:linear-gradient(180deg, rgba(5,8,19,.05) 0%, rgba(5,8,19,.40) 55%, rgba(5,8,19,.85) 100%); }

.proof-tile-26.hero-tile-26 {
  grid-column:span 2;
  box-shadow:0 20px 60px rgba(239,41,41,.3);
  border-color:transparent;
}
@media (min-width:1024px) { .proof-tile-26.hero-tile-26 { grid-column:span 2; grid-row:span 2; aspect-ratio:auto; } }
/* Hero tile gets the red cinematic tint on top of the thumbnail */
.proof-tile-26.hero-tile-26::before {
  background:
    linear-gradient(180deg, rgba(193,22,22,.30) 0%, rgba(122,14,14,.70) 70%, rgba(40,5,5,.92) 100%),
    radial-gradient(ellipse 80% 60% at 30% 30%, rgba(239,41,41,.22), transparent 60%);
}
.proof-tile-26.hero-tile-26::after {
  content:""; position:absolute; right:-80px; bottom:-80px; width:300px; height:300px;
  background:url('/assets/images/whiteemblem.png') center/contain no-repeat;
  opacity:.12; pointer-events:none; z-index:1;
  animation:spin-emblem 60s linear infinite;
}
@keyframes spin-emblem { from { transform:rotate(0); } to { transform:rotate(360deg); } }
.proof-tile-26.hero-tile-26:hover { box-shadow:0 28px 80px rgba(239,41,41,.4); }
.proof-badge-26 { display:inline-flex; align-items:center; gap:4px; font-family:var(--font-mono); font-size:9px; padding:4px 8px; background:rgba(255,255,255,.15); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border-radius:var(--r-1); width:fit-content; letter-spacing:.06em; font-weight:600; }
.proof-number-26 { font-family:var(--font-mono); font-size:var(--t-2xl); font-weight:700; line-height:1; margin-bottom:4px; letter-spacing:-.025em; }
@media (min-width:768px) { .proof-number-26 { font-size:var(--t-3xl); } }
.proof-tile-26.hero-tile-26 .proof-number-26 { font-size:var(--t-4xl); }
@media (min-width:1024px) { .proof-tile-26.hero-tile-26 .proof-number-26 { font-size:var(--t-5xl); } }
.proof-label-26 { font-family:var(--font-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:6px; font-weight:500; }
.proof-client-26 { font-size:var(--t-xs); font-weight:600; }
.proof-tile-26.hero-tile-26 .proof-client-26 { font-size:var(--t-sm); }
@media (min-width:768px) { .proof-tile-26.hero-tile-26 .proof-client-26 { font-size:var(--t-md); } }

.proof-sum-26 { text-align:center; padding-top:var(--s-8); border-top:1px solid var(--c-ink-700); font-family:var(--font-mono); font-size:var(--t-sm); color:var(--c-ink-300); padding-left:var(--s-4); padding-right:var(--s-4); }
.proof-sum-26 strong { color:var(--c-white); font-size:var(--t-md); font-weight:700; }