body { margin: 0; background: #FAF8F4; font-family: 'IBM Plex Sans', sans-serif; color: #1C1A17; }
* { box-sizing: border-box; }
::selection { background: #D4A01733; }

a { transition: opacity 0.15s ease; }
a:hover { opacity: 0.82; }

@keyframes hubPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(212,160,23,0.25); } 50% { box-shadow: 0 0 0 14px rgba(212,160,23,0); } }
@keyframes dotPhase0 { 0% { opacity:0; offset-distance:0%; } 2% { opacity:1; offset-distance:0%; } 23% { opacity:1; offset-distance:100%; } 25% { opacity:0; } 100% { opacity:0; } }
@keyframes linePhase0 { 0% { opacity:0; } 1% { opacity:1; } 24% { opacity:1; } 26% { opacity:0; } 100% { opacity:0; } }
.rp-dot0 { offset-path: path('M250,65 L250,290 L60,290 L60,350'); animation: dotPhase0 11s linear infinite; animation-delay: 0s; }
.rp-line0 { animation: linePhase0 11s linear infinite; animation-delay: 0s; }
.rp-dot1 { offset-path: path('M250,65 L250,290 L190,290 L190,350'); animation: dotPhase0 11s linear infinite; animation-delay: 2.75s; }
.rp-line1 { animation: linePhase0 11s linear infinite; animation-delay: 2.75s; }
.rp-dot2 { offset-path: path('M250,65 L250,290 L310,290 L310,350'); animation: dotPhase0 11s linear infinite; animation-delay: 5.5s; }
.rp-line2 { animation: linePhase0 11s linear infinite; animation-delay: 5.5s; }
.rp-dot3 { offset-path: path('M250,65 L250,290 L440,290 L440,350'); animation: dotPhase0 11s linear infinite; animation-delay: 8.25s; }
.rp-line3 { animation: linePhase0 11s linear infinite; animation-delay: 8.25s; }

/* --- Audio player (real playback) --- */
@keyframes waveBar { 0%,100% { transform: scaleY(0.4); } 50% { transform: scaleY(1); } }
.wave-bar { width:3px; border-radius:2px; background:#D4A017; transform: scaleY(0.4); transition: transform 0.15s ease; }
.player-card.playing .wave-bar { animation: waveBar 1s ease-in-out infinite; }

.play-btn { cursor:pointer; flex-shrink:0; width:52px; height:52px; border-radius:50%; background:#D4A017; display:flex; align-items:center; justify-content:center; border:none; padding:0; }
.play-btn:hover { opacity: 0.88; }
.play-icon-play { width:0; height:0; border-top:9px solid transparent; border-bottom:9px solid transparent; border-left:15px solid #1C1A17; margin-left:3px; }
.play-icon-pause { width:14px; height:14px; background:#1C1A17; border-radius:2px; display:none; }
.player-card.playing .play-icon-play { display:none; }
.player-card.playing .play-icon-pause { display:block; }

/* --- Contact form focus states --- */
.form-input:focus, .form-textarea:focus {
  outline: none;
  border-color: #D4A017;
  box-shadow: 0 0 0 3px #D4A01722;
}
.form-input, .form-textarea, .form-submit { font-family: inherit; }
.form-submit { cursor: pointer; }
.form-submit:hover { opacity: 0.92; }
.form-submit:disabled { opacity: 0.6; cursor: not-allowed; }

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .player-card.playing .wave-bar,
  .rp-dot0, .rp-dot1, .rp-dot2, .rp-dot3,
  .rp-line0, .rp-line1, .rp-line2, .rp-line3 {
    animation: none !important;
  }
}

/* --- Focus visibility for keyboard nav --- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid #D4A017;
  outline-offset: 2px;
}

/* --- Mobile --- */
@media (max-width: 720px) {
  .nav-row, .hero-row, .section-pad { padding-left: 24px !important; padding-right: 24px !important; }
  .hero-row { padding-top: 56px !important; padding-bottom: 56px !important; }
  h1 { font-size: 34px !important; }
}