/* ==============================================================
   26 BRANDING AGENCY — COMPONENT LAYER (Option B)
   Components reference tokens.css — no hard-coded values.
   ============================================================== */

/* Container / wrapper */
.container-26 { max-width:1280px; margin:0 auto; padding:0 var(--s-6); }

/* Top ribbon (pre-qualified supplier / HQ / SA) */
.ribbon-26 {
  position:relative; z-index:60;
  background:var(--c-ink-900); color:var(--c-ink-300);
  font-family:var(--font-mono); font-size:var(--t-xs);
  padding:var(--s-2) var(--s-4); text-align:center; letter-spacing:.02em;
  border-bottom:1px solid var(--c-ink-700);
  line-height:1.4;
}
.ribbon-26 strong { color:var(--c-white); font-weight:600; }
.ribbon-26 .sep { color:var(--c-red-500); margin:0 var(--s-2); }
.ribbon-26 .ribbon-hide-mobile { display:inline; }
.ribbon-26 .sweep {
  position:absolute; inset:0; overflow:hidden; pointer-events:none; opacity:.4;
  background:linear-gradient(90deg, transparent 0%, rgba(239,41,41,.08) 50%, transparent 100%);
  background-size:200% 100%; animation:sweep 6s linear infinite;
}
@keyframes sweep { 0% {background-position:-200% 0} 100% {background-position:200% 0} }

@media (max-width:768px) {
  .ribbon-26 { font-size:10px; padding:var(--s-2) var(--s-3); }
  .ribbon-26 .ribbon-hide-mobile { display:none; }
  .ribbon-26 .sep { margin:0 var(--s-1); }
}

/* Nav */
.nav-26 {
  position:sticky; top:0; z-index:50;
  background:rgba(250,251,253,.72);
  backdrop-filter:blur(20px) saturate(1.4); -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border-bottom:1px solid var(--border-subtle);
  transition:background var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out);
}
.nav-26-inner {
  max-width:1280px; margin:0 auto; padding:var(--s-3) var(--s-4);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
}
.logo-lockup-26 { display:flex; align-items:center; gap:var(--s-2); flex-shrink:0; }
.logo-lockup-26 img { height:32px; width:auto; }
.logo-lockup-26 .wordmark { font-family:var(--font-sans); font-weight:800; font-size:var(--t-md); color:var(--text-primary); letter-spacing:-0.01em; white-space:nowrap; }

@media (min-width:768px) {
  .nav-26-inner { padding:var(--s-4) var(--s-6); gap:var(--s-6); }
  .logo-lockup-26 img { height:36px; }
  .logo-lockup-26 .wordmark { font-size:var(--t-md); }
}
@media (max-width:480px) {
  .logo-lockup-26 .wordmark { font-size:var(--t-sm); }
  .logo-lockup-26 img { height:28px; }
}

.nav-26 ul { display:flex; gap:var(--s-6); list-style:none; padding:0; margin:0; }
.nav-26 ul a {
  font-size:var(--t-sm); font-weight:500; color:var(--text-secondary);
  transition:color var(--d-fast) var(--ease-out);
  position:relative; padding:var(--s-1) 0;
}
.nav-26 ul a::after {
  content:""; position:absolute; bottom:0; left:0; right:0; height:1px;
  background:var(--c-red-600); transform:scaleX(0); transform-origin:left;
  transition:transform var(--d-base) var(--ease-out);
}
.nav-26 ul a:hover { color:var(--text-primary); }
.nav-26 ul a:hover::after { transform:scaleX(1); }

.lang-toggle-26 { display:flex; align-items:center; gap:var(--s-1); padding:var(--s-1); background:var(--c-ink-100); border-radius:var(--r-full); }
.lang-toggle-26 a { padding:4px 10px; border-radius:var(--r-full); font-family:var(--font-mono); font-size:11px; font-weight:600; color:var(--text-muted); }
.lang-toggle-26 a.active { background:var(--c-ink-900); color:var(--c-white); }

.cta-26 {
  display:inline-flex; align-items:center; gap:var(--s-2);
  background:var(--c-ink-900); color:var(--c-white);
  padding:10px 16px; border-radius:var(--r-2);
  font-size:var(--t-sm); font-weight:600; letter-spacing:.01em;
  transition:transform var(--d-base) var(--ease-spring), box-shadow var(--d-base) var(--ease-out), background var(--d-base) var(--ease-out);
  position:relative; overflow:hidden;
  border:1px solid var(--c-ink-900); cursor:pointer; white-space:nowrap;
}
@media (min-width:768px) {
  .cta-26 { padding:12px 18px; }
}
.cta-26::before {
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.15) 50%, transparent 70%);
  transform:translateX(-100%); transition:transform var(--d-slow) var(--ease-out);
}
.cta-26:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.cta-26:hover::before { transform:translateX(100%); }
.cta-26-primary { background:var(--c-red-600); }
.cta-26-primary:hover { background:var(--c-red-500); box-shadow:var(--shadow-glow); }
.cta-26-ghost { background:transparent; color:var(--text-primary); border:1px solid var(--border-default); }
.cta-26-ghost:hover { background:var(--c-ink-50); }

