/* SIGNS OF WEAR — responsive static website */

:root {
  --bg:#070808;
  --bg2:#0c0d0e;
  --panel:#111314;
  --text:#ece8e2;
  --muted:#9f9b95;
  --line:rgba(255,255,255,.11);
  --accent:#b9aa97;
  --accent2:#d3c8b9;
  --max:1240px;
}

* { box-sizing:border-box; }

html { scroll-behavior:smooth; }

body {
  margin:0;
  background:
    radial-gradient(circle at 70% 20%, rgba(255,255,255,.035), transparent 25%),
    linear-gradient(180deg, #080909 0%, #050606 100%);
  color:var(--text);
  font-family: Arial, Helvetica, sans-serif;
  line-height:1.55;
}

body::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:100;
  pointer-events:none;
  opacity:.10;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:28px 28px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.7), transparent 38%);
}

a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }

.site-header {
  min-height:82px;
  padding:0 3.2vw;
  display:grid;
  grid-template-columns:280px 1fr 170px;
  gap:24px;
  align-items:center;
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(7,8,8,.92);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(12px);
}

.brand {
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

.brand-logo {
  width:42px;
  height:58px;
  object-fit:contain;
  opacity:.92;
  filter:grayscale(1) brightness(1.35) contrast(1.1);
}

.brand-wordmark {
  width:205px;
  max-height:44px;
  object-fit:contain;
  object-position:left center;
  filter:grayscale(1) brightness(.86);
}

.main-nav {
  display:flex;
  justify-content:center;
  gap:34px;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:13px;
}

.main-nav a {
  padding:30px 0 24px;
  border-bottom:2px solid transparent;
}

.main-nav a:hover {
  color:var(--accent2);
  border-bottom-color:var(--accent);
}

.header-social {
  display:flex;
  justify-content:flex-end;
  gap:14px;
  font-size:12px;
  letter-spacing:.12em;
  color:var(--accent2);
}

.nav-toggle { display:none; }

.hero {
  position:relative;
  min-height:780px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:
    linear-gradient(90deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.78) 24%, rgba(0,0,0,.16) 55%, rgba(0,0,0,.45) 100%),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.75)),
    url("assets/images/hero.jpg") center 34% / cover no-repeat;
  border-bottom:1px solid var(--line);
}

.hero-grid {
  position:absolute;
  left:0;
  top:0;
  width:38%;
  height:100%;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:linear-gradient(to right, black, transparent);
}

.hero-fade {
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 20% 48%, transparent 0 20%, rgba(0,0,0,.35) 60%);
}

.hero-copy {
  position:relative;
  z-index:2;
  width:min(560px, 86vw);
  margin-left:max(4vw, calc((100vw - var(--max)) / 2));
  padding:120px 0 70px;
}

.hero-logo {
  width:92px;
  margin-bottom:24px;
  opacity:.9;
  filter:grayscale(1) brightness(1.25) contrast(1.25)
          drop-shadow(0 0 12px rgba(255,255,255,.05));
}

.hero-wordmark {
  width:min(520px, 90vw);
  filter:
    grayscale(1)
    brightness(.80)
    contrast(1.28)
    drop-shadow(0 8px 18px rgba(0,0,0,.8));
}

.hero-kicker,
.section-label {
  text-transform:uppercase;
  letter-spacing:.28em;
  color:var(--accent);
}

.hero-kicker {
  margin:25px 0 28px;
  font-size:14px;
}

.hero-actions {
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

.btn {
  min-height:50px;
  padding:0 24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--accent);
  text-transform:uppercase;
  letter-spacing:.10em;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  transition:.2s ease;
}

.btn-primary {
  background:var(--accent2);
  color:#0a0b0b;
}

.btn-primary:hover { background:white; }

.btn-outline:hover {
  background:rgba(255,255,255,.06);
  border-color:#ddd3c4;
}

.section {
  border-bottom:1px solid var(--line);
}

.section-inner {
  width:min(var(--max), calc(100% - 48px));
  margin:0 auto;
  padding:86px 0;
}

.section-label {
  display:block;
  margin-bottom:12px;
  font-size:12px;
}

h2,h3 {
  margin:0;
  text-transform:uppercase;
  letter-spacing:.055em;
  font-weight:600;
}

h2 {
  font-size:clamp(38px, 5vw, 62px);
  line-height:1.04;
}

h3 {
  font-size:clamp(30px, 4vw, 44px);
}

p {
  color:var(--muted);
  font-size:17px;
}

.lead {
  color:#cfc9c1;
  font-size:19px;
}

.accent-line {
  width:44px;
  height:1px;
  background:var(--accent);
  margin:24px 0 28px;
}

.about-grid {
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:78px;
  align-items:center;
}

.section-copy {
  max-width:650px;
}

.text-button {
  border:0;
  border-bottom:1px solid var(--accent);
  background:transparent;
  color:var(--accent2);
  padding:0 0 6px;
  text-transform:uppercase;
  letter-spacing:.12em;
  cursor:pointer;
  font-size:12px;
  margin-top:8px;
}

.about-more {
  display:none;
  margin-top:24px;
  padding-top:22px;
  border-top:1px solid var(--line);
}

.about-more.open { display:block; }

.closing-line {
  color:#d8d1c8;
  font-weight:700;
}

.logo-stage {
  min-height:460px;
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
}

.technical-grid {
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:32px 32px;
  mask-image:radial-gradient(circle, black 15%, transparent 70%);
}

.metal-logo {
  position:relative;
  width:270px;
  opacity:.68;
  filter:
    grayscale(1)
    brightness(.83)
    contrast(1.35)
    drop-shadow(0 18px 34px rgba(0,0,0,.7));
}

.music-grid {
  display:grid;
  grid-template-columns:.8fr 360px 1fr;
  gap:44px;
  align-items:center;
}

.album-card {
  border:1px solid var(--line);
  padding:8px;
  background:#0a0b0b;
  transition:.25s ease;
}

.album-card:hover {
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.28);
}

.album-card img {
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
}

.album-sub {
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:12px;
  margin-top:5px;
}

.platforms {
  display:flex;
  flex-wrap:wrap;
  gap:14px 22px;
  margin:28px 0 30px;
}

.platforms a {
  color:#d6d0c9;
  border-bottom:1px solid transparent;
}

.platforms a:hover {
  border-bottom-color:var(--accent);
}

.gallery {
  background:#090a0a;
}

.gallery-masonry {
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  grid-auto-rows:110px;
  gap:10px;
  margin-top:38px;
}

.gallery-masonry figure {
  margin:0;
  overflow:hidden;
  border:1px solid var(--line);
  background:#111;
  grid-column:span 3;
  grid-row:span 3;
}

.gallery-masonry figure.wide {
  grid-column:span 6;
  grid-row:span 3;
}

.gallery-masonry figure.tall {
  grid-column:span 3;
  grid-row:span 5;
}

.gallery-masonry img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:.35s ease;
  filter:saturate(.78) contrast(1.06);
}

.gallery-masonry figure:hover img {
  transform:scale(1.03);
  filter:saturate(1) contrast(1.08);
}

.connect-grid {
  display:grid;
  grid-template-columns:1.3fr repeat(4, 1fr);
  gap:30px;
  align-items:center;
}

.social-link {
  display:flex;
  flex-direction:column;
  gap:5px;
}

.social-link strong {
  color:var(--accent2);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:13px;
}

.social-link span {
  color:var(--muted);
  font-size:14px;
}

.newsletter {
  background:
    linear-gradient(90deg, rgba(255,255,255,.025), transparent 40%),
    #0d0e0f;
  border-bottom:1px solid var(--line);
}

.newsletter-grid {
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:70px;
  align-items:center;
}

.form-row {
  display:flex;
}

.newsletter-form input[type="email"] {
  flex:1;
  min-width:0;
  min-height:50px;
  background:#090a0a;
  color:white;
  border:1px solid var(--accent);
  border-right:0;
  padding:0 16px;
  font:inherit;
}

.privacy-check {
  display:flex;
  gap:9px;
  align-items:flex-start;
  margin-top:12px;
  color:var(--muted);
  font-size:13px;
}

.form-message {
  min-height:22px;
  font-size:13px;
}

.site-footer {
  width:min(var(--max), calc(100% - 48px));
  margin:0 auto;
  padding:30px 0 42px;
  display:grid;
  grid-template-columns:1.4fr .8fr 1fr auto;
  gap:28px;
  align-items:center;
  color:var(--muted);
  font-size:13px;
}

.footer-brand {
  display:flex;
  gap:12px;
  align-items:center;
}

.footer-logo {
  width:34px;
  height:46px;
  object-fit:contain;
  filter:grayscale(1) brightness(1.25);
}

.footer-wordmark {
  width:155px;
  max-height:32px;
  object-fit:contain;
  filter:grayscale(1) brightness(.76);
}

