/* /performing-arts/ — theatre ticketing software for reserved seating.
   Rebuilt 2026-08-19: the four app screenshots, the proof strip, the journey
   rail, the duplicated scope band and the four-link route strip are gone. The
   hero carries the live Grand Theatre picker; seven sections remain. */

.arts-hero{
  position:relative;
  overflow:hidden;
  padding:clamp(3rem,4.5vw,4.5rem) 0 clamp(2.5rem,3.5vw,3.5rem);
  background:
    radial-gradient(70% 90% at 84% 16%,rgba(88,101,242,.18),transparent 62%),
    radial-gradient(48% 70% at 6% 100%,rgba(143,43,66,.2),transparent 62%),
    #0b111b;
  color:var(--panel-ink)
}
.arts-hero .wrap{position:relative;z-index:1}
.arts-hero-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(28px,4vw,56px);align-items:center}
.arts-hero h1{max-width:15ch;font-size:var(--sl-title-long);line-height:1.02;letter-spacing:-.045em;text-wrap:balance}
.arts-lede{max-width:56ch;margin-top:20px;color:var(--muted);font-size:17px;line-height:1.6;text-wrap:pretty}
.arts-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:26px}
.arts-actions .btn{min-height:44px}
.arts-btn-ghost{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--ghost-border);border-radius:12px;background:var(--ghost-bg);color:var(--ghost-ink);font-weight:750;font-size:15px}
.arts-btn-ghost:hover{border-color:var(--amber);color:var(--amber)}
.arts-price{max-width:52ch;margin-top:22px;color:var(--muted);font-size:14px;line-height:1.6}
.arts-price b{color:var(--panel-ink)}
.arts-contact-link{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;color:var(--amber-text);font-weight:750;font-size:14.5px}
.arts-contact-link:hover{color:var(--panel-ink)}

/* The reusable proof shell is sized for a full-bleed stage; inside a two-column
   hero it has to sit inside the copy's rhythm instead of setting its own. */
.arts-hero-proof{border-radius:20px}
.arts-hero-proof .sl3d-proof-stage{min-height:clamp(292px,29vw,400px)}
.arts-hero-proof .sl3d-proof-rest .dg-canvas,.arts-hero-proof .sl3d-proof-rest svg{width:100%;height:100%}
.arts-hero-proof noscript p{padding:12px 16px 14px;color:var(--faint);font-size:12.5px}

.arts-head{max-width:min(940px,100%)}.arts-head p{max-width:64ch}
.arts-head h2{font-size:var(--sl-title-section);line-height:1.08;letter-spacing:-.04em;text-wrap:balance}
.arts-head p{margin-top:12px;color:var(--muted);font-size:16px;line-height:1.6;text-wrap:pretty}

.arts-house{padding:clamp(44px,4.4vw,60px) 0}
.arts-house-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:24px}
.arts-house-grid article{padding:20px 22px 18px;border:1px solid var(--line);border-radius:16px;background:var(--card);box-shadow:var(--shadow-card)}
.arts-house-grid h3{font-size:18.5px;line-height:1.2;letter-spacing:-.02em;text-wrap:balance}
.arts-house-grid p{margin-top:9px;color:var(--muted);font-size:14px;line-height:1.55;text-wrap:pretty}
.arts-house-links{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:16px}
.arts-house-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 15px;border:1px solid var(--line);border-radius:999px;color:var(--ink);font-weight:700;font-size:13.5px}
.arts-house-links a:hover{border-color:var(--amber);color:var(--amber-text)}