/* Section rhythm */
.section-26 { padding:var(--s-11) 0; position:relative; }
.section-26-dark { background:var(--bg-inverse); color:var(--c-ink-200); }
.section-26-dark .text-primary-26 { color:var(--c-white); }
.section-26-header { margin-bottom:var(--s-9); display:grid; grid-template-columns:1fr 1fr; gap:var(--s-8); align-items:end; }
.section-26-eyebrow { font-family:var(--font-mono); font-size:var(--t-xs); color:var(--text-accent); letter-spacing:.12em; text-transform:uppercase; font-weight:600; margin-bottom:var(--s-3); position:relative; padding-left:var(--s-5); display:inline-block; }
.section-26-eyebrow::before { content:""; position:absolute; left:0; top:50%; width:12px; height:2px; background:var(--c-red-600); transform:translateY(-50%); }
.section-26-title { font-family:var(--font-sans); font-size:var(--t-3xl); font-weight:800; letter-spacing:-0.025em; line-height:1.1; color:inherit; margin:0; }
.section-26-title em { font-family:var(--font-serif); font-style:italic; font-weight:400; letter-spacing:-0.015em; color:var(--text-accent); }
.section-26-desc { font-size:var(--t-md); color:var(--text-secondary); max-width:440px; line-height:1.6; }
.section-26-dark .section-26-desc { color:var(--c-ink-300); }

@media (max-width:768px) {
  .section-26-header { grid-template-columns:1fr; gap:var(--s-5); }
  .section-26-title { font-size:var(--t-2xl); }
}

/* Reveal animations */
.reveal-26 { opacity:0; transform:translateY(32px); transition:opacity var(--d-cine) var(--ease-out), transform var(--d-cine) var(--ease-out); }
.reveal-26.is-in { opacity:1; transform:translateY(0); }
.reveal-stagger-26 > * { opacity:0; transform:translateY(24px); transition:opacity var(--d-slow) var(--ease-out), transform var(--d-slow) var(--ease-out); }
.reveal-stagger-26.is-in > * { opacity:1; transform:translateY(0); }
.reveal-stagger-26.is-in > *:nth-child(1) { transition-delay:0ms; }
.reveal-stagger-26.is-in > *:nth-child(2) { transition-delay:80ms; }
.reveal-stagger-26.is-in > *:nth-child(3) { transition-delay:160ms; }
.reveal-stagger-26.is-in > *:nth-child(4) { transition-delay:240ms; }
.reveal-stagger-26.is-in > *:nth-child(5) { transition-delay:320ms; }
.reveal-stagger-26.is-in > *:nth-child(6) { transition-delay:400ms; }
.reveal-stagger-26.is-in > *:nth-child(7) { transition-delay:480ms; }
.reveal-stagger-26.is-in > *:nth-child(8) { transition-delay:560ms; }
.reveal-stagger-26.is-in > *:nth-child(9) { transition-delay:640ms; }
.reveal-stagger-26.is-in > *:nth-child(10) { transition-delay:720ms; }

.split-reveal-26 span { display:inline-block; opacity:0; transform:translateY(28px); transition:opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.split-reveal-26.is-in span { opacity:1; transform:translateY(0); }
.split-reveal-26.is-in span:nth-child(1) { transition-delay:80ms; }
.split-reveal-26.is-in span:nth-child(2) { transition-delay:140ms; }
.split-reveal-26.is-in span:nth-child(3) { transition-delay:200ms; }
.split-reveal-26.is-in span:nth-child(4) { transition-delay:260ms; }
.split-reveal-26.is-in span:nth-child(5) { transition-delay:320ms; }
.split-reveal-26.is-in span:nth-child(6) { transition-delay:380ms; }
.split-reveal-26.is-in span:nth-child(7) { transition-delay:440ms; }
.split-reveal-26.is-in span:nth-child(8) { transition-delay:500ms; }
.split-reveal-26.is-in span:nth-child(9) { transition-delay:560ms; }
.split-reveal-26.is-in span:nth-child(10) { transition-delay:620ms; }

/* Footer */
.footer-26 {
  background:var(--bg-inverse); color:var(--c-ink-200);
  padding:var(--s-11) 0 var(--s-7); position:relative; overflow:hidden;
  border-top:1px solid var(--c-ink-700);
}
.footer-26-watermark { position:absolute; right:-80px; bottom:-80px; width:520px; height:520px; background:url('/assets/images/whiteemblem.png') center/contain no-repeat; opacity:.04; pointer-events:none; }
.footer-26-grid { display:grid; grid-template-columns:1fr; gap:var(--s-8); position:relative; z-index:1; }
.footer-26 h4 { font-family:var(--font-mono); font-size:var(--t-xs); color:var(--c-ink-400); text-transform:uppercase; letter-spacing:.12em; font-weight:600; margin-bottom:var(--s-4); }
.footer-26 ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:var(--s-2); }
.footer-26 ul a { font-size:var(--t-sm); color:var(--c-ink-200); line-height:1.5; }
.footer-26 ul a:hover { color:var(--c-white); }
.footer-26-tagline { font-family:var(--font-sans); font-size:var(--t-lg); font-weight:700; color:var(--c-white); margin:var(--s-4) 0 var(--s-3); }
.footer-26-tagline em { font-family:var(--font-serif); font-style:italic; font-weight:400; color:var(--c-red-400); }
.footer-26-gov { font-family:var(--font-mono); font-size:var(--t-xs); color:var(--c-ink-400); line-height:1.6; }
.footer-26-bottom { border-top:1px solid var(--c-ink-700); margin-top:var(--s-7); padding-top:var(--s-5); display:flex; justify-content:space-between; gap:var(--s-4); flex-wrap:wrap; font-family:var(--font-mono); font-size:var(--t-xs); color:var(--c-ink-400); }
.footer-26-bottom a:hover { color:var(--c-white); }

@media (min-width:600px) {
  .footer-26-grid { grid-template-columns:1fr 1fr; gap:var(--s-7); }
  .footer-26-grid > :first-child { grid-column:1 / -1; }
}
@media (min-width:900px) {
  .footer-26 { padding:var(--s-12) 0 var(--s-8); }
  .footer-26-grid { grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:var(--s-7); }
  .footer-26-grid > :first-child { grid-column:auto; }
}
