PageSourceSearch

https://www.centrestage.org.au/

html centrestage.org.au collected 2026-10-01 14:49:56 UTC 180,540 bytes, 2,074 lines download raw bytes

1<!DOCTYPE html>
2<html>
3<head>
4<script>(function(){var p=location.pathname;var b=/\.html?$/i.test(p)?p.replace(/[^\/]*$/,''):'/';document.write('<base href="'+b+'">');})();</script>
4
5<meta charset="utf-8">
6<meta name="viewport" content="width=device-width, initial-scale=1">
7<script src="./support.js"></script>
7
8</head>
9<body>
10<x-dc>
11<helmet>
12<link rel="preconnect" href="https://fonts.googleapis.com">
13<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
14<title>CentreStage — Theatre, Education &amp; Agency, Geelong</title>
15<meta name="description" content="Award-winning Geelong theatre since 2010. Ambitious productions, a performing arts academy for ages 4–18, and talent representation.">
16<link rel="canonical" href="https://centrestage.org.au/">
17<link rel="icon" type="image/png" href="assets/favicon-slash.png">
18<link rel="apple-touch-icon" href="assets/favicon-slash.png">
19<meta property="og:type" content="website">
20<meta property="og:site_name" content="CentreStage">
21<meta property="og:title" content="CentreStage — Theatre, Education & Agency, Geelong">
22<meta property="og:description" content="Award-winning Geelong theatre since 2010. Ambitious productions, a performing arts academy for ages 4–18, and talent representation.">
23<meta property="og:url" content="https://centrestage.org.au/">
24<meta property="og:image" content="https://centrestage.org.au/assets/og-image.jpg">
25<meta property="og:image:alt" content="CentreStage — Theatre, Education &amp; Agency, Geelong">
26<meta property="og:locale" content="en_AU">
27<meta name="twitter:card" content="summary_large_image">
28<meta name="twitter:title" content="CentreStage — Theatre, Education & Agency, Geelong">
29<meta name="twitter:description" content="Award-winning Geelong theatre since 2010. Ambitious productions, a performing arts academy for ages 4–18, and talent representation.">
30<meta name="twitter:image" content="https://centrestage.org.au/assets/og-image.jpg">
31<meta name="twitter:image:alt" content="CentreStage — Theatre, Education &amp; Agency, Geelong">
32<meta name="robots" content="index, follow">
33<style>
34  * { box-sizing: border-box; }
35  html, body { margin: 0; padding: 0; background: #F4F1EA; color: #0A0A0A; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
36  img { display: block; max-width: 100%; }
37  a { color: #0A0A0A; text-decoration: none; }
38  a:hover { text-decoration: none; }
39  ::selection { background: #0A0A0A; color: #F4F1EA; }
40  @keyframes cs-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
41  @keyframes cs-fade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
42  .cs-fade { animation: cs-fade .5s cubic-bezier(.2,.6,.2,1) both; }
43  .cs-link-u:hover { text-decoration: underline; text-underline-offset: 4px; }
44  .cs-imgz { overflow: hidden; }
45  .cs-imgz img { transition: transform .6s cubic-bezier(.2,.6,.2,1); }
46  .cs-imgz:hover img { transform: scale(1.03); }
47  .cs-row:hover { background: #ECE7DB; }
48  .cs-prod:hover { background: #0A0A0A; color: #F4F1EA; }
49  .cs-prod:hover .cs-prod-y { color: #A8A59E; }
50  .cs-btn { display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; gap:8px; height:48px; padding:0 24px; border:1px solid #0A0A0A; background:#0A0A0A; color:#F4F1EA; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; transition:background .24s cubic-bezier(.2,.6,.2,1),color .24s,transform .12s; }
51  .cs-btn:hover { background:#F4F1EA; color:#0A0A0A; }
52  .cs-btn:active { transform:scale(.985); }
53  .cs-btn--sec { background:transparent; color:#0A0A0A; }
54  .cs-btn--sec:hover { background:#0A0A0A; color:#F4F1EA; }
55  .cs-btn--inv { background:#F4F1EA; color:#0A0A0A; border-color:#F4F1EA; }
56  .cs-btn--inv:hover { background:transparent; color:#F4F1EA; }
57  .cs-nav-a { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding-bottom:4px; border-bottom:2px solid transparent; transition:border-color .2s; }
58  .cs-nav-a:hover { border-bottom-color:#0A0A0A; }
59  .cs-social { display:inline-flex; align-items:center; gap:8px; justify-content:center; width:38px; height:38px; border:1px solid #1F1F1D; color:#F4F1EA; transition:background .2s, color .2s, border-color .2s; }
60  .cs-social:hover { background:#F4F1EA; color:#0A0A0A; border-color:#F4F1EA; }
61  .cs-social--pod { width:auto; padding:0 14px; gap:9px; }
62  .cs-chip { display:inline-flex; align-items:center; font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.04em; color:#0A0A0A; text-decoration:none; border:1px solid #D9D5CC; padding:9px 15px; transition:background .2s, color .2s, border-color .2s; }
63  .cs-chip:hover { background:#0A0A0A; color:#F4F1EA; border-color:#0A0A0A; }
64  .cs-input:focus { outline:none; border-bottom-width:2px; }
65  .cs-input::placeholder { color:#A8A59E; }
66  .cs-ice-chip { display:inline-flex; align-items:center; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#9FD9FF; text-decoration:none; border:1px solid rgba(127,211,255,.35); padding:10px 16px; transition:background .2s, color .2s; }
67  .cs-ice-chip:hover { background:#7FD3FF; color:#04101F; border-color:#7FD3FF; }
68  .cs-ice { transition:transform .3s cubic-bezier(.2,.6,.2,1), box-shadow .3s; }
69  .cs-gal { scroll-snap-type:x mandatory; scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
70  .cs-gal > figure { scroll-snap-align:start; }
71  .cs-gal::-webkit-scrollbar { height:6px; }
72  .cs-gal::-webkit-scrollbar-thumb { background:#D9D5CC; }
73  @media (max-width: 820px) { .cs-gal > figure, .cs-gal img { width:76vw !important; height:76vw !important; } }
74  .cs-ice:hover { transform:translateY(-3px); box-shadow:0 24px 48px -24px rgba(127,211,255,.45); }
75  .cs-nav-a { white-space:nowrap; }
76  .cs-burger { display:none; width:44px; height:44px; align-items:center; justify-content:center; background:transparent; border:1px solid #D9D5CC; color:#0A0A0A; font-size:22px; line-height:1; cursor:pointer; }
77  @media (max-width: 1080px) {
78    html, body { font-size: 16px; }
79    header > div { position: relative; height: 64px !important; padding: 0 18px !important; }
80    .cs-burger { display: inline-flex; }
81    .cs-nav { display: none !important; position: absolute; top: 100%; left: 0; right: 0; background: #F4F1EA; border-bottom: 1px solid #D9D5CC; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; padding: 6px 18px 14px !important; box-shadow: 0 24px 40px -28px rgba(10,10,10,0.35); }
82    .cs-nav--open { display: flex !important; }
83    .cs-nav a { padding: 15px 2px !important; border-bottom: 1px solid #ECE7DB; font-size: 15px; }
84    header .cs-btn--sec { display: none; }
85    /* collapse every multi-column grid to a single column */
86    [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
87    /* let flex rows wrap instead of overflowing */
88    [style*="space-between"] { flex-wrap: wrap !important; }
89    /* tighten centered page gutters (matches margin:0 auto containers) */
90    [style*="0px auto"] { padding-left: 20px !important; padding-right: 20px !important; }
91    h1 { line-height: .95 !important; }
92  }
93  @media (max-width: 500px) {
94    .cs-btn { width: 100%; }
95  }
96</style>
97</helmet>
98<div style="min-height:100vh; display:flex; flex-direction:column;">
99
100  <header style="position:sticky; top:0; z-index:50; background:#F4F1EA; border-bottom:1px solid #D9D5CC;">
101    <div style="max-width:1600px; margin:0 auto; padding:0 48px; height:76px; display:flex; align-items:center; justify-content:space-between;">
102      <a href="/" style="display:flex; align-items:center; gap:14px;">
103        <img src="assets/CentreStage-Solid-Black.png" alt="CentreStage" style="height:22px;">
104      </a>
105      <button class="cs-burger" aria-label="Menu" onClick="{{ toggleMenu }}">{{ burgerIcon }}</button>
106      <nav class="{{ navOpenClass }}" style="display:flex; gap:30px; align-items:center;">
107        <a class="cs-nav-a" href="/" style="{{ navHome }}">Home</a>
108        <a class="cs-nav-a" href="/tickets" style="{{ navTickets }}">Tickets</a>
109        <a class="cs-nav-a" href="/about" style="{{ navAbout }}">About</a>
110        <a class="cs-nav-a" href="/education" style="{{ navEducation }}">Education</a>
111        <a class="cs-nav-a" href="/health" style="{{ navHealth }}">Health</a>
112        <a class="cs-nav-a" href="/blog" style="{{ navBlog }}">Journal</a>
113        <a class="cs-nav-a" href="/media" style="{{ navMedia }}">Media</a>
114        <a class="cs-nav-a" href="https://www.centrestageagency.org.au/podcast" target="_blank" rel="noopener">Podcast ↗</a>
115        <a class="cs-nav-a" href="https://www.centrestageagency.org.au" target="_blank" rel="noopener">Agency ↗</a>
116      </nav>
117      <a class="cs-btn cs-btn--sec" href="/contact" style="height:40px; padding:0 18px;">Contact</a>
118    </div>
119  </header>
120
121  <main style="flex:1;">
122
123  <!-- ══════════════ HOME ══════════════ -->
124  <sc-if value="{{ isHome }}" hint-placeholder-val="{{ true }}">
125  <div class="cs-fade">
126    <section style="position:relative; background:#0A0A0A; color:#F4F1EA; overflow:hidden;">
127      <div class="cs-imgz" style="position:absolute; inset:0; opacity:.34;">
128        <img src="https://static.wixstatic.com/media/35cad6_29eb8dbd9ee34f07b1cb29cd9bc81de9~mv2_d_2048_1365_s_2.jpg/v1/fill/w_2000,h_1333,al_c,q_85,enc_avif,quality_auto/file.avif" alt="On stage" style="width:100%; height:100%; object-fit:cover;">
129      </div>
130      <div style="position:relative; max-width:1600px; margin:0 auto; padding:120px 48px 96px;">
131        <div style="display:flex; align-items:center; gap:16px; margin-bottom:40px;">
132          <span style="width:8px; height:8px; background:#F2D65A; border-radius:50%; animation:cs-pulse 2s infinite;"></span>
133          <span style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#F4F1EA;">Established 2010 <span style="color:#6B6B68; margin:0 .2em;">/</span> Geelong</span>
134          <div style="flex:1; height:1px; background:#1F1F1D;"></div>
135          <span style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#A8A59E;">Theatre / Education / Agency</span>
136        </div>
137        <h1 style="font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:clamp(56px,9.5vw,150px); letter-spacing:-.03em; line-height:.9; margin:0; text-wrap:balance;">Experience the magic of live theatre.</h1>
138        <div style="margin-top:56px; display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:end;">
139          <p style="font-size:19px; line-height:1.55; max-width:46ch; margin:0; color:#F4F1EA;">Where imagination knows no bounds. Theatre, education and agency representation — we create ambitious productions, train the next generation, and represent talent across stage and screen.</p>
140          <div style="display:flex; gap:16px; justify-content:flex-end; flex-wrap:wrap;">
141            <a class="cs-btn cs-btn--inv" href="/tickets">What's on →</a>
142            <a class="cs-btn" href="/education" style="border-color:#F4F1EA; color:#F4F1EA;">Learn with us</a>
143          </div>
144        </div>
145      </div>
146    </section>
147
148
149    <!-- Frozen spotlight -->
150    <section style="background:linear-gradient(135deg,#0A2646 0%,#123f79 52%,#1E63AE 100%); color:#EAF4FF;">
151      <div style="max-width:1600px; margin:0 auto; padding:80px 48px;">
152        <div style="display:flex; align-items:center; gap:16px; margin-bottom:44px;">
153          <span style="font-family:'JetBrains Mono',monospace; font-size:12px; color:#9FC6EE;">01 / 06</span>
154          <span style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#EAF4FF;">Now booking</span>
155          <div style="flex:1; height:1px; background:rgba(255,255,255,.22);"></div>
156          <span style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#9FC6EE;">Geelong Arts Centre</span>
157        </div>
158        <div style="display:grid; grid-template-columns:1.2fr 1fr; gap:56px; align-items:center;">
159          <div class="cs-imgz" style="box-shadow:0 30px 70px -30px rgba(0,0,0,.7);">
160            <img src="assets/frozen-keyart.png" alt="Disney's Frozen — The Broadway Musical" style="width:100%; aspect-ratio:3/2; object-fit:cover;">
161          </div>
162          <div>
163            <img src="assets/frozen-title-light.png" alt="Frozen — The Broadway Musical" style="width:min(380px,82%); margin-bottom:26px;">
164            <div style="display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(255,255,255,.4); padding:6px 10px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#EAF4FF;"><span style="width:8px;height:8px;background:#7FD3FF;border-radius:50%; animation:cs-pulse 2s infinite;"></span>Spotlight production · March 2027</div>
165            <p style="font-size:20px; line-height:1.55; max-width:44ch; margin:22px 0 0; color:#EAF4FF;">It's time to LET IT GO. CentreStage's most ambitious production yet takes the stage from 5–21 March 2027. Tickets available exclusively via the Geelong Arts Centre.</p>
166            <div style="display:flex; gap:16px; margin-top:30px; flex-wrap:wrap;">
167              <a class="cs-btn" href="https://geelongartscentre.org.au/whats-on/all-events/frozen-centrestage" target="_blank" rel="noopener" style="background:#EAF4FF; color:#0A2646; border-color:#EAF4FF;">Book now →</a>
168              <a class="cs-btn" href="/post/frozencreativeteam" style="background:transparent; color:#EAF4FF; border-color:rgba(255,255,255,.5);">Meet the creatives</a>
169            </div>
170          </div>
171        </div>
172      </div>
173    </section>
174
175    <div style="height:1px; background:#D9D5CC; max-width:1600px; margin:0 auto;"></div>
176
177    <!-- Three pillars -->
178    <section style="max-width:1600px; margin:0 auto; padding:96px 48px;">
179      <div style="display:flex; align-items:center; gap:16px; margin-bottom:56px;">
180        <span style="font-family:'JetBrains Mono',monospace; font-size:12px; color:#6B6B68;">02 / 06</span>
181        <span style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;">Learn / Work / Enjoy</span>
182        <div style="flex:1; height:1px; background:#D9D5CC;"></div>
183      </div>
184      <div style="display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#D9D5CC; border:1px solid #D9D5CC;">
185        <a href="/education" class="cs-row" style="background:#F4F1EA; padding:36px 36px 48px; display:block; border-top:4px solid #2E6FB7; transition:background .2s;">
186          <div style="font-family:'JetBrains Mono',monospace; font-size:12px; color:#2E6FB7; font-weight:600;">01 — Learn</div>
187          <h3 style="font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:44px; letter-spacing:-.02em; margin:20px 0 16px;">Learn</h3>
188          <p style="font-size:16px; line-height:1.55; color:#3A3A37; margin:0;">Start your education journey. Weekly group classes, private vocal and piano lessons, and dance for ages 4 to 18.</p>
189          <div style="margin-top:24px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#2E6FB7;">Start now →</div>
190        </a>
191        <a href="https://www.centrestageagency.org.au" target="_blank" rel="noopener" class="cs-row" style="background:#F4F1EA; padding:36px 36px 48px; display:block; border-top:4px solid #E8472B; transition:background .2s;">
192          <div style="font-family:'JetBrains Mono',monospace; font-size:12px; color:#E8472B; font-weight:600;">02 — Work</div>
193          <h3 style="font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:44px; letter-spacing:-.02em; margin:20px 0 16px;">Work</h3>
194          <p style="font-size:16px; line-height:1.55; color:#3A3A37; margin:0;">Interested in professional acting, musical theatre and commercial opportunities? Audition for CentreStage Agency.</p>
195          <div style="margin-top:24px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#E8472B;">Visit the agency ↗</div>
196        </a>
197        <a href="/tickets" class="cs-row" style="background:#F4F1EA; padding:36px 36px 48px; display:block; border-top:4px solid #2E8B6B; transition:background .2s;">
198          <div style="font-family:'JetBrains Mono',monospace; font-size:12px; color:#2E8B6B; font-weight:600;">03 — Enjoy</div>
199          <h3 style="font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:44px; letter-spacing:-.02em; margin:20px 0 16px;">Enjoy</h3>
200          <p style="font-size:16px; line-height:1.55; color:#3A3A37; margin:0;">Staging 7 to 11 productions annually, your chance to live and breathe musical theatre is only a click away.</p>
201          <div style="margin-top:24px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#2E8B6B;">Search events →</div>
202        </a>
203      </div>
204    </section>
205
206    <!-- Stats band -->
207    <section style="background:#0A0A0A; color:#F4F1EA;">
208      <div style="max-width:1600px; margin:0 auto; padding:72px 48px;">
209        <div style="display:flex; align-items:center; gap:16px; margin-bottom:40px;">
210          <span style="font-family:'JetBrains Mono',monospace; font-size:12px; color:#9FC6EE;">03 / 06</span>
211          <span style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#F4F1EA;">By the numbers</span>
212          <div style="flex:1; height:1px; background:#1F1F1D;"></div>
213          <span style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#9FC6EE;">Trusted since 2010</span>
214        </div>
215        <div style="display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:#1F1F1D; border:1px solid #1F1F1D;">
216          <sc-for list="{{ stats }}" as="s" hint-placeholder-count="4">
217            <div style="background:#0A0A0A; padding:36px 28px;">
218              <div style="font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:clamp(40px,5vw,68px); letter-spacing:-.03em; color:{{ s.color }}; line-height:1;">{{ s.n }}</div>
219              <div style="font-size:14px; color:#A8A59E; margin-top:12px; line-height:1.45;">{{ s.l }}</div>
220            </div>
221          </sc-for>
222        </div>
223        <div style="margin-top:28px; display:flex; flex-wrap:wrap; gap:10px;">
224          <sc-for list="{{ accreditations }}" as="a" hint-placeholder-count="7">
225            <span style="border:1px solid #1F1F1D; padding:9px 14px; font-size:12px; font-weight:700; letter-spacing:.04em; color:#EAF4FF;">{{ a }}</span>
226          </sc-for>
227        </div>
228      </div>
229    </section>
230
231    <!-- About strip -->
232    <section style="background:#ECE7DB;">
233      <div style="max-width:1600px; margin:0 auto; padding:96px 48px; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center;">
234        <div class="cs-imgz">
235          <img src="https://static.wixstatic.com/media/35cad6_dd683cd9ea004041b4a57aac77f4b5a7~mv2.jpg/v1/fill/w_1200,h_900,al_c,q_85,enc_avif,quality_auto/file.avif" alt="CentreStage company" style="width:100%; aspect-ratio:4/3; object-fit:cover;">
236        </div>
237        <div>
238          <span style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#6B6B68;">04 / 06 &nbsp;/&nbsp; Proudly Geelong</span>
239          <h2 style="font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:clamp(40px,4.6vw,64px); letter-spacing:-.02em; line-height:.98; margin:20px 0 24px;">Do you hear the people sing?</h2>
240          <p style="font-size:18px; line-height:1.6; color:#0A0A0A; max-width:52ch; margin:0 0 18px;">We're proudly Geelong — that's our secret to creating consistently strong theatre. Our aim is to create inspiring projects that foster new talent and develop existing skills within our teams.</p>
241          <p style="font-size:18px; line-height:1.6; color:#3A3A37; max-width:52ch; margin:0 0 28px;">CentreStage is driven by a desire to provide access to the arts, through musical theatre, to as many people in our community as possible. We support the inclusion of all people and offer opportunities to community groups to access the arts.</p>
242          <a class="cs-btn cs-btn--sec" href="/about">Read our story →</a>
243        </div>
244      </div>
245    </section>
246
247    <!-- Journal preview -->
248    <section style="max-width:1600px; margin:0 auto; padding:96px 48px;">
249      <div style="display:flex; align-items:center; gap:16px; margin-bottom:8px;">
250        <span style="font-family:'JetBrains Mono',monospace; font-size:12px; color:#6B6B68;">05 / 06</span>
251        <span style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;">Latest news</span>
252        <div style="flex:1; height:1px; background:#D9D5CC;"></div>
253        <a class="cs-link-u" href="/blog" style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;">All posts →</a>
254      </div>
255      <div style="display:grid; grid-template-columns:repeat(3,1fr); gap:36px; margin-top:40px;">
256        <sc-for list="{{ homePosts }}" as="p" hint-placeholder-count="3">
257          <a href="/post/{{ p.slug }}" style="display:block;">
258            <div class="cs-imgz"><img src="{{ p.img }}" alt="{{ p.title }}" style="width:100%; aspect-ratio:4/3; object-fit:cover;"></div>
259            <div style="display:flex; gap:10px; align-items:center; margin-top:16px;"><span style="font-family:'JetBrains Mono',monospace; font-size:12px; color:#6B6B68;">{{ p.date }}</span><span style="font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:{{ p.catColor }}; padding:3px 8px;">{{ p.cat }}</span></div>
260            <h3 style="font-size:21px; font-weight:700; letter-spacing:-.01em; line-height:1.2; margin:10px 0 0; text-wrap:pretty;">{{ p.title }}</h3>
261          </a>
262        </sc-for>
263      </div>
264    </section>
265
266    <!-- Featured in / members -->
267    <section style="border-top:1px solid #D9D5CC; max-width:1600px; margin:0 auto; padding:64px 48px 96px;">
268      <div style="display:flex; align-items:center; gap:16px; margin-bottom:40px;">
269        <span style="font-family:'JetBrains Mono',monospace; font-size:12px; color:#6B6B68;">06 / 06</span>
270        <span style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;">As featured in</span>
271        <div style="flex:1; height:1px; background:#D9D5CC;"></div>
272      </div>
273      <div style="display:flex; flex-wrap:wrap; gap:14px;">
274        <sc-for list="{{ featuredIn }}" as="f" hint-placeholder-count="6">
275          <span style="border:1px solid #D9D5CC; padding:12px 20px; font-size:13px; font-weight:700; letter-spacing:.04em; color:#3A3A37;">{{ f }}</span>
276        </sc-for>
277      </div>
278    </section>
279  </div>
280  </sc-if>
281
282  <!-- ══════════════ TICKETS ══════════════ -->
283  <sc-if value="{{ isTickets }}">
284  <div class="cs-fade">
285    <section style="max-width:1600px; margin:0 auto; padding:64px 48px 0;">
286      <div style="display:flex; align-items:center; gap:16px; margin-bottom:40px;">
287        <span style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#6B6B68;">What's on</span>
288        <div style="flex:1; height:1px; background:#D9D5CC;"></div>
289        <span style="font-family:'JetBrains Mono',monospace; font-size:12px; color:#6B6B68;">2026 / 2027 season</span>
290      </div>
291      <h1 style="font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:clamp(64px,10vw,144px); letter-spacing:-.03em; line-height:.9; margin:0;">Upcoming shows.</h1>
292      <p style="font-size:19px; line-height:1.55; max-width:52ch; margin:32px 0 0; color:#3A3A37;">We can't wait to see you at one of our upcoming productions. Below you'll find ticketing information for each show.</p>
293    </section>
294    <section style="max-width:1600px; margin:0 auto; padding:64px 48px 96px; display:flex; flex-direction:column; gap:1px; background:#D9D5CC; border-top:1px solid #D9D5CC; border-bottom:1px solid #D9D5CC;">
295      <sc-for list="{{ shows }}" as="s" hint-placeholder-count="4">
296        <div style="background:{{ s.bg }}; color:{{ s.fg }}; padding:48px; display:grid; grid-template-columns:1fr 1.4fr auto; gap:48px; align-items:center;">
297          <div class="cs-imgz"><img src="{{ s.img }}" alt="{{ s.title }}" style="width:100%; aspect-ratio:3/2; object-fit:{{ s.imgFit }}; background:{{ s.imgBg }};"></div>
298          <div>
299            <div style="font-family:'JetBrains Mono',monospace; font-size:13px; color:{{ s.meta }}; margin-bottom:14px;">{{ s.when }} &nbsp;/&nbsp; {{ s.venue }}</div>
300            <h2 style="font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:clamp(36px,4.4vw,64px); letter-spacing:-.02em; line-height:.95; margin:0;">{{ s.title }}</h2>
301            <sc-if value="{{ s.status }}">
302              <span style="display:inline-block; margin:16px 0 0; background:{{ s.statusColor }}; color:{{ s.statusFg }}; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:6px 12px;">{{ s.status }}</span>
303            </sc-if>
304            <p style="font-size:17px; line-height:1.55; max-width:48ch; margin:18px 0 0; color:{{ s.body }};">{{ s.blurb }}</p>
305          </div>
306          <sc-if value="{{ s.soldOut }}">
307            <a class="cs-btn {{ s.btnClass }}" href="{{ s.href }}" target="_blank" rel="noopener" style="white-space:nowrap; border-color:#A8A59E; background:transparent; color:#6B6B68;">Sold out — view →</a>
308          </sc-if>
309          <sc-if value="{{ s.onSale }}">
310            <a class="cs-btn {{ s.btnClass }}" href="{{ s.href }}" target="_blank" rel="noopener" style="white-space:nowrap;">{{ s.cta }} →</a>
311          </sc-if>
312        </div>
313      </sc-for>
314    </section>
315  </div>
316  </sc-if>
317
318  <!-- ══════════════ ABOUT ══════════════ -->
319  <sc-if value="{{ isAbout }}">
320  <div class="cs-fade">
321    <section style="max-width:1600px; margin:0 auto; padding:64px 48px 0;">
322      <div style="display:flex; align-items:center; gap:16px; margin-bottom:40px;">
323        <span style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#6B6B68;">About CentreStage</span>
324        <div style="flex:1; height:1px; background:#D9D5CC;"></div>
325      </div>
326      <h1 style="font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:clamp(48px,7vw,112px); letter-spacing:-.03em; line-height:.92; margin:0; max-width:16ch;">Creating consistently strong theatre through the Geelong region.</h1>
327    </section>
328    <section style="max-width:1600px; margin:0 auto; padding:64px 48px 96px; display:grid; grid-template-columns:1.3fr 1fr; gap:80px; align-items:start;">
329      <div style="font-size:18px; line-height:1.7; color:#0A0A0A;">
330        <p style="margin:0 0 22px; font-size:24px; line-height:1.45; font-weight:700; letter-spacing:-.01em;">"Do you hear the people sing?" We live and breathe our values every day. That's how we 
330create consistently strong and inclusive theatre.</p>
331        <p style="margin:0 0 22px;">Welcome to CentreStage, Australia's premier theatre and education provider. Since our inception in 2010, we have been dedicated to fostering the performing arts while maintaining a strong sense of community involvement. What started as a small idea with big dreams has now grown into one of the largest theatre and education providers in the country.</p>
332        <p style="margin:0 0 22px;">We pride ourselves on our commitment to inclusivity and diversity. We are owned and managed by a person with a disability and the LGBTQIA+ community, and our management team includes individuals who identify as First Nations and represent various minority groups. We believe that everyone should have access to the performing arts and strive to make our productions and classes as inclusive as possible.</p>
333        <p style="margin:0 0 22px;">To date, we have produced over 70 shows, including such standouts as We Will Rock You, The Sound of Music, Les Miserables, Puffs, and Singin' In The Rain. Our productions have been enjoyed by audiences of all ages and have received critical acclaim.</p>
334        <p style="margin:0;">At CentreStage we continue to celebrate the stories that educate, entertain and inspire us; just as the Wadawurrung people have done for thousands of years.</p>
335      </div>
336      <div>
337        <div class="cs-imgz" style="margin-bottom:32px;"><img src="https://static.wixstatic.com/media/35cad6_792ff69df28f4a63b3cbaafa561b7276~mv2.jpg/v1/fill/w_1000,h_1200,al_c,q_85,enc_avif,quality_auto/file.avif" alt="On stage" style="width:100%; aspect-ratio:4/5; object-fit:cover;"></div>
338        <div style="border:1px solid #0A0A0A; padding:32px;">
339          <div style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:20px;">At CentreStage, we</div>
340          <ul style="list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; font-size:16px;">
341            <li style="display:flex; gap:12px;"><span style="color:#6B6B68;">/</span>respect our volunteers, staff and performers</li>
342            <li style="display:flex; gap:12px;"><span style="color:#6B6B68;">/</span>create ongoing and sustainable theatre</li>
343            <li style="display:flex; gap:12px;"><span style="color:#6B6B68;">/</span>use benchmarks and surveys to constantly improve</li>
344            <li style="display:flex; gap:12px;"><span style="color:#6B6B68;">/</span>remain ethical and true to that Geelong spirit</li>
345            <li style="display:flex; gap:12px;"><span style="color:#6B6B68;">/</span>don't pre-cast</li>
346            <li style="display:flex; gap:12px;"><span style="color:#6B6B68;">/</span>create a 'buzz' for theatre in Victoria</li>
347            <li style="display:flex; gap:12px;"><span style="color:#6B6B68;">/</span>improve the standards in amateur theatre</li>
348          </ul>
349        </div>
350      </div>
351    </section>
352    <section style="border-top:1px solid #D9D5CC; max-width:1600px; margin:0 auto; padding:96px 48px;">
353      <div style="display:grid; grid-template-columns:auto 1fr; gap:56px; align-items:start;">
354        <span style="font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:130px; line-height:.6; color:#2E6FB7;">/</span>
355        <div>
356          <p style="font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:clamp(24px,2.8vw,38px); letter-spacing:-.02em; line-height:1.2; margin:0 0 28px; text-wrap:balance;">“Small opportunities are often the beginning of great enterprises. At CentreStage we value new ideas, innovative team members and outcomes that will drive our team to become a truly iconic organisation that benefits the entire Geelong community.”</p>
357          <div style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#6B6B68;">David Greenwood OAM &nbsp;/&nbsp; Managing Director</div>
358        </div>
359      </div>
360    </section>
361    <section style="max-width:1600px; margin:0 auto; padding:0 48px 96px;">
362      <div style="display:flex; align-items:center; gap:16px; margin-bottom:48px;">
363        <span style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#6B6B68;">Our story so far</span>
364        <div style="flex:1; height:1px; background:#D9D5CC;"></div>
365        <span style="font-family:'JetBrains Mono',monospace; font-size:12px; color:#6B6B68;">2010 → 2027</span>
366      </div>
367      <div style="border-top:1px solid #D9D5CC;">
368        <sc-for list="{{ milestones }}" as="m" hint-placeholder-count="8">
369          <div class="cs-row" style="display:grid; grid-template-columns:140px 1fr; gap:32px; align-items:baseline; padding:22px 12px; border-bottom:1px solid #D9D5CC; transition:background .2s;">
370            <span style="font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:28px; letter-spacing:-.02em; color:#2E6FB7;">{{ m.y }}</span>
371            <span style="font-size:18px; line-height:1.5;">{{ m.t }}</span>
372          </div>
373        </sc-for>
374      </div>
375    </section>
376    <section style="background:#0A0A0A; color:#F4F1EA;">
377      <div style="max-width:1600px; margin:0 auto; padding:96px 48px;">
378        <span style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#A8A59E;">We Are People Plan &nbsp;/&nbsp; Corporate social responsibility</span>
379        <h2 style="font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:clamp(36px,4.4vw,64px); letter-spacing:-.02em; line-height:1; margin:20px 0 40px; max-width:20ch;">Our culture, shared and proudly embraced by all people.</h2>
380        <div style="display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#1F1F1D; border:1px solid #1F1F1D;">
381          <sc-for list="{{ csr }}" as="c" hint-placeholder-count="6">
382            <div style="background:#0A0A0A; padding:32px 28px;">
383              <div style="font-family:'JetBrains Mono',monospace; font-size:12px; color:#F2D65A; margin-bottom:14px;">{{ c.n }}</div>
384              <div style="font-size:17px; line-height:1.5; color:#F4F1EA;">{{ c.t }}</div>
385            </div>
386          </sc-for>
387        </div>
388      </div>
389    </section>
390    <section style="background:#ECE7DB;">
391      <div style="max-width:1600px; margin:0 auto; padding:96px 48px;">
392        <div style="display:flex; align-items:center; gap:16px; margin-bottom:48px;">
393          <span style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#6B6B68;">Our values</span>
394          <div style="flex:1; height:1px; background:#D9D5CC;"></div>
395          <span style="font-family:'JetBrains Mono',monospace; font-size:12px; color:#6B6B68;">We Are People Plan</span>
396        </div>
397        <div style="display:grid; grid-template-columns:repeat(4,1fr); gap:24px;">
398          <sc-for list="{{ values }}" as="v" hint-placeholder-count="4">
399            <div style="background:#F4F1EA; border-top:5px solid {{ v.color }}; padding:32px 28px 36px;">
400              <h3 style="font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:26px; letter-spacing:-.02em; margin:0 0 14px; color:{{ v.color }};">{{ v.k }}</h3>
401              <p style="font-size:15px; line-height:1.55; color:#3A3A37; margin:0;">{{ v.d }}</p>
402            </div>
403          </sc-for>
404        </div>
405      </div>
406    </section>
407    <section style="background:#0A0A0A; color:#F4F1EA;">
408      <div style="max-width:1600px; margin:0 auto; padding:96px 48px;">
409        <div style="display:flex; align-items:center; gap:16px; margin-bottom:48px;">
410          <span style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#A8A59E;">Community &amp; partnerships</span>
411          <div style="flex:1; height:1px; background:#1F1F1D;"></div>
412          <span style="font-family:'JetBrains Mono',monospace; font-size:12px; color:#A8A59E;">Clever, creative, connected</span>
413        </div>
414        <h2 style="font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:clamp(32px,4vw,56px); letter-spacing:-.02em; line-height:1; margin:0 0 44px; max-width:22ch;">We build careers slowly, and we do it together.</h2>
415        <div style="display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#1F1F1D; border:1px solid #1F1F1D;">
416          <sc-for list="{{ partners }}" as="p" hint-placeholder-count="6">
417            <div style="background:#0A0A0A; padding:32px 28px;">
418              <h3 style="font-size:19px; font-weight:700; letter-spacing:-.01em; margin:0 0 10px;">{{ p.t }}</h3>
419              <p style="font-size:15px; line-height:1.55; color:#A8A59E; margin:0;">{{ p.d }}</p>
420            </div>
421          </sc-for>
422        </div>
423      </div>
424    </section>
425    <section style="max-width:1600px; margin:0 auto; padding:96px 48px 0;">
426      <div style="border:1px solid #0A0A0A; padding:56px 48px; display:grid; grid-template-columns:1fr auto; gap:48px; align-items:center;">
427        <div>
428          <span style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#6B6B68;">Costume &amp; set hire</span>
429          <h2 style="font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:clamp(28px,3.4vw,44px); letter-spacing:-.02em; line-height:1.02; margin:14px 0 14px;">The perfect solution to Geelong costume hire.</h2>
430          <p style="font-size:17px; line-height:1.6; color:#3A3A37; max-width:60ch; margin:0;">You may not know this — but CentreStage does costume and set hire, available to theatre companies, schools, organisations and individuals. (Please note this service is not available for private hire such as parties or dress-up days.)</p>
431        </div>
432        <a class="cs-btn" href="/contact">Enquire about hire →</a>
433      </div>
434    </section>
435    <section style="max-width:1600px; margin:0 auto; padding:96px 48px;">
436      <div style="display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#D9D5CC; border:1px solid #D9D5CC;">
437        <a href="/health" class="cs-row" style="background:#F4F1EA; padding:40px 36px; display:block; transition:background .2s;">
438          <h3 style="font-size:24px; font-weight:700; letter-spacing:-.01em; margin:0 0 12px;">Health, Wellbeing &amp; Inclusion</h3>
439          <p style="font-size:15px; color:#3A3A37; margin:0 0 20px; line-height:1.55;">Resources, helplines and our cultural framework for a safe and supportive environment.</p>
440          <span style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;">Explore →</span>
441        </a>
442        <a href="/productions" class="cs-row" style="background:#F4F1EA; padding:40px 36px; display:block; transition:background .2s;">
443          <h3 style="font-size:24px; font-weight:700; letter-spacing:-.01em; margin:0 0 12px;">Previous Productions</h3>
444          <p style="font-size:15px; color:#3A3A37; margin:0 0 20px; line-height:1.55;">Over 70 shows since 2010. Browse the full history of the CentreStage stage.</p>
445          <span style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;">See the list →</span>
446        </a>
447        <a href="/involved" class="cs-row" style="background:#F4F1EA; padding:40px 36px; display:block; transition:background .2s;">
448          <h3 style="font-size:24px; font-weight:700; letter-spacing:-.01em; margin:0 0 12px;">How to Get Involved</h3>
449          <p style="font-size:15px; color:#3A3A37; margin:0 0 20px; line-height:1.55;">Paid roles, orchestra, volunteering, work experience and internships. There's a place for you.</p>
450          <span style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;">Join us →</span>
451        </a>
452      </div>
453    </section>
454    <section style="max-width:1100px; margin:0 auto; padding:0 48px 96px;">
455      <div style="display:flex; align-items:center; gap:16px; margin-bottom:40px;">
456        <span style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#6B6B68;">Frequently asked</span>
457        <div style="flex:1; height:1px; background:#D9D5CC;"></div>
458      </div>
459      <div style="border-top:1px solid #D9D5CC;">
460        <sc-for list="{{ faqGeneral }}" as="f" hint-placeholder-count="4">
461          <div style="border-bottom:1px solid #D9D5CC; padding:26px 0; display:grid; grid-template-columns:1fr 1.4fr; gap:40px; align-items:start;">
462            <h3 style="font-size:19px; font-weight:700; letter-spacing:-.01em; margin:0;">{{ f.q }}</h3>
463            <p style="font-size:16px; line-height:1.6; color:#3A3A37; margin:0;">{{ f.a }}</p>
464          </div>
465        </sc-for>
466      </div>
467    </section>
468  </div>
469  </sc-if>
470
471  <!-- ══════════════ EDUCATION ══════════════ -->
472  <sc-if value="{{ isEducation }}">
473  <div class="cs-fade">
474    <section style="background:#0A0A0A; color:#F4F1EA;">
475      <div style="max-width:1600px; margin:0 auto; padding:96px 48px;">
476        <span style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#A8A59E;">CentreStage Performing Arts Academy (CPAA)</span>
477        <h1 style="font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:clamp(56px,9vw,140px); letter-spacing:-.03em; line-height:.9; margin:20px 0 0;">Education.</h1>
478        <div style="margin-top:40px; display:grid; grid-template-columns:1fr auto; gap:48px; align-items:end;">
479          <p style="font-size:19px; line-height:1.6; max-width:56ch; margin:0; color:#F4F1EA;">Geelong's largest theatre tuition programme. Start your education journey with weekly group classes or private 1:1 lessons — for young performers aged 4 to 18.</p>
480          <a class="cs-btn cs-btn--inv" href="mailto:[email protected]">Register for 2026 →</a>
481        </div>
482      </div>
483    </section>
484    <section style="max-width:1600px; margin:0 auto; padding:80px 48px 0;">
485      <div style="display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#D9D5CC; border:1px solid #D9D5CC;">
486        <sc-for list="{{ classes }}" as="c" hint-placeholder-count="3">
487          <a href="{{ c.href }}" class="cs-row" style="background:#F4F1EA; padding:40px 36px 48px; display:block; transition:background .2s;">
488            <div style="font-family:'JetBrains Mono',monospace; font-size:12px; color:#6B6B68;">{{ c.n }}</div>
489            <h3 style="font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:34px; letter-spacing:-.02em; margin:18px 0 14px;">{{ c.t }}</h3>
490            <p style="font-size:16px; line-height:1.55; color:#3A3A37; margin:0 0 22px;">{{ c.d }}</p>
491            <span style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;">{{ c.cta }} →</span>
492          </a>
493        </sc-for>
494      </div>
495    </section>
496    <section style="max-width:1600px; margin:0 auto; padding:80px 48px 96px; display:grid; grid-template-columns:1.3fr 1fr; gap:80px; align-items:start;">
497      <div style="font-size:18px; line-height:1.7;">
498        <h2 style="font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:clamp(32px,3.6vw,48px); letter-spacing:-.02em; line-height:1; margin:0 0 28px;">Weekly musical theatre classes.</h2>
499        <p style="margin:0 0 22px;">CentreStage has always recognised the importance of an educational platform that caters to both the local Geelong and broader Australian theatre markets. Our mission is to provide outstanding and measurable learning outcomes, developed by some of Geelong's most respected educators and performers.</p>
500        <p style="margin:0 0 22px;">Our Performing Arts Academy is designed to meet the needs of young people aged 4 to 18, offering a comprehensive programme that enhances not only performance skills but also theatre etiquette, practical skills like costumes and makeup, and the opportunity to work alongside some of Australia's leading theatre professionals.</p>
501        <p style="margin:0 0 22px;">As Geelong's largest theatre tuition programme, we are proud to operate with DET and DHHS-approved guidelines. Parents can have peace of mind knowing that their children are being taught by registered staff, including VIT-accredited teachers and industry professionals.</p>
502        <p style="margin:0;">As a CPAA member, you'll learn new skills and develop a performance portfolio, participate in a variety of musical theatre performances, and build a strong network of theatre friends and professionals.</p>
503        <div style="display:flex; gap:16px; margin-top:32px; flex-wrap:wrap;">
504          <a class="cs-btn" href="https://dancestudio-pro.com/online/signup.php?account_id=26523" target="_blank" rel="noopener">Register now →</a>
505          <a class="cs-btn" href="assets/CentreStage-CPAA-Booklet-2026.pdf" target="_blank" rel="noopener">Download booklet</a>
506        </div>
507      </div>
508      <div class="cs-imgz"><img src="https://static.wixstatic.com/media/35cad6_a767e0cb242746359b846997445396e8~mv2.jpg/v1/fill/w_1000,h_1250,al_c,q_85,enc_avif,quality_auto/file.avif" alt="CPAA students" style="width:100%; aspect-ratio:4/5; object-fit:cover;"></div>
509    </section>
510
511    <!-- Troupes -->
512    <section style="max-width:1600px; margin:0 auto; padding:0 48px 24px;">
513      <div style="display:flex; align-items:center; gap:16px; margin-bottom:40px;">
514        <span style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#6B6B68;">Three troupes, one academy</span>
515        <div style="flex:1; height:1px; background:#D9D5CC;"></div>
516      </div>
517      <div style="display:grid; grid-template-columns:repeat(3,1fr); gap:24px;">
518        <sc-for list="{{ troupes }}" as="t" hint-placeholder-count="3">
519          <div style="border:1px solid #D9D5CC; border-top:5px solid {{ t.color }}; padding:32px 28px 36px; display:flex; flex-direction:column;">
520            <div style="font-family:'JetBrains Mono',monospace; font-size:12px; color:{{ t.color }}; font-weight:600;">{{ t.age }}</div>
521            <h3 style="font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:30px; letter-spacing:-.02em; margin:14px 0 12px;">{{ t.n }}</h3>
522            <p style="font-size:15px; line-height:1.55; color:#3A3A37; margin:0 0 20px;">{{ t.d }}</p>
523            <div style="margin-top:auto; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:{{ t.color }};">{{ t.show }}</div>
524          </div>
525        </sc-for>
526      </div>
527    </section>
528
529    <!-- What's included + facts -->
530    <section style="max-width:1600px; margin:0 auto; padding:64px 48px; display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start;">
531      <div>
532        <h2 style="font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:clamp(28px,3.4vw,42px); letter-spacing:-.02em; margin:0 0 24px;">What's included.</h2>
533        <div style="display:flex; flex-direction:column;">
534          <sc-for list="{{ eduIncluded }}" as="i" hint-placeholder-count="6">
535            <div style="display:flex; gap:14px; padding:14px 0; border-top:1px solid #D9D5CC; font-size:16px; line-height:1.5;"><span style="color:#2E6FB7; font-weight:900;">/</span><span>{{ i }}</span></div>
536          </sc-for>
537        </div>
538      </div>
539      <div style="display:grid; grid-template-columns:1fr 1fr; gap:1px; background:#D9D5CC; border:1px solid #D9D5CC;">
540        <sc-for list="{{ eduFacts }}" as="f" hint-placeholder-count="4">
541          <div style="background:#F4F1EA; padding:28px 24px;">
542            <div style="font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:22px; letter-spacing:-.02em; margin-bottom:8px;">{{ f.n }}</div>
543            <div style="font-size:14px; line-height:1.5; color:#3A3A37;">{{ f.d }}</div>
544          </div>
545        </sc-for>
546      </div>
547    </section>
548
549    <!-- Private & group tuition -->
550    <section style="max-width:1600px; margin:0 auto; padding:0 48px 24px;">
551      <div style="display:flex; align-items:center; gap:16px; margin-bottom:40px;">
552        <span style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#6B6B68;">Private &amp; group tuition</span>
553        <div style="flex:1; height:1px; background:#D9D5CC;"></div>
554      </div>
555      <div style="display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#D9D5CC; border:1px solid #D9D5CC;">
556        <sc-for list="{{ privateLessons }}" as="p" hint-placeholder-count="3">
557          <a href="{{ p.href }}" class="cs-row" style="background:#F4F1EA; padding:36px 32px; display:block; border-bottom:4px solid {{ p.color }}; transition:background .2s;">
558            <h3 style="font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:26px; letter-spacing:-.02em; margin:0 0 12px;">{{ p.t }}</h3>
559            <p style="font-size:15px; line-height:1.55; color:#3A3A37; margin:0 0 20px;">{{ p.d }}</p>
560            <span style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:{{ p.color }};">Find out more →</span>
561          </a>
562        </sc-for>
563      </div>
564    </section>
565
566    <!-- Safety strip -->
567    <section style="background:#0A0A0A; color:#F4F1EA;">
568      <div style="max-width:1600px; margin:0 auto; padding:72px 48px; display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;">
569        <div>
570          <span style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#7FD3FF;">Safe, inclusive, accountable</span>
571          <h2 style="font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:clamp(30px,3.6vw,48px); letter-spacing:-.02em; line-height:1.02; margin:18px 0 0;">Child safety is at the centre of everything we do.</h2>
572        </div>
573        <div style="font-size:17px; line-height:1.7; color:#EAF4FF;">
574          <p style="margin:0 0 18px;">We operate under the Victorian Child Safe Standards. All staff complete Child Safety Mandatory Training and hold Working with Children Checks, and our classes are led by VIT-registered educators under DET and DHHS-approved guidelines.</p>
575          <p style="margin:0 0 24px;">Our published Child Safety Plan and We Are People Plan set out our commitment to every young performer: We Belong, We Create, We Listen, We Care.</p>
576          <div style="display:flex; gap:14px; flex-wrap:wrap;">
577            <a class="cs-btn cs-btn--inv" href="/post/child-safety-plan">Read our Child Safety Plan →</a>
578            <a class="cs-btn" href="/health" style="background:transparent; color:#EAF4FF; border-color:rgba(255,255,255,.5);">Health &amp; wellbeing</a>
579          </div>
580        </div>
581      </div>
582    </section>
583
584    <!-- Education FAQ -->
585    <section style="max-width:1100px; margin:0 auto; padding:80px 48px 96px;">
586      <div style="display:flex; align-items:center; gap:16px; margin-bottom:40px;">
587        <span style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#6B6B68;">Frequently asked</span>
588        <div style="flex:1; height:1px; background:#D9D5CC;"></div>
589      </div>
590      <div style="border-top:1px solid #D9D5CC;">
591        <sc-for list="{{ faqEdu }}" as="f" hint-placeholder-count="5">
592          <div style="border-bottom:1px solid #D9D5CC; padding:26px 0; display:grid; grid-template-columns:1fr 1.4fr; gap:40px; align-items:start;">
593            <h3 style="font-size:19px; font-weight:700; letter-spacing:-.01em; margin:0;">{{ f.q }}</h3>
594            <p style="font-size:16px; line-height:1.6; color:#3A3A37; margin:0;">{{ f.a }}</p>
595          </div>
596        </sc-for>
597      </div>
598    </section>
599  </div>
600  </sc-if>
601
602  <!-- ══════════════ HEALTH ══════════════ -->
603  <sc-if value="{{ isHealth }}">
604  <div class="cs-fade">
605    <section style="max-width:1600px; margin:0 auto; padding:64px 48px 0;">
606      <div style="display:flex; align-items:center; gap:16px; margin-bottom:40px;">
607        <span style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#6B6B68;">Health, Wellbeing &amp; Inclusion</span>
608        <div style="flex:1; height:1px; background:#D9D5CC;"></div>
609        <span style="font-family:'JetBrains Mono',monospace; font-size:12px; color:#6B6B68;">2 × Healthy Workplace Award</span>
610      </div>
611      <h1 style="font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:clamp(48px,7vw,112px); letter-spacing:-.03em; line-height:.92; margin:0; max-width:16ch;">It's always okay to ask for help.</h1>
612    </section>
613    <section style="max-width:1600px; margin:0 auto; padding:56px 48px 80px; display:grid; grid-template-columns:1.2fr 1fr; gap:80px; align-items:start;">
614      <div style="font-size:18px; line-height:1.7; color:#0A0A0A;">
615        <p style="margin:0 0 22px;">As a company, we are only as good as our people. Our volunteers, students, performers and staff are all valuable members of our community — and part of that is recognising the importance of our people's health and wellbeing.</p>
616        <p style="margin:0 0 22px;">Through a revised cultural framework, we made a pledge to work tirelessly to identify, support and accommodate the needs of our theatre community from a health perspective. To achieve this, we have partnered with Beyond Blue and the Arts Wellbeing Collective.</p>
617        <p style="margin:0;">Performing can be a physically exhausting and emotionally draining job, and you're only human. For more information, please contact our Health and Wellbeing Manager, Marnie Parkinson.</p>
618        <div style="display:flex; flex-wrap:wrap; gap:12px; margin-top:32px;">
619          <a class="cs-btn cs-btn--sec" href="https://www.centrestage.org.au/_files/ugd/35cad6_6cc8b5faad5549c6827b2e30c15f1096.pdf" target="_blank" rel="noopener">We Are People Plan</a>
620          <a class="cs-btn cs-btn--sec" href="CentreStage-Policies.html#child-safety" target="_blank" rel="noopener">Child Safety Plan</a>
621          <a class="cs-btn cs-btn--sec" href="CentreStage-Policies.html#first-nations-rap" target="_blank" rel="noopener">First Nations RAP</a>
622          <a class="cs-btn cs-btn--sec" href="CentreStage-Policies.html#disability-access" target="_blank" rel="noopener">Disability Plan</a>
623        </div>
624      </div>
625      <div style="background:#0A0A0A; color:#F4F1EA; padding:40px;">
626        <div style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#F2D65A; margin-bottom:8px;">Get help now</div>
627        <p style="font-size:14px; color:#A8A59E; margin:0 0 24px; line-height:1.5;">If you or someone you know is at immediate risk, call 000.</p>
628        <div style="display:flex; flex-direction:column;">
629          <sc-for list="{{ helplines }}" as="h" hint-placeholder-count="9">
630            <div style="display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:14px 0; border-top:1px solid #1F1F1D;">
631              <div><div style="font-size:15px; font-weight:700;">{{ h.t }}</div><div style="font-size:12px; color:#A8A59E;">{{ h.note }}</div></div>
632              <div style="font-family:'JetBrains Mono',monospace; font-size:15px; white-space:nowrap;">{{ h.n }}</div>
633            </div>
634          </sc-for>
635        </div>
636      </div>
637    </section>
638    <section style="max-width:1600px; margin:0 auto; padding:0 48px 80px;">
639      <div style="display:flex; align-items:center; gap:16px; margin-bottom:36px;">
640        <span style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;">Policies &amp; documents</span>
641        <div style="flex:1; height:1px; background:#D9D5CC;"></div>
642        <span style="font-family:'JetBrains Mono',monospace; font-size:12px; color:#6B6B68;">Download</span>
643      </div>
644      <div style="display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:#D9D5CC; border:1px solid #D9D5CC;">
645        <sc-for list="{{ policies }}" as="p" hint-placeholder-count="8">
646          <a href="{{ p.href }}" target="_blank" rel="noopener" class="cs-row" style="background:#F4F1EA; padding:28px 26px; display:flex; flex-direction:column; justify-content:space-between; gap:24px; min-height:150px; transition:background .2s;">
647            <span style="font-size:17px; font-weight:700; letter-spacing:-.01em; line-height:1.3;">{{ p.t }}</span>
648            <span style="font-family:'JetBrains Mono',monospace; font-size:12px; color:#2E6FB7;">{{ p.kind }} ↓</span>
649          </a>
650        </sc-for>
651      </div>
652      <div style="margin-top:32px; border:1px solid #0A0A0A; padding:32px 36px; display:grid; grid-template-columns:1fr auto; gap:32px; align-items:center;">
653        <div>
654          <span style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#6B6B68;">Local help partner</span>
655          <h3 style="font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:26px; letter-spacing:-.02em; margin:12px 0 8px;">Park Street General Practice</h3>
656          <p style="font-size:16px; line-height:1.55; color:#3A3A37; margin:0; max-width:64ch;">The doctors at Park St understand the demands of working within the arts. For emergency appointments, please mention that you are associated with CentreStage. 16 Park St, Geelong VIC 3220 &nbsp;·&nbsp; (03) 5223 2722</p>
657        </div>
658        <a class="cs-btn cs-btn--sec" href="https://www.parkstgp.com.au" target="_blank" rel="noopener">Visit Park St ↗</a>
659      </div>
660    </section>
661    <section style="max-width:1600px; margin:0 auto; padding:0 48px 96px;">
662      <div style="display:flex; align-items:center; gap:16px; margin-bottom:36px;">
663        <span style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;">Policy library</span>
664        <div style="flex:1; height:1px; background:#D9D5CC;"></div>
665        <span style="font-family:'JetBrains Mono',monospace; font-size:12px; color:#6B6B68;">20 policies</span>
666      </div>
667      <div style="display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:#D9D5CC; border:1px solid #D9D5CC;">
668        <sc-for list="{{ policyLibrary }}" as="p" hint-placeholder-count="20">
669          <a href="{{ p.href }}" target="_blank" rel="noopener" class="cs-row" style="background:#F4F1EA; padding:26px 24px 30px; border-top:4px solid #2E6FB7; display:flex; flex-direction:column; gap:10px; text-decoration:none; color:inherit; transition:background .2s;">
670            <h3 style="font-size:16px; font-weight:700; letter-spacing:-.01em; line-height:1.25; margin:0;">{{ p.t }}</h3>
671            <p style="font-size:13px; line-height:1.5; color:#3A3A37; margin:0;">{{ p.d }}</p>
672            <span style="font-family:'JetBrains Mono',monospace; font-size:11px; color:#2E6FB7; margin-top:2px;">Read →</span>
673          </a>
674        </sc-for>
675      </div>
676      <p style="margin-top:24px; font-size:14px; color:#6B6B68;">Full copies of any policy are available on request &mdash; <a class="cs-link-u" href="/contact" style="font-weight:700;">contact our team</a>.</p>
677    </section>
678    <section style="max-width:1600px; margin:0 auto; padding:0 48px 96px;">
679      <div style="display:flex; align-items:center; gap:16px; margin-bottom:36px;">
680        <span style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;">Digital wellbeing resources</span>
681        <div style="flex:1; height:1px; background:#D9D5CC;"></div>
682      </div>
683      <div style="display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:#D9D5CC; border:1px solid #D9D5CC;">
684        <sc-for list="{{ resources }}" as="r" hint-placeholder-count="6">
685          <a href="{{ r.href }}" class="cs-row" style="background:#F4F1EA; padding:26px 32px; display:flex; justify-content:space-between; align-items:center; gap:16px; transition:background .2s;">
686            <span style="font-size:17px; font-weight:700; letter-spacing:-.01em;">{{ r.t }}</span>
687            <span style="font-size:18px;">↗</span>
688          </a>
689        </sc-for>
690      </div>
691    </section>
692  </div>
693  </sc-if>
694
695  <!-- ══════════════ PREVIOUS PRODUCTIONS ══════════════ -->
696  <sc-if value="{{ isProductions }}">
697  <div class="cs-fade">
698    <section style="max-width:1600px; margin:0 auto; padding:64px 48px 0;">
699      <div style="display:flex; align-items:center; gap:16px; margin-bottom:40px;">
700        <span style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#6B6B68;">Our history</span>
701        <div style="flex:1; height:1px; background:#D9D5CC;"></div>
702        <span style="font-family:'JetBrains Mono',monospace; font-size:12px; color:#6B6B68;">{{ prodCount }} productions since 2010</span>
703      </div>
704      <h1 style="font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:clamp(56px,9vw,144px); letter-spacing:-.03em; line-height:.9; margin:0;">Previous<br>productions.</h1>
705      <p style="font-size:19px; line-height:1.55; max-width:52ch; margin:32px 0 0; color:#3A3A37;">We're pretty proud of the shows we've produced. Browse the list below, or visit our <a class="cs-link-u" href="https://www.facebook.com/centrestageaus" target="_blank" rel="noopener" style="font-weight:700;">Facebook page</a> to view the full albums.</p>
706    </section>
707    <section style="max-width:1600px; margin:0 auto; padding:56px 48px 96px; border-top:1px solid #D9D5CC;">
708      <sc-for list="{{ productions }}" as="p" hint-placeholder-count="12">
709        <div class="cs-prod" style="display:grid; grid-template-columns:110px 1fr auto; gap:24px; align-items:baseline; padding:22px 12px; border-bottom:1px solid #D9D5CC; transition:background .2s,color .2s;">
710          <span class="cs-prod-y" style="font-family:'JetBrains Mono',monospace; font-size:14px; color:#6B6B68; transition:color .2s;">{{ p.y }}</span>
711          <span style="font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:clamp(22px,2.6vw,34px); letter-spacing:-.02em;">{{ p.t }}</span>
712          <span style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.5;">{{ p.tag }}</span>
713        </div>
714      </sc-for>
715    </section>
716  </div>
717  </sc-if>
718
719  <!-- ══════════════ GET INVOLVED ══════════════ -->
720  <sc-if value="{{ isInvolved }}">
721  <div class="cs-fade">
722    <section style="max-width:1600px; margin:0 auto; padding:64px 48px 0;">
723      <div style="display:flex; align-items:center; gap:16px; margin-bottom:40px;">
724        <span style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#6B6B68;">How to get involved</span>
725        <div style="flex:1; height:1px; background:#D9D5CC;"></div>
726      </div>
727      <h1 style="font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:clamp(48px,7.5vw,120px); letter-spacing:-.03em; line-height:.9; margin:0; max-width:14ch;">Be part of the CentreStage family.</h1>
728    </section>
729    <section style="max-width:1600px; margin:0 auto; padding:56px 48px 96px; display:grid; grid-template-columns:1.2fr 1fr; gap:80px; align-items:start;">
730      <div style="font-size:18px; line-height:1.7;">
731        <p style="margin:0 0 22px; font-size:22px; font-weight:700; letter-spacing:-.01em; line-height:1.4;">We're always looking for fresh new ideas and supportive people to join our team.</p>
732        <p style="margin:0 0 22px;">We are thrilled to offer a wide range of opportunities for anyone who loves the theatre, whether you are a seasoned professional or just starting out. Our company is committed to creating exceptional performances that inspire and delight our audiences.</p>
733        <p style="margin:0 0 22px;">We believe in nurturing and developing talent at every level, and we welcome anyone who is passionate about theatre to join us. We offer a variety of roles, including paid positions, orchestra, volunteering opportunities, work experience, and internships.</p>
734        <p style="margin:0;">Whether you are an actor, musician, technician, or just someone who loves the theatre, we invite you to get in touch and join our vibrant community. Together, we can create something truly magical on stage.</p>
735        <a class="cs-btn" href="/contact" style="margin-top:32px;">Register your interest →</a>
736      </div>
737      <div style="display:grid; grid-template-columns:1fr; gap:1px; background:#D9D5CC; border:1px solid #D9D5CC;">
738        <sc-for list="{{ roles }}" as="r" hint-placeholder-count="5">
739          <div style="background:#F4F1EA; padding:24px 28px;">
740            <div style="font-family:'JetBrains Mono',monospace; font-size:12px; color:#6B6B68; margin-bottom:6px;">{{ r.n }}</div>
741            <div style="font-size:19px; font-weight:700; letter-spacing:-.01em;">{{ r.t }}</div>
742          </div>
743        </sc-for>
744      </div>
745    </section>
746  </div>
747  </sc-if>
748
749  <!-- ══════════════ BLOG INDEX ══════════════ -->
750  <sc-if value="{{ isBlog }}">
751  <div class="cs-fade">
752    <section style="max-width:1600px; margin:0 auto; padding:64px 48px 0;">
753      <div style="display:flex; align-items:center; gap:16px; margin-bottom:40px;">
754        <span style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#6B6B68;">The Journal</span>
755        <div style="flex:1; height:1px; background:#D9D5CC;"></div>
756        <span style="font-family:'JetBrains Mono',monospace; font-size:12px; color:#6B6B68;">{{ postCount }} posts</span>
757      </div>
758      <h1 style="font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:clamp(64px,10vw,160px); letter-spacing:-.03em; line-height:.9; margin:0;">Latest news.</h1>
759    </section>
760    <section style="max-width:1600px; margin:0 auto; padding:64px 48px 96px;">
761      <div style="display:grid; grid-template-columns:repeat(3,1fr); gap:40px 36px;">
762        <sc-for list="{{ posts }}" as="p" hint-placeholder-count="9">
763          <a href="/post/{{ p.slug }}" style="display:block;">
764            <div class="cs-imgz"><img src="{{ p.img }}" alt="{{ p.title }}" style="width:100%; aspect-ratio:4/3; object-fit:cover;"></div>
765            <div style="display:flex; gap:10px; align-items:center; margin-top:16px;"><span style="font-family:'JetBrains Mono',monospace; font-size:12px; color:#6B6B68;">{{ p.date }}</span><span style="font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:{{ p.catColor }}; padding:3px 8px;">{{ p.cat }}</span></div>
766            <h3 style="font-size:22px; font-weight:700; letter-spacing:-.01em; line-height:1.2; margin:10px 0 12px; text-wrap:pretty;">{{ p.title }}</h3>
767            <p style="font-size:15px; line-height:1.55; color:#3A3A37; margin:0;">{{ p.excerpt }}</p>
768          </a>
769        </sc-for>
770      </div>
771    </section>
772  </div>
773  </sc-if>
774
775  <!-- ══════════════ POST ══════════════ -->
776  <sc-if value="{{ isPost }}">
777  <div class="cs-fade">
778    <article style="max-width:820px; margin:0 auto; padding:48px 48px 0;">
779      <a class="cs-link-u" href="/blog" style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#6B6B68;">← Back to the Journal</a>
780      <div style="display:flex; gap:12px; margin-top:36px; font-family:'JetBrains Mono',monospace; font-size:13px; color:#6B6B68;"><span>{{ post.date }}</span><span style="color:#A8A59E;">/</span><span>{{ post.cat }}</span><span style="color:#A8A59E;">/</span><span>{{ post.read }}</span></div>
781      <h1 style="font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:clamp(34px,4.6vw,60px); letter-spacing:-.02em; line-height:1; margin:20px 0 24px; text-wrap:balance;">{{ post.title }}</h1>
782      <div style="font-size:13px; color:#6B6B68; font-family:'JetBrains Mono',monospace;">By {{ post.author }}</div>
783    </article>
784    <div style="max-width:1100px; margin:40px auto 0; padding:0 48px;">
785      <img src="{{ post.img }}" alt="{{ post.title }}" style="width:100%; aspect-ratio:16/9; object-fit:cover;">
786    </div>
787    <article style="max-width:820px; margin:0 auto; padding:56px 48px 40px; font-size:19px; line-height:1.7;">
788      <p style="font-size:24px; line-height:1.5; font-weight:700; letter-spacing:-.01em; margin:0 0 28px;">{{ post.excerpt }}</p>
789      <sc-for list="{{ post.body }}" as="para" hint-placeholder-count="4">
790        <p style="margin:0 0 24px;">{{ para }}</p>
791      </sc-for>
792      <sc-for list="{{ post.bodyRich }}" as="blk" hint-placeholder-count="6">
793        <sc-if value="{{ blk.h }}">
794          <h2 style="font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:26px; letter-spacing:-.01em; margin:44px 0 18px;">{{ blk.h }}</h2>
795        </sc-if>
796        <sc-if value="{{ blk.p }}">
797          <p style="margin:0 0 24px;">{{ blk.p }}</p>
798        </sc-if>
799        <sc-if value="{{ blk.list }}">
800          <ul style="list-style:none; margin:0 0 28px; padding:0; border-top:1px solid #D9D5CC;">
801            <sc-for list="{{ blk.list }}" as="li" hint-placeholder-count="4">
802              <li style="font-size:17px; line-height:1.55; padding:13px 0 13px 22px; position:relative; border-bottom:1px solid #D9D5CC;"><span style="position:absolute; left:0; color:#E8472B; font-weight:700;">/</span>{{ li }}</li>
803            </sc-for>
804          </ul>
805        </sc-if>
806        <sc-if value="{{ blk.img }}">
807          <figure style="margin:8px -48px 36px;">
808            <img src="{{ blk.img }}" alt="{{ blk.alt }}" style="width:100%; aspect-ratio:3/2; object-fit:cover; display:block;">
809            <sc-if value="{{ blk.cap }}">
810              <figcaption style="font-family:'JetBrains Mono',monospace; font-size:12px; color:#6B6B68; margin:12px 48px 0;">{{ blk.cap }}</figcaption>
811            </sc-if>
812          </figure>
813        </sc-if>
814      </sc-for>
815      <sc-if value="{{ post.gallery }}">
816        <div style="border-top:2px solid #0A0A0A; margin:44px 0 0; padding-top:28px;">
817          <div style="display:flex; align-items:baseline; gap:16px; margin-bottom:20px;">
818            <span style="font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#6B6B68;">Gallery</span>
819            <span style="font-family:'JetBrains Mono',monospace; font-size:12px; color:#6B6B68;">scroll &rarr;</span>
820          </div>
821          <div class="cs-gal" style="display:flex; gap:20px; overflow-x:auto; padding:0 48px 18px; margin:0 -48px;">
822            <sc-for list="{{ post.gallery }}" as="g" hint-placeholder-count="6">
823              <figure style="margin:0; flex:none; width:420px; display:flex; flex-direction:column; gap:12px;">
824                <img src="{{ g.img }}" alt="{{ g.cap }}" loading="lazy" style="width:420px; height:420px; object-fit:cover; display:block; background:#0A2646;">
825                <figcaption style="font-family:'JetBrains Mono',monospace; font-size:12px; line-height:1.5; color:#6B6B68;">{{ g.cap }}</figcaption>
826              </figure>
827            </sc-for>
828          </div>
829        </div>
830      </sc-if>
831      <sc-if value="{{ post.cta }}">
832        <div style="border-top:2px solid #0A0A0A; margin:12px 0 0; padding-top:28px;">
833          <a class="cs-btn" href="{{ post.ctaHref }}" target="_blank" rel="noopener">{{ post.cta }}</a>
834        </div>
835      </sc-if>
836      <sc-if value="{{ post.noBody }}">
837        <div style="border-top:1px solid #D9D5CC; margin-top:8px; padding-top:28px;">
838          <p style="font-size:16px; color:#6B6B68; margin:0 0 20px;">This article is part of the CentreStage Journal. Read the complete piece on our current site.</p>
839          <a class="cs-btn cs-btn--sec" href="{{ post.url }}" target="_blank" rel="noopener">Continue reading →</a>
840        </div>
841      </sc-if>
842    </article>
843    <div style="max-width:820px; margin:0 auto; padding:0 48px 96px;">
844      <div style="border-top:1px solid #D9D5CC; padding-top:28px; display:flex; justify-content:space-between; align-items:center; gap:16px;">
845        <span style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#6B6B68;">Share the stage</span>
846        <a class="cs-btn cs-btn--sec" href="/blog">More from the Journal →</a>
847      </div>
848    </div>
849  </div>
850  </sc-if>
851
852  <!-- ══════════════ WEEKLY CLASSES ══════════════ -->
853  <sc-if value="{{ isWeekly }}">
854  <div class="cs-fade">
855    <section style="position:relative; background:#0A0A0A; color:#F4F1EA; overflow:hidden;">
856      <img src="https://static.wixstatic.com/media/35cad6_6b4dd2a6fd4047c092bae0ebc5631deb~mv2_d_2048_1365_s_2.jpg/v1/fill/w_1920,h_900,al_c,q_85,enc_avif,quality_auto/file.avif" alt="CentreStage students" style="position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.34;">
857      <div style="position:relative; max-width:1600px; margin:0 auto; padding:104px 48px;">
858        <a class="cs-link-u" href="/education" style="font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#F2D65A;">← Education</a>
859        <div style="font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#C9C6BF; margin-top:24px;">CentreStage Performing Arts Academy</div>
860        <h1 style="font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:clamp(48px,7.5vw,120px); letter-spacing:-.03em; line-height:.92; margin:16px 0 0;">Weekly Musical<br>Theatre Classes.</h1>
861        <p style="font-size:20px; line-height:1.55; max-width:58ch; margin:28px 0 0; color:#E6E3DC;">Weekly group tuition for young performers aged 4 to 18, across four terms aligned with the school year — acting, singing and dance, taught by registered educators and industry professionals.</p>
862        <div style="display:flex; gap:16px; margin-top:34px; flex-wrap:wrap;">
863          <a class="cs-btn cs-btn--inv" href="https://dancestudio-pro.com/online/index.php?account_id=26523" target="_blank" rel="noopener">Register for 2026 →</a>
864          <a class="cs-btn" href="mailto:[email protected][email protected],[email protected]&subject=New%20class%20interest" style="background:transparent; color:#F4F1EA; border-color:rgba(255,255,255,.5);">Register your interest</a>
865          <a class="cs-btn" href="assets/CentreStage-CPAA-Booklet-2026.pdf" target="_blank" rel="noopener" style="background:transparent; color:#F4F1EA; border-color:rgba(255,255,255,.5);">Download booklet</a>
866        </div>
867      </div>
868    </section>
869    <section style="max-width:1100px; margin:0 auto; padding:88px 48px 40px;">
870      <div style="font-size:18px; line-height:1.7; color:#0A0A0A;">
871        <p style="margin:0 0 22px; font-size:24px; line-height:1.45; font-weight:700; letter-spacing:-.01em;">Our Performing Arts Academy delivers outstanding, measurable learning outcomes, developed by some of Geelong's most respected educators and performers.</p>
872        <p style="margin:0 0 22px;">Designed for young people aged 4 to 18, the programme develops performance skills alongside theatre etiquette, practical skills like costumes and makeup, and the chance to work with some of Australia's leading theatre professionals. Across our four-term tuition programme, students also attend up to two large-scale CentreStage productions featuring adult performers from Geelong's amateur theatre community.</p>
873        <p style="margin:0;">We operate under DET and DHHS-approved guidelines, with registered staff including VIT-accredited teachers. CPAA was created in response to overwhelming demand from families, working with over 200 emerging performers in a single year, and it has continued to grow ever since.</p>
874      </div>
875    </section>
876    <section style="max-width:1600px; margin:0 auto; padding:24px 48px 40px;">
877      <div style="display:flex; align-items:center; gap:16px; margin-bottom:36px;">
878        <span style="font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#6B6B68;">As a member you will</span>
879        <div style="flex:1; height:1px; background:#D9D5CC;"></div>
880      </div>
881      <div style="display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#D9D5CC; border:1px solid #D9D5CC;">
882        <sc-for list="{{ weeklyBenefits }}" as="b" hint-placeholder-count="6">
883          <div style="background:#F4F1EA; padding:30px 28px; font-size:16px; line-height:1.5; font-weight:600; letter-spacing:-.01em;">{{ b }}</div>
884        </sc-for>
885      </div>
886    </section>
887    <section style="max-width:1600px; margin:0 auto; padding:40px 48px 96px;">
888      <div style="display:flex; align-items:center; gap:16px; margin-bottom:8px;">
889        <span style="font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#6B6B68;">How to enrol</span>
890        <div style="flex:1; height:1px; background:#D9D5CC;"></div>
891      </div>
892      <div style="display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:#D9D5CC; border:1px solid #D9D5CC;">
893        <sc-for list="{{ weeklySteps }}" as="s" hint-placeholder-count="7">
894          <div style="background:#F4F1EA; padding:30px 32px; display:flex; gap:20px; align-items:baseline;">
895            <span style="font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:600; color:#2E6FB7;">{{ s.n }}</span>
896            <div>
897              <h3 style="font-size:18px; font-weight:700; letter-spacing:-.01em; margin:0 0 6px;">{{ s.t }}</h3>
898              <p style="font-size:14px; line-height:1.55; color:#3A3A37; margin:0;">{{ s.d }}</p>
899            </div>
900          </div>
901        </sc-for>
902      </div>
903      <p style="margin-top:28px; font-size:15px; color:#3A3A37;">New to CentreStage? Register your interest at <a class="cs-link-u" href="mailto:[email protected][email protected],[email protected]&subject=New%20class%20interest" style="font-weight:700;">[email protected]</a>. Trouble registering online? Email <a class="cs-link-u" href="mailto:[email protected]" style="font-weight:700;">[email protected]</a> or call 0422 589 271. Classes run at our North Geelong and Vines Road studios.</p>
904    </section>
905  </div>
906  </sc-if>
907
908  <!-- ══════════════ PRIVATE SINGING ══════════════ -->
909  <sc-if value="{{ isSinging }}">
910  <div class="cs-fade">
911    <section style="position:relative; background:#0A0A0A; color:#F4F1EA; overflow:hidden;">
912      <img src="https://static.wixstatic.com/media/35cad6_1fcec063ea6a4fc5809aee49fbf8a0fa~mv2.jpg/v1/fill/w_1920,h_900,al_c,q_85,enc_avif,quality_auto/file.avif" alt="Vocal training" style="position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.32;">
913      <div style="position:relative; max-width:1600px; margin:0 auto; padding:104px 48px;">
914        <a class="cs-link-u" href="/education" style="font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#F2D65A;">← Education</a>
915        <div class="cs-mono-eyebrow" style="font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#C9C6BF; margin-top:24px;">One-to-one tuition · Voice &amp; Acting</div>
916        <h1 style="font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:clamp(48px,7.5vw,120px); letter-spacing:-.03em; line-height:.92; margin:16px 0 0;">Private Voice &amp;<br>Acting Lessons.</h1>
917        <p style="font-size:20px; line-height:1.55; max-width:58ch; margin:28px 0 0; color:#E6E3DC;">Personalised one-on-one Voice and Acting sessions with Jake Waterworth or Storm Randall — both highly experienced performers and educators. Practical, focused and outcome-driven, held Wednesday evenings in Fyansford.</p>
918        <div style="display:flex; gap:16px; margin-top:34px; flex-wrap:wrap;">
919          <a class="cs-btn cs-btn--inv" href="https://app.gostudiopro.com/online/index.php?account_id=26523" target="_blank" rel="noopener">Book a lesson →</a>
920          <a class="cs-btn" href="mailto:[email protected]" style="background:transparent; color:#F4F1EA; border-color:rgba(255,255,255,.5);">Ask a question</a>
921        </div>
922      </div>
923    </section>
924    <section style="max-width:1600px; margin:0 auto; padding:88px 48px 40px; display:grid; grid-template-columns:1.3fr 1fr; gap:64px; align-items:start;">
925      <div style="font-size:18px; line-height:1.7; color:#0A0A0A;">
926        <p style="margin:0 0 22px; font-size:22px; line-height:1.45; font-weight:700; letter-spacing:-.01em;">Tailored sessions designed to support students at every stage of their development.</p>
927        <p style="margin:0 0 22px;">Whether preparing for an audition, refining a self tape, strengthening vocal technique, or building confidence in performance, each session is practical, focused and outcome-driven. Jake and Storm bring current industry knowledge and real-world experience, ensuring students receive clear direction, constructive feedback and actionable strategies to improve their craft.</p>
928        <p style="margin:0;">These sessions are ideal for students seeking targeted improvement, preparing for professional opportunities, or wanting to accelerate their growth in a focused environment.</p>
929      </div>
930      <div style="background:#0A0A0A; color:#F4F1EA; padding:36px 34px;">
931        <div style="font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#F2D65A; margin-bottom:20px;">Session options</div>
932        <sc-for list="{{ singingRates }}" as="r" hint-placeholder-count="2">
933          <div style="display:flex; justify-content:space-between; align-items:baseline; padding:16px 0; border-top:1px solid #1F1F1D;">
934            <span style="font-size:17px; font-weight:700;">{{ r.d }} private session</span>
935            <span style="font-family:'JetBrains Mono',monospace; font-size:20px; color:#F4F1EA;">{{ r.p }}</span>
936          </div>
937        </sc-for>
938        <div style="border-top:1px solid #1F1F1D; margin-top:8px; padding-top:20px;">
939          <div style="font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#F2D65A; margin-bottom:10px;">Sessions held at</div>
940          <p style="font-size:15px; line-height:1.5; color:#F4F1EA; margin:0;">Unit 2, 255 Hamilton Highway, Fyansford</p>
941          <p style="font-size:13px; line-height:1.55; color:#A8A59E; margin:12px 0 0;">Term 3 sessions. Storm Randall is available Wednesday evenings. Jake Waterworth's Monday evening sessions are currently unavailable.</p>
942        </div>
943      </div>
944    </section>
945    <section style="max-width:1600px; margin:0 auto; padding:24px 48px 40px;">
946      <div style="display:flex; align-items:center; gap:16px; margin-bottom:36px;">
947        <span style="font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#6B6B68;">What students can work on</span>
948        <div style="flex:1; height:1px; background:#D9D5CC;"></div>
949      </div>
950      <div style="display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#D9D5CC; border:1px solid #D9D5CC;">
951        <sc-for list="{{ singingBenefits }}" as="b" hint-placeholder-count="9">
952          <div style="background:#F4F1EA; padding:24px 26px; font-size:15px; line-height:1.5; font-weight:600; letter-spacing:-.01em;">{{ b }}</div>
953        </sc-for>
954      </div>
955    </section>
956    <section style="max-width:1600px; margin:0 auto; padding:40px 48px 40px;">
957      <div style="display:flex; align-items:center; gap:16px; margin-bottom:36px;">
958        <span style="font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#6B6B68;">Your educators</span>
959        <div style="flex:1; height:1px; background:#D9D5CC;"></div>
960      </div>
961      <div style="display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:#D9D5CC; border:1px solid #D9D5CC;">
962        <sc-for list="{{ singingEducators }}" as="e" hint-placeholder-count="4">
963          <div style="background:#F4F1EA; padding:32px 34px; display:flex; flex-direction:column; gap:16px;">
964            <div class="cs-imgz" style="aspect-ratio:16/10; overflow:hidden; background:#ECE7DB;"><img src="{{ e.img }}" alt="{{ e.name }}" style="width:100%; height:100%; object-fit:cover;"></div>
965            <div>
966              <h3 style="font-size:20px; font-weight:700; letter-spacing:-.01em; margin:0;">{{ e.name }}</h3>
967              <div style="font-family:'JetBrains Mono',monospace; font-size:12px; color:#2E6FB7; margin-top:4px;">{{ e.when }}</div>
968            </div>
969            <p style="font-size:14px; line-height:1.6; color:#3A3A37; margin:0;">{{ e.bio }}</p>
970          </div>
971        </sc-for>
972      </div>
973    </section>
974    <section style="max-width:1600px; margin:0 auto; padding:40px 48px 96px;">
975      <div style="display:flex; align-items:center; gap:16px; margin-bottom:8px;">
976        <span style="font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#6B6B68;">How to book</span>
977        <div style="flex:1; height:1px; background:#D9D5CC;"></div>
978      </div>
979      <div style="display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:#D9D5CC; border:1px solid #D9D5CC;">
980        <sc-for list="{{ singingSteps }}" as="s" hint-placeholder-count="4">
981          <div style="background:#F4F1EA; padding:28px 26px;">
982            <span style="font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:600; color:#2E6FB7;">{{ s.n }}</span>
983            <h3 style="font-size:16px; font-weight:700; letter-spacing:-.01em; margin:10px 0 6px;">{{ s.t }}</h3>
984            <p style="font-size:13px; line-height:1.5; color:#3A3A37; margin:0;">{{ s.d }}</p>
985          </div>
986        </sc-for>
987      </div>
988      <div style="margin-top:28px;"><a class="cs-btn" href="https://app.gostudiopro.com/online/index.php?account_id=26523" target="_blank" rel="noopener">Book a lesson →</a></div>
989    </section>
990  </div>
991  </sc-if>
992
993  <!-- ══════════════ DANCE CLASSES ══════════════ -->
994  <sc-if value="{{ isDance }}">
995  <div class="cs-fade">
996    <section style="position:relative; background:#0A0A0A; color:#F4F1EA; overflow:hidden;">
997      <img src="https://static.wixstatic.com/media/35cad6_554e7cf4ca6a4e62aec2b090112d0862~mv2_d_2048_1367_s_2.jpg/v1/fill/w_1920,h_900,al_c,q_85,enc_avif,quality_auto/file.avif" alt="Dance class" style="position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.34;">
998      <div style="position:relative; max-width:1600px; margin:0 auto; padding:104px 48px;">
999        <a class="cs-link-u" href="/education" style="font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#F2D65A;">← Education</a>
1000        <div style="font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#C9C6BF; margin-top:24px;">Thursday nights · Norlane</div>
1001        <h1 style="font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:clamp(48px,7.5vw,120px); letter-spacing:-.03em; line-height:.92; margin:16px 0 0;">Dance Classes.</h1>
1002        <p style="font-size:20px; line-height:1.55; max-width:58ch; margin:28px 0 0; color:#E6E3DC;">High-energy, welcoming tap dance classes led by Chloe Lewis. Whether you're returning to dance or stepping in for the first time, build confidence, technique and performance skills in a supportive environment. No audition required.</p>
1003        <div style="display:flex; gap:16px; margin-top:34px; flex-wrap:wrap;">
1004          <a class="cs-btn cs-btn--inv" href="mailto:[email protected]">Email to enrol →</a>
1005        </div>
1006      </div>
1007    </section>
1008    <section style="max-width:1600px; margin:0 auto; padding:88px 48px 40px;">
1009      <div style="display:flex; align-items:center; gap:16px; margin-bottom:36px;">
1010        <span style="font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#6B6B68;">Class schedule</span>
1011        <div style="flex:1; height:1px; background:#D9D5CC;"></div>
1012      </div>
1013      <div style="display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:#D9D5CC; border:1px solid #D9D5CC;">
1014        <sc-for list="{{ danceSchedule }}" as="c" hint-placeholder-count="2">
1015          <div style="background:#F4F1EA; padding:36px 34px;">
1016            <div style="font-family:'JetBrains Mono',monospace; font-size:14px; color:#E8472B;">{{ c.time }}</div>
1017            <h3 style="font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:28px; letter-spacing:-.02em; margin:12px 0 4px;">{{ c.t }}</h3>
1018            <div style="font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#6B6B68;">{{ c.tag }}</div>
1019            <p style="font-size:15px; line-height:1.6; color:#3A3A37; margin:16px 0 0;">{{ c.d }}</p>
1020          </div>
1021        </sc-for>
1022      </div>
1023    </section>
1024    <section style="max-width:1600px; margin:0 auto; padding:24px 48px 40px; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#D9D5CC; border:1px solid #D9D5CC;">
1025      <div style="background:#0A0A0A; color:#F4F1EA; padding:36px 32px;">
1026        <div style="font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#F2D65A; margin-bottom:16px;">Pricing</div>
1027        <div style="font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:40px; letter-spacing:-.02em; line-height:1;">$15</div>
1028        <p style="font-size:14px; color:#A8A59E; margin:8px 0 18px;">per class · one hour</p>
1029        <p style="font-size:14px; line-height:1.55; color:#A8A59E; margin:0;">Paid at the class. Come casually or join every week — whatever suits you.</p>
1030      </div>
1031      <div style="background:#F4F1EA; padding:36px 32px;">
1032        <div style="font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#6B6B68; margin-bottom:16px;">Who it's for</div>
1033        <div style="display:flex; flex-direction:column;">
1034          <sc-for list="{{ danceWho }}" as="w" hint-placeholder-count="3">
1035            <div style="font-size:15px; line-height:1.5; color:#0A0A0A; padding:10px 0 10px 18px; position:relative; border-bottom:1px solid #E4E0D6;"><span style="position:absolute; left:0; top:10px; color:#E8472B; font-weight:700;">/</span>{{ w }}</div>
1036          </sc-for>
1037        </div>
1038      </div>
1039      <div style="background:#F4F1EA; padding:36px 32px;">
1040        <div style="font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#6B6B68; margin-bottom:16px;">What to bring</div>
1041        <div style="display:flex; flex-direction:column;">
1042          <sc-for list="{{ danceBring }}" as="b" hint-placeholder-count="3">
1043            <div style="font-size:15px; line-height:1.5; color:#0A0A0A; padding:10px 0 10px 18px; position:relative; border-bottom:1px solid #E4E0D6;"><span style="position:absolute; left:0; top:10px; color:#E8472B; font-weight:700;">/</span>{{ b }}</div>
1044          </sc-for>
1045        </div>
1046      </div>
1047    </section>
1048    <section style="max-width:1100px; margin:0 auto; padding:40px 48px 96px;">
1049      <div style="background:#0A0A0A; color:#F4F1EA; padding:56px 48px;">
1050        <h2 style="font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:clamp(26px,3.2vw,40px); letter-spacing:-.02em; line-height:1.05; margin:0 0 16px;">How to join.</h2>
1051        <p style="font-size:17px; line-height:1.6; color:#C9C6BF; margin:0 0 24px; max-width:56ch;">Getting started is simple. Email <a class="cs-link-u" href="mailto:[email protected]" style="color:#8FD3F4; font-weight:700;">[email protected]</a> to secure your place or ask a question — or just arrive on the night and join in. Classes are held at 22 Princes Highway, Norlane.</p>
1052        <a class="cs-btn cs-btn--inv" href="mailto:[email protected]">Email to enrol →</a>
1053      </div>
1054    </section>
1055  </div>
1056  </sc-if>
1057
1058  <!-- ══════════════ CONTACT ══════════════ -->
1059  <sc-if value="{{ isContact }}">
1060  <div class="cs-fade">
1061    <section style="max-width:1600px; margin:0 auto; padding:64px 48px 0;">
1062      <div style="display:flex; align-items:center; gap:16px; margin-bottom:40px;">
1063        <span style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#6B6B68;">Contact</span>
1064        <div style="flex:1; height:1px; background:#D9D5CC;"></div>
1065        <span style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#6B6B68;">Norlane / North Geelong / Fyansford</span>
1066      </div>
1067      <h1 style="font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:clamp(56px,9vw,144px); letter-spacing:-.03em; line-height:.9; margin:0;">Write to us.</h1>
1068    </section>
1069    <section style="max-width:1600px; margin:0 auto; padding:64px 48px 96px; display:grid; grid-template-columns:1fr 1.1fr; gap:80px; align-items:start;">
1070      <div style="display:flex; flex-direction:column; gap:40px;">
1071        <div>
1072          <div style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#6B6B68; margin-bottom:12px;">General enquiries</div>
1073          <a class="cs-link-u" href="mailto:[email protected]" style="font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:28px; letter-spacing:-.02em; display:block;">[email protected]</a>
1074          <div style="font-family:'JetBrains Mono',monospace; font-size:15px; color:#3A3A37; margin-top:8px;">(03) 5272 1775</div>
1075        </div>
1076        <div>
1077          <div style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#6B6B68; margin-bottom:12px;">Education team</div>
1078          <a class="cs-link-u" href="mailto:[email protected]" style="font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:28px; letter-spacing:-.02em; display:block;">[email protected]</a>
1079          <div style="font-family:'JetBrains Mono',monospace; font-size:15px; color:#3A3A37; margin-top:8px;">(03) 5272 1775</div>
1080        </div>
1081        <p style="font-size:14px; color:#6B6B68; margin:0; max-width:44ch; line-height:1.6;">Please note our office hours vary and we encourage you to leave a voice mail if unattended.</p>
1082        <div style="border-top:1px solid #D9D5CC; padding-top:28px; display:flex; flex-direction:column; gap:18px;">
1083          <div>
1084            <div style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#6B6B68; margin-bottom:6px;">Head office</div>
1085            <div style="font-family:'JetBrains Mono',monospace; font-size:14px; color:#3A3A37;">22 Princess Highway, Norlane, 3214</div>
1086          </div>
1087          <div>
1088            <div style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#6B6B68; margin-bottom:6px;">Rehearsal studios</div>
1089            <div style="font-family:'JetBrains Mono',monospace; font-size:14px; color:#3A3A37; line-height:1.7;">22 Princess Highway, Norlane, 3214<br>26 Rodney Road, North Geelong<br>+ Classes at Vines Road Community Centre</div>
1090          </div>
1091        </div>
1092      </div>
1093      <div style="background:#FFFFFF; border:1px solid #D9D5CC; padding:48px;">
1094        <div style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#6B6B68;">Enquiry</div>
1095        <h2 style="font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:44px; letter-spacing:-.02em; margin:12px 0 32px;">Send a message.</h2>
1096        <div style="display:flex; flex-direction:column; gap:26px;">
1097          <div><div style="font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#6B6B68; margin-bottom:6px;">Full name</div><input placeholder="Your name" style="width:100%; height:48px; padding:0 12px; background:transparent; border:0; border-bottom:1px solid #0A0A0A; font-family:Arial; font-size:17px; outline:none;"></div>
1098          <div><div style="font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#6B6B68; margin-bottom:6px;">Email</div><input placeholder="[email protected]" style="width:100%; height:48px; padding:0 12px; background:transparent; border:0; border-bottom:1px solid #0A0A0A; font-family:Arial; font-size:17px; outline:none;"></div>
1099          <div><div style="font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#6B6B68; margin-bottom:6px;">Subject</div><input placeholder="Tickets / classes / auditions / general" style="width:100%; height:48px; padding:0 12px; background:transparent; border:0; border-bottom:1px solid #0A0A0A; font-family:Arial; font-size:17px; outline:none;"></div>
1100          <div><div style="font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#6B6B68; margin-bottom:6px;">Message</div><textarea rows="4" placeholder="How can we help?" style="width:100%; padding:12px; background:transparent; border:1px solid #0A0A0A; font-family:Arial; font-size:17px; resize:vertical; outline:none;"></textarea></div>
1101          <button class="cs-btn" style="align-self:flex-start;" onClick="{{ onSend }}">{{ sendLabel }}</button>
1102        </div>
1103      </div>
1104    </section>
1105  </div>
1106  </sc-if>
1107
1108  <!-- ══════════════ BIO (hidden) ══════════════ -->
1109  <sc-if value="{{ isBio }}">
1110  <div class="cs-fade">
1111    <section style="max-width:1100px; margin:0 auto; padding:64px 48px 0;">
1112      <div style="display:flex; align-items:center; gap:16px; margin-bottom:40px;">
1113        <span style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#6B6B68;">Program bios</span>
1114        <div style="flex:1; height:1px; background:#D9D5CC;"></div>
1115        <span style="font-family:'JetBrains Mono',monospace; font-size:12px; color:#6B6B68;">Cast &amp; crew</span>
1116      </div>
1117      <h1 style="font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:clamp(48px,8vw,120px); letter-spacing:-.03em; line-height:.9; margin:0;">Submit your bio.</h1>
1118      <p style="font-size:19px; line-height:1.55; max-width:58ch; margin:32px 0 0; color:#3A3A37;">Let's share your story. Read the outline below and submit your bio to be printed in our theatre program. Please note bios may be edited by our creative team &mdash; to reduce information being cut, please follow the guidelines.</p>
1119    </section>
1120    <section style="max-width:1100px; margin:0 auto; padding:56px 48px 0;">
1121      <div style="display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:#D9D5CC; border:1px solid #D9D5CC;">
1122        <sc-for list="{{ bioGuides }}" as="g" hint-placeholder-count="6">
1123          <div style="background:#F4F1EA; padding:30px 32px; border-top:4px solid #2E6FB7;">
1124            <div style="font-family:'JetBrains Mono',monospace; font-size:12px; color:#2E6FB7; margin-bottom:12px;">{{ g.n }}</div>
1125            <h3 style="font-size:19px; font-weight:700; letter-spacing:-.01em; margin:0 0 10px;">{{ g.t }}</h3>
1126            <p style="font-size:15px; line-height:1.55; color:#3A3A37; margin:0;">{{ g.d }}</p>
1127          </div>
1128        </sc-for>
1129      </div>
1130    </section>
1131    <section style="max-width:1100px; margin:0 auto; padding:56px 48px 0;">
1132      <div style="background:#0A0A0A; color:#F4F1EA; padding:44px 48px;">
1133        <div style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#F2D65A; margin-bottom:8px;">Format your credits like this</div>
1134        <p style="font-family:'JetBrains Mono',monospace; font-size:15px; line-height:1.7; color:#EAF4FF; margin:0 0 24px;">Role <span style="color:#A8A59E;">(in italics)</span> &mdash; SHOW NAME IN CAPITALS <span style="color:#A8A59E;">(Company in brackets)</span><br>e.g. Sarah recently appeared as <em>Lina Lamont</em> &mdash; SINGIN' IN THE RAIN (CentreStage)</p>
1135        <div style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#A8A59E; margin-bottom:12px;">Example bio</div>
1136        <p style="font-size:16px; line-height:1.7; color:#EAF4FF; margin:0; max-width:80ch;">Kethly has been a familiar face in the Geelong theatre scene for over 30 years. Some of her credits include <em>Velma</em> &mdash; CHICAGO (Theatre of the Damned), <em>Demeter</em> &mdash; CATS, and <em>Logainne Schwartzandgrubenierre</em> &mdash; 25TH ANNUAL PUTNAM COUNTY SPELLING BEE (Doorstep Arts). In 2007, Kethly was awarded the Music Theatre Guild of Victoria Award for Best Female in a Lead Role for her portrayal of <em>Sally Bowles</em> &mdash; CABARET (GSODA). She has worked as a teacher and director in performing-arts education for 25 years, and would like to thank CentreStage for this opportunity and her family for their support.</p>
1137      </div>
1138    </section>
1139    <section style="max-width:1100px; margin:0 auto; padding:56px 48px 96px;">
1140      <div style="background:#FFFFFF; border:1px solid #D9D5CC; padding:48px;">
1141        <div style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#6B6B68;">Submit</div>
1142        <h2 style="font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:40px; letter-spacing:-.02em; margin:12px 0 32px;">Send us your bio.</h2>
1143        <div style="display:grid; grid-template-columns:1fr 1fr; gap:26px;">
1144          <div><div style="font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#6B6B68; margin-bottom:6px;">First name</div><input placeholder="Your name" style="width:100%; height:48px; padding:0 12px; background:transparent; border:0; border-bottom:1px solid #0A0A0A; font-family:Arial; font-size:17px; outline:none;"></div>
1145          <div><div style="font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#6B6B68; margin-bottom:6px;">Pronouns</div><input placeholder="e.g. she/her" style="width:100%; height:48px; padding:0 12px; background:transparent; border:0; border-bottom:1px solid #0A0A0A; font-family:Arial; font-size:17px; outline:none;"></div>
1146          <div><div style="font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#6B6B68; margin-bottom:6px;">Email</div><input placeholder="[email protected]" style="width:100%; height:48px; padding:0 12px; background:transparent; border:0; border-bottom:1px solid #0A0A0A; font-family:Arial; font-size:17px; outline:none;"></div>
1147          <div><div style="font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#6B6B68; margin-bottom:6px;">Role &amp; show</div><input placeholder="e.g. Ensemble — FROZEN" style="width:100%; height:48px; padding:0 12px; background:transparent; border:0; border-bottom:1px solid #0A0A0A; font-family:Arial; font-size:17px; outline:none;"></div>
1148        </div>
1149        <div style="margin-top:26px;"><div style="font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#6B6B68; margin-bottom:6px;">Your bio</div><textarea rows="6" placeholder="Paste your bio here, following the guidelines above." style="width:100%; padding:12px; background:transparent; border:1px solid #0A0A0A; font-family:Arial; font-size:17px; resize:vertical; outline:none;"></textarea></div>
1150        <button class="cs-btn" style="margin-top:28px;" onClick="{{ onSend }}">{{ sendLabel }}</button>
1151      </div>
1152    </section>
1153  </div>
1154  </sc-if>
1155
1156  </main>
1157
1158  <!-- ══════════════ MEDIA ══════════════ -->
1159  <sc-if value="{{ isMedia }}">
1160  <div class="cs-fade">
1161    <section style="background:#0A0A0A; color:#F4F1EA;">
1162      <div style="max-width:1600px; margin:0 auto; padding:96px 48px 72px;">
1163        <span style="font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#E8472B;">Media <span style="color:#6B6B68;">/</span> Press</span>
1164        <h1 style="font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:clamp(52px,8vw,132px); letter-spacing:-.03em; line-height:.9; margin:20px 0 0;">In the press.</h1>
1165        <p style="font-size:20px; line-height:1.55; max-width:60ch; margin:32px 0 0; color:#C9C6BF;">For fifteen years, Geelong's media has followed the CentreStage story — award recognition, record-breaking productions, and more than a million dollars raised for the community. A multi-award-winning company, proudly of the north.</p>
1166      </div>
1167    </section>
1168
1169    <section style="background:#0A0A0A; color:#F4F1EA; border-top:1px solid #1F1F1D;">
1170      <div style="max-width:1600px; margin:0 auto; padding:0 48px 88px;">
1171        <div style="display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:#1F1F1D; border:1px solid #1F1F1D;">
1172          <sc-for list="{{ pressStats }}" as="s" hint-placeholder-count="4">
1173            <div style="background:#0A0A0A; padding:40px 28px;">
1174              <div style="font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:clamp(32px,3.4vw,52px); letter-spacing:-.02em; line-height:1; color:{{ s.color }};">{{ s.n }}</div>
1175              <div style="font-size:14px; line-height:1.5; color:#A8A59E; margin-top:14px;">{{ s.l }}</div>
1176            </div>
1177          </sc-for>
1178        </div>
1179      </div>
1180    </section>
1181
1182    <section style="max-width:1600px; margin:0 auto; padding:88px 48px 40px;">
1183      <div style="display:flex; align-items:center; gap:16px; margin-bottom:12px;">
1184        <span style="font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#6B6B68;">Awards &amp; recognition</span>
1185        <div style="flex:1; height:1px; background:#D9D5CC;"></div>
1186      </div>
1187      <div style="display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:#D9D5CC; border:1px solid #D9D5CC;">
1188        <sc-for list="{{ accolades }}" as="a" hint-placeholder-count="8">
1189          <div style="background:#F4F1EA; padding:30px 26px 34px; display:flex; flex-direction:column; gap:12px;">
1190            <span style="font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:600; color:#E8472B;">{{ a.y }}</span>
1191            <h3 style="font-size:18px; font-weight:700; letter-spacing:-.01em; line-height:1.2; margin:0;">{{ a.t }}</h3>
1192            <p style="font-size:13px; line-height:1.5; color:#3A3A37; margin:0;">{{ a.d }}</p>
1193          </div>
1194        </sc-for>
1195      </div>
1196    </section>
1197
1198    <section style="max-width:1600px; margin:0 auto; padding:56px 48px 40px;">
1199      <div style="display:flex; align-items:center; gap:16px; margin-bottom:36px;">
1200        <span style="font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#6B6B68;">Coverage</span>
1201        <div style="flex:1; height:1px; background:#D9D5CC;"></div>
1202      </div>
1203      <div style="display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:#D9D5CC; border:1px solid #D9D5CC;">
1204        <sc-for list="{{ media }}" as="m" hint-placeholder-count="6">
1205          <a href="{{ m.href }}" target="_blank" rel="noopener" class="cs-row" style="background:#F4F1EA; padding:36px 34px 40px; display:flex; flex-direction:column; gap:16px; text-decoration:none; color:inherit; transition:background .2s;">
1206            <div style="display:flex; align-items:center; gap:14px;">
1207              <span style="font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600; letter-spacing:.04em; color:#0A0A0A;">{{ m.outlet }}</span>
1208              <span style="width:4px; height:4px; border-radius:50%; background:#6B6B68;"></span>
1209              <span style="font-family:'JetBrains Mono',monospace; font-size:12px; color:#6B6B68;">{{ m.date }}</span>
1210              <span style="margin-left:auto; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#F4F1EA; background:{{ m.accent }}; padding:4px 9px;">{{ m.tag }}</span>
1211            </div>
1212            <h3 style="font-size:23px; font-weight:700; letter-spacing:-.01em; line-height:1.22; margin:0; text-wrap:pretty;">{{ m.title }}</h3>
1213            <p style="font-size:15px; line-height:1.55; color:#3A3A37; margin:0;">{{ m.blurb }}</p>
1214            <span style="font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.04em; color:#0A0A0A; margin-top:2px;">Read at {{ m.outlet }} ↗</span>
1215          </a>
1216        </sc-for>
1217      </div>
1218    </section>
1219
1220    <section style="max-width:1600px; margin:0 auto; padding:56px 48px 40px;">
1221      <div style="display:flex; align-items:center; gap:16px; margin-bottom:36px;">
1222        <span style="font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#6B6B68;">Watch</span>
1223        <div style="flex:1; height:1px; background:#D9D5CC;"></div>
1224      </div>
1225      <div style="display:grid; grid-template-columns:repeat(2,1fr); gap:32px;">
1226        <sc-for list="{{ ytVideos }}" as="v" hint-placeholder-count="4">
1227          <a href="{{ v.watch }}" target="_blank" rel="noopener" class="cs-imgz" style="display:flex; flex-direction:column; gap:14px; text-decoration:none; color:inherit;">
1228            <div style="position:relative; aspect-ratio:16/9; background:#0A0A0A; overflow:hidden;">
1229              <img src="{{ v.thumb }}" alt="CentreStage video" style="position:absolute; inset:0; width:100%; height:100%; object-fit:cover;">
1230              <div style="position:absolute; inset:0; display:flex; align-items:center; justify-content:center;">
1231                <div style="width:66px; height:66px; border-radius:50%; background:rgba(10,10,10,.72); display:flex; align-items:center; justify-content:center;">
1232                  <svg width="22" height="22" viewBox="0 0 24 24" fill="#F4F1EA"><path d="M8 5v14l11-7z"></path></svg>
1233                </div>
1234              </div>
1235            </div>
1236            <span class="cs-link-u" style="font-family:'JetBrains Mono',monospace; font-size:12px; color:#0A0A0A;">Watch on YouTube ↗</span>
1237          </a>
1238        </sc-for>
1239      </div>
1240      <div style="display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#D9D5CC; border:1px solid #D9D5CC; margin-top:32px;">
1241        <sc-for list="{{ socialVideos }}" as="v" hint-placeholder-count="3">
1242          <a href="{{ v.href }}" target="_blank" rel="noopener" class="cs-row" style="background:#F4F1EA; padding:28px 26px 32px; display:flex; flex-direction:column; gap:10px; text-decoration:none; color:inherit; transition:background .2s;">
1243            <span style="font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#E8472B;">{{ v.platform }}</span>
1244            <p style="font-size:15px; line-height:1.5; color:#0A0A0A; margin:0; font-weight:700;">{{ v.blurb }}</p>
1245            <span style="font-family:'JetBrains Mono',monospace; font-size:12px; color:#6B6B68; margin-top:2px;">Watch ↗</span>
1246          </a>
1247        </sc-for>
1248      </div>
1249    </section>
1250  </div>
1251  </sc-if>
1252
1253  <!-- ══════════════ WWCC (unlisted) ══════════════ -->
1254  <sc-if value="{{ isWwcc }}">
1255  <div class="cs-fade">
1256    <section style="background:#0A0A0A; color:#F4F1EA;">
1257      <div style="max-width:1000px; margin:0 auto; padding:88px 48px 72px;">
1258        <span style="font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#E8472B;">Volunteers <span style="color:#6B6B68;">/</span> Compliance</span>
1259        <h1 style="font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:clamp(40px,6.4vw,86px); letter-spacing:-.03em; line-height:.92; margin:22px 0 0;">Working with Children Check.</h1>
1260        <p style="font-size:19px; line-height:1.6; max-width:56ch; margin:28px 0 0; color:#C9C6BF;">Every CentreStage volunteer who works with or around young people must hold a current Working with Children Check. Use this form to submit your card and confirm you have read our child safety commitments.</p>
1261      </div>
1262    </section>
1263
1264    <section style="max-width:1000px; margin:0 auto; padding:64px 48px 24px;">
1265      <div style="display:flex; align-items:center; gap:16px; margin-bottom:28px;">
1266        <span style="font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#6B6B68;">Before you begin</span>
1267        <div style="flex:1; height:1px; background:#D9D5CC;"></div>
1268      </div>
1269      <div style="display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#D9D5CC; border:1px solid #D9D5CC;">
1270        <sc-for list="{{ wwccPrep }}" as="p" hint-placeholder-count="3">
1271          <div style="background:#F4F1EA; padding:30px 26px 34px; display:flex; flex-direction:column; gap:10px;">
1272            <span style="font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600; color:#2E6FB7;">{{ p.n }}</span>
1273            <h3 style="font-size:17px; font-weight:700; letter-spacing:-.01em; line-height:1.25; margin:0;">{{ p.t }}</h3>
1274            <p style="font-size:14px; line-height:1.55; color:#3A3A37; margin:0;">{{ p.d }}</p>
1275          </div>
1276        </sc-for>
1277      </div>
1278    </section>
1279
1280    <sc-if value="{{ wwccDone }}">
1281      <section style="max-width:1000px; margin:0 auto; padding:48px 48px 104px;">
1282        <div style="background:#0A0A0A; color:#F4F1EA; border-top:4px solid #2E8B6B; padding:56px 48px;">
1283          <span style="font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#8FE0B0;">Submitted</span>
1284          <h2 style="font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:clamp(28px,3.4vw,44px); letter-spacing:-.02em; line-height:1; margin:18px 0 16px;">Thank you, {{ wwccName }}.</h2>
1285          <sc-if value="{{ wwccSent }}">
1286            <p style="font-size:17px; line-height:1.6; color:#C9C6BF; margin:0; max-width:52ch;">Your Working with Children Check has been received and saved securely to our volunteer records, along with your agreement to our child safety commitments. Our Child Safety Officer will verify your card and be in touch only if anything further is needed.</p>
1287          </sc-if>
1288          <sc-if value="{{ wwccMailFallback }}">
1289            <p style="font-size:17px; line-height:1.6; color:#C9C6BF; margin:0 0 8px; max-width:52ch;">Your details and agreement have been recorded and an email has opened in your mail app, pre-filled and addressed to our Child Safety Officer.</p>
1290            <div style="background:#1F1F1D; border-left:4px solid #E8472B; padding:22px 24px; margin:24px 0 0;">
1291              <p style="font-size:16px; line-height:1.6; color:#F4F1EA; margin:0; font-weight:700;">One last step: attach your card photo</p>
1292              <p style="font-size:15px; line-height:1.6; color:#C9C6BF; margin:10px 0 0;">Attach <span style="font-family:'JetBrains Mono',monospace; color:#7FD3FF;">{{ wwccFileDone }}</span> to that email and press send. Your submission is not complete until we receive the image.</p>
1293              <p style="font-size:14px; line-height:1.6; color:#A8A59E; margin:14px 0 0;">If no email opened, send your card photo to <a class="cs-link-u" href="mailto:[email protected]" style="color:#F4F1EA;">[email protected]</a> quoting your full name and card number.</p>
1294            </div>
1295          </sc-if>
1296          <p style="font-family:'JetBrains Mono',monospace; font-size:13px; color:#A8A59E; margin:22px 0 0;">Completed {{ wwccStamp }}</p>
1297        </div>
1298      </section>
1299    </sc-if>
1300
1301    <sc-if value="{{ wwccForm }}">
1302    <form onSubmit="{{ wwccSubmit }}">
1303      <section style="max-width:1000px; margin:0 auto; padding:56px 48px 0;">
1304        <div style="display:flex; align-items:center; gap:16px; margin-bottom:28px;">
1305          <span style="font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#6B6B68;">Your details</span>
1306          <div style="flex:1; height:1px; background:#D9D5CC;"></div>
1307        </div>
1308        <div style="display:grid; grid-template-columns:1fr 1fr; gap:24px;">
1309          <label style="display:flex; flex-direction:column; gap:8px;">
1310            <span style="font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;">Full legal name <span style="color:#E8472B;">*</span></span>
1311            <span style="font-size:13px; line-height:1.5; color:#6B6B68;">Exactly as it appears on your Working with Children Check.</span>
1312            <input type="text" required="true" value="{{ wName }}" onChange="{{ wSetName }}" placeholder="e.g. Jane Elizabeth Citizen" class="cs-input" style="width:100%; background:transparent; border:0; border-bottom:1px solid #0A0A0A; color:#0A0A0A; height:48px; padding:0 12px; font-size:17px; font-family:Arial,sans-serif;">
1313          </label>
1314          <label style="display:flex; flex-direction:column; gap:8px;">
1315            <span style="font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;">Preferred name</span>
1316            <span style="font-size:13px; line-height:1.5; color:#6B6B68;">What we should call you in rehearsals and backstage.</span>
1317            <input type="text" value="{{ wPref }}" onChange="{{ wSetPref }}" placeholder="e.g. Jane" class="cs-input" style="width:100%; background:transparent; border:0; border-bottom:1px solid #0A0A0A; color:#0A0A0A; height:48px; padding:0 12px; font-size:17px; font-family:Arial,sans-serif;">
1318          </label>
1319          <label style="display:flex; flex-direction:column; gap:8px;">
1320            <span style="font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;">Email <span style="color:#E8472B;">*</span></span>
1321            <input type="email" required="true" value="{{ wEmail }}" onChange="{{ wSetEmail }}" placeholder="[email protected]" class="cs-input" style="width:100%; background:transparent; border:0; border-bottom:1px solid #0A0A0A; color:#0A0A0A; height:48px; padding:0 12px; font-size:17px; font-family:Arial,sans-serif;">
1322          </label>
1323          <label style="display:flex; flex-direction:column; gap:8px;">
1324            <span style="font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;">Mobile <span style="color:#E8472B;">*</span></span>
1325            <input type="tel" required="true" value="{{ wPhone }}" onChange="{{ wSetPhone }}" placeholder="04XX XXX XXX" class="cs-input" style="width:100%; background:transparent; border:0; border-bottom:1px solid #0A0A0A; color:#0A0A0A; height:48px; padding:0 12px; font-size:17px; font-family:Arial,sans-serif;">
1326          </label>
1327          <label style="display:flex; flex-direction:column; gap:8px;">
1328            <span style="font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;">WWCC card number <span style="color:#E8472B;">*</span></span>
1329            <input type="text" required="true" value="{{ wCard }}" onChange="{{ wSetCard }}" placeholder="e.g. 1234567A-01" class="cs-input" style="width:100%; background:transparent; border:0; border-bottom:1px solid #0A0A0A; color:#0A0A0A; height:48px; padding:0 12px; font-size:17px; font-family:'JetBrains Mono',monospace;">
1330          </label>
1331          <label style="display:flex; flex-direction:column; gap:8px;">
1332            <span style="font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;">Card expiry <span style="color:#E8472B;">*</span></span>
1333            <span style="font-size:13px; line-height:1.5; color:#6B6B68;">Expired cards cannot be accepted.</span>
1334            <input type="date" required="true" value="{{ wExpiry }}" onChange="{{ wSetExpiry }}" class="cs-input" style="width:100%; background:transparent; border:0; border-bottom:1px solid #0A0A0A; color:#0A0A0A; height:48px; padding:0 12px; font-size:17px; font-family:'JetBrains Mono',monospace;">
1335            <sc-if value="{{ wExpiryWarn }}">
1336              <span style="font-size:13px; line-height:1.5; font-weight:700; color:{{ wExpiryWarnColor }};">{{ wExpiryWarn }}</span>
1337            </sc-if>
1338          </label>
1339        </div>
1340        <div style="margin-top:24px;">
1341          <span style="display:block; font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; margin-bottom:8px;">Card type <span style="color:#E8472B;">*</span></span>
1342          <span style="display:block; font-size:13px; line-height:1.5; color:#6B6B68; margin-bottom:12px;">All three are accepted. Volunteer checks are free in Victoria, and current VIT registration is recognised in place of a WWCC.</span>
1343          <div style="display:flex; gap:12px; flex-wrap:wrap;">
1344            <label style="display:flex; align-items:center; gap:12px; background:#F4F1EA; border:1px solid #D9D5CC; padding:16px 22px; cursor:pointer; flex:1;
1344 min-width:200px;">
1345              <input type="radio" name="wwcctype" checked="{{ wTypeVol }}" onChange="{{ wSetVol }}" style="width:20px; height:20px; accent-color:#0A0A0A;">
1346              <span style="display:flex; flex-direction:column; gap:3px;">
1347                <span style="font-size:16px; font-weight:700;">Volunteer check</span>
1348                <span style="font-size:13px; color:#6B6B68;">Free, for unpaid roles</span>
1349              </span>
1350            </label>
1351            <label style="display:flex; align-items:center; gap:12px; background:#F4F1EA; border:1px solid #D9D5CC; padding:16px 22px; cursor:pointer; flex:1; min-width:200px;">
1352              <input type="radio" name="wwcctype" checked="{{ wTypeEmp }}" onChange="{{ wSetEmp }}" style="width:20px; height:20px; accent-color:#0A0A0A;">
1353              <span style="display:flex; flex-direction:column; gap:3px;">
1354                <span style="font-size:16px; font-weight:700;">Employee check</span>
1355                <span style="font-size:13px; color:#6B6B68;">For paid or mixed roles</span>
1356              </span>
1357            </label>
1358            <label style="display:flex; align-items:center; gap:12px; background:#F4F1EA; border:1px solid #D9D5CC; padding:16px 22px; cursor:pointer; flex:1;
1358 min-width:200px;">
1359              <input type="radio" name="wwcctype" checked="{{ wTypeVit }}" onChange="{{ wSetVit }}" style="width:20px; height:20px; accent-color:#0A0A0A;">
1360              <span style="display:flex; flex-direction:column; gap:3px;">
1361                <span style="font-size:16px; font-weight:700;">VIT registration</span>
1362                <span style="font-size:13px; color:#6B6B68;">Victorian Institute of Teaching</span>
1363              </span>
1364            </label>
1365          </div>
1366        </div>
1367      </section>
1368
1369      <section style="max-width:1000px; margin:0 auto; padding:52px 48px 0;">
1370        <div style="display:flex; align-items:center; gap:16px; margin-bottom:28px;">
1371          <span style="font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#6B6B68;">Upload your card</span>
1372          <div style="flex:1; height:1px; background:#D9D5CC;"></div>
1373        </div>
1374        <label style="display:block; background:#F4F1EA; border:2px dashed #A8A59E; padding:44px 36px; cursor:pointer; text-align:center; transition:border-color .2s, background .2s;">
1375          <span style="display:block; font-family:'Arial Black',Arial,sans-serif; font-weight:900; font-size:22px; letter-spacing:-.02em; margin-bottom:10px;">{{ wFileLabel }}</span>
1376          <span style="display:block; font-size:14px; line-height:1.6; color:#3A3A37; max-width:52ch; margin:0 auto;">A clear photo or scan of the front of your Working with Children Check card, showing your name, photo, card number and expiry date. JPG, PNG or PDF.</span>
1377          <span style="display:block; font-size:13px; line-height:1.6; color:#6B6B68; max-width:52ch; margin:12px auto 0;">Selecting your card here records it against your submission. You will be asked to attach the same file to the confirmation email at the final step.</span>
1378          <input type="file" accept="image/*,application/pdf" onChange="{{ wSetFile }}" style="position:absolute; width:1px; height:1px; opacity:0; overflow:hidden;">
1379        </label>
1380        <p style="font-family:'JetBrains Mono',monospace; font-size:12px; line-height:1.6; color:#6B6B68; margin:14px 0 0;">Your card image is held securely and used only to verify your check. It is never published or shared beyond our Child Safety Officer and management.</p>
1381      </section>
1382
1383      <section style="max-width:1000px; margin:0 auto; padding:52px 48px 0;">
1384        <div style="display:flex; align-items:center; gap:16px; margin-bottom:28px;">
1385          <span style="font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#6B6B68;">Volunteer agreement</span>
1386          <div style="flex:1; height:1px; background:#D9D5CC;"></div>
1387        </div>
1388        <div style="display:flex; flex-direction:column; gap:1px; background:#D9D5CC; border:1px solid #D9D5CC;">
1389          <sc-for list="{{ wwccTerms }}" as="t" hint-placeholder-count="5">
1390            <label style="background:#F4F1EA; padding:28px 30px; display:flex; gap:18px; align-items:flex-start; cursor:pointer; border-left:4px solid {{ t.color }};">
1391              <input type="checkbox" required="true" checked="{{ t.on }}" onChange="{{ t.toggle }}" style="width:22px; height:22px; margin-top:2px; flex-shrink:0; accent-color:#0A0A0A;">
1392              <span style="display:flex; flex-direction:column; gap:7px;">
1393                <span style="font-size:17px; font-weight:700; letter-spacing:-.01em; line-height:1.3;">{{ t.t }}</span>
1394                <span style="font-size:15px; line-height:1.6; color:#3A3A37;">{{ t.d }}</span>
1395              </span>
1396            </label>
1397          </sc-for>
1398        </div>
1399        <p style="font-size:14px; line-height:1.6; color:#3A3A37; margin:22px 0 0; max-width:70ch;">These commitments sit alongside our full <a class="cs-link-u" href="/health">Child Safety Plan and Code of Conduct</a>. All five must be agreed before you can volunteer with CentreStage.</p>
1400      </section>
1401
1402      <section style="max-width:1000px; margin:0 auto; padding:44px 48px 104px;">
1403        <div style="background:#0A0A0A; color:#F4F1EA; padding:44px 40px;">
1404          <p style="font-size:16px; line-height:1.6; color:#C9C6BF; margin:0 0 8px;">By submitting this form you declare the information provided is true and correct, and that the card uploaded is your own current Working with Children Check.</p>
1405          <p style="font-family:'JetBrains Mono',monospace; font-size:13px; color:#7FD3FF; margin:0 0 28px;">
1405This submission will be timestamped {{ wwccNow }}</p>
1406          <sc-if value="{{ wwccError }}">
1407            <p style="font-family:'JetBrains Mono',monospace; font-size:13px; color:#FF8A6B; margin:0 0 20px;">{{ wwccError }}</p>
1408          </sc-if>
1409          <button type="submit" class="cs-btn cs-btn--inv" style="justify-content:center;">{{ wwccBtnLabel }}</button>
1410        </div>
1411      </section>
1412    </form>
1413    </sc-if>
1414  </div>
1415  </sc-if>
1416
1417  <!-- ══════════════ FOOTER ══════════════ -->
1418  <footer style="background:#0A0A0A; color:#F4F1EA;">
1419    <div style="max-width:1600px; margin:0 auto; padding:72px 48px 36px;">
1420      <div style="display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:48px; align-items:start;">
1421        <div>
1422          <img src="assets/CentreStage-Solid-White.png" alt="CentreStage" style="height:28px; margin-bottom:24px;">
1423          <p style="font-size:14px; line-height:1.6; color:#A8A59E; max-width:34ch; margin:0 0 20px;">Established 2010. Theatre, Education &amp; Agency Representation, proudly based in Geelong.</p>
1424          <div style="font-family:'JetBrains Mono',monospace; font-size:13px; color:#A8A59E;">[email protected]<br>(03) 5272 1775</div>
1425        </div>
1426        <div>
1427          <div style="font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#A8A59E; margin-bottom:16px;">Explore</div>
1428          <div style="display:flex; flex-direction:column; gap:10px; font-size:14px;">
1429            <a class="cs-link-u" href="/tickets" style="color:#F4F1EA;">Tickets</a>
1430            <a class="cs-link-u" href="/about" style="color:#F4F1EA;">About</a>
1431            <a class="cs-link-u" href="/productions" style="color:#F4F1EA;">Previous Productions</a>
1432            <a class="cs-link-u" href="/blog" style="color:#F4F1EA;">Journal</a>
1433            <a class="cs-link-u" href="/media" style="color:#F4F1EA;">Media &amp; Press</a>
1434            <a class="cs-link-u" href="/wwcc" style="color:#F4F1EA;">Volunteer WWCC</a>
1435          </div>
1436        </div>
1437        <div>
1438          <div style="font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#A8A59E; margin-bottom:16px;">Take part</div>
1439          <div style="display:flex; flex-direction:column; gap:10px; font-size:14px;">
1440            <a class="cs-link-u" href="/education" style="color:#F4F1EA;">Education Program</a>
1441            <a class="cs-link-u" href="/involved" style="color:#F4F1EA;">Get Involved</a>
1442            <a class="cs-link-u" href="https://www.centrestageagency.org.au" target="_blank" rel="noopener" style="color:#F4F1EA;">Agency ↗</a>
1443            <a class="cs-link-u" href="https://www.centrestageagency.org.au/podcast" target="_blank" rel="noopener" style="color:#F4F1EA;">Podcast ↗</a>
1444          </div>
1445        </div>
1446        <div>
1447          <div style="font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#A8A59E; margin-bottom:16px;">Care</div>
1448          <div style="display:flex; flex-direction:column; gap:10px; font-size:14px;">
1449            <a class="cs-link-u" href="/health" style="color:#F4F1EA;">Health &amp; Wellbeing</a>
1450            <a class="cs-link-u" href="/contact" style="color:#F4F1EA;">Contact</a>
1451          </div>
1452        </div>
1453      </div>
1454      <div style="height:1px; background:#1F1F1D; margin:56px 0 28px;"></div>
1455      <div style="display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:36px;">
1456        <span style="font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#A8A59E; margin-right:8px;">Follow <span style="color:#6B6B68;">/</span> @centrestageaus</span>
1457        <a class="cs-social" href="https://www.facebook.com/centrestageaus" target="_blank" rel="noopener" aria-label="Facebook" title="Facebook">
1458          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M15 3h-2.5A3.5 3.5 0 0 0 9 6.5V9H6.5v3H9v9h3v-9h2.5l.5-3H12V6.5a.5.5 0 0 1 .5-.5H15z"/></svg>
1459        </a>
1460        <a class="cs-social" href="https://www.instagram.com/centrestageaus" target="_blank" rel="noopener" aria-label="Instagram" title="Instagram">
1461          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.2" cy="6.8" r="1" fill="currentColor" stroke="none"/></svg>
1462        </a>
1463        <a class="cs-social" href="https://www.tiktok.com/@centrestageaus" target="_blank" rel="noopener" aria-label="TikTok" title="TikTok">
1464          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round"><path d="M14 4v9.5a3.5 3.5 0 1 1-3.5-3.5"/><path d="M14 7a4.5 4.5 0 0 0 4.5 4.5"/></svg>
1465        </a>
1466        <a class="cs-social" href="https://www.linkedin.com/company/centrestageaus" target="_blank" rel="noopener" aria-label="LinkedIn" title="LinkedIn">
1467          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M7 10v7M7 7v.01M11 17v-4a2 2 0 0 1 4 0v4M11 10v7"/></svg>
1468        </a>
1469        <a class="cs-social" href="https://www.youtube.com/@centrestageaus" target="_blank" rel="noopener" aria-label="YouTube" title="YouTube">
1470          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"><rect x="3" y="6" width="18" height="12" rx="3"/><path d="M11 9.5l3.5 2.5L11 14.5z" fill="currentColor" stroke="none"/></svg>
1471        </a>
1472        <a class="cs-social cs-social--pod" href="https://open.spotify.com/show/2TUccyv0vDjXqLiWYLTMOv" target="_blank" rel="noopener" title="OnStage Casting Call podcast">
1473          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="9"/><path d="M8 10.5c2.5-.8 5-.5 7.5 1M8.5 13.2c2-.6 3.8-.4 5.6.8M9 15.6c1.4-.4 2.6-.3 3.8.5"/></svg>
1474          <span style="font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.04em;">OnStage Casting Call</span>
1475        </a>
1476      </div>
1477      <div style="display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-family:'JetBrains Mono',monospace; font-size:11px; color:#A8A59E; letter-spacing:.04em;">
1478        <span>© 2026 CENTRESTAGE PTY LTD</span>
1479        <span>GEELONG <span style="color:#6B6B68;">/</span> VICTORIA <span style="color:#6B6B68;">/</span> AUSTRALIA</span>
1480        <span>THEATRE / EDUCATION / AGENCY</span>
1481      </div>
1482    </div>
1483  </footer>
1484
1485  <!-- Accessibility tool -->
1486  <button aria-label="Accessibility options" onClick="{{ a11yToggle }}" style="position:fixed; right:24px; bottom:24px; z-index:100; width:56px; height:56px; border-radius:50%; border:2px solid #0A0A0A; background:#2E6FB7; color:#fff; cursor:pointer; box-shadow:0 12px 28px -10px rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center;">
1487    <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="3.6" r="1.5" fill="currentColor" stroke="none"></circle><path d="M4 7c3 1.2 5 1.6 8 1.6S17 8.2 20 7"></path><path d="M12 8.6V14"></path><path d="M12 14l-3 6.4"></path><path d="M12 14l3 6.4"></path></svg>
1488  </button>
1489  <div style="{{ a11yPanel }}">
1490    <div style="position:fixed; right:24px; bottom:92px; z-index:100; width:326px; background:#fff; border:2px solid #0A0A0A; box-shadow:0 24px 60px -20px rgba(0,0,0,.45);">
1491      <div style="display:flex; justify-content:space-between; align-items:center; padding:16px 20px; background:#0A0A0A; color:#F4F1EA;">
1492        <span style="font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;">Accessibility tools</span>
1493        <button onClick="{{ a11yToggle }}" aria-label="Close" style="border:0; background:transparent; color:#F4F1EA; font-size:22px; cursor:pointer; line-height:1;">&times;</button>
1494      </div>
1495      <div style="padding:10px 14px 16px;">
1496        <div style="display:flex; justify-content:space-between; align-items:center; padding:14px 6px; border-bottom:1px solid #ECE7DB;">
1497          <span style="font-size:15px; font-weight:700;">Text size <span style="font-family:'JetBrains Mono',monospace; font-size:12px; color:#6B6B68; font-weight:400;">{{ a11yScaleLabel }}</span></span>
1498          <div style="display:flex; gap:6px;">
1499            <button onClick="{{ a11yTextDown }}" aria-label="Decrease text size" style="width:34px;height:34px;border:1px solid #0A0A0A;background:#fff;cursor:pointer;font-weight:900;font-size:14px;">A-</button>
1500            <button onClick="{{ a11yTextUp }}" aria-label="Increase text size" style="width:34px;height:34px;border:1px solid #0A0A0A;background:#fff;cursor:pointer;font-weight:900;font-size:17px;">A+</button>
1501          </div>
1502        </div>
1503        <button onClick="{{ a11yContrast }}" style="{{ a11yContrastStyle }}"><span>Boost contrast</span><span style="font-family:'JetBrains Mono',monospace; font-size:12px;">{{ a11yContrastLabel }}</span></button>
1504        <button onClick="{{ a11yUnderline }}" style="{{ a11yUnderlineStyle }}"><span>Underline links</span><span style="font-family:'JetBrains Mono',monospace; font-size:12px;">{{ a11yUnderlineLabel }}</span></button>
1505        <button onClick="{{ a11yFont }}" style="{{ a11yFontStyle }}"><span>Readable font</span><span style="font-family:'JetBrains Mono',monospace; font-size:12px;">{{ a11yFontLabel }}</span></button>
1506        <button onClick="{{ a11yMotion }}" style="{{ a11yMotionStyle }}"><span>Reduce motion</span><span style="font-family:'JetBrains Mono',monospace; font-size:12px;">{{ a11yMotionLabel }}</span></button>
1507        <button onClick="{{ a11yReset }}" style="width:100%; margin-top:12px; height:42px; border:1px solid #0A0A0A; background:#0A0A0A; color:#F4F1EA; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; cursor:pointer;">Reset all</button>
1508      </div>
1509    </div>
1510  </div>
1511
1512</div>
1513</x-dc>
1514<script type="text/x-dc" data-dc-script>
1515class Component extends DCLogic {
1516  state = { route: "home", slug: null, data: null, sent: false, menuOpen: false, a11yOpen: false, a11y: { scale: 1, contrast: false, underline: false, font: false, motion: false } };
1517
1518  componentDidMount() {
1519    this._route = () => {
1520      let parts = (location.pathname || "/").replace(/^\/+|\/+$/g, "").split("/").filter(function (x) { return x && !/\.html?$/i.test(x); });
1521      const known = ["home","tickets","about","education","health","productions","involved","blog","shop","contact","bio","media","weekly","singing","dance","wwcc"];
1522      const pi = parts.lastIndexOf("post");
1523      if (pi >= 0 && parts[pi + 1]) {
1524        this.setState({ route: "post", slug: parts[pi + 1], sent: false });
1525      } else {
1526        const last = parts[parts.length - 1] || "";
1527        this.setState({ route: known.indexOf(last) >= 0 ? last : "home", slug: null, sent: false });
1528      }
1529      window.scrollTo(0, 0);
1530      this.setState({ menuOpen: false });
1531      this._meta();
1532    };
1533    this._click = (e) => {
1534      const a = e.target.closest && e.target.closest("a");
1535      if (!a) return;
1536      const href = a.getAttribute("href") || "";
1537      if (href[0] === "/" && href[1] !== "/" && !a.target) {
1538        e.preventDefault();
1539        if (href !== location.pathname) { history.pushState(null, "", href); this._route(); }
1540        else { this.setState({ menuOpen: false }); }
1541      }
1542    };
1543    this._meta = () => {
1544      const base = "https://centrestage.org.au";
1545      const path = location.pathname || "/";
1546      const priv = path.indexOf("wwcc") > -1;
1547      const abs = (u) => !u ? base + "/assets/og-image.jpg" : (/^https?:/.test(u) ? u : base + "/" + String(u).replace(/^\/+/, ""));
1548      const site = "CentreStage \u2014 Theatre, Education & Agency, Geelong";
1549      const pages = {
1550        home: { t: site, d: "Award-winning Geelong theatre since 2010. Ambitious productions, a performing arts academy for ages 4\u201318, and talent representation.", i: "assets/og-image.jpg" },
1551        tickets: { t: "What's On \u2014 CentreStage, Geelong", d: "Book tickets to CentreStage productions at the Geelong Arts Centre, Costa Hall and beyond \u2014 from blockbuster musicals to our student showcases.", i: "assets/frozen-keyart.png" },
1552        about: { t: "About CentreStage \u2014 Geelong's Theatre Company", d: "One of Australia's largest amateur musical theatre companies. Our story, our values, our creative team, and the corporate social responsibility framework behind everything we do.", i: "assets/blog/stage-15.jpg" },
1553        education: { t: "Performing Arts Academy \u2014 CentreStage Education", d: "Weekly classes for ages 4\u201318 in acting, singing and dance, taught by VIT-registered educators. Geelong's largest theatre education program.", i: "assets/youth/music-man.jpg" },
1554        weekly: { t: "Weekly Classes \u2014 CentreStage Performing Arts Academy", d: "Saturday group classes for young performers across four terms, aligned with the school year. No experience needed to start.", i: "assets/youth/music-man.jpg" },
1555        singing: { t: "Private Voice & Acting Sessions \u2014 CentreStage", d: "One-to-one Voice and Acting sessions with experienced performers and educators. Audition prep, self-tape coaching, vocal technique and repertoire.", i: "assets/educators/storm-randall.jpg" },
1556        dance: { t: "Dance Classes \u2014 CentreStage, Geelong", d: "Thursday-night tap classes for all skill levels in a supportive, inclusive and energetic environment.", i: "assets/youth/beauty-beast-hi.png" },
1557        health: { t: "Health, Wellbeing & Inclusion \u2014 CentreStage", d: "Our child safety plan, wellbeing pledge, reconciliation action plan and full policy library \u2014 plus live support lines for anyone who needs them.", i: "assets/og-image.jpg" },
1558        blog: { t: "The CentreStage Journal", d: "News, cast announcements, craft advice and wellbeing resources from Geelong's theatre company.", i: "assets/blog/frozen-audition-panel.jpg" },
1559        media: { t: "CentreStage in the Media", d: "Order of Australia recognition, Geelong Business Excellence Hall of Fame, $1M+ raised for charity, and press coverage of Priscilla, Les Mis\u00e9rables and more.", i: "assets/og-image.jpg" },
1560        shop: { t: "Shop \u2014 CentreStage Merchandise", d: "Show shirts, hoodies and keepsakes from CentreStage productions. Every purchase supports our programs.", i: "assets/og-image.jpg" },
1561        contact: { t: "Contact CentreStage \u2014 Geelong", d: "Get in touch about tickets, classes, auditions, costume hire or media enquiries. We answer the phone.", i: "assets/og-image.jpg" },
1562        involved: { t: "Get Involved \u2014 CentreStage, Geelong", d: "Perform, play in the pit, join a production team, volunteer or take on work experience. There is a way in for everyone.", i: "assets/blog/stage-19.png" },
1563        productions: { t: "Productions \u2014 CentreStage, Geelong", d: "Fifteen years of ambitious musical theatre in Geelong, from Les Mis\u00e9rables to Priscilla to Frozen.", i: "assets/frozen-keyart.png" },
1564        wwcc: { t: "Volunteer WWCC Submission \u2014 CentreStage", d: "Working with Children Check 
1564submission for CentreStage volunteers.", i: "assets/og-image.jpg" },
1565        bio: { t: "David Greenwood OAM \u2014 CentreStage", d: "Managing Director and Senior Talent Agent, CentreStage Pty Ltd.", i: "assets/og-image.jpg" },
1566      };
1567      let meta = pages[this.state.route] || pages.home;
1568      let type = "website";
1569      if (this.state.route === "post" && this.state.slug) {
1570        const dat = this.state.data;
1571        const found = dat && dat.POSTS && dat.POSTS.filter((p) => p.slug === this.state.slug)[0];
1572        if (found) {
1573          meta = { t: found.title + " \u2014 CentreStage", d: found.excerpt || pages.blog.d, i: found.img || pages.blog.i };
1574          type = "article";
1575        } else { meta = pages.blog; }
1576      }
1577      const title = meta.t, desc = meta.d, img = abs(meta.i), url = base + path;
1578      document.title = title;
1579      const set = (sel, attr, val) => { const el = document.querySelector(sel); if (el) el.setAttribute(attr, val); };
1580      set('meta[name="description"]', "content", desc);
1581      set('meta[property="og:type"]', "content", type);
1582      set('meta[property="og:title"]', "content", title);
1583      set('meta[property="og:description"]', "content", desc);
1584      set('meta[property="og:image"]', "content", img);
1585      set('meta[property="og:image:alt"]', "content", title);
1586      set('meta[property="og:url"]', "content", url);
1587      set('meta[name="twitter:title"]', "content", title);
1588      set('meta[name="twitter:description"]', "content", desc);
1589      set('meta[name="twitter:image"]', "content", img);
1590      set('meta[name="twitter:image:alt"]', "content", title);
1591      set('meta[name="robots"]', "content", priv ? "noindex, nofollow, noarchive" : "index, follow");
1592      let can = document.querySelector('link[rel="canonical"]');
1593      if (!can) { can = document.createElement("link"); can.setAttribute("rel", "canonical"); document.head.appendChild(can); }
1594      can.setAttribute("href", url);
1595    };
1596    window.addEventListener("popstate", this._route);
1597    document.addEventListener("click", this._click);
1598    this._route();
1599    import("./content.js").then((m) => this.setState({ data: m }, () => this._meta()));
1600    this._a11yEl = document.createElement("style");
1601    this._a11yEl.id = "cs-a11y";
1602    document.head.appendChild(this._a11yEl);
1603    this.applyA11y();
1604    this.lazyImgs();
1605  }
1606  componentDidUpdate() { this.applyA11y(); this.lazyImgs(); }
1607  lazyImgs() {
1608    try {
1609      document.querySelectorAll("img:not([data-lz])").forEach((i) => {
1610        i.setAttribute("data-lz", "1");
1611        i.loading = "lazy";
1612        i.decoding = "async";
1613      });
1614    } catch (e) {}
1615  }
1616  componentWillUnmount() {
1617    window.removeEventListener("popstate", this._route);
1618    document.removeEventListener("click", this._click);
1619    try { document.body.style.zoom = ""; document.body.style.filter = ""; } catch (e) {}
1620    if (this._a11yEl) this._a11yEl.remove();
1621  }
1622  applyA11y() {
1623    const a = this.state.a11y;
1624    try {
1625      document.body.style.zoom = a.scale;
1626      document.body.style.filter = a.contrast ? "contrast(1.35)" : "";
1627    } catch (e) {}
1628    if (!this._a11yEl) return;
1629    let css = "";
1630    if (a.underline) css += "a{text-decoration:underline !important;text-underline-offset:3px;}";
1631    if (a.font) css += "*{font-family:Verdana,Tahoma,Geneva,sans-serif !important;letter-spacing:.01em !important;}";
1632    if (a.motion) css += "*,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important;}";
1633    this._a11yEl.textContent = css;
1634  }
1635  setA11y(patch) { this.setState((s) => ({ a11y: { ...s.a11y, ...patch } })); }
1636  a11yVals() {
1637    const a = this.state.a11y;
1638    const row = (on) => "width:100%;display:flex;justify-content:space-between;align-items:center;padding:13px 8px;font-size:15px;font-weight:700;cursor:pointer;text-align:left;border:0;border-bottom:1px solid #ECE7DB;background:" + (on ? "#E7F0FA" : "#fff") + ";color:" + (on ? "#2E6FB7" : "#0A0A0A") + ";";
1639    const lbl = (on) => (on ? "ON" : "OFF");
1640    return {
1641      a11yPanel: this.state.a11yOpen ? "" : "display:none;",
1642      a11yScaleLabel: Math.round(a.scale * 100) + "%",
1643      a11yContrastStyle: row(a.contrast), a11yContrastLabel: lbl(a.contrast),
1644      a11yUnderlineStyle: row(a.underline), a11yUnderlineLabel: lbl(a.underline),
1645      a11yFontStyle: row(a.font), a11yFontLabel: lbl(a.font),
1646      a11yMotionStyle: row(a.motion), a11yMotionLabel: lbl(a.motion),
1647      a11yToggle: () => this.setState((s) => ({ a11yOpen: !s.a11yOpen })),
1648      a11yTextUp: () => this.setA11y({ scale: Math.min(1.6, +(this.state.a11y.scale + 0.1).toFixed(2)) }),
1649      a11yTextDown: () => this.setA11y({ scale: Math.max(0.9, +(this.state.a11y.scale - 0.1).toFixed(2)) }),
1650      a11yContrast: () => this.setA11y({ contrast: !this.state.a11y.contrast }),
1651      a11yUnderline: () => this.setA11y({ underline: !this.state.a11y.underline }),
1652      a11yFont: () => this.setA11y({ font: !this.state.a11y.font }),
1653      a11yMotion: () => this.setA11y({ motion: !this.state.a11y.motion }),
1654      a11yReset: () => this.setState({ a11y: { scale: 1, contrast: false, underline: false, font: false, motion: false } }),
1655    };
1656  }
1657
1658  navStyle(id) {
1659    return this.state.route === id ? "border-bottom-color:#0A0A0A;" : "";
1660  }
1661
1662  fmtStamp(d) {
1663    const pad = (n) => (n < 10 ? "0" + n : "" + n);
1664    const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
1665    const mon = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "
1665November", "December"];
1666    let h = d.getHours(); const ap = h >= 12 ? "pm" : "am";
1667    h = h % 12; if (h === 0) h = 12;
1668    return days[d.getDay()] + " " + d.getDate() + " " + mon[d.getMonth()] + " " + d.getFullYear() +
1669      " at " + h + ":" + pad(d.getMinutes()) + ap;
1670  }
1671
1672  wix(id) {
1673    return "https://static.wixstatic.com/media/" + id + "/v1/fill/w_900,h_600,al_c,q_85,enc_avif,quality_auto/file.avif";
1674  }
1675
1676  renderVals() {
1677    const r = this.state.route;
1678    const d = this.state.data;
1679    const shows = (d && d.SHOWS || []).map((s) => {
1680      const feat = s.featured;
1681      return {
1682        ...s,
1683        bg: feat ? "#0A0A0A" : "#F4F1EA",
1684        fg: feat ? "#F4F1EA" : "#0A0A0A",
1685        meta: feat ? "#F2D65A" : "#6B6B68",
1686        body: feat ? "#F4F1EA" : "#3A3A37",
1687        btnClass: feat ? "cs-btn--inv" : "",
1688        soldOut: s.status === "Sold out",
1689        onSale: s.status !== "Sold out",
1690        imgFit: s.poster ? "contain" : "cover",
1691        imgBg: s.poster ? "#0A0A0A" : "transparent",
1692        statusColor: s.status === "Sold out" ? "#6B6B68" : "#E8472B",
1693        statusFg: s.status === "Sold out" ? "#F4F1EA" : "#F4F1EA",
1694        ctaLabel: s.status === "Sold out" ? "Sold out" : s.cta + " →",
1695      };
1696    });
1697    const productions = (d && d.PRODUCTIONS || []).map((p) => ({
1698      ...p,
1699      tag: /Showcase|Camp|Launch|Awards|Pop Up|Sing Out|Bending|Forbidden/i.test(p.t) ? "Event" : "Production",
1700    }));
1701    const catColor = (c) => ({ "News": "#2E6FB7", "Cast Announcement": "#E8472B", "Health & Wellbeing": "#2E8B6B", "Advice": "#C9902D", "Craft": "#2E6FB7", "Behind the Scenes": "#7A4FB5", "Community": "#2E8B6B" }[c] || "#0A0A0A");
1702    const posts = (d && d.POSTS || []).map((p) => ({ ...p, catColor: catColor(p.cat) }));
1703    let post = null;
1704    if (r === "post") {
1705      const found = posts.find((p) => p.slug === this.state.slug) || posts[0] || {};
1706      post = {
1707        ...found,
1708        body: found.body || [],
1709        noBody: !(found.body && found.body.length),
1710        url: "/blog",
1711      };
1712    }
1713
1714    return {
1715      isHome: r === "home", isTickets: r === "tickets", isAbout: r === "about",
1716      isEducation: r === "education", isHealth: r === "health", isProductions: r === "productions",
1717      isInvolved: r === "involved", isBlog: r === "blog", isPost: r === "post",
1718      isShop: false, isContact: r === "contact", isBio: r === "bio", isMedia: r === "media",
1719      isWeekly: r === "weekly", isSinging: r === "singing", isDance: r === "dance",
1720      isWwcc: r === "wwcc",
1721      wwccDone: !!this.state.wwccDone, wwccForm: !this.state.wwccDone,
1722      wwccName: this.state.wwccName || "", wwccStamp: this.state.wwccStamp || "",
1723      wwccFileDone: this.state.wFile || "your card photo",
1724      wwccSent: !!this.state.wwccSent, wwccMailFallback: !this.state.wwccSent,
1725      wwccBtnLabel: this.state.wwccSending ? "Submitting…" : "Submit my Working with Children Check",
1726      wwccNow: this.fmtStamp(new Date()), wwccError: this.state.wwccError || "",
1727      wName: this.state.wName || "", wPref: this.state.wPref || "", wEmail: this.state.wEmail || "",
1728      wPhone: this.state.wPhone || "", wCard: this.state.wCard || "", wExpiry: this.state.wExpiry || "",
1729      wType: this.state.wType || "",
1730      wTypeVol: this.state.wType === "Volunteer", wTypeEmp: this.state.wType === "Employee", wTypeVit: this.state.wType === "VIT",
1731      wSetVol: () => this.setState({ wType: "Volunteer", wwccError: "" }),
1732      wSetEmp: () => this.setState({ wType: "Employee", wwccError: "" }),
1733      wSetVit: () => this.setState({ wType: "VIT", wwccError: "" }),
1734      wExpiryWarn: (() => {
1735        const v = this.state.wExpiry;
1736        if (!v) return "";
1737        const exp = new Date(v + "T23:59:59");
1738        if (isNaN(exp.getTime())) return "";
1739        const today = new Date(); today.setHours(0, 0, 0, 0);
1740        if (exp < today) return "This card has expired and cannot be accepted. Please renew it before submitting.";
1741        const soon = new Date(today.getTime() + 60 * 86400000);
1742        if (exp <= soon) return "Heads up — this card expires within 60 days. Please plan to renew it.";
1743        return "";
1744      })(),
1745      wExpiryWarnColor: (() => {
1746        const v = this.state.wExpiry;
1747        if (!v) return "#6B6B68";
1748        const exp = new Date(v + "T23:59:59");
1749        if (isNaN(exp.getTime())) return "#6B6B68";
1750        const today = new Date(); today.setHours(0, 0, 0, 0);
1751        return exp < today ? "#E8472B" : "#C9902D";
1752      })(),
1753      wSetName: (e) => this.setState({ wName: e.target.value, wwccError: "" }),
1754      wSetPref: (e) => this.setState({ wPref: e.target.value }),
1755      wSetEmail: (e) => this.setState({ wEmail: e.target.value, wwccError: "" }),
1756      wSetPhone: (e) => this.setState({ wPhone: e.target.value, wwccError: "" }),
1757      wSetCard: (e) => this.setState({ wCard: e.target.value, wwccError: "" }),
1758      wSetExpiry: (e) => this.setState({ wExpiry: e.target.value, wwccError: "" }),
1759      wSetFile: (e) => {
1760        const f = e.target.files && e.target.files[0];
1761        if (!f) { this.setState({ wFile: "", wFileData: "" }); return; }
1762        if (f.size > 10 * 1024 * 1024) {
1763          this.setState({ wFile: "", wFileData: "", wwccError: "That file is larger than 10MB. Please upload a smaller photo." });
1764          return;
1765        }
1766        this.setState({ wFile: f.name, wFileObj: f, wwccError: "" });
1767        const fr = new FileReader();
1768        fr.onload = () => this.setState({ wFileData: fr.result });
1769        fr.readAsDataURL(f);
1770      },
1771      wFileLabel: this.state.wFile ? "Selected: " + this.state.wFile : "Choose a photo of your WWCC card",
1772      wwccPrep: [
1773        { n: "01", t: "Have your card ready", d: "You will need your Working with Children Check card number, its expiry date, and a clear photo of the front of the card." },
1774        { n: "02", t: "Volunteer, Employee or VIT", d: "All three are accepted. Volunteer checks are free in Victoria, and current VIT registration is recognised in place of a WWCC. Whichever you hold, it must be current — expired cards cannot be accepted." },,
1775        { n: "03", t: "Allow five minutes", d: "You will confirm your details, upload your card and agree to our child safety commitments. Your submission is timestamped automatically." },
1776      ],
1777      wwccTerms: [
1778        { key: "t1", color: "#E8472B", on: !!this.state.t1, toggle: () => this.setState((s) => ({ t1: !s.t1, wwccError: "" })),
1779          t: "Child safety is my responsibility",
1780          d: "I have read and will uphold the CentreStage Child Safety Plan and Code of Conduct. I understand CentreStage has zero tolerance for child abuse, and that the safety and wellbeing of children comes before every other consideration." },
1781        { key: "t2", color: "#2E6FB7", on: !!this.state.t2, toggle: () => this.setState((s) => ({ t2: !s.t2, wwccError: "" })),
1782          t: "I will report concerns immediately",
1783          d: "I will report any concern, disclosure, allegation or observation about a child's safety to the Child Safety Officer without delay, and I understand serious matters are reported to Victoria Police and child protection authorities. In an emergency I will call 000." },
1784        { key: "t3", color: "#2E8B6B", on: !!this.state.t3, toggle: () => this.setState((s) => ({ t3: !s.t3, wwccError: "" })),
1785          t: "I will be identifiable as a volunteer",
1786          d: "I will wear my CentreStage lanyard and identification at all times while on site, at rehearsals, backstage and at performances, so that children, families and staff can always recognise me as an authorised volunteer." },
1787        { key: "t4", color: "#C9902D", on: !!this.state.t4, toggle: () => this.setState((s) => ({ t4: !s.t4, wwccError: "" })),
1788          t: "I will maintain safe boundaries",
1789          d: "I will never be alone one-to-one with a child, will use only approved and monitored communication channels, will never contact a young person privately or through personal social media, and will follow all supervision, change room and transport protocols." },
1790        { key: "t5", color: "#7A4FB5", on: !!this.state.t5, toggle: () => this.setState((s) => ({ t5: !s.t5, wwccError: "" })),
1791          t: "My check is current and I will keep it current",
1792          d: "The card I have uploaded is my own, is current, and I will notify CentreStage immediately if it expires, is revoked or if my circumstances change in any way that affects my suitability to work with children." },
1793      ],
1794      wwccSubmit: (e) => {
1795        e.preventDefault();
1796        const s = this.state;
1797        if (!s.wFile) { this.setState({ wwccError: "Please upload a photo of your Working with Children Check card." }); return; }
1798        if (!s.wExpiry) { this.setState({ wwccError: "Please enter the expiry date shown on your card." }); return; }
1799        const exp = new Date(s.wExpiry + "T23:59:59");
1800        const today = new Date(); today.setHours(0, 0, 0, 0);
1801        if (isNaN(exp.getTime())) { this.setState({ wwccError: "That expiry date could not be read. Please re-enter it." }); return; }
1802        if (exp < today) { this.setState({ wwccError: "This card expired on " + s.wExpiry + ". An expired Working with Children Check cannot be accepted — please renew it at service.vic.gov.au and submit this form again once you have your new card." }); return; }
1803        if (!s.wType) { this.setState({ wwccError: "Please select whether you hold a Volunteer check, Employee check or VIT registration." }); return; }
1804        if (!(s.t1 && s.t2 && s.t3 && s.t4 && s.t5)) { this.setState({ wwccError: "Please agree to all five volunteer commitments." }); return; }
1805        const stamp = this.fmtStamp(new Date());
1806        const endpoint = "https://formspree.io/f/xbgrbyel";
1807        if (endpoint) {
1808          this.setState({ wwccSending: true, wwccError: "" });
1809          const fd = new FormData();
1810          fd.append("_subject", "WWCC submission — " + (s.wName || "volunteer"));
1811          fd.append("Submitted at", stamp);
1812          fd.append("Full legal name", s.wName || "");
1813          fd.append("Preferred name", s.wPref || "");
1814          fd.append("email", s.wEmail || "");
1815          fd.append("Mobile", s.wPhone || "");
1816          fd.append("Card type", s.wType || "");
1817          fd.append("WWCC card number", s.wCard || "");
1818          fd.append("Card expiry", (s.wExpiry || "") + " (verified current at submission)");
1819          fd.append("Agreed to all five commitments", "YES");
1820          if (s.wFileObj) { fd.append("WWCC card image", s.wFileObj, s.wFile || "wwcc-card"); }
1821          fd.append("Card image file name", s.wFile || "");
1822          fetch(endpoint, { method: "POST", body: fd, headers: { Accept: "application/json" } })
1823            .then((r) => {
1824              if (!r.ok) { throw new Error("bad status"); }
1825              this.setState({ wwccDone: true, wwccSent: true, wwccSending: false, wwccStamp: stamp, wwccName: (s.wPref || s.wName || "volunteer") });
1826            })
1827            .catch(() => {
1828              this.setState({ wwccSending: false, wwccError: "We couldn't reach our submission service. Please check your connection and try again, or email your card to [email protected]." });
1829            });
1830          return;
1831        }
1832        const body = [
1833          "CentreStage — Working with Children Check submission",
1834          "",
1835          "Completed: " + stamp,
1836          "Full legal name: " + (s.wName || ""),
1837          "Preferred name: " + (s.wPref || ""),
1838          "Email: " + (s.wEmail || ""),
1839          "Mobile: " + (s.wPhone || ""),
1840          "WWCC card number: " + (s.wCard || ""),
1841          "Card type: " + (s.wType || ""),
1842          "Card expiry: " + (s.wExpiry || "") + "  (verified current at time of submission)",
1843          "Card image file: " + (s.wFile || ""),
1844          "",
1845          "Agreed to all five volunteer commitments: YES",
1846          "  1. Child safety is my responsibility",
1847          "  2. I will report concerns immediately",
1848          "  3. I will be identifiable as a volunteer",
1849          "  4. I will maintain safe boundaries",
1850          "  5. My check is current and I will keep it current",
1851          "",
1852          "IMPORTANT: please attach the card image file to this email before sending.",
1853        ].join("\n");
1854        try {
1855          window.location.href = "mailto:[email protected]?subject=" +
1856            encodeURIComponent("WWCC submission — " + (s.wName || "Volunteer")) +
1857            "&body=" + encodeURIComponent(body);
1858        } catch (err) {}
1859        this.setState({ wwccDone: true, wwccStamp: stamp, wwccName: (s.wPref || s.wName || "volunteer") });
1860      },
1861      adultSteps: [
1862        { n: "01", t: "Read the casting brief", d: "Check the character breakdown, rehearsal commitment and availability requirements before you book.", meta: "19 pages · PDF", link: "Download the brief ↗", href: "assets/frozen-casting-brief.pdf" },
1863        { n: "02", t: "Book your vocal audition", d: "Vocal auditions are by appointment only and must be attended by all auditionees, except those auditioning solely for Sven.", meta: "Cloverdale Community Centre, Corio", link: "Book at Appointy ↗", href: "https://booking.appointy.com/centrestageaus" },
1864        { n: "03", t: "Prepare your song and backing track", d: "One song in the style of Frozen — a 32-bar cut or roughly 90 seconds — performed solo to a backing track. Your MP3 must be attached to your audition form.", meta: "No songs from Frozen for initial auditions" },
1865        { n: "04", t: "Attend the Dance & Movement Call", d: "Compulsory for every adult auditionee, whatever role you are seeking. Optional tap and additional-skills components run either side of the main dance call.", meta: "Sunday 30 August 2026 · Geelong High School" },
1866        { n: "05", t: "Callbacks, if required", d: "Callback invitations are issued by email once all initial auditions conclude, with any preparation material provided at that time. Not all roles require a callback.", meta: "Sunday 13 September 2026" },
1867      ],
1868      auditionNights: [
1869        { d: "Monday 24 August", t: "From 7:00pm" },
1870        { d: "Wednesday 26 August", t: "From 7:00pm" },
1871        { d: "Monday 31 August", t: "From 7:00pm" },
1872        { d: "Tuesday 1 September", t: "From 7:00pm" },
1873        { d: "Wednesday 2 September", t: "From 7:00pm" },
1874      ],
1875      danceCall: [
1876        { t: "Tap audition", tag: "Optional", color: "#6B6B68", time: "3:30 – 4:30pm" },
1877        { t: "Dance call", tag: "All auditionees", color: "#E8472B", time: "4:30 – 6:00pm" },
1878        { t: "Additional skills", tag: "Optional", color: "#6B6B68", time: "6:00 – 6:15pm" },
1879        { t: "Partner call", tag: "By request", color: "#2E6FB7", time: "6:15 – 7:00pm" },
1880      ],
1881      lookingFor: ["Vocal ability", "Acting ability", "Characterisation", "Storytelling through performance", "Musicality and interpretation", "Suitability for the production"],
1882      trackRules: ["No lead vocals", "Ideally no backing vocals", "High-quality audio file", "Edited for the audition cut", "Clean start and finish", "Named Surname_FirstName_SongTitle"],
1883      songIdeas: [
1884        { t: "Journey to the Past", show: "Anastasia" },
1885        { t: "Out There", show: "Hunchback of Notre Dame" },
1886        { t: "A Change in Me", show: "Beauty and the Beast" },
1887        { t: "Proud of Your Boy", show: "Aladdin" },
1888        { t: "I Know It's Today", show: "Shrek the Musical" },
1889      ],
1890      youthSteps: [
1891        { n: "01", t: "Register your interest", d: "Book the youth audition workshop online. Young Anna and Young Elsa auditionees receive an Audition Pack 
1891with their audition confirmation, outlining every requirement for the day.", link: "Book the youth workshop ↗", href: "https://booking.appointy.com/centrestageaus?sr=1265931" },
1892        { n: "02", t: "Familiarise yourself with the musical", d: "Get to know the story, characters and songs of Frozen. All audition content will be taught on the day in a supportive workshop — there is nothing to prepare in advance." },
1893        { n: "03", t: "Audition and callback in one day", d: "Performers should be ready to work in different combinations with other auditionees as the creative team explores character relationships and chemistry." },
1894        { n: "04", t: "Movement and creative workshop", d: "A short workshop led by the creative team exploring musicality, physical storytelling, confidence and creativity. No formal dance training is required." },
1895      ],
1896      youthFacts: [
1897        { k: "Date", v: "Sunday 30 August 2026" },
1898        { k: "Time", v: "9:30am – 2:00pm" },
1899        { k: "Location", v: "Geelong High School Gymnasium" },
1900        { k: "What to wear", v: "Comfortable clothing and footwear" },
1901      ],
1902      youthQualities: ["Strong imagination and character connection", "Ability to communicate emotion and tell a story", "Musicality and willingness to learn", "Confidence, enthusiasm and a positive attitude", "Ability to collaborate and perform with others"],
1903      characters: [
1904        { name: "Elsa", gender: "Female presenting", range: "E3 – E5 · Mezzo-soprano with strong belt", d: "The newly crowned Queen of Arendelle: poised, regal and reserved, carrying the weight of fear, responsibility and expectation. Beneath her composed exterior lies deep vulnerability, strength and compassion." },
1905        { name: "Anna", gender: "Female presenting", range: "G3 – E5 · Soprano with musical theatre belt", d: "Warm-hearted, spirited and endlessly optimistic, with a playful sense of humour and fearless determination. Beneath the energy lies remarkable resilience and emotional maturity." },
1906        { name: "Kristoff", gender: "Male presenting", range: "A2 – B♭4 · Folk/pop-rock baritone", d: "An independent, resourceful ice harvester more comfortable with his reindeer than with people. Honest, practical and quietly compassionate, masking vulnerability with dry humour." },
1907        { name: "Olaf", gender: "Any gender", range: "Alto or tenor, depending on casting", d: "A magical snowman brought to life by Elsa's powers — joyful, curious and endlessly optimistic. Requires puppeteering, excellent physical comedy and a warm, character-driven voice." },
1908        { name: "Hans", gender: "Male presenting", range: "A2 – B4 · Polished, lyrical", d: "Charming, polished and seemingly sincere — the ideal prince. Beneath the impeccable manners is a calculating, ambitious man skilled at manipulating those around him." },
1909        { name: "Queen Iduna", gender: "Female presenting", range: "F3 – E5 · Warm, lyrical", d: "A compassionate and devoted mother whose warmth and strength are central to her family. Regal and protective, she carries the weight of secrets from her past." },
1910        { name: "King Agnarr", gender: "Male presenting", range: "B2 – C4 · Rich, grounded bass-baritone", d: "A commanding yet deeply loving father driven by an overwhelming desire to protect his family, making difficult decisions that create distance between them." },
1911        { name: "Duke of Weselton", gender: "Male presenting", range: "F3 – A4 · Bright and characterful", d: "Pompous, self-important and desperate to be taken seriously. His inflated sense of importance makes him a wonderfully comic character, especially as his confidence cracks." },
1912        { name: "Oaken", gender: "Male presenting", range: "A2 – B♭4 · Warm and characterful", d: "The cheerful, eccentric owner of Wandering Oaken's Trading Post and Sauna. A larger-than-life personality with unexpected moments of bluntness and real audience connection." },
1913        { name: "Pabbie", gender: "Male presenting", range: "A♭2 – G♭4 · Rich baritone", d: "Leader of the Hidden Folk, with a deep connection to the ancient magic and traditions of the forest. Wise, mysterious and quietly authoritative." },
1914        { name: "Bulda", gender: "Female presenting", range: "B♭3 – D5 · Warm and soulful", d: "A powerful and nurturing member of the Hidden Folk, deeply connected to the magic and natural world. Wise and perceptive, guiding others with warmth and quiet authority." },
1915        { name: "Sven", gender: "Any gender · Non-singing", range: "Physical storytelling role", d: "Kristoff's fiercely loyal companion — protective, stubborn and highly expressive, communicating almost entirely through physicality. Requires strong body awareness, coordination and stamina." },
1916        { name: "Young Anna", gender: "Female presenting · ~7–10 years", range: "B♭3 – E5 · Bright and youthful", d: "Energetic, curious and full of imagination, with infectious enthusiasm for the world around her. She adores her sister and approaches life with warmth and openness." },
1917        { name: "Young Elsa", gender: "Female presenting · ~9–12 years", range: "A3 – E5 · Clear and lyrical", d: "Bright, thoughtful and eager to do what is expected of her. As she begins to understand her magical abilities, she carries a growing sense of responsibility and fear." },
1918      ],
1919      ensembleRoles: ["Handmaidens", "Castle guards", "Bishop", "Doctor", "Weselton's Lackeys", "Townspeople", "Oaken's Family", "Hidden Folk", "Featured dancers"],
1920      keyDates: [
1921        { t: "Auditions commence", when: "Mon 24 Aug 2026", note: "Vocal auditions by appointment" },
1922        { t: "Youth audition · Young Anna & Young Elsa", when: "Sun 30 Aug 2026", note: "9:30am – 2:00pm" },
1923        { t: "Dance & Movement Call", when: "Sun 30 Aug 2026", note: "Compulsory for all adults" },
1924        { t: "Callbacks", when: "Sun 13 Sep 2026", note: "By invitation" },
1925        { t: "First full company rehearsal", when: "Sun 18 Oct 2026", note: "Table read · 1:30pm" },
1926        { t: "Christmas Carols event", when: "Wed 23 Dec 2026", note: "" },
1927        { t: "Holiday break", when: "21 Dec – 10 Jan", note: "" },
1928        { t: "Rehearsals resume", when: "Sun 10 Jan 2027", note: "" },
1929        { t: "Bump in", when: "Sun 28 Feb 2027", note: "" },
1930        { t: "Season", when: "5 – 20 Mar 2027", note: "15 performances at The Playhouse" },
1931      ],
1932      rehearsals: [
1933        { d: "Sundays", t: "1:30 – 6:30pm" },
1934        { d: "Mondays", t: "7:00 – 10:00pm" },
1935        { d: "Wednesdays", t: "7:00 – 10:00pm" },
1936      ],
1937      intensives: [
1938        { n: "Weekend one", d: "28 – 29 Nov 2026" },
1939        { n: "Weekend two", d: "16 – 17 Jan 2027" },
1940        { n: "Weekend three", d: "23 – 24 Jan 2027" },
1941      ],
1942      feeOptions: [
1943        { label: "Standard", price: "$125", color: "#0A0A0A", t: "Fee plus 10 hours", d: "Membership fee plus a nominated person aged 18+ contributing 10 hours of volunteer work across the production." },
1944        { label: "Option one", price: "$225", color: "#2E6FB7", t: "No volunteer hours", d: "Pay an additional $100 to be exempt from the 10-hour volunteer commitment and focus solely on your performance." },
1945        { label: "Option two", price: "$0", color: "#2E8B6B", t: "20 hours total", d: "Waive all membership fees by contributing 10 additional hours of volunteer work — 20 hours in total." },
1946      ],
1947      bioGuides: [
1948        { n: "01", t: "Word limits", d: "Lead roles 150 words max; all other roles and ensemble 100 words max; creative team 150 words max." },
1949        { n: "02", t: "Spell it CentreStage", d: "Capital C and capital S, one word, with no slash in the spelling." },
1950        { n: "03", t: "No shout-outs", d: "No business promotion or product plugs — that space is reserved for our sponsors." },
1951        { n: "04", t: "List your shows", d: "Role in italics — SHOW NAME IN CAPITALS (Company in brackets)." },
1952        { n: "05", t: "Spell check", d: "Proofread your bio with a friend before you send it." },
1953        { n: "06", t: "Name our classes right", d: "Refer to education classes as CentreStage or CPAA — not CEEPA." },
1954      ],
1955
1956      navHome: this.navStyle("home"),
1957      menuOpen: this.state.menuOpen,
1958      navOpenClass: this.state.menuOpen ? "cs-nav cs-nav--open" : "cs-nav",
1959      burgerIcon: this.state.menuOpen ? "\u2715" : "\u2261",
1960      toggleMenu: () => this.setState((s) => ({ menuOpen: !s.menuOpen })),
1961      navTickets: this.navStyle("tickets"), navAbout: this.navStyle("about"),
1962      navEducation: this.navStyle("education"), navHealth: this.navStyle("health"), navBlog: this.navStyle("blog"),
1963      navMedia: this.navStyle("media"),
1964
1965      shows, productions, prodCount: productions.length,
1966      posts, postCount: posts.length, homePosts: posts.slice(0, 3), post,
1967      helplines: d && d.HELPLINES || [],
1968      stats: (d && d.STATS || []).map((s, i) =>
1968 ({ ...s, color: ["#7FD3FF", "#F2D65A", "#8FE0B0", "#F2A65A"][i % 4] })),
1969      accreditations: d && d.ACCREDITATIONS || [],
1970      troupes: d && d.EDU_TROUPES || [], eduIncluded: d && d.EDU_INCLUDED || [],
1971      eduFacts: d && d.EDU_FACTS || [], privateLessons: d && d.PRIVATE_LESSONS || [],
1972      faqEdu: d && d.FAQ_EDU || [], values: d && d.VALUES || [], faqGeneral: d && d.FAQ_GENERAL || [],
1973      milestones: d && d.MILESTONES || [], partners: d && d.PARTNERS || [],
1974      policies: d && d.POLICIES || [], policyLibrary: d && d.POLICY_LIBRARY || [],
1975      media: d && d.MEDIA || [], accolades: d && d.ACCOLADES || [],
1976      weeklySteps: [
1977        { n: "01", t: "Register an account", d: "Visit the enrolment portal and click the Join Now button." },
1978        { n: "02", t: "Go to Registration", d: "Navigate to the Registration area of the portal." },
1979        { n: "03", t: "Add the parent", d: "Register the parent or carer who will receive all core emails." },
1980        { n: "04", t: "Add your child", d: "Create a child profile within the program." },
1981        { n: "05", t: "Choose a class", d: "Select your preferred class and click Enrol." },
1982        { n: "06", t: "Pay the $35 fee", d: "A $35 registration fee covers your performance t-shirt, calendar and insurances." },
1983        { n: "07", t: "Get ready for Week 1", d: "Keep an eye on your inbox and get ready for the first class." },
1984      ],
1985      weeklyBenefits: [
1986        "Learn new skills and develop a performance portfolio",
1987        "Take part in a variety of musical theatre performances and experiences",
1988        "Attend up to two large-scale CentreStage productions each year",
1989        "Learn theatre etiquette and practical skills like costumes and makeup",
1990        "Work alongside some of Australia's leading theatre professionals",
1991        "Build a strong network of theatre friends and mentors",
1992      ],
1993      singingRates: [
1994        { d: "30 minutes", p: "$35.00" },
1995        { d: "60 minutes", p: "$65.00" },
1996      ],
1997      singingBenefits: [
1998        "Vocal technique and song interpretation", "Audition preparation", "Self tape coaching and scene work",
1999        "Acting techniques and character development", "Monologues", "Musical theatre repertoire",
2000        "School or external performance projects", "Building confidence in performance", "Refining and strengthening your craft",
2001      ],
2002      singingSteps: [
2003        { n: "01", t: "Create or log in", d: "Visit our GoStudioPro portal and create a new student account, or log in with your existing account." },
2004        { n: "02", t: "Open Private Lessons", d: "Navigate to the Private Lessons section within the portal." },
2005        { n: "03", t: "Choose educator & evening", d: "Select from the available educators and evenings. Storm Randall is currently available on Wednesday evenings." },
2006        { n: "04", t: "Book your session", d: "Pick a 30 or 60 minute session. Term 3 sessions are held at Unit 2, 255 Hamilton Highway, Fyansford." },
2007      ],
2008      singingEducators: [
2009        { name: "Jake Waterworth", when: "Voice & Acting · Monday evenings currently unavailable", img: "assets/educators/jake-waterworth.jpg",
2010          bio: "A highly experienced performer and educator within our program. Jake brings current industry knowledge and real-world experience, giving students clear direction, constructive feedback and actionable strategies to improve their craft — whether preparing for an audition, refining a self tape or building confidence on stage." },
2011        { name: "Storm Randall", when: "Voice & Acting · Wednesday evenings", img: "assets/educators/storm-randall.jpg",
2012          bio: "A highly experienced performer and educator within our program. Storm delivers practical, focused and outcome-driven sessions across vocal technique, audition preparation, scene work and character development, supporting students at every stage of their development." },
2013      ],
2014      danceSchedule: [
2015        { time: "Thursday · 6.00 – 7.00pm", t: "Open Tap", tag: "Chloe Lewis · $15 / class", d: "Develop rhythm, coordination and strong tap foundations in a class that is practical, engaging and accessible." },
2016        { time: "Thursday · 7.00 – 8.00pm", t: "Broadway Bootcamp", tag: "Chloe Lewis · $15 / class", d: "Build strength, flexibility and musical theatre dance technique inspired by Broadway styles." },
2017      ],
2018      danceWho: [
2019        "Beginners looking to try dance in a supportive setting",
2020        "Performers wanting to build technique and consistency",
2021        "Anyone seeking a fun, active and community-focused class",
2022      ],
2023      danceBring: [
2024        "Comfortable clothing you can move in", "A water bottle", "Tap shoes for the tap class (or just ask us if you're starting out)",
2025      ],
2026      videos: d && d.VIDEOS || [],
2027      ytVideos: (d && d.VIDEOS || []).filter((v) => v.kind === "youtube").map((v) => ({ ...v, thumb: "https://i.ytimg.com/vi/" + v.id + "/hqdefault.jpg", watch: "https://www.youtube.com/watch?v=" + v.id })),
2028      socialVideos: (d && d.VIDEOS || []).filter((v) => v.kind !== "youtube").map((v) => ({ ...v, platform: v.kind === "facebook" ? "Facebook" : "Instagram" })),
2029      pressStats: (d && d.PRESS_STATS || []).map((s, i) =>
2029 ({ ...s, color: ["#7FD3FF", "#F2D65A", "#8FE0B0", "#F2A65A"][i % 4] })),
2030      ...this.a11yVals(),
2031
2032      featuredIn: ["9 News", "Sky News", "3AW", "Stage Whispers", "Geelong Advertiser", "Bay 93.9"],
2033      csr: [
2034        { n: "01", t: "Reducing our carbon footprint" },
2035        { n: "02", t: "Engaging in charity work and regular donations" },
2036        { n: "03", t: "Purchasing local" },
2037        { n: "04", t: "Investing in environmentally conscious strategies" },
2038        { n: "05", t: "Improving industry wages and rewarding staff" },
2039        { n: "06", t: "Comprehensive mental health commitment for our people" },
2040      ],
2041      classes: [
2042        { n: "01", t: "Weekly Classes", d: "Weekly group education for young performers, aligned with school terms across four terms of tuition.", cta: "Learn more", href: "/weekly" },
2043        { n: "02", t: "Private Voice & Acting", d: "One-to-one Voice and Acting sessions with Jake Waterworth or Storm Randall, tailored to every stage of a student's development.", cta: "Learn more", href: "/singing" },
2044        { n: "03", t: "Dance Classes", d: "Thursday-night tap classes for all skill levels in a supportive, inclusive and energetic environment.", cta: "Learn more", href: "/dance" },
2045      ],
2046      roles: [
2047        { n: "01", t: "Paid positions" },
2048        { n: "02", t: "Orchestra" },
2049        { n: "03", t: "Volunteering" },
2050        { n: "04", t: "Work experience" },
2051        { n: "05", t: "Internships" },
2052      ],
2053      resources: [
2054        { t: "A Message From the Arts Wellbeing Collective", href: "/post/arts-wellbeing-collective" },
2055        { t: "Getting Through the Post-Show 'Come Down'", href: "/post/art-come-down" },
2056        { t: "A Pre-Show Meditation for Performance Energy", href: "/post/pre-show-meditation" },
2057        { t: "7 Common Dance Injuries (and How to Prevent Them)", href: "/post/dance-injuries" },
2058        { t: "7 Tips to Keep Your Singing Voice Healthy", href: "/post/singing-voice-healthy" },
2059        { t: "How Do I Deal With Grief and Loss?", href: "/post/grief-and-loss" },
2060      ],
2061      agencyCols: [
2062        { n: "01", t: "Representation", d: "We represent performers across stage, screen, commercial and live performance — nationally, from our Geelong head office." },
2063        { n: "02", t: "Casting & Management", d: "Touchpoints in Melbourne, Sydney, Brisbane, Ballarat and Newcastle connect our talent to opportunities across the country." },
2064        { n: "03", t: "A proud MEAA member", d: "We build careers with care — unearthing and championing talent for the world's stages and screens." },
2065      ],
2066
2067      sendLabel: this.state.sent ? "Message sent ✓" : "Send message",
2068      onSend: (e) => { e.preventDefault(); this.setState({ sent: true }); },
2069    };
2070  }
2071}
2072</script>
2072
2073</body>
2074</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.