.footer-links {
  display:flex;
  gap:16px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Tablet */
@media (max-width: 980px) {
  .site-header {
    grid-template-columns:1fr auto;
  }

  .header-social { display:none; }
  .nav-toggle {
    display:block;
    color:var(--accent2);
    background:transparent;
    border:1px solid var(--line);
    padding:8px 11px;
    font-size:20px;
  }

  .main-nav {
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:82px;
    background:#080909;
    padding:14px 24px 22px;
    flex-direction:column;
    gap:0;
    border-bottom:1px solid var(--line);
  }

  .main-nav.open { display:flex; }
  .main-nav a { padding:13px 0; }

  .hero {
    min-height:690px;
    background-position:58% 34%;
  }

  .hero-copy {
    margin-left:5vw;
    width:min(480px, 80vw);
  }

  .about-grid,
  .music-grid,
  .newsletter-grid {
    grid-template-columns:1fr;
  }

  .album-card {
    max-width:460px;
  }

  .connect-grid {
    grid-template-columns:1fr 1fr 1fr;
  }

  .connect-grid > div:first-child {
    grid-column:1 / -1;
  }

  .site-footer {
    grid-template-columns:1fr 1fr;
  }
}

/* Smartphone */
@media (max-width: 640px) {
  .site-header {
    min-height:72px;
    padding:0 18px;
  }

  .brand-logo {
    width:32px;
    height:44px;
  }

  .brand-wordmark {
    width:170px;
  }

  .main-nav { top:72px; }

  .hero {
    min-height:660px;
    align-items:flex-end;
    background:
      linear-gradient(180deg, rgba(0,0,0,.08) 28%, rgba(0,0,0,.86) 72%, rgba(0,0,0,.98) 100%),
      url("assets/images/hero.jpg") 61% 12% / auto 74% no-repeat,
      #050606;
  }

  .hero-grid { width:100%; opacity:.65; }

  .hero-copy {
    margin:0;
    width:100%;
    padding:350px 22px 42px;
  }

  .hero-logo {
    width:58px;
    margin-bottom:16px;
  }

  .hero-wordmark {
    width:min(370px, 92vw);
  }

  .hero-actions {
    flex-direction:column;
    align-items:stretch;
  }

  .btn {
    width:100%;
  }

  .section-inner {
    width:min(100% - 32px, var(--max));
    padding:62px 0;
  }

  .logo-stage {
    min-height:320px;
  }

  .metal-logo { width:195px; }

  .gallery-masonry {
    grid-template-columns:1fr;
    grid-auto-rows:auto;
  }

  .gallery-masonry figure,
  .gallery-masonry figure.wide,
  .gallery-masonry figure.tall {
    grid-column:auto;
    grid-row:auto;
  }

  .gallery-masonry figure {
    aspect-ratio:4/3;
  }

  .gallery-masonry figure.tall {
    aspect-ratio:3/4;
  }

  .connect-grid {
    grid-template-columns:1fr 1fr;
  }

  .form-row {
    flex-direction:column;
    gap:10px;
  }

  .newsletter-form input[type="email"] {
    border-right:1px solid var(--accent);
  }

  .site-footer {
    grid-template-columns:1fr;
    gap:18px;
  }

  .footer-links {
    flex-wrap:wrap;
  }
}


/* Contact */
.contact {
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), transparent),
    #080909;
}

.contact-grid {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:72px;
  align-items:start;
}

.contact-mail a {
  color:var(--accent2);
  border-bottom:1px solid var(--accent);
  padding-bottom:3px;
}

.contact-fields {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.contact-fields .full {
  grid-column:1 / -1;
}

.contact-form label:not(.privacy-check) {
  display:block;
  margin-bottom:7px;
  color:#d8d1c8;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.12em;
}

.contact-form input,
.contact-form textarea {
  width:100%;
  background:#090a0a;
  color:white;
  border:1px solid rgba(185,170,151,.7);
  padding:13px 14px;
  font:inherit;
  outline:none;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color:var(--accent2);
  box-shadow:0 0 0 2px rgba(211,200,185,.08);
}

.contact-form textarea {
  resize:vertical;
}

.contact-form .btn {
  margin-top:16px;
}

.contact-form-message {
  min-height:22px;
  margin-bottom:0;
  font-size:13px;
}

@media (max-width: 980px) {
  .contact-grid {
    grid-template-columns:1fr;
  }
}

@media (max-width: 640px) {
  .contact-fields {
    grid-template-columns:1fr;
  }

  .contact-fields .full {
    grid-column:auto;
  }
}

/* ==========================================================
   SIGNS OF WEAR — METAL / GRID DESIGN OVERRIDES
   ========================================================== */

:root{
  --bg:#050606;
  --bg2:#090a0a;
  --panel:#0b0c0c;
  --text:#e9e4dd;
  --muted:#9b978f;
  --line:rgba(195,170,137,.20);
  --accent:#b28a54;
  --accent2:#d4c0a4;
}

/* richer distressed background */
body{
  background:
    radial-gradient(circle at 22% 18%, rgba(113,78,42,.08), transparent 24%),
    radial-gradient(circle at 78% 38%, rgba(103,71,40,.05), transparent 26%),
    linear-gradient(180deg,#050606 0%,#080909 44%,#050606 100%);
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:99;
  pointer-events:none;
  opacity:.14;
  background:
    repeating-linear-gradient(17deg, rgba(255,255,255,.025) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(103deg, rgba(178,138,84,.018) 0 1px, transparent 1px 11px);
  mix-blend-mode:screen;
}

/* header */
.site-header{
  min-height:88px;
  background:rgba(4,5,5,.94);
  border-bottom:1px solid rgba(255,255,255,.05);
}

.brand-logo{
  width:48px;
  height:64px;
  opacity:.82;
  filter:brightness(.72) contrast(1.15) saturate(.72);
}

.brand-wordmark{
  width:230px;
  max-height:48px;
  opacity:.86;
  filter:brightness(.72) contrast(1.18) saturate(.70);
}

.main-nav a:hover{
  color:var(--accent2);
  border-bottom-color:var(--accent);
}

.header-social{
  color:#b7aea4;
}

/* HERO */
.hero{
  min-height:790px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.93) 0%, rgba(0,0,0,.70) 25%, rgba(0,0,0,.12) 55%, rgba(0,0,0,.20) 100%),
    linear-gradient(180deg, rgba(0,0,0,.03) 35%, rgba(0,0,0,.78) 92%),
    url("assets/images/hero.jpg") center 28% / cover no-repeat;
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 70% 40%, transparent 0 38%, rgba(0,0,0,.34) 78%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 5px);
  mix-blend-mode:screen;
  opacity:.45;
}

.hero-grid{
  width:44%;
  opacity:.72;
  background-size:30px 30px;
}

.hero-copy{
  width:min(550px,86vw);
  padding-top:118px;
}

.hero-logo{
  width:84px;
  opacity:.72;
  filter:brightness(.70) contrast(1.18) saturate(.72)
         drop-shadow(0 6px 20px rgba(0,0,0,.75));
}

.hero-wordmark{
  width:min(530px,90vw);
  opacity:.86;
  filter:brightness(.74) contrast(1.18) saturate(.72)
         drop-shadow(0 10px 22px rgba(0,0,0,.8));
}

.hero-kicker{
  color:#c2b3a0;
  letter-spacing:.30em;
}

.btn{
  border-color:#a77c47;
}

.btn-primary{
  background:linear-gradient(180deg,#d3c0a3,#b99c77);
  color:#0a0a0a;
}

.btn-outline{
  color:#d6c7b4;
  background:rgba(0,0,0,.18);
}

.section{
  position:relative;
  background-image:
    radial-gradient(circle at 82% 42%, rgba(122,83,42,.035), transparent 28%);
}

.section::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 4px);
  opacity:.45;
}

.section-inner{
  position:relative;
  z-index:1;
}

.section-label{
  color:var(--accent);
}

h2,h3{
  letter-spacing:.07em;
}

.accent-line{
  background:linear-gradient(90deg,var(--accent),transparent);
  width:54px;
}

/* ABOUT technical grid / logo */
.logo-stage{
  min-height:470px;
}

.technical-grid{
  opacity:.72;
  background-size:28px 28px;
}

.logo-stage::after{
  content:"";
  position:absolute;
  inset:9% 8%;
  border:1px solid rgba(178,138,84,.10);
  border-radius:50%;
  transform:scale(.75);
  box-shadow:
    0 0 0 42px rgba(178,138,84,.025),
    0 0 0 84px rgba(178,138,84,.018);
}

.metal-logo{
  width:290px;
  opacity:.68;
  filter:brightness(.72) contrast(1.2) saturate(.75)
         drop-shadow(0 18px 36px rgba(0,0,0,.78));
}

/* music */
.music{
  background:
    linear-gradient(180deg,rgba(255,255,255,.008),transparent),
    #070808;
}

.album-card{
  padding:6px;
  border-color:rgba(178,138,84,.25);
}

