@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root {
  --sos-black: #08090a;
  --sos-ink: #111416;
  --sos-blue: #83a9c7;
  --sos-blue-dark: #456a88;
  --sos-paper: #eef0ec;
  --sos-muted: #9aa0a4;
  --sos-line: rgba(255,255,255,.12);
}

html { scroll-behavior: smooth; scroll-padding-top: 78px; }
body { font-family: "League Spartan", sans-serif; color: #151719; background: var(--sos-black); }
p {font-size:1.1rem;}
h1,h2,h3,h4,.navbar-brand { font-family: "Space Grotesk", sans-serif; }
h1 { font-size: clamp(3rem, 7vw, 6.5rem); line-height: .93; letter-spacing: -.055em; font-weight: 600; max-width: 850px; }
h2 { font-size: clamp(2.3rem, 5vw, 4.5rem); line-height: 1; letter-spacing: -.045em; }
h3 { font-size: 1.65rem; letter-spacing: -.025em; }
a { transition: all .2s ease; }

.sos-nav { background: linear-gradient(180deg, rgba(0,0,0,.78), transparent); padding: 1.1rem 0; transition: background .25s ease, padding .25s ease; }
.sos-nav.scrolled { background: rgba(8,9,10,.94); padding: .9rem 0; backdrop-filter: blur(12px); }
.brand-logo { width: 165px; height: auto; }
.nav-link { color: rgba(255,255,255,.82)!important; font-size: 1rem; }
.nav-link:hover { color: #fff!important; }
/* dave edits*/
.navbar-toggler:focus {box-shadow:unset}

.hero {
  position: relative; min-height: 100vh; display:flex; align-items:center;
  background:
    linear-gradient(90deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.5) 42%, rgba(0,0,0,.08) 100%),
    url("../assets/2104607986.jpg") center/cover no-repeat;
  color: white;
}
.hero-overlay { position:absolute; inset:0; background:linear-gradient(0deg, rgba(8,9,10,.95), transparent 45%); }
.hero .lead { max-width: 650px; color: rgba(255,255,255,.78); font-size: 1.15rem; }
.eyebrow { font-size: .72rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--sos-blue); margin-bottom:1rem; }

