/* Homepage only: quieter presentation, complete portrait, expandable archives. */
.home-details{margin-top:22px;border-top:1px solid currentColor;border-bottom:1px solid currentColor;border-color:#a3a3a3}
.home-details+ .home-details{margin-top:0;border-top:0}
.home-details>summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;font:600 13px var(--tech);letter-spacing:.06em;text-transform:uppercase}
.home-details>summary::-webkit-details-marker{display:none}
.home-details>summary::after{content:'+';font:400 24px/1 var(--tech)}
.home-details[open]>summary::after{content:'−'}
.home-details>summary:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.home-details .platforms{border-bottom:0;padding-top:0}
.home-details .mixes-label{margin-top:5px}
.home-details .mixes{border-bottom:0}
.release-info .button{color:#111;font-size:12px}
.release-info .button-row{align-items:center;gap:28px}
.about-photo{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;box-shadow:none}
.photo-note{gap:20px;line-height:1.6;margin-top:14px}
.press-more{margin-top:0}
.records{margin-top:0}
.hero-visual::after,.crosshair{display:none}
.hero-visual::before{opacity:.2}
.portrait-frame img:hover{transform:none}
@media(max-width:640px){
.about-photo{width:100%;height:auto;aspect-ratio:auto;object-position:center;box-shadow:none}
.photo-note{font-size:9px;gap:14px}
.about-grid{gap:30px}
.home-details>summary{font-size:12px;padding:20px 0}
.section{padding:48px 0}
.section-heading{margin-bottom:25px}
.hero-foot .disciplines{font-size:8px}
}

/* Match the homepage Music Store CTA to the live store Add to bag control. */
@property --home-button-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.hero-copy a.button[href="/music/"],
.hero-copy a.button.outline[href="https://dtevents.vip"] {
  border: 1px solid transparent;
  border-radius: 4px;
  background:
    linear-gradient(#111b2b, #111b2b) padding-box,
    conic-gradient(
      from var(--home-button-angle),
      #00dcff 0deg,
      #4d86ff 72deg,
      #8264ff 130deg,
      #f801ff 205deg,
      #a52bff 270deg,
      #00dcff 360deg
    ) border-box;
  color: #ffffff;
  box-shadow: 0 0 7px #4d86ff55;
  animation: home-button-border-flow 8s linear infinite;
}

.hero-copy a.button[href="/music/"]:hover,
.hero-copy a.button.outline[href="https://dtevents.vip"]:hover {
  background:
    linear-gradient(#111b2b, #111b2b) padding-box,
    conic-gradient(
      from var(--home-button-angle),
      #00dcff 0deg,
      #4d86ff 72deg,
      #8264ff 130deg,
      #f801ff 205deg,
      #a52bff 270deg,
      #00dcff 360deg
    ) border-box;
  color: #ffffff;
  border-color: transparent;
  filter: none;
}

@keyframes home-button-border-flow {
  to {
    --home-button-angle: 360deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-copy a.button[href="/music/"],
  .hero-copy a.button.outline[href="https://dtevents.vip"] {
    animation: none;
  }
}

/* Compact service titles; complete descriptions remain available on tap. */
#services .service-list{border-top:1px solid #333;align-self:start}
.service-compact{border-bottom:1px solid #333}
.service-compact>summary{display:grid;grid-template-columns:24px minmax(0,1fr) 18px;gap:12px;align-items:center;min-height:58px;padding:14px 0;cursor:pointer;list-style:none}
.service-compact>summary::-webkit-details-marker{display:none}
.service-compact>summary:focus-visible{outline:2px solid #ddd;outline-offset:4px}
.service-compact .service-number{font:500 11px var(--tech);color:#777}
.service-compact h3{font:600 18px/1.25 var(--tech);margin:0;overflow-wrap:break-word}
.service-expand{position:relative;display:block;width:14px;height:14px;color:#bbb}
.service-expand::before,.service-expand::after{content:'';position:absolute;background:currentColor;left:1px;top:6px;width:12px;height:1px}
.service-expand::after{transform:rotate(90deg)}
.service-compact[open] .service-expand::after{transform:none}
.service-compact>p{margin:0;padding:0 30px 16px 36px;color:#aaa;font-size:12px;line-height:1.7}
@media(max-width:900px){#services .experience-grid{gap:26px}}
@media(max-width:640px){
#services .experience-grid{gap:24px}
#services .metrics{margin-top:28px;padding-top:20px}
.service-compact>summary{grid-template-columns:20px minmax(0,1fr) 14px;gap:10px;min-height:52px;padding:13px 0}
.service-compact h3{font-size:16px;line-height:1.3}
.service-compact .service-number{font-size:10px}
.service-compact>p{padding:0 24px 14px 30px;font-size:12px}
}
/* Homepage section color rhythm: distinct bands without changing the store styling. */
main > .world-section,
main > .section {
  position: relative;
  isolation: isolate;
}

main > .world-section::before,
main > .section::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  height: 7px;
  background: linear-gradient(90deg, #10d8f2 0%, #8074ff 50%, #f22bdc 100%);
  box-shadow: 0 0 24px rgba(128, 116, 255, .28);
  pointer-events: none;
}

#world {
  background:
    radial-gradient(circle at 12% 12%, rgba(16, 216, 242, .12), transparent 34%),
    linear-gradient(135deg, #08131e 0%, #0e1022 100%);
}

#services {
  background:
    radial-gradient(circle at 86% 18%, rgba(128, 116, 255, .13), transparent 35%),
    linear-gradient(135deg, #0b1422 0%, #151022 100%);
}

#company {
  background:
    radial-gradient(circle at 18% 80%, rgba(242, 43, 220, .10), transparent 36%),
    linear-gradient(135deg, #151126 0%, #101321 100%);
}

#about {
  background:
    radial-gradient(circle at 84% 20%, rgba(16, 216, 242, .08), transparent 34%),
    linear-gradient(135deg, #0b1420 0%, #151020 100%);
}

#mobiii {
  background:
    radial-gradient(circle at 18% 30%, rgba(128, 116, 255, .14), transparent 38%),
    linear-gradient(135deg, #151027 0%, #0e1723 100%);
}

#contact {
  background:
    radial-gradient(circle at 78% 26%, rgba(242, 43, 220, .14), transparent 38%),
    linear-gradient(135deg, #141127 0%, #091722 100%);
}

@media (max-width: 640px) {
  main > .world-section::before,
  main > .section::before {
    height: 5px;
  }
}