.album-info h3{
  color:#d9d0c4;
}

.album-sub{
  color:var(--accent);
}

/* gallery */
.gallery-masonry figure{
  border-color:rgba(178,138,84,.26);
  background:#080909;
}

.gallery-masonry img{
  filter:saturate(.72) contrast(1.08) brightness(.90);
}

.gallery-masonry figure:hover img{
  filter:saturate(.95) contrast(1.10) brightness(.96);
}

/* connect / newsletter / contact */
.connect,
.contact,
.newsletter{
  background:
    radial-gradient(circle at 16% 50%, rgba(143,99,48,.035), transparent 24%),
    #070808;
}

.social-link strong{
  color:#d1c1ad;
}

.newsletter-form input[type="email"],
.contact-form input,
.contact-form textarea{
  background:#060707;
  border-color:rgba(178,138,84,.62);
}

.site-footer{
  border-top:1px solid rgba(255,255,255,.03);
}

.footer-logo{
  filter:brightness(.68) contrast(1.15) saturate(.72);
  opacity:.76;
}

.footer-wordmark{
  filter:brightness(.66) contrast(1.16) saturate(.72);
  opacity:.78;
}

/* TABLET */
@media (max-width:980px){
  .hero{
    min-height:720px;
    background:
      linear-gradient(180deg, rgba(0,0,0,.10) 20%, rgba(0,0,0,.82) 83%, #050606 100%),
      url("assets/images/hero.jpg") center 19% / auto 82% no-repeat,
      #050606;
  }

  .hero-copy{
    width:min(520px,84vw);
    padding-top:390px;
  }

  .brand-wordmark{
    width:205px;
  }
}

/* SMARTPHONE — preserve all faces */
@media (max-width:640px){
  .hero{
    min-height:760px;
    background:
      linear-gradient(180deg, rgba(0,0,0,.02) 28%, rgba(0,0,0,.70) 63%, rgba(0,0,0,.98) 87%),
      url("assets/images/hero.jpg") center 10% / 100% auto no-repeat,
      #050606;
  }

  .hero::after{
    background:
      linear-gradient(90deg,rgba(0,0,0,.15),transparent 12%,transparent 88%,rgba(0,0,0,.15));
  }

  .hero-copy{
    padding:430px 20px 42px;
    margin:0;
    width:100%;
  }

  .hero-logo{
    width:54px;
  }

  .hero-wordmark{
    width:min(360px,92vw);
  }

  .hero-kicker{
    font-size:12px;
  }

  .brand-logo{
    width:30px;
    height:42px;
  }

  .brand-wordmark{
    width:165px;
  }

  .logo-stage{
    min-height:300px;
  }

  .metal-logo{
    width:190px;
  }
}


/* ==========================================================
   V4 FINAL ADJUSTMENTS
   Requested changes:
   - new logo + new wordmark
   - no SW emblem inside hero
   - no vignette over band photo
   - preserve all four faces
   - no circular overlay behind About logo
   - preserve logo aspect ratio
   ========================================================== */

/* Header logo/wordmark: use original proportions */
.brand-logo,
.footer-logo,
.metal-logo {
  height:auto !important;
  object-fit:contain !important;
  aspect-ratio:auto !important;
}

.brand-wordmark,
.footer-wordmark,
.hero-wordmark {
  height:auto !important;
  object-fit:contain !important;
  aspect-ratio:auto !important;
}

/* Slightly darker metallic branding without changing the actual image files */
.brand-logo {
  width:46px;
  max-height:66px;
  opacity:.82;
  filter:brightness(.78) contrast(1.08);
}

.brand-wordmark {
  width:238px;
  max-height:54px;
  opacity:.84;
  filter:brightness(.78) contrast(1.08);
}

/* HERO: remove dark side vignette and keep image natural */
.hero {
  min-height:790px;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.02) 0%,
      rgba(0,0,0,.02) 60%,
      rgba(0,0,0,.42) 88%,
      rgba(0,0,0,.78) 100%),
    url("assets/images/hero.jpg") center 25% / cover no-repeat;
}

/* Remove the previous vignette / radial shadow layers */
.hero-fade {
  display:none !important;
}

.hero::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.010) 0 1px,
      transparent 1px 5px
    );
  opacity:.20;
  mix-blend-mode:screen;
}

/* Retain subtle technical grid only at far left */
.hero-grid {
  width:34%;
  opacity:.45;
  mask-image:linear-gradient(to right, rgba(0,0,0,.8), transparent);
}

/* Only the band wordmark in the Hero */
.hero-logo {
  display:none !important;
}

.hero-copy {
  width:min(550px, 86vw);
  margin-left:max(3.6vw, calc((100vw - var(--max)) / 2));
  padding-top:150px;
  padding-bottom:64px;
}

.hero-wordmark {
  width:min(535px, 88vw);
  opacity:.78;
  filter:brightness(.75) contrast(1.10)
         drop-shadow(0 8px 18px rgba(0,0,0,.45));
}

/* ABOUT: logo with no ellipse/circle overlay and no distortion */
.logo-stage {
  min-height:430px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.logo-stage::after {
  display:none !important;
  content:none !important;
}

.technical-grid {
  opacity:.38;
  mask-image:radial-gradient(circle at center, black 12%, transparent 72%);
}

.metal-logo {
  width:min(300px, 72%);
  max-height:none !important;
  opacity:.72;
  filter:brightness(.78) contrast(1.10)
         drop-shadow(0 16px 30px rgba(0,0,0,.60));
}

/* Footer follows the new assets, also unstretched */
.footer-logo {
  width:34px;
  max-height:48px;
  opacity:.78;
  filter:brightness(.74) contrast(1.08);
}

.footer-wordmark {
  width:165px;
  max-height:38px;
  opacity:.78;
  filter:brightness(.72) contrast(1.08);
}

/* Tablet — show the complete group as much as possible */
@media (max-width: 980px) {
  .hero {
    min-height:720px;
    background:
      linear-gradient(180deg,
        rgba(0,0,0,.00) 0%,
        rgba(0,0,0,.02) 58%,
        rgba(0,0,0,.68) 84%,
        #050606 100%),
      url("assets/images/hero.jpg") center 10% / 100% auto no-repeat,
      #050606;
  }

  .hero-copy {
    width:min(500px, 86vw);
    margin-left:5vw;
    padding-top:415px;
  }

  .hero-wordmark {
    width:min(430px, 86vw);
  }
}

/* Smartphone — image uses full width so neither outer face is cropped */
@media (max-width: 640px) {
  .hero {
    min-height:760px;
    background:
      linear-gradient(180deg,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0) 43%,
        rgba(0,0,0,.42) 62%,
        rgba(0,0,0,.92) 82%,
        #050606 100%),
      url("assets/images/hero.jpg") center top / 100% auto no-repeat,
      #050606;
  }

  .hero-grid {
    width:100%;
    opacity:.26;
  }

  .hero-copy {
    margin:0;
    width:100%;
    padding:430px 20px 42px;
  }

  .hero-wordmark {
    width:min(370px, 92vw);
  }

  .brand-logo {
    width:30px;
    max-height:44px;
  }

  .brand-wordmark {
    width:172px;
    max-height:38px;
  }

  .metal-logo {
    width:min(205px, 62vw);
  }
}


/* ==========================================================
   V5 HERO POSITION ADJUSTMENTS
   ========================================================== */

/* Desktop: move wordmark + buttons lower, around hand level */
@media (min-width: 981px) {
  .hero {
    align-items:flex-end;
  }

  .hero-copy {
    margin-left:max(3.6vw, calc((100vw - var(--max)) / 2));
    padding-top:0;
    padding-bottom:78px;
    transform:translateY(0);
  }

  .hero-wordmark {
    margin-top:0;
  }
}

/* Tablet: reduce gap between image and branding */
@media (min-width: 641px) and (max-width: 980px) {
  .hero-copy {
    padding-top:360px;
    padding-bottom:44px;
  }
}

/* Smartphone: bring band name much closer to image / hand level */
@media (max-width: 640px) {
  .hero {
    min-height:700px;
  }

  .hero-copy {
    padding:335px 20px 34px;
  }

  .hero-wordmark {
    margin-top:0;
  }

  .hero-kicker {
    margin-top:18px;
    margin-bottom:20px;
  }
}


/* ==========================================================
   V6 — SUBTLE SHADOWS ON LARGE BRANDING ONLY
   Header branding remains untouched.
   ========================================================== */

/* Hero wordmark: subtle depth against the band photo */
.hero-wordmark {
  filter:
    brightness(.75)
    contrast(1.10)
    drop-shadow(0 5px 5px rgba(0,0,0,.42))
    drop-shadow(0 12px 18px rgba(0,0,0,.24)) !important;
}

/* Large SW logo in About section */
.metal-logo {
  filter:
    brightness(.78)
    contrast(1.10)
    drop-shadow(0 5px 5px rgba(0,0,0,.38))
    drop-shadow(0 13px 20px rgba(0,0,0,.22)) !important;
}

/* Explicitly keep header clean — no shadow */
.brand-logo,
.brand-wordmark {
  filter:brightness(.78) contrast(1.08) !important;
}


/* ==========================================================
   V7 — HERO REBUILD / MOBILE GAP FIX / STRONGER SHADOW
   ========================================================== */

/* Keep header branding untouched and shadow-free */
.brand-logo,
.brand-wordmark {
  filter:brightness(.78) contrast(1.08) !important;
}

/* Desktop hero:
   position the branding around hand level without creating empty space */
@media (min-width: 981px) {
  .hero {
    min-height:780px;
    display:grid;
    grid-template-columns:1fr;
    align-items:stretch;
    background:
      linear-gradient(180deg,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0) 68%,
        rgba(0,0,0,.26) 86%,
        rgba(0,0,0,.62) 100%),
      url("assets/images/hero.jpg") center 23% / cover no-repeat;
  }

  .hero-copy {
    align-self:end;
    margin-left:max(3.6vw, calc((100vw - var(--max)) / 2));
    margin-bottom:62px;
    padding:0;
    width:min(550px, 86vw);
  }

  .hero-wordmark {
    width:min(535px, 88vw);
    margin:0;
    opacity:.82;
    filter:
      brightness(.78)
      contrast(1.10)
      drop-shadow(0 7px 7px rgba(0,0,0,.55))
      drop-shadow(0 18px 28px rgba(0,0,0,.32)) !important;
  }
}

/* About emblem — bigger but soft shadow, no circular overlay */
.logo-stage::after {
  display:none !important;
  content:none !important;
}

.metal-logo {
  width:min(300px, 72%);
  height:auto !important;
  object-fit:contain !important;
  aspect-ratio:auto !important;
  filter:
    brightness(.80)
    contrast(1.10)
    drop-shadow(0 8px 8px rgba(0,0,0,.50))
    drop-shadow(0 20px 30px rgba(0,0,0,.28)) !important;
}

/* Tablet */
@media (min-width: 641px) and (max-width: 980px) {
  .hero {
    min-height:690px;
    display:block;
    background:
      linear-gradient(180deg,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0) 52%,
        rgba(0,0,0,.32) 72%,
        rgba(0,0,0,.82) 100%),
      url("assets/images/hero.jpg") center top / 100% auto no-repeat,
      #050606;
  }

  .hero-copy {
    position:absolute;
    left:5vw;
    bottom:42px;
    width:min(490px, 86vw);
    margin:0;
    padding:0;
  }

  .hero-wordmark {
    width:min(430px, 86vw);
    filter:
      brightness(.78)
      contrast(1.10)
      drop-shadow(0 7px 7px rgba(0,0,0,.52))
      drop-shadow(0 16px 24px rgba(0,0,0,.30)) !important;
  }
}

