/* Interactive Accordion widget */
.acc-title{font-size:clamp(2.4rem,5vw,4.4rem)}
.accordion{list-style:none;margin:0 auto;padding:0;display:flex;gap:12px;height:clamp(420px,66vh,640px);max-width:1400px}
.acc-panel{position:relative;flex:1 1 0;min-width:0;border-radius:10px;overflow:hidden;background:var(--bg2);transition:flex-grow .8s cubic-bezier(.65,0,.25,1);isolation:isolate}
.acc-panel.is-active{flex-grow:5.2}
.acc-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.12);filter:saturate(.75) brightness(.7);transition:transform 1.2s cubic-bezier(.2,.8,.2,1),filter .8s}
.acc-panel.is-active .acc-img{transform:scale(1);filter:none}
.acc-panel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,10,7,.15) 30%,rgba(14,10,7,.92));transition:opacity .6s;pointer-events:none}
.acc-panel:not(.is-active)::after{background:linear-gradient(180deg,rgba(14,10,7,.35),rgba(14,10,7,.8))}
.acc-trigger{position:absolute;inset:0;z-index:2;width:100%;border:0;background:transparent;color:var(--cream);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:1rem;padding:1.6rem .5rem;font:inherit}
.acc-trigger:focus-visible{outline:2px solid var(--gold);outline-offset:-6px;border-radius:10px}
.acc-label{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--serif);font-style:italic;font-size:clamp(1.4rem,2vw,2rem);white-space:nowrap;transition:opacity .4s .25s,transform .6s}
.acc-num{font-size:.72rem;letter-spacing:.3em;color:var(--gold)}
.acc-trigger .acc-num{order:-1;margin-bottom:auto}
.acc-panel.is-active .acc-trigger{cursor:default}
.acc-panel.is-active .acc-trigger>*{opacity:0;transition-delay:0s}
.acc-content{position:absolute;left:0;bottom:0;z-index:3;width:min(560px,100%);padding:clamp(1.4rem,3vw,2.6rem);opacity:0;transform:translateY(24px);pointer-events:none;transition:opacity .35s,transform .35s}
.acc-panel.is-active .acc-content{opacity:1;transform:none;transition:opacity .7s .35s,transform .9s .35s cubic-bezier(.2,.8,.2,1)}
.acc-content h2{font-size:clamp(2.4rem,4.2vw,4rem);font-style:italic;margin:.4rem 0 .7rem}
.acc-content p{margin:0 0 1rem;color:#e2d6c6;max-width:30rem}
.acc-price{font-family:var(--serif);font-size:1.3rem;color:var(--gold2)}
.acc-note{text-align:center;color:var(--muted);font-size:.9rem;margin:2rem auto 0;max-width:40rem}

/* Mobile: panels stack vertically and expand downwards */
@media (max-width:760px){
  .accordion{flex-direction:column;height:auto;gap:8px}
  .acc-panel{flex:none;height:76px;transition:height .7s cubic-bezier(.65,0,.25,1)}
  .acc-panel.is-active{height:min(460px,64vh)}
  .acc-trigger{flex-direction:row;justify-content:flex-start;align-items:center;padding:0 1.3rem}
  .acc-trigger .acc-num{margin:0}
  .acc-label{writing-mode:horizontal-tb;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .acc-panel,.acc-img,.acc-content,.acc-label{transition:none!important}
}

/* ---------- Theme-aware details (dark + light instances) ---------- */
.acc-section{position:relative}
.acc-content h3{font-size:clamp(2.4rem,4.2vw,4rem);font-style:italic;margin:.4rem 0 .7rem}
.acc-content h2,.acc-content h3{font-family:var(--serif);font-weight:500;line-height:1.02}
.theme-light .acc-panel{background:var(--bg2);box-shadow:0 18px 40px -26px rgba(70,45,20,.45)}
.theme-light .acc-panel::after{background:linear-gradient(180deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.94) 88%)}
.theme-light .acc-panel:not(.is-active)::after{background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,.82))}
.theme-light .acc-img{filter:saturate(.7) brightness(1.06)}
.theme-light .acc-panel.is-active .acc-img{filter:none}
.theme-light .acc-trigger{color:var(--cream)}
.theme-light .acc-content p{color:#3d3127}
.theme-light .acc-trigger:focus-visible{outline-color:var(--gold)}
.theme-dark+.theme-light .acc-section{border-top:1px solid rgba(154,109,46,.15)}
/* 2026-10-19b kit fix (QA demo-016/018: "Notarial work & antenuptial con..." clipped on iPhone SE). On phones the collapsed
   tabs are horizontal bars and their titles never wrapped, so long titles ran out of the bar. Let them wrap to 2 lines. */
@media (max-width:760px){.acc-label{white-space:normal;min-width:0;text-align:left;line-height:1.12;overflow-wrap:normal}}

/* ACC-LEGIBLE 20261021e (widget default, all kits): dark fade under every panel so the title, body copy, number, label
   and the meta/link pill read on ANY photo in light AND dark mode (worst case: white photo -> white text still >= 4.5:1).
   Wins over older kit design.css washes (white light-mode scrims, navy/teal text) on purpose; kits must not re-lighten it. */
html .accordion .acc-panel::after,html .accordion .acc-panel:not(.is-active)::after{background:linear-gradient(0deg,rgba(8,14,22,.86) 0%,rgba(8,14,22,.74) 45%,rgba(8,14,22,.62) 100%)!important;opacity:1!important}
html .accordion .acc-panel.is-active::after{background:linear-gradient(90deg,rgba(8,14,22,.86) 0%,rgba(8,14,22,.76) 50%,rgba(8,14,22,.62) 100%)!important}
@media (max-width:860px){html .accordion .acc-panel.is-active::after{background:linear-gradient(0deg,rgba(8,14,22,.86) 0%,rgba(8,14,22,.74) 50%,rgba(8,14,22,.62) 100%)!important}}
html .accordion .acc-img{filter:none!important}
html .accordion :is(.acc-label,.acc-num,.acc-trigger,.acc-content h2,.acc-content h3,.acc-content .acc-num,.acc-price,.acc-foot,.acc-foot a,.acc-foot .link-arrow){color:#fff!important;text-shadow:0 1px 3px rgba(0,0,0,.5)!important}
html .accordion .acc-content p:not(.acc-foot){color:rgba(255,255,255,.94)!important;text-shadow:0 1px 3px rgba(0,0,0,.5)!important}
html .accordion .acc-foot a{text-decoration-color:rgba(255,255,255,.7)!important;border-color:rgba(255,255,255,.7)!important}
/* the pill: dark glass instead of a white wash (kits that pad the pill keep their padding/shape) */
html .accordion .acc-content .acc-foot{background:rgba(8,14,22,.55)!important;border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
html .accordion .acc-content .acc-foot{border-radius:16px;padding:.45rem 1rem!important;margin-left:0!important;display:inline-flex;flex-wrap:wrap;align-items:center;gap:.3rem 1.2rem}