/* ONOGRAPH 2026 — Global Fixes, Accessibility, Print & Interactive Components */

:root {
  --yellow: #E7C02F;
  --gray: #282C35;
  --bordeaux: #5A1830;
  --bordeaux-light: #912D42;
  --white: #FFFFFF;
  --bg-dark: #0a0f1d;
}

/* 1. R2 Rule: Guaranteed visibility for Framer Motion saved elements */
[style*="opacity: 0"]:not(.rounded-full.border):not(.rounded-full.border-2),
[style*="opacity:0"]:not(.rounded-full.border):not(.rounded-full.border-2) {
  opacity: 1 !important;
  transform: none !important;
}

.rounded-full.border[style*="opacity: 0"],
.rounded-full.border-2[style*="opacity: 0"] {
  opacity: 0.12 !important;
}

/* 2. Print / PDF Export safety */
@media print {
  * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  nav.fixed {
    position: relative !important;
  }
  .no-print {
    display: none !important;
  }
}

/* 3. Navbar Devis Dropdown & Mobile Menu */
.onograph-devis-wrapper {
  position: relative;
}

.onograph-devis-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: 0.5rem;
  width: 240px;
  z-index: 100;
}

.onograph-devis-dropdown-inner {
  background: #0a0f1d;
  border: 1px solid rgba(231, 192, 47, 0.35);
  border-radius: 0.85rem;
  padding: 0.5rem;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.55);
}

.onograph-devis-wrapper:hover .onograph-devis-dropdown,
.onograph-devis-wrapper.open .onograph-devis-dropdown {
  display: block;
}

.onograph-devis-dropdown a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.9rem;
  color: #ffffff;
  border-radius: 0.55rem;
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}

.onograph-devis-dropdown a:hover {
  background: rgba(231, 192, 47, 0.16);
  color: var(--yellow);
}

/* Mobile menu drawer */
.onograph-mobile-drawer {
  display: none;
  background: #0a0f1d;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1rem 1.5rem 1.5rem;
}

.onograph-mobile-drawer.open {
  display: block;
}

.onograph-mobile-drawer a {
  display: block;
  padding: 0.75rem 0;
  color: #ffffff;
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.onograph-mobile-drawer a:hover {
  color: var(--yellow);
}

/* 4. Interactive Modals (Portfolio Case Study & Blog Article Reader) */
.onograph-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 29, 0.82);
  backdrop-filter: blur(6px);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  overflow-y: auto;
}

.onograph-modal-backdrop.open {
  display: flex;
}

.onograph-modal-card {
  background: #ffffff;
  color: var(--gray);
  max-width: 860px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 1.5rem;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
  border: 2px solid rgba(231, 192, 47, 0.4);
  position: relative;
}

/* 5. Toast Notification */
.onograph-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background: #0a0f1d;
  color: #ffffff;
  border-left: 4px solid var(--yellow);
  padding: 1rem 1.5rem;
  border-radius: 0.85rem;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
  z-index: 10000;
  display: none;
  align-items: center;
  gap: 0.75rem;
  max-width: 420px;
}

.onograph-toast.show {
  display: flex;
}

/* 6. Client Logos Grid */
.onograph-logo-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 110px;
  transition: all 0.25s ease;
}

.onograph-logo-card:hover {
  border-color: var(--yellow);
  box-shadow: 0 10px 25px rgba(231, 192, 47, 0.18);
  transform: translateY(-3px);
}