/* Smartphone:
   rebuild hero so the image and wordmark are tied together with no giant gap.
   The wordmark is absolutely positioned close to hand level. */
@media (max-width: 640px) {
  .hero {
    position:relative;
    min-height:610px;
    display:block;
    overflow:hidden;
    background:
      linear-gradient(180deg,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0) 58%,
        rgba(0,0,0,.22) 72%,
        rgba(0,0,0,.78) 100%),
      url("assets/images/hero.jpg") center top / 100% auto no-repeat,
      #050606;
  }

  .hero-grid {
    width:100%;
    height:58%;
    opacity:.18;
  }

  .hero-copy {
    position:absolute;
    left:20px;
    right:20px;
    bottom:28px;
    width:auto;
    margin:0;
    padding:0;
  }

  .hero-wordmark {
    width:min(350px, 88vw);
    margin:0;
    opacity:.84;
    filter:
      brightness(.80)
      contrast(1.10)
      drop-shadow(0 8px 8px rgba(0,0,0,.58))
      drop-shadow(0 20px 28px rgba(0,0,0,.34)) !important;
  }

  .hero-kicker {
    margin:14px 0 16px;
    font-size:11px;
    letter-spacing:.26em;
  }

  .hero-actions {
    gap:10px;
  }

  .hero-actions .btn {
    min-height:46px;
  }

  .metal-logo {
    width:min(205px, 62vw);
  }
}

/* Very narrow phones */
@media (max-width: 390px) {
  .hero {
    min-height:575px;
  }

  .hero-copy {
    left:16px;
    right:16px;
    bottom:22px;
  }

  .hero-wordmark {
    width:min(325px, 90vw);
  }

  .hero-kicker {
    font-size:10px;
  }
}


/* ==========================================================
   V8 — MOBILE HERO BRANDING MUCH HIGHER
   ========================================================== */

/* Smartphone: move branding substantially higher */
@media (max-width: 640px) {
  .hero {
    min-height:590px;
  }

  .hero-copy {
    position:absolute;
    left:20px;
    right:20px;
    bottom:105px;
    width:auto;
    margin:0;
    padding:0;
  }

  .hero-wordmark {
    width:min(350px, 88vw);
    margin:0;
  }

  .hero-kicker {
    margin:12px 0 14px;
  }

  .hero-actions {
    gap:8px;
  }

  .hero-actions .btn {
    min-height:44px;
  }
}

/* Very narrow phones: still higher, but preserve usable button space */
@media (max-width: 390px) {
  .hero {
    min-height:565px;
  }

  .hero-copy {
    left:16px;
    right:16px;
    bottom:92px;
  }

  .hero-wordmark {
    width:min(320px, 90vw);
  }
}

