/* ==========================================================================
   /services/fractional-cto — page styles (Fractional CTO.dc.html)
   Loaded after service.css, which has everything but the hero art: a ship's
   wheel steering to and fro over two rolling waves, and a bobbing speech
   bubble. All three stop for reduced motion.
   ========================================================================== */

.helm {
    justify-self: center;
    width: min(100%, 400px);
    position: relative;
    padding: 40px 0 70px;
    display: flex; justify-content: center;
}
.helm svg { max-width: none; }

.helm__say {
    position: absolute; left: 0; top: 0; z-index: 2;
    background: var(--c-cream);
    border: 3px solid var(--c-ink); box-shadow: var(--sh-ink-sm);
    border-radius: 24px 24px 24px 6px;
    padding: 10px 16px;
    font-family: var(--f-display); font-weight: 800; font-size: 20px;
    animation: hdBob2 5s ease-in-out infinite;
}

.helm__wheel { display: block; overflow: visible; position: relative; z-index: 1; }
.helm__spin {
    transform-origin: 0 0;
    animation: hdSteer 7s cubic-bezier(.45, 0, .55, 1) infinite;
}

.helm__sea { position: absolute; left: -20px; right: -20px; bottom: 0; height: 70px; overflow: hidden; }
.helm__wave { position: absolute; left: 0; display: block; width: calc(100% + 80px); }
.helm__wave--back  { bottom: 40px; opacity: .9; animation: hdWave 6s linear infinite; }
.helm__wave--front { bottom: 18px; animation: hdWave 4.5s linear infinite; }

@keyframes hdSteer { 0%, 100% { transform: rotate(-24deg); } 50% { transform: rotate(24deg); } }
@keyframes hdWave { to { transform: translateX(-80px); } }
@keyframes hdBob2 { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-6px) rotate(-2deg); } }

@media (prefers-reduced-motion: reduce) {
    .helm, .helm * { animation: none !important; }
}