.electrrocity-page { overflow-x: hidden; }
.electro-hero { min-height: 100svh; position: relative; display: grid; place-items: center; overflow: hidden; }
.electro-hero-image { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9, 8, 6, .88), rgba(9, 8, 6, .36) 48%, rgba(9, 8, 6, .84)), url("assets/hero-clean.jpg") center 32% / cover; filter: saturate(.74) contrast(1.12); }
.electro-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 48%, transparent 0 18%, rgba(9, 8, 6, .72) 82%), linear-gradient(transparent 60%, var(--ink)); }
.electro-grid { position: absolute; inset: 0; opacity: .52; background: linear-gradient(90deg, transparent 0 49.9%, rgba(227, 160, 45, .22) 50%, transparent 50.1%), repeating-linear-gradient(90deg, transparent 0 8vw, rgba(227, 160, 45, .08) calc(8vw + 1px)); }
.electro-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; width: min(90vw, 1060px); margin-top: 2rem; text-align: center; }
.signal-label { margin: 0 0 1.4rem; color: var(--gold); font-size: .64rem; letter-spacing: .36em; }
.electro-wordmark { display: flex; align-items: center; justify-content: center; width: min(88vw, 840px); margin: 0; filter: drop-shadow(0 0 28px rgba(227, 160, 45, .22)); }
.electro-wordmark img { display: block; width: auto; object-fit: contain; }
.electro-text { height: clamp(42px, 7vw, 92px); max-width: 37%; }
.electro-emblem { height: clamp(68px, 11vw, 140px); margin: 0 -.65rem; }
.electro-audio { margin: 1rem 0 1.4rem; font-family: "Helvetica Neue", Helvetica, sans-serif; color: var(--paper); font-size: clamp(2.7rem, 7vw, 6.6rem); font-weight: 300; line-height: .8; letter-spacing: .13em; text-transform: lowercase; text-shadow: 0 0 24px rgba(255, 255, 255, .08); }
.powered-by { margin: 0 0 1.45rem; color: var(--gold); font-size: .56rem; letter-spacing: .42em; }
.surrge-signature { display: block; width: min(66vw, 420px); margin-bottom: 1.7rem; filter: drop-shadow(0 0 18px rgba(239, 90, 36, .12)); }
.electro-cta { margin-top: 2.3rem; }
.electro-index { position: absolute; z-index: 2; bottom: 8vh; margin: 0; color: var(--paper); font-family: "Helvetica Neue", Helvetica, sans-serif; font-size: .64rem; letter-spacing: .32em; text-transform: lowercase; }
.electro-index-left { left: 5vw; color: var(--hot); }
.electro-index-right { right: 5vw; }
.electro-services { width: min(1180px, 90vw); margin: 0 auto; padding: 6rem 0 7rem; }
.electro-services h2 { max-width: 700px; margin-bottom: 3rem; }
.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); }
.service-grid article { min-height: 250px; padding: 1.65rem; display: flex; flex-direction: column; background: #0d0b09; }
.service-grid p { margin: 0; color: var(--gold); font-size: .56rem; letter-spacing: .16em; }
.service-grid h3 { margin: auto 0 .7rem; font-family: Georgia, serif; font-size: 1.9rem; font-weight: 400; }
.service-grid span { color: var(--muted); font-size: .78rem; line-height: 1.6; }
.studio-proof { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, .88fr); gap: clamp(1.5rem, 6vw, 7rem); align-items: center; width: min(1180px, 90vw); margin: 0 auto; padding: 5rem 0 7rem; }
.studio-proof figure { margin: 0; border: 1px solid var(--line); overflow: hidden; }
.studio-proof img { display: block; width: 100%; height: 100%; object-fit: cover; filter: sepia(.18) saturate(.8) contrast(1.08); }
.studio-proof-primary { height: min(54vw, 40rem); }
.studio-proof-copy { position: relative; z-index: 1; }
.studio-proof-copy h2 { margin: 1rem 0 1.5rem; }
.studio-proof-copy > p:not(.section-label) { color: var(--muted); line-height: 1.8; }
.studio-proof-copy dl { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2rem 0 0; }
.studio-proof-copy dl div { padding-top: .8rem; border-top: 1px solid var(--line); }
.studio-proof-copy dt { color: var(--gold); font-family: "Surrge", sans-serif; font-size: 1.2rem; letter-spacing: .08em; }
.studio-proof-copy dd { margin: .45rem 0 0; color: var(--muted); font-size: .68rem; line-height: 1.5; }
.studio-proof-secondary { position: absolute; right: 0; bottom: 1rem; width: min(25vw, 17rem); height: min(34vw, 24rem); transform: translateX(14%); }
.booking { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, .72fr); gap: clamp(2rem, 8vw, 9rem); align-items: center; width: min(1180px, 90vw); margin: 0 auto; padding: 4rem 0 7rem; }
.booking-copy h2 { max-width: 620px; margin: 1rem 0 1.5rem; }
.booking-copy > p:not(.section-label) { max-width: 560px; color: var(--muted); line-height: 1.8; }
.booking-note { color: var(--gold) !important; font-size: .72rem; letter-spacing: .04em; }
.booking-contact { display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; margin-top: 1.6rem; }
.booking-contact a { color: var(--paper); font-size: .72rem; text-decoration: none; border-bottom: 1px solid var(--hot); padding-bottom: .25rem; }
.booking-card { display: flex; flex-direction: column; padding: 2rem; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(227, 160, 45, .13), rgba(9, 8, 6, .92) 70%); box-shadow: 0 22px 60px rgba(0, 0, 0, .24); }
.booking-card label { color: var(--gold); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; }
.booking-card input, .booking-card textarea { width: 100%; margin: .45rem 0 1rem; padding: .8rem .85rem; border: 1px solid rgba(227, 160, 45, .42); border-radius: 0; color: var(--paper); background: #0d0b09; font: inherit; font-size: .82rem; box-sizing: border-box; }
.booking-card textarea { resize: vertical; line-height: 1.5; }
.booking-card select { width: 100%; margin: .8rem 0 1.4rem; padding: .95rem 1rem; border: 1px solid rgba(227, 160, 45, .55); border-radius: 0; color: var(--paper); background: #0d0b09; font: inherit; font-size: .85rem; }
.booking-rate { color: var(--muted); font-size: .72rem; }
.booking-total { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin: 2rem 0 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.booking-total span { color: var(--muted); font-size: .7rem; }
.booking-total strong { color: var(--paper); font-family: "Surrge", sans-serif; font-size: 2.5rem; font-weight: 400; letter-spacing: .04em; }
.booking-card small { margin-top: 1rem; color: #82745f; font-size: .63rem; line-height: 1.5; }
.demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, .72fr); gap: clamp(2rem, 8vw, 9rem); align-items: center; width: min(1180px, 90vw); margin: 0 auto; padding: 0 0 7rem; }
.demo h2 { margin: 1rem 0 0; }
.demo-player { padding: 1.8rem; border: 1px solid var(--line); background: #0d0b09; }
.demo-player p { margin: 0 0 1rem; color: var(--gold); font-size: .62rem; letter-spacing: .15em; text-transform: uppercase; }
.demo-player audio { display: block; width: 100%; accent-color: var(--hot); }
.demo-player small { display: block; margin-top: 1rem; color: #82745f; font-size: .65rem; line-height: 1.5; }
.pricing { position: relative; padding: 6rem max(5vw, calc((100vw - 1180px) / 2)) 7rem; background: linear-gradient(135deg, #160a05, #090806 55%); border-block: 1px solid var(--line); }
.pricing-heading { display: flex; justify-content: space-between; gap: 2rem; align-items: end; margin: 1rem 0 3rem; }
.pricing-heading h2 { max-width: 620px; margin: 0; }
.pricing-heading p { max-width: 330px; margin: 0; color: var(--muted); line-height: 1.65; }
.pricing-table { display: grid; gap: 1px; background: var(--line); }
.pricing-row { display: grid; grid-template-columns: 1fr 1fr .48fr; gap: 1rem; align-items: center; min-height: 86px; padding: 1rem 1.35rem; color: var(--paper); background: rgba(9, 8, 6, .9); text-decoration: none; transition: background .2s ease, color .2s ease; }
.pricing-row:not(.pricing-head):hover, .pricing-row:not(.pricing-head):focus-visible { color: var(--paper); background: rgba(239, 90, 36, .16); }
.pricing-row b { display: block; font-size: .82rem; font-weight: 400; }
.pricing-row small { display: block; margin-top: .3rem; color: var(--muted); font-size: .62rem; letter-spacing: .08em; }
.pricing-row strong { color: var(--gold); font-family: "Surrge", sans-serif; font-size: 2rem; font-weight: 400; letter-spacing: .04em; }
.pricing-head { min-height: 42px; color: var(--gold); background: #17100b; font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; }
.pricing-featured { box-shadow: inset 3px 0 0 var(--hot); }
.price-card { min-height: 390px; padding: 2rem; display: flex; flex-direction: column; background: rgba(9, 8, 6, .86); }
.price-card.featured-price { background: linear-gradient(160deg, rgba(239, 90, 36, .23), rgba(9, 8, 6, .94) 65%); box-shadow: inset 0 2px 0 var(--hot); }
.price-tier { margin: 0; color: var(--gold); font-size: .57rem; letter-spacing: .16em; }
.price-card h3 { margin: auto 0 .4rem; font-family: Georgia, serif; font-size: 2.25rem; font-weight: 400; }
.price { margin: 0; color: var(--paper); font-family: "Surrge", sans-serif; font-size: 3.4rem; letter-spacing: .04em; }
.price-card ul { min-height: 5.5rem; margin: 1.6rem 0; padding: 0; list-style: none; color: var(--muted); font-size: .75rem; line-height: 1.8; }
.price-card li::before { content: "+"; margin-right: .65rem; color: var(--hot); }
.price-card .button { width: fit-content; }
.stem-pricing { display: grid; grid-template-columns: 1.35fr repeat(3, 1fr); gap: 1px; margin-top: 1px; background: var(--line); }
.stem-pricing > div { min-height: 230px; padding: 1.6rem; background: #0d0b09; }
.stem-pricing-intro { background: linear-gradient(145deg, rgba(227, 160, 45, .14), #0d0b09 72%) !important; }
.stem-pricing h3 { margin: 1rem 0; font-family: Georgia, serif; font-size: 1.8rem; font-weight: 400; line-height: 1.02; }
.stem-pricing-intro > p:last-child { max-width: 260px; margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.6; }
.stem-tier { display: flex; flex-direction: column; justify-content: end; }
.stem-tier p { margin: 0; color: var(--gold); font-size: .56rem; letter-spacing: .14em; }
.stem-tier strong { margin: auto 0 .4rem; font-family: "Surrge", sans-serif; font-size: 3rem; font-weight: 400; letter-spacing: .04em; }
.stem-tier span { color: var(--muted); font-size: .74rem; }
.pricing-note { margin: 1.6rem 0 0; color: #82745f; font-size: .72rem; line-height: 1.6; }
.process { width: min(1180px, 90vw); margin: 0 auto; padding: 6rem 0 7rem; }
.process h2 { margin: 1rem 0 3rem; }
.process ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; padding: 0; margin: 0; list-style: none; }
.process li { border-top: 1px solid var(--line); padding-top: 1rem; }
.process li span { display: block; color: var(--hot); font-size: .66rem; letter-spacing: .18em; }
.process li strong { display: block; margin: 2rem 0 .7rem; font-family: Georgia, serif; font-size: 1.5rem; font-weight: 400; }
.process li p { margin: 0; color: var(--muted); font-size: .79rem; line-height: 1.65; }
@media (max-width: 760px) {
  .electro-hero { min-height: 43rem; }
  .electro-hero-image { background-position: 58% center; }
  .electro-copy { margin-top: 3rem; }
  .signal-label { font-size: .55rem; letter-spacing: .28em; }
  .electro-wordmark { width: calc(100vw - 2.5rem); }
  .electro-text { height: clamp(27px, 8vw, 40px); }
  .electro-emblem { height: clamp(50px, 14vw, 70px); margin: 0 -.35rem; }
  .electro-audio { margin-top: 1.3rem; font-size: clamp(3rem, 14vw, 4.8rem); }
  .surrge-signature { width: min(80vw, 340px); }
  .electro-index { bottom: 2rem; font-size: .55rem; }
  .electro-services { padding: 4rem 0; }
  .service-grid { grid-template-columns: 1fr; }
  .service-grid article { min-height: 190px; }
  .studio-proof { grid-template-columns: 1fr; gap: 2rem; padding: 4.5rem 0 5.5rem; }
  .studio-proof-primary { height: 115vw; }
  .studio-proof-secondary { position: relative; right: auto; bottom: auto; width: 50%; height: 74vw; margin: -7rem 0 0 auto; transform: translateX(-8%); }
  .booking { grid-template-columns: 1fr; gap: 2.5rem; padding: 3.5rem 0 5rem; }
  .booking-card { padding: 1.4rem; }
  .demo { grid-template-columns: 1fr; gap: 2rem; padding-bottom: 5rem; }
  .pricing { padding-block: 4.5rem; }
  .pricing-heading { display: block; }
  .pricing-heading p { margin-top: 1.25rem; }
  .pricing-row { grid-template-columns: 1fr 1fr; min-height: 96px; padding: 1rem; }
  .pricing-row strong { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
  .pricing-head { grid-template-columns: 1fr 1fr .5fr; }
  .stem-pricing { grid-template-columns: 1fr; }
  .stem-pricing > div { min-height: 165px; }
  .stem-tier strong { margin: auto 0 .3rem; }
  .process { padding: 4.5rem 0; }
  .process ol { grid-template-columns: 1fr; gap: 1.4rem; }
  .process li strong { margin-top: 1rem; }
}