/* V9 — LINE-UP */
.lineup{margin-top:30px;padding-top:22px;border-top:1px solid rgba(178,138,84,.28)}
.lineup h3{margin:0 0 14px;color:#d9d0c4;font-size:1.02rem;text-transform:uppercase;letter-spacing:.20em}
.lineup p{margin:7px 0;color:#ddd6cc;font-size:.96rem;letter-spacing:.02em}
.lineup p span{color:#9f9a92}
@media(max-width:640px){.lineup{margin-top:25px;padding-top:19px}.lineup p{margin:8px 0}}


/* ==========================================================
   V12 — CURATED GALLERY + LIGHTBOX
   ========================================================== */

.gallery-preview {
  display:grid;
  grid-template-columns:repeat(12, minmax(0,1fr));
  grid-auto-rows:150px;
  gap:10px;
  margin-top:38px;
}

.gallery-item {
  appearance:none;
  border:1px solid rgba(178,138,84,.24);
  padding:0;
  margin:0;
  background:#080909;
  cursor:pointer;
  overflow:hidden;
  grid-column:span 3;
  grid-row:span 2;
}

.gallery-item.gallery-wide {
  grid-column:span 6;
  grid-row:span 2;
}

.gallery-item.gallery-tall {
  grid-column:span 3;
  grid-row:span 4;
}

.gallery-item img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(.76) contrast(1.07) brightness(.91);
  transition:transform .35s ease, filter .35s ease;
}

.gallery-item:hover img,
.gallery-item:focus-visible img {
  transform:scale(1.035);
  filter:saturate(.98) contrast(1.10) brightness(.97);
}

.gallery-item:focus-visible {
  outline:1px solid var(--accent2);
  outline-offset:3px;
}

.gallery-actions {
  display:flex;
  justify-content:flex-end;
  margin-top:22px;
}

.lightbox {
  position:fixed;
  inset:0;
  z-index:200;
  display:none;
}

.lightbox.open {
  display:block;
}

.lightbox-backdrop {
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.94);
  backdrop-filter:blur(7px);
}

.lightbox-shell {
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  display:grid;
  grid-template-columns:90px 1fr 90px;
  grid-template-rows:1fr auto;
  align-items:center;
  justify-items:center;
  padding:36px 24px 22px;
}

.lightbox-figure {
  margin:0;
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-width:0;
  min-height:0;
}

.lightbox-figure img {
  max-width:min(1200px, 100%);
  max-height:calc(100vh - 130px);
  width:auto;
  height:auto;
  object-fit:contain;
  box-shadow:0 18px 55px rgba(0,0,0,.6);
}

.lightbox-figure figcaption {
  color:#aaa49b;
  font-size:13px;
  letter-spacing:.06em;
  text-align:center;
  min-height:20px;
}

.lightbox-close {
  position:absolute;
  top:18px;
  right:22px;
  width:48px;
  height:48px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(5,6,6,.55);
  color:#ddd6cc;
  font-size:32px;
  line-height:1;
  cursor:pointer;
}

.lightbox-nav {
  width:56px;
  height:70px;
  border:1px solid rgba(178,138,84,.34);
  background:rgba(5,6,6,.48);
  color:#d7c3a6;
  font-size:48px;
  line-height:1;
  cursor:pointer;
}

.lightbox-nav:hover,
.lightbox-close:hover {
  background:rgba(178,138,84,.10);
  border-color:rgba(212,192,164,.65);
}

.lightbox-counter {
  grid-column:2;
  color:#8e8982;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
}

body.lightbox-open {
  overflow:hidden;
}

@media (max-width:980px) {
  .gallery-preview {
    grid-template-columns:repeat(6, minmax(0,1fr));
    grid-auto-rows:135px;
  }

  .gallery-item {
    grid-column:span 3;
  }

  .gallery-item.gallery-wide {
    grid-column:span 6;
  }

  .gallery-item.gallery-tall {
    grid-column:span 3;
    grid-row:span 3;
  }

  .lightbox-shell {
    grid-template-columns:64px 1fr 64px;
  }
}

@media (max-width:640px) {
  .gallery-preview {
    grid-template-columns:repeat(2, minmax(0,1fr));
    grid-auto-rows:150px;
    gap:8px;
  }

  .gallery-item,
  .gallery-item.gallery-wide,
  .gallery-item.gallery-tall {
    grid-column:span 1;
    grid-row:span 1;
  }

  .gallery-item:first-child {
    grid-column:span 2;
    grid-row:span 2;
  }

  .gallery-item.gallery-tall {
    grid-row:span 2;
  }

  .gallery-actions {
    justify-content:stretch;
  }

  .gallery-actions .btn {
    width:100%;
  }

  .lightbox-shell {
    grid-template-columns:46px 1fr 46px;
    padding:54px 8px 16px;
  }

  .lightbox-nav {
    width:42px;
    height:58px;
    font-size:38px;
  }

  .lightbox-close {
    top:10px;
    right:10px;
    width:42px;
    height:42px;
    font-size:28px;
  }

  .lightbox-figure img {
    max-height:calc(100vh - 115px);
  }
}

.gallery-item{position:relative}


/* ==========================================================
   V26 — PROFESSIONAL FINISH
   ========================================================== */

/* Booking & contact */
.booking {
  border-top:1px solid rgba(178,138,84,.16);
  border-bottom:1px solid rgba(178,138,84,.16);
  background:
    linear-gradient(110deg, rgba(178,138,84,.045), transparent 42%),
    #080909;
}

.booking-inner {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:50px;
}

.booking-inner p {
  color:#96918a;
  margin:18px 0 0;
}

.booking-mail {
  color:#ddd5ca;
  text-decoration:none;
  font-size:clamp(18px,2vw,28px);
  letter-spacing:.04em;
  border-bottom:1px solid rgba(178,138,84,.48);
  padding-bottom:7px;
  transition:color .2s ease,border-color .2s ease;
}

.booking-mail:hover {
  color:#fff;
  border-color:#d2b78f;
}

/* Clean monochrome social icons */
.social-icons {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:26px auto 8px;
}

.social-icons a {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid rgba(190,181,169,.22);
  color:#aaa39a;
  background:rgba(255,255,255,.015);
  transition:transform .2s ease,color .2s ease,border-color .2s ease,background .2s ease;
}

.social-icons a:hover {
  transform:translateY(-2px);
  color:#e2d6c5;
  border-color:rgba(210,183,143,.58);
  background:rgba(178,138,84,.06);
}

.social-icons svg {
  width:20px;
  height:20px;
  fill:currentColor;
  stroke:currentColor;
  stroke-width:1.6;
}

.social-icons .social-cut {
  fill:none;
  stroke:#080909;
  stroke-width:1.5;
  stroke-linecap:round;
}

/* Lightbox polish */
.lightbox {
  opacity:0;
  visibility:hidden;
  display:block !important;
  transition:opacity .22s ease,visibility .22s ease;
}

.lightbox.open {
  opacity:1;
  visibility:visible;
}

.lightbox-figure img {
  opacity:1;
  transition:opacity .18s ease, transform .25s ease;
  transform:scale(1);
}

.lightbox-figure figcaption {
  color:#d3cbc0;
  font-size:14px;
  font-weight:500;
  letter-spacing:.13em;
  text-transform:uppercase;
  padding-top:3px;
}

.lightbox-counter {
  color:#77726c;
}

@media(max-width:760px) {
  .booking-inner {
    align-items:flex-start;
    flex-direction:column;
    gap:28px;
  }

  .booking-mail {
    font-size:19px;
  }

  .social-icons {
    gap:9px;
  }

  .social-icons a {
    width:40px;
    height:40px;
  }
}


/* ==========================================================
   V27 — CONTACT / NEWSLETTER / STREAMING / LIGHTBOX
   ========================================================== */

.contact-v27 {
  border-top:1px solid rgba(178,138,84,.18);
  background:
    linear-gradient(115deg, rgba(178,138,84,.04), transparent 38%),
    #080909;
}

.contact-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  border:1px solid rgba(190,181,169,.14);
}

.contact-panel {
  padding:clamp(34px,5vw,62px);
  min-width:0;
}

.contact-panel + .contact-panel {
  border-left:1px solid rgba(190,181,169,.14);
}

.contact-panel p {
  max-width:480px;
  color:#96918a;
  margin:18px 0 26px;
}

.contact-mail {
  display:inline-block;
  color:#e0d8cd;
  text-decoration:none;
  font-size:clamp(17px,2vw,24px);
  letter-spacing:.035em;
  border-bottom:1px solid rgba(178,138,84,.48);
  padding-bottom:6px;
}

.contact-mail:hover {
  color:#fff;
  border-color:#d2b78f;
}

.mini-label {
  display:block;
  margin-bottom:12px;
  color:#746f68;
  font-size:10px;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
}

.contact-social {
  margin-top:42px;
}

.contact-social .social-icons {
  justify-content:flex-start;
  margin:0;
}

.newsletter-form {
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  max-width:520px;
}

.newsletter-form input {
  min-width:0;
  border:1px solid rgba(190,181,169,.24);
  background:#050606;
  color:#ddd5ca;
  padding:0 16px;
  min-height:48px;
  outline:none;
  letter-spacing:.08em;
}

