/* ===============================
       4AM Services UX Upgrade
       Only for services.html
       =============================== */

    .services-page .page-shell {
      width: min(1180px, calc(100% - 32px));
      margin: 0 auto;
      padding: 80px 0 70px;
    }

    .services-page .page-intro {
      max-width: 760px;
      margin-bottom: 30px;
    }

    .services-page .page-intro h1 {
      margin: 10px 0 14px;
      font-size: clamp(48px, 7vw, 86px);
      line-height: 0.92;
      letter-spacing: -0.07em;
    }

    .services-page .page-intro p:not(.eyebrow) {
      max-width: 650px;
      font-size: clamp(17px, 2vw, 22px);
      line-height: 1.45;
      color: rgba(244, 241, 234, 0.74);
    }

    .service-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 330px;
      gap: 24px;
      align-items: start;
    }

    .service-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
    }

    .service-card,
    .session-summary {
      border: 1px solid rgba(255, 255, 255, 0.13);
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
        rgba(9, 9, 13, 0.86);
      border-radius: 24px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
    }

    .service-card {
      min-height: 250px;
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
    }

    .service-card:hover {
      transform: translateY(-2px);
      border-color: rgba(255, 255, 255, 0.24);
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
        rgba(11, 11, 17, 0.94);
    }

    .service-card h2,
    .session-summary h2 {
      margin: 0;
      font-size: 20px;
      line-height: 1.1;
      letter-spacing: -0.03em;
    }

    .service-card p {
      margin: -6px 0 0;
      color: rgba(244, 241, 234, 0.64);
      font-size: 14px;
      line-height: 1.55;
    }

    .price-pill {
      width: fit-content;
      display: inline-flex;
      align-items: center;
      min-height: 32px;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      background: rgba(255, 255, 255, 0.06);
      color: #f4f1ea;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .price-pill.free {
      background: rgba(80, 255, 160, 0.10);
      border-color: rgba(80, 255, 160, 0.25);
      color: #bdfedc;
    }

    .service-field-group {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-top: auto;
    }

    .service-label {
      display: flex;
      flex-direction: column;
      gap: 8px;
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(244, 241, 234, 0.58);
    }

    .service-label input {
      width: 100%;
      min-height: 48px;
      padding: 0 14px;
      border-radius: 14px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      background: rgba(0, 0, 0, 0.28);
      color: #f4f1ea;
      outline: none;
      font-size: 14px;
    }

    .service-label input:focus {
      border-color: rgba(255, 255, 255, 0.34);
      box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.045);
    }

    .option-row {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-top: auto;
    }

    .option-btn,
    .action-btn,
    .primary-link,
    .reset-btn {
      min-height: 46px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.17);
      background: rgba(255, 255, 255, 0.055);
      color: #f4f1ea;
      cursor: pointer;
      font-weight: 800;
      font-size: 11px;
      line-height: 1;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      transition: transform 200ms ease, border-color 200ms ease, background 200ms ease, color 200ms ease;
    }

    .option-btn {
      display: grid;
      gap: 6px;
      place-items: center;
      padding: 12px 10px;
      line-height: 1.2;
    }

    .option-btn span {
      display: block;
      color: rgba(244, 241, 234, 0.58);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.06em;
    }

    .option-btn:hover,
    .action-btn:hover,
    .primary-link:hover,
    .reset-btn:hover {
      transform: translateY(-1px);
      border-color: rgba(255, 255, 255, 0.35);
      background: rgba(255, 255, 255, 0.11);
    }

    .option-btn.is-selected,
    .action-btn.is-selected {
      background: #f4f1ea;
      color: #050506;
      border-color: #f4f1ea;
    }

    .option-btn.is-selected span {
      color: rgba(5, 5, 6, 0.68);
    }

    .action-btn {
      width: fit-content;
      padding: 0 18px;
      margin-top: auto;
    }

    .check-list {
      display: grid;
      gap: 10px;
      margin-top: auto;
    }

    .check-list label {
      display: grid;
      grid-template-columns: 22px 1fr;
      align-items: center;
      gap: 12px;
      min-height: 48px;
      padding: 12px 14px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 16px;
      background: rgba(0, 0, 0, 0.18);
      color: rgba(244, 241, 234, 0.82);
      font-size: 13px;
      line-height: 1.25;
      cursor: pointer;
      transition: border-color 200ms ease, background 200ms ease;
    }

    .check-list label:has(input:checked) {
      border-color: rgba(244, 241, 234, 0.42);
      background: rgba(255, 255, 255, 0.075);
    }

    .check-list input {
      width: 18px;
      height: 18px;
      accent-color: #f4f1ea;
    }

    .marketing-name {
      display: block;
      color: #f4f1ea;
      font-weight: 700;
    }

    .marketing-desc {
      display: block;
      margin-top: 3px;
      color: rgba(244, 241, 234, 0.56);
      font-size: 12px;
    }

    .marketing-price {
      display: inline-block;
      margin-top: 6px;
      color: #f4f1ea;
      font-size: 12px;
      font-weight: 800;
    }

    .session-summary {
      position: sticky;
      top: 96px;
      padding: 24px;
    }

    .session-summary p {
      margin: 10px 0 18px;
      color: rgba(244, 241, 234, 0.58);
      font-size: 13px;
      line-height: 1.45;
    }

    #summaryList {
      list-style: none;
      padding: 0;
      margin: 0 0 18px;
      display: grid;
      gap: 11px;
    }

    #summaryList li {
      padding: 11px 12px;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.055);
      color: rgba(244, 241, 234, 0.84);
      font-size: 13px;
      line-height: 1.35;
    }

    .summary-totals {
      display: grid;
      gap: 10px;
      margin: 0 0 18px;
      padding: 14px;
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.055);
    }

    .summary-total-row {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      color: rgba(244, 241, 234, 0.76);
      font-size: 13px;
      line-height: 1.3;
    }

    .summary-total-row strong {
      color: #f4f1ea;
      white-space: nowrap;
    }

    .summary-discount {
      color: #bdfedc;
    }

    .primary-link,
    .reset-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      padding: 0 18px;
      text-align: center;
      text-decoration: none;
    }

    .primary-link {
      background: #f4f1ea;
      color: #050506;
      border-color: #f4f1ea;
    }

    .reset-btn {
      margin-top: 10px;
      background: transparent;
      color: rgba(244, 241, 234, 0.82);
    }

    .summary-note {
      margin-top: 14px;
      color: rgba(244, 241, 234, 0.48);
      font-size: 12px;
      line-height: 1.45;
    }

    /* Calendar icon white fix */
    .service-label input[type="date"] {
      color-scheme: dark;
    }

    .service-label input[type="date"]::-webkit-calendar-picker-indicator {
      filter: invert(1) brightness(2);
      opacity: 1;
      cursor: pointer;
    }

    .service-label input[type="date"]::-webkit-calendar-picker-indicator:hover {
      opacity: 0.85;
    }

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

      .session-summary {
        position: static;
        order: -1;
      }
    }

    @media (max-width: 720px) {
      .services-page .page-shell {
        width: min(100% - 24px, 1180px);
        padding-top: 54px;
      }

      .service-list {
        grid-template-columns: 1fr;
      }

      .service-card {
        min-height: auto;
        padding: 20px;
      }

      .service-field-group,
      .option-row {
        grid-template-columns: 1fr;
      }

      .action-btn {
        width: 100%;
      }
    }