.onograph-logo-card img {
  max-height: 54px;
  max-width: 150px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* 7. Multi-step Wizard Steps */
.wizard-step-panel {
  display: none;
}

.wizard-step-panel.active {
  display: block;
}

/* 8. Honeypot anti-spam field */
.oh-hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 9. Active selectable pills/cards */
.selectable-pill.selected {
  border-color: var(--yellow) !important;
  background-color: rgba(231, 192, 47, 0.14) !important;
  box-shadow: 0 0 0 2px var(--yellow);
}

/* Monochrome Icons Enforcement */
svg.lucide,
svg.mono-icon,
.mono-icon,
.mono-flag {
  color: currentColor !important;
  filter: grayscale(100%) !important;
}

/* Missing utilities (bundle purge compensation) */
.h-44{height:11rem}.h-52{height:13rem}.h-56{height:14rem}.h-60{height:15rem}
.max-h-12{max-height:3rem}.max-h-40{max-height:10rem}
.max-h-12,.max-h-40{width:auto;max-width:100%}
.mb-14{margin-bottom:3.5rem}.py-14{padding-top:3.5rem;padding-bottom:3.5rem}.pt-24{padding-top:6rem}.pb-16{padding-bottom:4rem}
.gap-2\.5{gap:.625rem}.top-40{top:10rem}.bottom-3{bottom:.75rem}.z-30{z-index:30}
.space-y-2\.5>*+*{margin-top:.625rem}
.max-w-\[900px\]{max-width:900px}.max-w-\[1100px\]{max-width:1100px}.max-w-\[1150px\]{max-width:1150px}
.min-h-\[52vh\]{min-height:52vh}.bg-\[\#1a1d24\]{background-color:#1a1d24}
.bg-white\/15{background-color:rgba(255,255,255,.15)}.bg-gray-100\/95{background-color:rgba(243,244,246,.95)}
.border-white\/15{border-color:rgba(255,255,255,.15)}.border-white\/25{border-color:rgba(255,255,255,.25)}.border-white\/40{border-color:rgba(255,255,255,.4)}
.bg-\[var\(--yellow\)\]\/5{background-color:rgba(231,192,47,.05)}
.bg-\[var\(--yellow\)\]\/10{background-color:rgba(231,192,47,.1)}
.bg-\[var\(--yellow\)\]\/15{background-color:rgba(231,192,47,.15)}
.bg-\[var\(--yellow\)\]\/20{background-color:rgba(231,192,47,.2)}
.border-\[var\(--yellow\)\]\/20{border-color:rgba(231,192,47,.2)}
.border-\[var\(--yellow\)\]\/30{border-color:rgba(231,192,47,.3)}
.border-\[var\(--yellow\)\]\/40{border-color:rgba(231,192,47,.4)}
.group:hover .group-hover\:bg-\[var\(--yellow\)\]\/10{background-color:rgba(231,192,47,.1)}
.group:hover .group-hover\:text-\[var\(--yellow\)\]{color:#E7C02F}
.hover\:text-\[var\(--bordeaux\)\]:hover{color:#5A1830}
.group:hover .group-hover\:text-\[var\(--bordeaux\)\]{color:#5A1830}
.hover\:bg-gray-900:hover{background-color:#111827}
.hover\:border-\[var\(--gray\)\]:hover{border-color:#282C35}
.accent-\[var\(--gray\)\]{accent-color:#282C35}
.placeholder-gray-400::placeholder{color:#9ca3af}
.text-md{font-size:1rem;line-height:1.5rem}
.text-\[var\(--gray\)\]\/80{color:rgba(40,44,53,.8)}
.divide-gray-200>*+*{border-color:#e5e7eb}
.from-black\/70{--tw-gradient-from:rgba(0,0,0,.7);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(0,0,0,0))}
.from-black\/90{--tw-gradient-from:rgba(0,0,0,.9);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(0,0,0,0))}
.via-black\/40{--tw-gradient-stops:var(--tw-gradient-from),rgba(0,0,0,.4),var(--tw-gradient-to,rgba(0,0,0,0))}
.from-\[var\(--yellow\)\]\/20{--tw-gradient-from:rgba(231,192,47,.2);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(231,192,47,0))}
.via-\[var\(--yellow\)\]\/5{--tw-gradient-stops:var(--tw-gradient-from),rgba(231,192,47,.05),var(--tw-gradient-to,rgba(231,192,47,0))}
.to-gray-100{--tw-gradient-to:#f3f4f6}
@media(min-width:640px){.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:768px){.md\:grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.md\:py-28{padding-top:7rem;padding-bottom:7rem}.md\:py-24{padding-top:6rem;padding-bottom:6rem}.md\:gap-6{gap:1.5rem}.md\:pb-0{padding-bottom:0}.md\:h-80{height:20rem}}
@media(min-width:1024px){.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.lg\:col-span-6{grid-column:span 6/span 6}.lg\:col-span-7{grid-column:span 7/span 7}.lg\:col-span-5{grid-column:span 5/span 5}.lg\:h-auto{height:auto}.lg\:items-end{align-items:flex-end}.lg\:w-\[420px\]{width:420px}}
@media(min-width:1280px){.xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Stitch Portfolio & Case Study additional utilities */
.bg-\[\#F5F5F3\]{background-color:#F5F5F3}
.bg-\[\#131824\]{background-color:#131824}
.bg-white\/95{background-color:rgba(255,255,255,.95)}
.bg-\[\#282C35\]\/95{background-color:rgba(40,44,53,.95)}
.bg-\[\#0a0f1d\]\/95{background-color:rgba(10,15,29,.95)}
.bg-black\/70{background-color:rgba(0,0,0,.7)}
.bg-black\/75{background-color:rgba(0,0,0,.75)}
.bg-\[var\(--yellow\)\]\/25{background-color:rgba(231,192,47,.25)}
.hover\:bg-\[var\(--yellow\)\]\/10:hover{background-color:rgba(231,192,47,.1)}
.border-\[var\(--yellow\)\]\/50{border-color:rgba(231,192,47,.5)}
.ring-\[var\(--yellow\)\]\/40{--tw-ring-color:rgba(231,192,47,.4)}
.from-black\/75{--tw-gradient-from:rgba(0,0,0,.75);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(0,0,0,0))}
.via-black\/15{--tw-gradient-stops:var(--tw-gradient-from),rgba(0,0,0,.15),var(--tw-gradient-to,rgba(0,0,0,0))}
.top-3\.5{top:.875rem}.left-3\.5{left:.875rem}.right-3\.5{right:.875rem}.bottom-2\.5{bottom:.625rem}.right-2\.5{right:.625rem}
.mb-1\.5{margin-bottom:.375rem}.mt-14{margin-top:3.5rem}
.px-3\.5{padding-left:.875rem;padding-right:.875rem}.px-7{padding-left:1.75rem;padding-right:1.75rem}
.p-2\.5{padding:.625rem}.p-3\.5{padding:.875rem}
.max-h-\[72vh\]{max-height:72vh}