.newsletter-form input:focus {
  border-color:rgba(210,183,143,.65);
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.listen-on {
  margin-top:34px;
  padding-top:24px;
  border-top:1px solid rgba(190,181,169,.13);
}

.streaming-links {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.streaming-links a {
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:0 13px;
  border:1px solid rgba(190,181,169,.18);
  color:#aaa39a;
  text-decoration:none;
  font-size:11px;
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  transition:color .2s ease,border-color .2s ease,background .2s ease,transform .2s ease;
}

.streaming-links a:hover {
  color:#e2d6c5;
  border-color:rgba(210,183,143,.55);
  background:rgba(178,138,84,.055);
  transform:translateY(-1px);
}

.lightbox-figure figcaption {
  display:flex;
  flex-direction:column;
  gap:5px;
  align-items:center;
}

.lightbox-name {
  color:#ddd5ca;
  font-size:14px;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.lightbox-meta {
  color:#6f6b65;
  font-size:9px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
}

@media(max-width:760px) {
  .contact-grid {
    grid-template-columns:1fr;
  }

  .contact-panel + .contact-panel {
    border-left:0;
    border-top:1px solid rgba(190,181,169,.14);
  }

  .newsletter-form {
    grid-template-columns:1fr;
  }

  .newsletter-form .btn {
    width:100%;
  }
}


/* ==========================================================
   V28 — CLEANUP / HERO / CONNECT ICONS
   ========================================================== */

/* Move Hero branding back down to the preferred hand-level position */
@media (min-width:981px) {
  .hero-copy {
    margin-bottom:34px !important;
  }
}

@media (min-width:641px) and (max-width:980px) {
  .hero-copy {
    bottom:20px !important;
  }
}

@media (max-width:640px) {
  .hero-copy {
    bottom:58px !important;
  }
}

/* Existing Connect links become the only social icon treatment */
.social-link {
  position:relative;
  padding-left:42px;
}

.social-link-icon {
  position:absolute;
  left:0;
  top:2px;
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  border:1px solid rgba(190,181,169,.22);
  color:#aaa39a;
  transition:color .2s ease,border-color .2s ease,background .2s ease;
}

.social-link:hover .social-link-icon {
  color:#e2d6c5;
  border-color:rgba(210,183,143,.58);
  background:rgba(178,138,84,.06);
}

.social-link-icon svg {
  width:15px;
  height:15px;
  fill:currentColor;
  stroke:currentColor;
  stroke-width:1.5;
}

.social-link-icon .spotify-lines {
  fill:none;
  stroke:#080909;
  stroke-width:1.4;
  stroke-linecap:round;
}

/* No second social-icon row in Contact */
.contact-social {
  display:none !important;
}

/* Exactly one newsletter treatment: the V27 contact/newsletter panel */
section.newsletter {
  display:none !important;
}


/* ==========================================================
   V29 — CLEAN HERO + HEADER SOCIAL ICONS
   ========================================================== */

/* Hero: only the Spotify CTA remains */
.hero-actions {
  display:flex;
  gap:12px;
  align-items:center;
}

.hero-actions .btn:only-child {
  min-width:188px;
}

/* Hide any accidental streaming strip inside hero */
.hero .listen-on {
  display:none !important;
}

/* Header social icons */
.header-social-icons {
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:24px;
}

.header-social-icons a {
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  color:#a7a19a;
  border:1px solid transparent;
  text-decoration:none;
  transition:color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}

.header-social-icons a:hover {
  color:#ddd3c5;
  border-color:rgba(210,183,143,.40);
  background:rgba(178,138,84,.055);
  transform:translateY(-1px);
}

.header-social-icons svg {
  width:17px;
  height:17px;
  fill:currentColor;
  stroke:currentColor;
  stroke-width:1.5;
}

/* Keep header uncluttered on tablets/phones */
@media (max-width: 980px) {
  .header-social-icons {
    margin-left:auto;
    gap:6px;
  }

  .header-social-icons a {
    width:31px;
    height:31px;
  }
}

@media (max-width: 640px) {
  .header-social-icons {
    display:none;
  }
}


/* V30 — Music streaming links */
.music-platforms {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 24px;
  margin:26px 0 30px;
}
.music-platform-link {
  display:grid;
  grid-template-columns:38px 1fr;
  align-items:center;
  gap:11px;
  padding:9px 4px;
  border-bottom:1px solid rgba(255,255,255,.07);
  text-decoration:none;
  transition:border-color .18s ease,transform .18s ease;
}
.music-platform-link:hover { border-bottom-color:var(--accent); transform:translateY(-1px); }
.music-platform-icon { width:34px;height:34px;display:grid;place-items:center;color:var(--accent2); }
.music-platform-icon svg { width:25px;height:25px;fill:currentColor;stroke:currentColor;stroke-width:1.45; }
.music-platform-icon .icon-lines { fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round; }
.music-platform-copy { display:flex;flex-direction:column;gap:3px;min-width:0; }
.music-platform-copy strong { color:var(--accent2);text-transform:uppercase;letter-spacing:.08em;font-size:12px;line-height:1.2; }
.music-platform-copy > span { color:var(--muted);font-size:13px;line-height:1.25; }
@media (max-width:760px) {
  .music-platforms { grid-template-columns:1fr;gap:4px; }
  .music-platform-link { padding:10px 2px; }
}


/* ==========================================================
   V31 — CONSISTENT INSTAGRAM + SPOTIFY BRAND ICONS
   ========================================================== */

/* Both icons use the same visual language everywhere:
   a solid light/metallic mark with negative-space details. */
.brand-icon {
  overflow:visible;
  fill:currentColor;
  color:inherit;
}

.brand-instagram .brand-cutout {
  fill:var(--bg, #080808);
  stroke:none;
}

.brand-spotify .brand-cutout-line {
  fill:none;
  stroke:var(--bg, #080808);
  stroke-width:1.65;
  stroke-linecap:round;
}

/* Header sits on a slightly different dark background. */
.header-social-icons .brand-instagram .brand-cutout,
.header-social-icons .brand-spotify .brand-cutout-line {
  fill:#080808;
  stroke:#080808;
}

/* Music / Connect sections: keep icons visually consistent in size. */
.music-platform-icon .brand-icon,
.social-link-icon .brand-icon {
  width:26px;
  height:26px;
}

/* Instagram benefits from being fractionally smaller optically. */
.music-platform-icon .brand-instagram,
.social-link-icon .brand-instagram {
  width:25px;
  height:25px;
}


/* ==========================================================
   V32 — USER ICONS + HERO POSITION
   ========================================================== */

/* Use the supplied icon artwork consistently */
.brand-img-icon {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

/* Header icons */
.header-social-icons .brand-img-icon {
  width:22px;
  height:22px;
  border-radius:2px;
}

/* Connect icons */
.social-link-icon .brand-img-icon {
  width:22px;
  height:22px;
}

/* Music icons */
.music-platform-icon .brand-img-icon {
  width:27px;
  height:27px;
}

/* The supplied icon tiles are black/white; on the dark site they blend
   cleanly while retaining their original brand shapes. */
.header-social-icons a,
.social-link-icon,
.music-platform-icon {
  overflow:hidden;
}

/* HERO — move branding visibly higher again */
@media (min-width: 981px) {
  .hero-copy {
    margin-bottom:74px !important;
  }
}

/* Tablet */
@media (min-width: 641px) and (max-width: 980px) {
  .hero-copy {
    bottom:58px !important;
  }
}

/* Smartphone: substantially higher than V31 */
@media (max-width: 640px) {
  .hero-copy {
    bottom:118px !important;
  }
}

/* Very narrow phones */
@media (max-width: 390px) {
  .hero-copy {
    bottom:104px !important;
  }
}


/* ==========================================================
   V33 — LATEST ICON SET + COMPACT MOBILE HERO
   ========================================================== */

/* Latest beige/black icon tiles supplied by the band */
.brand-img-icon {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

.header-social-icons .brand-img-icon {
  width:24px;
  height:24px;
}

.social-link-icon .brand-img-icon {
  width:27px;
  height:27px;
}

.music-platform-icon .brand-img-icon {
  width:31px;
  height:31px;
}

/* Spotify icon inside Hero CTA */
.btn-primary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.hero-spotify-icon {
  width:25px;
  height:25px;
  display:block;
  flex:0 0 auto;
}

.hero-spotify-img {
  display:block;
  width:25px;
  height:25px;
  object-fit:contain;
}

/* Desktop remains close to the approved V32 position */
@media (min-width:981px) {
  .hero-copy {
    margin-bottom:74px !important;
  }
}

/* Tablet: slightly higher, but still visually tied to the image */
@media (min-width:641px) and (max-width:980px) {
  .hero-copy {
    bottom:50px !important;
  }
}

/*
  Smartphone:
  Instead of moving the text upward while leaving a huge empty area below it,
  the entire Hero is shortened. This puts the branding around hand height AND
  leaves only a small gap below the Spotify button before the About section.
*/
@media (max-width:640px) {
  .hero {
    min-height:465px !important;
    height:465px !important;
    background:
      linear-gradient(180deg,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0) 48%,
        rgba(0,0,0,.20) 66%,
        rgba(0,0,0,.72) 100%),
      url("assets/images/hero.jpg") center top / 100% auto no-repeat,
      #050606 !important;
  }

  .hero-copy {
    left:18px !important;
    right:18px !important;
    bottom:14px !important;
    width:auto !important;
    padding:0 !important;
    margin:0 !important;
  }

  .hero-wordmark {
    width:min(330px, 86vw) !important;
  }

  .hero-kicker {
    margin:10px 0 12px !important;
  }

  .hero-actions {
    margin:0 !important;
  }

  .hero-actions .btn {
    min-height:43px !important;
  }

  /* The next section begins immediately after the CTA */
  #about .section-inner {
    padding-top:48px;
  }
}

@media (max-width:390px) {
  .hero {
    min-height:440px !important;
    height:440px !important;
  }

  .hero-copy {
    bottom:12px !important;
    left:16px !important;
    right:16px !important;
  }

  .hero-wordmark {
    width:min(305px, 86vw) !important;
  }
}


/* ==========================================================
   V34 — HERO CTA / CONNECT / MOBILE POSITION
   ========================================================== */

/* Hero button is text-only again */
.hero-actions .btn-primary {
  gap:0 !important;
}

/* Move the complete mobile title block a little higher */
@media (max-width:640px) {
  .hero-copy {
    bottom:46px !important;
  }
}

/* Slightly higher as well on very narrow phones */
@media (max-width:390px) {
  .hero-copy {
    bottom:42px !important;
  }
}


/* ==========================================================
   V35 — MOBILE HEADER ICON FIX
   ========================================================== */

/* Keep header itself stable */
.site-header {
  position:sticky;
  top:0;
  z-index:1000;
  overflow:visible;
}

/* Desktop/tablet header social icons */
.header-social-icons {
  position:static !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
  margin:0 !important;
  padding:0 !important;
  width:auto !important;
  height:auto !important;
  transform:none !important;
  animation:none !important;
}

.header-social-icons a {
  position:relative !important;
  display:grid !important;
  place-items:center !important;
  width:32px !important;
  height:32px !important;
  min-width:32px !important;
  min-height:32px !important;
  max-width:32px !important;
  max-height:32px !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
  transform:none !important;
  animation:none !important;
}

.header-social-icons img,
.header-social-icons .brand-img-icon {
  display:block !important;
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  min-height:22px !important;
  max-width:22px !important;
  max-height:22px !important;
  object-fit:contain !important;
  position:static !important;
  transform:none !important;
  animation:none !important;
}

/* Prevent old decorative/social rules from creating ghost icons */
.site-header .social-link-icon,
.site-header .music-platform-icon,
.site-header .social-icons {
  display:none !important;
}

/* Mobile layout */
@media (max-width:640px) {
  .site-header {
    min-height:72px !important;
    grid-template-columns:1fr auto auto !important;
    gap:10px !important;
    padding:0 14px !important;
    align-items:center !important;
  }

  .brand {
    min-width:0 !important;
    overflow:hidden !important;
  }

  .brand-logo {
    width:28px !important;
    height:auto !important;
    max-height:40px !important;
  }

  .brand-wordmark {
    width:150px !important;
    height:auto !important;
    max-height:34px !important;
  }

  /* Keep only Facebook / Instagram / YouTube compact in header */
  .header-social-icons {
    display:flex !important;
    gap:4px !important;
    margin-left:auto !important;
  }

  .header-social-icons a {
    width:27px !important;
    height:27px !important;
    min-width:27px !important;
    min-height:27px !important;
    max-width:27px !important;
    max-height:27px !important;
    border:0 !important;
    background:transparent !important;
  }

  .header-social-icons img,
  .header-social-icons .brand-img-icon {
    width:19px !important;
    height:19px !important;
    min-width:19px !important;
    min-height:19px !important;
    max-width:19px !important;
    max-height:19px !important;
  }

  .nav-toggle {
    position:static !important;
    z-index:1001 !important;
    margin:0 !important;
    transform:none !important;
  }

  /* Never allow any header icon to become a full-width/fixed element */
  .site-header a,
  .site-header img,
  .site-header svg {
    animation:none !important;
  }

  /* Kill any ghosted decorative icon layers in header/background */
  .site-header::before,
  .site-header::after,
  .header-social-icons::before,
  .header-social-icons::after {
    content:none !important;
    display:none !important;
  }
}

/* Very narrow phones */
@media (max-width:390px) {
  .brand-wordmark {
    width:132px !important;
  }

  .header-social-icons a {
    width:24px !important;
    height:24px !important;
    min-width:24px !important;
    min-height:24px !important;
    max-width:24px !important;
    max-height:24px !important;
  }

  .header-social-icons img,
  .header-social-icons .brand-img-icon {
    width:17px !important;
    height:17px !important;
    min-width:17px !important;
    min-height:17px !important;
    max-width:17px !important;
    max-height:17px !important;
  }
}


/* ==========================================================
   V36 — iPhone Safe Area / Notch
   ========================================================== */

/* Make the browser/top safe-area black on iPhones with notch / Dynamic Island */
html,
body {
  background:#000 !important;
}

.site-header {
  padding-top:env(safe-area-inset-top) !important;
  min-height:calc(72px + env(safe-area-inset-top)) !important;
  background:#000 !important;
}

/* Keep header content aligned below the notch area */
@media (max-width:640px) {
  .site-header {
    padding-left:max(14px, env(safe-area-inset-left)) !important;
    padding-right:max(14px, env(safe-area-inset-right)) !important;
  }

  .main-nav {
    top:calc(72px + env(safe-area-inset-top)) !important;
  }
}


/* ==========================================================
   V37 — iPhone / phone landscape header
   Keep logo, socials and hamburger in one compact row.
   ========================================================== */
@media (max-height: 500px) and (orientation: landscape) {
  .site-header {
    min-height:54px !important;
    height:calc(54px + env(safe-area-inset-top)) !important;
    padding-top:env(safe-area-inset-top) !important;
    padding-bottom:0 !important;
    padding-left:max(12px, env(safe-area-inset-left)) !important;
    padding-right:max(12px, env(safe-area-inset-right)) !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto auto !important;
    grid-template-rows:54px !important;
    align-items:center !important;
    gap:8px !important;
  }

  .brand {
    display:flex !important;
    align-items:center !important;
    min-width:0 !important;
    height:54px !important;
  }

  .brand-logo {
    width:25px !important;
    max-height:34px !important;
  }

  .brand-wordmark {
    width:132px !important;
    max-height:28px !important;
  }

  .header-social-icons {
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:3px !important;
    width:auto !important;
    height:54px !important;
    margin:0 !important;
    padding:0 !important;
    position:static !important;
  }

  .header-social-icons a {
    width:25px !important;
    height:25px !important;
    min-width:25px !important;
    min-height:25px !important;
    max-width:25px !important;
    max-height:25px !important;
    padding:0 !important;
    margin:0 !important;
  }

  .header-social-icons img,
  .header-social-icons .brand-img-icon {
    width:18px !important;
    height:18px !important;
    min-width:18px !important;
    min-height:18px !important;
    max-width:18px !important;
    max-height:18px !important;
  }

  .nav-toggle {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    position:static !important;
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    margin:0 !important;
    padding:0 !important;
    transform:none !important;
  }

  .main-nav {
    top:calc(54px + env(safe-area-inset-top)) !important;
  }
}


/* ==========================================================
   V38 — MOBILE LIGHTBOX EXIT FIX
   ========================================================== */

.lightbox-close {
  z-index:20 !important;
}

/* Hidden on desktop; mobile gets an extra obvious exit control */
.lightbox-mobile-close {
  display:none;
}

@media (max-width:640px) {
  .lightbox-shell {
    padding-top:calc(58px + env(safe-area-inset-top)) !important;
    padding-bottom:calc(18px + env(safe-area-inset-bottom)) !important;
  }

  /* Keep X clearly inside the usable iPhone safe area */
  .lightbox-close {
    position:fixed !important;
    top:calc(10px + env(safe-area-inset-top)) !important;
    right:max(10px, env(safe-area-inset-right)) !important;
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    min-height:46px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:30px !important;
    line-height:1 !important;
    color:#f0e8dc !important;
    background:rgba(0,0,0,.78) !important;
    border:1px solid rgba(210,183,143,.55) !important;
    z-index:9999 !important;
  }

  .lightbox-mobile-close {
    display:block !important;
    grid-column:1 / -1;
    justify-self:center;
    margin-top:10px;
    min-width:120px;
    min-height:42px;
    padding:0 20px;
    color:#ddd5ca;
    background:#090a0a;
    border:1px solid rgba(210,183,143,.45);
    text-transform:uppercase;
    letter-spacing:.12em;
    font-size:11px;
    font-weight:700;
    cursor:pointer;
    z-index:30;
  }

  .lightbox-mobile-close:active,
  .lightbox-close:active {
    background:rgba(178,138,84,.14) !important;
  }

  /* Avoid photo/navigation covering close controls */
  .lightbox-figure {
    min-height:0 !important;
  }

  .lightbox-figure img {
    max-height:calc(100vh - 175px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  }
}

/* Landscape phone: keep exit visible even with little vertical space */
@media (max-height:500px) and (orientation:landscape) {
  .lightbox-close {
    top:calc(6px + env(safe-area-inset-top)) !important;
    right:max(8px, env(safe-area-inset-right)) !important;
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    font-size:26px !important;
  }

  .lightbox-shell {
    padding-top:calc(48px + env(safe-area-inset-top)) !important;
    padding-bottom:8px !important;
  }

  .lightbox-mobile-close {
    min-height:36px;
    margin-top:4px;
  }

  .lightbox-figure img {
    max-height:calc(100vh - 100px - env(safe-area-inset-top)) !important;
  }
}


/* ==========================================================
   V39 — TAP IMAGE TO CLOSE
   ========================================================== */
@media (max-width:640px),
       (max-height:500px) and (orientation:landscape) {
  .lightbox-figure img {
    cursor:pointer !important;
  }
}


/* ==========================================================
   V40 — DESKTOP LIGHTBOX CLOSE X
   ========================================================== */

/* Keep a clearly visible close button in the upper-right corner
   on desktop as well as mobile. */
@media (min-width:641px) {
  .lightbox-close {
    position:fixed !important;
    top:20px !important;
    right:22px !important;
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    min-height:46px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 !important;
    margin:0 !important;
    font-size:30px !important;
    line-height:1 !important;
    color:#f0e8dc !important;
    background:rgba(0,0,0,.72) !important;
    border:1px solid rgba(210,183,143,.48) !important;
    z-index:9999 !important;
    cursor:pointer !important;
    opacity:1 !important;
    visibility:visible !important;
    transition:background .18s ease,border-color .18s ease,color .18s ease !important;
  }

  .lightbox-close:hover {
    color:#fff !important;
    background:rgba(178,138,84,.13) !important;
    border-color:rgba(210,183,143,.82) !important;
  }
}

/* V41 — Brevo newsletter */
.newsletter-form--brevo{display:block;max-width:560px}
.newsletter-email-row{display:grid;grid-template-columns:1fr auto;gap:10px}
.newsletter-form--brevo input[type="email"]{width:100%;min-height:48px;border:1px solid rgba(190,181,169,.24);background:#050606;color:#ddd5ca;padding:0 16px;outline:none;letter-spacing:.08em}
.newsletter-form--brevo input[type="email"]:focus{border-color:rgba(210,183,143,.65)}
.newsletter-consent{display:flex;align-items:flex-start;gap:10px;margin-top:16px;color:#918b84;font-size:12px;line-height:1.5;cursor:pointer}
.newsletter-consent input{margin-top:3px;flex:0 0 auto}
.newsletter-consent a,.newsletter-brevo-note a{color:#bca784;text-decoration:underline;text-underline-offset:2px}
.newsletter-small{margin:8px 0 16px!important;color:#6f6b65!important;font-size:11px!important}
.newsletter-captcha{margin:12px 0 16px;overflow:hidden;max-width:100%}
.newsletter-brevo-note{margin:0!important;max-width:540px;color:#68645f!important;font-size:10px!important;line-height:1.5}
.input--hidden{position:absolute!important;left:-9999px!important;opacity:0!important;pointer-events:none!important}
.newsletter-message{margin:0 0 14px;padding:11px 13px;border:1px solid;font-size:12px;line-height:1.45}
.newsletter-message--success{color:#b8d8c2;border-color:rgba(82,150,105,.45);background:rgba(82,150,105,.08)}
.newsletter-message--error{color:#dfaaaa;border-color:rgba(170,75,75,.45);background:rgba(170,75,75,.08)}
.sib-form-message-panel{display:none!important}
@media(max-width:760px){.newsletter-email-row{grid-template-columns:1fr}.newsletter-email-row .btn{width:100%}}
@media(max-width:360px){.newsletter-captcha{transform:scale(.88);transform-origin:left top;width:114%;margin-bottom:-4px}}


/* ==========================================================
   V42 — BREVO SUBMIT FIX
   ========================================================== */

/* Brevo's structural wrappers are retained for JS compatibility,
   but visually inherit the Signs of Wear newsletter design. */
.sow-brevo-shell,
.sow-brevo-shell .sib-form-container,
.sow-brevo-shell #sib-container {
  margin:0 !important;
  padding:0 !important;
  width:100% !important;
  max-width:560px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  text-align:left !important;
}

.sow-brevo-shell {
  font-family:inherit !important;
}

.sow-brevo-shell .sib-form-message-panel {
  max-width:560px !important;
}

/* Never visually disable the submit button unless Brevo itself is processing */
.newsletter-form--brevo button[type="submit"] {
  pointer-events:auto;
}


/* ==========================================================
   V43 — NEWSLETTER VISUAL POLISH
   ========================================================== */

/* Keep Brevo functional, but visually fully under our control */
.sow-brevo-shell,
.sow-brevo-shell .sib-form-container,
.sow-brevo-shell #sib-container,
.newsletter-form--brevo {
  width:100% !important;
  max-width:none !important;
}

/* Email + button */
.newsletter-email-row {
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 132px !important;
  gap:0 !important;
  width:100% !important;
  max-width:560px !important;
  margin-top:4px !important;
}

.newsletter-form--brevo input[type="email"] {
  box-sizing:border-box !important;
  width:100% !important;
  height:50px !important;
  min-height:50px !important;
  margin:0 !important;
  padding:0 16px !important;
  border:1px solid rgba(210,183,143,.46) !important;
  border-right:0 !important;
  border-radius:0 !important;
  background:#070808 !important;
  color:#e7e0d7 !important;
  font-family:inherit !important;
  font-size:14px !important;
  letter-spacing:.04em !important;
  box-shadow:none !important;
}

.newsletter-form--brevo input[type="email"]::placeholder {
  color:#77716a !important;
  font-family:inherit !important;
  letter-spacing:.08em !important;
}

.newsletter-form--brevo button[type="submit"] {
  box-sizing:border-box !important;
  width:132px !important;
  height:50px !important;
  min-height:50px !important;
  margin:0 !important;
  padding:0 14px !important;
  border:1px solid rgba(210,183,143,.7) !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#d8c9b4 !important;
  font-family:inherit !important;
  font-size:11px !important;
  font-weight:700 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  text-align:center !important;
  box-shadow:none !important;
  cursor:pointer !important;
}

.newsletter-form--brevo button[type="submit"]:hover {
  background:rgba(178,138,84,.10) !important;
  color:#f1e7d8 !important;
}

/* Consent line */
.newsletter-consent {
  display:grid !important;
  grid-template-columns:18px minmax(0,1fr) !important;
  align-items:start !important;
  column-gap:10px !important;
  width:100% !important;
  max-width:560px !important;
  margin:17px 0 0 !important;
  padding:0 !important;
  color:#8c867f !important;
  font-family:inherit !important;
  font-size:11px !important;
  line-height:1.55 !important;
}

/* Undo Brevo's replacement-checkbox hiding */
.newsletter-consent input[type="checkbox"],
.newsletter-form--brevo #OPT_IN {
  appearance:auto !important;
  -webkit-appearance:checkbox !important;
  position:static !important;
  opacity:1 !important;
  visibility:visible !important;
  display:block !important;
  width:15px !important;
  height:15px !important;
  margin:2px 0 0 !important;
  padding:0 !important;
  accent-color:#b79a71 !important;
  cursor:pointer !important;
}

.newsletter-consent span {
  display:block !important;
  min-width:0 !important;
}

.newsletter-consent a,
.newsletter-brevo-note a {
  color:#bda47f !important;
}

.newsletter-small {
  max-width:560px !important;
  margin:7px 0 17px 28px !important;
  color:#6d6862 !important;
  font-family:inherit !important;
  font-size:10px !important;
  line-height:1.45 !important;
}

/* CAPTCHA */
.newsletter-captcha {
  width:100% !important;
  max-width:560px !important;
  margin:0 0 16px !important;
  padding:0 !important;
  overflow:visible !important;
}

.newsletter-captcha .g-recaptcha {
  display:inline-block !important;
}

/* Brevo privacy note */
.newsletter-brevo-note {
  width:100% !important;
  max-width:560px !important;
  margin:0 !important;
  padding:0 !important;
  color:#625e59 !important;
  font-family:inherit !important;
  font-size:9px !important;
  line-height:1.55 !important;
}

/* Remove Brevo artifacts that are irrelevant in our custom layout */
.sow-brevo-shell .entry__error,
.sow-brevo-shell .entry__specification,
.sow-brevo-shell .checkbox_tick_positive,
.sow-brevo-shell .sib-form-block__button-with-loader .progress-indicator__icon {
  display:none !important;
}

/* Keep success/error feedback elegant */
.newsletter-message {
  width:100% !important;
  max-width:560px !important;
  box-sizing:border-box !important;
}

/* Mobile */
@media (max-width:760px) {
  .newsletter-email-row {
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  .newsletter-form--brevo input[type="email"] {
    border-right:1px solid rgba(210,183,143,.46) !important;
  }

  .newsletter-form--brevo button[type="submit"] {
    width:100% !important;
  }

  .newsletter-small {
    margin-left:25px !important;
  }
}

/* Very narrow phones: scale CAPTCHA only, not the whole form */
@media (max-width:350px) {
  .newsletter-captcha {
    transform:scale(.88) !important;
    transform-origin:left top !important;
    width:114% !important;
    margin-bottom:-3px !important;
  }
}


/* ==========================================================
   V44 — NATIVE BREVO SUBMIT
   ========================================================== */
.newsletter-form--brevo button[type="submit"]:disabled {
  opacity:.62 !important;
  cursor:wait !important;
}


/* ==========================================================
   V45 — NEWSLETTER CONFIRMATION PAGES
   ========================================================== */
.newsletter-result-page {
  min-height:100vh;
  margin:0;
  background:#050606;
  color:#e7e2dc;
}

.newsletter-result-main {
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:40px 24px;
  box-sizing:border-box;
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,.025), transparent 38%),
    linear-gradient(180deg, #080909 0%, #040505 100%);
}

.newsletter-result-card {
  width:min(620px, 100%);
  box-sizing:border-box;
  padding:64px 62px;
  border:1px solid rgba(255,255,255,.11);
  background:rgba(0,0,0,.16);
}

.newsletter-result-eyebrow {
  margin-bottom:18px;
  color:#b89a70;
  font-size:11px;
  font-weight:600;
  letter-spacing:.30em;
}

.newsletter-result-card h1 {
  margin:0;
  max-width:520px;
  color:#f0ece7;
  font-size:clamp(42px, 7vw, 70px);
  line-height:.96;
  letter-spacing:.025em;
}

.newsletter-result-rule {
  width:52px;
  height:1px;
  margin:30px 0;
  background:#a98553;
}

.newsletter-result-card p {
  max-width:500px;
  margin:0 0 30px;
  color:#918c85;
  font-size:15px;
  line-height:1.75;
}

.newsletter-result-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 22px;
  text-decoration:none;
}

@media (max-width:620px) {
  .newsletter-result-main {
    padding:20px;
  }
  .newsletter-result-card {
    padding:42px 30px;
  }
  .newsletter-result-card h1 {
    font-size:42px;
  }
  .newsletter-result-button {
    width:100%;
    box-sizing:border-box;
  }
}