/* v2026.08.27 selection controls */
.summary-item{display:grid;grid-template-columns:1fr 32px;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.summary-item:last-child{border-bottom:0}.summary-item>span{min-width:0}
.summary-remove{width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#f4f1ea;cursor:pointer;font-size:18px;line-height:1}
.summary-remove:hover,.summary-remove:focus-visible{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.1)}
.summary-empty{padding:8px 0}.option-btn[aria-pressed="true"]{border-color:#f4f1ea;background:#f4f1ea;color:#050506}


/* v1.2 simplified service configurator */
.service-card-featured{border-color:rgba(255,255,255,.22)}
.mix-master-btn{width:100%;justify-content:center}
@media(min-width:901px){.service-list{grid-template-columns:repeat(3,minmax(0,1fr))}.service-card{min-height:290px}}

.tracking-rate-row{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:10px}
.tracking-rate{min-height:52px}
.tracking-rate span{text-transform:uppercase}
@media(max-width:560px){.tracking-rate-row{grid-template-columns:1fr 1fr}}

/* v2.3 — Mix & Master only */
.services-centered-intro{
  max-width:820px!important;
  margin:0 auto 36px!important;
  text-align:center;
}
.services-page .services-centered-intro p:not(.eyebrow){
  max-width:680px;
  margin-left:auto;
  margin-right:auto;
}
.mix-only-section{max-width:780px;margin:0 auto;}
.mix-only-card{
  border:1px solid rgba(255,255,255,.14);
  border-radius:30px;
  background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.018)),rgba(9,9,13,.9);
  box-shadow:0 28px 90px rgba(0,0,0,.28);
  padding:clamp(26px,5vw,52px);
  text-align:center;
}
.mix-only-copy{max-width:610px;margin:0 auto 28px;}
.mix-only-kicker{display:block;margin-bottom:14px;color:rgba(244,241,234,.52);font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;}
.mix-only-copy h2{margin:0 0 14px;font-size:clamp(30px,4.5vw,52px);line-height:1;letter-spacing:-.055em;}
.mix-only-copy p{margin:0;color:rgba(244,241,234,.65);font-size:15px;line-height:1.65;}
.mix-price-button{
  width:min(520px,100%);
  min-height:116px;
  margin:0 auto;
  padding:22px 26px;
  display:grid;
  place-items:center;
  gap:7px;
  border:1px solid #f4f1ea;
  border-radius:24px;
  background:#f4f1ea;
  color:#050506;
  cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.mix-price-button:hover,.mix-price-button:focus-visible{transform:translateY(-3px);box-shadow:0 18px 44px rgba(255,255,255,.12);}
.mix-price-button[aria-expanded="true"]{background:rgba(244,241,234,.92);}
.mix-price-value{font-size:clamp(38px,6vw,62px);font-weight:900;line-height:.9;letter-spacing:-.06em;}
.mix-price-label{font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;}
.producer-choices{margin-top:30px;padding-top:28px;border-top:1px solid rgba(255,255,255,.1);animation:mixReveal .28s ease both;}
.producer-choices-title{margin:0 0 16px;color:rgba(244,241,234,.7);font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;}
.producer-choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.producer-choice{
  min-height:118px;
  padding:20px;
  display:grid;
  place-items:center;
  gap:8px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:20px;
  background:rgba(255,255,255,.035);
  color:#f4f1ea;
  cursor:pointer;
  transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.producer-choice:hover,.producer-choice:focus-visible{transform:translateY(-2px);border-color:rgba(255,255,255,.36);background:rgba(255,255,255,.08);}
.producer-choice.is-selected{border-color:#f4f1ea;background:#f4f1ea;color:#050506;}
.producer-name{font-size:23px;font-weight:900;letter-spacing:-.04em;}
.producer-track{font-size:12px;opacity:.68;}
.mix-selection-status{min-height:22px;margin-top:18px;color:rgba(244,241,234,.68);font-size:13px;}
@keyframes mixReveal{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:620px){
  .services-page .page-shell{padding-top:42px;}
  .producer-choice-grid{grid-template-columns:1fr;}
  .mix-only-card{border-radius:24px;padding:24px 18px;}
  .mix-price-button{min-height:104px;border-radius:20px;}
}


/* v2.4 — producer sound check + direct WhatsApp */
.producer-sound-label{font-size:9px;font-weight:850;letter-spacing:.12em;text-transform:uppercase;opacity:.46;}
.producer-choice.is-selected .producer-sound-label{opacity:.65;}
.producer-choice.is-playing{box-shadow:inset 0 0 0 2px rgba(244,241,234,.2),0 12px 34px rgba(0,0,0,.2);}
.producer-choice.is-playing .producer-sound-label::before{content:'● ';animation:soundPulse 1s ease-in-out infinite;}
.sound-check-panel{width:min(520px,100%);margin:18px auto 0;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid rgba(255,255,255,.12);border-radius:17px;background:rgba(255,255,255,.04);text-align:left;}
.sound-check-panel[hidden]{display:none!important;}
.sound-check-copy{min-width:0;display:grid;gap:4px;}
.sound-check-kicker{font-size:9px;font-weight:900;letter-spacing:.16em;color:rgba(244,241,234,.44);}
.sound-check-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:rgba(244,241,234,.9);}
.sound-check-toggle{flex:0 0 auto;min-height:36px;padding:0 13px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:transparent;color:#f4f1ea;font:inherit;font-size:10px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;}
.sound-check-toggle:hover,.sound-check-toggle:focus-visible{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.35);}
.producer-whatsapp{width:min(520px,100%);min-height:58px;margin:16px auto 0;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-radius:18px;background:#f4f1ea;color:#050506;text-decoration:none;font-size:11px;font-weight:950;letter-spacing:.09em;text-transform:uppercase;transition:transform .2s ease,box-shadow .2s ease;}
.producer-whatsapp[hidden]{display:none!important;}
.producer-whatsapp:hover,.producer-whatsapp:focus-visible{transform:translateY(-2px);box-shadow:0 16px 38px rgba(255,255,255,.1);}
.producer-whatsapp span:last-child{font-size:22px;line-height:1;}
@keyframes soundPulse{0%,100%{opacity:.35}50%{opacity:1}}
@media(max-width:620px){.sound-check-panel{align-items:flex-start;flex-direction:column}.sound-check-toggle{width:100%}.producer-whatsapp{min-height:62px}}

/* v2.4 hover cues — reveal action without changing the original flow */
.mix-price-button{position:relative;overflow:hidden;}
.mix-price-button>.mix-price-value,.mix-price-button>.mix-price-label{transition:opacity .18s ease,transform .18s ease;}
.mix-hover-label{position:absolute;inset:0;display:grid;place-items:center;padding:18px;font-size:clamp(16px,2.3vw,24px);font-weight:950;letter-spacing:.14em;text-transform:uppercase;opacity:0;transform:translateY(8px);transition:opacity .18s ease,transform .18s ease;pointer-events:none;}
.producer-choice{position:relative;overflow:hidden;}
.producer-choice>.producer-name,.producer-choice>.producer-track,.producer-choice>.producer-sound-label{transition:opacity .18s ease,transform .18s ease;}
.producer-hover-label{position:absolute;inset:0;display:grid;place-items:center;padding:14px;font-size:18px;font-weight:950;letter-spacing:.16em;text-transform:uppercase;opacity:0;transform:translateY(7px);transition:opacity .18s ease,transform .18s ease;pointer-events:none;}
@media (hover:hover) and (pointer:fine){
  .mix-price-button:hover>.mix-price-value,.mix-price-button:hover>.mix-price-label{opacity:0;transform:translateY(-7px);}
  .mix-price-button:hover>.mix-hover-label{opacity:1;transform:translateY(0);}
  .producer-choice:hover>.producer-name,.producer-choice:hover>.producer-track,.producer-choice:hover>.producer-sound-label{opacity:0;transform:translateY(-6px);}
  .producer-choice:hover>.producer-hover-label{opacity:1;transform:translateY(0);}
}
.mix-price-button:focus-visible>.mix-price-value,.mix-price-button:focus-visible>.mix-price-label{opacity:0;transform:translateY(-7px);}
.mix-price-button:focus-visible>.mix-hover-label{opacity:1;transform:translateY(0);}
.producer-choice:focus-visible>.producer-name,.producer-choice:focus-visible>.producer-track,.producer-choice:focus-visible>.producer-sound-label{opacity:0;transform:translateY(-6px);}
.producer-choice:focus-visible>.producer-hover-label{opacity:1;transform:translateY(0);}

/* Attention cycle: alternate the CTA copy every 4 seconds. Hover/focus still force the action label. */
.mix-price-button.is-attention-cycle>.mix-price-value,
.mix-price-button.is-attention-cycle>.mix-price-label{
  opacity:0;
  transform:translateY(-7px);
}
.mix-price-button.is-attention-cycle>.mix-hover-label{
  opacity:1;
  transform:translateY(0);
}
.producer-choice.is-attention-cycle>.producer-name,
.producer-choice.is-attention-cycle>.producer-track,
.producer-choice.is-attention-cycle>.producer-sound-label{
  opacity:0;
  transform:translateY(-6px);
}
.producer-choice.is-attention-cycle>.producer-hover-label{
  opacity:1;
  transform:translateY(0);
}

@media (hover:hover) and (pointer:fine){
  .mix-price-button:hover>.mix-price-value,
  .mix-price-button:hover>.mix-price-label{opacity:0;transform:translateY(-7px);}
  .mix-price-button:hover>.mix-hover-label{opacity:1;transform:translateY(0);}
  .producer-choice:hover>.producer-name,
  .producer-choice:hover>.producer-track,
  .producer-choice:hover>.producer-sound-label{opacity:0;transform:translateY(-6px);}
  .producer-choice:hover>.producer-hover-label{opacity:1;transform:translateY(0);}
}