.arts-confidence{padding:clamp(44px,4.4vw,60px) 0;background:#0b111b;color:var(--panel-ink)}
.arts-confidence-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:24px}
.arts-confidence-grid article{display:flex;flex-direction:column;padding:20px 22px 18px;border:1px solid #29364d;border-radius:16px;background:#121a27}
.arts-confidence-grid h3{font-size:18.5px;line-height:1.2;letter-spacing:-.02em;text-wrap:balance}
.arts-confidence-grid p:not(.arts-flag){margin-top:9px;color:var(--muted);font-size:14px;line-height:1.55;flex:1;text-wrap:pretty}
.arts-confidence-grid .arts-flag{margin-top:12px;padding-top:10px;border-top:1px solid #29364d;color:#f4b740;font-size:13px;font-weight:700;line-height:1.5}
.arts-3d{max-width:80ch;margin-top:22px;padding-top:18px;border-top:1px solid #29364d}
.arts-3d p{color:var(--muted);font-size:14.5px;line-height:1.6;text-wrap:pretty}
.arts-3d p+p{margin-top:10px}
.arts-3d b{color:var(--panel-ink)}
.arts-text-link{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;color:var(--amber-text);font-weight:750;font-size:14.5px}
.arts-text-link:hover{color:var(--ink-strong)}

.arts-operations{padding:clamp(44px,4.4vw,60px) 0}
.arts-ops-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:22px}
.arts-ops-list>div{padding:2px 20px 2px;border-left:2px solid var(--amber)}
.arts-ops-list h3{font-size:17px;letter-spacing:-.01em}
.arts-ops-list p{margin-top:8px;color:var(--muted);font-size:14px;line-height:1.55;text-wrap:pretty}
.arts-ops-note{max-width:78ch;margin-top:18px;color:var(--muted);font-size:14px;line-height:1.6}

.arts-boundary-section{padding:clamp(44px,4.4vw,60px) 0;background:#0b111b;color:var(--panel-ink)}
.arts-authority-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px}
.arts-authority-grid article{padding:22px 24px 20px;border:1px solid #29364d;border-radius:18px;background:#0f1723}
.arts-host-authority{background:#121a27;border-color:#3a4b6b}
.arts-authority-grid span{font:700 10px var(--mono);letter-spacing:.12em;color:#f4b740}
.arts-authority-grid h3{margin-top:8px;font-size:20px;letter-spacing:-.025em;text-wrap:balance}
.arts-authority-grid ul{display:grid;gap:9px;margin-top:14px;padding:0;list-style:none}
.arts-authority-grid li{position:relative;padding-left:20px;color:#c3ccdb;font-size:14px;line-height:1.5}
.arts-authority-grid li:before{content:"›";position:absolute;left:0;color:#f4b740;font-weight:800}
.arts-scope{max-width:82ch;margin-top:18px;color:var(--muted);font-size:14px;line-height:1.6}
.arts-authority-actions{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:14px}
.arts-authority-actions a{display:inline-flex;align-items:center;min-height:44px;color:var(--amber-text);font-weight:750;font-size:14.5px}
.arts-authority-actions a:hover{color:var(--panel-ink)}

.arts-faq-section{padding:clamp(44px,4.4vw,60px) 0;background:#fffaf2}
.arts-faq{max-width:860px;margin:20px 0 0}
.arts-faq details{border-bottom:1px solid var(--line)}
.arts-faq summary{min-height:56px;padding:16px 4px;font-weight:750}
.arts-faq .a{padding:0 4px 18px;max-width:760px;color:var(--muted);font-size:14.5px;line-height:1.6}

.arts-final{padding:clamp(42px,4.2vw,56px) 0;background:#0b111b;color:var(--panel-ink);text-align:center}
.arts-final h2{font-size:var(--sl-title-section);line-height:1.08;letter-spacing:-.04em;text-wrap:balance}
.arts-final p{max-width:62ch;margin:12px auto 0;color:var(--muted);text-wrap:pretty}
.arts-final-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 18px;margin-top:26px}

.arts-hero a:focus-visible,.arts-hero button:focus-visible,main section a:focus-visible,main section summary:focus-visible{outline:3px solid #f4b740;outline-offset:4px}

@media(max-width:1000px){
  .arts-hero-grid{grid-template-columns:1fr;gap:30px}
  .arts-hero h1{max-width:none}
  .arts-hero-proof{max-width:760px}
  .arts-house-grid,.arts-confidence-grid,.arts-ops-list{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .arts-authority-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  /* The shared shell hides the whole guides bar under 640px, which would take
     the full-page demo link with it — the only way in on a phone. Keep the bar,
     drop the inline controls the phone cannot use. */
  .arts-hero-proof .sl3d-proof-guides{display:flex;justify-content:center}
  .arts-hero-proof .sl3d-guide,.arts-hero-proof .sl3d-load{display:none}
  .arts-hero-proof .sl3d-mobile-link{display:inline-flex}
  .arts-hero{padding:52px 0 40px}
  .arts-lede{font-size:16px}
  .arts-hero-proof .sl3d-proof-stage{min-height:340px}
  .arts-house-grid,.arts-confidence-grid,.arts-ops-list{grid-template-columns:1fr}
  .arts-house-links a{width:100%}
  .arts-actions .btn,.arts-actions .arts-btn-ghost,.arts-final-actions .btn,.arts-final-actions .arts-btn-ghost{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .arts-hero *,main section *{transition:none!important;animation:none!important}
}