.section { padding: 8rem 0; }
.section-dark { background: var(--sos-black); color:white; }
.section-light { background: var(--sos-paper); color:#151719; }
.section-heading { margin-bottom:3.5rem; max-width:800px; }
.section-heading.dark .eyebrow { color: var(--sos-blue-dark); }

.release-card { background: #111416; border:1px solid var(--sos-line); overflow:hidden; }
.release-card h3 { margin-bottom: .75rem; }
.release-card p { color:#b9bec1; }
.release-art { object-fit:cover; min-height:100%; aspect-ratio:1/1; }
.release-art-wide { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.small-muted { color:#8e9599!important; }
.btn-primary { --bs-btn-bg: var(--sos-blue-dark); --bs-btn-border-color: var(--sos-blue-dark); --bs-btn-hover-bg: #547d9e; --bs-btn-hover-border-color:#547d9e; }
.text-link { color:#b7d0e3; text-decoration:none; font-weight:600; }
.text-link:hover { color:white; }
.release-featured { border-color: rgba(131,169,199,.28); }

.video-card { position:relative; display:block; overflow:hidden; background:#dfe3df; }
.video-card img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; filter:saturate(.8); transition:transform .4s ease, filter .4s ease; }
.video-card:hover img { transform:scale(1.04); filter:saturate(1); }
.play { position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); width:64px; height:64px; border-radius:50%; display:grid; place-items:center; padding-left:3px; background:rgba(255,255,255,.92); color:#111; box-shadow:0 8px 30px rgba(0,0,0,.2); }

.bio-image { width:100%; max-height:650px; object-fit:cover; filter:grayscale(1); }
.section-dark p:not(.eyebrow) { color:#b8bdc0; }
.contact-form .form-control { border:0; border-radius:0; border-bottom:1px solid #aeb2b0; background:transparent; padding:.85rem 0; }
.contact-form .form-control:focus { box-shadow:none; border-color:#111; }
.contact-form .form-check-input:checked { background-color:#111; border-color:#111; }

.footer { padding:2rem 0; background:#050606; color:#777d80; font-size:.85rem; }
.footer-logo { width:130px; }
.footer a { color:#b7d0e3; text-decoration:none; }

.video-placeholder { display:grid; place-items:center; height:100%; color:#aaa; background:#151718; text-align:center; padding:2rem; }

/* Social Media icons */
@font-face {
    font-family: 'icomoon';
    src: url('icomoon.eot?vz7b7d?1782998385');
    src: url('icomoon.eot?vz7b7d#iefix?1782998385') format('embedded-opentype'), url('icomoon.ttf?vz7b7d?1782998385') format('truetype'), url('icomoon.woff?vz7b7d?1782998385') format('woff'), url('icomoon.svg?vz7b7d#icomoon?1782998385') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
    font-family: 'icomoon' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-twitter:before {
    content: "\e900";
}

.icon-bandcamp:before {
    content: "\e901";
}

.icon-youtube:before {
    content: "\e906";
}

.icon-facebook2:before {
    content: "\e902";
}

.icon-facebook1:before {
    content: "\e903";
}

.icon-soundcloud2:before {
    content: "\e904";
}

.icon-soundcloud1:before {
    content: "\e905";
}

@media (max-width: 991.98px) {
  .sos-nav { background:rgba(8,9,10,.94); }
  .hero { min-height: 88vh; }
  .section { padding:6rem 0; }
}
@media (max-width: 575.98px) {
  .brand-logo { width:135px; }
  .hero { background-position: 62% center; }
  .hero .lead { font-size:1rem; }
  .section { padding:5rem 0; }
}

/* W3.CSS conversion layer */
.content-container, .nav-inner, .footer-inner { max-width: 1320px !important; }
.sos-nav { z-index: 1000; width:100%; }
.nav-inner { position:relative; margin:auto; display:flex; align-items:center; justify-content:space-between; }
.brand-link { display:block; }
.nav-menu { margin-left:auto; display:flex; align-items:center; gap:.5rem; }
.nav-link { display:block; padding:.6rem .7rem; text-decoration:none; }
.nav-bandcamp, .sos-btn { display:inline-block; text-decoration:none; border:1px solid transparent; cursor:pointer; transition:all .2s ease; }
.nav-bandcamp { color:#fff; border:1px solid rgba(255,255,255,.7); padding:.45rem .9rem; margin-left:.4rem; }
.nav-bandcamp:hover { background:#fff; color:#111; }
.nav-toggle { color:#fff; background:transparent !important; font-size:1.8rem; padding:.25rem .6rem; }
.nav-toggle:hover { color:#fff !important; }
.nav-menu.mobile-open { display:flex !important; flex-direction:column; align-items:stretch; position:absolute; top:100%; left:0; right:0; background:rgba(8,9,10,.97); padding:.7rem 1rem 1rem; }
.nav-menu.mobile-open .nav-bandcamp { margin:.3rem 0 0; text-align:center; }

.hero-row { min-height:100vh; display:flex; align-items:flex-end; padding-bottom:3rem; }
.hero-row > .w3-col { padding:0 0; }
.hero-buttons { display:flex; flex-wrap:wrap; gap:1rem; margin-top:1.5rem; }
.sos-btn { padding:.8rem 1.35rem; font-size:1.1rem; }
.sos-btn-light { background:#fff; color:#111; }
.sos-btn-light:hover { background:#ddd; }
.sos-btn-outline { background:transparent; color:#fff; border-color:rgba(255,255,255,.85); }
.sos-btn-outline:hover { background:#fff; color:#111; }
.sos-btn-primary { background:var(--sos-blue-dark); color:#fff; }
.sos-btn-primary:hover { background:#547d9e; }
.sos-btn-dark { background:#111; color:#fff; }

.card-grid { display:flex; flex-wrap:wrap; }
.card-grid > [class*="w3-col"] { margin-bottom:1.5rem; }
.release-card { height:100%; display:flex; flex-direction:column; }
.release-copy { padding:2rem; flex:1; display:flex; flex-direction:column; }
.release-copy .sos-btn { margin-top:auto; align-self:flex-start; }
.card-grid-lower { margin-top:.25rem; }

.video-card { text-decoration:none; }
.video-card .play { pointer-events:none; }

.bio-grid { display:flex; align-items:center; }
.bio-grid > .w3-col { padding:0 1.5rem; }
.bio-grid > .w3-col:first-child { padding-left:0; }
.bio-grid > .w3-col:last-child { padding-right:0; }

.contact-grid { display:flex; justify-content:center; }
.contact-grid > .w3-col { width:66.666%; }
.form-grid { display:flex; flex-wrap:wrap; gap:1rem 0; margin:0 -0.75rem; }
.form-half, .form-full { padding:0 .75rem; }
.form-half { width:50%; }
.form-full { width:100%; }
.form-control { width:100%; font:inherit; }
.form-label { display:block; margin-bottom:.35rem; }
.form-check { display:flex; align-items:flex-start; gap:.5rem; }
.form-check-input { width:1rem; height:1rem; margin-top:.25rem; flex:0 0 auto; }

.footer-inner { margin:auto; display:flex; flex-direction:row; justify-content:space-between; align-items:center; gap:1rem; }
.socials { margin:0; font-size:2rem !important; }
.socials a { margin-left:.45rem; }

.video-modal { display:none; position:fixed; z-index:2000; inset:0; }
.video-modal.is-open { display:block; }
.video-modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.78); }
.video-modal-dialog { position:relative; z-index:1; width:min(900px,92vw); margin:5vh auto; background:#151718; color:#fff; }
.video-modal-header { display:flex; justify-content:space-between; align-items:center; padding:1rem 1.25rem; }
.video-modal-header h2 { font-size:1.4rem; margin:0; letter-spacing:0; }
.video-close { background:none; border:0; color:#fff; font-size:2rem; line-height:1; cursor:pointer; }
.video-modal-body { padding:0 1.25rem 1.25rem; }
.video-modal-body .video-placeholder { position:relative; aspect-ratio:16/9; height:auto; padding:0; }
.video-modal-body iframe { width:100%; height:100%; border:0; display:block; }

@media (max-width: 991px) {
  .nav-menu { display:none; }
  .hero-row { min-height:88vh; }
  .bio-grid { display:block; }
  .bio-grid > .w3-col { padding:0; margin-bottom:2rem; }
  .contact-grid > .w3-col { width:83.333%; }
}
@media (max-width: 767px) {
  .w3-row-padding { margin-left:-8px; margin-right:-8px; }
  .w3-row-padding > [class*="w3-col"] { padding:0 8px; }
  .contact-grid > .w3-col { width:100%; }
  .form-half { width:100%; }
  .footer-inner { flex-direction:column; text-align:center; }
}
@media (max-width: 575px) {
  .brand-logo { width:135px; }
  .hero-buttons { gap:.75rem; }
  .sos-btn { font-size:1rem; }
  .release-copy { padding:1.5rem; }
}