/* One Point Center — shared responsive and interaction rules.
   Layout and look live in each artboard's inline styles; this file only
   holds what inline styles cannot express: breakpoints, hover and focus. */

.opc-only-mobile { display: none !important; }
@media (max-width: 1080px) {
  .opc-only-desktop { display: none !important; }
  .opc-only-mobile { display: flex !important; }
}
@media (max-width: 720px) {
  .opc-hide-phone { display: none !important; }
}
@media (min-width: 1101px) {
  .opc-sticky { position: sticky; top: 24px; }
}

.opc-btn { transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease; }
.opc-btn-primary:hover { background-color: #1e40af !important; }
.opc-btn-red:hover { background-color: #b30f15 !important; }
.opc-btn-light:hover { background-color: #e0e7ff !important; }
.opc-btn-outline:hover { border-color: #1d4ed8 !important; color: #1d4ed8 !important; }
.opc-btn-onnavy:hover { background-color: rgba(255, 255, 255, .14) !important; }

.opc-card-link { transition: border-color .15s ease, box-shadow .2s ease; }
.opc-card-link:hover { border-color: #1d4ed8 !important; box-shadow: 0 18px 40px -24px rgba(15, 23, 42, .45); }
.opc-navlink:hover { color: #1d4ed8 !important; }
.opc-navlink-dark:hover { color: #ffffff !important; }
.opc-row-link:hover { background-color: #f1f5f9 !important; }
.opc-row-link-dark:hover { background-color: rgba(255, 255, 255, .08) !important; }
.opc-chip:hover { border-color: #1d4ed8 !important; }

.opc-input:focus { border-color: #1d4ed8 !important; box-shadow: 0 0 0 3px rgba(29, 78, 216, .18); outline: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #ffcc00; outline-offset: 2px;
}

.opc-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Flip cards (homepage services): hover flips on mouse devices, tap toggles .is-flipped,
   keyboard focus flips through :focus-visible. */
.opc-flip { perspective: 1600px; }
.opc-flip-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2, .75, .25, 1); }
.opc-flip.is-flipped .opc-flip-inner,
.opc-flip:has(:focus-visible) .opc-flip-inner { transform: rotateY(180deg); }
.opc-flip-face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.opc-flip-back { transform: rotateY(180deg); }
@media (hover: hover) and (pointer: fine) {
  .opc-flip:hover .opc-flip-inner { transform: rotateY(180deg); }
  .opc-flip-close { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .opc-flip-inner { transition: none; }
}

/* "How it works" steps: floating 3D icons, sequential badge pulse,
   flowing connector line, scroll reveal where supported. */
@keyframes opc-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes opc-pulse {
  0% { box-shadow: 0 0 0 0 rgba(29, 78, 216, .5), 0 10px 20px -8px rgba(29, 78, 216, .7); }
  70% { box-shadow: 0 0 0 16px rgba(29, 78, 216, 0), 0 10px 20px -8px rgba(29, 78, 216, .7); }
  100% { box-shadow: 0 0 0 0 rgba(29, 78, 216, 0), 0 10px 20px -8px rgba(29, 78, 216, .7); }
}
@keyframes opc-pulse-green {
  0% { box-shadow: 0 0 0 0 rgba(5, 150, 105, .5), 0 10px 20px -8px rgba(5, 150, 105, .7); }
  70% { box-shadow: 0 0 0 16px rgba(5, 150, 105, 0), 0 10px 20px -8px rgba(5, 150, 105, .7); }
  100% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0), 0 10px 20px -8px rgba(5, 150, 105, .7); }
}
@keyframes opc-flow { to { background-position: 22px 0; } }
@keyframes opc-rise { from { opacity: 0; transform: translateY(36px) scale(.97); } to { opacity: 1; transform: none; } }

.opc-float { animation: opc-float 4.2s ease-in-out infinite; }
.opc-pulse { animation: opc-pulse 3.2s ease-out infinite; }
.opc-pulse-green { animation: opc-pulse-green 3.2s ease-out infinite; }
.opc-flow-line { animation: opc-flow 1.1s linear infinite; }
.opc-step { transition: translate .25s ease, box-shadow .25s ease, border-color .25s ease; }
.opc-step:hover { translate: 0 -6px; border-color: #93c5fd !important; box-shadow: 0 30px 50px -30px rgba(11, 20, 64, .55) !important; }
@supports (animation-timeline: view()) {
  .opc-reveal { animation: opc-rise linear both; animation-timeline: view(); animation-range: entry 5% cover 30%; }
}
@media (prefers-reduced-motion: reduce) {
  .opc-float, .opc-pulse, .opc-pulse-green, .opc-flow-line, .opc-reveal { animation: none !important; }
  .opc-step { transition: none; }
}

@media print {
  .opc-no-print { display: none !important; }
}